:root{
  --bg:#070405; --panel:#120a0d; --panel2:#180d10; --border:#33151a; --border-soft:#241014;
  --crimson:#e01124; --crimson-dark:#a30014; --ivory:#f5ecd9; --muted:#b3a284; --gold:#d8a84e;
  --radius:14px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ivory);
  font-family:"Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  min-height:100vh; overflow-x:hidden;
}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
button{font:inherit; cursor:pointer}
input,select{font:inherit}
h1{font-size:2rem; margin:.2rem 0 1rem; font-weight:700}
h2{font-size:1.25rem; margin:0 0 .7rem}
.muted{color:var(--muted)} .small{font-size:.85rem}
.form-error{color:#ff7b8a; font-size:.9rem}

/* smoke */
.smoke{position:fixed; top:0; bottom:0; width:180px; pointer-events:none; z-index:0; opacity:.5;
  background:radial-gradient(ellipse at center, rgba(160,20,40,.20), transparent 65%); filter:blur(28px)}
.smoke-left{left:-70px} .smoke-right{right:-70px}
body.quiet .smoke{display:none}

/* gates (login / lock) */
.gate-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; position:relative; z-index:2}
.gate-card{background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:2rem; width:min(420px,100%); box-shadow:0 20px 60px rgba(0,0,0,.6)}
.gate-form{display:flex; flex-direction:column; gap:.45rem; margin-top:1rem}
.gate-form label{font-size:.9rem; color:var(--muted)}
.gate-form input{background:#0b0608; border:1px solid var(--border); border-radius:9px; color:var(--ivory); padding:.65rem .8rem}
.gate-foot{text-align:center; color:var(--muted); font-size:.8rem; letter-spacing:.14em; margin-top:1.2rem}
.preview-banner{background:#3a2a05; border:1px solid var(--gold); color:#ffe1a1; border-radius:9px; padding:.6rem .8rem; font-size:.85rem; margin-top:1rem}

/* brand */
.brand-lockup{display:flex; flex-direction:column; line-height:.95; border-left:4px solid var(--crimson); padding-left:.7rem}
.brand-bay9{font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:1.7rem; letter-spacing:.06em; color:var(--ivory)}
.brand-undermesh{font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:1.7rem; letter-spacing:.06em; color:var(--crimson)}
.tagline{font-family:Georgia,"Times New Roman",serif; font-style:italic; color:var(--ivory); opacity:.92}
.badge-permanent{border:1.5px solid var(--crimson); color:var(--ivory); border-radius:999px; padding:.45rem 1rem; font-size:.85rem; letter-spacing:.12em; white-space:nowrap}

/* shell */
#shell{position:relative; z-index:1; max-width:1560px; margin:0 auto; padding:1rem 1.2rem 0}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.4rem 0 1rem}
.tagline-top{font-size:clamp(1rem,2.2vw,1.5rem); margin:0; text-align:center; flex:1}
.layout{display:grid; grid-template-columns:250px minmax(0,1fr); gap:1.1rem; align-items:start}

/* sidebar */
.sidebar{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:.9rem; display:flex; flex-direction:column; gap:1rem}
.main-nav{display:flex; flex-direction:column; gap:.25rem}
.nav-item{display:flex; align-items:center; gap:.7rem; background:none; border:none; color:var(--ivory); text-align:left; padding:.65rem .8rem; border-radius:10px; font-size:1.05rem}
.nav-item:hover{background:#1d0f13}
.nav-item.is-active{background:linear-gradient(180deg,#f11630,var(--crimson-dark)); font-weight:600}
.ic{width:20px; height:20px; flex:none}
.display-box h3{margin:.2rem 0 .5rem; font-size:1rem}
.display-toggle{display:flex; gap:.5rem}
.mode-btn{flex:1; background:#241318; color:var(--ivory); border:1px solid var(--border); border-radius:9px; padding:.5rem .4rem}
.mode-btn.is-active{background:linear-gradient(180deg,#f11630,var(--crimson-dark)); border-color:var(--crimson); font-weight:600}
.account-box{border-top:1px solid var(--border-soft); padding-top:.8rem; display:flex; flex-direction:column; gap:.3rem}
.account-user{display:flex; align-items:center; gap:.6rem; margin:0 0 .3rem; font-size:1.05rem}
.account-action{display:flex; align-items:center; gap:.6rem; background:none; border:none; color:var(--ivory); padding:.45rem .4rem; text-align:left; border-radius:8px}
.account-action:hover{background:#1d0f13}

/* main + home grid */
.main{min-width:0}
.home-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.1rem; align-items:start}
.home-center,.home-right{display:flex; flex-direction:column; gap:1rem; min-width:0}
.search-wrap{position:relative}
.search-wrap input{width:100%; background:#0d0709; border:1px solid var(--border); border-radius:12px; color:var(--ivory); padding:.8rem 1rem .8rem 2.7rem; font-size:1rem}
.search-ic{position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--muted)}
.search-results{position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--panel2); border:1px solid var(--border); border-radius:12px; padding:.6rem; z-index:30; max-height:50vh; overflow:auto}
.search-results h4{margin:.4rem .4rem .2rem; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em}
.search-hit{display:block; width:100%; text-align:left; background:none; border:none; color:var(--ivory); padding:.5rem .6rem; border-radius:8px}
.search-hit:hover{background:#241318}
.action-row{display:flex; gap:.9rem; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:.55rem; border-radius:10px; padding:.7rem 1.2rem; border:1px solid transparent; color:var(--ivory); text-decoration:none; font-size:1rem}
.btn-primary{background:linear-gradient(180deg,#f11630,var(--crimson-dark)); font-weight:600; flex:1; justify-content:center; min-width:180px}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{background:#241318; border-color:var(--border)}
.btn-wide{width:100%; justify-content:center; margin-top:.6rem}
.file-label{cursor:pointer}

/* app cards */
.app-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
.app-card{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:1rem; display:flex; flex-direction:column; gap:.45rem}
.app-card-head{display:flex; gap:.7rem; align-items:center}
.app-icon{width:46px; height:46px; border-radius:12px; background:linear-gradient(180deg,#f11630,var(--crimson-dark)); display:flex; align-items:center; justify-content:center; flex:none}
.app-icon .ic{width:26px; height:26px}
.app-card h3{margin:0; font-size:1.1rem; line-height:1.15}
.status-line{display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.92rem; margin:0}
.dot{width:9px; height:9px; border-radius:50%; background:#8b7d63; flex:none}
.dot.ok{background:#57d977} .dot.warn{background:#ffb020} .dot.bad{background:#e01124}
.app-card .btn{margin-top:auto}

/* panels */
.panel{background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:1rem 1.1rem}
.conn-row{display:flex; align-items:center; gap:.6rem; padding:.35rem 0}
.conn-row .grow{flex:1}
.pill{font-size:.75rem; padding:.22rem .6rem; border-radius:999px; background:#241318; border:1px solid var(--border); color:var(--muted); white-space:nowrap}
.pill.ok{color:#8ff0a4; border-color:#1d4d2a}
.pill.warn{color:#ffd27a; border-color:#5c4305}
.activity-item{display:flex; gap:.6rem; padding:.35rem 0; border-bottom:1px solid #1c0d11; font-size:.92rem}
.activity-item:last-child{border-bottom:none}
.activity-item time{color:var(--muted); font-size:.78rem; white-space:nowrap}

/* zipper band */
.zipper-band{position:relative; margin:.4rem -1.2rem .2rem; line-height:0}
.zipper-art{width:100%; height:auto; display:block}
.crow-art{position:absolute; left:16%; top:-38px; width:118px; height:auto}
body.quiet .zipper-band{margin:.4rem 0}
body.quiet .zipper-art{opacity:.14; filter:grayscale(.6)}
body.quiet .crow-art{display:none}

/* files */
.files-panel{margin-top:.6rem}
.breadcrumbs{display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin:.2rem 0 .4rem}
.crumb{background:none; border:none; color:var(--ivory); font-size:1.02rem; padding:.15rem .3rem; border-radius:6px}
.crumb:hover{background:#1d0f13}
.crumb.current{color:var(--crimson); font-weight:700}
.crumb-sep{color:var(--muted)}
.folder-kind-note{color:var(--muted); font-size:.82rem; margin:.1rem 0 .6rem}
.file-row{display:flex; align-items:center; gap:.8rem; padding:.6rem .4rem; border-top:1px solid #1c0d11}
.file-row:first-child{border-top:none}
.folder-ic{color:var(--gold); width:24px; height:24px; flex:none}
.file-ic{color:var(--muted); width:22px; height:22px; flex:none}
.file-main{flex:1; min-width:0}
.file-title{font-size:1.02rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.file-sub{color:var(--muted); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.btn-open{background:#241318; border:1px solid var(--border); color:var(--ivory); border-radius:9px; padding:.5rem 1rem; display:inline-flex; gap:.45rem; align-items:center}
.btn-open:hover{background:#2e181e}

/* generic views */
.view .panel{margin-bottom:1rem}
.inline-form{display:grid; grid-template-columns:180px minmax(0,1fr); gap:.6rem .9rem; align-items:center; background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:1rem 1.1rem; margin-bottom:1rem}
.inline-form input{background:#0b0608; border:1px solid var(--border); border-radius:9px; color:var(--ivory); padding:.6rem .8rem}
.inline-form .btn{grid-column:2; justify-self:start}
.project-row{display:flex; gap:.8rem; align-items:center; width:100%; text-align:left; background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:.9rem 1.1rem; color:var(--ivory); margin-bottom:.7rem}
.project-row:hover{border-color:var(--crimson)}
.project-row .grow{flex:1}

/* modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:50}
.modal{background:var(--panel2); border:1px solid var(--border); border-radius:16px; padding:1.4rem; width:min(560px,100%); max-height:90vh; overflow:auto}
.modal form{display:flex; flex-direction:column; gap:.4rem}
.modal label{font-size:.9rem; color:var(--muted); margin-top:.4rem}
.modal input,.modal select{background:#0b0608; border:1px solid var(--border); border-radius:9px; color:var(--ivory); padding:.6rem .8rem}
.modal-actions{display:flex; gap:.8rem; justify-content:flex-end; margin-top:1.1rem}
.modal-actions .btn{flex:none; min-width:0}

/* toast */
.toast{position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); background:#1d2b1d; border:1px solid #2f6b3a; color:#c9f5d2; padding:.7rem 1.2rem; border-radius:10px; z-index:60; max-width:92vw}
.toast.error{background:#3a1218; border-color:#7c1d28; color:#ffc4cb}

.site-footer{text-align:center; padding:1.4rem 0 1.6rem; letter-spacing:.35em; font-weight:600; color:var(--ivory)}
.site-footer span{border-top:1px solid var(--crimson-dark); padding-top:.9rem; display:inline-block; min-width:min(520px,80%)}

/* responsive */
@media (max-width:1120px){
  .home-grid{grid-template-columns:minmax(0,1fr)}
  .home-right{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:start}
}
@media (max-width:820px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{order:2}
  .main-nav{flex-direction:row; flex-wrap:wrap}
  .nav-item{flex:1 1 30%; justify-content:center}
  .app-cards{grid-template-columns:minmax(0,1fr)}
  .tagline-top{display:none}
  .crow-art{width:84px; top:-26px; left:8%}
  .zipper-band{margin:.4rem -.4rem}
  .inline-form{grid-template-columns:minmax(0,1fr)}
  .inline-form .btn{grid-column:1}
  #shell{padding:.7rem .7rem 0}
}

/* Video Vault bookcase (2026-11-13) — the shelf's furniture in UNDERMESH's
   palette: numbered bookcase sections, one master per row. */
.vault-case{margin-bottom:1rem}
.vault-case h2{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.vault-no{font-family:"Courier New",monospace; color:var(--crimson); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase}
#view-vault .search-wrap{margin:1rem 0}
#vault-summary{margin-bottom:1rem}
#vault-summary a{color:var(--gold)}

/* gated build + vault play previews (2026-11-13) */
.btn-play{white-space:nowrap}
.vault-player{padding:.2rem .4rem .8rem}
.vault-player video{width:100%; max-height:60vh; background:#000; border-radius:10px; display:block}
.gate-form label{display:block; margin:.6rem 0; font-size:.9rem}
.gate-form input{display:block; width:100%; margin-top:.3rem; padding:.55rem .7rem; border-radius:9px; border:1px solid var(--border); background:#1a0f13; color:var(--ivory)}
.gate-error{color:#ff9c9c; font-size:.9rem}

/* home computer door (2026-11-14): the connect panel's command line.
   Everything else in the view reuses .panel / .conn-row / .pill as-is.
   NOTE: the BAY9-UNDERLAY film block that used to sit here was removed
   with the underlay itself (Vinny's strip order, 2026-11-14) — the
   pre-strip sheet is styles.css_underlay_20261114-033900.bak. */
#machines-connect code{font-size:.95rem; padding:.3rem .55rem; border-radius:8px; border:1px solid var(--border); background:#1a0f13; color:var(--ivory)}