/* ══════════════════════════════════════════════════════════════════════════
   THE FORGE — CONSOLE SHEET
   The orchestration layer: the ops/admin console (services, projects, storage,
   logs, model manager), the dashboard widget grid, the calendar/planner and the
   CivitAI store. Extracted out of style.css so the foundation sheet stays
   tokens + layout + shared components only.

   Loaded after style.css (and before the per-page sheets) so the cascade keeps
   the same order the rules had when they lived at the tail of style.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FORGE PAGE STYLES ── */
/* ── panels layout ── */
.dashboard{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding:10px 14px;
  flex:1;overflow-y:auto;
  max-width:1400px;margin:0 auto;width:100%;
}
@media (max-width:900px){
.dashboard{grid-template-columns:1fr}
}

/* Grid items default to min-width:auto, so any wide child (e.g. the finance
   table) pushes the whole column past the viewport. Let them shrink. */
.dashboard > *{min-width:0}

.panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.panel-body{
  padding:12px 14px;
  flex:1;overflow-y:auto;
}

/* ── health bar ── */

/* ── service cards ── */
#panel-services .panel-body{max-height:460px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.svc-grid{display:flex;flex-direction:column;gap:6px}
.svc-group{margin-top:10px}
.svc-group:first-child{margin-top:0}
.svc-group-label{
  font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-dim2);font-family:var(--font-mono);margin:0 2px 4px;
  display:flex;align-items:center;gap:6px;
}
.svc-group-label::after{content:'';flex:1;height:1px;background:var(--border);opacity:.6}
.svc-card{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  background:var(--bg-input);
  border:1px solid var(--border);
}
.svc-card .indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.svc-card .indicator.active{background:var(--green);box-shadow:0 0 6px rgba(78,201,160,.4)}
.svc-card .indicator.inactive{background:var(--text-dim);opacity:.5}
.svc-card .indicator.unknown{background:var(--amber);opacity:.7}
.svc-card .info{flex:1;min-width:0}
.svc-card .name{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.svc-card .name .unit{font-size:8px;color:var(--text-dim2);font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-card .meta{font-size:9px;color:var(--text-dim);font-family:var(--font-mono);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.svc-card .meta .port{color:var(--cyan);background:rgba(var(--cyan-rgb),.08);border:1px solid rgba(var(--cyan-rgb),.15);border-radius:var(--radius-xs);padding:0 5px;font-size:8px}
.svc-card .actions{display:flex;gap:4px}
.svc-card .actions button{
  padding:4px 8px;border-radius:var(--radius-xs);font-size:9px;font-weight:600;
  border:1px solid var(--border);background:var(--bg-hover);color:var(--text-dim);
  cursor:pointer;transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s, opacity .1s, transform .1s, filter .1s, fill .1s, stroke .1s;
}
.svc-card .actions button:hover{background:var(--border);color:var(--text)}
.svc-card .actions button.restart{color:var(--amber);border-color:rgba(230,169,60,.2)}
.svc-card .actions button.restart:hover{background:rgba(230,169,60,.1)}
.svc-card .actions button.stop{color:var(--red);border-color:rgba(242,85,90,.2)}
.svc-card .actions button.stop:hover{background:rgba(242,85,90,.1)}
.svc-card .actions button.logs{color:var(--cyan);border-color:rgba(var(--cyan-rgb),.2)}
.svc-card .actions button.logs:hover{background:rgba(var(--cyan-rgb),.1)}
.svc-card .actions button:disabled{opacity:.4;cursor:not-allowed}

/* Mobile: a service card can carry ~7 action buttons. Let the card wrap so the
   actions drop onto their own row instead of colliding with the name/meta, and
   allow the unit tag to truncate. */
@media (max-width:700px){
  #panel-services .panel-body{max-height:none}
  .svc-card{flex-wrap:wrap;row-gap:8px}
  .svc-card .info{flex:1 1 auto;min-width:0}
  .svc-card .name{min-width:0;flex-wrap:wrap}
  .svc-card .actions{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-start}
  .svc-group-label{flex-wrap:wrap;row-gap:4px}
}

/* ── Service Log Viewer ── */
.svc-log-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:900;display:none;align-items:center;justify-content:center}
.svc-log-overlay.open{display:flex}
.svc-log-panel{width:min(920px,94vw);height:min(640px,88vh);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.svc-log-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg-hover)}
.svc-log-head .title{font-weight:600;font-size:13px}
.svc-log-head .unit-tag{color:var(--text-dim);font-size:11px;font-family:var(--font-mono)}
.svc-log-head .spacer{flex:1}
.svc-log-head button{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:4px 10px;font-size:11px;cursor:pointer}
.svc-log-head button:hover{background:var(--border)}
.svc-log-head .close-btn{color:var(--red);border-color:rgba(242,85,90,.2)}
.svc-log-head .close-btn:hover{background:rgba(242,85,90,.1)}
.svc-log-body{flex:1;overflow:auto;margin:0;padding:10px 14px;font-family:var(--font-mono);font-size:11px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--text);background:rgba(0,0,0,.25)}
.svc-log-empty{padding:20px;text-align:center;color:var(--text-dim)}

/* ── project cards ── */
.proj-grid{display:grid;grid-template-columns:1fr;gap:6px}

/* ── performance tuning ── */

.tune-profile.active{color:var(--accent);border-color:var(--accent);background:rgba(var(--accent-rgb),.08);box-shadow:0 0 8px rgba(var(--accent-rgb),.15)}

.tune-status .ok{color:var(--green)}
.tune-status .err{color:var(--red)}
.tune-status .busy{color:var(--amber)}

/* ── rocket launcher overview ── */

.rstat-value.pos{color:var(--green)}
.rstat-value.neg{color:var(--red)}

.rk-bot-chip .rk-bot-pnl.pos{color:var(--green)}
.rk-bot-chip .rk-bot-pnl.neg{color:var(--red)}

.rk-trade .rk-side.long{color:var(--green);background:rgba(78,201,160,.12)}
.rk-trade .rk-side.short{color:var(--red);background:rgba(242,85,90,.12)}

.rk-trade .rk-profit.pos{color:var(--green)}
.rk-trade .rk-profit.neg{color:var(--red)}

