/*
 * StudioHub / Atelier interface system, release 1.
 * A token-first visual language layered over the existing, functioning workflow.
 * The inherited stylesheet remains as progressive fallback; new screens should
 * consume these semantic tokens rather than inserting literal colors.
 */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --ds-canvas:#101119; --ds-rail:#14151d; --ds-surface:#1b1c25;
  --ds-raised:#22232f; --ds-soft:#262733; --ds-field:#20212b;
  --ds-line:#343540; --ds-line-strong:#4b4a58;
  --ds-ink:#f2f0f5; --ds-secondary:#c4c1cc; --ds-muted:#aaa7b7; --ds-faint:#9290a2;
  --ds-accent:#bfaef7; --ds-accent-hi:#d5caff; --ds-accent-on:#221a40;
  --ds-accent-soft:#353047; --ds-success:#a9e9c5; --ds-success-bg:#263e35;
  --ds-warning:#f4d9a3; --ds-warning-bg:#453b2c;
  --ds-danger:#ffbdba; --ds-danger-bg:#4a2e36;
  --ds-overlay:rgba(10,10,18,.82); --ds-shadow:0 18px 60px rgba(0,0,0,.2);
  --ds-sidebar-shadow:0 12px 44px rgba(0,0,0,.26);
  --ds-radius-xs:7px; --ds-radius-sm:10px; --ds-radius-md:13px;
  --ds-radius-lg:16px; --ds-radius-xl:20px;
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px;
  --ds-5:20px; --ds-6:24px; --ds-8:32px; --ds-10:40px;
  --ds-fast:130ms; --ds-normal:190ms; --ds-slow:290ms;
  --ds-ease:cubic-bezier(.2,.75,.25,1);
  --ds-focus:0 0 0 3px color-mix(in srgb,var(--ds-accent) 45%,transparent);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ds-canvas:#f5f4f1; --ds-rail:#f0efec; --ds-surface:#ffffff;
  --ds-raised:#faf9f8; --ds-soft:#eeecea; --ds-field:#f9f8f7;
  --ds-line:#dfdce0; --ds-line-strong:#bcb7c3;
  --ds-ink:#25242e; --ds-secondary:#464250; --ds-muted:#64616e; --ds-faint:#706b77;
  --ds-accent:#625095; --ds-accent-hi:#54427f; --ds-accent-on:#ffffff;
  --ds-accent-soft:#ece7f4; --ds-success:#28674c; --ds-success-bg:#e4f3e9;
  --ds-warning:#82551c; --ds-warning-bg:#f8efdd;
  --ds-danger:#a0404a; --ds-danger-bg:#f9e5e6;
  --ds-overlay:rgba(29,27,35,.48); --ds-shadow:0 12px 48px rgba(36,31,42,.09);
  --ds-sidebar-shadow:0 12px 44px rgba(36,31,42,.16);
}
@media(prefers-color-scheme:light) {
 :root[data-theme="auto"] {
  color-scheme:light;
  --ds-canvas:#f5f4f1; --ds-rail:#f0efec; --ds-surface:#ffffff;
  --ds-raised:#faf9f8; --ds-soft:#eeecea; --ds-field:#f9f8f7;
  --ds-line:#dfdce0; --ds-line-strong:#bcb7c3;
  --ds-ink:#25242e; --ds-secondary:#464250; --ds-muted:#64616e; --ds-faint:#706b77;
  --ds-accent:#625095; --ds-accent-hi:#54427f; --ds-accent-on:#ffffff;
  --ds-accent-soft:#ece7f4; --ds-success:#28674c; --ds-success-bg:#e4f3e9;
  --ds-warning:#82551c; --ds-warning-bg:#f8efdd;
  --ds-danger:#a0404a; --ds-danger-bg:#f9e5e6;
  --ds-overlay:rgba(29,27,35,.48); --ds-shadow:0 12px 48px rgba(36,31,42,.09);
  --ds-sidebar-shadow:0 12px 44px rgba(36,31,42,.16);
 }
}
:root {
 --bg:var(--ds-canvas); --panel:var(--ds-surface); --panel-2:var(--ds-raised);
 --line:var(--ds-line); --muted:var(--ds-muted); --text:var(--ds-ink);
 --purple:var(--ds-accent); --green:var(--ds-success);
 --amber:var(--ds-warning); --red:var(--ds-danger);
 font-family:'DM Sans',system-ui,-apple-system,sans-serif;
 font-size:14px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
 background:var(--ds-canvas);color:var(--ds-ink);
}
body {background:var(--ds-canvas);color:var(--ds-ink);min-width:0}
button,input,select,textarea {font-family:inherit}
button,a,input,textarea,select {touch-action:manipulation}
h1,h2,h3,h4 {text-wrap:balance}
p {text-wrap:pretty}
button:disabled {opacity:.55}
:where(button,a,input,select,textarea,[role="button"]):focus-visible {
 outline:2px solid var(--ds-accent)!important; outline-offset:3px;
 box-shadow:var(--ds-focus);
}
:where(.stat-value,.goalheading span,.clientstats strong,.rowright strong,.status,.pill,.kanban-head span) {
 font-variant-numeric:tabular-nums;
}
.layout{grid-template-columns:226px minmax(0,1fr);min-height:100dvh;max-width:none;background:var(--ds-canvas)}
.sidebar {
 height:100dvh;background:var(--ds-rail);border-color:var(--ds-line);
 padding:24px 14px 20px;
}
.brand{gap:11px;padding:7px 10px 28px}
.brandmark{background:transparent;box-shadow:none;border-radius:var(--ds-radius-sm)}
.brandmark img{max-width:100%;max-height:100%}
.brandstrong{font-size:17px;letter-spacing:-.55px;color:var(--ds-ink)}
.brandmini{font-size:9px;letter-spacing:1.1px;color:var(--ds-faint)}
.sidesection{font-size:10px;font-weight:700;letter-spacing:1.35px;color:var(--ds-faint);margin:13px 12px 10px}
.nav{gap:3px}
.nav button {
 color:var(--ds-secondary);font-size:13px;font-weight:600;
 min-height:43px;padding:10px 12px;border:1px solid transparent;
 border-radius:var(--ds-radius-sm);
 transition:background-color var(--ds-fast),color var(--ds-fast),border-color var(--ds-fast);
}
.nav button:hover{background:var(--ds-soft);color:var(--ds-ink)}
.nav button.active,.nav button[aria-current="page"] {
 background:var(--ds-accent-soft);color:var(--ds-ink);
 border-color:color-mix(in srgb,var(--ds-accent) 16%,transparent);
}
.nav button.active::after{content:"";margin-left:auto;width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--ds-accent)}
.nav svg{color:var(--ds-faint);width:17px;height:17px}
.nav button.active svg{color:var(--ds-accent)}
.modecard {background:var(--ds-soft);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);padding:14px}
.modecard h4{color:var(--ds-ink);font-size:12px}
.modecard p {color:var(--ds-muted);font-size:11px}
.modecard button{color:var(--ds-secondary);background:var(--ds-raised);border-color:var(--ds-line);min-height:36px}
.main {
 max-width:1500px;min-width:0;
 padding:36px clamp(24px,3.8vw,60px) 80px;
}
.topline{align-items:flex-start;gap:24px;margin-bottom:30px}
.eyebrow{font-size:10px;letter-spacing:1.4px;font-weight:700;color:var(--ds-muted)}
.topline h1 {
 font-family:Manrope,'DM Sans',sans-serif;
 font-size:clamp(24px,2.8vw,32px);
 font-weight:700;letter-spacing:-.045em;line-height:1.22;
 margin:7px 0 8px;color:var(--ds-ink);
}
.topline p{font-size:13px;line-height:1.55;color:var(--ds-muted);max-width:60ch}
.topright{gap:9px;justify-content:flex-end}
.avatar {background:var(--ds-accent-soft);color:var(--ds-accent);border:1px solid var(--ds-line);border-radius:50%;width:36px;height:36px}
.pill {
 background:var(--ds-soft);border:1px solid var(--ds-line);color:var(--ds-secondary);
 padding:6px 10px;letter-spacing:.01em;font-size:11px;font-weight:650;
}
.btn,.btn.sm {
 border-radius:var(--ds-radius-sm);
 border-color:var(--ds-line);background:var(--ds-raised);color:var(--ds-ink);
 font-size:12px;font-weight:650;line-height:1.35;
 padding:9px 13px;min-height:37px;
 transition:background-color var(--ds-fast),border-color var(--ds-fast),transform var(--ds-fast) var(--ds-ease);
}
.btn:hover{transform:none;background:var(--ds-soft);border-color:var(--ds-line-strong)}
.btn:active,.filter:active,.month-step:active,.nav button:active{transform:scale(.982)}
.btn.primary {background:var(--ds-accent);border-color:var(--ds-accent);color:var(--ds-accent-on)}
.btn.primary:hover{background:var(--ds-accent-hi);border-color:var(--ds-accent-hi)}
.btn.ghost {background:transparent;color:var(--ds-secondary)}
.btn.positive{background:var(--ds-success-bg);border-color:transparent;color:var(--ds-success)}
.btn.warning{background:var(--ds-warning-bg);border-color:transparent;color:var(--ds-warning)}
.btn.danger{background:var(--ds-danger-bg);border-color:transparent;color:var(--ds-danger)}
.hero{
 position:relative;display:block;padding:24px 27px;
 background:var(--ds-surface);border:1px solid var(--ds-line);
 border-radius:var(--ds-radius-lg);margin-bottom:16px;
}
.hero::before{content:"";position:absolute;left:0;top:27px;bottom:27px;width:2px;background:var(--ds-accent);border-radius:3px}
.hero h2{font-family:Manrope,'DM Sans',sans-serif;color:var(--ds-ink);font-weight:700;font-size:clamp(18px,2.1vw,24px);line-height:1.3;letter-spacing:-.035em;margin:8px 0 9px}
.hero p {font-size:13px;line-height:1.55;color:var(--ds-muted);max-width:65ch}
.hero .eyebrow{color:var(--ds-accent)}
.hero-art{display:none!important}
.stats{gap:12px;margin-bottom:20px}
.stat,.panel,.clientcard,.settingscard,.kanban-col {
 background:var(--ds-surface);border:1px solid var(--ds-line);
 border-radius:var(--ds-radius-lg);box-shadow:none;
}
.stat{padding:18px 19px}
.statrow{margin-bottom:12px;gap:10px}
.statrow span{font-size:11px;font-weight:600;color:var(--ds-muted);line-height:1.4}
.stat-icon {
 width:31px;height:31px;border-radius:var(--ds-radius-sm);
 background:var(--ds-accent-soft);color:var(--ds-accent);
}
.stat-icon.green{background:var(--ds-success-bg);color:var(--ds-success)}
.stat-icon.amber{background:var(--ds-warning-bg);color:var(--ds-warning)}
.stat-icon.red{background:var(--ds-danger-bg);color:var(--ds-danger)}
.stat-value{color:var(--ds-ink);font-size:clamp(23px,2vw,30px);font-weight:750;letter-spacing:-.045em}
.statfoot{font-size:11px;color:var(--ds-muted);line-height:1.4;margin-top:8px}
.grid2{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:16px}
.panel{overflow:hidden}
.panelhead{padding:18px 20px 12px}
.panelhead h3,.section-head h2,.settingscard h3{
 color:var(--ds-ink);font-family:Manrope,'DM Sans',sans-serif;
 font-weight:700;font-size:14px;letter-spacing:-.025em;line-height:1.4;
}
.panelhead small,.section-head small{color:var(--ds-muted)}
.rows{padding:0 19px 13px}
.clientrow,.assetrow,.taskrow{border-top-color:var(--ds-line);padding:13px 0}
.rowmain strong{color:var(--ds-ink);font-weight:650;font-size:12px;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.rowmain small,.rowright small{color:var(--ds-muted)}
.rowright strong{color:var(--ds-secondary)}
.clientlogo{border-radius:var(--ds-radius-sm)}
.progress{height:4px;background:var(--ds-soft);margin-top:12px}
.progress>span{background:var(--ds-accent)}
.status{
 font-size:11px;font-weight:700;letter-spacing:0;line-height:1.2;
 background:var(--ds-soft);color:var(--ds-secondary);padding:7px 10px;
}
.status.approved,.status.done{background:var(--ds-success-bg);color:var(--ds-success)}
.status.review{background:var(--ds-accent-soft);color:var(--ds-accent)}
.status.changes,.status.doing{background:var(--ds-warning-bg);color:var(--ds-warning)}
.status.rejected{background:var(--ds-danger-bg);color:var(--ds-danger)}
.status.draft,.status.todo{background:var(--ds-soft);color:var(--ds-muted)}
.toolbar{gap:12px;margin:0 0 18px}
.search{border-color:var(--ds-line);background:var(--ds-surface);border-radius:var(--ds-radius-sm);max-width:420px}
.search svg{color:var(--ds-faint)}
.search input{color:var(--ds-ink);font-size:13px}
.search input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--ds-faint)}
.filter {
 background:var(--ds-surface);color:var(--ds-muted);
 border:1px solid var(--ds-line);font-weight:650;border-radius:var(--ds-radius-sm);
 transition:background-color var(--ds-fast),color var(--ds-fast);
}
.filter.active{background:var(--ds-accent-soft);color:var(--ds-accent);border-color:var(--ds-line-strong)}
.filter:hover{color:var(--ds-ink)}
.contenttable th {color:var(--ds-muted);font-size:10px;font-weight:650;letter-spacing:.08em}
.contenttable td {border-top:1px solid var(--ds-line);font-size:12px;color:var(--ds-secondary)}
.contenttable tr:hover td {background:var(--ds-raised)}
.contentname{color:var(--ds-ink);font-weight:650}
.contentname small{color:var(--ds-muted);font-size:11px}
.link{color:var(--ds-accent);font-weight:700}
.clientcard{padding:18px;transition:border-color var(--ds-fast),background-color var(--ds-fast)}
.clientcard:hover {transform:none;border-color:var(--ds-line-strong);background:var(--ds-raised)}
.clientcard h3{font-size:14px;font-weight:700;color:var(--ds-ink)}
.clientcard small,.clientfooter{color:var(--ds-muted)}
.clientstats{color:var(--ds-secondary)}
.kanban-col{min-height:260px;background:var(--ds-raised)}
.kanban-head{color:var(--ds-secondary);font-size:12px}
.kanban-head span{color:var(--ds-muted);background:var(--ds-soft)}
.taskcard{background:var(--ds-surface);border-color:var(--ds-line);border-radius:var(--ds-radius-md)}
.taskcard strong{color:var(--ds-ink)}
.taskcard p,.taskcard small{color:var(--ds-muted)}
.taskbuttons button{color:var(--ds-secondary);background:var(--ds-soft);border-color:var(--ds-line)}
.goalbox{padding:20px}
.goalheading,.goalheading strong,.goalheading span{color:var(--ds-ink)}
.goalrow .mini{color:var(--ds-muted)}
.separator{background:var(--ds-line)}
.back{background:var(--ds-raised);color:var(--ds-ink);border-color:var(--ds-line);border-radius:var(--ds-radius-sm)}
.notice{background:var(--ds-accent-soft);border-color:var(--ds-line-strong);color:var(--ds-secondary);border-radius:var(--ds-radius-md);line-height:1.55}
.empty{color:var(--ds-muted)}
.settingscard{padding:23px}
.settingscard p,.settingscard ul{color:var(--ds-muted);font-size:12px;line-height:1.65}
.period-selector{color:var(--ds-muted);font-size:10px;font-weight:650;letter-spacing:.08em}
.period-selector select{
 color:var(--ds-ink);background:var(--ds-surface);border:1px solid var(--ds-line);
 border-radius:var(--ds-radius-sm);font-size:12px;font-weight:650;
}
.month-step{border-color:var(--ds-line);background:var(--ds-surface);color:var(--ds-ink);border-radius:var(--ds-radius-sm)}
.theme-toggle {
 display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;
 width:38px;min-height:38px;padding:0;border-radius:var(--ds-radius-sm);
 background:var(--ds-surface);border:1px solid var(--ds-line);color:var(--ds-secondary);
 transition:background-color var(--ds-fast),border-color var(--ds-fast);
}
.theme-toggle:hover{background:var(--ds-soft);border-color:var(--ds-line-strong)}
.theme-toggle svg{width:17px;height:17px}
.modalshade{background:var(--ds-overlay);backdrop-filter:blur(5px)}
.modal,.loginbox,.media-viewer{background:var(--ds-surface);border-color:var(--ds-line);border-radius:var(--ds-radius-xl);box-shadow:var(--ds-shadow)}
.modal h2{font-size:19px;font-weight:700;color:var(--ds-ink)}
.modal .modaldesc{color:var(--ds-muted);font-size:13px}
.modalbar .eyebrow{color:var(--ds-faint)}
.iconbtn{color:var(--ds-secondary);min-width:36px;min-height:36px;display:grid;place-items:center;border-radius:var(--ds-radius-sm)}
.iconbtn:hover{background:var(--ds-soft)}
.field label{color:var(--ds-secondary);font-weight:650}
.field input,.field textarea,.field select {
 color:var(--ds-ink);background:var(--ds-field);border-color:var(--ds-line);
 border-radius:var(--ds-radius-sm);font-size:14px;line-height:1.5;
}
.field input:focus,.field textarea:focus,.field select:focus {border-color:var(--ds-accent)}
.modalactions{background:var(--ds-surface);border-color:var(--ds-line)}
.reviewitem{background:var(--ds-raised);border-color:var(--ds-line);border-radius:var(--ds-radius-md)}
.reviewitem strong{color:var(--ds-ink)}
.reviewitem p,.reviewitem small{color:var(--ds-secondary)}
.toast{background:var(--ds-raised);border-color:var(--ds-line-strong);color:var(--ds-ink);box-shadow:var(--ds-shadow)}
.loginpage{background:var(--ds-canvas);min-height:100dvh}
.loginbox{max-width:460px}
.loginbox h1{color:var(--ds-ink);font-weight:700;letter-spacing:-.035em;line-height:1.25}
.loginbox p{color:var(--ds-muted)}
.footerhint{color:var(--ds-faint)}
.mobiletop{background:var(--ds-rail);border-color:var(--ds-line);color:var(--ds-ink)}
.mobiletop button{background:var(--ds-raised);border-color:var(--ds-line);color:var(--ds-ink)}
.media-thumb{background:var(--ds-raised);border-color:var(--ds-line);color:var(--ds-muted)}
.media-viewer-shade{background:var(--ds-overlay)}
.media-viewer-bar{background:var(--ds-surface);border-color:var(--ds-line)}
.media-viewer-body{background:var(--ds-canvas)}
.media-format-note,.media-unavailable{color:var(--ds-secondary)}
.media-viewer-title{color:var(--ds-ink)}
.bottom-dock{display:none}
@media (max-width:1100px) {
 .layout{grid-template-columns:214px minmax(0,1fr)}
 .grid2,.detail-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:800px) {
 .layout{display:block}
 .sidebar{height:100dvh;background:var(--ds-rail);box-shadow:var(--ds-sidebar-shadow)}
 .sidebar.open{left:0}
 .mobiletop{background:var(--ds-rail);backdrop-filter:none}
 .mobiletop .mobile-actions{gap:7px}
 .mobiletop .theme-toggle {width:40px;height:44px;min-width:40px}
 .main{padding:22px 18px calc(130px + env(safe-area-inset-bottom,0px));max-width:850px}
 .topline{margin-bottom:22px}
 .topline h1{font-size:clamp(23px,5.2vw,30px)}
 .topright{gap:8px}
 .topright .theme-toggle{display:none}
 .stat{padding:16px}
 .bottom-dock{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  position:fixed;bottom:0;left:0;right:0;z-index:43;
  padding:7px max(10px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));
  background:var(--ds-rail);border-top:1px solid var(--ds-line);
  box-shadow:0 -5px 25px rgba(0,0,0,.07);
 }
 .bottom-dock button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:54px;min-width:0;border:0;border-radius:var(--ds-radius-sm);
  color:var(--ds-muted);background:transparent;
  font-size:10.5px;font-weight:650;line-height:1.25;padding:7px 5px;
 }
 .bottom-dock button.active,.bottom-dock button[aria-current=page]{color:var(--ds-accent);background:var(--ds-accent-soft)}
 .bottom-dock svg{width:19px;height:19px;flex-shrink:0}
 .topline p{max-width:58ch}
 .drawer-scrim{background:var(--ds-overlay)}
}
@media(max-width:600px){
 .main{padding:20px 16px calc(148px + env(safe-area-inset-bottom,0px))}
 .topline{display:block}
 .topright{margin-top:14px;justify-content:flex-start}
 .hero{padding:20px 21px}
 .hero::before{top:21px;bottom:21px}
 .hero p{max-width:44ch}
 .stat{padding:14px 15px}
 .stats{gap:10px}
 .statrow span{font-size:11px}
 .stat-value{font-size:25px}
 .panelhead{padding:16px}
 .rows{padding:0 15px 12px}
 .settingscard{padding:17px}
 .field input,.field textarea,.field select{font-size:16px}
 .modal{padding:18px}
 .modalactions{background:var(--ds-surface)}
}
@media(max-width:380px){
 .main{padding-inline:14px}
 .topright{gap:6px}
 .topline p{font-size:12px}
 .bottom-dock button{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:0s!important;transition-duration:0s!important;scroll-behavior:auto!important}
}
@media(prefers-contrast:more){
 :root {--ds-line:var(--ds-line-strong)}
 .btn,.field input,.field select,.field textarea,.filter,.panel,.clientcard,.status{border-width:1.5px}
 .status{outline:1px solid currentColor;outline-offset:1px}
}
@media(forced-colors:active){
 .btn,.filter,.panel,.stat,.status,.nav button,.bottom-dock button{forced-color-adjust:auto}
}


