/* Character Creator — hybrid wizard (rail + content + summary bar) + printable sheet */
:root{
  --bg:#07070d; --panel:#131321; --panel-top:#1a1a2d; --panel-alt:#10101b;
  --border:#2a2842; --border-soft:rgba(255,255,255,.06);
  --text:#f1edff; --muted:#9b92bc; --faint:#625b81;
  --gold:#d6b257; --gold-hi:#f0d97a; --violet:#8b70ff; --premium:#6fd3a4; --danger:#ff8398;
  --radius:16px; --radius-sm:11px; --maxw:1160px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --display:'Faculty Glyphic',serif;
}
html[data-theme="light"]{
  --panel:#fffdf7; --panel-top:#fffefb; --panel-alt:#f6efe0;
  --border:#d9cdb0; --border-soft:rgba(0,0,0,.07);
  --text:#2a2620; --muted:#6b6150; --faint:#9a8d74;
}
*{box-sizing:border-box;}
body{margin:0;}
/* Font on the wrapper (inherited by text). Do NOT use `.cc-wrap *` — it overrides
   Font Awesome's font-family on <i> icons and turns every glyph into a square. */
.cc-wrap{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.2rem 6rem;color:var(--text);font-family:var(--font);}
.cc-wrap input,.cc-wrap select,.cc-wrap textarea,.cc-wrap button{font-family:inherit;}
/* Global anchor reset (matches the other tool pages; also normalizes the shared
   header's brand/nav links so they don't show default purple-underline styling). */
a{color:inherit;text-decoration:none;}
.display{font-family:var(--display);letter-spacing:.015em;}

.cc-back{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted);padding:.45rem .8rem;border-radius:10px;border:1px solid var(--border);background:var(--surface-1,rgba(255,255,255,.02));margin-bottom:1.1rem;transition:color .15s,border-color .15s;}
.cc-back:hover{color:var(--text);border-color:var(--gold);}
.cc-head{margin-bottom:1.3rem;}
.cc-kicker{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .7rem;border-radius:999px;border:1px solid rgba(139,112,255,.32);background:rgba(139,112,255,.08);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#b39bff;}
.cc-head h1{margin:.5rem 0 0;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.05;background:var(--title-grad,linear-gradient(135deg,#fff,var(--gold-hi)));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.cc-head p{margin:.5rem 0 0;color:var(--muted);font-size:.92rem;line-height:1.6;max-width:760px;}

/* Sign-in gate */
.cc-gate{text-align:center;max-width:520px;margin:2.5rem auto;padding:2.2rem 1.6rem;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-top),var(--panel));}
.cc-gate i{font-size:2.4rem;color:var(--gold);}
.cc-gate h2{margin:.8rem 0 .4rem;font-size:1.3rem;}
.cc-gate p{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0 0 1.3rem;}

/* App layout */
/* Builder toolbar (back-to-list + current character name/status) */
.cc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;padding:.55rem .9rem;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,var(--panel-top),var(--panel));}
.cc-bar-left{display:flex;align-items:center;gap:.7rem;min-width:0;}
.cc-bar-name{display:flex;align-items:center;gap:.4rem;min-width:0;font-size:.92rem;}
.cc-bar-name i{color:var(--gold);}
.cc-bar-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:42vw;}
.cc-bar-name small{color:var(--muted);font-weight:400;white-space:nowrap;}
.cc-bar-right{display:flex;align-items:center;gap:.5rem;}

/* Characters dashboard (table of saved characters) */
.cc-dash{background:linear-gradient(180deg,var(--panel-top),var(--panel));border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem 1.3rem 1.4rem;overflow-x:auto;}
.cc-dash-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;}
.cc-dash-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.cc-blank-classes{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin:.4rem 0 .2rem;}
.cc-blank-classes .cc-card{text-align:center;}
.cc-blank-count{font-size:.8rem;color:var(--muted);}
/* Lined blank notes area on the printable blank sheet */
.csh-blanknotes{min-height:9rem;border:1px solid var(--border-soft);border-radius:8px;background-image:repeating-linear-gradient(var(--border-soft) 0 1px, transparent 1px 1.7rem);}
/* Ruled write-in lines for blank-sheet sections (Species Traits, Feats). */
.csh-writelines{margin-top:.2rem;}
.csh-writelines .csh-wl{height:1.7rem;border-bottom:1px solid var(--border-soft);}
.cc-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.cc-table th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:800;padding:.4rem .6rem;border-bottom:1px solid var(--border);white-space:nowrap;}
.cc-table td{padding:.6rem .6rem;border-bottom:1px solid var(--border-soft);}
.cc-table td.nm{font-weight:700;color:var(--text);}
.cc-table td.upd{color:var(--muted);font-size:.82rem;white-space:nowrap;}
.cc-table td.act{text-align:right;width:1%;white-space:nowrap;}
.cc-trow{cursor:pointer;transition:background .12s;}
.cc-trow:hover{background:rgba(139,112,255,.08);}
.cc-rowbtn{width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;font-size:.82rem;transition:color .12s,border-color .12s,background .12s;margin-right:.25rem;}
.cc-rowbtn:hover{color:var(--gold-hi);border-color:var(--gold);background:rgba(214,178,87,.1);}
.cc-del{width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;font-size:.82rem;transition:color .12s,border-color .12s,background .12s;}
.cc-del:hover{color:var(--danger);border-color:var(--danger);background:rgba(255,131,152,.1);}
.cc-del:disabled{opacity:.5;cursor:default;}
.cc-dash-empty{text-align:center;padding:2.6rem 1rem;color:var(--muted);}
.cc-dash-empty i{font-size:2.2rem;color:var(--gold);display:block;margin-bottom:.6rem;}

.cc-app{display:grid;grid-template-columns:230px 1fr;gap:1.2rem;align-items:start;transition:grid-template-columns .18s ease;}
.cc-app.cc-collapsed{grid-template-columns:58px 1fr;}
.cc-rail{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.3rem;padding:.7rem;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel-top),var(--panel));}
.cc-rail.is-collapsed{padding:.5rem .35rem;}

/* Collapse toggle */
.cc-rail-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .6rem;margin-bottom:.4rem;border:1px solid var(--border);border-radius:8px;background:none;color:var(--faint);font-family:inherit;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:all .12s;}
.cc-rail-toggle:hover{color:var(--text);background:var(--surface-2,rgba(255,255,255,.04));border-color:var(--gold);}
.cc-rail.is-collapsed .cc-rail-toggle{justify-content:center;padding:.4rem;}
.cc-rail.is-collapsed .cc-rail-toggle .lbl{display:none;}