.proj-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:var(--bg-input);
  border:1px solid var(--border);
  transition:border-color .15s;
}
.proj-card:hover{border-color:rgba(var(--accent-rgb),.25)}
.proj-card .proj-icon{
  width:32px;height:32px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
  background:var(--bg-hover);border:1px solid var(--border);
}
.proj-card .proj-icon.running{background:rgba(78,201,160,.12);border-color:rgba(78,201,160,.25)}
.proj-card .proj-icon.stopped{background:rgba(242,85,90,.08);border-color:rgba(242,85,90,.15)}
.proj-card .proj-icon.idle{background:rgba(230,169,60,.08);border-color:rgba(230,169,60,.15)}
.proj-card .proj-body{flex:1;min-width:0}
.proj-card .proj-name{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.proj-card .proj-name .proj-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.proj-card .proj-name .proj-dot.running{background:var(--green);box-shadow:0 0 5px rgba(78,201,160,.4)}
.proj-card .proj-name .proj-dot.stopped{background:var(--red)}
.proj-card .proj-name .proj-dot.idle{background:var(--amber)}
.proj-card .proj-desc{font-size:10px;color:var(--text-dim);margin-top:1px;line-height:1.3}
.proj-card .proj-extra{font-size:9px;color:var(--text-dim2);margin-top:2px;font-family:var(--font-mono)}
.proj-card .proj-tags{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}
.proj-card .proj-tags .tag{
  font-size:8px;padding:1px 5px;border-radius:var(--radius-xs);
  background:var(--bg-hover);color:var(--text-dim2);border:1px solid var(--border);
}
.proj-card .proj-actions{display:flex;gap:4px;flex-shrink:0;flex-direction:column;align-items:flex-end}
.proj-card .proj-actions a{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:var(--radius-xs);font-size:9px;font-weight:600;
  text-decoration:none;transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s, opacity .1s, transform .1s, filter .1s, fill .1s, stroke .1s;
}
.proj-card .proj-actions .proj-open{
  background:rgba(var(--accent-rgb),.12);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.2);
}
.proj-card .proj-actions .proj-open:hover{background:rgba(var(--accent-rgb),.2)}
.proj-card .proj-actions .proj-dir-btn{
  background:var(--bg-hover);color:var(--text-dim2);border:1px solid var(--border);
  cursor:pointer;
}
.proj-card .proj-actions .proj-dir-btn:hover{background:var(--border);color:var(--text)}

/* ── file explorer ── */

.file-item .icon{flex-shrink:0;font-size:11px}
.file-item .icon.dir{color:var(--cyan)}
.file-item .icon.file{color:var(--text-dim2)}
.file-item .size{font-size:8px;color:var(--text-dim2);margin-left:auto}
.file-item.selected{background:rgba(var(--cyan-rgb),.08);color:var(--cyan);border-radius:var(--radius-xs)}

/* ── Log viewport + emails + model manager (2nd block) ── */
/* ── Log viewport ── */
.log-viewport{
  background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:6px 8px;max-height:380px;overflow-y:auto;font-family:'Cascadia Code','Fira Code','Consolas',monospace;font-size:10px;line-height:1.45;
}
.log-viewport .log-line{
  display:flex;gap:6px;padding:1px 0;color:var(--text-dim);white-space:pre-wrap;word-break:break-all;
}
.log-viewport .log-line .ts{color:var(--text-dim2);flex-shrink:0;min-width:60px}
.log-viewport .log-line .msg{color:var(--text);flex:1}
.log-viewport .log-line.highlight{background:rgba(230,169,60,.08);border-radius:var(--radius-xs)}
.log-viewport:empty::after{content:'No logs';color:var(--text-dim2);font-style:italic}
.log-controls{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.log-controls select,.log-controls input{background:var(--bg-input);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:4px 8px;font-size:10px}
.log-controls select{min-width:110px}
.log-controls input{flex:1;min-width:80px}
.log-controls button{background:var(--bg-hover);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:4px 10px;font-size:10px;cursor:pointer;white-space:nowrap}
.log-controls button:hover{background:var(--border)}
.log-controls button.active{background:var(--green);color:var(--bg);border-color:var(--green)}
.restart-forge{background:var(--bg-hover);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:2px 8px;font-size:9px;cursor:pointer;white-space:nowrap;margin-left:6px}
.restart-forge:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ── Important Emails ── */

.email-row{
  display:flex;align-items:flex-start;gap:8px;
  padding:6px 0;font-size:12px;
  border-bottom:1px solid var(--border);
}
.email-row:last-child{border-bottom:none}
.email-score{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  flex-shrink:0;min-width:18px;text-align:center;line-height:16px;
}
.email-info{flex:1;min-width:0}
.email-subj{
  font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.email-meta{font-size:10px;color:var(--text-dim2);margin-top:1px}
.email-acts-title{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);margin-top:6px}
.email-act{display:flex;align-items:flex-start;gap:6px;padding:4px 0;font-size:11px}
.email-act-add{
  background:none;border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--accent);
  cursor:pointer;font-size:11px;line-height:1;padding:2px 5px;flex-shrink:0;margin-top:1px;
}
.email-act-add:hover{background:rgba(var(--accent-rgb),.12);border-color:var(--accent)}
.email-act-text{color:var(--text-dim);min-width:0}

/* ── Model Manager Panel ── */
.models-panel .panel-body{max-height:640px;overflow-y:auto}
.models-panel .panel-body::-webkit-scrollbar{width:4px}
.models-panel .panel-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-xs)}

.stat-card{flex:1;text-align:center;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid var(--border);padding:10px 6px}
.stat-num{font-size:16px;font-weight:700;color:var(--cyan)}
.stat-label{font-size:9px;color:var(--text-dim2);margin-top:2px}

.mm-pill.active{background:rgba(var(--cyan-rgb),.1);border-color:var(--cyan);color:var(--cyan)}
.mm-pill .count{display:inline-block;background:var(--border);color:var(--text-dim2);font-size:9px;padding:0 5px;border-radius:var(--radius-sm);margin-left:4px}
.mm-pill.active .count{background:rgba(var(--cyan-rgb),.15);color:var(--cyan)}