/* Optical finishing and robust touch targets */
.brandstrong span{color:var(--ds-accent)!important}
.sidebar-theme{display:flex;align-items:center;gap:9px;margin:2px 0 12px;color:var(--ds-muted)}
.sidebar-theme::after{content:"Aspetto";font-size:11px;font-weight:650}
:root:lang(en) .sidebar-theme::after{content:"Appearance"}
.login-preferences{gap:10px;align-items:center}
.login-preferences .theme-toggle{min-width:44px;min-height:44px}
.media-viewer-actions .btn,.detail-actions>.btn{color:var(--ds-secondary)}
@media(max-width:800px){
 .topright button[data-view="notifications"]{min-width:44px;min-height:44px;padding:9px}
 .sidebar-theme .theme-toggle{min-width:44px;min-height:44px}
}
@media(max-width:420px){
 .mobiletop{padding-left:12px;padding-right:12px}
 .mobiletop .brand-mobile{min-width:0}
 .mobiletop .brand-mobile strong{font-size:14px}
 .mobiletop .mobile-actions{gap:6px}
}


/* Tablet landscape retains the desktop shell: top actions must stay touch-safe there too. */
.topright button[data-view="notifications"]{min-width:44px;min-height:44px}
.theme-toggle{min-width:44px;min-height:44px;flex-basis:44px}


