/* Sator Academy beta — unified dark bronze interface */
:root {
  --bg:#070706;
  --bg-soft:#0b0a09;
  --surface:#100f0d;
  --surface-2:#151310;
  --surface-3:#1c1915;
  --surface-glass:rgba(17,15,12,.84);
  --line:rgba(231,215,193,.105);
  --line-strong:rgba(231,191,139,.24);
  --text:#f3efe8;
  --text-soft:#d7d0c6;
  --muted:#9e978d;
  --gold:#c68b4b;
  --gold-bright:#e1ad70;
  --gold2:#79502f;
  --bronze-wash:rgba(198,139,75,.1);
  --good:#78bf91;
  --warn:#d6a45d;
  --bad:#d9766f;
  --side:258px;
  --radius-xs:10px;
  --radius-sm:14px;
  --radius:20px;
  --radius-lg:28px;
  --shadow-sm:0 10px 30px rgba(0,0,0,.18);
  --shadow:0 24px 80px rgba(0,0,0,.34);
  --ease:cubic-bezier(.2,.75,.25,1);
  font-family:Inter,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}

* { scrollbar-width:thin; scrollbar-color:#4c3a28 transparent; }
*::selection { background:rgba(213,157,95,.32); color:#fff9f0; }
html { background:var(--bg); scroll-behavior:smooth; }
body {
  min-width:320px;
  background:
    radial-gradient(1000px 680px at 98% -12%,rgba(169,105,50,.13),transparent 62%),
    radial-gradient(760px 560px at -15% 78%,rgba(103,77,51,.08),transparent 70%),
    var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.48;
  letter-spacing:-.006em;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}
img,video { max-width:100%; }
a,button,input,textarea,select,summary { -webkit-tap-highlight-color:transparent; }
a { transition:color .18s ease,opacity .18s ease,border-color .18s ease,background .18s ease,transform .18s var(--ease); }
button,input,textarea,select { font:inherit; }
button { touch-action:manipulation; }
:focus-visible { outline:2px solid var(--gold-bright)!important; outline-offset:3px; }

/* Application shell */
.app-shell.authenticated { grid-template-columns:var(--side) minmax(0,1fr); }
.app-main { min-width:0; }
.side-menu {
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:18px;
  height:100dvh;
  padding:17px 13px max(16px,env(safe-area-inset-bottom));
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,13,11,.98),rgba(8,8,7,.97));
  box-shadow:18px 0 60px rgba(0,0,0,.12);
  backdrop-filter:blur(24px) saturate(120%);
}
.brand,.public-brand { color:var(--text); }
.brand {
  min-height:53px;
  gap:11px;
  padding:4px 8px 12px;
  font-size:16px;
  letter-spacing:-.02em;
}
.brand-copy,.public-brand>span:last-child { display:grid; line-height:1.12; }
.brand-copy strong,.public-brand strong { font-weight:780; }
.brand-copy small,.public-brand small {
  width:max-content;
  margin-top:4px;
  color:var(--gold-bright);
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.logo-mark {
  position:relative;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border:1px solid rgba(244,203,148,.32);
  border-radius:50%;
  background:radial-gradient(circle at 34% 25%,#e9bb80,#ad713d 48%,#5d3d27 100%);
  color:#17100b;
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 30px rgba(142,83,36,.22);
}
.logo-mark::after { content:""; position:absolute; inset:5px; border:1px solid rgba(36,22,12,.35); border-radius:50%; }
.menu-items { display:grid; gap:4px; }
.menu-link {
  min-height:44px;
  grid-template-columns:28px minmax(0,1fr) auto;
  padding:8px 11px;
  border:1px solid transparent;
  border-radius:13px;
  color:#a8a198;
  font-size:14px;
  font-weight:600;
}
.menu-link:hover { color:var(--text); background:rgba(255,255,255,.035); }
.menu-link.active {
  border-color:rgba(205,150,89,.2);
  background:linear-gradient(90deg,rgba(198,139,75,.14),rgba(198,139,75,.045));
  color:#f4e9db;
  box-shadow:inset 3px 0 0 var(--gold);
}
.menu-icon { color:#887f75; font-size:17px; }
.menu-link.active .menu-icon { color:var(--gold-bright); }
.menu-link .badge { min-width:21px; height:20px; font-size:10px; }
.side-menu-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:auto;
  padding:12px 10px 3px;
  border-top:1px solid var(--line);
  color:#777168;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.side-menu-foot small { color:#66513d; }
.topbar {
  height:66px;
  padding:0 clamp(16px,2.1vw,32px);
  border-color:var(--line);
  background:rgba(7,7,6,.72);
  backdrop-filter:blur(22px) saturate(140%);
}
.topbar::after { content:""; position:absolute; inset:auto 0 -1px; height:1px; background:linear-gradient(90deg,transparent,rgba(199,147,89,.17),transparent); }
.mode-switch { gap:3px; padding:3px; border-color:var(--line); border-radius:12px; background:rgba(255,255,255,.018); }
.mode-switch a { padding:7px 11px; border-radius:9px; color:#888177; font-size:12px; font-weight:650; }
.mode-switch a:hover { color:var(--text-soft); }
.mode-switch a.active { background:var(--surface-3); color:var(--text); box-shadow:var(--shadow-sm); }
.profile-top { gap:8px; }
.profile-chip { display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid transparent; border-radius:999px; color:var(--text-soft); font-size:12px; font-weight:650; }
.profile-chip:hover { border-color:var(--line); background:rgba(255,255,255,.025); }
.profile-avatar { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(210,159,99,.22); border-radius:50%; background:linear-gradient(145deg,#2b2118,#17130f); color:var(--gold-bright); font-size:11px; font-weight:850; }
.notification-bell { position:relative; display:grid; place-items:center; width:38px; height:38px; border:1px solid transparent; border-radius:50%; color:#c1b7aa; font-size:19px; }
.notification-bell:hover { border-color:var(--line); background:rgba(255,255,255,.025); color:var(--text); }
.notification-bell .badge { position:absolute; right:-2px; top:-3px; min-width:18px; height:18px; padding:0 4px; font-size:9px; }
.logout-button { padding:8px; font-size:12px; }
.content { width:100%; max-width:1540px; padding:clamp(18px,2.2vw,34px); }

/* Type and common surfaces */
h1,h2,h3 { text-wrap:balance; }
.panel h1,.forum-hero h1,.wiki-hero h1,.commerce-hero h1,.hero h1 { letter-spacing:-.045em; }
.panel h1 { font-size:clamp(28px,3vw,42px); line-height:1.04; }
.panel h2 { font-size:clamp(20px,2vw,28px); letter-spacing:-.025em; }
.panel {
  border-color:var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg,rgba(18,17,15,.94),rgba(12,12,11,.9));
  box-shadow:var(--shadow);
  padding:clamp(18px,2.25vw,32px);
}
.panel+.panel { margin-top:18px; }
.panel-head { gap:22px; margin-bottom:24px; }
.panel-head>div:first-child { min-width:0; }
.panel-head h1,.panel-head h2 { margin-top:0; }
.muted { color:var(--muted); }
.eyebrow { color:var(--gold-bright); font-size:10px; font-weight:800; letter-spacing:.16em; }
.btn {
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  color:#dfd9d0;
  font-size:13px;
  font-weight:720;
  line-height:1.1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .16s var(--ease),border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}
.btn:hover { filter:none; transform:translateY(-1px); border-color:rgba(232,208,175,.2); background:rgba(255,255,255,.07); color:#fff; }
.btn:active { transform:translateY(0) scale(.985); }
.btn.primary {
  border-color:#bc8147;
  background:linear-gradient(145deg,#d49a5b,#a96d38);
  color:#170f09;
  text-shadow:0 1px rgba(255,255,255,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 9px 28px rgba(164,95,43,.16);
}
.btn.primary:hover { border-color:#dea766; background:linear-gradient(145deg,#e0aa6b,#b7793f); color:#120c08; box-shadow:0 13px 34px rgba(164,95,43,.25); }
.btn.danger { border-color:rgba(217,118,111,.25); background:rgba(217,118,111,.08); color:#e69a94; }
.btn.small { min-height:32px; padding:6px 10px; font-size:11px; }
.btn.large { min-height:49px; padding:13px 20px; border-radius:14px; font-size:14px; }
.link-button { color:#aaa298; font-weight:600; }
.link-button:hover { color:var(--gold-bright); }
.badge { background:linear-gradient(145deg,#d89e5d,#ad703b); color:#1a110b; box-shadow:0 5px 16px rgba(165,98,43,.2); }
.tag,.status,.status-pill,.chip,.locked-chip { border:1px solid var(--line); background:rgba(255,255,255,.034); color:#bdb4a8; }
.tag,.status-pill,.locked-chip { border-radius:999px; }
.status.ok,.status-pill.published,.status-pill.free { border-color:rgba(120,191,145,.22); background:rgba(120,191,145,.075); color:#91d4a8; }
.status.warn,.status-pill.draft { border-color:rgba(214,164,93,.22); background:rgba(214,164,93,.075); color:#dfb878; }
.notice { border-color:var(--line); border-radius:16px; background:rgba(255,255,255,.024); }
.notice.info { border-color:rgba(198,139,75,.22); background:rgba(198,139,75,.055); }
.notice.warning { border-color:rgba(214,164,93,.25); background:rgba(214,164,93,.055); }
.notice.success { border-color:rgba(120,191,145,.25); background:rgba(120,191,145,.055); }
.empty { min-height:120px; display:grid; place-items:center; align-content:center; border-color:rgba(231,215,193,.12); border-radius:20px; background:rgba(255,255,255,.012); color:#878077; }
.cards,.identity-grid { gap:14px; }
.card,.list-row,.stat {
  border-color:var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.026),rgba(255,255,255,.009));
}
.card { border-radius:19px; padding:19px; transition:transform .2s var(--ease),border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.card:hover { transform:translateY(-2px); border-color:rgba(218,174,119,.18); background:rgba(255,255,255,.032); box-shadow:var(--shadow-sm); }
.list { gap:8px; }
.list-row { min-height:66px; border-radius:15px; padding:13px 15px; }
.list-row:hover { border-color:rgba(218,174,119,.16); background:rgba(255,255,255,.027); }
.stats { gap:10px; }
.stat { position:relative; overflow:hidden; border-radius:18px; padding:21px; }
.stat::after { content:""; position:absolute; width:80px; height:80px; right:-30px; bottom:-40px; border-radius:50%; background:rgba(198,139,75,.08); }
.stat strong { color:#f1dfca; font-size:34px; letter-spacing:-.05em; }
.toolbar { flex-wrap:wrap; }

/* Forms, tables and editors */
label { color:#b9b1a7; font-size:12px; font-weight:640; }
input,textarea,select {
  width:100%;
  min-height:43px;
  border:1px solid rgba(231,215,193,.12);
  border-radius:12px;
  background:#0a0a09;
  color:var(--text);
  padding:10px 12px;
  box-shadow:inset 0 1px 5px rgba(0,0,0,.24);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
textarea { min-height:92px; resize:vertical; line-height:1.5; }
input::placeholder,textarea::placeholder { color:#68635d; }
input:hover,textarea:hover,select:hover { border-color:rgba(231,215,193,.2); }
input:focus,textarea:focus,select:focus { border-color:rgba(220,164,101,.65); background:#0d0c0a; box-shadow:0 0 0 3px rgba(198,139,75,.08),inset 0 1px 4px rgba(0,0,0,.2); outline:0; }
input[type="checkbox"],input[type="radio"] { width:17px; min-height:17px; height:17px; padding:0; accent-color:var(--gold); box-shadow:none; }
input[type="color"] { padding:4px; }
.form-grid { gap:13px; }
.form-grid label { gap:7px; }
.check-row { min-height:43px; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.016); }
details { border-color:var(--line); }
details>summary { cursor:pointer; color:#d5cec5; }
details>summary::marker { color:var(--gold); }
.catalog-editor,.manager-advanced { border-radius:17px; background:rgba(255,255,255,.012); }
.table-wrap { border:1px solid var(--line); border-radius:17px; background:rgba(0,0,0,.1); }
table { border-collapse:separate; border-spacing:0; }
th { color:#827b73; font-size:10px; font-weight:760; letter-spacing:.12em; text-transform:uppercase; }
th,td { border-bottom-color:var(--line)!important; padding:12px 14px; }
tbody tr { transition:background .15s ease; }
tbody tr:hover { background:rgba(255,255,255,.018); }
code,pre,.code-box { border-color:var(--line); border-radius:12px; background:#090908; color:#d1b895; }
.manager-settings-card {
  border-color:var(--line);
  border-radius:21px;
  background:linear-gradient(145deg,rgba(255,255,255,.022),rgba(255,255,255,.008));
}
.settings-card-title>span { border:1px solid rgba(217,163,100,.22); background:rgba(198,139,75,.09); color:var(--gold-bright); }
.manager-save-bar,.sheet-save-bar {
  border-color:var(--line);
  background:rgba(13,12,10,.9);
  box-shadow:0 -15px 45px rgba(0,0,0,.22);
  backdrop-filter:blur(18px);
}
.manager-editor-dialog,.post-settings-sheet,.post-content-sheet,.forum-new-topic-dialog,.commerce-dialog,.wiki-link-dialog {
  border-color:var(--line-strong);
  background:linear-gradient(155deg,#17140f,#0c0b0a 62%);
  box-shadow:0 35px 120px rgba(0,0,0,.72);
}
dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(12px); }
.modal-backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(12px); }
.modal-card { border-color:var(--line-strong); border-radius:24px; background:linear-gradient(145deg,#17140f,#0b0b0a); box-shadow:0 35px 110px rgba(0,0,0,.7); }
.auth-tabs { padding:4px; border:1px solid var(--line); border-radius:12px; background:#0a0908; }
.auth-tabs button { border-radius:9px; color:var(--muted); }
.auth-tabs button.active { background:var(--surface-3); color:var(--text); }
.modal-close { display:grid; place-items:center; width:36px; height:36px; border:1px solid transparent; border-radius:50%; line-height:1; }
.modal-close:hover { border-color:var(--line); background:rgba(255,255,255,.04); color:#fff; }
.toast { border:1px solid var(--line-strong); border-radius:14px; background:#19150f; color:var(--text); box-shadow:var(--shadow); }

/* Public landing */
.app-shell.public .content { max-width:1440px; }
.app-shell.public .topbar { padding-inline:clamp(18px,5vw,72px); }
.public-brand { gap:10px; }
.public-toolbar { gap:4px; }
.public-toolbar>a { padding:9px 12px; border-radius:10px; color:#aaa298; font-size:13px; font-weight:650; }
.public-toolbar>a:hover { background:rgba(255,255,255,.03); color:var(--text); }
.hero {
  position:relative;
  min-height:calc(100dvh - 132px);
  grid-template-columns:minmax(0,1.13fr) minmax(340px,.87fr);
  gap:clamp(34px,7vw,104px);
  max-width:1240px;
  padding:60px 24px 72px;
}
.hero-copy { position:relative; z-index:2; }
.hero h1 { max-width:790px; margin:18px 0 22px; font-size:clamp(54px,7vw,105px); line-height:.91; }
.hero p { max-width:650px; color:#b5ada3; font-size:clamp(17px,2vw,22px); line-height:1.58; }
.hero-actions { margin-top:30px; }
.hero-notes { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:32px; color:#777168; font-size:11px; letter-spacing:.04em; }
.hero-notes span { display:flex; align-items:center; gap:7px; }
.hero-notes span::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); }
.hero-orb {
  position:relative;
  width:min(36vw,460px);
  justify-self:center;
  border:1px solid rgba(222,172,112,.22);
  background:radial-gradient(circle at 37% 28%,#e6b578 0,#bd8044 20%,#6d452a 45%,#17110d 72%);
  box-shadow:inset -30px -35px 80px rgba(0,0,0,.62),inset 15px 14px 40px rgba(255,211,157,.12),0 0 130px rgba(175,104,47,.16),0 40px 90px rgba(0,0,0,.45);
}
.hero-orb::before,.hero-orb::after,.hero-orb i,.hero-orb b { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.hero-orb::before { inset:-12%; border:1px solid rgba(211,158,98,.12); }
.hero-orb::after { inset:13%; border:1px solid rgba(42,24,14,.42); }
.hero-orb i { width:17%; height:17%; right:6%; top:10%; border:1px solid rgba(217,163,100,.26); box-shadow:0 0 35px rgba(195,127,63,.13); }
.hero-orb b { inset:-19%; border:1px dashed rgba(217,163,100,.08); animation:sator-orbit 32s linear infinite; }
.hero-orb span { position:relative; z-index:2; color:#1b1009; font-family:Georgia,serif; font-size:clamp(90px,12vw,180px); text-shadow:0 1px rgba(255,255,255,.16),0 18px 35px rgba(0,0,0,.3); }
@keyframes sator-orbit { to { transform:rotate(360deg); } }

/* Courses, tree and learning */
.courses-dashboard { border:0; background:transparent; box-shadow:none; padding:0; }
.courses-intro { position:relative; padding:clamp(22px,4vw,50px) clamp(20px,4vw,46px); border:1px solid var(--line); border-radius:var(--radius-lg) var(--radius-lg) 0 0; background:radial-gradient(600px 300px at 90% 10%,rgba(191,125,65,.12),transparent 65%),linear-gradient(145deg,#15130f,#0e0d0b); }
.courses-intro h1 { font-size:clamp(40px,6vw,76px); }
.courses-intro p { max-width:620px; font-size:16px; }
.skill-tree-wrap { border-inline:1px solid var(--line); background:#090908; }
.skill-tree-board { border:0; border-radius:0; background-color:#090908; background-image:radial-gradient(circle at 50% 18%,rgba(185,118,60,.13),transparent 34%),linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size:auto,46px 46px,46px 46px; box-shadow:inset 0 30px 70px rgba(0,0,0,.28),inset 0 -40px 90px rgba(0,0,0,.45); }
.skill-node { filter:drop-shadow(0 10px 22px rgba(0,0,0,.48)); }
.skill-node-image { border:2px solid #5a422e; background-color:#1c1712; box-shadow:inset 0 0 0 4px rgba(0,0,0,.32),0 0 0 5px rgba(198,139,75,.05); }
.skill-node.state-base_opened .skill-node-image,.skill-node.state-finished .skill-node-image,.skill-node.state-opened .skill-node-image { border-color:var(--gold-bright); box-shadow:inset 0 0 0 4px rgba(0,0,0,.28),0 0 0 5px rgba(198,139,75,.08),0 0 28px rgba(198,139,75,.23); }
.skill-node strong { max-width:150px; padding:5px 8px; border:1px solid rgba(255,255,255,.06); border-radius:999px; background:rgba(5,5,4,.8); color:#ddd4c9; font-size:11px; backdrop-filter:blur(8px); }
.tree-edge { stroke:#65472e; }
.tree-edge.state-opened,.tree-edge.state-highlighted { stroke:var(--gold); filter:drop-shadow(0 0 5px rgba(198,139,75,.35)); }
.courses-dashboard-actions { margin:0; padding:18px; border:1px solid var(--line); border-radius:0 0 var(--radius-lg) var(--radius-lg); background:#100f0d; }
.course-grid { gap:16px; }
.course-card { border-color:var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.course-cover { min-height:205px; background-color:#1a1611; background-image:radial-gradient(circle at 35% 20%,rgba(203,146,83,.22),transparent 52%); }
.course-card-body { padding:21px; }
.course-card-body h3 { font-size:23px; letter-spacing:-.03em; }
.course-card-body p { color:#aaa198; }
.course-post-list .list-row { position:relative; padding-left:19px; }
.course-post-list .list-row::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px; border-radius:2px; background:rgba(198,139,75,.28); }
.post-reader { max-width:980px; margin-inline:auto; padding:clamp(22px,5vw,64px); }
.post-reader>h1 { max-width:780px; margin:12px 0 40px; font-size:clamp(38px,6vw,70px); }
.post-block.text-block { color:#ded8d0; font-family:ui-serif,Georgia,Cambria,serif; font-size:18px; line-height:1.82; }
.post-block.text-block h2,.post-block.text-block h3 { color:var(--text); font-family:Inter,"Segoe UI",sans-serif; }
.post-block.text-block a { color:var(--gold-bright); text-decoration-color:rgba(225,173,112,.35); text-underline-offset:3px; }
.media-block img,.media-block video,.audio-block { border:1px solid var(--line); border-radius:20px; background:#090908; }
.post-finish { border-color:rgba(198,139,75,.2); background:rgba(198,139,75,.045); }

/* Social, chat, groups and channels */
.social-hub,.notification-center,.chat-page,.channel-page { max-width:1120px; margin-inline:auto; }
.subsection { padding-top:20px; border-top:1px solid var(--line); }
.chat-list { gap:7px; }
.chat-list-row { min-height:64px; padding:9px 12px; border:1px solid transparent; border-radius:15px; }
.chat-list-row:hover { border-color:var(--line); background:rgba(255,255,255,.025); }
.user-avatar,.forum-avatar { border:1px solid rgba(218,165,103,.2); background:#211a14; color:var(--gold-bright); }
.group-grid { gap:15px; }
.group-card { border-color:var(--line); border-radius:22px; background:var(--surface); overflow:hidden; transition:transform .2s var(--ease),border-color .2s ease; }
.group-card:hover { transform:translateY(-2px); border-color:rgba(218,174,119,.19); }
.group-cover { background-color:#17130f; background-image:radial-gradient(circle at 40% 25%,rgba(198,139,75,.2),transparent 55%); }
.chat-page { padding:0; overflow:hidden; }
.chat-head { min-height:76px; padding:13px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.012); }
.chat-head h1 { font-size:20px; }
.connection-state { border:1px solid rgba(120,191,145,.18); background:rgba(120,191,145,.055); color:#8ccb9f; }
.connection-state::before { content:""; width:6px; height:6px; display:inline-block; margin-right:6px; border-radius:50%; background:#78bf91; box-shadow:0 0 9px rgba(120,191,145,.6); }
.chat-messages { min-height:480px; max-height:calc(100dvh - 310px); padding:22px; background:radial-gradient(500px 360px at 5% 100%,rgba(116,78,44,.06),transparent 70%),#0b0a09; }
.message-bubble { border:1px solid var(--line); border-radius:5px 17px 17px 17px; background:#171512; box-shadow:var(--shadow-sm); }
.chat-message.mine .message-bubble { border-color:rgba(198,139,75,.2); border-radius:17px 5px 17px 17px; background:linear-gradient(145deg,#2a1f15,#20170f); }
.chat-compose { padding:14px 16px max(14px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#100f0d; }
.voice-list { gap:10px; }
.voice-item { border-color:var(--line); border-radius:18px; background:rgba(255,255,255,.018); }
.voice-item.unheard { border-left:3px solid var(--gold); }
.listen-state { border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.025); }
.notification-row { border-color:var(--line); border-radius:16px; background:rgba(255,255,255,.014); }
.notification-row.unread { border-color:rgba(198,139,75,.2); background:linear-gradient(90deg,rgba(198,139,75,.07),rgba(255,255,255,.012)); }
.notification-dot { background:#544b42; }
.notification-row.unread .notification-dot { background:var(--gold-bright); box-shadow:0 0 12px rgba(198,139,75,.5); }

/* Store, services and forge */
.commerce-front,.forge-front,.services-front { border:0; background:transparent; box-shadow:none; padding:0; }
.commerce-hero,.forge-hero { position:relative; overflow:hidden; margin-bottom:28px; padding:clamp(30px,5vw,66px); border:1px solid var(--line); border-radius:var(--radius-lg); background:radial-gradient(650px 300px at 90% 0,rgba(192,127,64,.17),transparent 65%),linear-gradient(145deg,#17140f,#0d0c0a); }
.commerce-hero::after,.forge-hero::after { content:"S"; position:absolute; right:5%; bottom:-30%; color:rgba(211,158,98,.035); font-family:Georgia,serif; font-size:250px; font-weight:900; line-height:1; }
.commerce-hero h1,.forge-hero h1 { margin:8px 0 10px; font-size:clamp(45px,6vw,78px); }
.commerce-hero p,.forge-hero p { position:relative; z-index:1; max-width:650px; color:#aaa198; font-size:17px; }
.commerce-section-head { border-bottom-color:var(--line); }
.service-grid,.forge-grid { gap:16px; }
.service-card,.forge-card { border-color:var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .22s var(--ease),border-color .22s ease,box-shadow .22s ease; }
.service-card:hover,.forge-card:hover { transform:translateY(-4px); border-color:rgba(218,174,119,.22); box-shadow:var(--shadow); }
.service-visual,.forge-card-visual { background:radial-gradient(circle at 45% 20%,rgba(198,139,75,.22),transparent 56%),#15120e; }
.service-card-body,.forge-card-body { padding:20px; }
.forge-tabs { padding:5px; border:1px solid var(--line); border-radius:14px; background:#0b0a09; }
.forge-tabs button { border-radius:10px; }
.forge-tabs button.active { background:var(--surface-3); color:var(--gold-bright); }
.commerce-manager-category { border-color:var(--line); border-radius:19px; background:rgba(255,255,255,.012); }
.commerce-category-bar { border-bottom-color:var(--line); background:rgba(255,255,255,.018); }
.commerce-manager-item { border-color:transparent; border-radius:13px; }
.commerce-manager-item:hover { border-color:var(--line); background:rgba(255,255,255,.018); }

/* Forum and wiki harmonization */
.forum-shell,.wiki-shell,.wiki-article { --forum-accent:var(--gold); }
.forum-hero,.wiki-hero,.wiki-article-hero {
  border-color:var(--line);
  background:radial-gradient(720px 350px at 90% 0,rgba(190,124,63,.15),transparent 65%),linear-gradient(145deg,#17140f,#0e0d0b);
  box-shadow:var(--shadow-sm);
}
.forum-search,.wiki-search { border-color:rgba(231,215,193,.14); background:rgba(7,7,6,.72); }
.forum-category-card,.forum-section-card,.forum-topic-card,.forum-thread-head,.forum-aside>section,.wiki-category-card,.wiki-article-card {
  border-color:var(--line);
  background:linear-gradient(145deg,rgba(22,20,17,.96),rgba(13,12,10,.96));
}
.forum-category-card:hover,.forum-section-card:hover,.forum-topic-card:hover,.wiki-category-card:hover,.wiki-article-card:hover { border-color:rgba(218,174,119,.22); }
.forum-category-mark,.forum-section-symbol,.wiki-category-glyph,.wiki-card-placeholder { background:radial-gradient(circle at 38% 25%,rgba(198,139,75,.24),transparent 57%),#15120e; color:var(--gold-bright); }
.forum-topic-card.pinned { border-color:rgba(198,139,75,.25); background:linear-gradient(100deg,rgba(198,139,75,.08),rgba(14,13,11,.96) 48%); }
.forum-vote-column { border-right-color:var(--line); background:rgba(0,0,0,.16); }
.forum-vote-column button,.forum-inline-vote button { color:#777168; }
.forum-vote-column button.active,.forum-inline-vote button.active { color:var(--gold-bright); }
.forum-topic-main h3 { letter-spacing:-.018em; }
.forum-sort-tabs { padding:4px; border:1px solid var(--line); border-radius:12px; background:#0a0908; }
.forum-sort-tabs a { border-radius:9px; }
.forum-sort-tabs a.active { background:var(--surface-3); color:var(--text); }
.forum-comment-card { border-color:var(--line); background:#13110f; }
.forum-comment-line::before { background:rgba(198,139,75,.15); }
.forum-compose,.forum-compose-login,.forum-compose-locked { border-color:var(--line); background:linear-gradient(145deg,#17140f,#0e0d0b); }
.forum-course-source { border-color:rgba(198,139,75,.2); background:rgba(198,139,75,.05); }
.wiki-article-body { color:#ddd6cd; }
.wiki-quote { border-left-color:var(--gold); background:rgba(198,139,75,.055); }
.wiki-toc { border-left-color:var(--line-strong); }
.wiki-toc a:hover,.wiki-rich-text a,.wiki-auto-link { color:var(--gold-bright); }
.wiki-block-toolbar { border-color:var(--line); background:rgba(12,11,9,.92); }
.wiki-editor-block { border-color:var(--line); background:#0e0d0b; }
.wiki-rich-editor { border-color:#4e4943; background:#e9e4db; color:#27221d; }
.wiki-manager-category,.wiki-manager-article { border-color:var(--line); background:rgba(255,255,255,.012); }

/* Manager and developer workspaces */
.mode-manager .content,.mode-developer .content { max-width:1640px; }
.manager-workspace { background:linear-gradient(145deg,rgba(18,17,15,.96),rgba(11,11,10,.94)); }
.manager-page-head { padding-bottom:20px; border-bottom:1px solid var(--line); }
.wiki-manager-stats article { border-color:var(--line); border-radius:17px; background:rgba(255,255,255,.018); }
.wiki-manager-stats strong { color:#eddbc5; letter-spacing:-.04em; }
.forum-manager-category-card,.forum-manager-section-row,.medal-catalog-card,.active-medal-card,.manager-account-card,.moderation-card {
  border-color:var(--line);
  background:rgba(255,255,255,.014);
}
.forum-manager-category-card:hover,.forum-manager-section-row:hover,.manager-account-card:hover { border-color:rgba(218,174,119,.2); background:rgba(255,255,255,.025); }
.drag-handle { color:#756d64; }
.auto-medal-note { border-color:rgba(198,139,75,.16); background:rgba(198,139,75,.045); }
.permission-grid,.medal-picker-options { border-color:var(--line); background:rgba(0,0,0,.11); }
.medal-option:hover { background:rgba(255,255,255,.025); }
.tree-editor-board,.tree-inspector { border-color:var(--line); background:#0a0908; }
.tree-editor-toolbar { border-color:var(--line); background:rgba(12,11,9,.92); }
.code-manager,.module-list,.diagnostic-list { gap:10px; }
.diagnostic-row { border-color:var(--line); border-radius:14px; background:rgba(255,255,255,.012); }

/* Standalone screens */
.standalone { min-height:100dvh; display:grid; place-items:center; padding:20px; }
.standalone-card { border-color:var(--line-strong); border-radius:25px; background:linear-gradient(145deg,#17140f,#0d0c0a); box-shadow:var(--shadow); }

/* Mobile navigation and responsive layout */
.mobile-menu { display:none; width:40px; height:40px; padding:9px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
.mobile-menu span { display:block; width:18px; height:1px; margin:4px auto; background:#d8d0c6; transition:transform .18s ease,opacity .18s ease; }
.menu-scrim { position:fixed; inset:0; z-index:70; border:0; background:rgba(0,0,0,.62); opacity:0; backdrop-filter:blur(5px); transition:opacity .2s ease; }
.menu-scrim.open { opacity:1; }

@media (max-width:1180px) {
  :root { --side:232px; }
  .content { padding:20px; }
  .profile-chip>span:last-child { display:none; }
  .hero { grid-template-columns:1fr .72fr; }
  .hero-orb { width:min(37vw,400px); }
  .wiki-article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px) {
  body.menu-open { overflow:hidden; }
  .app-shell.authenticated { display:block; }
  .side-menu {
    position:fixed;
    left:0;
    top:0;
    width:min(86vw,320px);
    transform:translateX(-104%);
    transition:transform .24s var(--ease);
    box-shadow:30px 0 90px rgba(0,0,0,.55);
  }
  .side-menu.open { transform:translateX(0); }
  .mobile-menu { display:block; flex:0 0 auto; }
  .mobile-menu[aria-expanded="true"] span:nth-child(1) { transform:translateY(5px) rotate(45deg); }
  .mobile-menu[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .mobile-menu[aria-expanded="true"] span:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }
  .topbar { gap:10px; padding:0 14px; }
  .mode-switch { max-width:46vw; overflow:auto; scrollbar-width:none; }
  .mode-switch::-webkit-scrollbar { display:none; }
  .mode-switch a { white-space:nowrap; }
  .logout-button { display:none; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:70px; text-align:center; }
  .hero p { margin-inline:auto; }
  .hero-actions,.hero-notes { justify-content:center; }
  .hero-orb { order:-1; width:min(66vw,360px); }
  .panel-head { align-items:flex-start; }
  .chat-messages { max-height:calc(100dvh - 290px); }
}

@media (max-width:700px) {
  body { font-size:14px; }
  body::before { background-size:42px 42px; }
  .topbar { height:62px; }
  .content { padding:14px; }
  .panel { border-radius:21px; padding:18px; }
  .panel+.panel { margin-top:12px; }
  .panel h1 { font-size:30px; }
  .panel-head { flex-direction:column; gap:13px; margin-bottom:19px; }
  .panel-head>.btn,.panel-head>.toolbar { width:100%; }
  .panel-head>.btn { justify-content:center; }
  .toolbar { align-items:stretch; }
  .toolbar>.btn { flex:1 1 auto; }
  .profile-top { gap:2px; }
  .profile-chip { padding:3px; }
  .notification-bell { width:35px; height:35px; }
  .mode-switch { max-width:43vw; }
  .mode-switch a { padding:7px 9px; font-size:11px; }
  .public-brand strong { font-size:13px; }
  .public-brand .logo-mark { width:36px; height:36px; flex-basis:36px; }
  .public-toolbar>a { display:none; }
  .public-toolbar .btn { min-height:36px; padding:7px 11px; }
  .hero { margin-inline:-14px; padding:48px 20px 62px; overflow:hidden; }
  .hero h1 { font-size:clamp(48px,16vw,72px); }
  .hero p { font-size:17px; }
  .hero-orb { width:min(72vw,300px); }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; }
  .hero-notes { gap:8px 12px; }
  .cards,.identity-grid,.course-grid,.group-grid,.service-grid,.forge-grid,.wiki-article-grid { grid-template-columns:1fr; }
  .list-row { align-items:flex-start; flex-direction:column; }
  .list-row>.btn,.list-row>.toolbar { width:100%; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat { padding:16px; }
  .stat strong { font-size:28px; }
  .form-grid,.form-grid.two { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  .table-wrap { border-inline:0; border-radius:0; margin-inline:-18px; }
  th,td { min-width:112px; padding:10px 12px; }
  .courses-intro { padding:27px 18px; }
  .courses-intro h1 { font-size:42px; }
  .skill-tree-board { min-height:620px; }
  .courses-dashboard-actions { display:grid; grid-template-columns:1fr 1fr; padding:12px; }
  .course-cover { min-height:180px; }
  .post-reader { margin-inline:-14px; border-inline:0; border-radius:0; padding:24px 18px; }
  .post-reader>h1 { margin-bottom:28px; font-size:41px; }
  .post-block.text-block { font-size:17px; }
  .chat-page { margin-inline:-14px; border-inline:0; border-radius:0; }
  .chat-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; }
  .chat-head .connection-state { display:none; }
  .chat-messages { min-height:440px; padding:14px 10px; }
  .chat-compose { padding-inline:10px; }
  .compose-actions { display:grid; grid-template-columns:repeat(2,1fr); }
  .commerce-hero,.forge-hero { margin-inline:-14px; border-inline:0; border-radius:0 0 24px 24px; padding:34px 20px; }
  .commerce-hero::after,.forge-hero::after { font-size:160px; }
  .commerce-hero h1,.forge-hero h1 { font-size:48px; }
  .manager-workspace { margin-inline:-14px; border-inline:0; border-radius:0; }
  .manager-settings-card { padding:15px; border-radius:17px; }
  .manager-save-bar { margin-inline:-15px; padding:11px 15px max(11px,env(safe-area-inset-bottom)); }
  .wiki-manager-stats { gap:6px; }
  .wiki-manager-stats article { padding:11px; }
  .forum-comment { margin-left:calc(min(var(--comment-depth),2) * 8px); }
  .forum-comment-card { border-radius:14px; }
}

@media (max-width:430px) {
  .content { padding:10px; }
  .panel { padding:15px; border-radius:18px; }
  .mode-switch { max-width:42vw; }
  .mode-switch a { padding-inline:8px; }
  .profile-avatar { width:28px; height:28px; }
  .hero { margin-inline:-10px; padding-inline:16px; }
  .hero h1 { font-size:46px; }
  .hero-notes { font-size:10px; }
  .btn { min-height:42px; }
  .cards,.course-grid,.group-grid,.service-grid,.forge-grid { gap:10px; }
  .stats { grid-template-columns:1fr 1fr; gap:7px; }
  .courses-dashboard-actions { grid-template-columns:1fr; }
  .post-reader,.chat-page { margin-inline:-10px; }
  .wiki-manager-stats { grid-template-columns:1fr 1fr; }
  .wiki-manager-stats article:last-child { grid-column:1/-1; }
  .forum-search,.wiki-search { grid-template-columns:1fr; }
  .forum-search .btn,.wiki-search .btn { width:100%; }
}

@media (hover:none) {
  .btn:hover,.card:hover,.course-card:hover,.group-card:hover,.service-card:hover,.forge-card:hover,.wiki-article-card:hover { transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

@media print {
  body { background:#fff; color:#111; }
  .side-menu,.topbar,.manager-save-bar,.btn,.forum-compose,.wiki-toc { display:none!important; }
  .app-shell.authenticated { display:block; }
  .content { max-width:none; padding:0; }
  .panel,.wiki-article-hero,.forum-thread-head { border:0; background:#fff; color:#111; box-shadow:none; }
}

/* ===== Amulet navigation and the user-facing visual language 0.13 ===== */
.app-shell.mode-user { display:block; min-height:100dvh; }
.mode-user .app-main { width:100%; }
.mode-user .content {
  position:relative;
  z-index:1;
  max-width:1500px;
  padding-top:var(--user-menu-offset,254px);
}
.mode-user .content::before {
  position:absolute;
  inset:calc(var(--user-menu-offset,254px) - 90px) clamp(18px,2.2vw,34px) auto;
  height:1px;
  content:"";
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(204,150,89,.16),transparent);
}
.mode-user .panel {
  border-color:rgba(190,145,91,.14);
  background:
    linear-gradient(145deg,rgba(255,255,255,.022),transparent 48%),
    rgba(13,13,14,.91);
  box-shadow:0 28px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.018);
}
.mode-user .panel h1,.mode-user .courses-intro h1,.mode-user .commerce-hero h1,.mode-user .forge-hero h1,.mode-user .wiki-hero h1,.mode-user .wiki-article-hero h1,.mode-user .forum-hero h1,.mode-user .forum-thread-copy h1,.mode-user .post-reader>h1 {
  font-family:Georgia,Cambria,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.045em;
}
.mode-user .panel-head { border-bottom-color:rgba(190,145,91,.12); }
.mode-user .card,.mode-user .list-row,.mode-user .notification-row {
  border-color:rgba(190,145,91,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.022),rgba(255,255,255,.008));
}
.mode-user .card:hover,.mode-user .list-row:hover { border-color:rgba(218,174,119,.22); }
.mode-user input,.mode-user select,.mode-user textarea { border-color:rgba(211,178,135,.14); background:rgba(5,5,6,.72); }
.mode-user .eyebrow { color:#ad8257; letter-spacing:.22em; }
.mode-user .btn:not(.primary) { border-color:rgba(190,145,91,.17); background:rgba(10,9,9,.6); }
.mode-user .courses-intro,.mode-user .commerce-hero,.mode-user .forge-hero,.mode-user .wiki-hero,.mode-user .wiki-article-hero,.mode-user .forum-hero {
  border-color:rgba(190,145,91,.15);
  background:radial-gradient(650px 300px at 84% 0,rgba(135,83,37,.15),transparent 66%),linear-gradient(145deg,#141212,#0b0b0c);
}
.mode-user .course-card,.mode-user .group-card,.mode-user .service-card,.mode-user .forge-card,.mode-user .wiki-article-card,.mode-user .forum-topic-card { border-color:rgba(190,145,91,.13); background:#100f10; }
.mode-user .course-card:hover,.mode-user .group-card:hover,.mode-user .service-card:hover,.mode-user .forge-card:hover,.mode-user .wiki-article-card:hover,.mode-user .forum-topic-card:hover { border-color:rgba(223,171,109,.26); }
.mode-user .skill-tree-board { background-color:#080809; background-image:radial-gradient(circle at 50% 5%,rgba(154,91,36,.14),transparent 34%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.01) 1px,transparent 1px); }
.mode-user .wiki-toc { top:calc(var(--user-menu-offset,254px) + 14px); }
.mode-user .wiki-rich-text h2,.mode-user .wiki-rich-text h3 { scroll-margin-top:calc(var(--user-menu-offset,254px) + 24px); }
.mode-user .chat-page { border-color:rgba(190,145,91,.14); }
.mode-user .chat-messages { background:radial-gradient(500px 360px at 50% 0,rgba(121,73,32,.05),transparent 72%),#09090a; }
.mode-user .message-bubble { border-color:rgba(190,145,91,.12); background:#141213; }

.workspace-entry {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:32px;
  padding:22px;
  border:1px solid rgba(198,139,75,.18);
  border-radius:18px;
  background:linear-gradient(120deg,rgba(198,139,75,.07),rgba(255,255,255,.012));
}
.workspace-entry h2 { margin:7px 0 4px; }
.workspace-entry p { margin:0; }
.workspace-entry-actions { display:flex; flex-wrap:wrap; gap:8px; }
.profile-session-actions { display:flex; justify-content:flex-end; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.admin-user-name { color:var(--text-soft); font-size:12px; font-weight:650; }

/* Menu manager */
.menu-manager { max-width:1380px; margin-inline:auto; }
.menu-manager-form { display:grid; gap:16px; }
.menu-preview-card { overflow:hidden; }
.arcane-manager-preview {
  position:relative;
  min-height:310px;
  margin-top:18px;
  overflow:hidden;
  border:1px solid rgba(197,150,91,.14);
  border-radius:22px;
  background:#0b0b0d;
}
.arcane-preview-content { position:absolute; z-index:0; inset:auto 0 0; display:grid; height:90px; place-items:end center; padding:20px; color:#4f4944; font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.menu-amulet-control { display:grid; grid-template-columns:150px minmax(0,1fr); gap:22px; align-items:center; margin-top:16px; }
.menu-amulet-thumb { display:grid; width:150px; aspect-ratio:1; place-items:center; overflow:hidden; border:1px solid rgba(203,151,88,.18); border-radius:25px; background:radial-gradient(circle,rgba(163,97,40,.18),transparent 62%),#09090a; }
.menu-amulet-thumb img { width:140%; max-width:none; aspect-ratio:1; object-fit:contain; transform:translateY(-25%); filter:drop-shadow(0 8px 16px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(198,125,54,.25)); }
.menu-amulet-control>div:last-child { display:grid; gap:9px; }
.menu-amulet-control label { display:grid; gap:6px; color:var(--muted); font-size:12px; }
.menu-amulet-control .btn { width:max-content; }
.menu-amulet-control p { margin:0; }

.menu-position-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:17px; }
.menu-position-column { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(0,0,0,.1); }
.menu-position-column>header { display:flex; align-items:center; gap:11px; padding:13px 15px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.018); }
.menu-position-column>header>span { display:grid; width:33px; height:33px; place-items:center; border:1px solid rgba(200,148,86,.2); border-radius:50%; color:var(--gold-bright); }
.menu-position-column h3,.menu-position-column p { margin:0; }
.menu-position-column h3 { font-size:15px; }
.menu-position-column p { color:var(--muted); font-size:10px; }
.menu-position-list { display:grid; gap:1px; background:var(--line); }
.menu-position-card { display:grid; grid-template-columns:30px auto minmax(0,1fr); gap:10px; align-items:start; padding:12px; background:#0e0d0c; transition:background .18s ease; }
.menu-position-card:hover { background:#13110f; }
.menu-position-card:has([data-menu-enabled]:not(:checked)) { opacity:.54; }
.menu-position-number { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:rgba(198,139,75,.08); color:#9e7956; font-size:10px; font-weight:800; }
.menu-position-card>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.menu-position-card label:not(.menu-position-toggle) { display:grid; gap:4px; color:#898279; font-size:10px; }
.menu-position-card label small { color:#5f5a54; font-size:9px; }
.menu-position-card input,.menu-position-card select { min-height:37px; padding:8px 9px; border-radius:10px; font-size:12px; }
.menu-position-toggle { position:relative; display:block; width:34px; height:21px; margin-top:4px; }
.menu-position-toggle input { position:absolute; opacity:0; pointer-events:none; }
.menu-position-toggle span { position:absolute; inset:0; border:1px solid var(--line); border-radius:999px; background:#24211e; cursor:pointer; transition:.2s ease; }
.menu-position-toggle span::after { position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:#746b61; content:""; transition:.2s var(--ease); }
.menu-position-toggle input:checked+span { border-color:rgba(198,139,75,.45); background:rgba(198,139,75,.2); }
.menu-position-toggle input:checked+span::after { transform:translateX(13px); background:var(--gold-bright); box-shadow:0 0 10px rgba(198,139,75,.35); }

.menu-motion-switch { display:flex; align-items:center; gap:14px; margin:16px 0 8px; padding:14px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.012); cursor:pointer; }
.menu-motion-switch input { position:absolute; opacity:0; }
.menu-motion-switch>span { position:relative; width:46px; height:27px; flex:0 0 46px; border:1px solid var(--line); border-radius:999px; background:#24211e; transition:.2s ease; }
.menu-motion-switch>span::after { position:absolute; top:4px; left:4px; width:17px; height:17px; border-radius:50%; background:#746b61; content:""; transition:.2s var(--ease); }
.menu-motion-switch input:checked+span { border-color:rgba(198,139,75,.5); background:rgba(198,139,75,.2); }
.menu-motion-switch input:checked+span::after { transform:translateX(19px); background:var(--gold-bright); box-shadow:0 0 12px rgba(198,139,75,.42); }
.menu-motion-switch div { display:grid; }
.menu-motion-switch small { color:var(--muted); }
.menu-range-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }
.menu-range { display:grid; grid-template-columns:minmax(140px,1fr) minmax(140px,1.3fr) 54px; gap:12px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.01); }
.menu-range>span { display:grid; }
.menu-range small { color:var(--muted); font-size:10px; }
.menu-range input[type="range"] { height:4px; padding:0; border:0; border-radius:999px; accent-color:var(--gold); background:#2a2520; }
.menu-range output { color:var(--gold-bright); font-size:11px; text-align:right; }
.menu-color-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.menu-color-grid label { display:grid; grid-template-columns:minmax(0,1fr) 54px; align-items:center; gap:12px; padding:12px 13px; border:1px solid var(--line); border-radius:14px; color:var(--muted); }
.menu-color-grid input[type="color"] { width:54px; height:34px; padding:2px; cursor:pointer; }
.menu-save-bar { gap:14px; }
.menu-save-bar .form-status { margin-left:auto; }

@media (max-width:900px) {
  .mode-user .content { padding-top:min(var(--user-menu-offset,222px),222px); }
  .menu-position-grid,.menu-range-grid { grid-template-columns:1fr; }
  .arcane-manager-preview { min-height:270px; }
}

@media (max-width:700px) {
  .mode-user .content { padding-top:var(--user-menu-mobile-offset,132px); }
  .mode-user .content::before { inset:calc(var(--user-menu-mobile-offset,132px) - 32px) 14px auto; }
  .mode-user .panel { background:rgba(13,13,14,.94); }
  .workspace-entry { align-items:stretch; flex-direction:column; }
  .workspace-entry-actions { display:grid; grid-template-columns:1fr; }
  .menu-manager { margin-inline:-14px; }
  .menu-preview-card { padding-inline:8px; }
  .arcane-manager-preview { min-height:var(--arcane-mobile-height,180px); border-radius:17px; }
  .menu-amulet-control { grid-template-columns:92px minmax(0,1fr); gap:13px; }
  .menu-amulet-thumb { width:92px; border-radius:18px; }
  .menu-position-grid { gap:10px; }
  .menu-position-card { grid-template-columns:27px auto minmax(0,1fr); padding:10px 8px; }
  .menu-position-card>div { grid-template-columns:1fr; }
  .menu-range { grid-template-columns:minmax(120px,1fr) minmax(100px,1fr) 48px; padding:11px; }
  .menu-color-grid { grid-template-columns:1fr; }
  .menu-save-bar { display:grid; grid-template-columns:1fr; }
  .menu-save-bar .form-status { margin:0; }
  .menu-save-bar .link-button { order:3; }
}

@media (max-width:430px) {
  .mode-user .content { padding-top:var(--user-menu-mobile-offset,132px); }
  .menu-amulet-control { grid-template-columns:1fr; }
  .menu-amulet-thumb { width:110px; margin:auto; }
  .menu-position-grid { grid-template-columns:1fr; }
  .menu-range { grid-template-columns:1fr 44px; }
  .menu-range>span { grid-column:1/-1; }
}

@media print {
  arcane-menu { display:none!important; }
  .mode-user .content { padding-top:0; }
}