.mm-card h2 .btn{margin-left:auto}
.mm-flex{display:flex;gap:8px;flex-wrap:wrap}
.models-panel .btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--radius-sm);font-size:10px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg-hover);color:var(--text);transition: color .12s, background-color .12s, border-color .12s, box-shadow .12s, opacity .12s, transform .12s, filter .12s, fill .12s, stroke .12s;line-height:1}
.models-panel .btn:hover{background:var(--border)}
.models-panel .btn-primary{background:var(--cyan);color:var(--bg);border-color:var(--cyan)}
.models-panel .btn-primary:hover{background:#1dc4dd}
.models-panel .btn-outline{background:transparent;border-color:var(--border);color:var(--text-dim)}
.models-panel .btn-outline:hover{background:var(--bg-hover);color:var(--text)}
.mm-btn-cyan{background:rgba(var(--cyan-rgb),.08);border-color:rgba(var(--cyan-rgb),.2);color:var(--cyan)}
.mm-btn-danger{background:rgba(242,85,90,.08);border-color:rgba(242,85,90,.2);color:var(--red)}
.mm-mt-2{margin-top:8px}

.mm-ollama-card .name{font-size:11px;font-weight:600;color:var(--text)}
.mm-ollama-card .size{font-size:9px;color:var(--text-dim2);margin-top:2px}
.mm-ollama-card .tag{display:inline-block;font-size:9px;padding:1px 6px;border-radius:var(--radius);background:rgba(var(--cyan-rgb),.08);color:var(--cyan);margin-right:3px}
/* ── Forge inline-style replacements ── */
/* Mint server panel */
.mint-address{
  flex:1;font-family:var(--font-mono);font-size:11px;min-width:0;
  background:var(--bg-input);border:1px solid var(--border);color:var(--text);
  padding:4px 8px;border-radius:var(--radius-sm);outline:none;
}
.mint-address:focus{border-color:var(--cyan)}
.mint-players{font-size:11px;color:var(--text-dim);margin-bottom:8px}
.mint-btn-row .btn,.mint-btn-flex{flex:1}
.mint-updated{font-size:9px;color:var(--text-dim2);margin:6px 0}
.mint-toggle-row .btn,.mint-toggle-row .mint-btn-flex{flex:1}
.mint-collapsible.open{display:block}
.mint-logs-content{
  max-height:220px;overflow-y:auto;font-size:10px;font-family:var(--font-mono);
  background:var(--bg2);padding:8px;border-radius:var(--radius-sm);
  white-space:pre-wrap;word-break:break-all;
}
.mint-cfg-row>.field{flex:1}
.mint-cfg-checkbox-label{display:flex;align-items:center;gap:4px}

/* Add App button + modal */
.add-app-btn{
  margin-left:6px;padding:3px 8px;border-radius:var(--radius-xs);font-size:9px;font-weight:600;
  border:1px solid rgba(var(--accent-rgb),.2);background:rgba(var(--accent-rgb),.08);
  color:var(--accent);cursor:pointer;transition: color .12s, background-color .12s, border-color .12s, box-shadow .12s, opacity .12s, transform .12s, filter .12s, fill .12s, stroke .12s;
}
.add-app-btn:hover{background:rgba(var(--accent-rgb),.15)}
.custom-apps-grid{margin-top:8px}
.app-modal{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;
}
.app-modal.open{display:flex}
.app-modal-card{
  background:var(--bg-card);border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:24px;width:380px;max-width:90vw;
  box-shadow:var(--shadow-lg);
}
.app-modal-title{font-size:15px;font-weight:700;margin-bottom:16px;color:var(--text)}
.app-modal-field{margin-bottom:12px}
.app-modal-field-row{display:flex;gap:12px;margin-bottom:12px}
.app-modal-field-row>.app-modal-field{flex:1;margin-bottom:0}
.app-modal-label{
  display:block;font-size:10px;font-weight:600;color:var(--text-dim);
  margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px;
}
.app-modal-input{width:100%}
.app-modal-color{width:100%;height:36px;padding:2px;cursor:pointer}
.app-modal-desc{margin-bottom:16px}
.app-modal-actions{display:flex;gap:8px;justify-content:flex-end}

/* Model manager inline replacements */

.mm-body-hidden{display:none;padding:14px}
.mm-body-hidden.open{display:block}

.mm-action-result{display:none}
.mm-action-result.open{display:block}

/* Storage console panel */
.st-sec-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin:14px 0 8px}
.st-sec-title:first-child{margin-top:0}
.st-drives{display:flex;flex-direction:column;gap:8px}
.st-empty{color:var(--text-dim);font-size:12px;padding:6px 0}
.st-drive{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-hover)}
.st-drive-name{font-family:var(--font-mono);font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.st-drive-model{font-size:11px;color:var(--text-dim);margin-top:2px}
.st-mounts{font-size:10.5px;color:var(--text-dim2);margin-top:3px;font-family:var(--font-mono)}
.st-drive-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.st-kind{font-size:9px;font-weight:700;padding:1px 6px;border-radius:var(--radius-xs);letter-spacing:.05em}
.st-ssd{background:rgba(var(--cyan-rgb),.15);color:var(--cyan)}
.st-hdd{background:rgba(163,163,163,.15);color:var(--text-dim)}
.st-status{font-size:10px;padding:1px 6px;border-radius:var(--radius-xs)}
.st-ok{background:rgba(78,201,160,.15);color:var(--green)}
.st-blocked{background:rgba(230,169,60,.15);color:var(--amber)}
.st-wipe-card{margin-top:14px;padding:12px;border:1px solid var(--red);border-radius:var(--radius);background:rgba(242,85,90,.06)}
.st-wipe-target{font-size:12px;font-weight:700;color:var(--red);margin-bottom:8px;font-family:var(--font-mono)}
.st-confirm-row{display:flex;gap:8px}
.st-confirm-input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;font-family:var(--font-mono);font-size:13px;color:var(--text)}
.st-confirm-input:focus{outline:none;border-color:var(--accent)}
.st-progress{margin-top:10px}
.st-progress .bar{height:8px;border-radius:var(--radius-xs);background:var(--border);overflow:hidden}
.st-progress .bar-fill{height:100%;background:var(--red);transition:width .4s ease}
.st-progress-meta{font-size:11px;color:var(--text-dim);margin-top:6px;font-family:var(--font-mono)}
.st-wipe-note{font-size:11px;color:var(--amber);margin-top:6px}
.st-setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.st-setting-row:last-of-type{border-bottom:none}
.st-setting-info{flex:1}
.st-setting-label{font-size:13px;font-weight:600}
.st-setting-sub{font-size:11px;color:var(--text-dim);margin-top:2px;font-family:var(--font-mono)}
.st-setting-dim{font-size:10px;color:var(--text-dim2);font-family:inherit}
.st-action-result{margin-top:10px;font-size:12px}

/* JS template classes */
.tmpl-dim2{color:var(--text-dim2)}

.tmpl-error{color:var(--red)}

.tmpl-loading-fail{font-size:10px;color:var(--text-dim2);padding:8px}
.tmpl-email-unavail{font-size:11px;color:var(--text-dim2);padding:8px 2px}

.tmpl-proj-extra-sm{font-size:8px;color:var(--text-dim)}
.tmpl-edit-btn{font-size:9px}
.tmpl-delete-btn{font-size:9px;color:var(--red);border-color:rgba(242,85,90,.15)}

/* Dynamic JS template styles (use CSS custom properties for runtime values) */
.health-item .value{color:var(--val-color,inherit)}
.health-item .bar-fill{width:var(--bar-pct,0)}
.proj-icon{color:var(--icon-color,inherit)}
.email-reason{color:var(--text-dim)}
.email-score{color:var(--score-color,inherit)}

.proj-icon.app-icon{font-size:16px}

