/* =====================================================================
   Premium layer: the bound-tome shell, the table dashboard, refined parts.
   Loaded after app.css + extras.css, so it re-tunes their tokens.
   ===================================================================== */

/* ---------- tokens ---------- */
:root:not([data-theme]), [data-theme="parchment"] {
  --bg: #e6dac2; --bg2: #ddcfb2; --panel: #f6efe0; --panel2: #eee3cc; --ink: #231910; --muted: #6b5843;
  --line: #cbb790; --line2: #ddcfb0; --accent: #7a1f1f; --accent-ink: #fbf3e4; --accent2: #3d5a3a;
  --gilt: #a8823a; --gilt2: #d8b56a; --input: #fbf7ee; --focus: #a8823a66;
  --head: 'Alegreya', Georgia, serif; --body: 'Alegreya Sans', system-ui, sans-serif; --base: 16.5px;
  --radius: 10px; --r-lg: 16px; --r-sm: 7px;
  --shadow: 0 1px 0 #fffaf0 inset, 0 1px 2px #3b2a1414, 0 8px 24px -12px #3b2a1440;
  --shadow-lg: 0 1px 0 #fffaf0 inset, 0 24px 60px -28px #2a1c0e80;
  --bgimg: radial-gradient(1200px 700px at 85% -10%, #f1e7d2 0, transparent 60%), radial-gradient(900px 600px at -10% 110%, #d6c39d 0, transparent 60%);
  /* sidebar = the book's leather spine */
  --side-bg: linear-gradient(180deg, #2c2018 0%, #221810 100%); --side-ink: #eadbc0; --side-muted: #a8916f;
  --side-line: #ffffff14; --side-hover: #ffffff0d; --side-active-bg: #ffffff12; --side-active: #e3c27e;
  /* the game table surface on the dashboard */
  --table-bg: radial-gradient(120% 140% at 75% 0%, #2f4a3b 0%, #1f3328 55%, #172820 100%);
  --table-ink: #f1e8d4; --table-muted: #b9c4a8; --table-line: #e3c27e55; --token-ring: #e3c27e;
  --h-variant: small-caps;
  color-scheme: light;
}
[data-theme="light"] {
  --bg: #f2f3f6; --bg2: #e9ebf0; --panel: #ffffff; --panel2: #f6f7fa; --ink: #141822; --muted: #5f6676;
  --line: #dde0e7; --line2: #eceef3; --accent: #2a3fc4; --accent-ink: #fff; --accent2: #0f7a6c;
  --gilt: #b98a2e; --gilt2: #e0b75e; --input: #fff; --focus: #2a3fc433;
  --head: 'Alegreya', Georgia, serif; --body: 'Alegreya Sans', system-ui, sans-serif; --base: 16.5px;
  --radius: 10px; --r-lg: 16px; --r-sm: 7px;
  --shadow: 0 1px 2px #14182210, 0 10px 30px -16px #14182230; --shadow-lg: 0 30px 70px -30px #1418224d;
  --bgimg: radial-gradient(1000px 600px at 90% -20%, #e4e8ff 0, transparent 60%);
  --side-bg: #ffffff; --side-ink: #1a1f2b; --side-muted: #7a8192; --side-line: #e6e8ee;
  --side-hover: #f2f4f8; --side-active-bg: #eef0fd; --side-active: #2a3fc4;
  --table-bg: radial-gradient(120% 140% at 80% 0%, #2f47d0 0%, #1d2f9a 55%, #17246f 100%);
  --table-ink: #f4f6ff; --table-muted: #bcc6f5; --table-line: #ffffff33; --token-ring: #e0b75e;
  --h-variant: normal;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #111216; --bg2: #16181d; --panel: #1a1c22; --panel2: #22252c; --ink: #ecedf0; --muted: #969cab;
  --line: #2c3039; --line2: #24272f; --accent: #e3a94e; --accent-ink: #1a1203; --accent2: #6db39c;
  --gilt: #e3a94e; --gilt2: #f2cb86; --input: #14161a; --focus: #e3a94e44;
  --head: 'Alegreya', Georgia, serif; --body: 'Alegreya Sans', system-ui, sans-serif; --base: 16.5px;
  --radius: 10px; --r-lg: 16px; --r-sm: 7px;
  --shadow: 0 1px 0 #ffffff08 inset, 0 12px 30px -18px #000c; --shadow-lg: 0 1px 0 #ffffff0a inset, 0 30px 80px -30px #000;
  --bgimg: radial-gradient(900px 600px at 90% -20%, #2a2418 0, transparent 60%);
  --side-bg: #0c0d10; --side-ink: #e6e7ea; --side-muted: #7f8594; --side-line: #ffffff10;
  --side-hover: #ffffff08; --side-active-bg: #e3a94e17; --side-active: #e3a94e;
  --table-bg: radial-gradient(120% 140% at 80% 0%, #2b2d33 0%, #1d1f24 60%, #15161a 100%);
  --table-ink: #f0f0f2; --table-muted: #a3a8b5; --table-line: #e3a94e40; --token-ring: #e3a94e;
  --h-variant: normal;
  color-scheme: dark;
}
[data-theme="future"] {
  --r-lg: 4px; --r-sm: 2px; --gilt: #19e3ff; --gilt2: #ff3ec8;
  --shadow-lg: 0 0 0 1px #19e3ff33, 0 0 60px #19e3ff1a inset;
  --side-bg: linear-gradient(180deg, #060b18ee, #04070ff2); --side-ink: #d9f6ff; --side-muted: #5f8aa0; --side-line: #19e3ff22;
  --side-hover: #19e3ff10; --side-active-bg: #19e3ff1a; --side-active: #19e3ff;
  --table-bg: linear-gradient(#19e3ff0d 1px, transparent 1px) 0 0/28px 28px, linear-gradient(90deg, #19e3ff0d 1px, transparent 1px) 0 0/28px 28px, radial-gradient(120% 140% at 80% 0%, #0d2142 0%, #070d1d 70%);
  --table-ink: #d9f6ff; --table-muted: #6f93a8; --table-line: #19e3ff44; --token-ring: #19e3ff;
  --h-variant: normal;
}

/* ---------- type ---------- */
body { font-family: var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; }
h1, h2, h3 { font-family: var(--head); font-variant-caps: var(--h-variant); font-weight: 700; letter-spacing: 0; }
h1 { font-size: 2.15rem; line-height: 1.12; }
h2 { font-size: 1.32rem; }
h4, .lbl { text-transform: none; font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: .86rem; font-weight: 700; }
[data-theme="future"] h4, [data-theme="future"] .lbl { text-transform: uppercase; font-variant-caps: normal; font-size: .72rem; }
[data-theme="light"] h1, [data-theme="dark"] h1 { letter-spacing: -.01em; }
.muted { color: var(--muted); }
::selection { background: color-mix(in srgb, var(--gilt) 35%, transparent); }

/* ---------- refined parts ---------- */
.panel { border-radius: var(--r-lg); border-color: color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--shadow); }
.btn { border-radius: var(--r-sm); font-weight: 700; letter-spacing: .01em; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn.primary { box-shadow: 0 1px 0 #ffffff26 inset, 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn.big { padding: .7rem 1.25rem; font-size: 1rem; }
input, textarea, select { border-radius: var(--r-sm); transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--focus); outline: none; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }
.tabs { border-bottom-color: var(--line2); }
.tab.on { border-bottom-color: var(--gilt); color: var(--ink); }
[data-theme="future"] .tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.toast { border-radius: var(--radius); border-left-color: var(--gilt); }
.modal { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.page { padding: 2rem 2.2rem 5rem; max-width: 1280px; }

/* ---------- app shell ---------- */
.top { display: none; }
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .22s ease; }
.app.rail { grid-template-columns: 76px minmax(0, 1fr); }
.side { position: sticky; top: 0; height: 100vh; background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column;
  border-right: 1px solid var(--side-line); padding: 1.1rem .8rem .9rem; z-index: 50; overflow: hidden; }
[data-theme="parchment"] .side { box-shadow: inset -10px 0 18px -12px #000a, inset -1px 0 0 #e3c27e33; }
[data-theme="parchment"] .side::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 3px, #ffffff03 3px 4px), radial-gradient(140% 60% at 50% 0%, #ffffff0d, transparent 70%); }
[data-theme="future"] .side { backdrop-filter: blur(10px); box-shadow: 1px 0 0 #19e3ff33, 8px 0 30px -20px #19e3ff66; }

.side-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--side-ink); padding: .2rem .35rem 1.2rem; border-bottom: 1px solid var(--side-line); margin-bottom: .9rem; }
.crest { width: 44px; height: 44px; flex: none; }
.crest-ring { fill: none; stroke: var(--side-active); stroke-width: 2; }
.crest-face { fill: color-mix(in srgb, var(--side-ink) 88%, transparent); }
.crest-ear { fill: color-mix(in srgb, var(--side-ink) 60%, transparent); }
.crest-mask { fill: #1b130d; }
[data-theme="dark"] .crest-mask, [data-theme="future"] .crest-mask { fill: #000; }
.crest-eye { fill: var(--side-active); }
.crest-nose { fill: #1b130d; }
.wm { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.wm-a { font-family: var(--head); font-variant-caps: small-caps; font-size: .95rem; color: var(--side-muted); letter-spacing: .03em; }
.wm-b { font-family: var(--head); font-weight: 800; font-size: 1.55rem; letter-spacing: .01em; color: var(--side-ink); }
[data-theme="parchment"] .wm-b { background: linear-gradient(180deg, #f3dc9f, #b88a3a); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="future"] .wm-a, [data-theme="future"] .wm-b { font-variant-caps: normal; text-transform: uppercase; letter-spacing: .14em; }
[data-theme="future"] .wm-a { font-size: .7rem; letter-spacing: .12em; }
[data-theme="future"] .wm-b { font-size: 1.15rem; color: var(--side-active); text-shadow: var(--glow); }

.side-nav { display: flex; flex-direction: column; gap: 1.2rem; flex: 1; overflow-y: auto; overflow-x: hidden; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-h { font-size: .8rem; font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--side-muted); padding: 0 .7rem .35rem; font-weight: 700; white-space: nowrap; }
.side-nav a { position: relative; display: flex; align-items: center; gap: .8rem; padding: .62rem .7rem; border-radius: var(--r-sm); color: var(--side-ink); text-decoration: none;
  font-weight: 600; font-size: 1rem; white-space: nowrap; opacity: .82; transition: background .15s, opacity .15s; }
.side-nav a:hover { background: var(--side-hover); opacity: 1; }
.side-nav a.on { background: var(--side-active-bg); opacity: 1; color: var(--side-ink); }
.side-nav a.on::before { content: ''; position: absolute; left: -.8rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--side-active); box-shadow: 0 0 12px var(--side-active); }
.side-nav a.on .ico { color: var(--side-active); }
.ico { width: 1.3rem; height: 1.3rem; flex: none; }

.side-foot { border-top: 1px solid var(--side-line); padding-top: .8rem; display: flex; flex-direction: column; gap: .7rem; }
.theme-dots { display: flex; gap: .45rem; padding: 0 .35rem; }
.tdot { width: 1.6rem; height: 1.6rem; border-radius: 50%; padding: 3px; border: 1px solid var(--side-line); background: none; cursor: pointer; }
.tdot i { display: block; width: 100%; height: 100%; border-radius: 50%; }
.tdot i[data-theme="parchment"] { background: conic-gradient(#7a1f1f 0 25%, #e6dac2 0 75%, #a8823a 0); }
.tdot i[data-theme="light"] { background: conic-gradient(#2a3fc4 0 25%, #ffffff 0 75%, #dde0e7 0); }
.tdot i[data-theme="dark"] { background: conic-gradient(#e3a94e 0 25%, #1a1c22 0 75%, #2c3039 0); }
.tdot i[data-theme="future"] { background: conic-gradient(#19e3ff 0 25%, #05070f 0 75%, #ff3ec8 0); }
.tdot.on { border-color: var(--side-active); box-shadow: 0 0 0 1px var(--side-active); }
.me-card { display: flex; align-items: center; gap: .65rem; padding: .45rem; border-radius: var(--r-sm); text-decoration: none; color: var(--side-ink); }
.me-card:hover { background: var(--side-hover); }
.me-av { width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 1.05rem;
  background: var(--side-active-bg); color: var(--side-active); box-shadow: inset 0 0 0 1px var(--side-active); }
.me-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; white-space: nowrap; }
.me-txt strong { overflow: hidden; text-overflow: ellipsis; }
.me-txt span { font-size: .8rem; color: var(--side-muted); }
.side-actions { display: flex; gap: .3rem; }
.side-btn { display: inline-flex; align-items: center; gap: .6rem; background: none; border: 0; color: var(--side-muted); padding: .5rem .6rem; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: .9rem; white-space: nowrap; }
.side-btn:hover { background: var(--side-hover); color: var(--side-ink); }
.side-btn.collapse { margin-left: auto; }
.app.rail .side-btn.collapse .ico { transform: rotate(180deg); }

/* collapsed rail */
.app.rail .side { padding-inline: .6rem; }
.app.rail .wm, .app.rail .lab, .app.rail .nav-h, .app.rail .me-txt, .app.rail .theme-dots { display: none; }
.app.rail .side-brand { justify-content: center; padding-inline: 0; }
.app.rail .side-nav a { justify-content: center; padding-inline: 0; }
.app.rail .side-nav a.on::before { left: -.6rem; }
.app.rail .side-actions { flex-direction: column; align-items: center; }
.app.rail .side-btn.collapse { margin-left: 0; }
.app.rail .me-card { justify-content: center; }

.main { min-width: 0; display: flex; flex-direction: column; }
.mtop { display: none; }
.side-scrim { display: none; }
#view.solo { min-height: 100vh; }

/* notes tab: icon-led */
.notes-tab { display: flex; align-items: center; gap: .45rem; padding: .9rem .45rem; border-radius: var(--r-sm) 0 0 var(--r-sm); font-weight: 700; }
.notes-tab .ico { width: 1.05rem; height: 1.05rem; transform: rotate(90deg); }

/* ---------- dashboard ---------- */
.dash { display: flex; flex-direction: column; gap: 2.2rem; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.dash-head h1 { margin: 0 0 .3rem; }
.dash-head p { margin: 0; font-size: 1.05rem; }

/* the table: the one bold element on the page */
.tablehero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem; align-items: center;
  padding: 2.4rem 2.6rem; border-radius: 22px; background: var(--table-bg); color: var(--table-ink); overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--table-line), inset 0 0 0 7px #0000001f, inset 0 0 0 8px var(--table-line); }
.tablehero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background: radial-gradient(60% 80% at 75% 55%, #ffffff1f, transparent 70%), repeating-radial-gradient(circle at 75% 55%, transparent 0 22px, #ffffff06 22px 23px); }
[data-theme="future"] .tablehero { border-radius: 4px; box-shadow: var(--shadow-lg), inset 0 0 0 1px #19e3ff55; }
.th-kicker { margin: 0 0 .4rem; color: var(--table-muted); font-weight: 600; }
.th-name { margin: 0 0 .6rem; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.02; color: var(--table-ink); font-variant-caps: var(--h-variant); }
[data-theme="parchment"] .th-name { background: linear-gradient(180deg, #f6e4b4 0%, #d9b267 55%, #a7782d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
[data-theme="future"] .th-name { color: var(--accent); text-shadow: var(--glow); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.th-desc { margin: 0 0 1rem; color: var(--table-muted); font-size: 1.06rem; max-width: 52ch; line-height: 1.5; }
.th-last { margin: 0 0 1.4rem; display: flex; gap: .7rem; align-items: baseline; color: var(--table-ink); font-size: .98rem; max-width: 56ch; }
.th-last-when { flex: none; font-size: .82rem; color: var(--table-muted); padding: .1rem .5rem; border-radius: 99px; border: 1px solid var(--table-line); }
.th-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tablehero .btn.primary { background: var(--token-ring); color: #1d140a; border-color: transparent; box-shadow: 0 10px 24px -10px #000c, 0 1px 0 #ffffff80 inset; }
.tablehero .btn.primary:hover { background: color-mix(in srgb, var(--token-ring) 85%, #fff); }
[data-theme="future"] .tablehero .btn.primary { color: #001218; box-shadow: var(--glow); }
.tablehero .btn.ghost { color: var(--table-ink); border-color: var(--table-line); }
.th-live { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--table-ink); }
.th-live i, .th-live.small i { width: .55rem; height: .55rem; border-radius: 50%; background: #5fd37a; box-shadow: 0 0 0 3px #5fd37a33, 0 0 12px #5fd37a; }
.th-live.small { font-size: .85rem; color: var(--ink); }
.th-join { display: flex; gap: .6rem; flex-wrap: wrap; }
.th-join input { width: 10rem; background: #00000033; border-color: var(--table-line); color: var(--table-ink); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; }
.th-join input::placeholder { color: var(--table-muted); letter-spacing: .02em; text-transform: none; }

/* party tokens around the table */
.th-party { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 1.6rem; padding: .5rem; }
.th-nobody { color: var(--table-muted); text-align: center; max-width: 26ch; }
.tok { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100px; text-decoration: none; color: var(--table-ink);
  animation: tok-in .55s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 80ms + 120ms); }
@keyframes tok-in { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } }
.tok-ring { --c: var(--token-ring); width: 84px; height: 84px; border-radius: 50%; padding: 4px; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--hp) * 1%), #ffffff1f 0); box-shadow: 0 12px 26px -12px #000d; transition: transform .2s; }
.tok.mid .tok-ring { --c: #e7b53f; } .tok.low .tok-ring { --c: #e2574c; } .tok.down .tok-ring { --c: #6b6b6b; }
.tok:hover .tok-ring { transform: translateY(-3px); }
.tok-face { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #0000004d; border: 3px solid #00000059;
  font-family: var(--head); font-weight: 800; font-size: 1.8rem; color: var(--table-ink); }
.tok-face img { width: 100%; height: 100%; object-fit: cover; }
.tok.empty .tok-face, .tok.ghost .tok-face { width: 84px; height: 84px; border: 2px dashed var(--table-line); background: #0000001a; }
.tok.ghost { width: 84px; }
.tok-name { font-weight: 700; font-size: .95rem; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok-sub { font-size: .8rem; color: var(--table-muted); margin-top: -.25rem; white-space: nowrap; }
.tok-live { position: absolute; top: 4px; right: 12px; width: .75rem; height: .75rem; border-radius: 50%; background: #5fd37a; border: 2px solid #17281f; box-shadow: 0 0 10px #5fd37a; }
.tok.down .tok-face img { filter: grayscale(1) brightness(.7); }

/* sections */
.dash-sec { min-width: 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line2); }
.sec-head h2 { margin: 0; }
.sec-link { font-weight: 700; text-decoration: none; color: var(--accent); font-size: .95rem; }
.sec-link:hover { text-decoration: underline; }
.quiet { color: var(--muted); margin: .2rem 0; }

/* character cards: portrait-forward, like a collector's card */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 1.1rem; }
.ccard { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; font: inherit; text-align: left; padding: 0; cursor: pointer; }
.ccard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gilt); }
.cc-art { position: relative; aspect-ratio: 4 / 4.2; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gilt) 30%, var(--panel2)), var(--panel2)); border-bottom: 1px solid var(--line2); }
.cc-art img { width: 100%; height: 100%; object-fit: cover; }
.cc-init { font-family: var(--head); font-weight: 800; font-size: 3.4rem; color: color-mix(in srgb, var(--gilt) 75%, var(--ink)); opacity: .85; }
.cc-ac { position: absolute; right: .55rem; bottom: .55rem; width: 2.4rem; height: 2.6rem; display: grid; place-items: center; color: var(--gilt2); }
.cc-ac .ico { position: absolute; inset: 0; width: 100%; height: 100%; fill: #000000a6; stroke: currentColor; stroke-width: 1.3; }
.cc-ac b { position: relative; color: #fff; font-size: .95rem; margin-top: -2px; }
.cc-body { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .8rem .85rem; min-width: 0; }
.cc-body strong { font-family: var(--head); font-size: 1.12rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-cls { color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-hp { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); margin-top: .3rem; font-variant-numeric: tabular-nums; }
.cc-hp .bar { flex: 1; height: 5px; border-radius: 3px; background: var(--line2); overflow: hidden; }
.cc-hp .bar i { display: block; height: 100%; background: var(--accent2); }
.ccard.mid .cc-hp .bar i { background: var(--warn); } .ccard.low .cc-hp .bar i, .ccard.down .cc-hp .bar i { background: var(--bad); }
.ccard.new { border-style: dashed; background: transparent; box-shadow: none; }
.ccard.new .cc-art { background: transparent; }
.cc-plus { font-family: var(--head); font-size: 3.6rem; font-weight: 400; color: var(--gilt); line-height: 1; }

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.tables { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tables a { display: flex; align-items: center; gap: .85rem; padding: .75rem .85rem; border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line2); }
.tables a:hover { border-color: var(--gilt); }
.tb-mark { width: 2.4rem; height: 2.4rem; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--panel2); color: var(--gilt); flex: none; }
.tb-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tb-txt strong { font-family: var(--head); font-size: 1.08rem; }
.tb-txt span { color: var(--muted); font-size: .88rem; }
.libmini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.lm { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--panel2); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--muted); }
.lm img { width: 100%; height: 100%; object-fit: cover; }
.lm-ic .ico { width: 2rem; height: 2rem; }
.lm-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem .5rem .35rem; font-size: .78rem; color: #fff; background: linear-gradient(transparent, #000b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm:hover { border-color: var(--gilt); }

/* sign-in page sits on the table surface */
#view.solo .auth { background: var(--table-bg); min-height: 100vh; }
#view.solo .auth-card { box-shadow: var(--shadow-lg); border-radius: 22px; }
#view.solo .auth-mark { width: 84px; height: 84px; margin: 0 auto .6rem; border-radius: 50%; background: var(--side-bg); display: grid; place-items: center; box-shadow: var(--shadow); }
#view.solo .auth-mark .crest { width: 64px; height: 64px; }
#view.solo .auth-card h1 { font-size: 2rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .tablehero { grid-template-columns: 1fr; padding: 2rem; }
  .th-party { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .app, .app.rail { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 84vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: 20px 0 60px -20px #000c; }
  .app.open .side { transform: none; }
  .app.rail .wm, .app.rail .lab, .app.rail .nav-h, .app.rail .me-txt, .app.rail .theme-dots { display: revert; }
  .app.rail .side-nav a, .app.rail .side-brand, .app.rail .me-card { justify-content: flex-start; padding-inline: .7rem; }
  .side-btn.collapse { display: none; }
  .side-scrim { display: block; position: fixed; inset: 0; background: #0009; z-index: 45; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .app.open .side-scrim { opacity: 1; pointer-events: auto; }
  .mtop { display: flex; align-items: center; gap: .6rem; position: sticky; top: 0; z-index: 30; padding: .5rem .8rem; background: var(--side-bg); color: var(--side-ink); border-bottom: 1px solid var(--side-line); }
  .mtop .side-btn { color: var(--side-ink); }
  .mtop-brand { display: flex; align-items: center; gap: .5rem; color: var(--side-ink); text-decoration: none; font-family: var(--head); font-weight: 800; font-size: 1.1rem; }
  .mtop-brand .crest { width: 32px; height: 32px; }
  .dash-cols { grid-template-columns: 1fr; }
  .page { padding: 1.4rem 1.1rem 4rem; }
}
@media (max-width: 520px) {
  .tablehero { padding: 1.5rem 1.2rem; border-radius: 16px; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .tok { width: 84px; } .tok-ring { width: 70px; height: 70px; }
  .dash-head h1 { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tok { animation: none; }
  .app, .side, .ccard, .tok-ring { transition: none; }
}
@media print { .side, .mtop, .side-scrim { display: none !important; } .app { display: block; } }

/* ---------- polish pass ---------- */
:root:not([data-theme]), [data-theme="parchment"] { --tok-bg: #1a2b21; }
[data-theme="light"] { --tok-bg: #18247a; }
[data-theme="dark"] { --tok-bg: #24262c; }
[data-theme="future"] { --tok-bg: #081428; }
[data-theme="wasteland"] { --tok-bg: #0d160a; }
.tok-face { background: var(--tok-bg); }
[data-theme="light"] .crest-face { fill: #d8dbe4; }
[data-theme="light"] .crest-ear { fill: #b4b9c8; }
[data-theme="light"] .crest-mask, [data-theme="light"] .crest-nose { fill: #141822; }
@media (min-width: 901px) { .main { padding-right: 34px; } }