/* Collapsed rail — just the numbers */
.cc-rail.is-collapsed .cc-step{justify-content:center;gap:0;padding:.4rem;}
.cc-rail.is-collapsed .cc-step .lbl{display:none;}
.cc-step{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:10px;border:1px solid transparent;background:none;color:var(--muted);font-family:inherit;font-size:.86rem;font-weight:700;cursor:pointer;text-align:left;width:100%;transition:all .12s;}
.cc-step:hover{color:var(--text);background:var(--surface-2,rgba(255,255,255,.04));}
.cc-step.is-active{color:var(--text);border-color:var(--gold);background:rgba(214,178,87,.08);}
.cc-step.is-locked{opacity:.4;cursor:not-allowed;}
.cc-step .n{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;border:1px solid var(--border);color:var(--faint);}
.cc-step.is-active .n{border-color:var(--gold);color:var(--gold-hi);}
.cc-step.is-done .n{background:linear-gradient(135deg,var(--premium),#9eecbe);color:#0d2018;border-color:transparent;}
.cc-step .lbl{flex:1;}
.cc-step .sub{display:block;font-size:.7rem;font-weight:600;color:var(--faint);}

.cc-main{min-width:0;}
.cc-content{background:linear-gradient(180deg,var(--panel-top),var(--panel));border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;min-height:360px;}
.cc-loading{color:var(--muted);text-align:center;padding:3rem 1rem;}
.cc-step-title{margin:0 0 .3rem;font-size:1.25rem;}
.cc-step-hint{color:var(--muted);font-size:.88rem;margin:0 0 1.2rem;line-height:1.5;}

.cc-nav{display:flex;gap:.6rem;align-items:center;margin-top:1rem;flex-wrap:wrap;}
.cc-nav .spacer{flex:1;}
.cc-nav-hint{font-size:.8rem;color:var(--faint);display:inline-flex;align-items:center;gap:.4rem;}

/* Buttons */
.cc-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem;border-radius:11px;font-weight:800;font-size:.88rem;cursor:pointer;font-family:inherit;border:1px solid var(--border);background:transparent;color:var(--muted);transition:all .15s;}
.cc-btn:hover{color:var(--text);border-color:var(--violet);}
.cc-btn:disabled{opacity:.45;cursor:not-allowed;}
.cc-btn-primary{color:#1a1208;background:linear-gradient(135deg,var(--gold-hi),var(--gold) 60%,#b89845);border-color:rgba(214,178,87,.6);}
.cc-btn-primary:hover{color:#1a1208;transform:translateY(-1px);}
.cc-btn-danger{color:#fff;background:linear-gradient(135deg,#e0556a,var(--danger) 60%,#b83b50);border-color:rgba(255,131,152,.55);}
.cc-btn-danger:hover{color:#fff;transform:translateY(-1px);}
.cc-btn-premium{color:#08231a;background:linear-gradient(135deg,#7ee6b0,#34c98a 60%,#1ea672);border-color:rgba(76,222,160,.6);box-shadow:0 2px 14px rgba(34,201,138,.25);}
.cc-btn-premium:hover{color:#08231a;transform:translateY(-1px);box-shadow:0 4px 20px rgba(34,201,138,.38);}
.cc-btn-ghost{padding:.55rem .8rem;}
.cc-btn-sm{padding:.4rem .7rem;font-size:.78rem;}

/* Fields */
.cc-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem;}
.cc-field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:800;}
.cc-field input,.cc-field select,.cc-field textarea,.cc-filterbar input{width:100%;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--border);background:var(--field-bg,rgba(8,8,14,.55));color:var(--text);font:inherit;font-size:.9rem;color-scheme:dark;transition:border-color .15s,box-shadow .15s;}
.cc-field input::placeholder,.cc-filterbar input::placeholder{color:var(--faint);}
.cc-field input:focus,.cc-field select:focus,.cc-field textarea:focus,.cc-filterbar input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,112,255,.18);}
html[data-theme="light"] .cc-field input,html[data-theme="light"] .cc-field select,html[data-theme="light"] .cc-field textarea,html[data-theme="light"] .cc-filterbar input{color-scheme:light;}
/* Polished selects — drop the OS chevron for a themed one, and darken the native
   option list so it doesn't flash flat gray against the dark panel. */
.cc-field select{-webkit-appearance:none;appearance:none;padding-right:2.3rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%239a93bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:.78rem;}
.cc-field select:hover{border-color:var(--violet);}
.cc-field select option{background-color:#14141d;color:var(--text);padding:.4rem;}
.cc-field select option:checked{background-color:rgba(139,112,255,.25);color:#fff;}
html[data-theme="light"] .cc-field select option{background-color:#fff;color:#1b1b20;}
html[data-theme="light"] .cc-field select option:checked{background-color:rgba(139,112,255,.18);color:#1b1b20;}
.cc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.9rem;}

/* Filter bar: search + Standard/Extended toggle */
.cc-filterbar{display:flex;gap:.6rem;align-items:center;margin-bottom:.9rem;flex-wrap:wrap;}
.cc-filterbar input{flex:1;min-width:180px;margin:0;}
.cc-seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;flex:none;}
.cc-seg-btn{font-family:inherit;font-size:.78rem;font-weight:700;padding:.45rem .8rem;border:none;background:var(--field-bg,rgba(8,8,14,.55));color:var(--muted);cursor:pointer;border-left:1px solid var(--border);}
.cc-seg-btn:first-child{border-left:none;}
.cc-seg-btn:hover{color:var(--text);}
.cc-seg-btn.is-on{color:#1a1208;background:linear-gradient(135deg,var(--gold-hi),var(--gold));}

/* Selectable cards (species/class/background) */
.cc-search{margin-bottom:.9rem;}
.cc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;}
.cc-card{position:relative;text-align:left;padding:.8rem .9rem;border-radius:12px;border:1px solid var(--border);background:var(--surface-1,rgba(255,255,255,.02));color:var(--text);cursor:pointer;font-family:inherit;transition:all .12s;}
.cc-card:hover{border-color:var(--violet);transform:translateY(-2px);}
.cc-card.is-on{border-color:var(--gold);background:rgba(214,178,87,.08);box-shadow:0 0 0 1px rgba(214,178,87,.35) inset;}
.cc-card .t{font-weight:800;font-size:.95rem;}
.cc-card .m{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem;}
.cc-card .ai-tag{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#b39bff;border:1px solid rgba(139,112,255,.4);border-radius:999px;padding:.05rem .4rem;}

.cc-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--border);background:var(--surface-2,rgba(255,255,255,.04));color:var(--muted);}
.cc-chip.gold{color:var(--gold-hi);border-color:rgba(240,217,122,.35);background:rgba(240,217,122,.08);}

/* Equipment step — selectable class options + inventory */
.cc-sub{margin:0 0 .5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:800;}
.cc-eq-choices{display:flex;flex-direction:column;gap:.5rem;}
.cc-eq-opt{text-align:left;width:100%;padding:.7rem .85rem;border-radius:11px;border:1px solid var(--border);background:var(--surface-1,rgba(255,255,255,.02));color:var(--text);cursor:pointer;font-family:inherit;transition:all .12s;}
.cc-eq-opt:hover{border-color:var(--violet);}
.cc-eq-opt.is-on{border-color:var(--gold);background:rgba(214,178,87,.08);box-shadow:0 0 0 1px rgba(214,178,87,.35) inset;}
.cc-eq-opt .k{font-weight:800;font-size:.8rem;color:var(--gold-hi);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.2rem;}
.cc-eq-opt .d{font-size:.86rem;line-height:1.5;color:var(--text);}
.cc-eq-opt .d b{color:var(--gold-hi);}
.cc-inv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;}
.cc-inv li{display:flex;align-items:center;gap:.6rem;padding:.4rem .6rem;border-radius:9px;border:1px solid var(--border-soft);background:var(--surface-2,rgba(255,255,255,.04));}
.cc-inv .n{flex:1;font-size:.9rem;color:var(--text);min-width:0;}
.cc-inv .qty{display:inline-flex;align-items:center;gap:.45rem;font-variant-numeric:tabular-nums;}
.cc-inv .qty b{min-width:1.2rem;text-align:center;font-weight:800;}
.cc-inv .src{flex:none;width:52px;text-align:center;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);border:1px solid var(--border);border-radius:999px;padding:.05rem 0;}
.cc-inv .src-empty{border:none;background:none;}
.cc-iconbtn{width:1.7rem;height:1.7rem;border-radius:7px;border:1px solid var(--border);background:var(--surface-2,rgba(255,255,255,.05));color:var(--text);cursor:pointer;font-weight:800;line-height:1;}
.cc-iconbtn:hover{border-color:var(--violet);}
.cc-inv-del{width:1.9rem;height:1.9rem;}
.cc-additem{display:flex;gap:.5rem;margin-top:.6rem;}
.cc-search-wrap{position:relative;flex:1;}
.cc-additem input{width:100%;padding:.55rem .7rem;border-radius:10px;border:1px solid var(--border);background:var(--field-bg,rgba(8,8,14,.55));color:var(--text);font:inherit;font-size:.88rem;}
.cc-additem input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,112,255,.18);}
.cc-search-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + .3rem);max-height:300px;overflow:auto;background:linear-gradient(180deg,var(--panel-top),var(--panel));border:1px solid var(--border);border-radius:11px;box-shadow:0 14px 40px rgba(0,0,0,.5);z-index:70;padding:.25rem;}
.cc-search-menu.open{display:block;}
.cc-search-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:8px;cursor:pointer;}
.cc-search-row:hover{background:rgba(139,112,255,.12);}
.cc-search-row .nm{flex:1;font-size:.88rem;color:var(--text);}
.cc-search-row .sub{font-size:.66rem;text-transform:capitalize;color:var(--faint);}
.cc-search-add{padding:.5rem .6rem;margin-top:.15rem;border-top:1px solid var(--border-soft);font-size:.82rem;color:var(--muted);cursor:pointer;border-radius:8px;}
.cc-search-add:hover{background:rgba(139,112,255,.12);color:var(--text);}