/* ═══ Calendar page (month grid) ═══ */
.cal-toolbar{
  display:flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap;
}
.cal-month-title{
  margin:0;font-size:var(--fs-lg);font-weight:700;letter-spacing:-.4px;
  color:var(--text);margin-left:6px;
}
.cal-toolbar .spacer{flex:1}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.cal-dow{
  font-size:9px;color:var(--text-dim2);text-align:center;text-transform:uppercase;
  font-family:var(--font-mono);padding:4px 0 6px;letter-spacing:.5px;
}
.cal-cell{
  position:relative;min-height:84px;padding:5px;display:flex;flex-direction:column;gap:3px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
  overflow:hidden;
}
.cal-cell:hover{border-color:var(--border-focus);background:var(--bg-hover)}
.cal-cell.other{opacity:.35;cursor:default;background:transparent;border-color:transparent}
.cal-daynum{
  font-size:11px;color:var(--text-dim);font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
.cal-cell.today{border-color:var(--accent)}
.cal-cell.today .cal-daynum{color:var(--accent);font-weight:700}
.cal-chip{
  display:block;width:100%;text-align:left;font-size:10px;line-height:1.25;
  background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.28);
  border-radius:var(--radius-xs);color:var(--text);padding:2px 5px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.cal-chip:hover{background:rgba(var(--accent-rgb),.22);border-color:var(--accent)}
.cal-chip.all-day{border-style:dashed;background:rgba(150,168,190,.08);border-color:var(--border)}
/* Modal fields */
.cal-field{display:block;margin-bottom:10px}
.cal-field > span{
  display:block;font-size:10px;color:var(--text-dim);margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.5px;
}
.cal-row{display:flex;gap:8px}
.cal-row .cal-field{flex:1}
.cal-check{
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);
  margin:2px 0 8px;cursor:pointer;
}
.cal-check input{width:auto;margin:0;accent-color:var(--accent)}
@media (max-width:640px){
  .cal-cell{min-height:60px;padding:3px}
  .cal-chip{font-size:9px}
  .cal-row{flex-direction:column;gap:0}
}

/* ── Calendar: view switcher, week/day time grid, categories ── */
:root{--cal-hour-px:44px}

.cal-view-tabs{display:flex;gap:2px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px}
.cal-view-tab{
  padding:4px 12px;border:none;background:transparent;border-radius:var(--radius-xs);
  font-size:11px;font-weight:600;color:var(--text-dim2);cursor:pointer;
}
.cal-view-tab:hover{color:var(--text)}
.cal-view-tab.active{background:rgba(var(--accent-rgb),.14);color:var(--accent)}

/* category dot + chip internals */
.cal-chip{display:flex;align-items:center;gap:4px}
.cal-chip .cal-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cal-chip .cal-chip-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cal-chip .cal-recur-mark{font-size:9px;color:var(--text-dim2);flex-shrink:0}
.cal-chip.cal-cont{min-height:3px;padding:1px 3px}

/* ── Week view ── */
.cal-grid-week,.cal-grid-day{display:block}
.cal-wk{display:flex;flex-direction:column;gap:4px}
.cal-wk-head{display:grid;grid-template-columns:52px repeat(7,1fr);gap:3px}
.cal-wk-gutter{position:relative;min-height:calc(24 * var(--cal-hour-px))}
.cal-wday{
  text-align:center;padding:4px 2px;border-radius:var(--radius-xs);
  border:1px solid transparent;cursor:pointer;
}
.cal-wday:hover{background:var(--bg-hover)}
.cal-wday .cal-wdow{display:block;font-size:9px;color:var(--text-dim2);text-transform:uppercase;font-family:var(--font-mono);letter-spacing:.5px}
.cal-wday .cal-wdnum{display:block;font-size:14px;font-weight:700;color:var(--text)}
.cal-wday.today{border-color:var(--accent)}
.cal-wday.today .cal-wdnum{color:var(--accent)}

.cal-wk-allday{display:grid;grid-template-columns:52px repeat(7,1fr);gap:3px}
.cal-wk-allday-label{
  font-size:8px;color:var(--text-dim2);text-transform:uppercase;font-family:var(--font-mono);
  display:flex;align-items:center;justify-content:flex-end;padding-right:4px;
}
.cal-wk-allday-cell{min-height:26px;display:flex;flex-direction:column;gap:2px}
.cal-wk-allday-cell .cal-chip{font-size:9px}
.cal-empty-hint{opacity:0}

.cal-wk-body{display:grid;grid-template-columns:52px repeat(7,1fr);gap:3px;height:560px;overflow-y:auto}
.cal-wk-gutter .cal-hour{position:absolute;left:0;right:0;height:1px}
.cal-wk-gutter .cal-hour-label{position:absolute;right:4px;top:-7px;font-size:9px;color:var(--text-dim2);font-family:var(--font-mono);line-height:1}
.cal-wk-grid{
  grid-column:2/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;
  min-height:calc(24 * var(--cal-hour-px));position:relative;
}
.cal-wk-col{
  position:relative;border-left:1px solid var(--border);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--cal-hour-px) - 1px),var(--border) calc(var(--cal-hour-px) - 1px),var(--border) var(--cal-hour-px));
}
.cal-wk-col:hover{background-color:rgba(150,168,190,.03)}
.cal-wk-col.today{background-color:rgba(var(--accent-rgb),.03)}

/* ── Day view ── */
.cal-day{display:flex;flex-direction:column;gap:4px}
.cal-day-allday{min-height:26px;display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.cal-day-body{display:grid;grid-template-columns:52px 1fr;gap:3px;height:560px;overflow-y:auto}
.cal-day-body .cal-wk-col{grid-column:2}

/* ── Timed event blocks ── */
.cal-timed{
  position:absolute;left:2px;right:2px;border-radius:var(--radius-xs);padding:2px 4px;
  overflow:hidden;cursor:grab;font-size:10px;line-height:1.25;color:var(--text);
}
.cal-timed:active{cursor:grabbing}
.cal-timed .cal-timed-title{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-timed .cal-timed-time{display:block;font-size:8px;color:var(--text-dim);font-family:var(--font-mono)}
.cal-timed .cal-resize{position:absolute;left:0;right:0;bottom:0;height:6px;cursor:ns-resize}

/* ── Category colour palette (modal) ── */
.cal-palette{display:flex;gap:6px;flex-wrap:wrap}
.cal-swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.cal-swatch.sel{border-color:var(--text-bright);box-shadow:0 0 0 1px var(--text-dim)}
.cal-swatch:hover{transform:scale(1.12)}
@media (max-width:640px){
  .cal-wk-body,.cal-day-body{height:420px}
}

/* ── Daily Planner: hour-by-hour time-blocking grid ── */
:root{--pl-hour-px:44px}
.pl-date-label{font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.pl-date-chip{font-size:9px;color:var(--text-dim2);font-family:var(--font-mono);padding:2px 6px;border:1px solid var(--border);border-radius:var(--radius-pill)}
.pl-grid-wrap{display:flex;gap:3px;height:520px;overflow-y:auto}
.pl-gutter{
  position:relative;width:52px;flex-shrink:0;
  min-height:calc((var(--pl-hours, 18)) * var(--pl-hour-px));
}
.pl-gutter .pl-hour{position:absolute;right:4px;transform:translateY(-50%);font-size:9px;color:var(--text-dim2);font-family:var(--font-mono);line-height:1}
.pl-grid{
  position:relative;flex:1;
  min-height:calc((var(--pl-hours, 18)) * var(--pl-hour-px));
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--pl-hour-px) - 1px),var(--border) calc(var(--pl-hour-px) - 1px),var(--border) var(--pl-hour-px));
  border-left:1px solid var(--border);
}
.pl-grid:hover{background-color:rgba(150,168,190,.02)}
.pl-block{
  position:absolute;left:3px;right:3px;border-radius:var(--radius-xs);padding:3px 6px;
  overflow:hidden;cursor:grab;font-size:11px;line-height:1.3;color:var(--text);
  border-left:3px solid var(--accent);
}
.pl-block:active{cursor:grabbing}
.pl-block .pl-block-title{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-block .pl-block-time{display:block;font-size:8px;color:var(--text-dim);font-family:var(--font-mono)}
.pl-block .pl-resize{position:absolute;left:0;right:0;bottom:0;height:6px;cursor:ns-resize}
.pl-block .pl-block-del{position:absolute;top:1px;right:4px;font-size:10px;color:var(--text-dim2);background:transparent;border:none;cursor:pointer;padding:0}
.pl-block .pl-block-del:hover{color:var(--red)}
/* routine + task list */
.rt-card{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);padding:8px 10px;margin-bottom:8px}
.rt-head{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.rt-name{font-weight:700;font-size:12px;flex:1}
.rt-steps{font-size:10px;color:var(--text-dim2);font-family:var(--font-mono)}
.rt-actions{display:flex;gap:4px;margin-top:6px}
.rt-step-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.rt-step-row input{flex:1;min-width:0}
.rt-step-row input.rt-dur{flex:0 0 64px}
.rt-step-row input.rt-cat{flex:0 0 90px}
.rt-step-row .rt-step-col{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;flex-shrink:0}
.pl-task-row{display:flex;align-items:center;gap:8px;padding:6px 2px;border-bottom:1px solid var(--border);font-size:12px}
.pl-task-row:last-child{border-bottom:none}
.pl-task-check{width:18px;height:18px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--bg-input);color:var(--green);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px}
.pl-task-check.done{background:rgba(78,201,160,.15);border-color:var(--green)}
.pl-task-text{flex:1}
.pl-task-text.done{text-decoration:line-through;color:var(--text-dim2)}
.pl-task-nav{display:flex;flex-direction:column;gap:1px}
.pl-task-nav button{background:transparent;border:none;color:var(--text-dim2);cursor:pointer;font-size:9px;padding:0 2px;line-height:1}
.pl-task-nav button:hover{color:var(--text)}
@media (max-width:640px){
.pl-grid-wrap{height:420px}
}