/* Safari automatically zooms editable fields below 16px, including phone landscape (>800 CSS px). */
.field input,.field textarea,.field select{font-size:16px}
@media(max-width:950px){
 input,select,textarea,.search input,.period-selector select{font-size:16px}
}


.appearance-settings .section-head{margin-bottom:6px}
.appearance-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:420px;margin-top:16px}
.appearance-choice{
 display:flex;align-items:center;justify-content:center;gap:8px;
 min-height:46px;padding:10px 12px;border-radius:var(--ds-radius-sm);
 border:1px solid var(--ds-line);background:var(--ds-raised);
 color:var(--ds-secondary);font-size:13px;font-weight:650;
 transition:background-color var(--ds-fast),border-color var(--ds-fast);
}
.appearance-choice svg{width:16px;height:16px;flex:none}
.appearance-choice:hover{background:var(--ds-soft);color:var(--ds-ink)}
.appearance-choice.active{background:var(--ds-accent-soft);color:var(--ds-ink);border-color:var(--ds-accent)}
.appearance-choice.active svg{color:var(--ds-accent)}
@media(max-width:380px){.appearance-choices{gap:5px}.appearance-choice{gap:4px;padding:8px 5px;font-size:12px}}


/* Content library: native card layout on phone, high-density comparison table on desktop */
.content-mobile-list{display:none}
@media(max-width:700px){
 .contenttable{min-width:0}
 .content-table-panel{display:none}
 .content-mobile-list{display:grid;grid-template-columns:1fr;gap:10px}
 .content-mobile-card{
  min-width:0;padding:15px;background:var(--ds-surface);
  border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);
 }
 .content-mobile-primary{display:flex;gap:12px;align-items:center;min-width:0}
 .content-mobile-primary .media-thumb{flex:0 0 72px;width:72px;height:62px}
 .content-mobile-copy{min-width:0;flex:1}
 .content-mobile-copy h3{
  color:var(--ds-ink);font:700 14px/1.4 'DM Sans',sans-serif;
  letter-spacing:-.012em;margin:0 0 5px;overflow-wrap:anywhere;text-wrap:pretty;
 }
 .content-mobile-copy p{font-size:12px;line-height:1.4;color:var(--ds-muted);margin:0;overflow-wrap:anywhere}
 .content-mobile-meta{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--ds-line);
  display:flex;gap:10px;justify-content:space-between;align-items:center;
  color:var(--ds-muted);font-size:11px;
 }
 .content-mobile-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}
 .content-mobile-actions button{min-height:44px;font-size:12px}
 .toolbar .filters{scrollbar-width:thin}
}
@media(min-width:701px){.content-mobile-list{display:none}}
/* A short, restrained, composited spatial cue only on actual navigation. */
@keyframes studiohub-page-in{
 from{opacity:.93;transform:translateY(4px)}
 to{opacity:1;transform:translateY(0)}
}
.page-enter{animation:studiohub-page-in var(--ds-normal) var(--ds-ease) both}
@media(prefers-reduced-motion:reduce){.page-enter{animation:none}}


