:root{
  color-scheme:dark;
  --bg:#08131d;--card:#10263a;--card2:#15324b;--text:#f4f7fa;--muted:#aebdca;
  --accent:#74c7bd;--accent2:#f1c66d;--danger:#ff7c73;--ok:#78d39a;--line:#27445e;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#08131d,#0b1b29 40%,#08131d);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 18px 14px;background:rgba(8,19,29,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
h1,h2,p{margin-top:0}h1{font-size:1.35rem;margin-bottom:0}h2{font-size:1.25rem;margin-bottom:14px}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;color:var(--accent);font-weight:800;margin-bottom:5px}
main{width:min(920px,100%);margin:auto;padding:18px 14px 80px}
.card{background:linear-gradient(145deg,var(--card),#0d2132);border:1px solid var(--line);border-radius:22px;padding:18px;margin-bottom:14px;box-shadow:0 14px 35px rgba(0,0,0,.22)}
.hero{display:grid;gap:18px}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hero-stats div{background:#0a1b2a;border-radius:16px;padding:13px}.hero-stats strong,.hero-stats span{display:block}.hero-stats strong{font-size:1.25rem}.hero-stats span{font-size:.72rem;color:var(--muted);margin-top:3px}
.pill{display:inline-block;padding:6px 9px;border-radius:999px;font-size:.7rem;font-weight:900;letter-spacing:.08em;margin-bottom:10px}.pill.ok{background:rgba(120,211,154,.16);color:var(--ok)}.pill.warn{background:rgba(241,198,109,.15);color:var(--accent2)}.pill.bad{background:rgba(255,124,115,.15);color:var(--danger)}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0}.tab{border:1px solid var(--line);background:#0c1e2d;color:var(--muted);padding:10px 5px;border-radius:12px}.tab.active{background:var(--accent);color:#06221f;font-weight:900}
.panel{display:none}.panel.active{display:block}
.grid{display:grid;gap:12px}.grid.two{grid-template-columns:1fr}
label{display:grid;gap:6px;color:var(--muted);font-size:.83rem;font-weight:700}
input,select,textarea{width:100%;color:var(--text);background:#081a29;border:1px solid var(--line);border-radius:12px;padding:12px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.calculation{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.calculation div{padding:13px;background:#0a1b2a;border-radius:14px}.calculation span,.calculation strong{display:block}.calculation span{color:var(--muted);font-size:.75rem}.calculation strong{font-size:1.1rem;margin-top:4px}.calculation .primary{background:rgba(116,199,189,.13);border:1px solid rgba(116,199,189,.35)}
.actions{display:flex;gap:9px;flex-wrap:wrap}.primary-btn,.secondary-btn,.danger-btn,.ghost,.file-btn{border:0;border-radius:13px;padding:12px 14px;font-weight:850;text-align:center}.primary-btn{background:var(--accent);color:#06221f}.secondary-btn,.ghost,.file-btn{background:#183750;color:var(--text);border:1px solid var(--line)}.danger-btn{background:rgba(255,124,115,.14);color:var(--danger);border:1px solid rgba(255,124,115,.3)}.small{padding:9px 11px}.hidden{display:none!important}
.notice{padding:13px;border-radius:14px;background:rgba(241,198,109,.12);border:1px solid rgba(241,198,109,.3);color:#ffe4a8;margin-bottom:14px}
.section-heading,.dialog-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.detail-list{display:grid;gap:8px}.detail-row,.history-item,.archive-item{background:#0a1b2a;border:1px solid var(--line);border-radius:14px;padding:13px}.detail-row{display:flex;justify-content:space-between;gap:15px}.detail-row span{color:var(--muted)}
.stack{display:grid;gap:9px}.history-item header,.archive-item header{display:flex;justify-content:space-between;gap:12px}.meta{color:var(--muted);font-size:.8rem}.history-item p{margin-bottom:0}.rating{font-size:.75rem;font-weight:900;color:var(--accent)}
.timer-card{text-align:center}.timer-display{font-size:clamp(3.8rem,16vw,7rem);font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:-.04em}.progress{height:10px;background:#06131e;border-radius:999px;overflow:hidden;margin:18px 0}.progress div{height:100%;width:0;background:var(--accent);transition:width .2s linear}
dialog{width:min(500px,calc(100% - 24px));border:1px solid var(--line);border-radius:20px;background:#0d2132;color:var(--text);padding:0}dialog::backdrop{background:rgba(0,0,0,.66);backdrop-filter:blur(4px)}dialog form{padding:18px;display:grid;gap:13px}.icon-btn{border:0;background:transparent;color:var(--text);font-size:1.6rem}.file-btn input{display:none}.muted{color:var(--muted);font-size:.9rem}
@media(min-width:720px){.hero{grid-template-columns:1.4fr 1fr;align-items:center}.grid.two{grid-template-columns:1fr 1fr}.calculation{grid-template-columns:repeat(4,1fr)}}

/* MMXII / PROCESS v0.4 */
:root{--bg:#090909;--card:#101010;--card2:#151515;--text:#f3f0e9;--muted:#aaa69e;--accent:#cf1818;--line:#303030;--ok:#80c6a1;--warn:#e1bb61;--danger:#df5b54}
body{background:#090909;color:var(--text)}
.app-header{background:#090909;border-bottom:1px solid #252525}
.brand-lockup{display:flex;align-items:center;gap:13px}
.brand-icon{width:48px;height:48px;object-fit:contain;object-position:center 23%;filter:none}
.brand-lockup h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:.22em;margin:0;font-size:1.65rem}
.brand-sub{font:700 .58rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.31em;margin:5px 0 0;color:#eee}
.card{background:#101010;border-color:#303030;border-radius:2px;box-shadow:none}
.eyebrow{color:#d7d2c8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.17em}
.tabs{border-radius:2px;background:#292929;gap:1px}.tab{border-radius:0;background:#151515;border:0;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}.tab.active{background:#cf1818;color:#fff}
input,select,textarea{background:#090909;border-color:#383838;border-radius:2px}
.calculation>div,.hero-stats>div,.detail-row,.history-item,.archive-item{background:#090909;border-radius:2px}
.calculation .primary{background:#111;border-color:#8d2222}
.primary-btn{background:#cf1818;color:#fff;border-radius:2px;text-transform:uppercase;letter-spacing:.07em}
.secondary-btn,.ghost,.file-btn{background:#171717;border-color:#393939;border-radius:2px}.danger-btn,.pill{border-radius:2px}
.progress{border-radius:0}.progress div{background:#cf1818}.timer-display{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.next-roll-callout{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 16px;margin-top:18px;background:#080808;border-left:3px solid #cf1818}
.next-roll-callout span{font:700 .65rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.17em;color:#999}
.next-roll-callout strong{font-size:1.05rem;text-align:right}
.brand-footer{width:min(920px,100%);margin:0 auto;padding:5px 18px 50px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand-footer strong{font:400 1.25rem Georgia,"Times New Roman",serif;letter-spacing:.22em}.brand-footer span{font:700 .6rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.24em}.brand-footer small{color:#777;margin-left:auto}
@media(max-width:620px){.next-roll-callout{display:block}.next-roll-callout strong{display:block;text-align:left;margin-top:7px}.brand-footer small{width:100%;margin-left:0}.brand-icon{width:44px;height:44px}}

/* MMXII / PROCESS v0.4.1 — desktop responsiveness pass */

/* Wider, consistent application shell on large displays */
.app-header,
main,
.brand-footer{
  width:min(1240px, calc(100% - 56px));
  margin-left:auto;
  margin-right:auto;
}

/* Let the sticky header span full viewport visually, but keep content aligned */
.app-header{
  max-width:none;
  width:100%;
  padding-left:max(28px, calc((100vw - 1240px)/2));
  padding-right:max(28px, calc((100vw - 1240px)/2));
}

/* Increase desktop scale without making the UI feel stretched */
@media(min-width:1100px){
  main{padding-top:24px}
  .hero{
    grid-template-columns:minmax(0,1.5fr) minmax(420px,.9fr);
    gap:24px;
    padding:26px 28px;
  }
  .hero h2{font-size:1.55rem}
  .hero p{font-size:1rem;max-width:720px}
  .hero-stats{gap:12px}
  .hero-stats div{padding:18px}
  .hero-stats strong{font-size:1.45rem}
  .hero-stats span{font-size:.78rem}

  .tabs{margin:18px 0}
  .tab{padding:14px 8px;font-size:.76rem}

  .card{padding:26px 28px;margin-bottom:18px}
  .section-heading h2,
  .card>h2{font-size:1.4rem}

  .grid.two{gap:16px 18px}
  label{font-size:.88rem}
  input,select,textarea{padding:14px 13px;font-size:.98rem}

  .next-roll-callout{padding:17px 18px}
  .next-roll-callout strong{font-size:1.15rem}

  .calculation{gap:12px;margin:20px 0}
  .calculation>div{padding:16px}
  .calculation span{font-size:.78rem}
  .calculation strong{font-size:1.25rem}

  .actions{gap:11px}
  .primary-btn,.secondary-btn,.danger-btn,.ghost,.file-btn{padding:13px 16px}

  .brand-lockup{gap:15px}
  .brand-icon{width:56px;height:56px}
  .brand-lockup h1{font-size:1.9rem}
  .brand-sub{font-size:.63rem}

  .brand-footer{padding-top:14px}
  .brand-footer strong{font-size:1.4rem}
}

/* Ultra-wide displays: retain a centered instrument-panel feel */
@media(min-width:1700px){
  .app-header,
  main,
  .brand-footer{
    width:min(1320px, calc(100% - 96px));
  }
  .app-header{
    width:100%;
    padding-left:max(48px, calc((100vw - 1320px)/2));
    padding-right:max(48px, calc((100vw - 1320px)/2));
  }
}

/* Tablet refinement */
@media(min-width:720px) and (max-width:1099px){
  .app-header,
  main,
  .brand-footer{
    width:min(960px, calc(100% - 32px));
  }
  .app-header{
    width:100%;
    padding-left:16px;
    padding-right:16px;
  }
}

/* Mobile: keep breathing room */
@media(max-width:719px){
  .app-header,
  main,
  .brand-footer{
    width:100%;
  }
  main{padding-left:12px;padding-right:12px}
  .brand-footer{padding-left:12px;padding-right:12px}
}

/* MMXII / PROCESS v0.5 — guided processing workflow */
.process-modal{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:9999;display:none;place-items:center;padding:20px}
.process-modal.open{display:grid}
.process-shell{width:min(760px,100%);background:#0d0d0d;border:1px solid #333;padding:28px}
.process-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.process-top h2{margin:5px 0 0;font-size:1.65rem}
.process-close{padding:9px 12px}.process-stage-index{font:700 .68rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:#777;margin-top:30px}
.process-clock{font:700 clamp(4rem,14vw,8.5rem) ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.07em;line-height:1;margin:18px 0 20px}
.process-progress{height:5px;background:#252525}.process-progress div{height:100%;width:0;background:#cf1818;transition:width .25s linear}
.process-instruction{min-height:72px;margin:22px 0;padding:17px 18px;background:#080808;border-left:3px solid #cf1818;font-size:1.02rem;line-height:1.45}
.process-actions{display:flex;gap:10px}.process-actions button{min-height:48px}
.process-meta{display:flex;justify-content:space-between;gap:14px;margin-top:24px;padding-top:15px;border-top:1px solid #292929;color:#777;font:700 .66rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.process-modal.ready .process-clock{color:#f3f0e9}.process-modal.complete .process-clock{color:#80c6a1}
@media(max-width:620px){.process-modal{padding:0}.process-shell{min-height:100dvh;border:0;padding:22px 18px;display:flex;flex-direction:column}.process-stage-index{margin-top:40px}.process-clock{margin-top:28px}.process-actions{margin-top:auto}.process-actions button{flex:1}.process-meta{margin-bottom:10px}}

/* MMXII v0.5.2 — Developer/Test Mode */
.process-stage-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px}
.process-stage-row .process-stage-index{margin-top:0}
.developer-mode-badge{
  font:800 .62rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
  padding:6px 8px;
  color:#090909;
  background:#e1bb61;
}
.dev-skip-btn{
  background:#342b12;
  color:#f6d87e;
  border:1px solid #715d22;
  border-radius:2px;
  padding:12px 14px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.dev-skip-btn:hover{background:#463915}
@media(max-width:620px){
  .process-stage-row{margin-top:34px}
  .dev-skip-btn{flex:1}
}

/* v0.5.3 stabilization */
.dev-mode-notice{margin-bottom:14px;padding:12px 14px;background:#342b12;border:1px solid #715d22;color:#f6d87e;font:800 .72rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.developer-mode-badge{font:800 .62rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;padding:6px 8px;color:#090909;background:#e1bb61}
.dev-skip-btn{background:#342b12;color:#f6d87e;border:1px solid #715d22;border-radius:2px;padding:12px 14px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}

/* MMXII v0.5.5 audio settings */
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.settings-actions button{margin-top:0}
.profile-editor{margin:22px 0;padding:20px;background:#0a0a0a;border:1px solid #303030}.profile-editor textarea{margin-bottom:12px}.process-roll-picker{margin:18px 0;padding:15px;background:#0a0a0a;border:1px solid #303030}.picker-heading{display:flex;justify-content:space-between;align-items:center}.process-roll-selection{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.selected-roll-chip{background:#171717;color:#eee;border:1px solid #444;padding:9px}.roll-list{display:grid;gap:9px;margin-top:16px}.roll-card{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px;background:#090909;border:1px solid #303030}.roll-card>div{display:grid;gap:4px}.roll-card>div>b{font:800 .64rem ui-monospace;color:#cf1818}.roll-card small{color:#888}@media(max-width:620px){.roll-card{align-items:flex-start;flex-direction:column}.roll-card button{width:100%}}
/* MMXII v0.8 */
nav.tabs,.tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important}
nav.tabs .tab,.tabs .tab{width:auto!important;min-width:0!important;grid-column:auto!important}
.account-card{margin:0 0 22px;padding:20px;background:#0a0a0a;border:1px solid #303030}.account-card h3{margin-top:5px}.account-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.sync-good{color:#79caa4}.sync-warn{color:#e0b85b}
@media(max-width:620px){nav.tabs,.tabs{grid-template-columns:repeat(5,minmax(0,1fr))!important}.tabs .tab{font-size:.58rem!important;letter-spacing:.06em!important;padding:11px 1px!important}}

/* MMXII v0.8.1 — account UX */
.app-header{display:flex;align-items:center;justify-content:space-between;gap:18px}
.header-account{margin-left:auto}.header-account-btn{display:flex;align-items:center;gap:8px;background:#111;color:#eee;border:1px solid #343434;padding:10px 12px;font:800 .66rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em}
.sync-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#666}.sync-dot.synced{background:#78caa0}.sync-dot.syncing{background:#e2b85b;animation:mmxiiPulse 1s infinite}.sync-dot.error{background:#cf1818}.sync-dot.offline{background:#666}@keyframes mmxiiPulse{50%{opacity:.35}}
.account-drawer{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:10000;display:none;justify-content:flex-end}.account-drawer.open{display:flex}.account-drawer-panel{width:min(430px,100%);height:100%;background:#0d0d0d;border-left:1px solid #333;padding:24px;overflow:auto}.account-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:26px}.account-summary{display:grid;gap:5px;padding:14px 0;border-bottom:1px solid #292929}.account-summary span{color:#888;font-size:.78rem}.account-summary strong{font-size:.96rem;word-break:break-word}
@media(max-width:620px){.brand-icon{width:42px;height:42px}.brand-lockup h1{font-size:1.45rem}.brand-sub{font-size:.54rem}.header-account-btn{padding:9px 10px;font-size:.59rem}.account-drawer-panel{width:100%;border-left:0}}

/* MMXII v0.9 — Roll Library */
.roll-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:10px;margin-top:18px}
.roll-library-summary{display:flex;gap:20px;flex-wrap:wrap;padding:13px 0;color:#888;font-size:.78rem}.roll-library-summary b{color:#f3f0e9;font-size:1rem;margin-right:4px}
.roll-library-card{padding:0;overflow:hidden}.roll-main{flex:1;display:grid;gap:5px;text-align:left;background:transparent;color:#eee;border:0;padding:15px;min-width:0}
.roll-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.roll-title-row>b{font:800 .67rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:#cf1818}
.roll-status{font:800 .58rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;padding:5px 7px;background:#202020;color:#aaa}
.status-ready{color:#78caa0;background:#18342a}.status-loaded,.status-exposed{color:#e2b85b;background:#342b12}.status-developed,.status-scanned{color:#b9c7d8;background:#172330}.status-archived{color:#888;background:#1d1d1d}
.roll-linkage{color:#b9c7d8!important}.roll-card-actions{padding:12px 15px 12px 0;display:flex;gap:8px;align-items:center}
@media(max-width:700px){.roll-toolbar{grid-template-columns:1fr}.roll-library-summary{gap:12px}.roll-library-card{flex-direction:column}.roll-main{width:100%}.roll-card-actions{width:100%;padding:0 15px 15px}.roll-card-actions button{flex:1}}

/* MMXII v0.10 — HOME */
.settings-nav-legacy{display:none!important}
.mmxii-home{display:none}.mmxii-home.active{display:block}
.home-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.home-hero h1{margin:.25rem 0;font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em}
.home-headline{font-size:1.05rem;margin:.25rem 0 0;color:#aaa}.home-state-badge{font:800 .67rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;padding:9px 11px;background:#242424;color:#aaa}.home-state-badge.ready{background:#18342a;color:#78caa0}.home-state-badge.warning{background:#342b12;color:#e2b85b}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.home-card{text-align:left;min-height:190px}.home-nav{cursor:pointer;color:inherit;width:100%}.home-nav.card{background:var(--panel,#0d0d0d);border:1px solid #333}
.home-big{font-size:3.2rem;font-weight:800;line-height:1;margin:18px 0 10px}.home-big-text{font-size:1.5rem;letter-spacing:-.02em}.home-link{display:block;margin-top:24px;font:800 .65rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#cf1818}
.home-next{margin-top:16px}.home-recent{margin-top:18px}.home-activity{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #2a2a2a;padding:12px 0}.home-activity span{color:#777;font-size:.8rem}
.home-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.home-stats div{background:#050505;padding:14px}.home-stats b{display:block;font-size:1.5rem}.home-stats span{display:block;color:#777;font-size:.72rem;margin-top:4px}
@media(max-width:700px){.home-hero{align-items:flex-start;flex-direction:column}.home-grid{grid-template-columns:1fr}.home-card{min-height:auto}.home-big{font-size:2.6rem}.home-next .section-heading{align-items:flex-start;gap:18px}.home-next .section-heading button{width:100%}.home-stats{gap:6px}}

/* MMXII v0.10.1 — HOME/navigation hotfix */
nav.tabs,.tabs{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
nav.tabs>*,
.tabs>*{
  min-width:0!important;
  width:auto!important;
  grid-column:auto!important;
}

/* v0.10.2 */
.account-build{
  margin-top:30px;
  padding-top:14px;
  border-top:1px solid #262626;
  color:#555;
  font:700 .56rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}

/* MMXII v0.10.6 — mobile nav + HOME chemistry routing */
nav.tabs,.tabs{
  border-radius:0!important;
  overflow:hidden!important;
}
nav.tabs .tab,
nav.tabs .tab-btn,
.tabs .tab,
.tabs .tab-btn{
  border-radius:0!important;
  outline:none!important;
  box-shadow:none!important;
  border:0!important;
  background:#151515!important;
  color:#aaa!important;
}
nav.tabs .tab.active,
nav.tabs .tab-btn.active,
.tabs .tab.active,
.tabs .tab-btn.active{
  background:#cf1818!important;
  color:#fff!important;
  border:0!important;
  box-shadow:none!important;
}
@media(max-width:700px){
  nav.tabs,.tabs{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:1px!important;
    background:#292929!important;
  }
  nav.tabs .tab,
  nav.tabs .tab-btn,
  .tabs .tab,
  .tabs .tab-btn{
    padding:12px 2px!important;
    font-size:.62rem!important;
    line-height:1!important;
    letter-spacing:.07em!important;
    white-space:nowrap!important;
    min-width:0!important;
  }
}

/* MMXII v0.11 — roll lifecycle */
.roll-lifecycle-action{white-space:nowrap}
.roll-lifecycle-meta{
  color:#6f7d87!important;
  margin-top:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem!important;
}
@media(max-width:700px){
  .roll-card-actions{display:grid!important;grid-template-columns:1fr 1fr}
  .roll-card-actions .roll-lifecycle-action{grid-column:1/-1}
}

/* MMXII v0.11.1 */
.process-roll-guidance{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 0;
}
.process-roll-guidance .process-manual-note{
  margin:0;
  display:block;
}
@media(max-width:700px){
  .process-roll-guidance{
    align-items:stretch;
    flex-direction:column;
  }
  .process-roll-guidance button{
    width:100%;
  }
}

/* MMXII v0.12 — Recipe Library */
.recipe-list{display:grid;gap:14px;margin-top:20px}
.recipe-card{border:1px solid #303030;padding:20px;display:flex;justify-content:space-between;gap:20px;background:#080808}
.recipe-card h3{margin:8px 0 5px;font-size:1.25rem}
.recipe-card p{margin:0;color:#aaa}
.recipe-badges{display:flex;gap:7px;flex-wrap:wrap}
.recipe-built-in{background:#242424!important}
.recipe-stage-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.recipe-stage-strip span{border:1px solid #292929;background:#030303;padding:8px 10px;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.recipe-stage-strip strong{margin-left:6px}
.recipe-card-actions{display:flex;align-items:flex-start;gap:8px}
.recipe-stage-editor{border-top:1px solid #30404a;margin-top:18px;padding-top:18px}

.recipe-required{display:flex!important;align-items:center;gap:7px;margin:0!important}
.section-head.compact{margin-bottom:8px}
@media(max-width:760px){
 .recipe-card{flex-direction:column}
 .recipe-card-actions{width:100%}
 .recipe-card-actions button{flex:1}
 .recipe-stage-row{grid-template-columns:1fr 90px 44px}
 .recipe-stage-row .rs-instruction{grid-column:1/-1}
 .recipe-required{grid-column:1/3}
}

/* MMXII v0.12.1 — six-section navigation */
nav.tabs,.tabs{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  overflow:visible!important;
}
@media(max-width:700px){
  nav.tabs,.tabs{
    display:flex!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:1px!important;
  }
  nav.tabs::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
  nav.tabs .tab,
  nav.tabs .tab-btn,
  .tabs .tab,
  .tabs .tab-btn{
    flex:0 0 auto!important;
    min-width:118px!important;
    width:auto!important;
    padding:12px 16px!important;
    font-size:.66rem!important;
    white-space:nowrap!important;
  }
}

/* MMXII v0.12.2 */
.recipe-library-shell{
  display:block!important;
  margin:0;
}

/* MMXII v0.12.3 — recipe binding */
.field-help{display:block;margin-top:6px;color:#83909a;font-size:.72rem;line-height:1.35}
.process-recipe-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:14px 0;padding:12px 14px;background:#070707;border:1px solid #303030;border-left:2px solid #cf1818}.process-recipe-bar>div{display:grid;gap:4px}.process-recipe-bar span{font:800 .6rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:#777}.process-recipe-bar strong{font-size:.95rem}.process-recipe-bar small{color:#888;text-align:right}@media(max-width:700px){.process-recipe-bar{align-items:flex-start;flex-direction:column}.process-recipe-bar small{text-align:left}}
/* MMXII v0.12.5 — active recipe as process context */
.process-recipe-bar{
  width:100%;
  margin:0 0 18px!important;
  padding:13px 14px!important;
  display:flex!important;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  text-align:left;
  background:#080808!important;
  border:1px solid #343434!important;
  border-left:3px solid #cf1818!important;
  color:#eee!important;
  cursor:pointer;
}
.process-recipe-bar:hover{border-color:#4b4b4b!important;border-left-color:#cf1818!important}
.process-recipe-bar:focus-visible{outline:2px solid #cf1818!important;outline-offset:2px}
.process-recipe-bar>div{display:grid;gap:4px}
.process-recipe-bar span{
  font:800 .6rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
  color:#777;
}
.process-recipe-bar strong{font-size:1rem}
.process-recipe-bar small{color:#8f8f8f;text-align:right}
@media(max-width:700px){
  .process-recipe-bar{align-items:flex-start;flex-direction:column}
  .process-recipe-bar small{text-align:left}
}

/* MMXII v0.12.6 — readable recipe stage cards + agitation authoring */
.recipe-stage-row{border:1px solid #315064;background:#061c29;padding:14px;margin:12px 0;display:grid;gap:12px}
.recipe-stage-card-head{display:grid;grid-template-columns:minmax(180px,1fr) auto 44px;gap:10px;align-items:center}
.recipe-stage-card-head .rs-name{font-weight:800;font-size:1rem}
.recipe-stage-fields{display:grid;grid-template-columns:180px minmax(260px,1fr);gap:10px}
.recipe-stage-fields label,.recipe-agitation-grid label{display:grid;gap:6px}
.recipe-stage-fields label>span,.recipe-agitation-grid label>span{font-size:.76rem;color:#aaa;font-weight:700}
.recipe-instruction-field{min-width:0}
.recipe-agitation{border-top:1px solid #315064;padding-top:12px}
.recipe-agitation-title{font:800 .65rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;color:#aaa;margin-bottom:9px}
.recipe-agitation-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:10px}
.recipe-agitation-grid .ag-custom{grid-column:2/-1}
.recipe-stage-row input,.recipe-stage-row select{min-width:0;width:100%}
.recipe-stage-row [hidden]{display:none!important}
@media(max-width:700px){
 .recipe-stage-row{padding:12px}
 .recipe-stage-card-head{grid-template-columns:1fr auto 42px}
 .recipe-stage-fields{grid-template-columns:1fr}
 .recipe-agitation-grid{grid-template-columns:1fr 1fr}
 .recipe-agitation-grid .ag-custom{grid-column:1/-1}
}
@media(max-width:460px){
 .recipe-stage-card-head{grid-template-columns:1fr 42px}
 .recipe-stage-card-head .recipe-required{grid-row:2;grid-column:1}
 .recipe-stage-card-head .rs-remove{grid-row:1;grid-column:2}
 .recipe-agitation-grid{grid-template-columns:1fr}
 .recipe-agitation-grid .ag-custom{grid-column:auto}
}

/* MMXII v0.12.7 — human-readable stage duration */
.recipe-duration-field{display:grid;gap:6px}
.recipe-duration-field>span{font-size:.76rem;color:#aaa;font-weight:700}
.recipe-duration-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.recipe-duration-inputs label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border:1px solid #444;background:#050505}
.recipe-duration-inputs input{border:0!important;background:transparent!important;min-width:0;padding-right:4px!important}
.recipe-duration-inputs small{padding:0 10px 0 4px;color:#aaa;font-weight:700}
@media(max-width:460px){
 .recipe-duration-inputs{grid-template-columns:1fr 1fr}
}

/* MMXII v0.13 — live agitation engine */
.process-agitation{margin:14px 0;padding:14px;border:1px solid #343434;background:#080808}
.process-agitation.active{border-color:#cf1818;background:#160606}
.process-agitation-head{display:flex;justify-content:space-between;gap:14px;align-items:center}
.process-agitation-head span{font:800 .62rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#777}
.process-agitation-head strong{font-size:.86rem}
.process-agitation.active .process-agitation-head strong{color:#fff}
.process-agitation-bar{height:5px;background:#1e1e1e;margin:10px 0;overflow:hidden}
.process-agitation-bar>div{height:100%;width:0;background:#cf1818;transition:width .2s linear}
.process-agitation small{color:#8c8c8c}

/* MMXII v0.14 — Film Library Foundation */
.library-foundation{border:1px solid #303030;padding:28px;background:#080808}
.library-title-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.library-title-row h2{margin:4px 0 5px;font-size:2rem}.library-title-row p{margin:0;color:#929292}
.library-count{min-width:130px;background:#030303;padding:15px 18px}.library-count strong{display:block;font-size:1.8rem}.library-count span{color:#858585;font-size:.8rem}
.library-tools{display:grid;grid-template-columns:minmax(260px,2fr) repeat(3,minmax(140px,1fr));gap:10px;margin:24px 0 14px}
.library-tools input,.library-tools select{width:100%;min-height:48px;background:#030303;color:#eee;border:1px solid #383838;padding:0 13px}
.library-summary{display:flex;gap:24px;flex-wrap:wrap;padding:0 0 18px;color:#858585;font-size:.82rem}.library-summary b{color:#eee;margin-right:4px}
.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.library-card{border:1px solid #303030;padding:18px;background:#030303}.library-card-top{display:flex;justify-content:space-between;gap:15px;font:800 .66rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#d71d1d}
.library-card-top em{font-style:normal;color:#75cfa6}.library-card h3{margin:12px 0 4px}.library-card p{margin:3px 0;color:#969696}
.library-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #242424;margin-top:15px;padding-top:12px;color:#777;font-size:.76rem}
.library-card button{margin-top:14px}.library-empty{border:1px dashed #333;padding:28px;color:#777;grid-column:1/-1}
@media(max-width:760px){.library-foundation{padding:18px}.library-title-row{display:block}.library-count{margin-top:16px}.library-tools{grid-template-columns:1fr}.library-grid{grid-template-columns:1fr}}

/* v0.14.1 — layout normalization */
#recipesContent,.recipes-content,#recipeContent,.recipe-content,
#historyContent,.history-content,#libraryContent,.library-content,
[data-page="recipes"],[data-page="library"],[data-page="history"]{
  width:min(100%,1280px);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

.recipe-library,.recipes-library,.recipe-list,.recipes-list{
  width:100%;
  max-width:1280px;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}
@media(max-width:760px){
  #recipesContent,.recipes-content,#recipeContent,.recipe-content,
  #historyContent,.history-content,#libraryContent,.library-content,
  [data-page="recipes"],[data-page="library"],[data-page="history"]{width:100%}
}

/* MMXII v0.14.5 — consistent page shell */
.app-content-shell{
  width:min(calc(100% - 40px),1280px);
  margin:0 auto;
  box-sizing:border-box;
}
#recipes{
  padding-top:18px;
}
#recipes .recipe-library-shell,
#recipes .recipe-list{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
.recipes-shell{
  padding-bottom:24px;
}
@media(max-width:700px){
  .app-content-shell{
    width:calc(100% - 24px);
  }
}

.library-card-legacy{border-style:dashed}.library-process-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;color:#8a8a8a;font-size:.76rem}.library-legacy-label{display:inline-block;margin-top:14px;color:#777;font:800 .58rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}

/* MMXII v0.14.9 — Library alignment */
#history{
  width:100%;
}
#historyContent{
  width:100%;
}
#history .library-foundation{
  width:100%;
  margin:0;
  box-sizing:border-box;
}

/* MMXII v0.15 — Roll Workspace / Library separation */
.roll-view-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:20px 0 12px;
  border:1px solid #343434;
  background:#0d0d0d;
}
.roll-view-btn{
  min-height:46px;
  border:0;
  border-right:1px solid #343434;
  background:#111;
  color:#8e8e8e;
  font-weight:800;
  letter-spacing:.09em;
  cursor:pointer;
}
.roll-view-btn:last-child{border-right:0}
.roll-view-btn.active{
  background:#d7191c;
  color:#fff;
}
.roll-library-hint{
  margin-left:auto;
  color:#777!important;
  font:800 .62rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
@media(max-width:700px){
  .roll-library-hint{width:100%;margin-left:0;margin-top:3px}
}

/* MMXII v0.16 — Scan & Archive Workflow */
.library-stage{font-style:normal}
.library-stage.stage-developed{color:#75cfa6}
.library-stage.stage-scanned{color:#75cfa6}
.library-stage.stage-archived{color:#b8b8b8}

.library-lifecycle{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #242424;
}
.library-lifecycle>div{
  min-width:0;
  background:#080808;
  border:1px solid #242424;
  padding:10px;
}
.library-lifecycle span{
  display:block;
  font:800 .56rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  color:#6f6f6f;
  margin-bottom:5px;
}
.library-lifecycle strong{
  display:block;
  font-size:.76rem;
  overflow-wrap:anywhere;
}
.library-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.library-card-actions button{margin-top:0!important}

@media(max-width:700px){
  .library-lifecycle{grid-template-columns:1fr}
  .library-card-actions{display:grid;grid-template-columns:1fr}
  .library-card-actions button{width:100%}
}

/* MMXII v0.18 — Roll Detail / Archive Intelligence */
.roll-detail-dialog{
  width:min(900px,calc(100vw - 28px));
  max-width:900px;
}
.roll-detail-dialog form{display:grid;gap:16px}
.roll-detail-header{margin-bottom:0}
.roll-detail-summary{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  padding:16px;
  border:1px solid #315064;
  background:#061c29;
}
.roll-detail-summary-main{display:grid;gap:4px;min-width:0}
.roll-detail-summary-main>span{
  color:#d7191c;
  font:800 .62rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
}
.roll-detail-summary-main>strong{font-size:1.35rem}
.roll-detail-summary-main>small{color:#a5a5a5;overflow-wrap:anywhere}
.roll-detail-status{
  padding:6px 9px;
  border:1px solid #3b3b3b;
  font:800 .6rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
  white-space:nowrap;
}
.roll-detail-section{
  padding:16px;
  border:1px solid #315064;
  background:#062334;
}
.roll-detail-section-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding-bottom:13px;
  margin-bottom:14px;
  border-bottom:1px solid #315064;
}
.roll-detail-section-head>span{
  color:#d7191c;
  font:800 .68rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  padding-top:4px;
}
.roll-detail-section-head h3{margin:1px 0 0}
.roll-development-linkage{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:14px;
}
.roll-development-linkage>div,
.roll-archive-state{
  background:#030303;
  border:1px solid #345064;
  padding:12px;
}
.roll-development-linkage span,
.roll-archive-state>span{
  display:block;
  color:#777;
  font:800 .56rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  margin-bottom:5px;
}
.roll-development-linkage strong,
.roll-archive-state strong{display:block;overflow-wrap:anywhere}
.roll-archive-state small{display:block;color:#777;margin-top:5px;line-height:1.35}
.roll-detail-section>label{display:grid;gap:7px;margin-top:12px}
.roll-detail-actions{
  position:sticky;
  bottom:0;
  background:#062334;
  border-top:1px solid #315064;
  padding-top:14px;
  z-index:2;
}
@media(max-width:700px){
  .roll-detail-dialog{width:calc(100vw - 20px)}
  .roll-detail-summary{align-items:flex-start}
  .roll-development-linkage{grid-template-columns:1fr 1fr}
  .roll-detail-section{padding:13px}
}
@media(max-width:460px){
  .roll-detail-summary{flex-direction:column}
  .roll-development-linkage{grid-template-columns:1fr}
}

/* MMXII v0.19.0 — Insights */
nav.tabs,.tabs{grid-template-columns:repeat(7,minmax(0,1fr))!important}
.insights-shell{min-height:420px}
.insights-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}
.insight-kpi{background:#050505;border:1px solid #242424;padding:18px;min-height:105px;display:flex;flex-direction:column;justify-content:space-between}
.insight-kpi strong{font-size:2rem;line-height:1;color:#f4f1ed}.insight-kpi span{color:#8d8d8d;font-size:.75rem}
.insights-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.insight-block{border:1px solid #2b2b2b;padding:18px;background:#080808}.insight-block h3{margin:4px 0 18px}
.insight-list{display:grid;gap:12px}.insight-row{display:grid;grid-template-columns:minmax(100px,1fr) 2fr auto;gap:12px;align-items:center;font-size:.82rem}.insight-row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.insight-bar{height:7px;background:#191919;overflow:hidden}.insight-bar i{display:block;height:100%;background:#d7191f}.insight-row em{font-style:normal;color:#aaa;font-variant-numeric:tabular-nums}
.insight-empty{border:1px dashed #333;padding:28px;color:#888}.insight-substats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.insight-substat{border-top:1px solid #292929;padding-top:12px}.insight-substat b{display:block;font-size:1.35rem}.insight-substat span{font-size:.72rem;color:#888}
@media(max-width:800px){.insights-kpis{grid-template-columns:1fr 1fr}.insights-grid{grid-template-columns:1fr}.insight-row{grid-template-columns:minmax(90px,1fr) 1.5fr auto}}
@media(max-width:480px){.insights-kpis{grid-template-columns:1fr 1fr}.insight-kpi{padding:14px;min-height:92px}.insight-kpi strong{font-size:1.65rem}}

/* MMXII v0.20 — Settings / Preferences */
.settings-page{
  display:grid;
  gap:16px;
}
.settings-page-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  border:1px solid #303030;
  padding:24px;
  background:#080808;
}
.settings-page-head h2{margin:4px 0 6px;font-size:2rem}
.settings-saved{
  min-width:70px;
  text-align:center;
  padding:7px 10px;
  border:1px solid transparent;
  color:#75cfa6;
  font:800 .62rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  opacity:0;
  transition:opacity .15s ease;
}
.settings-saved.visible{opacity:1;border-color:#244d3b;background:#10291f}
.settings-section{
  border:1px solid #303030;
  background:#080808;
  padding:22px;
}
.settings-section-head{
  display:flex;
  gap:14px;
  padding-bottom:15px;
  margin-bottom:18px;
  border-bottom:1px solid #282828;
}
.settings-section-head>span{
  color:#d7191c;
  font:800 .68rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  padding-top:4px;
}
.settings-section-head h3{margin:2px 0 4px;font-size:1.2rem}
.settings-section-head p{margin-bottom:0}
.settings-note{
  display:grid;
  gap:4px;
  margin-top:16px;
  padding:13px 14px;
  border-left:2px solid #6d6d6d;
  background:#050505;
}
.settings-note strong{font-size:.82rem}
.settings-note span{color:#888;font-size:.78rem;line-height:1.45}
.settings-note-dev{border-left-color:#c49b38}
.settings-inline-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:16px;
}
.settings-save-bar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  position:sticky;
  bottom:12px;
  z-index:5;
  border:1px solid #3b3b3b;
  background:#101010;
  padding:14px 16px;
  box-shadow:0 10px 28px rgba(0,0,0,.38);
}
.settings-save-bar>div{display:grid;gap:3px}
.settings-save-bar strong{font-size:.82rem}
.settings-safety{
  border:1px solid #463a20;
  background:#151107;
  padding:15px 18px;
  color:#a99e81;
  font-size:.78rem;
  line-height:1.5;
}
.settings-safety p{margin:0}
#settings .account-card{margin:0}
@media(max-width:700px){
  .settings-page-head{padding:18px}
  .settings-section{padding:17px}
  .settings-save-bar{
    position:static;
    display:grid;
  }
  .settings-save-bar button{width:100%}
}


/* MMXII v0.21.1 — Global UI + navigation polish */
:root{--shell-max:1280px;--page-gap:18px;--panel-border:#303030;--control-bg:#090909;--control-border:#3a3a3a;--control-border-hover:#565656;--focus:#e12828}
main,.brand-footer{width:min(var(--shell-max),calc(100% - 48px));margin-left:auto;margin-right:auto}
main{padding:24px 0 72px}main>.hero{margin-top:0}.panel{width:100%;min-width:0}
.panel>.card,.panel>.settings-page,#historyContent{width:100%;max-width:none;margin-left:0;margin-right:0}
#recipes{padding-top:0}#recipes .recipe-library-shell{width:100%!important;max-width:none!important;margin:0!important}
.recipes-shell,.app-content-shell{width:100%;max-width:none;margin:0;padding:0}
.app-header{padding-left:max(24px,calc((100vw - var(--shell-max))/2));padding-right:max(24px,calc((100vw - var(--shell-max))/2))}
nav.tabs,.tabs{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:1px!important;margin:18px 0!important;border:1px solid #252525;background:#252525;overflow:hidden}
nav.tabs .tab,.tabs .tab{min-height:46px;display:flex;align-items:center;justify-content:center;border:0!important;background:#151515;color:#aaa;padding:12px 8px!important;font-size:.72rem!important;font-weight:650;line-height:1;letter-spacing:.1em!important;text-transform:uppercase;transition:background .12s ease,color .12s ease}
nav.tabs .tab:hover,.tabs .tab:hover{background:#1d1d1d;color:#f2eee8}
nav.tabs .tab.active,.tabs .tab.active{background:#d7191f!important;color:#fff!important;font-weight:900}
.card,.settings-page-head,.settings-section{border-color:var(--panel-border)}.card{margin-bottom:var(--page-gap)}
.section-heading{align-items:center}.section-heading h2{margin-bottom:0}.eyebrow{margin-bottom:6px}.muted{line-height:1.45}
input,select,textarea{min-height:46px;border-color:var(--control-border);background:var(--control-bg);transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}
textarea{min-height:88px}input:hover,select:hover,textarea:hover{border-color:var(--control-border-hover)}
input:focus,select:focus,textarea:focus{border-color:#a52a2a;box-shadow:0 0 0 2px rgba(215,25,31,.14)}
button,.file-btn{transition:background .12s ease,border-color .12s ease,opacity .12s ease,transform .06s ease}
button:hover,.file-btn:hover{border-color:#555}button:active{transform:translateY(1px)}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.48;cursor:not-allowed}
button:focus-visible,.file-btn:focus-within,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.primary-btn:hover{background:#ef2026}.secondary-btn:hover,.ghost:hover,.file-btn:hover{background:#202020}.danger-btn:hover{background:rgba(223,91,84,.22)}
.settings-save-bar{position:static;margin-top:0;background:#101010}.brand-footer{padding-left:0;padding-right:0}
@media(max-width:900px){main,.brand-footer{width:calc(100% - 28px)}.app-header{padding-left:14px;padding-right:14px}nav.tabs,.tabs{display:flex!important;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}nav.tabs::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}nav.tabs .tab,.tabs .tab{flex:1 0 118px;min-width:118px!important;scroll-snap-align:start}}
@media(max-width:620px){main,.brand-footer{width:calc(100% - 20px)}main{padding-top:12px;padding-bottom:54px}.app-header{padding-left:10px;padding-right:10px}nav.tabs,.tabs{margin:12px 0 14px!important}nav.tabs .tab,.tabs .tab{flex-basis:104px;min-width:104px!important;min-height:44px;font-size:.62rem!important}.card{padding:18px;margin-bottom:14px}.section-heading{align-items:flex-start}.hero{gap:14px}.hero-stats{gap:6px}.hero-stats div{padding:11px 9px}.hero-stats strong{font-size:1.12rem}.hero-stats span{font-size:.65rem}.settings-page{gap:12px}.settings-save-bar{display:grid}.settings-save-bar button{width:100%}}


/* MMXII v0.21.3 — Home + navigation + detail polish */

/* Navigation: stronger current-location cue without changing the MMXII red language */
nav.tabs .tab,.tabs .tab{position:relative}
nav.tabs .tab.active::after,.tabs .tab.active::after{
  content:"";position:absolute;left:18%;right:18%;bottom:0;height:2px;background:#fff;opacity:.72
}

/* Home: clearer hierarchy and tighter dashboard rhythm */
.mmxii-home{--home-surface:#080808}
.mmxii-home .home-hero{
  min-height:168px;
  padding:28px;
  align-items:center;
  background:linear-gradient(110deg,#090909 0%,#090909 72%,#0d0d0d 100%);
}
.mmxii-home .home-hero h1{font-size:clamp(2.5rem,5vw,4rem);line-height:.95;margin:.4rem 0 .65rem}
.mmxii-home .home-headline{margin:0;color:#9d9d9d}
.mmxii-home .home-state-badge{align-self:center;border:1px solid #333}
.mmxii-home .home-grid{gap:18px;margin-top:18px}
.mmxii-home .home-card{
  min-height:176px;
  padding:24px;
  background:var(--home-surface);
}
.mmxii-home button.home-card{
  position:relative;
  border-color:#303030;
  transition:border-color .14s ease,background .14s ease,transform .08s ease;
}
.mmxii-home button.home-card:hover{background:#0d0d0d;border-color:#565656;transform:translateY(-1px)}
.mmxii-home button.home-card:active{transform:translateY(0)}
.mmxii-home .home-big{margin:15px 0 8px;font-variant-numeric:tabular-nums}
.mmxii-home .home-link{margin-top:20px}
.mmxii-home .home-next{
  margin-top:18px;
  padding:24px;
  border-left:2px solid #d7191f;
}
.mmxii-home .home-next h2{font-size:1.45rem}
.mmxii-home .home-recent{margin-top:14px}
.mmxii-home .home-activity{padding:13px 0}
.mmxii-home .home-activity:first-child{border-top:0;padding-top:4px}
.mmxii-home .home-stats{margin:18px 0;gap:10px}
.mmxii-home .home-stats div{border:1px solid #1d1d1d;padding:16px}
.mmxii-home .home-stats b{font-variant-numeric:tabular-nums}
.mmxii-home .home-card>.secondary-btn{width:100%}

/* Detail dialogs: calmer chrome, stronger section separation, persistent actions */
dialog{
  border:1px solid #3a3a3a;
  box-shadow:0 28px 80px rgba(0,0,0,.68);
}
dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(2px)}
.roll-detail-dialog{width:min(920px,calc(100vw - 32px));max-height:calc(100vh - 28px);padding:0;overflow:hidden}
.roll-detail-dialog form{max-height:calc(100vh - 30px);overflow:auto;padding:20px;gap:14px}
.roll-detail-dialog .roll-detail-header{
  position:sticky;top:-20px;z-index:4;
  margin:-20px -20px 0;padding:20px;
  background:#062334;border-bottom:1px solid #315064;
}
.roll-detail-dialog .roll-detail-summary{padding:18px}
.roll-detail-dialog .roll-detail-section{padding:18px}
.roll-detail-dialog .roll-detail-section-head{margin-bottom:16px}
.roll-detail-dialog .roll-detail-section-head h3{font-size:1.18rem}
.roll-detail-dialog .roll-detail-summary-main>strong{font-size:1.45rem}
.roll-detail-dialog .actions:last-child{
  position:sticky;bottom:-20px;z-index:4;
  margin:0 -20px -20px;padding:14px 20px 20px;
  background:linear-gradient(180deg,rgba(6,35,52,.92),#062334 30%);
  border-top:1px solid #315064;
}
.icon-btn{min-width:42px;min-height:42px;display:grid;place-items:center}

@media(max-width:700px){
  .mmxii-home .home-hero{min-height:auto;padding:20px;align-items:flex-start}
  .mmxii-home .home-grid{gap:12px;margin-top:12px}
  .mmxii-home .home-card,.mmxii-home .home-next{padding:18px}
  .roll-detail-dialog{width:calc(100vw - 14px);max-height:calc(100vh - 14px)}
  .roll-detail-dialog form{max-height:calc(100vh - 16px);padding:14px}
  .roll-detail-dialog .roll-detail-header{top:-14px;margin:-14px -14px 0;padding:14px}
  .roll-detail-dialog .actions:last-child{bottom:-14px;margin:0 -14px -14px;padding:12px 14px 14px}
}


/* MMXII v0.21.4 — Process workspace polish */
.process-page .process-planner-card{
  padding:26px;
  background:#080808;
}
.process-page-heading{
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid #292929;
}
.process-page-heading h2{font-size:1.65rem}
.process-recipe-bar{
  width:100%;
  min-height:68px;
  margin-bottom:18px;
  padding:14px 16px;
  text-align:left;
  border:1px solid #3a3a3a;
  border-left:2px solid #d7191f;
  background:#050505;
}
.process-recipe-bar:hover{background:#0d0d0d;border-color:#565656;border-left-color:#ef2026}
.process-recipe-bar div{display:grid;gap:5px}
.process-recipe-bar span,
.next-roll-callout span,
.picker-heading span{
  color:#777;
  font:800 .59rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
}
.process-recipe-bar strong{font-size:1.05rem;color:#f2eee8}
.process-manual-fields{
  padding:18px;
  border:1px solid #292929;
  background:#050505;
}
.process-roll-guidance{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:14px 0;
}
.process-manual-note{margin:0!important;color:#888}
.process-roll-picker{
  margin-top:2px;
  padding:16px;
  border:1px solid #292929;
  background:#050505;
}
.picker-heading{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid #242424;
}
.next-roll-callout{
  display:grid;
  gap:6px;
  margin:18px 0 0;
  padding:15px 16px;
  border-left:2px solid #d7191f;
  background:#0b0b0b;
}
.next-roll-callout strong{font-size:1rem}
.process-calculation{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin:18px 0;
  border:1px solid #292929;
  background:#292929;
}
.process-calculation div{
  min-height:84px;
  padding:15px;
  border-radius:0;
  background:#070707;
}
.process-calculation .primary{
  border:0;
  background:#151010;
  box-shadow:inset 0 -2px 0 #d7191f;
}
.process-calculation span{
  color:#777;
  font:800 .58rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.process-calculation strong{
  margin-top:8px;
  font-size:1.25rem;
  font-variant-numeric:tabular-nums;
}
.process-page #processRecipeMeta{
  display:block;
  color:#777;
  margin-top:10px;
  line-height:1.45;
}
.process-page .notice{border-radius:0}
.process-page .timer-card{
  border-color:#383838;
  background:#070707;
}
.process-page .timer-display{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.055em;
}
.process-page .progress{border-radius:0}
.process-page .actions{align-items:center}

@media(max-width:820px){
  .process-calculation{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .process-page .process-planner-card{padding:18px}
  .process-page-heading{padding-bottom:14px;margin-bottom:14px}
  .process-manual-fields{padding:14px}
  .process-roll-guidance{align-items:stretch;flex-direction:column}
  .process-roll-guidance button{width:100%}
  .process-calculation{grid-template-columns:1fr 1fr}
  .process-calculation div{min-height:76px;padding:12px}
  .process-calculation strong{font-size:1.1rem}
}

/* MMXII v0.21.5 — Chemistry + Recipes polish */
.chemistry-page>.card,.recipes-page>.card{background:#080808}
.chemistry-page>.card{padding:24px}
.chemistry-page .section-heading,.recipes-page .section-heading{
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #292929
}
.chemistry-page .section-heading h2,.recipes-page .section-heading h2{font-size:1.55rem}
.chemistry-page #batchDetails{display:grid;gap:10px}
.chemistry-page #batchDetails>*{border-color:#303030}
.chemistry-page #batchArchive{gap:10px}
.chemistry-page #batchArchive>*{
  background:#060606;border-color:#303030;transition:border-color .14s ease,background .14s ease
}
.chemistry-page #batchArchive>*:hover{background:#0b0b0b;border-color:#505050}
.chemistry-page .detail-list strong,.chemistry-page .stack strong{font-variant-numeric:tabular-nums}
.chemistry-page .notice{border-radius:0;border-left-width:2px}

.recipes-page>.card{padding:24px}
.recipes-page #recipeList{gap:10px}
.recipes-page #recipeList>*{
  background:#060606;border-color:#303030;transition:border-color .14s ease,background .14s ease,transform .08s ease
}
.recipes-page #recipeList>*:hover{background:#0b0b0b;border-color:#505050;transform:translateY(-1px)}
.recipes-page #recipeList .secondary-btn{min-height:40px}
.recipes-page .tag,.recipes-page .chip{
  border-radius:0;border:1px solid #333;background:#090909;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace
}

/* Recipe editor polish */
#recipeDialog{
  border:1px solid #3a3a3a;box-shadow:0 28px 80px rgba(0,0,0,.68)
}
#recipeDialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(2px)}
#recipeDialog form{scrollbar-color:#526b78 #062334}
#recipeDialog .section-head{
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #315064
}
#recipeDialog .stage-card,#recipeDialog fieldset{border-color:#315064;background:#062334}
#recipeDialog .stage-card{padding:16px}
#recipeDialog input,#recipeDialog select,#recipeDialog textarea{background:#020202}
#recipeDialog input[type="number"]{font-variant-numeric:tabular-nums}
#recipeDialog .actions:last-child{
  position:sticky;bottom:0;z-index:4;padding-top:14px;background:#062334;border-top:1px solid #315064
}
@media(max-width:700px){
  .chemistry-page>.card,.recipes-page>.card{padding:17px}
  .recipes-page #recipeList>*{transform:none!important}
}


/* MMXII v0.21.6 — Rolls + Library polish */

/* ROLLS = working inventory */
.rolls-page>.card{
  padding:24px;
  background:#080808;
}
.rolls-page .section-heading{
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid #292929;
}
.rolls-page .section-heading h2{font-size:1.6rem}
.rolls-page .section-heading .muted{max-width:720px}

.rolls-page .roll-view-switch{
  margin:18px 0 14px;
  background:#252525;
  gap:1px;
  border-color:#303030;
}
.rolls-page .roll-view-btn{
  min-height:48px;
  background:#111;
  border:0;
  color:#888;
  font:800 .67rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.rolls-page .roll-view-btn:hover{background:#191919;color:#ddd}
.rolls-page .roll-view-btn.active{
  background:#d7191f;
  color:#fff;
}
.rolls-page .roll-view-btn.active::after{
  content:"";
  display:block;
  width:42px;
  height:2px;
  margin:7px auto -9px;
  background:#fff;
  opacity:.7;
}

.rolls-page .roll-toolbar{
  grid-template-columns:minmax(0,1fr) 240px;
  gap:10px;
  margin-top:0;
}
.rolls-page .roll-library-summary{
  min-height:44px;
  align-items:center;
  padding:12px 2px;
  border-bottom:1px solid #242424;
}
.rolls-page .roll-library-summary span{
  display:inline-flex;
  align-items:baseline;
  gap:3px;
}
.rolls-page .roll-library-summary b{
  font-variant-numeric:tabular-nums;
}
.rolls-page .roll-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.rolls-page .roll-library-card{
  display:flex;
  align-items:stretch;
  border:1px solid #303030;
  background:#060606;
  transition:border-color .14s ease,background .14s ease;
}
.rolls-page .roll-library-card:hover{
  border-color:#4d4d4d;
  background:#0a0a0a;
}
.rolls-page .roll-main{
  padding:17px 18px;
  gap:6px;
}
.rolls-page .roll-title-row{
  align-items:flex-start;
}
.rolls-page .roll-title-row>b{
  padding-top:2px;
}
.rolls-page .roll-main h3{
  margin:2px 0 0;
  font-size:1.1rem;
}
.rolls-page .roll-main .meta,
.rolls-page .roll-main p{
  color:#858585;
}
.rolls-page .roll-linkage{
  margin-top:3px;
  color:#aab6c4!important;
}
.rolls-page .roll-status{
  border:1px solid rgba(255,255,255,.08);
  padding:5px 8px;
}
.rolls-page .roll-card-actions{
  min-width:152px;
  padding:14px;
  border-left:1px solid #242424;
  background:#080808;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
}
.rolls-page .roll-card-actions button{
  width:100%;
  min-height:42px;
}

/* Empty workspace: make absence read as intentional rather than broken */
.rolls-page .roll-list>.muted:only-child,
.rolls-page .roll-list:empty::after{
  display:block;
  padding:28px 18px;
  border:1px dashed #303030;
  color:#777;
  background:#050505;
}
.rolls-page .roll-list:empty::after{
  content:"No rolls match this view.";
}

/* LIBRARY = permanent archive */
.library-page #historyContent{
  width:100%;
}
.library-page .library-foundation{
  padding:24px;
  border:1px solid #303030;
  background:#080808;
}
.library-page .library-title-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid #292929;
}
.library-page .library-title-row h2{
  margin:4px 0 5px;
  font-size:1.75rem;
}
.library-page .library-title-row p{
  margin:0;
  color:#888;
}
.library-page .library-tools{
  display:grid;
  grid-template-columns:minmax(280px,1.8fr) repeat(3,minmax(150px,1fr));
  gap:10px;
  margin-bottom:0;
}
.library-page .library-summary{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  min-height:48px;
  padding:13px 2px;
  color:#888;
  border-bottom:1px solid #242424;
}
.library-page .library-summary b{
  color:#f2eee8;
  font-size:1rem;
  font-variant-numeric:tabular-nums;
  margin-right:3px;
}
.library-page .library-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.library-page .library-card{
  padding:18px;
  border:1px solid #303030;
  background:#060606;
  transition:border-color .14s ease,background .14s ease,transform .08s ease;
}
.library-page .library-card:hover{
  border-color:#4d4d4d;
  background:#0a0a0a;
  transform:translateY(-1px);
}
.library-page .library-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.library-page .library-card-top>span{
  color:#d7191f;
  font:800 .62rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;
}
.library-page .library-card h3{
  margin:11px 0 4px;
  font-size:1.15rem;
}
.library-page .library-card>p{
  color:#8a8a8a;
  margin:2px 0;
}
.library-page .library-lifecycle{
  gap:1px;
  padding-top:0;
  margin-top:16px;
  border:1px solid #292929;
  background:#292929;
}
.library-page .library-lifecycle>div{
  border:0;
  padding:12px;
  background:#080808;
}
.library-page .library-lifecycle strong{
  font-variant-numeric:tabular-nums;
}
.library-page .library-card-actions{
  padding-top:14px;
  margin-top:0;
  border-top:0;
}
.library-page .library-card-actions .primary-btn{
  min-width:126px;
}
.library-page .library-empty{
  grid-column:1/-1;
  padding:32px 20px;
  border:1px dashed #303030;
  background:#050505;
  color:#777;
}

/* Shared status treatment keeps workflow states related across both views */
.roll-status,
.library-stage{
  font-style:normal;
  font:800 .58rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}

@media(max-width:980px){
  .library-page .library-tools{
    grid-template-columns:1fr 1fr;
  }
  .library-page .library-tools input{grid-column:1/-1}
}
@media(max-width:760px){
  .rolls-page>.card,
  .library-page .library-foundation{padding:17px}
  .rolls-page .roll-toolbar{grid-template-columns:1fr}
  .rolls-page .roll-library-card{flex-direction:column}
  .rolls-page .roll-card-actions{
    min-width:0;
    width:100%;
    padding:0 17px 17px;
    border-left:0;
    background:transparent;
    flex-direction:row;
  }
  .rolls-page .roll-card-actions button{flex:1}
  .library-page .library-title-row{align-items:stretch;flex-direction:column}
  .library-page .library-title-row button{width:100%}
  .library-page .library-tools{grid-template-columns:1fr}
  .library-page .library-tools input{grid-column:auto}
  .library-page .library-grid{grid-template-columns:1fr}
  .library-page .library-card{transform:none!important}
}
@media(max-width:480px){
  .rolls-page .roll-card-actions{flex-direction:column}
  .library-page .library-summary{gap:12px}
  .library-page .library-lifecycle{grid-template-columns:1fr}
  .library-page .library-card-actions{display:grid;grid-template-columns:1fr}
}


/* MMXII v0.21.7 — Insights + Settings micro-polish */

/* Fix lone archived DETAILS action stretching vertically. */
.rolls-page .roll-card-actions button{
  flex:0 0 auto!important;
  height:auto!important;
}
.rolls-page .roll-card-actions{
  align-items:stretch;
}

/* INSIGHTS — slightly more instrument-panel, less generic dashboard */
.insights-page>.insights-shell{
  padding:24px;
  background:#080808;
}
.insights-page>.insights-shell>.section-heading{
  padding-bottom:18px;
  margin-bottom:0;
  border-bottom:1px solid #292929;
}
.insights-page>.insights-shell>.section-heading h2{
  font-size:1.7rem;
}
.insights-page .insights-kpis{
  gap:1px;
  margin:18px 0;
  border:1px solid #292929;
  background:#292929;
}
.insights-page .insight-kpi{
  min-height:112px;
  border:0;
  background:#050505;
  padding:18px;
}
.insights-page .insight-kpi strong{
  font-size:2.15rem;
  font-variant-numeric:tabular-nums;
}
.insights-page .insight-kpi span{
  color:#858585;
  font:700 .67rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.insights-page .insights-grid{
  gap:10px;
}
.insights-page .insight-block{
  min-height:230px;
  padding:20px;
  border-color:#303030;
  background:#060606;
}
.insights-page .insight-block h3{
  margin:5px 0 18px;
  font-size:1.16rem;
}
.insights-page .insight-row{
  grid-template-columns:minmax(110px,1fr) 2fr 28px;
  gap:12px;
}
.insights-page .insight-row b{
  font-size:.78rem;
}
.insights-page .insight-bar{
  height:6px;
  background:#191919;
}
.insights-page .insight-bar i{
  background:#d7191f;
}
.insights-page .insight-row em{
  text-align:right;
  color:#aaa;
  font-size:.75rem;
}
.insights-page .insight-substats{
  gap:1px;
  border-top:1px solid #292929;
  border-left:1px solid #292929;
  background:#292929;
}
.insights-page .insight-substat{
  min-height:82px;
  padding:14px;
  border-top:0;
  background:#070707;
}
.insights-page .insight-substat b{
  font-size:1.45rem;
  font-variant-numeric:tabular-nums;
}
.insights-page .insight-substat span{
  display:block;
  margin-top:5px;
  line-height:1.35;
}
.insights-page .insight-empty{
  min-height:112px;
  display:grid;
  place-items:center;
  text-align:center;
  background:#050505;
}

/* SETTINGS — cleaner sequence and stronger separation of caution/destructive areas */
.settings-panel .settings-page{
  gap:12px;
}
.settings-panel .settings-page-head{
  padding:24px;
  background:#080808;
}
.settings-panel .settings-page-head h2{
  font-size:1.8rem;
}
.settings-panel .settings-section{
  position:relative;
  padding:22px 22px 22px 25px;
  border-color:#303030;
  background:#070707;
}
.settings-panel .settings-section::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  bottom:-1px;
  width:2px;
  background:#292929;
}
.settings-panel .settings-section-head{
  gap:12px;
  margin-bottom:16px;
}
.settings-panel .settings-section-head>span{
  min-width:24px;
  color:#d7191f;
}
.settings-panel .settings-section-head h3{
  font-size:1.18rem;
}
.settings-panel .settings-section label{
  gap:7px;
}
.settings-panel .settings-note{
  border-left-color:#555;
}
.settings-panel .settings-note-dev{
  border-left-color:#c49b38;
}
.settings-panel .account-card::before{
  background:#244d3b;
}
.settings-panel .account-card #syncStatus{
  color:#75cfa6;
}
.settings-panel .settings-save-bar{
  padding:16px 18px;
  border-color:#444;
  background:#0f0f0f;
  box-shadow:none;
}
.settings-panel .settings-save-bar strong{
  font-size:.86rem;
}
.settings-panel .settings-save-bar .primary-btn{
  min-width:160px;
}
.settings-panel .settings-safety{
  margin-top:0;
  border-color:#463a20;
  border-left:2px solid #a37b26;
}
.settings-panel #resetBtn{
  border-color:#713d3a;
}
.settings-panel #resetBtn:hover{
  border-color:#a6514c;
}

/* Compact account/data action groups without changing function. */
.settings-panel .account-actions,
.settings-panel .settings-section>.actions{
  gap:8px;
}
.settings-panel .file-btn{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Responsive detail */
@media(max-width:800px){
  .insights-page .insights-grid{grid-template-columns:1fr}
  .insights-page .insight-block{min-height:0}
}
@media(max-width:620px){
  .insights-page>.insights-shell{padding:17px}
  .insights-page .insights-kpis{grid-template-columns:1fr 1fr}
  .insights-page .insight-kpi{min-height:94px;padding:14px}
  .insights-page .insight-kpi strong{font-size:1.7rem}
  .insights-page .insight-row{grid-template-columns:minmax(90px,1fr) 1.3fr 24px}
  .settings-panel .settings-page-head{padding:18px}
  .settings-panel .settings-section{padding:17px 17px 17px 20px}
  .settings-panel .settings-save-bar{display:grid}
  .settings-panel .settings-save-bar .primary-btn{width:100%}
}


/* MMXII v0.21.8 — desktop QA fixes */
.process-recipe-bar small{
  display:block;
  margin-top:5px;
  color:#777;
  font:700 .67rem ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;
  line-height:1.3;
  text-transform:none;
}
.rolls-page .roll-card-actions>button:only-child{
  flex:0 0 44px!important;
  min-height:44px!important;
  height:44px!important;
  max-height:44px!important;
  align-self:center!important;
}


/* ============================================================
   MMXII v0.22.0 — Mobile + tablet ship-quality pass
   Narrow-screen overrides only. Desktop v0.21.8 is frozen.
   ============================================================ */

body.mmxii-drawer-open{overflow:hidden}

@media(max-width:900px){
  html{scroll-padding-top:12px}
  body{overflow-x:hidden}
  button,.file-btn,input,select{min-height:44px}

  /* Header */
  .app-header{
    min-height:76px;
    gap:12px;
  }
  .brand-lockup{min-width:0}
  .brand-icon{flex:0 0 auto}
  .header-account{margin-left:auto}
  .header-account-btn{white-space:nowrap}

  /* Hero chemistry health */
  main>.hero{
    grid-template-columns:1fr!important;
    gap:18px;
    padding:22px;
  }
  main>.hero>div:first-child{max-width:none}
  .hero-stats{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .hero-stats>div{
    min-width:0;
    padding:14px 12px;
  }
  .hero-stats strong{font-size:1.35rem}
  .hero-stats span{line-height:1.25}

  /* Primary nav: horizontally scrollable, active tab stays visible via JS */
  nav.tabs,.tabs{
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  nav.tabs .tab,.tabs .tab{
    flex:0 0 116px!important;
    min-width:116px!important;
    scroll-snap-align:center;
    touch-action:manipulation;
  }

  /* Common headings/actions */
  .section-heading,.section-head{
    gap:14px;
  }
  .section-heading h2,.section-head h2{line-height:1.08}

  /* Home */
  .mmxii-home .home-grid{grid-template-columns:1fr}
  .mmxii-home .home-card{min-height:0}
  .mmxii-home .home-next{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
  }

  /* Process */
  .process-page .process-manual-fields{grid-template-columns:1fr 1fr}
  .process-page .process-roll-guidance{gap:12px}
  .process-page .process-roll-picker{overflow:hidden}
  .process-page .process-roll-selection{min-width:0}
  .process-page .actions{flex-wrap:wrap}

  /* Chemistry + Recipes */
  .chemistry-page .detail-row{
    gap:16px;
  }
  .recipes-page #recipeList>*{
    gap:14px;
  }

  /* Library */
  .library-page .library-tools{
    grid-template-columns:1fr 1fr;
  }
  .library-page .library-tools input{
    grid-column:1/-1;
  }

  /* Settings */
  .settings-panel .grid.two{grid-template-columns:1fr 1fr}

  /* Account drawer */
  .account-drawer-panel{
    width:min(440px,100vw);
    max-width:100vw;
    padding-top:max(20px,env(safe-area-inset-top));
    padding-bottom:max(20px,env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* Phone */
@media(max-width:620px){
  body{font-size:15px}

  main,.brand-footer{width:calc(100% - 18px)}
  main{padding-bottom:max(48px,env(safe-area-inset-bottom))}

  /* Header: preserve the brand, don't let account shove it off-screen */
  .app-header{
    min-height:70px;
    padding-top:max(10px,env(safe-area-inset-top));
  }
  .brand-lockup{gap:9px}
  .brand-icon{width:46px;height:auto}
  .brand-lockup h1{font-size:1.55rem;letter-spacing:.17em}
  .brand-sub{font-size:.52rem;letter-spacing:.25em}
  .header-account-btn{
    min-width:0;
    padding:10px 11px;
    font-size:.59rem;
  }

  /* Global chemistry health */
  main>.hero{
    padding:18px;
    gap:16px;
  }
  main>.hero h2{font-size:1.55rem;line-height:1.08}
  main>.hero p{font-size:.92rem}
  .hero-stats{
    gap:1px;
    background:#252525;
    border:1px solid #252525;
  }
  .hero-stats>div{
    border:0!important;
    background:#050505;
    padding:12px 9px;
  }
  .hero-stats strong{font-size:1.15rem}
  .hero-stats span{font-size:.59rem}

  /* Nav */
  nav.tabs .tab,.tabs .tab{
    flex-basis:104px!important;
    min-width:104px!important;
    padding:11px 7px!important;
  }

  /* Home */
  .mmxii-home .home-hero{
    display:grid;
    grid-template-columns:1fr;
    padding:18px;
    gap:16px;
  }
  .mmxii-home .home-hero h1{
    font-size:clamp(2.3rem,13vw,3.25rem);
  }
  .mmxii-home .home-state-badge{
    justify-self:start;
  }
  .mmxii-home .home-next{
    grid-template-columns:1fr;
    gap:14px;
  }
  .mmxii-home .home-next .primary-btn{width:100%}
  .mmxii-home .home-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .mmxii-home .home-stats div{padding:12px 8px}

  /* Process is the key phone workflow: one clean vertical path */
  .process-page .process-planner-card{padding:16px}
  .process-page .process-manual-fields{
    grid-template-columns:1fr;
    padding:13px;
  }
  .process-page .process-recipe-bar{
    padding:13px;
  }
  .process-page .process-roll-guidance{
    flex-direction:column;
    align-items:stretch;
  }
  .process-page .process-roll-guidance button{width:100%}
  .process-page .picker-heading{
    align-items:center;
  }
  .process-page .process-calculation{
    grid-template-columns:1fr 1fr;
  }
  .process-page .process-calculation div{
    min-width:0;
  }
  .process-page .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .process-page .actions button{width:100%}
  .process-page .timer-display{font-size:clamp(4rem,22vw,7rem)}

  /* Chemistry */
  .chemistry-page>.card{padding:16px}
  .chemistry-page .section-heading{
    align-items:stretch;
    flex-direction:column;
  }
  .chemistry-page .section-heading .primary-btn{width:100%}
  .chemistry-page .detail-row{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    padding:13px 12px;
  }
  .chemistry-page #batchArchive>*{
    padding:14px;
  }

  /* Recipes */
  .recipes-page>.card{padding:16px}
  .recipes-page .section-head{
    align-items:stretch;
    flex-direction:column;
  }
  .recipes-page .section-head>.primary-btn{width:100%}
  .recipes-page #recipeList>*{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .recipes-page #recipeList .actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .recipes-page #recipeList .actions button{width:100%}

  /* Rolls */
  .rolls-page>.card{padding:16px}
  .rolls-page .section-heading{
    flex-direction:column;
    align-items:stretch;
  }
  .rolls-page .section-heading .primary-btn{width:100%}
  .rolls-page .roll-view-btn{
    min-height:46px;
  }
  .rolls-page .roll-library-summary{
    gap:10px 14px;
  }
  .rolls-page .roll-main{padding:15px}
  .rolls-page .roll-card-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    padding:0 15px 15px;
    gap:7px;
  }
  .rolls-page .roll-card-actions button,
  .rolls-page .roll-card-actions>button:only-child{
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
  }

  /* Library */
  .library-page .library-foundation{padding:16px}
  .library-page .library-title-row{
    gap:14px;
  }
  .library-page .library-tools{
    grid-template-columns:1fr;
  }
  .library-page .library-tools input{grid-column:auto}
  .library-page .library-summary{
    gap:10px 15px;
    font-size:.76rem;
  }
  .library-page .library-card{padding:15px}
  .library-page .library-lifecycle{
    grid-template-columns:1fr 1fr 1fr;
  }
  .library-page .library-lifecycle>div{padding:10px 8px}
  .library-page .library-lifecycle strong{font-size:.74rem}
  .library-page .library-card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .library-page .library-card-actions button{width:100%}

  /* Insights */
  .insights-page>.insights-shell{padding:16px}
  .insights-page .insights-kpis{
    grid-template-columns:1fr 1fr;
  }
  .insights-page .insight-kpi{min-height:90px}
  .insights-page .insight-row{
    grid-template-columns:minmax(86px,1fr) minmax(70px,1.15fr) 22px;
    gap:8px;
  }
  .insights-page .insight-row b{font-size:.71rem}
  .insights-page .insight-substats{grid-template-columns:1fr 1fr}

  /* Settings */
  .settings-panel .settings-page{gap:10px}
  .settings-panel .settings-page-head{padding:16px}
  .settings-panel .settings-section{padding:16px 15px 16px 18px}
  .settings-panel .grid.two{grid-template-columns:1fr}
  .settings-panel .settings-inline-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .settings-panel .settings-inline-actions button{width:100%}
  .settings-panel .account-actions,
  .settings-panel .settings-section>.actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .settings-panel .account-actions button,
  .settings-panel .settings-section>.actions>*{
    width:100%;
  }
  .settings-panel .settings-save-bar{
    padding:14px;
  }

  /* Footer */
  .brand-footer{
    gap:8px;
    flex-wrap:wrap;
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }
  .brand-footer small{
    width:100%;
    text-align:right;
  }

  /* Dialogs: behave like mobile sheets, with reachable controls/actions */
  dialog:not(.roll-detail-dialog){
    width:calc(100vw - 14px);
    max-width:calc(100vw - 14px);
    max-height:calc(100dvh - 14px);
    margin:auto;
    padding:0;
    overflow:hidden;
  }
  dialog:not(.roll-detail-dialog)>form{
    max-height:calc(100dvh - 16px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:16px;
    padding-bottom:max(16px,env(safe-area-inset-bottom));
  }
  dialog .dialog-header{
    position:sticky;
    top:-16px;
    z-index:8;
    margin:-16px -16px 14px;
    padding:16px;
    padding-top:max(16px,env(safe-area-inset-top));
    background:#062334;
    border-bottom:1px solid #315064;
  }
  dialog .grid.two{grid-template-columns:1fr}
  dialog .actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  dialog .actions button{width:100%}

  /* Recipe stages are too dense side-by-side on phones. */
  #recipeDialog .stage-card{padding:13px}
  #recipeDialog .stage-grid,
  #recipeDialog .grid.two{grid-template-columns:1fr!important}
  #recipeDialog .actions:last-child{
    bottom:-16px;
    margin:10px -16px -16px;
    padding:12px 16px max(16px,env(safe-area-inset-bottom));
  }

  /* Roll detail already has sticky chrome; finish safe-area/mobile treatment. */
  .roll-detail-dialog{
    width:calc(100vw - 8px);
    max-width:calc(100vw - 8px);
    max-height:calc(100dvh - 8px);
  }
  .roll-detail-dialog form{
    max-height:calc(100dvh - 10px);
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }
  .roll-detail-dialog .grid.two{grid-template-columns:1fr}
  .roll-detail-dialog .roll-detail-summary{
    grid-template-columns:1fr;
    gap:12px;
  }
  .roll-detail-dialog .roll-detail-status{justify-self:start}

  /* Account drawer becomes a true phone sheet. */
  .account-drawer-panel{
    width:100vw;
    max-width:100vw;
    min-height:100dvh;
    border-left:0;
    padding-left:18px;
    padding-right:18px;
  }
  .account-drawer-head{
    position:sticky;
    top:0;
    z-index:5;
    margin:-20px -18px 18px;
    padding:20px 18px 14px;
    padding-top:max(20px,env(safe-area-inset-top));
    background:#080808;
    border-bottom:1px solid #242424;
  }
  .account-drawer .account-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .account-drawer .account-actions button{width:100%}
}

/* Very narrow phones */
@media(max-width:390px){
  .brand-lockup h1{font-size:1.35rem}
  .brand-sub{font-size:.47rem}
  .brand-icon{width:41px}
  .header-account-btn{padding:9px;font-size:.54rem}
  .hero-stats span{font-size:.53rem}
  .mmxii-home .home-stats{grid-template-columns:1fr 1fr 1fr}
  .library-page .library-lifecycle{grid-template-columns:1fr}
  .library-page .library-card-actions{grid-template-columns:1fr}
  .insights-page .insights-kpis{grid-template-columns:1fr 1fr}
}


/* MMXII v0.22.9 — Closed beta authentication gate */
.beta-access-gate{
  display:none;
  position:fixed;
  inset:0;
  z-index:100000;
  overflow:auto;
  padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right))
          max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:#050505;
  align-items:center;
  justify-content:center;
}
body.auth-pending .beta-access-gate,
body.auth-locked .beta-access-gate{display:flex}

body.auth-pending > :not(.beta-access-gate),
body.auth-locked > :not(.beta-access-gate){
  visibility:hidden !important;
  pointer-events:none !important;
}

body.auth-pending,
body.auth-locked{overflow:hidden}

.beta-gate-card{
  width:min(520px,100%);
  border:1px solid #2c2c2c;
  background:#090909;
  padding:34px;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.beta-gate-brand{
  display:flex;
  align-items:center;
  gap:16px;
}
.beta-gate-skull{width:58px;height:58px;object-fit:contain}
.beta-gate-wordmark{
  color:#f3f0e8;
  font-family:Georgia,"Times New Roman",serif;
  font-size:30px;
  letter-spacing:.23em;
  line-height:1;
}
.beta-gate-sub{
  margin-top:8px;
  color:#c9c5bd;
  font-size:10px;
  font-weight:700;
  letter-spacing:.32em;
}
.beta-gate-rule{
  width:42px;
  height:2px;
  margin:28px 0;
  background:#df171d;
}
.beta-gate-card h1{
  margin:.25rem 0 .65rem;
  color:#f5f2eb;
  font-size:clamp(30px,7vw,46px);
  line-height:1.02;
}
.beta-gate-copy{
  max-width:42ch;
  margin:0 0 26px;
  color:#aaa69f;
  line-height:1.55;
}
.beta-gate-loading,
.beta-gate-status{
  color:#8e8b85;
  font-size:12px;
  letter-spacing:.08em;
}
.beta-gate-form{display:grid;gap:16px}
.beta-gate-form[hidden]{display:none}
.beta-gate-form label{
  display:grid;
  gap:8px;
  color:#bdb9b1;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.beta-gate-form input{
  width:100%;
  min-height:48px;
  border:1px solid #343434;
  background:#050505;
  color:#f2efe8;
  padding:12px 14px;
  font:inherit;
}
.beta-gate-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:4px;
}
.beta-gate-actions button{min-height:48px}
.beta-gate-status{
  min-height:18px;
  margin:0;
  text-transform:none;
  letter-spacing:0;
  line-height:1.45;
}
.beta-gate-status.error{color:#ff7b7b}
.beta-gate-status.success{color:#78d6a3}
.beta-gate-footer{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid #242424;
  color:#67645f;
  font-size:9px;
  letter-spacing:.18em;
}

@media (max-width:560px){
  .beta-access-gate{align-items:flex-start;padding-top:max(34px,env(safe-area-inset-top))}
  .beta-gate-card{padding:26px 22px}
  .beta-gate-actions{grid-template-columns:1fr}
}

/* v0.24.0 — Password recovery trigger. Additive only; does not alter any
   existing beta-gate rule above. */
.beta-gate-forgot{
  display:block;
  margin-top:14px;
  padding:0;
  border:0;
  background:none;
  color:#8e8b85;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.beta-gate-forgot:hover{color:#bdb9b1}
.beta-gate-forgot:disabled{opacity:.5;cursor:default}

/* ---------------------------------------------------------------------------
   v0.26.0 — admission gate
   The card now has one primary action instead of two, and gains a refusal
   panel shown when a signed-in account isn't admitted to the beta.
   FORGOT PASSWORD? stays exactly where it was.
   --------------------------------------------------------------------------- */
.beta-gate-actions.single{grid-template-columns:1fr}
.beta-gate-denied{display:grid;gap:16px}
.beta-gate-denied[hidden]{display:none}
.beta-gate-card > .beta-gate-status{margin-top:18px}