/* ══ DASHBOARD PAGE STYLES ════════════════════════════════════════════════════
   The dashboard home-screen grid: widget cards, layout, and all widget-specific
   styles. Extracted from frontend/templates/dashboard.html's inline <style>.
   Follows the hot-metal-on-cold-steel token system — no new colors introduced.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Home Menu Layout ── */
:root{--cell-h:116px;--grid-gap:14px}
.page-dashboard .page{
  position:relative;z-index:1;
  max-width:min(1100px,calc(100% - var(--sidebar-w)));margin:0 auto;width:100%;
  padding:24px 16px 80px;
  margin-left:var(--sidebar-w);
  transition:margin-left var(--dur) var(--ease);
}

/* ── Home-screen top — brand over open space, launcher style ── */

.hero-btn.active{background:var(--accent);border-color:var(--accent);color:var(--text-bright)}

/* ── Dashboard Home Grid ── */

.tool-card .icon{
  background:var(--surface);
  color:var(--text-dim);
  border:1px solid var(--border);
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.tool-card:hover .icon{
  background:rgba(var(--accent-rgb),.10);
  color:var(--accent);
  border-color:rgba(var(--accent-rgb),.28);
}

/* Card size button — always visible on the right of every card */

/* Resize corner — drag bottom-right to change card size */
.resize-handle{
  position:absolute;right:3px;bottom:3px;z-index:5;
  width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim2);border-radius:var(--radius-xs);cursor:nwse-resize;
  opacity:0;transition:opacity .15s ease,color .15s ease,background .15s ease;
}
.resize-handle:hover{color:var(--accent);background:var(--surface-hover)}

/* ── Mobile: Android-style cards instead of the 6-col desktop grid ──
   The JS still thinks in 6 columns, so we override placement here:
   narrow cards (1-2 wide) take half a row, wide cards (3+) go full
   width, and heights keep their 1-2 row span, stacked in order. */
@media (max-width:860px){
  :root{--cell-h:104px}
  /* The drag-to-reposition and drag-to-resize gestures compute positions
     assuming the desktop 6-column grid (see the GRID_COLS constant) — on
     this 2-column layout that math doesn't line up with what's on screen,
     so both are hidden here. Click-to-cycle sizing (.size-btn) still works
     since it only toggles data-w/data-h, which the rules above handle
     correctly at any width — same for show/hide (.w-eye). */
  .w-handle,.resize-handle,.auto-sort-btn{display:none !important}
}

.amt.pos{color:var(--green)}.amt.neg{color:var(--red)}

/* Recommended-link buttons — big, high-contrast, easy to spot */

.empty-state{font-size:11px;color:var(--text-dim2);padding:8px 2px;border-bottom:none}

/* ── GPU Bar ── */
.gpu-bar{display:flex;gap:4px;margin-bottom:6px;align-items:center}
.gpu-bar .label{font-size:9px;color:var(--text-dim2);width:65px;flex-shrink:0}
.gpu-track{flex:1;height:6px;background:var(--border);border-radius:var(--radius-xs);overflow:hidden}
.gpu-fill{height:100%;border-radius:var(--radius-xs);transition:width .6s}
.gpu-name{font-size:11px;color:var(--text)}
.gpu-vram-text{font-size:10px;color:var(--text-dim);width:60px;text-align:right;flex-shrink:0;font-family:var(--font-mono)}

.gpu-bar #gpu-vram-fill{background:var(--cyan)}

.tool-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:var(--bg-card);border:1px solid var(--border);
  text-decoration:none;color:var(--text);transition: color .12s, background-color .12s, border-color .12s, box-shadow .12s, opacity .12s, transform .12s, filter .12s, fill .12s, stroke .12s;
  cursor:pointer;
}
.tool-card:hover{background:var(--bg-hover);border-color:rgba(var(--accent-rgb),.28);transform:translateY(-1px)}
.tool-card .icon{
  width:30px;height:30px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:13px;
}
.tool-card .info{flex:1;min-width:0}
.tool-card .name{font-size:11px;font-weight:600}
.tool-card .desc{font-size:9px;color:var(--text-dim2);margin-top:1px}
.tool-card .arrow{font-size:12px;color:var(--text-dim2);flex-shrink:0;transition:transform .12s}
.tool-card:hover .arrow{transform:translateX(3px);color:var(--accent)}

/* ── Tip widget ── */

/* ── Widget Store ── */

.cs-row{
  display:flex;align-items:center;gap:10px;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:7px 10px;font-size:12px;
}
.cs-row .cs-icon{flex-shrink:0}
.cs-row .cs-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.cs-row .cs-cur{
  font-family:var(--font-mono);font-size:10px;color:var(--text-dim);
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-xs);
  padding:3px 8px;flex-shrink:0;
}
.store-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px;display:flex;flex-direction:column;gap:6px;
}
.store-card.added{border-color:var(--green)}

.store-card.added .st-icon{background:rgba(78,201,160,.12);border-color:var(--green);color:var(--green)}