/* Legacy-to-token reconciliation: every frequently used informational surface stays legible in both themes. */
.activitydot{background:var(--ds-accent-soft);color:var(--ds-accent)}
.activity p,.activity small{color:var(--ds-muted)}
.activity strong{color:var(--ds-ink)}
.clientstats span,.clientfooter,.detail-header p,.mini,.goalrow .mini{color:var(--ds-muted)}
.clientfooter .arrow,.empty svg,.hero h2 svg{color:var(--ds-accent)}
.filter option,.field option{background:var(--ds-surface);color:var(--ds-ink)}
.taskbuttons button:hover{background:var(--ds-accent-soft);color:var(--ds-accent)}
.error{color:var(--ds-danger)}
.skip-link{background:var(--ds-accent);color:var(--ds-accent-on);border:1px solid var(--ds-line-strong)}
.media-unavailable a{color:var(--ds-accent)}
.period-selector select option{color:var(--ds-ink);background:var(--ds-surface)}


/* Client brand swatches stay expressive while initials remain readable on warm light surfaces. */
:root[data-theme="light"] .clientlogo{color:var(--ds-ink)!important}
@media(prefers-color-scheme:light){:root[data-theme="auto"] .clientlogo{color:var(--ds-ink)!important}}


/* Landscape phone: preserve working room and make the agency rail a reachable drawer. */
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .layout{display:block;min-width:0}
 .mobiletop{
  display:flex;position:sticky;top:0;z-index:45;
  justify-content:space-between;align-items:center;
  min-height:50px;padding:7px 18px;
  background:var(--ds-rail);border-bottom:1px solid var(--ds-line);
 }
 .mobiletop .brand-mobile{display:flex;align-items:center;gap:9px}
 .mobiletop .mobile-actions{display:flex;align-items:center;gap:8px}
 .mobiletop button[data-action="menu"]{width:44px;height:44px;display:grid;place-items:center}
 .mobiletop button[data-action="menu"] svg{width:20px;height:20px}
 .sidebar{
  position:fixed;top:0;bottom:0;left:0;right:auto;
  width:min(290px,calc(100vw - 48px));height:100dvh;
  overflow-y:auto;transform:translateX(-110%);
  z-index:65;box-shadow:var(--ds-sidebar-shadow);padding:16px 15px;
  transition:transform var(--ds-normal) var(--ds-ease);
 }
 .sidebar.open{transform:translateX(0)}
 .drawer-scrim{display:block;position:fixed;inset:0;z-index:60;background:var(--ds-overlay)}
 .main{width:100%;max-width:920px;padding:16px 24px 46px}
 .topline{margin-bottom:16px}
 .topright .theme-toggle{display:none!important}
 .bottom-dock{display:none}
 .modalshade{align-items:flex-start}
}