/* Coins display (read-only, reflects background + chosen class gold) */
.cc-coins{font-size:.78rem;font-weight:700;color:var(--gold-hi);margin-left:.5rem;text-transform:none;letter-spacing:0;}
.cc-coins i{margin-right:.15rem;}

/* Origin / backstory step */
.cc-origin-text{width:100%;padding:.7rem .8rem;border-radius:10px;border:1px solid var(--border);background:var(--field-bg,rgba(8,8,14,.55));color:var(--text);font:inherit;font-size:.9rem;line-height:1.55;resize:vertical;min-height:9rem;overflow:hidden;}
.cc-origin-text:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,112,255,.18);}
.cc-ai-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.5rem;}
/* Enhance control sits at the foot of the Backstory step, after Personality */
.cc-enhance-foot:not(:empty){margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--border-soft);}
.cc-ai-row .cc-btn{border-color:rgba(139,112,255,.45);color:var(--violet);}
.cc-ai-row .cc-btn:hover{color:var(--text);background:rgba(139,112,255,.12);}
/* Premium (green) Enhance button keeps its dark, readable text in the AI row. */
.cc-ai-row .cc-btn-premium{color:#08231a;border-color:rgba(76,222,160,.6);}
.cc-ai-row .cc-btn-premium:hover{color:#08231a;background:none;}
.cc-ai-len{padding:.4rem .6rem;border-radius:8px;border:1px solid var(--border);background:var(--field-bg,rgba(8,8,14,.55));color:var(--text);font:inherit;font-size:.8rem;color-scheme:dark;}
html[data-theme="light"] .cc-ai-len{color-scheme:light;}
.cc-ai-note{font-size:.76rem;color:var(--muted);}
.cc-ai-note b{color:var(--gold-hi);}

/* Full-screen busy overlay — matches the premium generators' orb spinner */
.cc-busy{display:none;position:fixed;inset:0;z-index:9999;background:var(--busy-veil,rgba(7,7,13,.92));backdrop-filter:blur(6px);align-items:center;justify-content:center;text-align:center;font-family:var(--font);}
.cc-busy.show{display:flex;}
.cc-busy-inner{display:flex;flex-direction:column;align-items:center;gap:.4rem;}
.cc-orb{position:relative;width:132px;height:132px;display:flex;align-items:center;justify-content:center;margin-bottom:.4rem;}
.cc-orb-mark{position:relative;z-index:2;font-size:30px;color:var(--premium-light,#3fae7e);filter:drop-shadow(0 0 14px rgba(111,211,164,.55));animation:ccOrbPulse 2.4s ease-in-out infinite;}
@keyframes ccOrbPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 14px rgba(111,211,164,.55));}50%{transform:scale(1.08);filter:drop-shadow(0 0 28px rgba(111,211,164,.85));}}
.cc-orb-ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);}
.cc-orb-ring-1{width:78px;height:78px;border:2px solid var(--premium,#2f9e6e);border-top-color:transparent;border-right-color:transparent;animation:ccOrbSpin 1.6s linear infinite;}
.cc-orb-ring-2{width:102px;height:102px;border:1px solid var(--premium-light,#3fae7e);border-bottom-color:transparent;border-left-color:transparent;opacity:.65;animation:ccOrbSpin 2.6s linear infinite reverse;}
.cc-orb-ring-3{width:132px;height:132px;border:1px dashed rgba(111,211,164,.40);animation:ccOrbSpin 9s linear infinite;}
@keyframes ccOrbSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.cc-busy-head{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--text);background:linear-gradient(90deg,var(--title-hi,#fff) 0%,var(--premium-light,#3fae7e) 30%,var(--title-hi,#fff) 50%,var(--premium-light,#3fae7e) 70%,var(--title-hi,#fff) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ccBusyShimmer 4.5s ease-in-out infinite;letter-spacing:.01em;}
@keyframes ccBusyShimmer{0%{background-position:-200% center;}100%{background-position:200% center;}}
.cc-busy-sub{color:var(--muted);font-size:.88rem;}
.cc-busy-timer{margin-top:.4rem;font-weight:800;color:var(--gold);border:1px solid var(--border);border-radius:999px;padding:.15rem .7rem;font-size:.8rem;}
.cc-origin-events{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem;}
.cc-origin-events li{padding:.45rem .65rem;border-left:3px solid var(--gold);background:var(--surface-2,rgba(255,255,255,.04));border-radius:0 8px 8px 0;font-size:.86rem;line-height:1.45;}
.cc-origin-events .age{font-weight:800;color:var(--gold-hi);margin-right:.3rem;}
.cc-sibs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;margin-top:.4rem;}
.cc-sib{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .65rem;border:1px solid var(--border);border-radius:10px;background:var(--surface-1,rgba(255,255,255,.02));}
.cc-sib .nm{font-weight:700;font-size:.86rem;}
.cc-sib .tag{font-weight:400;color:var(--danger);font-size:.74rem;}
.cc-sib .age{font-size:.78rem;color:var(--muted);white-space:nowrap;}
.cc-sib.you{border-color:var(--gold);background:rgba(214,178,87,.08);}
.cc-sib.you .nm{color:var(--gold-hi);}
.cc-sib.dead .nm{color:var(--muted);}
.csh-events{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.25rem;}
.csh-events li{font-size:.82rem;line-height:1.45;color:var(--text);}
.csh-events b{color:var(--gold-hi);}
/* Printable spell sheet (per level, Known + Prepared dots) */
.csh-spellkey{display:flex;gap:1.2rem;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:800;margin-bottom:.4rem;}
.csh-spellkey span{display:inline-flex;align-items:center;gap:.35rem;}
.csh-spellbook{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 1.1rem;align-items:start;margin-top:.3rem;}
.csh-spell-col{break-inside:avoid;}
.csh-spell-lv{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-hi);margin:0 0 .25rem;border-bottom:1px solid var(--border-soft);padding-bottom:.15rem;}
.csh-spell{display:flex;align-items:center;gap:.4rem;font-size:.8rem;padding:.28rem 0;line-height:1.3;border-bottom:1px dotted var(--border-soft);color:var(--text);}
.csh-spell:last-child{border-bottom:none;}
.csh-spell .nm{margin-left:.2rem;}
.csh-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted);flex:none;display:inline-block;}
.csh-dot.on{background:var(--gold-hi);border-color:var(--gold-hi);}
/* Death saves (3 success / 3 failure) */
.csh-deaths{display:flex;flex-direction:column;gap:.2rem;}
.csh-deaths .ds{display:flex;align-items:center;gap:.3rem;margin-top:.15rem;}
.csh-deaths .ds-l{font-size:.56rem;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:800;min-width:60px;}
/* Class features chips */
.csh-feats{display:flex;flex-wrap:wrap;gap:.35rem;}
.csh-feat{font-size:.8rem;padding:.22rem .55rem;border-radius:8px;border:1px solid var(--border-soft);background:var(--surface-2,rgba(255,255,255,.04));color:var(--text);}
.csh-feat b{color:var(--gold-hi);font-size:.64rem;margin-right:.3rem;}
.csh-feat.sub{border-color:rgba(139,112,255,.4);}
/* Detailed Features & Feats reference (name + full description) */
.csh-detail-grp{margin-bottom:.9rem;}
.csh-detail-grp:last-child{margin-bottom:0;}
.csh-detail-cls{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-hi);margin:0 0 .45rem;border-bottom:1px solid var(--border-soft);padding-bottom:.2rem;}
.csh-detail-item{margin:0 0 .7rem 20px;padding-bottom:.7rem;border-bottom:1px dotted var(--border-soft);break-inside:avoid;padding-top: 10px;}
.csh-detail-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
/* Name line as a slim gold-tinted bar (a lighter take on the section banner). */
.csh-detail-item .nm{font-weight:700;font-size:.88rem;padding:.28rem .55rem;border-left:2px solid var(--gold);border-radius:0 6px 6px 0;background:linear-gradient(90deg,rgba(214,178,87,.12),rgba(214,178,87,.02));}
.csh-detail-item .nm b{color:var(--gold-hi);font-size:.66rem;margin-right:.35rem;}
.csh-detail-tag{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin-left:.35rem;}
.csh-detail-item .dsc{font-size:.8rem;line-height:1.5;color:var(--text);margin-top:.35rem;padding:0 .55rem;}

/* Class features grouped per class (multiclass) */
.csh-feat-group{margin-bottom:.7rem;}
.csh-feat-group:last-child{margin-bottom:0;}
.csh-feat-cls{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-hi);margin:0 0 .35rem;}
/* Per-class spellcasting blocks inside the Spellcasting card (multiclass) */
.csh-spellblock + .csh-spellblock{margin-top:.5rem;padding-top:.5rem;border-top:1px dotted var(--border-soft);}
.csh-spellblock-h{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-hi);margin:0 0 .35rem;}
.cc-debug{margin-top:1rem;border:1px dashed var(--border);border-radius:10px;padding:.4rem .7rem;background:var(--surface-1,rgba(255,255,255,.02));}
.cc-debug summary{cursor:pointer;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:800;}
.cc-debug-row{display:flex;gap:.6rem;padding:.3rem 0;border-bottom:1px dotted var(--border-soft);font-size:.76rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.cc-debug-row:last-child{border-bottom:none;}
.cc-debug-row .t{flex:none;min-width:200px;color:var(--violet);}
.cc-debug-row .v{flex:1;color:var(--muted);word-break:break-word;}

/* Detail panel under a selection */
.cc-detail{margin-top:1rem;padding:1rem;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface-1,rgba(255,255,255,.02));}
.cc-detail h4{margin:0 0 .3rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);}
.cc-trait{padding:.5rem .7rem;border-left:3px solid var(--border);margin:.4rem 0;}
.cc-trait b{color:var(--gold-hi);}
.cc-prose{color:var(--text);font-size:.9rem;line-height:1.6;}