/* ══ Rules new in the console-split stash (2026-09-28), appended on restore ══ */
.sidebar-bottom .rocket-link.active{color:var(--accent);border-color:var(--glass-border-hover)}
@media (max-width: 900px){
.mobile-keys{display:flex}
body:has(.term-wrap){height:100%;overflow:hidden}
.split{
    position:fixed;left:0;right:0;
    top:calc(var(--topbar-h,44px) + var(--safe-t));
    bottom:calc(var(--safe-b) + var(--mob-viewbar-h,40px));
    flex-direction:column;
    height:auto;
    min-height:0;
    overflow:hidden;
  }
.term-wrap{flex:1 1 auto;width:100%;height:auto;min-height:0;border-bottom:none}
.panel-toggle{display:none}
.agent-panel{
    position:absolute;inset:0;width:100%!important;min-width:0!important;min-height:0;
    z-index:20;
    transform:translateY(103%);
    pointer-events:none;
    transition:transform .3s var(--ease);
    border-top:1px solid var(--glass-border);
  }
.agent-panel.mob-open{transform:none;pointer-events:auto}
.agent-panel.collapsed{width:100%!important;min-width:0;opacity:1;pointer-events:auto}
.term-toolbar{flex-wrap:nowrap;gap:8px;padding:8px 12px}
.term-toolbar .status{white-space:nowrap;flex-shrink:0}
.term-toolbar > div{flex:1 1 auto;min-width:0;justify-content:flex-end}
.term-toolbar select{flex:1 1 auto;min-width:0;font-size:12px}
.term-toolbar button{padding:10px 14px;font-size:13px;min-height:44px;min-width:44px}
.quick-actions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.quick-actions::-webkit-scrollbar{display:none}
.qa-select-repo{display:none}
.mobile-keys::-webkit-scrollbar{display:none}
.scroll-indicator{display:none}
.xterm-container{padding:4px 6px}
.page .dashboard{grid-template-columns:1fr}
}
@media (max-width: 600px){
.term-toolbar{gap:6px;padding:6px 8px}
.term-toolbar .status{font-size:10px}
.term-toolbar select{font-size:11px;padding:4px 6px}
.term-toolbar button{padding:8px 10px;font-size:12px;min-height:40px;min-width:40px}
.quick-actions{padding:6px 8px}
.mobile-keys{gap:2px;padding:4px 4px}
.mobile-keys .mk-label{display:none}
.mobile-keys .mk-btn{min-width:32px;min-height:34px;font-size:11px;padding:2px 4px;border-radius:var(--radius-xs)}
.mobile-keys .mk-sep{height:16px;margin:0 1px}
.lesson-explainer{font-size:11px}
}
@media (max-width: 860px){
:root{--sidebar-w:0px}
.sidebar{transform:translateX(-100%);width:min(280px,82vw);box-shadow:var(--shadow-lg)}
.sidebar.open{transform:translateX(0)}
.topbar{margin-left:0;padding-left:52px}
.page{margin-left:0;max-width:100%}
.btn,button,select,input[type=text],input[type=password],input[type=number],
  input[type=search],input[type=email],input[type=url]{min-height:42px}
.btn-sm{min-height:40px}
.sidebar-nav a{min-height:44px;font-size:var(--fs-md)}
.fmtab{min-height:44px}
.forge-gear-btn,.btn-icon{width:40px;min-height:40px}
.btn-sm:has(> svg:only-child){min-width:40px;padding:0}
.gallery-tab{display:inline-flex;align-items:center;min-height:40px;padding:0 12px}
.thumb-preset{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;font-size:11px}
.tags-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;font-size:11px;line-height:1}
.sidebar-toggle,.activity-toggle{width:44px;height:44px}
#info-btn{width:44px;height:44px;font-size:18px;display:inline-flex;align-items:center;justify-content:center}
.sidebar-bottom .rocket-link,.topbar .rocket-link{min-height:40px}
.activity-drawer-head button{min-width:44px;min-height:44px}
input,textarea,select{font-size:16px}
.card,.info-card{border-radius:var(--radius-sm)}
.card{padding:var(--sp-4)}
.forge-modal{max-width:100%;max-height:88vh}
.forge-modal-header,.forge-modal-tabs,.forge-modal-body{padding-left:var(--sp-4);padding-right:var(--sp-4)}
table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
h1{font-size:var(--fs-xl)}
h2{font-size:var(--fs-lg)}
.grid-2,.grid-3,.grid-4,.stats-grid,.metrics-grid,.two-col,.three-col{
    grid-template-columns:1fr!important;
  }
.forge-cmdk{padding-top:8vh}
html.forge-app-shell .sidebar{width:min(320px,86vw);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
html.forge-app-shell .sidebar-nav a{padding:14px 16px;font-size:14px}
html.forge-app-shell .sidebar-nav a svg{width:22px;height:22px}
html.forge-app-shell .nav-group{font-size:11px;padding:10px 16px 6px}
html.forge-app-shell .sidebar-brand{padding:18px 16px 12px}
.grid2{grid-template-columns:1fr}
.w-handle,.resize-handle,.auto-sort-btn{display:none !important}
}
@media (prefers-reduced-motion: reduce){
.dot.live{animation:none}
}

@media print{
.sidebar,.sidebar-toggle,.sidebar-backdrop,.topbar,
  .bg-grid,.bg-orb,#bg-canvas,.forge-gear-btn,.forge-toast{display:none!important}
}
.wt-tabs{display:flex;gap:4px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.wt-tabs::-webkit-scrollbar{display:none}
.wt-tab{
  display:flex;align-items:center;gap:6px;padding:9px 14px;font-size:12px;font-weight:600;
  color:var(--text-dim);background:none;border:none;cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;
  text-decoration:none;
}
.wt-tab:hover{color:var(--text)}
.wt-tab.active{color:var(--accent);border-color:var(--accent)}
.icon-inline{width:14px;height:14px;flex-shrink:0;display:inline-flex}
.icon-inline svg{width:100%;height:100%}
.wt-tab .icon-inline{width:13px;height:13px}
#gen-left-col .glass-card{ padding: 8px; }
#gen-left-col .card-header{ margin-bottom: 4px; }
#gen-left-col .dark-card{ padding: 6px 8px; margin-bottom: 4px; }
#gen-left-col .field-group{ margin-bottom: 4px; }
#gen-left-col .slider-group{ margin-bottom: 4px; }
#gen-left-col .info-row{ margin-bottom: 2px; }
.lora-list-item mark{ background: rgba(78,201,160,0.25); color: inherit; border-radius:var(--radius-xs); padding: 0 1px; }

.lora-cat-chip.active{ border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb),0.08); }