/* Touch-only segmented locale switch keeps genuinely finger-sized targets. */
@media(max-width:800px){
}
@media(max-width:360px){
 .mobiletop .brand-mobile strong{display:none}
 .mobiletop .brand-mobile img{width:32px;height:32px}
}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){
}


/* StudioHub contextual review workspace — attached to the viewport edge,
   rather than an unrelated, centered blocking rectangle. */
.review-shade{
 inset:0;z-index:100;display:flex;align-items:stretch;justify-content:flex-end;
 padding:0;background:var(--ds-overlay);backdrop-filter:blur(4px);
 overflow:hidden;
}
.review-shade .review-sheet{
 position:relative;margin:0;
 width:min(650px,calc(100vw - 42px));max-width:100%;
 height:100dvh;max-height:100dvh;min-height:0;
 padding:calc(20px + env(safe-area-inset-top,0px)) clamp(20px,2.6vw,36px)
         calc(30px + env(safe-area-inset-bottom,0px));
 overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
 border:0;border-left:1px solid var(--ds-line-strong);
 border-radius:var(--ds-radius-xl) 0 0 var(--ds-radius-xl);
 background:var(--ds-surface);box-shadow:var(--ds-shadow);
 animation:review-enter var(--ds-slow) var(--ds-ease) both;
}
.review-sheet .modalbar{
 position:sticky;top:calc(-20px - env(safe-area-inset-top,0px));
 z-index:5;display:flex;align-items:center;gap:12px;min-height:50px;
 background:var(--ds-surface);border-bottom:1px solid var(--ds-line);
 padding:8px 0;margin:-2px 0 22px;
}
.review-sheet .modalbar .iconbtn{margin-left:auto;border:1px solid var(--ds-line);font-size:22px}
.review-sheet h2{
 font-family:Manrope,'DM Sans',sans-serif;
 font-size:clamp(19px,2.3vw,24px);font-weight:750;letter-spacing:-.035em;
 line-height:1.35;overflow-wrap:anywhere;margin-bottom:9px;
}
.review-sheet h3{
 font-size:14px;font-weight:750;color:var(--ds-ink);line-height:1.5;
 letter-spacing:-.02em;margin:0 0 12px;
}
.review-sheet .modaldesc{color:var(--ds-secondary);line-height:1.6;margin-bottom:20px}
.review-sheet .media-review-preview{display:flex;padding:2px 0 12px;gap:12px}
.review-sheet .media-review-preview .media-thumb{width:132px;height:92px;flex-basis:132px}
.review-sheet .media-review-preview .btn{min-height:44px}
.review-sheet .notice{margin:12px 0 18px}
.review-sheet .separator{height:1px;margin:23px 0;background:var(--ds-line)}
.review-sheet .reviewlist{gap:0;margin:12px 0 20px;border-top:1px solid var(--ds-line)}
.review-sheet .reviewitem{
 padding:14px 0;background:transparent;border:0;border-bottom:1px solid var(--ds-line);
 border-radius:0;
}
.review-sheet .reviewitem p{font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.review-sheet .reviewitem small{font-size:11px;color:var(--ds-muted)}
.review-sheet .field label{font-size:12px}
.review-sheet .field textarea{min-height:96px;resize:vertical}
.review-sheet .modalactions{
 position:sticky;bottom:calc(-30px - env(safe-area-inset-bottom,0px));
 z-index:4;margin:18px 0 8px;padding:15px 0 calc(12px + env(safe-area-inset-bottom,0px));
 background:var(--ds-surface);border-top:1px solid var(--ds-line);
}
.review-sheet .modalactions .btn{min-height:44px}
.review-sheet .sheet-grip{display:none}
.review-shade .review-sheet:focus-visible,
.review-sheet h2:focus-visible{outline:0!important;box-shadow:none}
@keyframes review-enter{
 from{opacity:.88;transform:translate3d(18px,0,0)}
 to{opacity:1;transform:translate3d(0,0,0)}
}
@media(max-width:700px){
 .review-shade{
  align-items:flex-end;justify-content:stretch;
  padding:calc(12px + env(safe-area-inset-top,0px)) 0 0;
 }
 .review-shade .review-sheet{
  width:100%;max-width:100%;min-width:0;
  height:auto;max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px));
  margin:0;padding:14px 18px calc(30px + env(safe-area-inset-bottom,0px));
  border:1px solid var(--ds-line-strong);border-bottom:0;
  border-radius:21px 21px 0 0;
  animation-name:review-enter-mobile;
 }
 .review-sheet .modalbar{top:-14px;margin:0 0 15px;min-height:47px}
 .review-sheet .sheet-grip{
  display:block;position:absolute;top:7px;left:50%;width:34px;height:4px;
  transform:translateX(-50%);border-radius:99px;background:var(--ds-line-strong);
 }
 .review-sheet .media-review-preview .media-thumb{width:100px;height:72px;flex-basis:100px}
 .review-sheet .modalactions{bottom:calc(-30px - env(safe-area-inset-bottom,0px))}
 .review-sheet .reviewitem p{font-size:13px}
}
@media(max-width:700px) and (max-height:500px) and (orientation:landscape){
 .review-shade .review-sheet{
  max-height:calc(100dvh - 8px - env(safe-area-inset-top,0px));
 }
}
@keyframes review-enter-mobile{
 from{opacity:.94;transform:translate3d(0,24px,0)}
 to{opacity:1;transform:translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){
 .review-shade .review-sheet{animation:none}
}


/* Activity as a quiet chronological workspace, not stacked alert banners. */
.notification-center{max-width:1060px;min-width:0}
.notification-intro{
 display:flex;gap:18px;align-items:flex-end;justify-content:space-between;
 padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--ds-line);
}
.notification-intro h2{
 font:750 clamp(19px,2.2vw,25px)/1.25 Manrope,'DM Sans',sans-serif;
 color:var(--ds-ink);letter-spacing:-.034em;margin:8px 0 7px;
}
.notification-intro p{font-size:13px;line-height:1.6;color:var(--ds-muted);margin:0;max-width:60ch}
.notification-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.notification-count{font-size:11px;font-weight:700;color:var(--ds-muted);white-space:nowrap}
.notification-feed{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);overflow:hidden}
.notification-entry{
 position:relative;display:grid;grid-template-columns:10px minmax(0,1fr);
 align-items:start;gap:12px;padding:20px 24px;border-bottom:1px solid var(--ds-line);
}
.notification-entry:last-child{border-bottom:0}
.notification-indicator{display:block;width:7px;height:7px;border-radius:50%;margin-top:10px;background:transparent}
.notification-entry.is-unread .notification-indicator{background:var(--ds-accent)}
.notification-entry.is-read{background:color-mix(in srgb,var(--ds-surface) 94%,var(--ds-canvas))}
.notification-entry.is-read .notification-entry-header h3{font-weight:600}
.notification-entry-body{min-width:0}
.notification-entry-header{display:flex;align-items:start;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
.notification-entry-header h3{
 font:700 14px/1.5 'DM Sans',sans-serif;color:var(--ds-ink);
 margin:0;overflow-wrap:anywhere;text-wrap:pretty;
}
.notification-entry-header time{font-size:11px;line-height:1.6;color:var(--ds-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.notification-entry-body>p{font-size:13px;color:var(--ds-secondary);line-height:1.65;overflow-wrap:anywhere;white-space:pre-line;margin:8px 0 0}
.notification-entry-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.notification-entry-actions .btn{min-height:37px}
.notification-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:clamp(30px,7vh,76px) 20px;color:var(--ds-muted)}
.notification-empty svg{width:26px;height:26px;color:var(--ds-accent);margin-bottom:6px}
.notification-empty h3{font:700 17px/1.4 Manrope,sans-serif;color:var(--ds-ink);margin:0}
.notification-empty p{font-size:13px;line-height:1.55;max-width:45ch;margin:0}
@media(max-width:700px){
 .notification-intro{display:block;margin-bottom:12px;padding-bottom:16px}
 .notification-controls{justify-content:flex-start;margin-top:16px}
 .notification-entry{padding:18px 16px;gap:8px}
 .notification-entry-header{display:block}
 .notification-entry-header time{display:block;margin-top:5px}
 .notification-entry-actions .btn{min-height:44px}
}


/* Instant workspace navigation: keyboard first, discoverable to touch users. */
.sr-only{
 position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
 margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
 white-space:nowrap!important;border:0!important;
}
.command-rail{padding:0 5px 6px}
.command-trigger{
 width:100%;min-height:44px;display:flex;align-items:center;gap:10px;
 text-align:left;background:var(--ds-surface);color:var(--ds-muted);
 border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);
 padding:9px 11px;font-size:12px;font-weight:650;
 transition:border-color var(--ds-fast),background-color var(--ds-fast);
}
.command-trigger:hover{background:var(--ds-raised);border-color:var(--ds-line-strong);color:var(--ds-ink)}
.command-trigger svg{width:17px;height:17px;flex:0 0 17px;color:var(--ds-muted)}
.command-trigger kbd{margin-left:auto;font:600 10px/1 'DM Sans',sans-serif;border:1px solid var(--ds-line);border-radius:5px;padding:5px;color:var(--ds-faint);white-space:nowrap}
.command-shade{
 position:fixed;inset:0;z-index:190;display:flex;align-items:flex-start;justify-content:center;
 padding:calc(10vh + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));
 background:var(--ds-overlay);backdrop-filter:blur(5px);
}
.command-palette{
 width:min(600px,100%);max-height:min(66dvh,620px);overflow:hidden;
 background:var(--ds-surface);border:1px solid var(--ds-line-strong);
 border-radius:var(--ds-radius-xl);box-shadow:var(--ds-shadow);
 display:flex;flex-direction:column;
 animation:command-enter var(--ds-normal) var(--ds-ease) both;
}
.command-search{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--ds-line)}
.command-search>svg{color:var(--ds-accent);width:21px;height:21px;flex:none}
.command-search input[type="text"]{
 font:500 16px/1.5 'DM Sans',sans-serif;color:var(--ds-ink);
 background:transparent;border:0;outline:none;box-shadow:none;
 width:100%;min-width:0;flex:1;height:42px;
}
.command-search input::placeholder{color:var(--ds-muted)}
.command-search .iconbtn{font-size:24px;flex:none}
.command-results{min-height:90px;overflow-y:auto;overscroll-behavior:contain;padding:7px}
.command-result{
 width:100%;min-height:58px;display:flex;align-items:center;gap:12px;text-align:left;
 border:1px solid transparent;border-radius:var(--ds-radius-sm);
 background:transparent;color:var(--ds-ink);padding:9px 12px;
}
.command-result:hover,.command-result[data-selected="true"],.command-result:focus-visible{
 background:var(--ds-accent-soft);border-color:var(--ds-line);color:var(--ds-ink);
}
.command-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;background:var(--ds-raised);border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);color:var(--ds-accent)}
.command-icon svg{width:17px;height:17px}
.command-result-text{min-width:0;flex:1}
.command-result-text strong{display:block;font-size:13px;line-height:1.5;font-weight:650;overflow-wrap:anywhere}
.command-result-text small{display:block;font-size:11px;color:var(--ds-muted);line-height:1.5;overflow-wrap:anywhere}
.command-result>svg{width:15px;height:15px;color:var(--ds-muted);flex:none}
.command-no-results{font-size:13px;line-height:1.5;color:var(--ds-muted);text-align:center;padding:22px}
.command-footer{padding:11px 19px;border-top:1px solid var(--ds-line);font-size:11px;color:var(--ds-muted)}
@keyframes command-enter{
 from{opacity:.75;transform:translateY(-7px)}
 to{opacity:1;transform:translateY(0)}
}
@media(max-width:700px){
 .command-shade{padding:calc(13px + env(safe-area-inset-top,0px)) 10px}
 .command-palette{max-height:calc(100dvh - 45px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border-radius:var(--ds-radius-lg)}
 .command-result{min-height:54px}
 .command-trigger kbd{display:none}
}
@media(prefers-reduced-motion:reduce){.command-palette{animation:none}}


/* Touch reliability for modal dismiss buttons and compact status actions. */
.modalbar .iconbtn,.command-search .iconbtn,.media-viewer-actions .btn{min-width:44px;min-height:44px}
:where(.modal,.review-sheet) :where(button,input,textarea,select){scroll-margin-block:18px 120px}
@media(hover:none) and (pointer:coarse){
 .notification-entry-actions .btn,.review-sheet .detail-actions .btn{min-height:44px}
}

/* Intentional focus boundary belongs to the search surface, not a nested rectangle. */
.command-search:focus-within{box-shadow:inset 0 -2px 0 var(--ds-accent)}
.command-search input:focus-visible{outline:0!important;box-shadow:none!important}

/* Registration feedback stays inside the active dialog, not behind its scrim. */
.register-error:empty,.register-progress:empty{display:none}
.register-error{padding:11px 13px;border:1px solid var(--ds-danger);border-radius:var(--ds-radius-md);background:var(--ds-surface);line-height:1.45}
.register-progress{margin:8px 0;color:var(--ds-secondary);font-size:13px;line-height:1.5}
.register-success{padding:18px;font-size:14px}
.register-success strong{display:block;margin-bottom:7px;color:var(--ds-ink);font-size:16px}
.register-success p{margin:0 0 15px;line-height:1.65}
.register-success .btn{min-height:44px}
.register-success[hidden],#registerForm[hidden]{display:none!important}

/* Member management / an intentionally quiet, information-first workspace directory.
   Responsive rows, explicit roles, localized actions and WCAG-readable tokens. */
.member-manager{max-width:900px;padding:clamp(18px,3vw,28px);overflow:visible}
.member-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:21px}
.member-heading h3{font-size:clamp(19px,2vw,23px);margin:4px 0 9px;letter-spacing:-.45px;color:var(--ds-ink)}
.member-heading p{font-size:13px;line-height:1.65;max-width:560px;margin:0;color:var(--ds-secondary)}
.member-eyebrow{color:var(--ds-muted);font-size:10px;letter-spacing:1.2px;font-weight:750}
.member-total{min-width:73px;padding:12px 14px;background:var(--ds-raised);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);text-align:center}
.member-total strong{display:block;font-size:23px;line-height:1.15;color:var(--ds-ink);font-variant-numeric:tabular-nums}
.member-total span{font-size:11px;color:var(--ds-secondary)}
.member-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:19px}
.member-filter{border:1px solid var(--ds-line);border-radius:999px;background:var(--ds-surface);color:var(--ds-secondary);font-size:12px;font-weight:650;padding:9px 13px;min-height:44px;display:inline-flex;align-items:center;gap:9px;transition:border-color var(--ds-fast),background var(--ds-fast)}
.member-filter:hover{border-color:var(--ds-line-strong);color:var(--ds-ink)}
.member-filter.active{background:var(--ds-accent-soft);border-color:var(--ds-accent);color:var(--ds-ink)}
.member-filter-count{font-variant-numeric:tabular-nums;font-weight:750;color:var(--ds-ink)}
.member-search-wrap{position:relative;margin:0 0 6px}
.member-search-wrap label{display:block;font-size:12px;font-weight:700;margin-bottom:8px;color:var(--ds-secondary)}
.member-search-wrap input{font-size:16px;width:100%;min-width:0;min-height:46px;border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-sm);padding:11px 15px 11px 42px;background:var(--ds-field);color:var(--ds-ink);outline:0}
.member-search-wrap input::placeholder{color:var(--ds-muted)}
.member-search-wrap input:focus-visible{border-color:var(--ds-accent)}
.member-search-wrap svg{pointer-events:none;position:absolute;left:13px;bottom:13px;height:19px;width:19px;color:var(--ds-secondary)}
.member-results-count{font-size:11px;color:var(--ds-muted);margin:9px 0 8px}
.member-results{border-top:1px solid var(--ds-line)}
.member-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:13px;min-height:78px;border-bottom:1px solid var(--ds-line);padding:12px 0}
.member-avatar{width:42px;height:42px;border-radius:14px;display:inline-grid;place-items:center;background:var(--ds-accent-soft);color:var(--ds-ink);border:1px solid var(--ds-line);font-size:13px;font-weight:800;letter-spacing:.3px;flex:none}
.member-identity{min-width:0;display:flex;flex-direction:column;gap:3px}
.member-name{font-size:13px;line-height:1.45;color:var(--ds-ink);overflow-wrap:anywhere}
.member-email{font-size:12px;line-height:1.45;color:var(--ds-secondary);overflow-wrap:anywhere}
.member-self{font-size:11px;color:var(--ds-muted)}
.member-role{display:inline-flex;align-items:center;justify-content:center;max-width:100%;font-size:11px;font-weight:750;border-radius:8px;padding:7px 9px;border:1px solid var(--ds-line-strong);background:var(--ds-raised);color:var(--ds-ink);line-height:1.2;white-space:normal;text-align:center}
.member-role--staff{background:var(--ds-success-bg);color:var(--ds-success);border-color:var(--ds-line-strong)}
.member-role--admin{background:var(--ds-accent-soft);color:var(--ds-ink);border-color:var(--ds-line-strong)}
.member-role--client{color:var(--ds-secondary)}
.member-edit{min-height:42px;min-width:92px;white-space:nowrap;font-size:12px}
.member-edit:disabled{opacity:.4}
.member-empty{padding:29px 12px;text-align:center;color:var(--ds-secondary)}
.member-empty svg{height:24px;width:24px;display:block;margin:0 auto 11px}
.member-empty p{font-size:13px;color:var(--ds-ink);margin:0 0 5px}
.member-empty small{font-size:12px}
.member-guidance{display:flex;gap:11px;align-items:flex-start;margin-top:23px;padding:14px 16px;background:var(--ds-raised);border:1px solid var(--ds-line);border-radius:var(--ds-radius-md)}
.member-guidance svg{width:19px;height:19px;color:var(--ds-secondary);flex:none}
.member-guidance p{font-size:12px;line-height:1.6;margin:0;color:var(--ds-secondary)}
.member-modal-identity{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-md);background:var(--ds-raised);margin:0 0 18px}
.member-modal-identity span:last-child{min-width:0}
.member-modal-identity strong,.member-modal-identity small{display:block;overflow-wrap:anywhere}
.member-modal-identity strong{font-size:14px}
.member-modal-identity small{font-size:12px;color:var(--ds-secondary);margin-top:4px}
.member-current{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;color:var(--ds-secondary);font-size:13px}
.member-role-scope{color:var(--ds-secondary);font-size:12px;line-height:1.6;margin:4px 0 15px}
.member-privilege-warning{background:var(--ds-warning-bg);color:var(--ds-warning);border:1px solid var(--ds-line-strong);padding:12px 14px;border-radius:var(--ds-radius-sm);font-size:12px;line-height:1.6;margin-bottom:13px}
.member-privilege-confirm{display:flex;align-items:flex-start;gap:10px;color:var(--ds-ink);font-size:13px;line-height:1.5;padding:4px 0 12px;cursor:pointer}
.member-privilege-confirm input{width:19px;height:19px;flex:none;accent-color:var(--ds-accent)}
.member-role-error:empty{display:none}
.member-privilege-warning[hidden],.member-privilege-confirm[hidden]{display:none!important}
@media(max-width:600px){
 .member-manager{padding:20px 16px}
 .member-heading{gap:12px}
 .member-heading p{font-size:12px}
 .member-total{min-width:62px;padding:11px 8px}
 .member-row{grid-template-columns:42px minmax(0,1fr) auto;gap:10px;row-gap:9px}
 .member-row .member-role{grid-column:2;justify-self:start}
 .member-row .member-edit{grid-column:3;grid-row:1/span 2;min-width:76px;padding:9px 10px}
 .member-filters{gap:5px}
 .member-filter{font-size:11px;padding:8px 10px;gap:5px}
}
@media(max-width:360px){
 .member-row{grid-template-columns:36px minmax(0,1fr) auto;gap:8px}
 .member-avatar{height:36px;width:36px;border-radius:11px}
 .member-row .member-edit{min-width:69px;padding:8px}
 .member-filter{font-size:10px;padding:8px}
}
@media(prefers-reduced-motion:reduce){.member-filter{transition:none}}

.member-role-progress:empty{display:none}
.member-role-progress{font-size:12px;color:var(--ds-secondary);margin:0 0 12px;line-height:1.5}

/* Recovery and sign-in use the existing secure, compact auth card. */
.login-forgot{text-align:center;margin:10px 0 0}
.login-forgot .btn{min-height:44px}
#forgotSuccess[hidden],#forgotPasswordForm[hidden]{display:none!important}
#forgotError:empty,#recoveryError:empty,#forgotProgress:empty,#recoveryProgress:empty{display:none}
#forgotError,#recoveryError{overflow-wrap:anywhere}