/* Name field + species-aware roll button, inline */
.cc-name-row{display:flex;gap:.5rem;align-items:stretch;}
.cc-name-row input{flex:1;min-width:0;}
.cc-name-row .cc-btn{flex:none;padding:.6rem .7rem;}
/* "Roll names as" name-system picker under the name field */
.cc-namesrc{display:flex;align-items:center;gap:.5rem;margin-top:.45rem;}
.cc-namesrc label{margin:0;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:800;white-space:nowrap;}
.cc-namesrc select{flex:1;min-width:0;padding:.4rem .6rem;}

/* Read-only field value (e.g. Identity total level) */
.cc-readout{padding:.55rem .7rem;border:1px dashed var(--border);border-radius:10px;background:var(--surface-1,rgba(255,255,255,.015));color:var(--muted);font-weight:700;font-size:.9rem;}

/* ── Multiclass manager (Class step) ── */
.cc-mc-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .85rem;border:1px solid var(--border);border-radius:10px;background:rgba(214,178,87,.06);margin-bottom:.4rem;}
.cc-mc-total{font-size:.95rem;font-weight:700;}
.cc-mc-total b{color:var(--gold-hi);font-size:1.1rem;}
.cc-mc-pb{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);}
.cc-mc-class .cc-mc-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.4rem;}
.cc-mc-name{font-size:1.05rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.cc-mc-subtag{font-size:.72rem;font-weight:700;color:var(--violet,#b692ff);}
.cc-mc-lvl{display:flex;align-items:center;gap:.5rem;}
.cc-mc-lvl > b{min-width:3.4rem;text-align:center;font-size:.92rem;}
.cc-mc-rm{margin-left:.3rem;}
.cc-mc-meta{font-size:.82rem;color:var(--muted);margin-bottom:.3rem;}
.cc-sub-lbl{margin:.8rem 0 .4rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:800;}
.cc-mc-add{margin-top:1.1rem;}
.cc-chip-prim{color:var(--gold-hi);border-color:rgba(240,217,122,.35);background:rgba(240,217,122,.08);}
.cc-chip-warn{color:var(--muted);border-color:var(--border);background:var(--surface-2,rgba(255,255,255,.03));font-weight:600;}
.cc-chip-ok{color:var(--premium,#7ad7a0);border-color:rgba(122,215,160,.4);background:rgba(122,215,160,.1);font-weight:600;}
.cc-chip-bad{color:#f0a8a8;border-color:rgba(220,120,120,.4);background:rgba(220,120,120,.12);font-weight:600;white-space:normal;text-align:left;line-height:1.3;}
.cc-spell-class{margin-bottom:1.4rem;}

/* Review step — header with title left, action icons top-right */
.cc-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;}
.cc-review-acts{display:flex;gap:.5rem;flex:none;}
.cc-actbtn{width:2.4rem;height:2.4rem;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);background:var(--surface-2,rgba(255,255,255,.05));color:var(--text);font-size:.95rem;cursor:pointer;transition:all .12s;}
.cc-actbtn:hover{color:#1a1208;background:linear-gradient(135deg,var(--gold-hi),var(--gold));border-color:rgba(214,178,87,.6);}
@media print{.cc-review-acts{display:none !important;}}

/* Spells step — shared slot summary + multiclass upcast note */
.cc-slot-summary{margin:0 0 1.2rem;padding:.7rem .85rem;border:1px solid var(--border);border-radius:12px;background:var(--surface-1,rgba(255,255,255,.015));}
.cc-slot-summary .cc-sub-lbl{margin-top:0;}
.cc-slot-note{margin-top:.6rem;font-size:.82rem;color:var(--muted);}
.cc-slot-note i{color:var(--gold-hi);margin-right:.3rem;}
.cc-slot-note b{color:var(--gold-hi);}

/* Feats & ASI — live ability-score strip pinned to the top of the step */
.cc-asi-scores{position:sticky;top:.5rem;z-index:5;display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin:0 0 1.1rem;padding:.55rem;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,var(--panel-top),var(--panel));box-shadow:0 6px 18px rgba(0,0,0,.28);}
.cc-asi-sc{text-align:center;border:1px solid var(--border-soft);border-radius:8px;padding:.3rem .2rem;}
.cc-asi-sc .ab{display:block;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);}
.cc-asi-sc .v{font-size:1.25rem;font-weight:800;color:var(--gold-hi);line-height:1.15;}
.cc-asi-sc .md{display:block;font-size:.72rem;font-weight:700;color:var(--muted);}

/* Feats & ASI — per-slot completeness cue so unfinished choices are easy to spot */
.cc-choice.is-todo{border-left:3px solid #d9a441;}
.cc-choice.is-todo > h4{color:#e7b75a;}
.cc-choice.is-done{border-left:3px solid rgba(122,215,160,.5);}
.cc-choice-badge{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:.12rem .45rem;border-radius:999px;margin-left:.4rem;vertical-align:middle;white-space:nowrap;}
.cc-choice-badge.todo{color:#1a1208;background:#e7b75a;}
.cc-choice-badge.ok{color:var(--premium,#7ad7a0);background:rgba(122,215,160,.14);border:1px solid rgba(122,215,160,.35);}

/* Feat detail notes (prereq + granted ability increase) */
.cc-feat-pre{color:var(--muted);margin-top:.3rem;}
.cc-feat-asi{margin-top:.4rem;}
.cc-feat-asi b{color:var(--gold-hi);}
.cc-feat-need{color:#f0a8a8;font-weight:700;text-transform:none;letter-spacing:0;}

/* Personality pick-or-custom fields */
.cc-pers-field{margin-bottom:1rem;}
.cc-pers-field .cc-pers-pick{margin-bottom:.4rem;}
.cc-pers-hint{text-transform:none;letter-spacing:0;font-weight:600;color:var(--faint);font-size:.7rem;}

/* Toggle chips for multi-select (skills, spells) */
.cc-toggles{display:flex;flex-wrap:wrap;gap:.4rem;}
.cc-toggle{font-family:inherit;font-size:.8rem;font-weight:700;padding:.4rem .75rem;border-radius:999px;border:1px solid var(--border);background:var(--field-bg,rgba(8,8,14,.55));color:var(--muted);cursor:pointer;transition:all .12s;}
.cc-toggle:hover{color:var(--text);border-color:var(--violet);}
.cc-toggle.is-on{color:#1a1208;background:linear-gradient(135deg,var(--gold-hi),var(--gold));border-color:rgba(214,178,87,.6);}
.cc-toggle:disabled{opacity:.4;cursor:not-allowed;}
.cc-pickcount{font-size:.8rem;color:var(--muted);margin:.2rem 0 .7rem;}
.cc-spell-div{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-hi);margin:.9rem 0 .4rem;padding-bottom:.2rem;border-bottom:1px solid var(--border-soft);}
.cc-slot-tag{float:right;text-transform:none;letter-spacing:0;font-weight:700;color:var(--muted);}
/* Dim unselected spell chips so a long list is easier on the eyes; hover restores. */
#sp_body .cc-toggle:not(.is-on){opacity:.35;transition:opacity .12s,color .12s,border-color .12s;}
#sp_body .cc-toggle:not(.is-on):hover{opacity:1;}
.cc-pickcount b{color:var(--gold-hi);}

/* Abilities */
.cc-methods{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.cc-abil-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;}
.cc-abil{border:1px solid var(--border);border-radius:12px;padding:.7rem .5rem;text-align:center;background:var(--surface-1,rgba(255,255,255,.02));}
.cc-abil .ab{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);}
.cc-abil .sc{font-size:1.6rem;font-weight:800;color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums;}
.cc-abil .md{font-size:.8rem;color:var(--gold-hi);font-weight:700;}
.cc-abil .bonus{font-size:.66rem;color:var(--premium);}
.cc-abil input,.cc-abil select{width:100%;text-align:center;margin-top:.3rem;padding:.3rem;border-radius:8px;border:1px solid var(--border);background:var(--field-bg,rgba(8,8,14,.55));color:var(--text);font:inherit;font-weight:800;}
.cc-abil .stepper{display:flex;gap:.25rem;justify-content:center;margin-top:.35rem;}
.cc-abil .stepper button{width:1.6rem;height:1.6rem;border-radius:7px;border:1px solid var(--border);background:var(--surface-2,rgba(255,255,255,.04));color:var(--text);cursor:pointer;font-weight:800;}
.cc-pool{display:flex;flex-wrap:wrap;gap:.45rem;margin:.5rem 0 1rem;min-height:2.6rem;padding:.5rem;border:1px dashed var(--border);border-radius:12px;background:var(--surface-1,rgba(255,255,255,.02));}
.cc-pool .val{font-weight:800;font-size:1.05rem;min-width:2.4rem;text-align:center;padding:.45rem .6rem;border-radius:10px;border:1px solid var(--border);background:var(--surface-2,rgba(255,255,255,.05));cursor:grab;user-select:none;transition:transform .1s,border-color .12s,background .12s;}
.cc-pool .val:hover{border-color:var(--violet);}
.cc-pool .val.sel{border-color:var(--gold);background:rgba(214,178,87,.18);color:var(--gold-hi);transform:translateY(-2px);}
.cc-pool .val:active{cursor:grabbing;}
.cc-pool .empty{color:var(--faint);font-size:.82rem;align-self:center;}
.cc-assigned-count{font-size:.84rem;color:var(--muted);margin:.2rem 0 .2rem;}
.cc-assigned-count b{color:var(--gold-hi);}
.cc-hint-sm{font-size:.78rem;color:var(--faint);}

/* ability box as drop target + assigned state + per-score reset */
.cc-abil{position:relative;}
.cc-abil.is-drop{border-color:var(--violet);box-shadow:0 0 0 2px rgba(139,112,255,.45) inset;}
.cc-abil.assigned{border-color:var(--gold);background:rgba(214,178,87,.08);}
.cc-abil .clear{position:absolute;top:.3rem;right:.3rem;width:1.3rem;height:1.3rem;border-radius:50%;border:1px solid var(--border);background:var(--surface-2,rgba(255,255,255,.06));color:var(--muted);cursor:pointer;font-size:.85rem;line-height:1;display:none;align-items:center;justify-content:center;padding:0;}
.cc-abil .clear:hover{color:var(--danger);border-color:var(--danger);}
.cc-abil.assigned .clear,.cc-abil.has-clear .clear{display:inline-flex;}
.cc-abil .slot{font-size:1.7rem;font-weight:800;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums;cursor:pointer;}
.cc-abil .slot.empty{color:var(--faint);}
.cc-abil .final{font-size:.8rem;color:var(--muted);font-weight:700;margin-top:.1rem;}
.cc-abil .final b{color:var(--gold-hi);}
/* Key (primary) abilities for the chosen class(es) */
.cc-abil.is-primary{border-color:var(--gold-hi);box-shadow:0 0 0 1px rgba(240,217,122,.35) inset;background:linear-gradient(180deg,rgba(240,217,122,.07),var(--surface-1,rgba(255,255,255,.02)));}
.cc-abil.is-primary .ab{color:var(--gold-hi);}
.cc-abil-primary{position:absolute;top:.3rem;left:.35rem;color:var(--gold-hi);font-size:.7rem;line-height:1;}
.cc-abil-legend{font-size:.8rem;color:var(--muted);margin:.1rem 0 .5rem;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;}
.cc-abil-legend > i{color:var(--gold-hi);}
.cc-abil-legend b{color:var(--gold-hi);font-weight:800;}
.cc-abil-legend-hint{color:var(--faint);}

/* Summary bar */
.cc-summary{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:.8rem;padding:.6rem max(1.2rem,calc((100vw - var(--maxw))/2 + 1.2rem));background:rgba(10,10,18,.92);backdrop-filter:blur(10px);border-top:1px solid var(--border);flex-wrap:wrap;}
/* The class's display:flex beats the UA [hidden] rule, so make hidden explicit —
   otherwise the footer lingers with the last character's info after going to the list. */
.cc-summary[hidden]{display:none !important;}
html[data-theme="light"] .cc-summary{background:rgba(255,253,247,.92);}
.cc-summary .who{font-weight:800;font-size:.9rem;min-width:0;}
.cc-summary .who small{color:var(--muted);font-weight:600;}
.cc-summary .stats{display:flex;gap:.5rem;flex-wrap:wrap;}
.cc-stat{display:inline-flex;flex-direction:column;align-items:center;min-width:48px;padding:.2rem .5rem;border-radius:9px;border:1px solid var(--border);background:var(--surface-1,rgba(255,255,255,.02));}
.cc-stat b{font-size:1rem;font-weight:800;color:var(--gold-hi);line-height:1;font-variant-numeric:tabular-nums;}
.cc-stat span{font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:800;}
.cc-summary .acts{display:flex;gap:.5rem;margin-left:auto;flex-wrap:wrap;}
.cc-savestate{font-size:.72rem;color:var(--faint);}

/* ── Review / printable character sheet (template layout) ── */
.cc-sheet.csh{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.4rem;color:var(--text);}
.csh h4{margin:0 0 .5rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-hi);border-bottom:1px solid var(--border-soft);padding-bottom:.25rem;}
.csh .lbl{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:800;}

/* masthead */
.csh-mast{display:grid;grid-template-columns:2fr 1.4fr 1.4fr;gap:1rem;border-bottom:2px solid var(--gold);padding-bottom:.8rem;margin-bottom:.7rem;}
.csh-mf .big{display:block;font-size:1.2rem;font-weight:800;min-height:1.4em;border-bottom:1px solid var(--border-soft);}
.csh-mf.grow .big{font-size:1.5rem;}
.csh-mf .sub{margin-top:.5rem;}
.csh-mf .sub-val{display:block;font-size:.8rem;font-weight:700;min-height:1.3em;border-bottom:1px solid var(--border-soft);}
.csh-mast2{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1rem;}
.csh-mast2 .csh-fld{flex:1;min-width:90px;}

/* generic field box */
.csh-fld{border:1px solid var(--border-soft);border-radius:8px;padding:.35rem .5rem;}
.csh-fld .val{display:block;font-weight:700;font-size:1rem;min-height:1.2em;}
.csh-fld.wide{flex:2;}

/* body grid */
.csh-body{display:grid;grid-template-columns:0.9fr 1.5fr 1.7fr;gap:1.1rem;align-items:start;}
/* Column B stretches to match the (taller) right column so the Conditions box at
   its foot can fill the space the portrait freed up. */
.csh-mid{display:flex;flex-direction:column;align-self:stretch;}
.csh-mid > .csh-conditions{flex:1 1 auto;display:flex;flex-direction:column;margin-bottom:0;min-height:6rem;}
.csh-mid > .csh-conditions .val{flex:1;min-height:3rem;}

/* abilities */
.csh-abils{display:flex;flex-direction:column;gap:.5rem;}
.csh-ab{border:1px solid var(--border);border-radius:10px;padding:.45rem .5rem;text-align:center;}
.csh-ab .nm{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
/* min-height keeps the score row (and the box) full-size even when blank, so a
   blank sheet's ability boxes don't collapse and there's room to write. */
.csh-ab .sc{font-size:1.7rem;font-weight:800;color:var(--gold-hi);line-height:1.1;min-height:1.9rem;}
.csh-ab .md b{display:inline-block;min-height:1.1em;font-size:1rem;font-weight:800;}
.csh-ab .md span{display:block;font-size:.55rem;text-transform:uppercase;color:var(--faint);letter-spacing:.05em;}

/* sections */
.csh-sec{margin-bottom:.9rem;}
.csh-sec.wide{margin-top:2.2rem;}
/* Full-width sections read as distinct "categories" — a banner header with a gold
   accent bar and one rounded edge, larger text. */
.csh-sec.wide > h4{
  font-size:1rem;letter-spacing:.05em;color:var(--gold-hi);font-weight:800;
  background:linear-gradient(90deg,rgba(214,178,87,.18),rgba(214,178,87,.02));
  border:none;border-left:3px solid var(--gold);border-radius:0 12px 12px 0;
  padding:.55rem .85rem;margin:0 0 1.1rem;
}

/* saving throws */
.csh-save{margin-bottom:.5rem;}
.csh-save .top{display:flex;align-items:center;gap:.45rem;}
.csh-save .nm{font-weight:700;flex:1;}
.csh-save .bn{font-weight:800;color:var(--gold-hi);}
.csh-save .desc{font-size:.72rem;font-style:italic;color:var(--muted);margin:.1rem 0 0 1.05rem;}

/* proficiency dots */
.csh .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted);flex:none;display:inline-block;}
.csh .dot.on{background:var(--gold-hi);border-color:var(--gold-hi);}

/* skills */
.csh-skills{display:flex;flex-direction:column;}
.csh-skill{display:flex;align-items:center;gap:.45rem;padding:.13rem 0;border-bottom:1px dotted var(--border-soft);font-size:.85rem;}
.csh-skill .nm{flex:1;}
.csh-skill .nm i{color:var(--faint);font-size:.72rem;font-style:italic;}
.csh-skill .bn{font-weight:700;}

/* right column */
.csh-status{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem;margin-bottom:.6rem;}
.csh-status-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.csh-conditions .val{min-height:2.6rem;}
.csh-hp{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.6rem;}
.csh-hp .hp{border:1px solid var(--border);border-radius:10px;padding:.45rem;text-align:center;}
.csh-hp .hp .lbl{margin-bottom:.25rem;}
.csh-hp .hp .v{font-size:1.45rem;font-weight:800;color:var(--gold-hi);min-height:1.1em;display:block;}
.csh-combat{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.6rem;}
.csh-combat .csh-span2{grid-column:span 2;}
.csh-slots{font-size:.82rem;margin-top:.2rem;}
.csh-slots .lbl{display:block;margin-bottom:.3rem;}
.csh-slotrow{display:flex;flex-wrap:wrap;gap:.35rem;}
.csh-slot{display:inline-flex;align-items:stretch;border:1px solid var(--border-soft);border-radius:7px;overflow:hidden;font-weight:800;line-height:1;}
.csh-slot .lv{padding:.22rem .4rem;font-size:.66rem;letter-spacing:.03em;color:var(--faint);background:rgba(255,255,255,.04);display:flex;align-items:center;}
.csh-slot .ct{padding:.22rem .42rem;font-size:.84rem;color:var(--gold-hi);display:flex;align-items:center;}
.csh-slot.pact .ct{color:var(--violet,#b692ff);}
.csh-senses{margin-top:0;}
.csh-prose{font-size:.84rem;line-height:1.45;color:var(--text);}
.csh-prose b{color:var(--gold-hi);}
.csh-coinnote{font-size:.65rem;color:var(--faint);text-align:right;margin-top:.25rem;}

/* Info row — spellcasting + reference blocks as full-width cards under the body */
.csh-info{display:flex;flex-direction:column;gap:1.1rem;align-items:stretch;margin-top:.4rem;}
/* Three equal cards (Currency / Languages / Background) on one full-width row. */
.csh-inforow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:stretch;}
.csh-card{border:1px solid var(--border-soft);border-radius:12px;padding:.7rem .85rem .8rem;background:rgba(255,255,255,.012);}
.csh-card > h4{margin-top:0;}
.csh-card .csh-combat{margin-bottom:.4rem;}
.csh-spellcard{grid-column:1 / -1;}
.csh-money{font-size:1.15rem;font-weight:800;color:var(--gold-hi);}

/* traits + weapons */
.csh-trait{padding:.32rem 0;font-size:.84rem;border-bottom:1px dotted var(--border-soft);}
.csh-trait b{color:var(--gold-hi);}
.csh-weap{width:100%;border-collapse:collapse;font-size:.8rem;}
.csh-weap th{text-align:left;font-style:italic;font-weight:600;color:var(--muted);border-bottom:1px solid var(--border);padding:.3rem .4rem;}
/* Fixed, writable row height so filled and blank rows match (room to hand-write). */
.csh-weap td{border-bottom:1px solid var(--border-soft);padding:.25rem .4rem;height:1.7rem;vertical-align:middle;}
/* Inventory uses the same lined table — Qty narrow/centered, Notes a fixed share. */
.csh-inv th:nth-child(2), .csh-inv td:nth-child(2){width:3.5rem;text-align:center;}
.csh-inv th:nth-child(3), .csh-inv td:nth-child(3){width:38%;}

/* Sheet portrait box (top of the right column) */
.csh-portrait{aspect-ratio:1/1;border:1px solid var(--border);border-radius:10px;margin-bottom:.6rem;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--surface-1,rgba(255,255,255,.02));}
.csh-portrait img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;}
.csh-portrait-ph{color:var(--faint);font-size:.8rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:.35rem;}
.csh-portrait-ph i{font-size:1.7rem;}

/* Appearance step — portrait uploader + detail fields */
.cc-appear{display:grid;grid-template-columns:210px 1fr;gap:1.3rem;align-items:start;}
.cc-portrait-box{aspect-ratio:1/1;border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--surface-1,rgba(255,255,255,.02));}
.cc-portrait-box img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
.cc-portrait-box.loading{color:var(--muted);font-size:1.5rem;}
.cc-portrait-browse{width:100%;justify-content:center;margin-top:.5rem;}
/* Portrait library modal */
.cc-portlib-card{max-width:760px;max-height:88vh;overflow:auto;}
.cc-portlib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.7rem;margin-top:.9rem;}
.cc-portlib-item{position:relative;aspect-ratio:1/1;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface-1,rgba(255,255,255,.02));}
.cc-portlib-item img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block;transition:transform .15s ease;}
.cc-portlib-item img:hover{transform:scale(1.04);}
.cc-portlib-item.is-cur{outline:2px solid var(--gold);outline-offset:-2px;}
.cc-portlib-del{position:absolute;top:.3rem;right:.3rem;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.72rem;opacity:0;transition:opacity .15s ease;}
.cc-portlib-item:hover .cc-portlib-del{opacity:1;}
.cc-portlib-del:hover{background:var(--danger,#c0392b);}
.cc-portlib-tag{position:absolute;left:.3rem;bottom:.3rem;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.1rem .35rem;border-radius:5px;background:rgba(0,0,0,.6);color:#cdd;}
.cc-portlib-tag.is-ai{background:rgba(52,201,138,.85);color:#08231a;}
.cc-portlib-empty{margin-top:1rem;color:var(--faint);}
/* Portrait lightbox — click a portrait to view it full-size. */
.cc-lightbox{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:3vmin;background:rgba(4,4,8,.86);backdrop-filter:blur(3px);cursor:zoom-out;}
.cc-lightbox.show{display:flex;}
.cc-lightbox img{max-width:92vw;max-height:92vh;width:auto;height:auto;border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);}
.cc-lightbox-close{position:absolute;top:max(2vmin,14px);right:max(2vmin,18px);width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cc-lightbox-close:hover{background:rgba(0,0,0,.75);border-color:rgba(255,255,255,.5);}
.cc-portrait-drop{aspect-ratio:1/1;border:2px dashed var(--border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--muted);cursor:pointer;text-align:center;padding:1rem;transition:border-color .15s,color .15s;}
.cc-portrait-drop:hover{border-color:var(--violet);color:var(--text);}
.cc-portrait-drop i{font-size:1.9rem;}
.cc-portrait-drop small{font-size:.7rem;color:var(--faint);}
.cc-portrait-acts{display:flex;gap:.5rem;margin-top:.55rem;justify-content:center;flex-wrap:wrap;}
/* Four portrait actions in a tidy 2×2 grid matching the portrait box width. */
.cc-portrait-acts-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.cc-portrait-acts-grid .cc-btn{justify-content:center;}
.cc-portrait-gen{margin-top:1.1rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,rgba(52,201,138,.06),rgba(8,8,14,.25));}
.cc-portrait-gen-label{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:.92rem;color:var(--text);margin-bottom:.55rem;}
.cc-portrait-gen-label i{color:#34c98a;}
.cc-portrait-gen textarea{width:100%;min-height:5.5rem;padding:.7rem .8rem;border-radius:10px;border:1px solid var(--border);background:var(--field-bg,rgba(8,8,14,.55));color:var(--text);font:inherit;font-size:.9rem;line-height:1.45;resize:vertical;}
.cc-portrait-gen textarea:focus{outline:none;border-color:#34c98a;box-shadow:0 0 0 2px rgba(52,201,138,.18);}
.cc-portrait-gen-actions{display:flex;align-items:center;gap:.9rem;margin-top:.7rem;}
.cc-portrait-cost{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--faint);}
.cc-portrait-cost i{color:#34c98a;}
.cc-appear-fields{min-width:0;}
/* Height/weight sliders */
.cc-measure{margin-bottom:1rem;}
.cc-measure > label{display:flex;align-items:baseline;justify-content:space-between;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:800;}
.cc-measure-val{color:var(--gold-hi);font-size:1.05rem;font-weight:800;text-transform:none;letter-spacing:0;}
.cc-measure input[type=range]{width:100%;margin-top:.45rem;accent-color:var(--gold);cursor:pointer;}
.cc-measure-ends{display:flex;justify-content:space-between;font-size:.68rem;color:var(--faint);margin-top:.15rem;}
@media (max-width:600px){.cc-appear{grid-template-columns:1fr;}}

/* Blank-sheet picker: optional client-side portrait */
.cc-blank-portrait{display:flex;align-items:center;gap:.8rem;margin:1rem 0 .2rem;padding:.7rem .8rem;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.015);}
.cc-blank-pthumb{flex:none;width:54px;height:54px;border-radius:10px;border:1px solid var(--border);background:var(--surface-1,rgba(255,255,255,.03));display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:1.3rem;overflow:hidden;}
.cc-blank-pthumb.has-img{border-color:var(--gold);}
.cc-blank-pthumb img{width:100%;height:100%;object-fit:cover;}
.cc-blank-pmeta{display:flex;flex-direction:column;gap:.4rem;min-width:0;}
.cc-blank-plabel{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.cc-blank-plabel .faint{color:var(--faint);font-weight:600;text-transform:none;letter-spacing:0;}
.cc-blank-pbtns{display:flex;flex-wrap:wrap;gap:.4rem;}

/* Attunement (3 magic-item slots) — full-width card, slots laid out horizontally */
.csh-attunecard{grid-column:1 / -1;}
.csh-profcard{grid-column:1 / -1;}
.csh-profcard .csh-prose{column-count:2;column-gap:2rem;}
.csh-profline{break-inside:avoid;margin-bottom:.15rem;}
.csh-attune{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:.3rem;}
.csh-attune-slot{display:flex;align-items:flex-end;gap:.5rem;}
.csh-attune-slot .n{font-size:.7rem;font-weight:800;color:var(--faint);width:1rem;flex:none;}
.csh-attune-slot .ln{flex:1;border-bottom:1px solid var(--border);height:1.25rem;}
@media (max-width:560px){.csh-attune{grid-template-columns:1fr;}}

/* Appearance / character details — labelled blank boxes */
.csh-appearance{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
.csh-appearance .csh-fld .val{min-height:1.3em;}

/* Share modal */
.cc-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1rem;background:var(--scrim,rgba(7,7,13,.84));backdrop-filter:blur(6px);}
.cc-modal.show{display:flex;}
/* The modal is appended to <body>, outside .cc-wrap, so set the page font here. */
.cc-modal-card{background:linear-gradient(180deg,var(--panel-top),var(--panel));border:1px solid var(--border);border-radius:16px;padding:1.5rem;max-width:520px;width:100%;font-family:var(--font);color:var(--text);}
.cc-modal-card h3{margin:0 0 .6rem;}
.cc-modal-card button{font-family:inherit;}
/* Species card info icon + details modal */
.cc-card-info{position:absolute;top:.4rem;right:.45rem;color:var(--faint);cursor:pointer;font-size:.9rem;line-height:1;padding:.15rem .2rem;border-radius:6px;z-index:2;transition:color .12s,background .12s;}
.cc-card-info:hover{color:var(--gold-hi);background:rgba(214,178,87,.14);}
#sp_cards .cc-card .t{padding-right:1.3rem;}
.cc-spinfo-card{max-width:600px;max-height:88vh;overflow:auto;}
.cc-spinfo-chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.cc-spinfo-list{margin:.35rem 0 0;padding-left:1.1rem;color:var(--muted,var(--faint));}
.cc-spinfo-list li{margin:.12rem 0;font-size:.88rem;line-height:1.4;}

/* Custom species editor */
.cc-custom-card{max-width:660px;max-height:88vh;overflow:auto;}
.cc-custom-card .cc-row{margin-bottom:.7rem;}
.cs-trait-row{display:flex;gap:.5rem;margin-bottom:.4rem;}
.cs-trait-row .cs-t-name{flex:0 0 34%;min-width:0;}
.cs-trait-row .cs-t-text{flex:1;min-width:0;}
.cs-trait-row input{padding:.5rem .6rem;border-radius:8px;border:1px solid var(--border);background:var(--field-bg,rgba(8,8,14,.55));color:var(--text);font:inherit;font-size:.85rem;}
.cs-trait-row .cc-del{flex:none;}

.cc-keyrow{display:flex;gap:.5rem;margin:.8rem 0;}
.cc-keyrow input{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;}

.cc-toast{position:fixed;bottom:5rem;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,var(--panel-top),var(--panel));border:1px solid var(--border);border-radius:10px;padding:.6rem 1rem;font-family:var(--font);font-size:.85rem;color:var(--text);box-shadow:0 8px 28px rgba(0,0,0,.45);z-index:300;opacity:0;transition:opacity .2s;pointer-events:none;}
.cc-toast.show{opacity:1;}

/* Screen-only — a printed page is ~816px wide (< 820), so without "screen" this
   mobile collapse would fire on print and stack every column vertically. */
@media screen and (max-width:820px){
  .cc-app, .cc-app.cc-collapsed{grid-template-columns:1fr;}
  .cc-rail{position:static;flex-direction:row;flex-wrap:wrap;overflow-x:auto;}
  .cc-rail-toggle{display:none;}
  .cc-step{flex:none;}
  .cc-step .lbl .sub{display:none;}
  .cc-abil-grid{grid-template-columns:repeat(3,1fr);}
  .csh-mast{grid-template-columns:1fr;}
  .csh-body{grid-template-columns:1fr;}
  .csh-abils{flex-direction:row;flex-wrap:wrap;}
  .csh-abils .csh-ab{flex:1;min-width:90px;}
  .csh-inforow{grid-template-columns:1fr;}
  .csh-spellbook{grid-template-columns:1fr 1fr;}
}

/* Print: only the dedicated #cc_print sheet copy. We DISPLAY:NONE the builder (not
   visibility:hidden) so its tall, off-screen content doesn't reserve layout space
   and spill out blank trailing pages. #cc_print then prints in normal flow. */
.cc-print{display:none;}
@media print{
  .topbar, .footer, .cc-back, .cc-head, .cc-summary, #cc_dash, #cc_builder, #cc_view,
  .ai-usage-badge, .ai-limit-modal, .cc-modal, .cc-toast{display:none !important;}
  .cc-wrap{padding:0 !important;max-width:none !important;}
  .cc-print{display:block !important;background:#fff;}
}

/* Sheet for print (Review print + public sheet.php): a LIGHT version that keeps the
   on-screen design. Rather than flatten everything to grey, we re-map the theme's
   CSS variables to paper-friendly values scoped to the sheet — so panels become
   white, body text goes dark, and the gold accents/banners/numbers stay gold. */
@media print{
  .cc-sheet.csh{
    /* paper surfaces */
    --panel-top:#ffffff; --panel:#ffffff; --surface-1:#ffffff; --surface-2:#f4f3ef; --field-bg:#ffffff; --scrim:#fff;
    /* ink */
    --text:#1b1b20; --muted:#555a5e; --faint:#6f6a62;
    /* gold accents, darkened so they read on white */
    --gold-hi:#b8860b; --gold:#9c7615;
    /* other accents */
    --premium:#2f7d52; --violet:#6b4fb0; --danger:#b03030; --border:#9a968f; --border-soft:#c9c5bd;
    background:#fff !important; color:#1b1b20 !important; border:none !important; padding:0 !important;
  }
  /* Force backgrounds/fills (banners, dot fills, slot chips, badges) to actually
     print, and keep each element's text in its own colour. */
  .cc-sheet.csh, .cc-sheet.csh *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; -webkit-text-fill-color:currentColor; }
  /* Make the gold section banner read a touch stronger on paper. */
  .csh-sec.wide > h4{background:linear-gradient(90deg,rgba(184,134,11,.16),rgba(184,134,11,.03)) !important;border-left:3px solid var(--gold) !important;}
  /* Avoid awkward splits across page breaks. */
  .csh-sec, .csh-spell-col, .csh-card, .csh-ab, .csh-feat-group{break-inside:avoid;}
  /* …except the tall spell sheet / notes sections, which MUST be allowed to flow
     (otherwise break-inside:avoid leaves their header alone on an otherwise blank
     page and pushes the content to the next one). */
  .csh-spellsheet, .csh-notesheet{break-inside:auto;}
  /* Each spell sheet starts on a fresh page. */
  .csh-spellsheet{break-before:page;page-break-before:always;}
  /* CSS grid doesn't fragment across pages reliably — a tall spell list (Sorcerer,
     Wizard…) leaves its header on an otherwise-blank page and dumps the columns on
     the next one. Flow the spellbook as newspaper columns, which paginate cleanly. */
  .csh-spellbook{display:block !important;column-count:3;column-gap:1.1rem;}
  .csh-spellbook .csh-spell-col{break-inside:avoid;width:100%;margin-bottom:.5rem;}
  /* Blank sheet: Notes gets its own full page to write on. */
  .csh-notesheet{break-before:page;page-break-before:always;}
  .csh-notesheet .csh-blanknotes{min-height:20cm;}
  /* Equipment & Inventory gets its own full page, lines running the whole height. */
  .csh-equip-page{break-before:page;page-break-before:always;break-inside:auto;}
  /* The big Character Name's underline sits lower than the other masthead fields'
     and looks misaligned on paper — drop it so the row reads intentionally. */
  .csh-mf.grow .big{border-bottom:none !important;}
  /* Keep the desktop multi-column layout on paper (the screen-only breakpoint no
     longer collapses it); trim a hair so three columns breathe at page width. */
  .cc-sheet.csh{font-size:.94em;}
  .csh-body{gap:.8rem;}
  .csh-info{gap:.8rem;}
}
@page{ margin:0.5in; }