@media (max-width: 768px){
.card-header{ flex-wrap: wrap; align-items: flex-start; row-gap: 6px; }
.card-header h3{ font-size: 12px; }
.field-group{ margin-bottom: 3px; }
.dark-card{ padding: 5px 7px; margin-bottom: 3px; }
.info-row{ margin-bottom: 2px; }
#left-tab-bar{ margin-bottom: 2px; }
.left-tab-panel{ gap: 2px; }
#natural-prompt, #negative-prompt{ min-height: 56px; }
textarea#negative-prompt{ min-height: 30px; }
#generate-btn-card{ margin-top: 3px; padding: 6px 8px; }
.gallery-tabs{ flex-wrap: wrap; row-gap: 4px; }
.proj-card .proj-actions{ flex-direction: row; align-items: center; }
.proj-card .proj-actions a, .proj-card .proj-actions button{ padding: 6px 8px; min-height: 32px; }
.st-drive{ flex-wrap: wrap; }
.st-drive-right{ flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
}
@media (max-width: 480px){
#generate-btn-card .gap-row .btn-primary{ min-height: 48px; font-size: 14px; padding: 8px 14px; }
#generate-btn-card .gap-row .btn-sm{ min-height: 48px; }
}

#viewer.viewer-controls-hidden #v-nav-pane{
  opacity: 0; pointer-events: none; transform: translateX(-8px);
}

#v-nav-prompt{ height: 70px; }
#v-nav-negprompt{ height: 44px; }

#v-progress-slot:empty{ display: none; }
#v-progress-slot .glass-card{ margin: 0; background: rgba(255,255,255,0.05); }
.civitai-store{ max-width: 1180px; width: 95%; max-height: 88vh; display: flex; flex-direction: column; padding: 10px; }
.civitai-toolbar{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.civitai-body{ display: flex; gap: 10px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.civitai-sidebar{
  flex: 0 0 140px; overflow-y: auto; padding-right: 8px; border-right: 1px solid var(--glass-border);
}
.civitai-basemodel-list{ display: flex; flex-direction: column; gap: 4px; }
.civitai-basemodel-list label{ display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-dim); cursor: pointer; }
.civitai-basemodel-list input[type="checkbox"]{ width: auto; margin: 0; }
.civitai-grid-wrap{ flex: 1 1 auto; overflow-y: auto; min-width: 0; }
.civitai-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.civitai-card{
  border: 1px solid var(--glass-border); border-radius:var(--radius-sm); overflow: hidden;
  cursor: pointer; background: var(--surface); display: flex; flex-direction: column;
  transition: border-color 0.12s, transform 0.12s;
}
.civitai-card:hover{ border-color: var(--pink); transform: translateY(-1px); }
.civitai-card-img-wrap{ position: relative; width: 100%; aspect-ratio: 1/1; background: var(--bg-hover); overflow: hidden; }
.civitai-card-img-wrap img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.civitai-card-badge{
  position: absolute; top: 4px; left: 4px; font-size: 8px; padding: 1px 5px; border-radius:var(--radius-xs);
  background: rgba(0,0,0,0.6); color: #fff; backdrop-filter: blur(2px);
}
.civitai-card-nsfw{ position: absolute; top: 4px; right: 4px; font-size: 8px; padding: 1px 5px; border-radius:var(--radius-xs); background: rgba(242,85,90,0.85); color: #fff; }
.civitai-card-body{ padding: 6px 7px; display: flex; flex-direction: column; gap: 3px; }
.civitai-card-name{ font-size: 11px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.civitai-card-creator{ font-size: 9px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.civitai-card-stats{ display: flex; gap: 8px; font-size: 9px; color: var(--text-dim); }
.civitai-card-stats span{ display: inline-flex; align-items: center; gap: 2px; }
.civitai-detail{ flex-direction: column; overflow-y: auto; padding-right: 4px; }
.civitai-detail-back{ display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-dim); cursor: pointer; margin-bottom: 8px; background: none; border: none; padding: 0; }
.civitai-detail-back:hover{ color: var(--text); }
.civitai-detail-hero{ display: flex; gap: 12px; flex-wrap: wrap; }
.civitai-detail-gallery{ flex: 0 0 320px; max-width: 100%; }
.civitai-detail-gallery-main{ width: 100%; max-height: 420px; object-fit: contain; border-radius:var(--radius-sm); background: var(--bg-hover); display: block; }
.civitai-detail-gallery-strip{ display: flex; gap: 4px; margin-top: 6px; overflow-x: auto; }
.civitai-detail-gallery-strip img{ width: 48px; height: 48px; object-fit: cover; border-radius:var(--radius-xs); cursor: pointer; flex-shrink: 0; opacity: 0.6; border: 1px solid transparent; }
.civitai-detail-gallery-strip img:hover, .civitai-detail-gallery-strip img.active{ opacity: 1; border-color: var(--pink); }
.civitai-detail-info{ flex: 1 1 260px; min-width: 220px; }
.civitai-detail-title{ font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.civitai-detail-creator{ font-size: 10px; color: var(--text-dim); margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }
.civitai-detail-creator img{ width: 16px; height: 16px; border-radius:50%; }
.civitai-detail-stats{ display: flex; gap: 12px; font-size: 10px; color: var(--text-dim); margin-bottom: 8px; flex-wrap: wrap; }
.civitai-detail-tags{ display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.civitai-detail-tags span{ font-size: 8px; padding: 1px 5px; background: var(--bg-hover); border-radius:var(--radius-xs); color: var(--text-dim); }
.civitai-detail-desc{ font-size: 10px; line-height: 1.5; color: var(--text); max-height: 220px; overflow-y: auto; border: 1px solid var(--glass-border); border-radius:var(--radius-xs); padding: 8px; margin-top: 10px; }
.civitai-detail-desc p{ margin: 0 0 6px; }
.civitai-detail-desc img{ max-width: 100%; border-radius:var(--radius-xs); }
.civitai-detail-desc a{ color: var(--pink); }
.civitai-detail-trigger{ font-size: 9px; padding: 1px 5px; background: var(--bg-hover); border-radius:var(--radius-xs); color: var(--text-dim); cursor: pointer; }
.civitai-detail-trigger:hover{ color: var(--text); }
.lora-settings-heading{
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-dim); margin: 6px 0 3px;
}

.civitai-key-status{
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--text-dim);
}
.civitai-key-dot{
  width: 7px; height: 7px; border-radius:50%; flex-shrink: 0;
  background: var(--text-dim);
}
.civitai-key-dot.valid{ background: var(--tk-green); }
.civitai-key-dot.invalid{ background: var(--red); }
.civitai-key-dot.missing{ background: #ef4444; }
.civitai-key-dot.unknown{ background: var(--amber); }

/* ── CivitAI store · toolbar, filters, status, versions ──
   The .civitai-* shell above existed but nothing rendered it; these fill in
   the store UI that gen_sfw.html now builds. */
.civitai-store{ overflow: hidden; }
.civitai-title{
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--pink);
}
.civitai-search{ flex: 1 1 200px; min-width: 0; }
.civitai-close-btn{ display: inline-flex; align-items: center; justify-content: center; min-width: 34px; }
.civitai-filters{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.civitai-filters select{ font-size: 10px; padding: 4px 6px; }
.civitai-filters .civitai-key-status{ margin-left: auto; cursor: pointer; }
.civitai-nsfw-toggle{ display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-dim); cursor: pointer; }
.civitai-nsfw-toggle input[type="checkbox"]{ width: auto; margin: 0; }
.civitai-status{ font-size: 10px; color: var(--text-dim); margin: 6px 0 4px; }
.civitai-empty{ padding: 24px 12px; text-align: center; font-size: 11px; line-height: 1.5; color: var(--text-dim); }
.civitai-progress-wrap{ display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-dim); margin-bottom: 4px; }
.civitai-progress-track{ flex: 1; height: 8px; background: var(--bg); border: 1px solid var(--glass-border); border-radius:var(--radius-xs); overflow: hidden; }
.civitai-progress-track > div{ height: 100%; width: 0%; background: linear-gradient(90deg, var(--pink), var(--accent)); transition: width 0.3s; }
.civitai-load-more-row{ display: flex; justify-content: center; padding: 10px 0; }
.civitai-card-placeholder{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-dim2); }
.civitai-card-placeholder svg{ width: 32px; height: 32px; }
.civitai-detail-loading{ padding: 24px; text-align: center; font-size: 11px; color: var(--text-dim); }
.civitai-version-list{ display: flex; flex-direction: column; gap: 6px; }
.civitai-version-row{
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--glass-border); border-radius:var(--radius-sm);
  padding: 8px 10px; background: var(--surface);
}
.civitai-version-row.primary{ border-color: rgba(var(--accent-rgb),.35); }
.civitai-version-main{ flex: 1; min-width: 0; }
.civitai-version-name{ font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.civitai-version-meta{ font-size: 9px; color: var(--text-dim); margin-top: 1px; }
.civitai-version-nofile{ font-size: 9px; color: var(--text-dim2); flex-shrink: 0; }
.civitai-dl-btn{ flex-shrink: 0; }

/* Mobile store: full-bleed sheet, wrapping toolbar, filters as a horizontal
   strip, detail stacks. Declared last so it beats the base .civitai-store
   (the old mobile rule at the top of the file lost that cascade). */
@media (max-width: 768px){
  .civitai-store{
    position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
    border-radius:0; margin: 0;
    padding: calc(8px + var(--safe-t, env(safe-area-inset-top, 0px))) 8px
             calc(8px + var(--safe-b, env(safe-area-inset-bottom, 0px)));
    overflow: hidden;
    /* Opaque sheet — the shared --bg-card is translucent and let the page
       show through behind the grid. */
    background: var(--bg2);
  }
  .civitai-toolbar{ gap: 6px; }
  /* Row 1: title + close. Row 2: search field + Search button. */
  .civitai-title{ order: 0; }
  .civitai-close-btn{ order: 1; margin-left: auto; min-width: 44px; }
  .civitai-search{ order: 2; flex: 1 1 auto; min-height: 44px; }
  .civitai-toolbar > .btn-primary{ order: 3; }
  .civitai-filters select{ flex: 1 1 30%; min-height: 40px; }
  .civitai-filters .civitai-key-status{ margin-left: 0; flex-basis: 100%; }
  .civitai-body{ flex-direction: column; overflow: hidden; }
  .civitai-sidebar{
    flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--glass-border);
    padding: 0 0 8px;
  }
  .civitai-basemodel-list{ flex-direction: row; flex-wrap: wrap; gap: 6px 12px; }
  .civitai-basemodel-list label{ font-size: 11px; }
  .civitai-basemodel-list input[type="checkbox"]{ width: 18px; height: 18px; }
  .civitai-grid-wrap{ flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }
  .civitai-grid{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .civitai-card-name{ font-size: 12px; }
  .civitai-card-creator, .civitai-card-stats{ font-size: 10px; }
  .civitai-detail-hero{ flex-direction: column; }
  .civitai-detail-gallery{ flex: 0 0 auto; }
  .civitai-detail-gallery-main{ max-height: 46vh; }
  .civitai-detail-title{ font-size: 16px; }
  .civitai-detail-desc{ max-height: 40vh; font-size: 11px; }
  .civitai-version-row{ flex-wrap: wrap; }
  .civitai-dl-btn{ min-height: 44px; flex: 1 1 100%; }
  .civitai-detail-back{ min-height: 44px; margin-bottom: 4px; }
}
.fin-empty{color:var(--text-dim);font-size:12px;}
.fin-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.fin-tab-group{display:flex;gap:3px;}
.fin-tag-sub{font-size:10px;color:var(--text-dim2);font-weight:normal;}
.fin-list-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;}
.fin-list-row:last-child{border-bottom:none;}
.fin-row-sub{font-size:9px;color:var(--text-dim2);margin-top:2px;}
.fin-pill{font-size:9px;padding:2px 6px;border-radius:var(--radius-xs);text-transform:capitalize;}
.fin-progress-track{height:6px;border-radius:var(--radius-xs);background:var(--bg-input);overflow:hidden;margin-top:2px;}
.fin-progress-fill{height:100%;transition:width .4s;}
.fin-progress-row{margin-bottom:10px;}
.fin-row-delete{cursor:pointer;color:var(--text-dim2);margin-left:6px;}
.fin-row-delete:hover{color:var(--red);}
@media (max-width: 768px){
.row{gap:10px;}
body.page-finance .card{min-width:0;width:100%;overflow-x:auto;}
.health-score{flex-wrap:wrap;gap:12px;}
.score-detail{grid-template-columns:1fr;min-width:0;}
.modal{min-width:0;width:92vw;max-width:420px;padding:16px;}
}

.st-drive-main{flex:1;min-width:0}
@media (max-width: 640px){
.cal-cell{min-height:60px;padding:3px}
.cal-chip{font-size:9px}
.cal-row{flex-direction:column;gap:0}
.cal-wk-body,.cal-day-body{height:420px}
.pl-grid-wrap{height:420px}
}

.forge-player-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:flex;align-items:center;gap:12px;
  padding:8px 14px;min-height:40px;
  background:var(--bg-card);border-top:1px solid var(--border);
  backdrop-filter:blur(12px);
  box-shadow:0 -4px 20px rgba(0,0,0,.25);
}
.forge-player-bar[hidden]{display:none}
.forge-player-media{flex-shrink:0}
.forge-player-bar.forge-player-has-video .forge-player-media{width:160px;height:90px}
.forge-player-video{width:160px;height:90px;border-radius:var(--radius-sm);border:none;background:#000;display:block}
.forge-player-audio{height:32px;max-width:340px;width:100%}
.forge-player-info{flex:1;min-width:0}
.forge-player-title{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forge-player-sub{font-size:10px;color:var(--text-dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forge-player-actions{display:flex;gap:6px;flex-shrink:0}
.forge-player-btn{
  width:28px;height:28px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-input);color:var(--text-dim);
  cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;
  transition:all .12s;
}
.forge-player-btn:hover{background:var(--bg-hover);color:var(--text);border-color:var(--accent,var(--cyan))}
@media (max-width:600px){
.forge-player-bar.forge-player-has-video .forge-player-media,
  .forge-player-video{width:110px;height:62px}
.forge-player-audio{max-width:none}
.forge-player-sub{display:none}
}