.mfa-qr-wrap{
  background:#fff;
  padding:14px;
  border-radius:16px;
  width:fit-content;
  margin:14px 0;
}

.mfa-qr{
  width:220px;
  height:220px;
  display:block;
}

  /* ── ONBOARDING MODAL ── */
.onboard-overlay{
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.onboard-overlay.hidden{
  display:none!important;
}

.onboard-modal{
  width:560px;
  max-width:94vw;
  max-height:90vh;
  overflow-y:auto;
  background:var(--s1);
  border:1px solid var(--bh);
  border-radius:20px;
  box-shadow:0 40px 100px rgba(0,0,0,0.65);
}

.onboard-step{
  display:none;
  padding:40px;
}

.onboard-step.active{
  display:block;
}

.onboard-progress{
  display:flex;
  gap:4px;
  margin-bottom:28px;
}

.onboard-pip{
  height:3px;
  flex:1;
  border-radius:2px;
  background:var(--border);
}

.onboard-pip.done{
  background:var(--accent);
}

.onboard-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
}

.onboard-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:38px;
  line-height:1;
  color:var(--text);
  margin-bottom:10px;
}

.onboard-sub{
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:var(--muted2);
  line-height:1.8;
  margin-bottom:28px;
}

.onboard-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:24px;
}

.onboard-card{
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  cursor:pointer;
}

.onboard-card:hover,
.onboard-card.selected{
  border-color:var(--accent);
  background:var(--adim);
}

.onboard-card-icon{
  font-size:22px;
  margin-bottom:8px;
}

.onboard-card-title{
  font-family:'Syne',sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  margin-bottom:3px;
}

.onboard-card-desc{
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:var(--muted2);
  line-height:1.6;
}

.onboard-btns{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.onboard-btn-skip{
  padding:10px 18px;
  border-radius:9px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted2);
  font-family:'Syne',sans-serif;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}

.onboard-btn-next{
  padding:10px 22px;
  border-radius:9px;
  background:var(--accent);
  border:none;
  color:#060608;
  font-family:'Syne',sans-serif;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.onboard-drop-zone{
  border:2px dashed var(--bh);
  border-radius:12px;
  padding:32px;
  text-align:center;
  cursor:pointer;
  margin-bottom:16px;
}

.onboard-drop-zone:hover,
.onboard-drop-zone.drag-over{
  border-color:var(--accent);
  background:var(--adim);
}

.onboard-stack-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:20px;
}

.onboard-stack{
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  cursor:pointer;
}

.onboard-stack:hover,
.onboard-stack.selected{
  border-color:var(--accent);
  background:var(--adim);
}

.onboard-stack-name{
  font-family:'Syne',sans-serif;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}

.onboard-stack-apps{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}

.onboard-stack-app{
  font-family:'DM Mono',monospace;
  font-size:8px;
  color:var(--muted2);
  background:var(--s3);
  border-radius:4px;
  padding:2px 6px;
}

@media(max-width:600px){
  .onboard-step{padding:26px;}
  .onboard-cards,
  .onboard-stack-grid{
    grid-template-columns:1fr;
  }
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0a0a0c;--s1:#111114;--s2:#18181c;--s3:#222228;
  --border:rgba(255,255,255,0.05);--bh:rgba(255,255,255,0.11);
  --text:#eeecea;--muted:#54545a;--muted2:#888892;
  --accent:#38BDF8;--adim:rgba(56,189,248,0.07);--adim2:rgba(56,189,248,0.13);
  --ab:rgba(56,189,248,0.22);
  --app-tile-size:88px;
  --app-icon-size:46px;
  --app-icon-inner:28px;
  --ease:cubic-bezier(0.23,1,0.32,1);
}
html.light{
  --bg:#f0f0ed;--s1:#ffffff;--s2:#f5f5f2;--s3:#e8e8e4;
  --border:rgba(0,0,0,0.08);--bh:rgba(0,0,0,0.15);
  --text:#18181c;--muted:#9a9a9a;--muted2:#555560;
  --accent:#0284C7;--adim:rgba(2,132,199,0.07);--adim2:rgba(2,132,199,0.13);
  --ab:rgba(2,132,199,0.25);
}
html.light body::before{opacity:0.12;}
html.light .topbar{background:rgba(240,240,237,0.92);}
html.light .recent-strip{background:var(--s1);}
html.light .recent-strip::after{background:linear-gradient(to right,transparent,var(--s1));}
html{scroll-behavior:smooth;}
body{font-family:'Syne',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background-color 0.35s var(--ease), color 0.35s var(--ease);}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");opacity:0.4;pointer-events:none;z-index:0;transition:opacity 0.35s var(--ease);}
.topbar, .nav-pills, .nav-pill, .search-wrap input, .profile-card, .stack-card, .modal, .app-tile, .add-tile, .theme-option, .cats-list-row, .prompt-textarea, .data-btn, .btn-x, .btn-s, .toast, .moverlay, .tile-ctx, .cat-tab, .cat-label-text{
  transition:background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-thumb{background:#222;border-radius:3px;}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;height:56px;padding:0 28px;gap:12px;background:rgba(10,10,12,0.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.logo-wordmark{font-family:'Syne',sans-serif;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.4px;}
.logo-wordmark span{color:var(--accent);}
.topbar-mid{flex:1;display:flex;justify-content:center;}
.nav-pills{display:flex;align-items:center;gap:2px;background:var(--s2);border:1px solid var(--border);border-radius:11px;padding:3px;}
.nav-pill{padding:5px 13px;border-radius:8px;font-size:11px;font-weight:500;color:var(--muted2);cursor:pointer;transition:all 0.18s var(--ease);white-space:nowrap;border:none;background:none;font-family:'Syne',sans-serif;}
.nav-pill:hover{color:var(--text);background:var(--s3);}
.nav-pill.active{background:var(--accent);color:#0a0a0c;font-weight:700;}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.search-wrap{position:relative;}
.search-wrap input{background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:6px 30px 6px 32px;width:190px;color:var(--text);font-family:'DM Mono',monospace;font-size:11px;outline:none;transition:all 0.2s var(--ease);}
.search-wrap input:focus{border-color:var(--ab);width:230px;background:var(--s1);}
.search-wrap input::placeholder{color:var(--muted);}
.si{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:11px;pointer-events:none;}
.sk{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:'DM Mono',monospace;font-size:8px;background:var(--s3);border:1px solid var(--bh);color:var(--muted);padding:1px 4px;border-radius:3px;pointer-events:none;}
.theme-btn{width:32px;height:32px;border-radius:8px;background:var(--s2);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:background 0.2s,border-color 0.2s,transform 0.15s var(--ease);}
.theme-btn:hover{background:var(--s3);border-color:var(--bh);transform:scale(1.07);}

/* ── RECENT STRIP ── */
.recent-strip{display:flex;align-items:center;padding:0 28px;height:42px;border-bottom:1px solid var(--border);background:var(--s1);overflow:hidden;position:relative;z-index:40;}
.recent-strip::after{content:'';position:absolute;right:0;top:0;bottom:0;width:60px;background:linear-gradient(to right,transparent,var(--s1));pointer-events:none;}
.rl{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);white-space:nowrap;margin-right:14px;flex-shrink:0;}
.rdiv{width:1px;height:14px;background:var(--border);margin-right:14px;flex-shrink:0;}
.rpills{display:flex;gap:4px;overflow:hidden;align-items:center;flex:1;}
.rpill{display:flex;align-items:center;gap:5px;background:var(--adim);border:1px solid var(--ab);border-radius:6px;padding:3px 9px;cursor:pointer;text-decoration:none;color:var(--accent);font-family:'DM Mono',monospace;font-size:10px;white-space:nowrap;transition:background 0.15s,transform 0.12s;flex-shrink:0;}
.rpill:hover{background:var(--adim2);transform:translateY(-1px);}
.rpill img{width:11px;height:11px;border-radius:2px;}
.rpill .rc{font-size:8px;opacity:0.55;}
.rempty{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);}

/* ── PAGE LAYOUT ── */
.page{position:relative;z-index:1;}
.section{padding:36px 28px 0;}
.section:last-child{padding-bottom:100px;}
.sec-divider{height:1px;background:linear-gradient(to right,transparent,var(--border) 20%,var(--border) 80%,transparent);margin:36px 28px 0;}
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.sh-label{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);}
.sh-title{font-family:'DM Mono',monospace;font-size:24px;font-weight:700;letter-spacing:-0.5px;color:#ffffff;}
.sh-count{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);}
.sh-spacer{flex:1;}
.sh-btn{background:var(--accent);border:none;color:#0a0a0c;font-family:'Syne',sans-serif;font-size:11px;font-weight:700;padding:6px 14px;border-radius:7px;cursor:pointer;transition:opacity 0.15s,transform 0.15s;flex-shrink:0;}
.sh-btn:hover{opacity:0.82;transform:scale(1.03);}
.sh-btn.ghost{background:var(--s2);border:1px solid var(--bh);color:var(--muted2);font-weight:600;}
.sh-btn.ghost:hover{opacity:1;border-color:var(--ab);color:var(--accent);transform:scale(1.03);}

/* ── APP TILES ── */
.dock-grid{display:flex;flex-wrap:wrap;padding:4px 0;}
.app-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 9px;border-radius:14px;cursor:pointer;text-decoration:none;color:var(--text);transition:background 0.15s;width:var(--app-tile-size);flex-basis:var(--app-tile-size);flex-shrink:0;position:relative;overflow:hidden;}
.app-tile:hover{background:transparent;}
.icon-wrap{width:var(--app-icon-size);height:var(--app-icon-size);border-radius:12px;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform 0.25s var(--ease),border-color 0.2s;flex-shrink:0;}
.app-tile:hover .icon-wrap{border-color:var(--bh);transform:scale(1.16);}
.icon-wrap img{width:var(--app-icon-inner);height:var(--app-icon-inner);object-fit:contain;}
.icon-wrap .il{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;color:var(--accent);}
.t-name{font-size:9.5px;font-weight:500;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;color:var(--muted2);transition:color 0.15s;}
.app-tile:hover .t-name{color:var(--text);}
.app-tile::after{content:attr(data-name);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--s3);border:1px solid var(--bh);color:var(--text);font-family:'DM Mono',monospace;font-size:9px;padding:3px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.15s,transform 0.15s;z-index:20;}
.app-tile:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}
.add-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 9px;border-radius:14px;cursor:pointer;width:var(--app-tile-size);flex-basis:var(--app-tile-size);flex-shrink:0;border:none;background:none;color:var(--muted);transition:color 0.15s;}
.add-tile:hover{color:var(--text);}
.add-tile .icon-wrap{background:none;border:1.5px dashed rgba(255,255,255,0.09);transition:border-color 0.15s,transform 0.2s var(--ease);}
.add-tile:hover .icon-wrap{border-color:var(--bh);transform:scale(1.07);}
.add-tile .t-name{font-family:'DM Mono',monospace;font-size:9.5px;}
html.light .add-tile .icon-wrap{border-color:rgba(0,0,0,0.1);}

/* ── CATEGORY BLOCKS ── */
.cat-block{margin-bottom:28px;}
.cat-block-label{margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.cat-block-label::after{content:'';flex:1;height:1px;background:var(--border);}
.cat-label-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.cat-label-text{font-family:'DM Mono',monospace;display:inline-flex;align-items:center;padding:3px 6px;background:none;border:none;border-radius:6px;color:#ffffff;font-weight:700;font-size:13px;cursor:pointer;transition:all 0.12s var(--ease);}
.cat-label-text:hover{transform:translateY(-1px);} 
.cat-edit-btn{font-family:'DM Mono',monospace;font-size:8px;color:var(--muted);background:none;border:none;cursor:pointer;padding:1px 5px;border-radius:3px;opacity:0;transition:opacity 0.15s,color 0.15s;flex-shrink:0;}
.cat-block:hover .cat-edit-btn{opacity:1;}
.cat-edit-btn:hover{color:var(--accent);}
.cat-delete-btn{font-family:'DM Mono',monospace;font-size:8px;color:var(--muted);background:none;border:none;cursor:pointer;padding:1px 5px;border-radius:3px;opacity:0;transition:opacity 0.15s,color 0.15s;flex-shrink:0;}
.cat-block:hover .cat-delete-btn{opacity:1;}
.cat-delete-btn:hover{color:#ff6b6b;}

/* ── CAT TABS ── */
.cat-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:16px;}
.cat-tab{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:0.6px;text-transform:uppercase;padding:7px 14px;border-radius:12px;background:var(--s2);border:1px solid var(--border);color:var(--muted2);cursor:pointer;transition:all 0.18s var(--ease);}
.cat-tab:hover{border-color:var(--bh);color:var(--text);transform:translateY(-2px);}
.cat-tab.active{background:var(--accent);border-color:var(--ab);color:#0a0a0c;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,0.45);} 

/* ── STACKS ── */
.stacks-flow{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;}
.stack-card{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:20px;transition:border-color 0.2s,background 0.2s,transform 0.2s var(--ease);}
.stack-card:hover{border-color:var(--bh);background:var(--s2);transform:translateY(-2px);}
.stack-card.feat{border-color:var(--ab);background:var(--adim);}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:7px;gap:8px;}
.sc-title{font-size:13px;font-weight:600;letter-spacing:-0.2px;line-height:1.3;}
.sc-tag{font-family:'DM Mono',monospace;font-size:8px;background:var(--s3);border:1px solid var(--bh);color:var(--muted2);padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:1px;flex-shrink:0;white-space:nowrap;}
.stack-card.feat .sc-tag{background:var(--adim2);border-color:var(--ab);color:var(--accent);}
.sc-desc{font-size:11px;color:var(--muted2);line-height:1.55;margin-bottom:14px;font-family:'DM Mono',monospace;font-weight:300;}
.sc-icons{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap;}
.sc-icon{width:22px;height:22px;border-radius:5px;border:1px solid var(--border);background:var(--s2);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.sc-icon img{width:14px;height:14px;object-fit:contain;}
.sc-foot{display:flex;align-items:center;}
.imp-btn{margin-left:auto;background:var(--accent);border:none;color:#0a0a0c;font-family:'Syne',sans-serif;font-size:10px;font-weight:700;padding:5px 13px;border-radius:6px;cursor:pointer;transition:opacity 0.15s,transform 0.15s;}
.imp-btn:hover{opacity:0.82;transform:scale(1.04);}

/* ── PROFILE ── */
/* ── PROFILE LAYOUT ────────────────────────────────────── */
.profile-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}
.profile-card{
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
  transition:border-color 0.2s,box-shadow 0.2s;
  position:relative;
  overflow:hidden;
}
.profile-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,0.018) 0%,transparent 60%);
  pointer-events:none;
}
.profile-card:hover{border-color:var(--bh);box-shadow:0 8px 32px rgba(0,0,0,0.18);}
.profile-card.wide{grid-column:1/-1;}

/* ── CARD LABEL ────────────────────────────────────────── */
.pc-label{
  font-family:'DM Mono',monospace;
  font-size:8px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.pc-label::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
}

/* ── STATS ─────────────────────────────────────────────── */
.pc-stat-row{display:flex;gap:0;flex-wrap:wrap;}
.pc-stat-row > div{
  flex:1;
  min-width:80px;
  padding:14px 0;
  border-right:1px solid var(--border);
  padding-right:20px;
  margin-right:20px;
}
.pc-stat-row > div:last-child{border-right:none;padding-right:0;margin-right:0;}
.pc-stat-n{
  font-family:'Syne',sans-serif;
  font-size:32px;
  font-weight:800;
  color:var(--text);
  line-height:1;
  letter-spacing:-1px;
}
.pc-stat-l{
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  margin-top:6px;
  text-transform:uppercase;
}
.pc-stat-accent{color:var(--accent);}

/* ── DATA ACTIONS ──────────────────────────────────────── */
.data-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;}
.data-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted2);
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.5px;
  padding:8px 16px;
  border-radius:9px;
  cursor:pointer;
  transition:all 0.15s;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.data-btn:hover{border-color:var(--ab);color:var(--accent);background:var(--adim);}
.data-btn.danger{border-color:transparent;}
.data-btn.danger:hover{border-color:rgba(255,90,90,0.3);color:#ff5a5a;background:rgba(255,90,90,0.06);}

/* ── Solid (no-border) button variants — Legal & Billing actions ── */
.data-btn.solid{border:none;background:var(--s2);color:var(--text);font-weight:600;}
.data-btn.solid:hover{background:var(--s3);color:var(--text);}
.data-btn.solid.accent{background:var(--accent);color:#041018;font-weight:800;}
.data-btn.solid.accent:hover{filter:brightness(1.08);}
.data-btn.solid.danger-solid{background:#ff5a5a;color:#1a0505;font-weight:800;}
.data-btn.solid.danger-solid:hover{filter:brightness(1.08);}

/* ── App footer bar — fixed strip at the bottom of the app ── */
#app-shell main{padding-bottom:42px;}
.app-footer-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;padding:8px 16px;
  background:var(--s1);border-top:1px solid var(--border);
  font-family:'DM Mono',monospace;font-size:10.5px;
}
.app-footer-bar a{color:var(--muted2);text-decoration:none;letter-spacing:0.4px;}
.app-footer-bar a:hover{color:var(--accent);}
.app-footer-bar span{color:var(--border);}
body.app-locked .app-footer-bar{display:none!important;}
@media(max-width:640px){
  .app-footer-bar{font-size:9.5px;gap:6px;padding:7px 10px;}
}

/* ── CATS LIST ─────────────────────────────────────────── */
.cats-list{display:flex;flex-direction:column;gap:3px;max-height:200px;overflow-y:auto;}
.cats-list-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  border-radius:9px;
  background:transparent;
  border:1px solid transparent;
  transition:all 0.15s;
}
.cats-list-row:hover{background:var(--s2);border-color:var(--border);}
.cats-list-name{font-family:'DM Mono',monospace;font-size:11px;flex:1;color:var(--muted2);}
.cats-list-count{
  font-family:'DM Mono',monospace;font-size:9px;
  color:var(--muted);
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:5px;
  padding:2px 7px;
  margin-right:4px;
}
.cats-list-edit{font-size:10px;background:none;border:none;color:var(--muted);cursor:pointer;padding:3px 7px;border-radius:5px;font-family:'DM Mono',monospace;transition:all 0.15s;}
.cats-list-edit:hover{color:var(--accent);background:var(--adim);}
.cats-list-del{font-size:10px;background:none;border:none;color:var(--muted);cursor:pointer;padding:3px 7px;border-radius:5px;font-family:'DM Mono',monospace;transition:all 0.15s;}
.cats-list-del:hover{color:#ff5a5a;background:rgba(255,90,90,0.08);}

/* ── SETTING BOX ───────────────────────────────────────── */
.setting-box{
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
}
.setting-row{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'DM Mono',monospace;font-size:10px;color:var(--muted2);
  margin-bottom:12px;
}
.setting-row span:last-child{color:var(--accent);font-weight:600;font-size:11px;}

/* ── THEME OPTIONS ─────────────────────────────────────── */
.theme-options{display:flex;gap:6px;margin-top:4px;}
.theme-option{
  flex:1;border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted2);
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.5px;
  padding:10px 12px;cursor:pointer;
  transition:all 0.15s;
}
.theme-option:hover{border-color:var(--bh);color:var(--text);}
.theme-option.active{background:var(--accent);border-color:var(--accent);color:#0a0a0c;font-weight:700;}

/* ── SYNC MODE ─────────────────────────────────────────── */
.sync-mode-row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.sync-mode-opt{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  cursor:pointer;transition:all 0.15s;
}
.sync-mode-opt:hover{border-color:var(--bh);background:var(--s2);}
.sync-mode-opt.active{border-color:var(--ab);background:var(--adim);}
.sync-mode-icon{font-size:16px;flex-shrink:0;width:26px;text-align:center;}
.sync-mode-title{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px;}
.sync-mode-desc{font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:0.3px;}
.sync-mode-check{
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;color:transparent;
  transition:all 0.15s;flex-shrink:0;
}
.sync-mode-opt.active .sync-mode-check{
  background:var(--accent);border-color:var(--accent);
  color:#0a0a0c;font-weight:700;
}

/* ── NEW CAT ROW ───────────────────────────────────────── */
.new-cat-row{display:flex;gap:8px;align-items:center;margin-top:12px;}
.new-cat-input{
  flex:1;background:var(--s2);border:1px solid var(--border);
  border-radius:9px;padding:9px 14px;
  font-family:'DM Mono',monospace;font-size:11px;color:var(--text);
  transition:border-color 0.15s,box-shadow 0.15s;outline:none;
}
.new-cat-input:focus{border-color:var(--ab);box-shadow:0 0 0 3px var(--adim2);}
.new-cat-input::placeholder{color:var(--muted);}

/* ── MODAL ── */
.moverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
.moverlay.open{display:flex;}
.modal{background:var(--s1);border:1px solid var(--bh);border-radius:16px;padding:26px;width:420px;max-width:94vw;max-height:88vh;overflow-y:auto;}
.modal h3{font-size:15px;font-weight:600;margin-bottom:18px;letter-spacing:-0.2px;}
.modal label{display:block;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;margin-top:14px;}
.modal label:first-of-type{margin-top:0;}
.modal input,.modal select{width:100%;background:var(--s2);border:1px solid var(--bh);border-radius:8px;padding:8px 11px;color:var(--text);font-family:'DM Mono',monospace;font-size:12px;outline:none;transition:border-color 0.15s;}
.modal input:focus,.modal select:focus{border-color:var(--ab);}
.modal input::placeholder{color:var(--muted);}
.modal select{appearance:none;cursor:pointer;}
.modal select option{background:var(--s2);}
.modal-btns{display:flex;gap:7px;margin-top:18px;justify-content:flex-end;}
.btn-x{background:var(--s2);border:1px solid var(--bh);color:var(--muted2);font-family:'Syne',sans-serif;font-size:12px;padding:7px 14px;border-radius:7px;cursor:pointer;transition:all 0.15s;}
.btn-x:hover{border-color:var(--bh);color:var(--text);}
.btn-s{background:var(--accent);border:none;color:#0a0a0c;font-family:'Syne',sans-serif;font-size:12px;font-weight:700;padding:7px 16px;border-radius:7px;cursor:pointer;transition:opacity 0.15s;}
.btn-s:hover{opacity:0.85;}

/* ── CMD PALETTE ── */
.cmdov{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.68);z-index:300;align-items:flex-start;justify-content:center;padding-top:88px;backdrop-filter:blur(8px);}
.cmdov.open{display:flex;}
.cmdbox{background:var(--s1);border:1px solid var(--bh);border-radius:16px;width:540px;max-width:92vw;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.75);}
.cdr{display:flex;align-items:center;padding:13px 16px;gap:10px;border-bottom:1px solid var(--border);}
.cdi{flex:1;background:none;border:none;outline:none;font-family:'Syne',sans-serif;font-size:15px;color:var(--text);}
.cdi::placeholder{color:var(--muted);}
.cdh{font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);}
.cdres{padding:6px;max-height:290px;overflow-y:auto;scrollbar-width:thin;}
.cdi-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background 0.08s;text-decoration:none;color:var(--text);}
.cdi-item:hover,.cdi-item.sel{background:var(--s2);}
.cdi-ico{width:20px;height:20px;border-radius:4px;background:var(--s3);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.cdi-ico img{width:13px;height:13px;object-fit:contain;}
.cdi-name{font-size:12px;flex:1;}
.cdi-cat{font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);}
.cdfoot{padding:8px 16px;border-top:1px solid var(--border);display:flex;gap:12px;}
.cdk{display:flex;align-items:center;gap:4px;font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);}
.cdk kbd{background:var(--s3);border:1px solid var(--bh);border-radius:3px;padding:1px 4px;font-family:'DM Mono',monospace;font-size:9px;}

/* ── IMPORT MODAL ── */
.import-drop{border:2px dashed var(--bh);border-radius:10px;padding:26px;text-align:center;font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);cursor:pointer;transition:border-color 0.2s,background 0.2s;margin-bottom:10px;}
.import-drop:hover,.import-drop.drag{border-color:var(--ab);background:var(--adim);color:var(--accent);}
.import-drop input[type=file]{display:none;}
.import-preview{max-height:150px;overflow-y:auto;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:8px;margin-bottom:10px;font-family:'DM Mono',monospace;font-size:10px;color:var(--muted2);display:none;scrollbar-width:thin;}
.imp-bm-row{display:flex;align-items:center;gap:8px;padding:3px 5px;border-radius:4px;}
.imp-bm-row:hover{background:var(--s3);}
.imp-bm-row input{accent-color:var(--accent);}
.imp-bm-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
.imp-bm-url{color:var(--muted);font-size:9px;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;}
.import-tabs{display:flex;gap:4px;margin-bottom:12px;}
.import-tab{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:4px 11px;border-radius:6px;background:var(--s2);border:1px solid var(--border);color:var(--muted2);cursor:pointer;transition:all 0.15s;}
.import-tab.active{background:var(--adim);border-color:var(--ab);color:var(--accent);}
.import-tab-pane{display:none;}
.import-tab-pane.active{display:block;}
.prompt-textarea{width:100%;background:var(--s2);border:1px solid var(--bh);border-radius:8px;padding:8px 11px;color:var(--text);font-family:'DM Mono',monospace;font-size:11px;outline:none;resize:vertical;min-height:80px;transition:border-color 0.15s;}
.prompt-textarea:focus{border-color:var(--ab);}

/* ── CONTEXT MENU ── */
.tile-ctx{position:fixed;background:var(--s1);border:1px solid var(--bh);border-radius:10px;padding:4px;z-index:500;min-width:162px;box-shadow:0 16px 44px rgba(0,0,0,0.65);animation:ctxIn 0.1s var(--ease) both;}
@keyframes ctxIn{from{opacity:0;transform:scale(0.93);}to{opacity:1;transform:scale(1);}}
.ctx-item{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:6px;cursor:pointer;font-family:'DM Mono',monospace;font-size:11px;color:var(--muted2);transition:background 0.1s,color 0.1s;}
.ctx-item:hover{background:var(--s2);color:var(--text);}
.ctx-item.danger:hover{background:rgba(255,107,107,0.08);color:#ff6b6b;}
.ctx-item.gold:hover{background:rgba(240,192,64,0.08);color:#f0c040;}
.ctx-sep{height:1px;background:var(--border);margin:3px 0;}

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;right:20px;background:var(--s1);border:1px solid var(--ab);color:var(--accent);font-family:'DM Mono',monospace;font-size:11px;padding:9px 16px;border-radius:9px;z-index:600;display:flex;align-items:center;gap:7px;opacity:0;transform:translateY(8px);transition:opacity 0.2s,transform 0.2s;pointer-events:none;max-width:320px;}
.toast.on{opacity:1;transform:translateY(0);}

/* ── UPGRADE BAR ── */
.upgrade-bar{
  position:fixed;left:50%;bottom:18px;
  transform:translate(-50%,140%);
  display:flex;align-items:center;gap:12px;
  background:var(--s1);border:1px solid var(--ab);
  border-radius:999px;padding:10px 12px 10px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,0.35);
  z-index:580;max-width:min(560px,calc(100vw - 32px));
  opacity:0;transition:opacity 0.35s var(--ease),transform 0.35s var(--ease);
  pointer-events:none;
}
.upgrade-bar.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.upgrade-bar-icon{font-size:15px;flex-shrink:0;}
.upgrade-bar-text{font-family:'Syne',sans-serif;font-size:12.5px;color:var(--text);line-height:1.4;}
.upgrade-bar-text strong{color:var(--accent);}
.upgrade-bar-btn{
  flex-shrink:0;border:0;border-radius:999px;background:var(--accent);
  color:#0a0a0c;font-family:'Syne',sans-serif;font-weight:800;font-size:12px;
  padding:8px 16px;cursor:pointer;transition:filter 0.15s;
}
.upgrade-bar-btn:hover{filter:brightness(1.1);}
.upgrade-bar-close{
  flex-shrink:0;border:0;background:transparent;color:var(--muted);
  font-size:13px;cursor:pointer;padding:4px;line-height:1;
}
.upgrade-bar-close:hover{color:var(--text);}
@media(max-width:640px){
  .upgrade-bar{flex-wrap:wrap;border-radius:18px;padding:12px 14px;justify-content:center;text-align:center;}
  .upgrade-bar-text{order:1;flex:1 1 100%;text-align:center;}
  .upgrade-bar-close{position:absolute;top:8px;right:10px;}
}

/* ── UTILITY ── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 0.45s var(--ease),transform 0.45s var(--ease);}
.reveal.shown{opacity:1;transform:translateY(0);}
.sec-hidden{display:none!important;}
.hidden{display:none!important;}
/* ══════════════════════════════════════════════════════════
   LOGIN GATE — full landing page
══════════════════════════════════════════════════════════ */
.login-gate{position:fixed;inset:0;z-index:999;background:var(--bg);}
.lg-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;}

/* cursor */
#lg-cur{position:fixed;width:8px;height:8px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:10001;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .18s,height .18s;}
#lg-cur-r{position:fixed;width:34px;height:34px;border:1px solid rgba(56,189,248,0.35);border-radius:50%;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);}
.login-gate.lg-hov #lg-cur{width:18px;height:18px;}
.login-gate.lg-hov #lg-cur-r{width:52px;height:52px;border-color:rgba(56,189,248,0.6);}
@media(max-width:600px){#lg-cur,#lg-cur-r{display:none;}}

/* nav */
.lg-nav{position:sticky;top:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:58px;border-bottom:1px solid var(--border);transition:background .3s;}
.lg-logo{font-family:'Syne',sans-serif;font-size:18px;font-weight:800;letter-spacing:-0.4px;color:var(--text);}
.lg-logo span{color:var(--accent);}
@keyframes lgElec{0%,100%{text-shadow:0 0 18px rgba(56,189,248,0.6),0 0 50px rgba(56,189,248,0.15);}35%{text-shadow:0 0 6px rgba(56,189,248,0.3),0 0 20px rgba(56,189,248,0.07);}68%{text-shadow:0 0 28px rgba(56,189,248,0.9),0 0 80px rgba(56,189,248,0.25);}}
.lg-nav-status{display:flex;align-items:center;gap:7px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);}
.lg-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(56,189,248,0.8);animation:lgPulse 2s ease-in-out infinite;}
@keyframes lgPulse{0%,100%{opacity:1;}50%{opacity:0.25;}}
.lg-nav-right{display:flex;align-items:center;gap:20px;}
.lg-nav-link{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);text-decoration:none;transition:color .2s;}
.lg-nav-link:hover{color:var(--text);}
.lg-nav-cta{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;padding:7px 16px;border-radius:7px;background:var(--adim);border:1px solid var(--ab);color:var(--accent);text-decoration:none;transition:all .2s;}
.lg-nav-cta:hover{background:rgba(56,189,248,0.1);}
@media(max-width:700px){.lg-nav{padding:0 20px;}.lg-nav-link{display:none;}}

/* hero */
.lg-hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 24px 80px;overflow:hidden;}
.lg-h-glow{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(56,189,248,0.05) 0%,transparent 60%);pointer-events:none;animation:lgHglow 7s ease-in-out infinite;}
@keyframes lgHglow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;}50%{transform:translate(-50%,-50%) scale(1.25);opacity:0.6;}}
.lg-h-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 100%);pointer-events:none;}
.lg-h-vline{position:absolute;top:20%;bottom:20%;width:1px;background:linear-gradient(to bottom,transparent,rgba(56,189,248,0.12),transparent);pointer-events:none;}
.lg-h-vline.l{left:15%;}.lg-h-vline.r{right:15%;}
.lg-badge{display:inline-flex;align-items:center;gap:10px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);background:var(--adim);border:1px solid var(--ab);padding:7px 18px;border-radius:100px;margin-bottom:36px;opacity:0;animation:lgUp .9s cubic-bezier(0.16,1,0.3,1) .15s forwards;}
.lg-badge-bar{width:28px;height:1px;background:var(--accent);}
.lg-hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(78px,13vw,176px);letter-spacing:-3px;line-height:.88;margin-bottom:0;opacity:0;animation:lgUp 1s cubic-bezier(0.16,1,0.3,1) .3s forwards;}
.lg-ht1{display:block;color:var(--text);}
.lg-ht2{display:block;color:var(--accent);text-shadow:0 0 50px rgba(56,189,248,0.35),0 0 120px rgba(56,189,248,0.12);}
.lg-ht3{display:block;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.1);}
.lg-h-rule{width:1px;height:52px;background:linear-gradient(to bottom,transparent,var(--accent),transparent);margin:28px auto;opacity:0;animation:lgUp .8s cubic-bezier(0.16,1,0.3,1) .55s forwards;}
.lg-hero-sub{font-family:'DM Mono',monospace;font-weight:300;font-size:clamp(13px,1.6vw,16px);color:var(--muted2);max-width:540px;margin:0 auto 32px;line-height:1.85;opacity:0;animation:lgUp .8s cubic-bezier(0.16,1,0.3,1) .7s forwards;}
.lg-hero-sub strong{color:var(--text);font-weight:400;}
.lg-hero-btn{display:inline-block;font-family:'Syne',sans-serif;font-size:14px;font-weight:700;background:var(--accent);color:#060608;padding:15px 30px;border-radius:12px;text-decoration:none;transition:background .15s,transform .1s;opacity:0;animation:lgUp .8s cubic-bezier(0.16,1,0.3,1) .85s forwards;margin-bottom:12px;}
.lg-hero-btn:hover{background:#d4f548;transform:translateY(-2px);}
.lg-hero-note{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);opacity:0;animation:lgUp .8s cubic-bezier(0.16,1,0.3,1) .95s forwards;}
.lg-scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);opacity:0;animation:lgUp 1s cubic-bezier(0.16,1,0.3,1) 2s forwards;}
.lg-scroll-bar{width:1px;height:36px;background:linear-gradient(to bottom,var(--muted),transparent);animation:lgSdrop 2.2s ease-in-out 2.5s infinite;}
@keyframes lgSdrop{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}
@keyframes lgUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* product preview */
.lg-preview-wrap{position:relative;padding:0 24px 80px;max-width:960px;margin:0 auto;}
.lg-preview-outer{border-radius:18px;overflow:hidden;border:1px solid var(--border);box-shadow:0 40px 120px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.03),0 0 100px rgba(56,189,248,0.03);}
.lg-preview-bar{display:flex;align-items:center;padding:12px 18px;gap:12px;background:rgba(8,8,12,0.96);border-bottom:1px solid var(--border);}
.lg-p-dots{display:flex;gap:6px;}
.lg-p-dot{width:10px;height:10px;border-radius:50%;}
.lg-p-dot.r{background:#ff5f57;}.lg-p-dot.y{background:#ffbd2e;}.lg-p-dot.g{background:#28ca41;}
.lg-p-addr{flex:1;background:var(--s2);border-radius:6px;padding:5px 12px;font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);text-align:center;}
.lg-p-body{background:var(--bg);padding:28px;}
.lg-p-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.lg-p-wordmark{font-family:'Syne',sans-serif;font-size:13px;font-weight:800;letter-spacing:-0.3px;color:var(--text);}
.lg-p-wordmark span{color:var(--accent);}
.lg-p-pills{display:flex;gap:3px;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:3px;}
.lg-p-pill{padding:4px 11px;border-radius:6px;font-family:'Syne',sans-serif;font-size:10px;font-weight:500;color:var(--muted2);}
.lg-p-pill.active{background:var(--accent);color:#060608;font-weight:700;}
.lg-p-cat{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.lg-p-cdot{width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(56,189,248,0.7);}
.lg-p-cname{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:var(--text);}
.lg-p-grid{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:20px;}
.lg-p-tile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 7px;border-radius:10px;width:70px;transition:background .15s;}
.lg-p-tile:hover{background:var(--s2);}
.lg-p-ico{width:36px;height:36px;border-radius:9px;background:var(--s2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.lg-p-name{font-family:'DM Mono',monospace;font-size:8px;color:var(--muted2);text-align:center;white-space:nowrap;}
.lg-p-glowbar{height:1px;background:linear-gradient(to right,transparent,rgba(56,189,248,0.3),transparent);}
.lg-preview-fade{position:absolute;bottom:80px;left:0;right:0;height:120px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;}

/* marquee */
.lg-marq{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--s1);overflow:hidden;padding:12px 0;white-space:nowrap;}
.lg-marq-track{display:inline-flex;animation:lgMarq 30s linear infinite;}
.lg-marq-item{display:inline-flex;align-items:center;gap:14px;padding:0 28px;font-family:'DM Mono',monospace;font-size:10px;color:var(--muted2);letter-spacing:.5px;}
.lg-marq-dot{color:var(--accent);font-size:5px;}
@keyframes lgMarq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* sections */
.lg-sec{position:relative;border-top:1px solid var(--border);}
.lg-si{max-width:1160px;margin:0 auto;padding:0 48px;}
@media(max-width:700px){.lg-si{padding:0 24px;}}
.lg-eyebrow{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.lg-eyebrow::before{content:'//';color:var(--muted);}
.lg-sec-h{font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,7vw,100px);letter-spacing:-2px;line-height:.9;margin-bottom:20px;}
.lg-sec-sub{font-family:'DM Mono',monospace;font-weight:300;font-size:13px;color:var(--muted2);line-height:1.85;max-width:480px;}
.lg-sec-sub strong{color:var(--text);font-weight:400;}

/* problem */
.lg-prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;padding:120px 0;}
@media(max-width:800px){.lg-prob-grid{grid-template-columns:1fr;gap:48px;padding:80px 0;}}
.lg-ghost{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.1);}
.lg-pain-list{border-top:1px solid var(--border);}
.lg-pain-item{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--border);}
.lg-p-num{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);width:22px;flex-shrink:0;padding-top:2px;}
.lg-p-title{font-size:14px;font-weight:700;letter-spacing:-.2px;margin-bottom:5px;}
.lg-p-desc{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted2);line-height:1.7;font-weight:300;}
.lg-p-label{display:inline-block;margin-top:7px;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);background:var(--adim);border:1px solid var(--ab);padding:2px 8px;border-radius:4px;}

/* numbers */
.lg-numbers{border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);}
@media(max-width:900px){.lg-numbers{grid-template-columns:1fr 1fr;}}
@media(max-width:500px){.lg-numbers{grid-template-columns:1fr;}}
.lg-nstat{background:var(--bg);padding:36px 28px;}
.lg-nstat-n{font-family:'Bebas Neue',sans-serif;font-size:64px;letter-spacing:-2px;color:var(--accent);line-height:1;margin-bottom:6px;text-shadow:0 0 30px rgba(56,189,248,0.25);}
.lg-nstat-l{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted2);line-height:1.55;font-weight:300;}

/* features */
.lg-feat-wrap{padding:120px 0;}
@media(max-width:800px){.lg-feat-wrap{padding:80px 0;}}
.lg-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-top:56px;}
@media(max-width:900px){.lg-feat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.lg-feat-grid{grid-template-columns:1fr;}}
.lg-fcard{background:var(--s1);padding:30px 26px;transition:background .2s;}
.lg-fcard:hover{background:var(--s2);}
.lg-fhero{border:1px solid var(--ab)!important;}
.lg-fcard-top{font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);letter-spacing:2px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;}
.lg-fcard-icon{font-size:20px;color:var(--accent);opacity:.3;}
.lg-fcard-title{font-size:15px;font-weight:700;letter-spacing:-.3px;margin-bottom:9px;}
.lg-fcard-body{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted2);line-height:1.75;font-weight:300;}
.lg-fcard-tag{display:inline-block;margin-top:12px;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);background:var(--adim);border:1px solid var(--ab);padding:2px 8px;border-radius:4px;}

/* who */
.lg-who-wrap{padding:120px 0;}
@media(max-width:800px){.lg-who-wrap{padding:80px 0;}}
.lg-who-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:52px;flex-wrap:wrap;gap:24px;}
.lg-who-sub{font-family:'DM Mono',monospace;font-size:12px;color:var(--muted2);max-width:260px;line-height:1.75;font-weight:300;}
.lg-who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(max-width:900px){.lg-who-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.lg-who-grid{grid-template-columns:1fr;}}
.lg-wcard{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:24px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s cubic-bezier(0.16,1,0.3,1),background .2s;}
.lg-wcard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(0.16,1,0.3,1);}
.lg-wcard:hover{border-color:var(--bh);transform:translateY(-5px);background:var(--s2);}
.lg-wcard:hover::after{transform:scaleX(1);}
.lg-wcard-role{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.lg-wcard-title{font-size:14px;font-weight:700;letter-spacing:-.2px;margin-bottom:7px;}
.lg-wcard-body{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted2);line-height:1.65;font-weight:300;margin-bottom:12px;}
.lg-wcard-tools{display:flex;flex-wrap:wrap;gap:4px;}
.lg-wcard-tool{font-family:'DM Mono',monospace;font-size:8px;color:var(--muted);background:var(--s3);border:1px solid var(--border);padding:2px 7px;border-radius:4px;}

/* manifesto */
.lg-manif{border-top:1px solid var(--border);position:relative;overflow:hidden;}
.lg-manif-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:500px;background:radial-gradient(ellipse,rgba(56,189,248,0.03) 0%,transparent 65%);pointer-events:none;}
.lg-manif-inner{max-width:900px;margin:0 auto;padding:140px 48px;text-align:center;}
@media(max-width:700px){.lg-manif-inner{padding:90px 24px;}}
.lg-manif-tag{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:40px;}
.lg-manif-text{font-family:'Bebas Neue',sans-serif;font-size:clamp(40px,6vw,78px);letter-spacing:-1.5px;line-height:1.05;}
.lg-ac{color:var(--accent);text-shadow:0 0 30px rgba(56,189,248,0.2);}
.lg-gh{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.08);}

/* sign in section */
.lg-signin-sec{border-top:1px solid var(--border);position:relative;overflow:hidden;text-align:center;}
.lg-signin-glow{position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:700px;height:500px;background:radial-gradient(ellipse,rgba(56,189,248,0.06) 0%,transparent 65%);pointer-events:none;}
.lg-signin-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(56,189,248,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,0.018) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 60% 100% at 50% 0%,black,transparent);pointer-events:none;}
.lg-signin-inner{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:120px 24px 100px;}
.lg-signin-badge{display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);background:var(--adim);border:1px solid var(--ab);padding:6px 16px;border-radius:100px;margin-bottom:32px;}
.lg-signin-h{font-family:'Bebas Neue',sans-serif;font-size:clamp(62px,10vw,120px);letter-spacing:-3px;line-height:.88;margin-bottom:20px;}
.lg-sl1{display:block;color:var(--text);}
.lg-sl2{display:block;color:var(--accent);text-shadow:0 0 40px rgba(56,189,248,0.3),0 0 100px rgba(56,189,248,0.1);}
.lg-signin-sub{font-family:'DM Mono',monospace;font-weight:300;font-size:13px;color:var(--muted2);max-width:400px;margin:0 auto 28px;line-height:1.85;}
.lg-signin-perks{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:36px;}
.lg-perk{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted2);display:flex;align-items:center;gap:7px;}
.lg-perk::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);flex-shrink:0;}

/* auth box */
.lg-auth-box{background:rgba(10,10,12,0.9);border:1px solid var(--bh);border-radius:20px;padding:32px;box-shadow:0 40px 100px rgba(0,0,0,0.6);text-align:left;backdrop-filter:blur(24px);}
.lg-btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border-radius:10px;background:var(--s2);border:1px solid var(--bh);color:var(--text);font-family:'Syne',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;margin-bottom:10px;}
.lg-btn-google:hover{background:var(--s3);border-color:rgba(255,255,255,0.15);}
.lg-btn-google:active{transform:scale(.98);}
.lg-divider{display:flex;align-items:center;gap:10px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:14px 0;}
.lg-divider::before,.lg-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.lg-email-input{width:100%;background:var(--s2);border:1px solid var(--bh);border-radius:10px;padding:13px 16px;color:var(--text);font-family:'DM Mono',monospace;font-size:12px;outline:none;transition:border-color .2s;margin-bottom:8px;}
.lg-email-input:focus{border-color:var(--ab);}
.lg-email-input::placeholder{color:var(--muted);}
.lg-btn-email{width:100%;padding:13px;border-radius:10px;border:none;cursor:pointer;background:var(--accent);color:#060608;font-family:'Syne',sans-serif;font-size:13px;font-weight:700;transition:background .15s,transform .1s;}
.lg-btn-email:hover{background:#d4f548;}
.lg-btn-email:active{transform:scale(.98);}
.lg-auth-footer{margin-top:16px;font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);line-height:1.65;text-align:center;}

/* footer */
.lg-footer{border-top:1px solid var(--border);padding:36px 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.lg-f-logo{font-family:'Syne',sans-serif;font-size:16px;font-weight:800;letter-spacing:-0.3px;color:var(--text);}
.lg-f-logo span{color:var(--accent);}
.lg-f-links{display:flex;gap:24px;}
.lg-f-link{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;}
.lg-f-link:hover{color:var(--muted2);}
.lg-f-copy{font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);}
@media(max-width:600px){.lg-footer{padding:24px 20px;flex-direction:column;align-items:flex-start;}.lg-f-links{display:none;}}

/* scroll reveal */
.lg-sr{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(0.16,1,0.3,1),transform .65s cubic-bezier(0.16,1,0.3,1);}
.lg-sr.lg-on{opacity:1;transform:translateY(0);}
.lg-d1{transition-delay:.06s;}.lg-d2{transition-delay:.13s;}.lg-d3{transition-delay:.2s;}
.lg-d4{transition-delay:.27s;}.lg-d5{transition-delay:.34s;}.lg-d6{transition-delay:.41s;}

/* hide app while gate is showing */
body.app-locked header,body.app-locked .recent-strip,body.app-locked main,body.app-locked .moverlay,body.app-locked .cmdov,body.app-locked .tile-ctx,body.app-locked .toast,body.app-locked .upgrade-bar{display:none!important;}

/* ══════════════════════════════════════════════════════════
   UI POLISH LAYER v2 — final audited pass, additive only
   Zero logic changes. CSS additions only except one HTML
   text fix (stray "2192" removed from Sign out button).
══════════════════════════════════════════════════════════ */

/* ── GLOBAL FOCUS RING ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ── RANGE INPUT — fully custom, no native chrome ── */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;
  background:var(--s3);border-radius:2px;
  cursor:pointer;margin-top:10px;outline:none;border:none;padding:0;
  transition:background 0.2s;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);cursor:pointer;
  border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--accent),0 2px 6px rgba(0,0,0,0.4);
  transition:transform 0.15s var(--ease),box-shadow 0.15s;
}
input[type=range]::-webkit-slider-thumb:hover{
  transform:scale(1.2);
  box-shadow:0 0 0 3px var(--adim2),0 2px 8px rgba(0,0,0,0.5);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);cursor:pointer;
  border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--accent);
}
input[type=range]::-webkit-slider-runnable-track{
  border-radius:2px;height:4px;background:var(--s3);
}
input[type=range]::-moz-range-track{
  border-radius:2px;height:4px;background:var(--s3);
}


/* ── STACKMAP PRO UI STATE ── */
html.sm-plan-pro #tb-upgrade-btn,
body.sm-plan-pro #tb-upgrade-btn,
html.sm-plan-pro #settings-upgrade-btn,
body.sm-plan-pro #settings-upgrade-btn,
html.sm-plan-pro #upgrade-bar,
body.sm-plan-pro #upgrade-bar{
  display:none!important;
}
.tb-pro-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;min-width:42px;padding:0 10px;border-radius:999px;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  border:1px solid rgba(255,255,255,.22);color:#1a1200;
  font-family:'DM Mono',monospace;font-size:10px;font-weight:900;letter-spacing:.08em;
  box-shadow:0 8px 22px rgba(245,158,11,.25);
}
.auth-pro-badge{
  margin:5px 4px 6px;padding:8px 10px;border-radius:10px;
  background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.28);
  color:#fbbf24;font-family:'DM Mono',monospace;font-size:10px;font-weight:800;
}

/* ── AUTH USER BUTTON ── */
.auth-user-btn{
  display:flex;align-items:center;gap:7px;
  padding:5px 10px 5px 6px;border-radius:9px;
  background:var(--s2);border:1px solid var(--border);
  cursor:pointer;position:relative;
  transition:background 0.15s var(--ease),border-color 0.15s var(--ease);
  font-family:'Syne',sans-serif;font-size:12px;font-weight:600;
  color:var(--text);user-select:none;
}
.auth-user-btn:hover{background:var(--s3);border-color:var(--bh);}

.auth-avatar{
  width:24px;height:24px;border-radius:7px;
  background:var(--accent);color:#060608;
  font-family:'Syne',sans-serif;font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;letter-spacing:-0.5px;
}
.auth-avatar img{width:100%;height:100%;object-fit:cover;border-radius:7px;}

.auth-user-name{
  max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;
}

/* Dropdown: hidden by default; shown when parent has .open */
.auth-dropdown{
  display:none;
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:200px;
  background:var(--s1);border:1px solid var(--bh);border-radius:12px;
  padding:6px;
  box-shadow:0 20px 60px rgba(0,0,0,0.65),0 4px 12px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.03);
  z-index:9999;
  animation:ctxIn 0.12s var(--ease) both;
}
.auth-user-btn.open .auth-dropdown{display:block;}

.auth-drop-email{
  font-family:'DM Mono',monospace;font-size:10px;color:var(--muted);
  padding:7px 10px 9px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px solid var(--border);margin-bottom:4px;
}
.auth-drop-sep{height:1px;background:var(--border);margin:3px 0;}
.auth-drop-item{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:7px;
  font-family:'DM Mono',monospace;font-size:11px;color:var(--muted2);
  cursor:pointer;transition:background 0.1s,color 0.1s;
}
.auth-drop-item:hover{background:var(--s2);color:var(--text);}

/* ── SYNC MODE CONTROLS ── */
.sync-mode-row{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.sync-mode-opt{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:10px;background:var(--s2);border:1px solid var(--border);
  cursor:pointer;user-select:none;
  transition:border-color 0.15s var(--ease),background 0.15s var(--ease),box-shadow 0.15s;
}
.sync-mode-opt:hover{border-color:var(--bh);background:var(--s3);}
.sync-mode-opt.active{
  border-color:var(--ab);background:var(--adim);
  box-shadow:0 0 0 1px var(--ab) inset;
}
.sync-mode-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center;}
.sync-mode-title{
  font-family:'Syne',sans-serif;font-size:12px;font-weight:700;
  color:var(--text);margin-bottom:2px;
}
.sync-mode-desc{
  font-family:'DM Mono',monospace;font-size:9px;color:var(--muted2);line-height:1.5;
}
.sync-mode-check{
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:transparent;flex-shrink:0;
  font-family:'DM Mono',monospace;font-weight:700;
  transition:border-color 0.15s,background 0.15s,color 0.15s;
}
.sync-mode-opt.active .sync-mode-check{
  border-color:var(--accent);background:var(--adim2);color:var(--accent);
}

/* ── SYNC STATUS BAR ── */
.sync-status-bar{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:9px;
  background:var(--s2);border:1px solid var(--border);
  font-family:'DM Mono',monospace;font-size:10px;color:var(--muted2);
  min-height:38px;
}
.sync-status-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--muted);
  transition:background 0.3s,box-shadow 0.3s;
}
.sync-status-dot.ok{background:#4ade80;box-shadow:0 0 7px rgba(74,222,128,0.65);}
.sync-status-dot.syncing{
  background:var(--accent);box-shadow:0 0 7px rgba(56,189,248,0.7);
  animation:lgPulse 1s ease-in-out infinite;
}
.sync-status-dot.err{background:#ff6b6b;box-shadow:0 0 7px rgba(255,107,107,0.65);}
#sync-status-text{flex:1;}
.sync-now-btn{
  display:none;padding:4px 12px;border-radius:6px;
  background:var(--adim);border:1px solid var(--ab);
  color:var(--accent);font-family:'DM Mono',monospace;font-size:9px;
  font-weight:600;cursor:pointer;flex-shrink:0;
  transition:background 0.15s,transform 0.1s,box-shadow 0.15s;
}
.sync-now-btn:hover{background:var(--adim2);transform:scale(1.04);box-shadow:0 4px 12px rgba(56,189,248,0.15);}
.sync-now-btn:active{transform:scale(0.97);}

/* ── SETTING BOX (App Size / Theme) ── */
.setting-box{
  background:var(--s2);border:1px solid var(--border);
  border-radius:10px;padding:13px 14px;
}
.setting-row{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'DM Mono',monospace;font-size:11px;color:var(--muted2);
  margin-bottom:6px;
}
.setting-row span:last-child{color:var(--accent);font-weight:600;font-size:12px;}

/* ── NEW CATEGORY ROW ── */
.new-cat-row{display:flex;gap:8px;align-items:center;}
.new-cat-input{
  flex:1;background:var(--s2);border:1px solid var(--bh);
  border-radius:8px;padding:8px 11px;
  color:var(--text);font-family:'DM Mono',monospace;font-size:11px;
  outline:none;transition:border-color 0.15s var(--ease),background 0.15s,box-shadow 0.15s;
}
.new-cat-input:focus{border-color:var(--ab);background:var(--s1);box-shadow:0 0 0 2px var(--adim2);}
.new-cat-input::placeholder{color:var(--muted);}

/* ── SESSION CARDS ── */
.session-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;
  background:var(--s2);border:1px solid var(--border);
}
.session-row.session-current{border-color:var(--ab);background:var(--adim);}
.session-icon{font-size:20px;flex-shrink:0;width:32px;text-align:center;line-height:1;}
.session-label{
  font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap;
}
.session-badge{
  font-family:'DM Mono',monospace;font-size:8px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--accent);
  background:var(--adim2);border:1px solid var(--ab);
  padding:1px 6px;border-radius:4px;
}
.session-meta{
  font-family:'DM Mono',monospace;font-size:9px;color:var(--muted);line-height:1.55;
}

/* ── EMPTY STATE (launcher) ── */
.empty-state{
  padding:64px 24px;text-align:center;
  animation:modalIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
.empty-icon{
  font-size:36px;display:block;margin-bottom:14px;opacity:0.3;
  font-family:'DM Mono',monospace;color:var(--accent);
}
.empty-title{
  font-family:'Syne',sans-serif;font-size:15px;font-weight:700;
  color:var(--text);margin-bottom:8px;
}
.empty-sub{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);
  line-height:1.75;max-width:380px;margin:0 auto;font-weight:300;
}

/* ── NO SEARCH RESULTS STATE ── */
.nores{
  display:none;text-align:center;padding:60px 24px;
  font-family:'DM Mono',monospace;font-size:12px;color:var(--muted);
}
.nores::before{
  content:'⌕';display:block;font-size:30px;
  margin-bottom:12px;opacity:0.25;
}

/* ── ONBOARDING DROP ZONE INTERNALS ── */
.onboard-drop-icon{font-size:28px;display:block;margin-bottom:10px;line-height:1;}
.onboard-drop-title{
  font-family:'Syne',sans-serif;font-size:13px;font-weight:700;
  color:var(--text);margin-bottom:5px;
}
.onboard-drop-sub{
  font-family:'DM Mono',monospace;font-size:9px;color:var(--muted2);line-height:1.5;
}
.onboard-import-input{display:none;}

/* ── ONBOARDING BUTTON STATES ── */
.onboard-btn-skip{
  transition:background 0.15s var(--ease),border-color 0.15s,color 0.15s;
}
.onboard-btn-skip:hover{border-color:var(--bh);color:var(--text);background:var(--s2);}
.onboard-btn-skip:active{transform:scale(0.97);}
.onboard-btn-next{
  transition:opacity 0.15s var(--ease),transform 0.15s var(--ease),box-shadow 0.15s;
}
.onboard-btn-next:hover{opacity:0.88;transform:translateY(-1px);box-shadow:0 8px 24px rgba(56,189,248,0.25);}
.onboard-btn-next:active{transform:scale(0.96);}

/* ── ONBOARDING CARD STATES ── */
.onboard-card{
  transition:border-color 0.18s var(--ease),background 0.18s var(--ease),transform 0.18s var(--ease),box-shadow 0.18s;
}
.onboard-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3);}
.onboard-card.selected{box-shadow:0 0 0 1px var(--accent),0 8px 32px rgba(56,189,248,0.12);}
.onboard-pip{transition:background 0.3s var(--ease);}

/* ── ONBOARD STEP ENTER ANIMATION ── */
.onboard-step.active{animation:modalIn 0.22s cubic-bezier(0.16,1,0.3,1) both;}

/* ── MODAL ENTER ANIMATION ── */
@keyframes modalIn{
  from{opacity:0;transform:translateY(10px) scale(0.97);}
  to  {opacity:1;transform:translateY(0)    scale(1);}
}
/* moverlay uses display:none → flex toggle; the .modal inside animates */
.moverlay.open .modal{animation:modalIn 0.2s cubic-bezier(0.16,1,0.3,1) both;}
.cmdbox{animation:modalIn 0.18s cubic-bezier(0.16,1,0.3,1) both;}

/* ── BUTTON ACTIVE/PRESS STATES ── */
.btn-s{transition:opacity 0.15s var(--ease),transform 0.1s var(--ease);}
.btn-s:hover{opacity:0.85;}
.btn-s:active{transform:scale(0.96);}
.btn-x{transition:all 0.15s var(--ease);}
.btn-x:active{transform:scale(0.97);}
.sh-btn:active{transform:scale(0.97) !important;}
.imp-btn:active{transform:scale(0.97);}
.data-btn:active{transform:scale(0.97);}
.theme-btn:active{transform:scale(0.96);}

/* ── FORM CONTROLS — native arrow hidden, custom arrow added ── */
.modal select,
select#m-cat,select#rename-input,
select#imp-bm-cat,select#imp-prompt-cat{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888892' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
  padding-right:32px !important;
  cursor:pointer;
}

/* ── INPUT FOCUS GLOW ── */
.modal input:focus,.modal select:focus,
.prompt-textarea:focus{
  box-shadow:0 0 0 2px var(--adim2);
}
.search-wrap input:focus{box-shadow:0 0 0 2px var(--adim2);}
.lg-email-input:focus{box-shadow:0 0 0 2px var(--adim2);}

/* ── IMPORT DROP ZONE ── */
.import-drop{
  transition:border-color 0.2s var(--ease),background 0.2s var(--ease),color 0.2s var(--ease);
}

/* ── STACK CARD SHADOW ── */
.stack-card{box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.stack-card:hover{box-shadow:0 8px 32px rgba(0,0,0,0.35);}

/* ── TOPBAR DEPTH ── */
.topbar{box-shadow:0 1px 0 var(--border),0 4px 24px rgba(0,0,0,0.15);}

/* ── RECENT PILL DEPTH ── */
.rpill{box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);}

/* ── CAT TAB ACTIVE GLOW ── */
.cat-tab.active{box-shadow:0 4px 16px rgba(56,189,248,0.18),0 2px 4px rgba(0,0,0,0.3);}

/* ── HIGHLIGHTED APP GLOW ── */
.app-tile.highlighted .icon-wrap{
  border-color:rgba(240,192,64,0.55);
  box-shadow:0 0 12px rgba(240,192,64,0.3),0 0 32px rgba(240,192,64,0.08);
}

/* ── PROFILE CARD HOVER SHADOW ── */

/* ── COMMAND PALETTE SELECTED ITEM ── */
.cdi-item.sel .cdi-name{color:var(--accent);}

/* ── CONTEXT MENU SEP FIX ── */
.ctx-sep{border:none;height:1px;background:var(--border);margin:3px 4px;}

/* ── TOAST SHADOW ── */
.toast{box-shadow:0 8px 32px rgba(0,0,0,0.5),0 0 0 1px rgba(56,189,248,0.06);}

/* ── LOGO HOVER ── */
.logo{transition:opacity 0.15s;}
.logo:hover{opacity:0.8;}

/* ── LANDING NAV BLUR ── */
.lg-nav{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}

/* ── LANDING FEATURE CARD TOP LINE ── */
.lg-fcard{position:relative;overflow:hidden;}
.lg-fcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(56,189,248,0.1),transparent);
  opacity:0;transition:opacity 0.3s;
}
.lg-fcard:hover::before{opacity:1;}
.lg-fhero::before{opacity:1;background:linear-gradient(to right,transparent,var(--ab),transparent);}

/* ── LANDING STAT HOVER ── */
.lg-nstat{transition:background 0.2s var(--ease);}
.lg-nstat:hover{background:var(--s1);}

/* ── LANDING HERO BTN ACTIVE ── */
.lg-hero-btn:active{transform:scale(0.97);}

/* ── LANDING AUTH BOX SHADOW ── */
.lg-auth-box{
  box-shadow:0 40px 100px rgba(0,0,0,0.6),
             0 0 0 1px rgba(255,255,255,0.03),
             0 0 80px rgba(56,189,248,0.03);
}

/* ── CUSTOM SCROLLBARS (thin, consistent) ── */
.onboard-modal::-webkit-scrollbar,
.cats-list::-webkit-scrollbar,
.cdres::-webkit-scrollbar,
.import-preview::-webkit-scrollbar,
.modal::-webkit-scrollbar{width:3px;}
.onboard-modal::-webkit-scrollbar-thumb,
.cats-list::-webkit-scrollbar-thumb,
.cdres::-webkit-scrollbar-thumb,
.import-preview::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb{background:var(--bh);border-radius:3px;}
html.light ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);}

/* ── LIGHT MODE OVERRIDES ── */
html.light .sync-status-bar{background:var(--s2);}
html.light .setting-box{background:var(--s2);}
html.light .sync-mode-opt{background:var(--s2);}
html.light .sync-mode-opt:hover{background:var(--s3);}
html.light .new-cat-input{background:var(--s2);}
html.light .session-row{background:var(--s2);}

/* ── RESPONSIVE — MOBILE ── */
@media(max-width:768px){
  .topbar{padding:0 14px;gap:6px;}
  .topbar-mid{display:none;}
  .search-wrap input{width:130px;font-size:10px;}
  .search-wrap input:focus{width:155px;}
  .section{padding:20px 14px 0;}
  .sec-divider{margin:20px 14px 0;}
  .recent-strip{padding:0 14px;}
  .stacks-flow{grid-template-columns:1fr;}
  .sh-title{font-size:18px;}
  .modal{padding:20px;}
  .cmdbox{width:96vw;}
  .section-head{gap:8px;}
  .sh-btn{font-size:10px;padding:5px 10px;}
}
@media(max-width:520px){
  .onboard-step{padding:24px 20px;}
  .onboard-cards,.onboard-stack-grid{grid-template-columns:1fr;}
  .onboard-title{font-size:30px;}
  .lg-nav{padding:0 16px;height:52px;}
  .lg-auth-box{padding:22px 18px;}
  .lg-signin-inner{padding:72px 18px 56px;}
  .lg-numbers{grid-template-columns:1fr 1fr;}
  .lg-prob-grid{padding:60px 0;}
  .lg-feat-grid{border-radius:12px;}
}

/* ── END POLISH LAYER v2 ── */


/* ── MFA / AUTHENTICATOR SECURITY — safe MVP add-on ── */
.mfa-status-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:var(--s2);border:1px solid var(--border);margin-bottom:12px;}
.mfa-status-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);box-shadow:none;flex-shrink:0;}
.mfa-status-dot.on{background:#4ade80;box-shadow:0 0 12px rgba(74,222,128,.45);}
.mfa-status-main{flex:1;min-width:0;}
.mfa-status-title{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;}
.mfa-status-desc{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted2);line-height:1.6;}
.mfa-setup-box{display:none;margin-top:12px;padding:16px;border-radius:14px;background:var(--s2);border:1px solid var(--bh);}
.mfa-setup-box.open{display:block;}
.mfa-qr{width:210px;max-width:100%;display:block;background:white;padding:12px;border-radius:14px;margin:12px 0;}
.mfa-secret{display:block;background:var(--s3);border:1px solid var(--border);border-radius:8px;padding:9px 10px;font-family:'DM Mono',monospace;font-size:10px;color:var(--muted2);word-break:break-all;margin-bottom:10px;}
.mfa-code-input{width:100%;background:var(--s1);border:1px solid var(--bh);border-radius:9px;padding:10px 12px;color:var(--text);font-family:'DM Mono',monospace;font-size:13px;letter-spacing:2px;outline:none;margin-bottom:10px;}
.mfa-code-input:focus{border-color:var(--ab);}
.mfa-login-gate{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:22px;}
.mfa-login-card{width:390px;max-width:94vw;background:var(--s1);border:1px solid var(--bh);border-radius:20px;padding:28px;box-shadow:0 40px 120px rgba(0,0,0,.75);}
.mfa-login-card h1{font-family:'Bebas Neue',sans-serif;font-size:40px;line-height:.95;color:var(--text);margin-bottom:10px;}
.mfa-login-card p{font-family:'DM Mono',monospace;font-size:11px;line-height:1.8;color:var(--muted2);margin-bottom:16px;}



/* ══════════════════════════════════════════════════════════
   LINK SHIELD — warning modal + blocked tile styles
   ══════════════════════════════════════════════════════════ */

.ls-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: lsFadeIn 0.15s ease;
}
@keyframes lsFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ls-card {
  background: var(--surface, #111114);
  border: 1px solid var(--border, #222228);
  border-radius: 14px;
  padding: 28px 28px 24px;
  max-width: 420px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

.ls-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.ls-shield-icon { font-size: 20px; }
.ls-title {
  font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500;
  color: var(--text, #f0f0f0); flex: 1;
}
.ls-badge {
  font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500;
  padding: 3px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.08em;
}
.ls-caution   { background: rgba(255,180,0,0.15);  color: #ffb400; border: 1px solid rgba(255,180,0,0.3); }
.ls-dangerous { background: rgba(255,80,80,0.15);  color: #ff5050; border: 1px solid rgba(255,80,80,0.3); }
.ls-blocked   { background: rgba(255,50,50,0.18);  color: #ff3333; border: 1px solid rgba(255,50,50,0.3); }

.ls-desc {
  font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted, #888);
  margin-bottom: 14px; line-height: 1.6;
}
.ls-domain {
  font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text, #f0f0f0);
  background: var(--bg, #0a0a0c); border: 1px solid var(--border, #222228);
  border-radius: 6px; padding: 8px 12px; margin-bottom: 12px;
  word-break: break-all;
}
.ls-reasons {
  margin: 0 0 12px; padding: 0 0 0 16px;
  font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted, #888);
  line-height: 1.8;
}
.ls-full-url {
  font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted, #888);
  margin-bottom: 20px; word-break: break-all; opacity: 0.7;
}
.ls-actions { display: flex; gap: 10px; }
.ls-btn-back {
  flex: 1; padding: 10px 0; border-radius: 8px; border: 1px solid var(--border, #222228);
  background: transparent; color: var(--text, #f0f0f0);
  font-family: 'DM Mono', monospace; font-size: 11px; cursor: pointer;
}
.ls-btn-back:hover { background: var(--surface2, #18181c); }
.ls-btn-open {
  flex: 1; padding: 10px 0; border-radius: 8px; border: 1px solid rgba(255,180,0,0.4);
  background: rgba(255,180,0,0.1); color: #ffb400;
  font-family: 'DM Mono', monospace; font-size: 11px; cursor: pointer;
}
.ls-btn-open:hover { background: rgba(255,180,0,0.18); }

/* Blocked / caution tile styles */
.app-tile.is-blocked-link {
  opacity: 0.45; cursor: not-allowed; position: relative;
}
.app-tile.is-blocked-link::after {
  content: '🛡';
  position: absolute; top: 4px; right: 4px; font-size: 10px; opacity: 0.7;
}

/* Import preview caution row */
.imp-bm-caution .imp-bm-name { color: #ffb400; }
.imp-bm-flag { color: #ffb400; font-size: 11px; }


/* ── Login page: JS-failure fallback ─────────────────────
   If JS never boots (CSP block, CDN failure, parse error),
   the sign-in section would be invisible because .lg-sr starts
   at opacity:0. This rule ensures the sign-in box is always
   visible regardless of whether the scroll-reveal JS ran.
   The rest of the landing page can stay hidden — only the
   sign-in section matters for the user to take action.      */
#lg-signin .lg-sr {
  opacity: 1 !important;
  transform: none !important;
}


/* ══════════════════════════════════════════════════════════
   LINK SHIELD — Profile card UI
   ══════════════════════════════════════════════════════════ */
.ls-status-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px;border-radius:10px;
  background:var(--s2);border:1px solid var(--border);
  margin-bottom:14px;
}
.ls-status-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:3px;
  background:var(--muted);
}
.ls-status-dot.on{
  background:#4ade80;
  box-shadow:0 0 10px rgba(74,222,128,0.55);
}
.ls-status-main{flex:1;}
.ls-status-title{
  font-family:'Syne',sans-serif;font-size:13px;font-weight:700;
  color:var(--text);margin-bottom:5px;
}
.ls-status-desc{
  font-family:'DM Mono',monospace;font-size:10px;
  color:var(--muted2);line-height:1.7;
}
.ls-rules-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px;
}
@media(max-width:700px){.ls-rules-grid{grid-template-columns:1fr;}}
.ls-rule{
  border-radius:10px;padding:12px 14px;border:1px solid var(--border);
}
.ls-rule-block{
  background:rgba(255,50,50,0.06);border-color:rgba(255,50,50,0.2);
}
.ls-rule-caution{
  background:rgba(255,180,0,0.06);border-color:rgba(255,180,0,0.2);
}
.ls-rule-safe{
  background:rgba(74,222,128,0.06);border-color:rgba(74,222,128,0.2);
}
.ls-rule-label{
  font-family:'Syne',sans-serif;font-size:11px;font-weight:700;
  margin-bottom:6px;
}
.ls-rule-block   .ls-rule-label{color:#ff4444;}
.ls-rule-caution .ls-rule-label{color:#ffb400;}
.ls-rule-safe    .ls-rule-label{color:#4ade80;}
.ls-rule-desc{
  font-family:'DM Mono',monospace;font-size:9px;
  color:var(--muted2);line-height:1.65;
}
.ls-test-row{
  background:var(--s2);border:1px solid var(--border);
  border-radius:10px;padding:14px;
}

/* ── PROFILE EXTRAS ────────────────────────────────────── */
.pc-top-app{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--border);
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--muted);
  letter-spacing:0.3px;
}
.pc-top-app span{color:var(--accent);}

.toggle-row{
  display:flex;align-items:center;gap:12px;
  cursor:pointer;padding:4px 0;user-select:none;
}
.toggle-check{
  appearance:none;-webkit-appearance:none;
  width:36px;height:20px;border-radius:20px;
  background:var(--s3);border:1px solid var(--border);
  cursor:pointer;position:relative;flex-shrink:0;
  transition:background 0.2s,border-color 0.2s;
}
.toggle-check::after{
  content:'';position:absolute;
  top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;
  background:var(--muted);
  transition:transform 0.2s,background 0.2s;
}
.toggle-check:checked{background:var(--accent);border-color:var(--accent);}
.toggle-check:checked::after{transform:translateX(16px);background:#0a0a0c;}
.toggle-label{
  font-family:'DM Mono',monospace;font-size:11px;
  color:var(--muted2);line-height:1.5;
}

/* ── PROFILE RESPONSIVE ────────────────────────────────── */
@media(max-width:640px){
  .profile-wrap{grid-template-columns:1fr;}
  .profile-card.wide{grid-column:unset;}
  .pc-stat-row > div{min-width:60px;}
  .data-actions{flex-direction:column;}
  .data-btn{width:100%;justify-content:center;}
}


/* ══════════════════════════════════════════════════════════
   TOPBAR IMPROVEMENTS
   ══════════════════════════════════════════════════════════ */

/* Logo mark badge */
.logo-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--accent); color: #060608;
  font-family: 'Bebas Neue', sans-serif; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: -0.5px;
  box-shadow: 0 2px 8px rgba(56,189,248,0.25);
}

/* Nav pill icons */
.nav-pill-icon {
  font-size: 11px; margin-right: 4px; opacity: 0.6;
  transition: opacity 0.15s;
}
.nav-pill.active .nav-pill-icon,
.nav-pill:hover .nav-pill-icon { opacity: 1; }

/* Topbar sync dot */
.tb-sync-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}
.tb-sync-dot.ok      { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.5); }
.tb-sync-dot.syncing { background: var(--accent); box-shadow: 0 0 6px rgba(56,189,248,0.45); animation: tbPulse 1s ease-in-out infinite; }
.tb-sync-dot.err     { background: #ff6b6b; box-shadow: 0 0 6px rgba(255,107,107,0.4); }
@keyframes tbPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Topbar icon button (lock) */
.tb-icon-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--s2); border: 1px solid var(--border);
  color: var(--muted2); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.tb-icon-btn:hover {
  background: var(--s3); border-color: var(--bh);
  color: var(--text); transform: scale(1.06);
}
.tb-icon-btn:active { transform: scale(0.95); }

/* Mobile: hide sync dot label and shrink search */
@media(max-width:768px) {
  .tb-sync-dot { display: none; }
  .nav-pill-icon { display: none; }
}


/* ══════════════════════════════════════════════════════════
   PIN LOCK GATE  — mirrors mfa-login-gate / mfa-login-card
   ══════════════════════════════════════════════════════════ */

.pin-gate {
  position: fixed; inset: 0; z-index: 110000;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
}

.pin-card {
  width: 380px; max-width: 94vw;
  background: var(--s1); border: 1px solid var(--bh); border-radius: 20px;
  padding: 32px 28px 24px;
  box-shadow: 0 40px 120px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,0.03);
  animation: pinCardIn 0.22s var(--ease) both;
}
@keyframes pinCardIn {
  from { opacity:0; transform:translateY(14px) scale(0.97); }
  to   { opacity:1; transform:none; }
}

.pin-card-icon {
  font-size: 28px; margin-bottom: 10px; line-height: 1;
}

.pin-card h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px; line-height: .95;
  color: var(--text); margin-bottom: 10px;
}

.pin-card p {
  font-family: 'DM Mono', monospace;
  font-size: 11px; line-height: 1.8;
  color: var(--muted2); margin-bottom: 20px;
}

/* PIN dots */
.pin-dots {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: 8px;
}
.pin-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--bh);
  background: transparent;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.pin-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(56,189,248,0.45);
}

/* Error message */
.pin-error {
  font-family: 'DM Mono', monospace; font-size: 10px;
  color: #ff6b6b; text-align: center;
  min-height: 18px; margin-bottom: 6px;
  transition: color 0.15s;
}

/* Shake animation */
@keyframes pinShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.pin-shake { animation: pinShake 0.38s var(--ease); }

/* Numpad */
.pin-numpad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 14px 0 16px;
}
.pin-key {
  height: 52px; border-radius: 12px;
  background: var(--s2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 600;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.pin-key:hover  { background: var(--s3); border-color: var(--bh); }
.pin-key:active { transform: scale(0.93); background: var(--s3); }

.pin-key-ok {
  background: var(--accent); border-color: var(--accent);
  color: #060608;
}
.pin-key-ok:hover { background: #d4f548; border-color: #d4f548; }

.pin-key-clear {
  font-size: 16px; color: var(--muted2);
}

/* Footer */
.pin-footer {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 4px;
}
.pin-cancel-btn {
  padding: 9px 18px; border-radius: 9px;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted2); font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.pin-cancel-btn:hover { border-color: var(--bh); color: var(--text); }

.pin-signout-btn {
  padding: 9px 18px; border-radius: 9px;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); font-family: 'DM Mono', monospace;
  font-size: 10px; cursor: pointer;
  transition: color 0.15s;
}
.pin-signout-btn:hover { color: #ff6b6b; }

/* ── PIN settings card in Profile ── */
.pin-profile-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--s2); border: 1px solid var(--border);
  margin-bottom: 12px;
}
.pin-profile-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
}
.pin-profile-dot.on {
  background: #4ade80; box-shadow: 0 0 10px rgba(74,222,128,0.45);
}


/* ══════════════════════════════════════════════════════════
   STACKMAP COMMAND CENTRE REBUILD v1
   Calmer shell · better spacing · blue command-centre identity
   App logic preserved by keeping the original IDs/hooks.
══════════════════════════════════════════════════════════ */
:root{
  --bg:#070A0F;
  --s1:#0D1117;
  --s2:#111827;
  --s3:#1B2431;
  --border:rgba(148,163,184,0.10);
  --bh:rgba(148,163,184,0.20);
  --text:#F8FAFC;
  --muted:#5F6D80;
  --muted2:#94A3B8;
  --accent:#38BDF8;
  --adim:rgba(56,189,248,0.08);
  --adim2:rgba(56,189,248,0.14);
  --ab:rgba(56,189,248,0.28);
  --app-tile-size:96px;
  --app-icon-size:52px;
  --app-icon-inner:30px;
}
html.light{
  --bg:#F5F7FA;
  --s1:#FFFFFF;
  --s2:#EEF2F7;
  --s3:#E3E9F1;
  --border:rgba(15,23,42,0.08);
  --bh:rgba(15,23,42,0.15);
  --text:#0F172A;
  --muted:#94A3B8;
  --muted2:#475569;
  --accent:#0284C7;
  --adim:rgba(2,132,199,0.07);
  --adim2:rgba(2,132,199,0.13);
  --ab:rgba(2,132,199,0.24);
}
body{
  background:
    radial-gradient(circle at 20% -10%, rgba(56,189,248,0.10), transparent 36%),
    radial-gradient(circle at 88% 0%, rgba(139,92,246,0.09), transparent 28%),
    var(--bg);
}
body::before{opacity:0.18;}

/* Top command bar */
.command-topbar{
  height:72px;
  display:grid;
  grid-template-columns:minmax(170px,220px) minmax(280px,640px) auto;
  align-items:center;
  gap:18px;
  padding:0 32px;
  background:rgba(7,10,15,0.82);
  border-bottom:1px solid var(--border);
  box-shadow:0 12px 48px rgba(0,0,0,0.20);
}
html.light .command-topbar{background:rgba(245,247,250,0.86);}
.logo{gap:12px;min-width:0;}
.logo-stack{display:flex;flex-direction:column;line-height:1;min-width:0;}
.logo-wordmark{font-size:16px;letter-spacing:-0.5px;}
.logo-kicker{
  margin-top:5px;
  font-family:'DM Mono',monospace;
  font-size:8px;
  color:var(--muted2);
  letter-spacing:1.8px;
  text-transform:uppercase;
  white-space:nowrap;
}
.logo-mark{
  width:32px;height:32px;border-radius:11px;
  background:linear-gradient(135deg,var(--accent),#8B5CF6);
  box-shadow:0 12px 34px rgba(56,189,248,0.20);
}
.topbar-mid{justify-content:center;min-width:0;}
.command-search{width:100%;max-width:640px;}
.command-search input{
  width:100%;
  height:44px;
  border-radius:15px;
  padding:0 48px 0 42px;
  background:rgba(13,17,23,0.92);
  border:1px solid var(--bh);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03), 0 18px 44px rgba(0,0,0,0.18);
  font-size:12px;
}
html.light .command-search input{background:rgba(255,255,255,0.92);}
.command-search input:focus{
  width:100%;
  border-color:var(--ab);
  background:var(--s1);
  box-shadow:0 0 0 4px var(--adim), 0 18px 44px rgba(0,0,0,0.22);
}
.command-search .si{left:15px;font-size:13px;color:var(--accent);}
.command-search .sk{right:12px;padding:3px 7px;border-radius:7px;color:var(--muted2);}
.topbar-right{gap:8px;min-width:0;}
.view-switcher{
  background:transparent;
  border-color:transparent;
  padding:0;
  gap:3px;
}
.view-switcher .nav-pill{
  padding:7px 10px;
  border-radius:10px;
  color:var(--muted2);
}
.view-switcher .nav-pill.active{
  background:var(--s2);
  border:1px solid var(--bh);
  color:var(--text);
  box-shadow:none;
}
.tb-action-btn{
  height:34px;
  border-radius:10px;
  padding:0 13px;
  border:1px solid var(--border);
  font-family:'Syne',sans-serif;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
  transition:transform .14s var(--ease),border-color .14s,background .14s,color .14s;
}
.tb-action-btn:hover{transform:translateY(-1px);}
.tb-action-btn.ghost{background:var(--s1);color:var(--muted2);}
.tb-action-btn.ghost:hover{border-color:var(--bh);color:var(--text);}
.tb-action-btn.primary{background:var(--accent);border-color:var(--accent);color:#041018;}
.tb-action-btn.upgrade{background:linear-gradient(135deg,#fbbf24,#f59e0b);border-color:transparent;color:#1a1200;font-weight:800;}
.tb-action-btn.upgrade:hover{filter:brightness(1.08);}
.tb-icon-btn,.auth-user-btn{height:34px;border-radius:10px;background:var(--s1);}
.auth-user-name{max-width:70px;}
.tb-sync-dot{margin:0 2px;}

/* Main canvas */
.page{
  max-width:1180px;
  margin:0 auto;
  padding:42px 32px 120px;
}
.section{padding:0;margin-bottom:58px;}
.section:last-child{padding-bottom:0;}
.sec-divider{display:none;}
.section-head{
  margin-bottom:24px;
  align-items:flex-end;
  gap:16px;
}
.launch-head{margin-bottom:18px;}
.launch-title-wrap{display:flex;flex-direction:column;gap:6px;min-width:0;}
.sh-label{
  font-size:9px;
  letter-spacing:2.6px;
  color:var(--accent);
}
.sh-title{
  font-family:'Syne',sans-serif;
  font-size:34px;
  line-height:1;
  letter-spacing:-1.4px;
  color:var(--text);
}
.sh-sub{
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:var(--muted2);
  line-height:1.7;
  max-width:520px;
}
.sh-count{
  margin-left:auto;
  color:var(--muted2);
  background:var(--s1);
  border:1px solid var(--border);
  padding:7px 10px;
  border-radius:10px;
}
.section-head .sh-btn{display:none;}

/* Recent is now a soft card inside the launcher */
.launch-recent{
  height:auto;
  min-height:54px;
  margin:0 0 34px;
  padding:13px 16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,0.035),rgba(255,255,255,0.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
.launch-recent::after{display:none;}
.launch-recent .rl{letter-spacing:2px;color:var(--muted2);}
.launch-recent .rdiv{background:var(--border);}
.launch-recent .rpill{
  background:rgba(56,189,248,0.06);
  border-color:rgba(56,189,248,0.16);
  color:var(--accent);
  border-radius:9px;
  padding:6px 10px;
}
.launch-recent .rempty{color:var(--muted);}

/* Kill duplicate category navigation; the map itself is the nav */
.cat-tabs{display:none!important;}
.cat-block{margin-bottom:44px;}
.cat-block-label{
  margin-bottom:15px;
  gap:11px;
}
.cat-block-label::after{background:linear-gradient(to right,var(--border),transparent);}
.cat-label-dot{
  width:7px;height:7px;
  background:var(--accent);
  box-shadow:0 0 18px rgba(56,189,248,0.42);
}
.cat-label-text{
  font-size:14px;
  color:var(--text);
  letter-spacing:-0.2px;
}
.cat-edit-btn,.cat-delete-btn{opacity:0.36;}
.cat-block:hover .cat-edit-btn,.cat-block:hover .cat-delete-btn{opacity:1;}
.dock-grid{
  gap:8px 10px;
  padding:2px 0;
}
.app-tile,.add-tile{
  width:var(--app-tile-size);
  flex-basis:var(--app-tile-size);
  padding:12px 9px;
  gap:8px;
  border-radius:18px;
}
.app-tile:hover{background:rgba(255,255,255,0.025);}
.icon-wrap{
  border-radius:16px;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border-color:var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.18);
}
.app-tile:hover .icon-wrap{
  transform:translateY(-3px) scale(1.045);
  border-color:var(--ab);
}
.t-name{font-size:10.5px;color:var(--muted2);}
.add-tile .icon-wrap{background:transparent;border-color:var(--bh);}
.app-tile::after{display:none;}

/* Cards and settings */
.stacks-flow{gap:14px;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));}
.stack-card,.profile-card,.modal,.cmdbox{
  border-color:var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.025);
}
.stack-card,.profile-card{border-radius:20px;background:rgba(13,17,23,0.72);}
.stack-card:hover,.profile-card:hover{border-color:var(--bh);background:rgba(17,24,39,0.82);}
.profile-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.pc-label{color:var(--muted2);}
.pc-stat-n{font-size:34px;}
.setting-box{background:rgba(17,24,39,0.70);border-radius:16px;}

/* Advanced settings collapse */
.settings-advanced{
  padding:0;
  overflow:visible;
}
.settings-advanced::before{display:none;}
.settings-advanced > summary{
  list-style:none;
  cursor:pointer;
  padding:20px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.settings-advanced > summary::-webkit-details-marker{display:none;}
.settings-advanced summary strong{
  display:block;
  font-family:'Syne',sans-serif;
  font-size:15px;
  color:var(--text);
  margin-bottom:5px;
}
.settings-advanced summary small{
  display:block;
  font-family:'DM Mono',monospace;
  font-size:10px;
  line-height:1.6;
  color:var(--muted2);
}
.settings-advanced summary em{
  font-style:normal;
  font-family:'DM Mono',monospace;
  font-size:10px;
  color:var(--accent);
  border:1px solid var(--ab);
  background:var(--adim);
  padding:7px 10px;
  border-radius:10px;
}
.settings-advanced[open] summary em{font-size:0;}
.settings-advanced[open] summary em::after{content:'Close';font-size:10px;}
.advanced-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding:0 14px 14px;
}
.advanced-grid .profile-card{background:rgba(7,10,15,0.28);}

/* Modals / palette feel */
.moverlay{background:rgba(3,7,12,0.72);backdrop-filter:blur(14px);}
.modal,.cmdbox{border-radius:22px;box-shadow:0 34px 100px rgba(0,0,0,.58);}
.btn-s,.sh-btn,.imp-btn,.onboard-btn-next{background:var(--accent);color:#041018;}
.toast{border-color:var(--ab);color:var(--accent);}

/* Responsive command bar */
@media(max-width:1040px){
  .command-topbar{grid-template-columns:minmax(140px,190px) minmax(220px,1fr) auto;padding:0 20px;gap:12px;}
  .view-switcher .nav-pill{font-size:10px;padding:7px 8px;}
  .tb-action-btn.ghost{display:none;}
}
@media(max-width:840px){
  .command-topbar{height:auto;grid-template-columns:1fr auto;padding:14px 16px;}
  .topbar-mid{grid-column:1/-1;order:3;width:100%;}
  .topbar-right{justify-content:flex-end;}
  .view-switcher{display:none;}
  .command-search{max-width:none;}
  .page{padding:30px 16px 100px;}
  .profile-wrap{grid-template-columns:1fr;}
  .sh-title{font-size:29px;}
  .launch-recent{margin-bottom:26px;}
}
@media(max-width:560px){
  :root{--app-tile-size:82px;--app-icon-size:46px;--app-icon-inner:27px;}
  .logo-kicker{display:none;}
  .logo-wordmark{font-size:15px;}
  .tb-action-btn.primary{padding:0 10px;font-size:10px;}
  .auth-user-name{display:none;}
  .command-search input{height:42px;}
  .section-head{align-items:flex-start;}
  .sh-count{margin-left:0;}
}


/* ═════════════════════════════════════════════════════════════
   STACKMAP V3 — obvious command-centre rebuild
   - wordmark-only logo
   - category rail where Recent was
   - landing demo mirrors real app
   - modern settings surface
═════════════════════════════════════════════════════════════ */
:root{
  --bg:#060912;
  --s1:#0c111d;
  --s2:#111827;
  --s3:#1b2535;
  --border:rgba(148,163,184,0.10);
  --bh:rgba(148,163,184,0.20);
  --text:#f8fafc;
  --muted:#475569;
  --muted2:#94a3b8;
  --accent:#38bdf8;
  --accent2:#8b5cf6;
  --adim:rgba(56,189,248,0.08);
  --adim2:rgba(56,189,248,0.14);
  --ab:rgba(56,189,248,0.30);
  --app-tile-size:102px;
  --app-icon-size:56px;
  --app-icon-inner:31px;
}
body{
  background:
    radial-gradient(circle at 18% -10%, rgba(56,189,248,.16), transparent 32%),
    radial-gradient(circle at 82% 0%, rgba(139,92,246,.12), transparent 36%),
    linear-gradient(180deg,#060912 0%,#070a12 45%,#05070d 100%) !important;
}
body::before{opacity:.18;}

/* Topbar: stronger visual change, wordmark only */
.command-topbar{
  position:sticky;
  top:0;
  height:68px;
  display:grid;
  grid-template-columns:170px minmax(300px,1fr) auto;
  gap:18px;
  align-items:center;
  padding:0 30px;
  background:rgba(6,9,18,.76) !important;
  border-bottom:1px solid rgba(148,163,184,.12);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.logo.logo-word-only{
  display:flex;
  align-items:center;
  gap:0;
  width:auto;
  min-width:0;
}
.logo-mark,.logo-kicker{display:none!important;}
.logo.logo-word-only .logo-wordmark{
  font-family:'Syne',sans-serif;
  font-size:20px;
  font-weight:850;
  letter-spacing:-.9px;
  color:var(--text);
}
.logo.logo-word-only .logo-wordmark span{color:var(--accent);}
.command-search{
  max-width:680px;
  width:100%;
  margin:0 auto;
}
.command-search input{
  width:100%!important;
  height:44px;
  border-radius:16px;
  padding-left:46px;
  padding-right:58px;
  font-size:12px;
  background:rgba(12,17,29,.86);
  border:1px solid rgba(148,163,184,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.18);
}
.command-search input:focus{
  border-color:rgba(56,189,248,.46);
  box-shadow:0 0 0 4px rgba(56,189,248,.08),0 18px 44px rgba(0,0,0,.26);
}
.command-search .si{left:18px;color:var(--accent);font-size:14px;}
.command-search .sk{right:13px;border-radius:8px;padding:4px 7px;background:rgba(255,255,255,.06);color:var(--muted2);}
.topbar-right{gap:8px;}
.view-switcher{
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(148,163,184,.12)!important;
  border-radius:14px!important;
  padding:4px!important;
}
.view-switcher .nav-pill{
  border-radius:10px!important;
  padding:8px 11px!important;
  color:var(--muted2)!important;
}
.view-switcher .nav-pill.active{
  background:rgba(56,189,248,.14)!important;
  color:var(--accent)!important;
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.18)!important;
}
.tb-action-btn{
  height:36px;
  border-radius:12px;
  padding:0 14px;
}
.tb-action-btn.primary{
  background:linear-gradient(135deg,var(--accent),#7dd3fc)!important;
  color:#06111d!important;
  box-shadow:0 12px 28px rgba(56,189,248,.20);
}
.tb-action-btn.ghost{
  background:rgba(255,255,255,.04)!important;
}

/* Main canvas now looks like a calm app surface */
.page{
  max-width:1240px!important;
  padding:34px 30px 120px!important;
}
.launch-head{
  padding:22px 24px 4px;
  margin-bottom:14px!important;
}
.sh-title{font-size:38px!important;letter-spacing:-1.7px!important;}
.sh-sub{font-size:11.5px!important;color:#a7b3c5!important;}
.sh-count{background:rgba(255,255,255,.04)!important;border-color:rgba(148,163,184,.12)!important;}

/* Category rail replaces recently-opened; this should look obviously different */
.launch-categories{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:58px;
  margin:0 0 28px!important;
  padding:12px 14px 12px 18px!important;
  border-radius:22px!important;
  border:1px solid rgba(148,163,184,.14)!important;
  background:
    linear-gradient(135deg,rgba(56,189,248,.08),rgba(139,92,246,.045)),
    rgba(12,17,29,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 20px 60px rgba(0,0,0,.18);
  overflow:hidden;
}
.launch-categories .rl{
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--accent)!important;
  margin:0;
}
.launch-categories .rdiv{margin:0;width:1px;height:22px;background:rgba(148,163,184,.16);}
.category-tabs-rail.cat-tabs{
  display:flex!important;
  flex:1;
  gap:8px;
  margin:0!important;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
.category-tabs-rail.cat-tabs::-webkit-scrollbar{display:none;}
.category-tabs-rail .cat-tab{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px!important;
  border-radius:999px!important;
  font-size:10px!important;
  letter-spacing:.7px;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(148,163,184,.12)!important;
  color:#b7c4d6!important;
  white-space:nowrap;
  transform:none!important;
}
.category-tabs-rail .cat-tab:hover{
  color:#fff!important;
  border-color:rgba(56,189,248,.28)!important;
  background:rgba(56,189,248,.075)!important;
}
.category-tabs-rail .cat-tab.active{
  background:var(--accent)!important;
  color:#05101b!important;
  border-color:var(--accent)!important;
  box-shadow:0 12px 30px rgba(56,189,248,.20)!important;
}
.launch-categories .rpills{display:none!important;}

/* The actual map now uses contained category panels, not a plain page list */
#launcher-blocks{
  display:grid;
  gap:18px;
}
.cat-block{
  margin:0!important;
  padding:22px 22px 20px;
  border:1px solid rgba(148,163,184,.12);
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),
    rgba(12,17,29,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 60px rgba(0,0,0,.16);
}
.cat-block-label{
  margin-bottom:18px!important;
  padding:0 2px;
}
.cat-block-label::after{background:linear-gradient(to right,rgba(56,189,248,.28),transparent)!important;}
.cat-label-dot{
  width:8px!important;height:8px!important;
  background:linear-gradient(135deg,var(--accent),var(--accent2))!important;
  box-shadow:0 0 22px rgba(56,189,248,.48)!important;
}
.cat-label-text{
  font-family:'Syne',sans-serif!important;
  font-size:16px!important;
  font-weight:800!important;
  letter-spacing:-.45px!important;
}
.dock-grid{gap:12px!important;}
.app-tile,.add-tile{
  width:var(--app-tile-size)!important;
  flex-basis:var(--app-tile-size)!important;
  min-height:104px;
  border:1px solid transparent;
  background:transparent;
}
.app-tile:hover,.add-tile:hover{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(148,163,184,.10);
}
.icon-wrap{
  width:var(--app-icon-size)!important;
  height:var(--app-icon-size)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(30,41,59,.94),rgba(15,23,42,.96))!important;
  border:1px solid rgba(148,163,184,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 15px 35px rgba(0,0,0,.24)!important;
}
.app-tile:hover .icon-wrap{
  transform:translateY(-4px) scale(1.035)!important;
  border-color:rgba(56,189,248,.38)!important;
  box-shadow:0 18px 42px rgba(56,189,248,.10),0 18px 40px rgba(0,0,0,.28)!important;
}
.t-name{font-size:10.5px!important;color:#b8c4d7!important;}
.app-tile:hover .t-name{color:#fff!important;}

/* Landing product demo now mirrors real app */
.lg-preview-outer{
  border-radius:28px!important;
  border-color:rgba(148,163,184,.16)!important;
  box-shadow:0 45px 130px rgba(0,0,0,.48),0 0 80px rgba(56,189,248,.08)!important;
}
.lg-p-body{
  background:
    radial-gradient(circle at 18% 0, rgba(56,189,248,.14), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(139,92,246,.12), transparent 38%),
    #060912!important;
  padding:18px!important;
}
.lg-demo-shellbar{
  display:grid!important;
  grid-template-columns:auto minmax(160px,1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:14px!important;
}
.lg-p-wordmark{font-size:16px!important;}
.lg-demo-search{
  min-width:0;
  height:34px;
  border-radius:13px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  font-family:'DM Mono',monospace;
  font-size:9px;
  color:#a7b3c5;
  background:rgba(12,17,29,.84);
  border:1px solid rgba(148,163,184,.14);
}
.lg-demo-search b{
  margin-left:auto;
  font-size:8px;
  color:#cbd5e1;
  border:1px solid rgba(148,163,184,.16);
  border-radius:6px;
  padding:2px 5px;
}
.lg-demo-actions{display:flex;gap:6px;}
.lg-demo-actions span{
  font-family:'DM Mono',monospace;
  font-size:8px;
  padding:8px 9px;
  border-radius:10px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(148,163,184,.12);
  color:#b7c4d6;
}
.lg-demo-actions span:first-child{
  background:var(--accent);
  color:#05101b;
  border-color:var(--accent);
}
.lg-demo-catbar{
  display:flex;
  gap:7px;
  overflow:hidden;
  border-radius:16px;
  padding:8px;
  margin-bottom:18px;
  background:linear-gradient(135deg,rgba(56,189,248,.08),rgba(139,92,246,.04)),rgba(12,17,29,.78);
  border:1px solid rgba(148,163,184,.12);
}
.lg-demo-catbar span{
  font-family:'DM Mono',monospace;
  font-size:8px;
  white-space:nowrap;
  padding:7px 10px;
  border-radius:999px;
  color:#a7b3c5;
  background:rgba(255,255,255,.04);
}
.lg-demo-catbar span.active{background:var(--accent);color:#05101b;}
.lg-p-cat{
  border-top:1px solid rgba(148,163,184,.10);
  padding-top:14px;
  margin-top:16px!important;
}
.lg-p-grid{
  background:rgba(12,17,29,.42);
  border:1px solid rgba(148,163,184,.10);
  border-radius:20px;
  padding:12px!important;
  gap:10px!important;
}
.lg-p-tile{
  border-radius:16px!important;
  background:transparent!important;
  border:1px solid transparent!important;
}
.lg-p-tile:hover{background:rgba(255,255,255,.04)!important;}
.lg-p-ico{
  background:linear-gradient(180deg,rgba(30,41,59,.94),rgba(15,23,42,.96))!important;
  border-color:rgba(148,163,184,.13)!important;
  border-radius:15px!important;
}

/* Settings: modern panels and smoother controls */
.settings-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:0 0 18px;
  padding:24px;
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(56,189,248,.11),rgba(139,92,246,.075)),
    rgba(12,17,29,.72);
  border:1px solid rgba(148,163,184,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 22px 70px rgba(0,0,0,.20);
}
.settings-hero-kicker{
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--accent);
}
.settings-hero h3{
  font-family:'Syne',sans-serif;
  font-size:24px;
  letter-spacing:-1px;
  margin:7px 0 6px;
  color:var(--text);
}
.settings-hero p{
  font-family:'DM Mono',monospace;
  font-size:11px;
  color:#a7b3c5;
  line-height:1.7;
  max-width:720px;
}
.settings-hero-btn{
  border:0;
  border-radius:14px;
  padding:12px 16px;
  background:linear-gradient(135deg,var(--accent),#7dd3fc);
  color:#06111d;
  font-family:'Syne',sans-serif;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 14px 34px rgba(56,189,248,.20);
}
.settings-grid-modern.profile-wrap{
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:16px!important;
}
.settings-grid-modern > .profile-card{
  grid-column:span 6;
}
.settings-grid-modern > .profile-card.wide,
.settings-grid-modern > .settings-advanced{
  grid-column:1/-1;
}
.profile-card{
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),rgba(12,17,29,.64)!important;
  border:1px solid rgba(148,163,184,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 54px rgba(0,0,0,.16)!important;
}
.profile-card:hover{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.22)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)),rgba(12,17,29,.74)!important;
}
.pc-label{
  color:#cbd5e1!important;
  letter-spacing:2.4px!important;
}
.pc-label::after{background:linear-gradient(to right,rgba(56,189,248,.22),transparent)!important;}
.pc-stat-row > div{border-color:rgba(148,163,184,.10)!important;}
.pc-stat-n{font-size:38px!important;}
.pc-stat-accent{color:var(--accent)!important;}
.setting-box,.sync-mode-opt,.cats-list-row,.new-cat-input,.data-btn,.theme-option{
  border-radius:14px!important;
  background:rgba(15,23,42,.62)!important;
  border-color:rgba(148,163,184,.12)!important;
}
.sync-mode-opt:hover,.cats-list-row:hover,.data-btn:hover,.theme-option:hover{
  border-color:rgba(56,189,248,.24)!important;
  background:rgba(30,41,59,.64)!important;
}
.sync-mode-opt.active,.theme-option.active{
  background:rgba(56,189,248,.10)!important;
  border-color:rgba(56,189,248,.30)!important;
  color:var(--accent)!important;
}
.theme-option.active{box-shadow:inset 0 0 0 1px rgba(56,189,248,.16);}
.settings-advanced > summary{
  border-radius:24px;
  background:linear-gradient(135deg,rgba(56,189,248,.075),rgba(139,92,246,.045));
}
.settings-advanced summary em{
  border-radius:999px!important;
  background:rgba(56,189,248,.10)!important;
}
.advanced-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  padding:16px!important;
}
.advanced-grid .profile-card.wide{grid-column:1/-1;}
input,button,select,textarea,.app-tile,.cat-tab,.profile-card{
  transition:background-color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease)!important;
}
:focus-visible{outline:2px solid rgba(56,189,248,.72);outline-offset:3px;}

@media(max-width:980px){
  .command-topbar{grid-template-columns:1fr auto;height:auto;padding:14px 18px;}
  .topbar-mid{grid-column:1/-1;order:3;}
  .view-switcher{display:none!important;}
  .tb-action-btn.ghost{display:none!important;}
  .settings-grid-modern.profile-wrap{grid-template-columns:1fr!important;}
  .settings-grid-modern > .profile-card{grid-column:1/-1;}
  .advanced-grid{grid-template-columns:1fr!important;}
}
@media(max-width:640px){
  :root{--app-tile-size:86px;--app-icon-size:48px;--app-icon-inner:28px;}
  .page{padding:24px 14px 100px!important;}
  .launch-head{padding:14px 4px 0;}
  .launch-categories{border-radius:18px!important;align-items:flex-start;flex-direction:column;gap:10px;}
  .launch-categories .rdiv{display:none;}
  .category-tabs-rail.cat-tabs{width:100%;}
  .cat-block{padding:18px 14px;}
  .settings-hero{align-items:flex-start;flex-direction:column;padding:20px;}
  .settings-hero-btn{width:100%;}
  .lg-demo-shellbar{grid-template-columns:1fr;}
  .lg-demo-actions{display:none;}
}

/* ═════════════════════════════════════════════════════════════
   STACKMAP V4 — eye comfort + app hover polish + highlight fix
   Requested changes:
   - use the deeper dark colour from the lower scrolled page
   - make apps softer/easier on the eyes
   - hover makes name clearer
   - only the favicon/icon zooms, not the surrounding box
   - highlighted apps are visibly highlighted
═════════════════════════════════════════════════════════════ */
:root{
  --bg:#03050a;
  --s1:#080c14;
  --s2:#0d1420;
  --s3:#141f2f;
  --border:rgba(148,163,184,.085);
  --bh:rgba(148,163,184,.17);
  --text:#f7fbff;
  --muted:#526174;
  --muted2:#a7b4c7;
  --accent:#38bdf8;
  --accent2:#7c3aed;
  --adim:rgba(56,189,248,.07);
  --adim2:rgba(56,189,248,.12);
  --ab:rgba(56,189,248,.26);
}

body,
.login-gate{
  background:
    radial-gradient(circle at 18% -12%, rgba(56,189,248,.105), transparent 30%),
    radial-gradient(circle at 86% -8%, rgba(124,58,237,.075), transparent 35%),
    linear-gradient(180deg,#040711 0%,#03050a 38%,#02040a 100%) !important;
}

.command-topbar{
  background:rgba(3,5,10,.82)!important;
  border-bottom-color:rgba(148,163,184,.10)!important;
}

.command-search input,
.launch-categories,
.cat-block,
.profile-card,
.stack-card,
.modal,
.cmdbox{
  background:
    linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012)),
    rgba(8,12,20,.72)!important;
}

/* Softer app panels */
.cat-block{
  border-color:rgba(148,163,184,.095)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028),0 16px 44px rgba(0,0,0,.14)!important;
}

.dock-grid{
  gap:14px 12px!important;
}

.app-tile,
.add-tile{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.app-tile:hover,
.add-tile:hover,
.app-tile:focus-visible,
.add-tile:focus-visible{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}

.icon-wrap{
  position:relative;
  transform:none!important;
  background:
    linear-gradient(180deg,rgba(22,31,46,.92),rgba(9,14,24,.96))!important;
  border-color:rgba(148,163,184,.105)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 30px rgba(0,0,0,.22)!important;
}

.app-tile:hover .icon-wrap,
.add-tile:hover .icon-wrap{
  transform:none!important;
  border-color:rgba(56,189,248,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 14px 34px rgba(0,0,0,.26)!important;
}

.icon-wrap img,
.icon-wrap .il{
  transition:transform .18s var(--ease), filter .18s var(--ease), color .18s var(--ease)!important;
  transform-origin:center;
}

.app-tile:hover .icon-wrap img,
.app-tile:focus-visible .icon-wrap img,
.add-tile:hover .icon-wrap img,
.add-tile:focus-visible .icon-wrap img{
  transform:scale(1.16)!important;
  filter:brightness(1.12) saturate(1.08);
}

.app-tile:hover .icon-wrap .il,
.app-tile:focus-visible .icon-wrap .il,
.add-tile:hover .icon-wrap .il,
.add-tile:focus-visible .icon-wrap .il{
  transform:scale(1.12)!important;
  color:#e0f7ff!important;
}

.t-name{
  min-height:18px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:3px 6px;
  border-radius:999px;
  color:#b9c7da!important;
  font-size:10.8px!important;
  line-height:1.2!important;
  font-weight:650!important;
  letter-spacing:-.12px;
  text-shadow:0 1px 10px rgba(0,0,0,.24);
  transition:background-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease)!important;
}

.app-tile:hover .t-name,
.app-tile:focus-visible .t-name{
  color:#fff!important;
  background:rgba(2,6,12,.78)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.055);
  font-weight:800!important;
  transform:translateY(1px);
}

/* Highlight is icon-only, visible, and supports multiple class names from old/new JS */
.app-tile.highlighted .icon-wrap,
.app-tile.is-highlighted .icon-wrap,
.app-tile.gold .icon-wrap,
.app-tile[data-highlighted="true"] .icon-wrap{
  border-color:rgba(251,191,36,.78)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(251,191,36,.22),
    0 0 22px rgba(251,191,36,.24),
    0 16px 38px rgba(0,0,0,.28)!important;
}

.app-tile.highlighted .icon-wrap::after,
.app-tile.is-highlighted .icon-wrap::after,
.app-tile.gold .icon-wrap::after,
.app-tile[data-highlighted="true"] .icon-wrap::after{
  content:'★';
  position:absolute;
  right:-5px;
  top:-6px;
  width:18px;
  height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  color:#120d02;
  background:linear-gradient(135deg,#fde68a,#f59e0b);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 18px rgba(245,158,11,.24);
}

.app-tile.highlighted .t-name,
.app-tile.is-highlighted .t-name,
.app-tile.gold .t-name,
.app-tile[data-highlighted="true"] .t-name{
  color:#f8d97a!important;
}

.app-tile.highlighted:hover .t-name,
.app-tile.is-highlighted:hover .t-name,
.app-tile.gold:hover .t-name,
.app-tile[data-highlighted="true"]:hover .t-name{
  color:#fff7d6!important;
  background:rgba(41,28,4,.80)!important;
}

.ctx-item.gold{
  color:#f8d97a!important;
}
.ctx-item.gold:hover{
  background:rgba(251,191,36,.10)!important;
  color:#fde68a!important;
}

/* Landing demo app tiles mirror the new hover language */
.lg-p-tile:hover{
  background:transparent!important;
}
.lg-p-tile:hover .lg-p-ico img{
  transform:scale(1.14);
}
.lg-p-ico img{
  transition:transform .18s var(--ease),filter .18s var(--ease);
}
.lg-p-tile:hover .lg-p-name{
  color:#fff!important;
}

/* ═════════════════════════════════════════════════════════════
   STACKMAP V5 — hover label removal + bright outline highlight + smoother Mac scroll
   Requested changes:
   - remove hover name pill/tooltip feeling
   - highlight is a bright outline around the app only
   - reduce scroll stutter by removing heavy fixed noise/backdrop filters/smooth scrolling
═════════════════════════════════════════════════════════════ */

/* Use normal/native scrolling. This helps Mac trackpads avoid the one-page/stutter feeling. */
html,
.lg-scroll{
  scroll-behavior:auto!important;
}

/* Performance: the fixed SVG noise layer and big blur filters are costly while scrolling. */
body::before{
  display:none!important;
}

.command-topbar,
.topbar,
.lg-nav{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.command-topbar{
  background:rgba(3,5,10,.96)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.18)!important;
}

/* Keep modals blurred, but lighter. */
.moverlay,
.cmdov,
.mfa-login-gate,
.onboard-overlay{
  backdrop-filter:blur(5px)!important;
  -webkit-backdrop-filter:blur(5px)!important;
}

/* Avoid expensive whole-card transitions while trackpad scrolling. */
.app-tile,
.add-tile,
.profile-card,
.stack-card,
.cat-block,
.command-topbar,
.launch-categories{
  will-change:auto!important;
}

/* App names: readable by default, no hover pill/label thing. */
.t-name{
  min-height:18px!important;
  padding:0!important;
  border-radius:0!important;
  color:#d8e2f0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-shadow:0 1px 8px rgba(0,0,0,.32)!important;
  font-weight:700!important;
}

.app-tile:hover .t-name,
.app-tile:focus-visible .t-name,
.app-tile.highlighted:hover .t-name,
.app-tile.is-highlighted:hover .t-name,
.app-tile.gold:hover .t-name,
.app-tile[data-highlighted="true"]:hover .t-name{
  color:#ffffff!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  font-weight:800!important;
}

/* Remove any tooltip/hover name bubble entirely. */
.app-tile::after,
.app-tile:hover::after,
.app-tile:focus-visible::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
}

/* Hover: only the favicon/letters zoom, not the box/container. */
.app-tile:hover,
.add-tile:hover,
.app-tile:focus-visible,
.add-tile:focus-visible{
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}

.app-tile:hover .icon-wrap,
.add-tile:hover .icon-wrap,
.app-tile:focus-visible .icon-wrap,
.add-tile:focus-visible .icon-wrap{
  transform:none!important;
  border-color:rgba(148,163,184,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 30px rgba(0,0,0,.22)!important;
}

.app-tile:hover .icon-wrap img,
.app-tile:focus-visible .icon-wrap img,
.add-tile:hover .icon-wrap img,
.add-tile:focus-visible .icon-wrap img{
  transform:scale(1.18)!important;
  filter:brightness(1.14) saturate(1.10)!important;
}

.app-tile:hover .icon-wrap .il,
.app-tile:focus-visible .icon-wrap .il,
.add-tile:hover .icon-wrap .il,
.add-tile:focus-visible .icon-wrap .il{
  transform:scale(1.15)!important;
  color:#e7f9ff!important;
}

/* Highlight: bright outline around the app only. No star, no filled gold box. */
.app-tile.highlighted,
.app-tile.is-highlighted,
.app-tile.gold,
.app-tile[data-highlighted="true"]{
  outline:2px solid #ffd84d!important;
  outline-offset:4px!important;
  border-radius:18px!important;
  background:transparent!important;
  box-shadow:0 0 0 1px rgba(255,216,77,.20),0 0 20px rgba(255,216,77,.30)!important;
}

.app-tile.highlighted .icon-wrap,
.app-tile.is-highlighted .icon-wrap,
.app-tile.gold .icon-wrap,
.app-tile[data-highlighted="true"] .icon-wrap{
  border-color:rgba(148,163,184,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 30px rgba(0,0,0,.22)!important;
}

.app-tile.highlighted .icon-wrap::after,
.app-tile.is-highlighted .icon-wrap::after,
.app-tile.gold .icon-wrap::after,
.app-tile[data-highlighted="true"] .icon-wrap::after{
  content:none!important;
  display:none!important;
}

.app-tile.highlighted .t-name,
.app-tile.is-highlighted .t-name,
.app-tile.gold .t-name,
.app-tile[data-highlighted="true"] .t-name{
  color:#ffe992!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* On smaller screens, keep outline closer so it does not clip. */
@media(max-width:640px){
  .app-tile.highlighted,
  .app-tile.is-highlighted,
  .app-tile.gold,
  .app-tile[data-highlighted="true"]{
    outline-offset:3px!important;
  }
}

/* ═════════════════════════════════════════════════════════════
   V6 — FLOATING CATEGORY RAIL
   Removes the boxed/category-card feel. Categories now float like
   lightweight navigation above the app map.
═════════════════════════════════════════════════════════════ */
.launch-categories,
.category-strip.launch-categories{
  min-height:40px!important;
  margin:0 0 26px!important;
  padding:2px 4px!important;
  border:none!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.launch-categories .rl{
  color:rgba(148,163,184,.72)!important;
  letter-spacing:2.6px!important;
}

.launch-categories .rdiv{
  width:1px!important;
  height:16px!important;
  background:rgba(148,163,184,.18)!important;
}

.category-tabs-rail.cat-tabs{
  gap:16px!important;
  align-items:center!important;
  overflow-x:auto!important;
  padding:3px 2px!important;
}

.category-tabs-rail .cat-tab{
  min-height:30px!important;
  padding:0 0 5px!important;
  border:none!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(203,213,225,.70)!important;
  font-family:'Syne',sans-serif!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:-.1px!important;
  text-transform:none!important;
  position:relative!important;
  transform:none!important;
}

.category-tabs-rail .cat-tab::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:var(--accent);
  opacity:0;
  transform:scaleX(.35);
  transform-origin:center;
  transition:opacity .16s var(--ease), transform .16s var(--ease);
  box-shadow:0 0 14px rgba(56,189,248,.38);
}

.category-tabs-rail .cat-tab:hover{
  color:#fff!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  transform:none!important;
}

.category-tabs-rail .cat-tab:hover::after{
  opacity:.45;
  transform:scaleX(.68);
}

.category-tabs-rail .cat-tab.active{
  color:#fff!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}

.category-tabs-rail .cat-tab.active::after{
  opacity:1;
  transform:scaleX(1);
}

/* keep mobile floating too */
@media(max-width:840px){
  .launch-categories,
  .category-strip.launch-categories{
    padding:0!important;
    gap:10px!important;
    align-items:flex-start!important;
  }
  .category-tabs-rail.cat-tabs{
    gap:14px!important;
    width:100%!important;
  }
}


/* ═════════════════════════════════════════════════════════════
   V7 — landing-page background, fixed theme modes, icon-only highlight
   Requested changes:
   - app uses the same deep landing-page background language
   - light/dark mode works visually again
   - highlighted app is only the icon outline, not a large app box
═════════════════════════════════════════════════════════════ */

/* App canvas now matches the landing hero: deep blue-black, soft glow, subtle grid. */
body:not(.app-locked){
  background:
    radial-gradient(circle at 50% -18%, rgba(56,189,248,.115), transparent 34%),
    radial-gradient(circle at 12% 4%, rgba(56,189,248,.060), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(124,58,237,.070), transparent 36%),
    linear-gradient(180deg,#050814 0%,#03050b 44%,#02040a 100%) !important;
  background-attachment:scroll!important;
}

body:not(.app-locked) .page{
  position:relative!important;
  isolation:isolate;
}

body:not(.app-locked) .page::before{
  content:'';
  position:absolute;
  inset:-90px -36px 0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 82% 70% at 50% 0%, black 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 82% 70% at 50% 0%, black 0%, transparent 78%);
  opacity:.72;
}

/* Keep the main chrome transparent enough that the landing-style background shows through. */
.command-topbar,
.topbar{
  background:rgba(3,5,10,.82)!important;
  border-bottom-color:rgba(148,163,184,.11)!important;
}

.command-search input,
.cat-block,
.profile-card,
.stack-card,
.modal,
.cmdbox,
.onboard-modal,
.lg-auth-box{
  background:
    linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012)),
    rgba(7,11,19,.68)!important;
}

/* Light mode: explicit overrides because earlier command-centre styles use !important. */
html.light body,
html.light body:not(.app-locked),
html.light .login-gate{
  background:
    radial-gradient(circle at 50% -18%, rgba(2,132,199,.145), transparent 34%),
    radial-gradient(circle at 12% 4%, rgba(14,165,233,.085), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(124,58,237,.070), transparent 34%),
    linear-gradient(180deg,#f8fafc 0%,#eef5fb 48%,#e9eef5 100%) !important;
  color:#0f172a!important;
}

html.light body:not(.app-locked) .page::before{
  background-image:
    linear-gradient(rgba(15,23,42,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.055) 1px, transparent 1px);
  opacity:.62;
}

html.light .command-topbar,
html.light .topbar,
html.light .lg-nav{
  background:rgba(248,250,252,.84)!important;
  border-bottom-color:rgba(15,23,42,.095)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.055)!important;
}

html.light .command-search input,
html.light .cat-block,
html.light .profile-card,
html.light .stack-card,
html.light .modal,
html.light .cmdbox,
html.light .onboard-modal,
html.light .lg-auth-box,
html.light .setting-box,
html.light .sync-mode-opt,
html.light .cats-list-row,
html.light .new-cat-input,
html.light .data-btn,
html.light .theme-option,
html.light .mfa-setup-box,
html.light .session-row{
  background:
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.52)),
    rgba(255,255,255,.72)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 14px 38px rgba(15,23,42,.045)!important;
}

html.light .cat-block{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 16px 44px rgba(15,23,42,.045)!important;
}

html.light .icon-wrap{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(239,246,255,.95))!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.90),0 12px 28px rgba(15,23,42,.075)!important;
}

html.light .t-name,
html.light .cat-label-text,
html.light .sh-title,
html.light .logo-wordmark,
html.light .pc-stat-n,
html.light .profile-hero h2,
html.light .lg-logo,
html.light .lg-p-wordmark{
  color:#0f172a!important;
  text-shadow:none!important;
}

html.light .sh-sub,
html.light .sh-count,
html.light .muted,
html.light .pc-label,
html.light .pc-stat-l,
html.light .setting-row,
html.light .sync-mode-desc,
html.light .cats-list-name,
html.light .category-tabs-rail .cat-tab,
html.light .lg-hero-sub,
html.light .lg-nav-status,
html.light .lg-nav-link{
  color:#475569!important;
}

html.light .app-tile:hover .t-name,
html.light .app-tile:focus-visible .t-name{
  color:#020617!important;
}

html.light .theme-option.active,
html.light .nav-pill.active,
html.light .sh-btn,
html.light .btn-s,
html.light .onboard-btn-next,
html.light .lg-hero-btn,
html.light .lg-btn-email{
  color:#f8fafc!important;
  background:#0284c7!important;
  border-color:#0284c7!important;
}

/* Theme buttons should look clickable and reflect active state in both modes. */
.theme-option[aria-pressed="true"],
.theme-option.active{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#06111d!important;
}
html.light .theme-option[aria-pressed="true"],
html.light .theme-option.active{
  color:#fff!important;
}

/* Highlight: icon-only outline. Remove the previous large tile outline completely. */
.app-tile.highlighted,
.app-tile.is-highlighted,
.app-tile.gold,
.app-tile[data-highlighted="true"]{
  outline:none!important;
  outline-offset:0!important;
  border-color:transparent!important;
  border-radius:14px!important;
  background:transparent!important;
  box-shadow:none!important;
}

.app-tile.highlighted .icon-wrap,
.app-tile.is-highlighted .icon-wrap,
.app-tile.gold .icon-wrap,
.app-tile[data-highlighted="true"] .icon-wrap{
  outline:2px solid #ffd84d!important;
  outline-offset:3px!important;
  border-color:rgba(255,216,77,.72)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.065),
    0 0 0 1px rgba(255,216,77,.16),
    0 0 22px rgba(255,216,77,.42),
    0 12px 30px rgba(0,0,0,.24)!important;
}

.app-tile.highlighted:hover .icon-wrap,
.app-tile.is-highlighted:hover .icon-wrap,
.app-tile.gold:hover .icon-wrap,
.app-tile[data-highlighted="true"]:hover .icon-wrap{
  outline-color:#ffe875!important;
  border-color:rgba(255,232,117,.85)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(255,232,117,.20),
    0 0 28px rgba(255,216,77,.52),
    0 14px 34px rgba(0,0,0,.26)!important;
}

.app-tile.highlighted .icon-wrap::after,
.app-tile.is-highlighted .icon-wrap::after,
.app-tile.gold .icon-wrap::after,
.app-tile[data-highlighted="true"] .icon-wrap::after{
  content:none!important;
  display:none!important;
}

.app-tile.highlighted .t-name,
.app-tile.is-highlighted .t-name,
.app-tile.gold .t-name,
.app-tile[data-highlighted="true"] .t-name{
  color:#ffe992!important;
  background:transparent!important;
  box-shadow:none!important;
}

html.light .app-tile.highlighted .t-name,
html.light .app-tile.is-highlighted .t-name,
html.light .app-tile.gold .t-name,
html.light .app-tile[data-highlighted="true"] .t-name{
  color:#92400e!important;
}

@media(max-width:640px){
  .app-tile.highlighted .icon-wrap,
  .app-tile.is-highlighted .icon-wrap,
  .app-tile.gold .icon-wrap,
  .app-tile[data-highlighted="true"] .icon-wrap{
    outline-offset:2px!important;
  }
}

/* ═════════════════════════════════════════════════════════════
   V8 — black app canvas + matched topbar action sizing
   Requested changes:
   - Import / + Add match Map / Stacks / Settings size
   - app background is black, not blue
   - highlight stays icon-only and less bulky
═════════════════════════════════════════════════════════════ */

/* Main app background: black landing-style depth, no blue wash. */
body:not(.app-locked){
  background:
    radial-gradient(circle at 50% -18%, rgba(255,255,255,.050), transparent 36%),
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.030), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(255,255,255,.025), transparent 34%),
    linear-gradient(180deg,#060606 0%,#030303 48%,#010101 100%) !important;
  background-color:#030303!important;
  background-attachment:scroll!important;
}

body:not(.app-locked) .page::before{
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px)!important;
  opacity:.48!important;
}

.command-topbar,
.topbar{
  background:rgba(3,3,3,.88)!important;
  border-bottom-color:rgba(255,255,255,.075)!important;
}

.command-search input,
.cat-block,
.profile-card,
.stack-card,
.modal,
.cmdbox,
.onboard-modal,
.lg-auth-box{
  background:
    linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.010)),
    rgba(9,9,10,.72)!important;
}

/* Make Import / + Add the same physical size and visual rhythm as Map / Stacks / Settings. */
.topbar-right .view-switcher,
.topbar-right .tb-action-btn{
  height:38px!important;
}

.topbar-right .view-switcher{
  display:flex!important;
  align-items:center!important;
}

.view-switcher .nav-pill,
.tb-action-btn{
  min-height:30px!important;
  height:30px!important;
  padding:0 11px!important;
  border-radius:10px!important;
  font-size:11px!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  white-space:nowrap!important;
}

.tb-action-btn{
  font-family:'Syne',sans-serif!important;
  font-weight:750!important;
  border:1px solid rgba(148,163,184,.12)!important;
  background:rgba(255,255,255,.035)!important;
  color:var(--muted2)!important;
  box-shadow:none!important;
  transform:none!important;
}

.tb-action-btn:hover{
  color:var(--text)!important;
  border-color:rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.060)!important;
  transform:none!important;
}

.tb-action-btn.primary{
  background:rgba(56,189,248,.14)!important;
  border-color:rgba(56,189,248,.18)!important;
  color:var(--accent)!important;
  box-shadow:none!important;
}

.tb-action-btn.primary:hover{
  background:rgba(56,189,248,.19)!important;
  border-color:rgba(56,189,248,.28)!important;
  color:#7dd3fc!important;
}

/* Keep highlight icon-only, smaller, cleaner, and not a big glowing box. */
.app-tile.highlighted,
.app-tile.is-highlighted,
.app-tile.gold,
.app-tile[data-highlighted="true"]{
  outline:none!important;
  background:transparent!important;
  box-shadow:none!important;
}

.app-tile.highlighted .icon-wrap,
.app-tile.is-highlighted .icon-wrap,
.app-tile.gold .icon-wrap,
.app-tile[data-highlighted="true"] .icon-wrap{
  outline:2px solid #ffd84d!important;
  outline-offset:1px!important;
  border-color:rgba(255,216,77,.78)!important;
  box-shadow:0 0 0 1px rgba(255,216,77,.20)!important;
}

.app-tile.highlighted:hover .icon-wrap,
.app-tile.is-highlighted:hover .icon-wrap,
.app-tile.gold:hover .icon-wrap,
.app-tile[data-highlighted="true"]:hover .icon-wrap{
  outline-color:#ffe875!important;
  border-color:rgba(255,232,117,.92)!important;
  box-shadow:0 0 0 1px rgba(255,232,117,.30),0 0 14px rgba(255,216,77,.26)!important;
}

.app-tile.highlighted .t-name,
.app-tile.is-highlighted .t-name,
.app-tile.gold .t-name,
.app-tile[data-highlighted="true"] .t-name{
  color:var(--muted2)!important;
}

/* Light mode still works, with the matched button sizing preserved. */
html.light .tb-action-btn{
  background:rgba(255,255,255,.72)!important;
  color:#475569!important;
  border-color:rgba(15,23,42,.10)!important;
}
html.light .tb-action-btn:hover{
  color:#0f172a!important;
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(15,23,42,.16)!important;
}
html.light .tb-action-btn.primary{
  background:rgba(2,132,199,.11)!important;
  border-color:rgba(2,132,199,.18)!important;
  color:#0369a1!important;
}
html.light .tb-action-btn.primary:hover{
  background:rgba(2,132,199,.16)!important;
  border-color:rgba(2,132,199,.28)!important;
  color:#075985!important;
}

@media(max-width:760px){
  .topbar-right .view-switcher,
  .topbar-right .tb-action-btn{height:36px!important;}
  .view-switcher .nav-pill,
  .tb-action-btn{height:28px!important;min-height:28px!important;padding:0 9px!important;font-size:10px!important;}
}

/* ═════════════════════════════════════════════════════════════
   V9 — softer graphite colour system + welcome/time topbar
   - removes the harsh pure-black / blue stare
   - keeps the app dark but warmer and easier on the eyes
   - adds topbar welcome/time styling
   - keeps highlight icon-only
═════════════════════════════════════════════════════════════ */
:root{
  --bg:#090908;
  --s1:#11100e;
  --s2:#181714;
  --s3:#24211d;
  --border:rgba(246,237,218,.075);
  --bh:rgba(246,237,218,.155);
  --text:#F5EFE4;
  --muted:#686258;
  --muted2:#B4A99A;
  --accent:#E7B96F;
  --adim:rgba(231,185,111,.080);
  --adim2:rgba(231,185,111,.140);
  --ab:rgba(231,185,111,.280);
}

html.light{
  --bg:#F4F0E8;
  --s1:#FFFDF7;
  --s2:#EEE8DD;
  --s3:#E3D9CB;
  --border:rgba(55,45,32,.095);
  --bh:rgba(55,45,32,.180);
  --text:#1D1A15;
  --muted:#9C8F7B;
  --muted2:#5C5144;
  --accent:#9A6727;
  --adim:rgba(154,103,39,.070);
  --adim2:rgba(154,103,39,.120);
  --ab:rgba(154,103,39,.240);
}

/* App background: soft graphite, not blue, not harsh OLED black. */
body:not(.app-locked){
  background:
    radial-gradient(circle at 50% -18%, rgba(231,185,111,.095), transparent 34%),
    radial-gradient(circle at 12% 2%, rgba(255,255,255,.040), transparent 28%),
    radial-gradient(circle at 88% 4%, rgba(231,185,111,.035), transparent 34%),
    linear-gradient(180deg,#0B0A09 0%,#080807 48%,#050504 100%) !important;
  background-color:#080807!important;
  color:var(--text)!important;
}

html.light body:not(.app-locked){
  background:
    radial-gradient(circle at 50% -18%, rgba(154,103,39,.120), transparent 34%),
    radial-gradient(circle at 14% 2%, rgba(255,255,255,.800), transparent 30%),
    linear-gradient(180deg,#F5F1E9 0%,#EEE7DC 54%,#E7DED1 100%) !important;
  background-color:#F4F0E8!important;
  color:var(--text)!important;
}

body:not(.app-locked)::before{opacity:.13!important;}
html.light body:not(.app-locked)::before{opacity:.06!important;}

body:not(.app-locked) .page::before{
  background-image:
    linear-gradient(rgba(246,237,218,.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,237,218,.013) 1px, transparent 1px)!important;
  opacity:.55!important;
}
html.light body:not(.app-locked) .page::before{
  background-image:
    linear-gradient(rgba(55,45,32,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55,45,32,.035) 1px, transparent 1px)!important;
  opacity:.50!important;
}

.command-topbar,
.topbar{
  background:rgba(9,8,7,.86)!important;
  border-bottom-color:rgba(246,237,218,.085)!important;
  box-shadow:0 1px 0 rgba(246,237,218,.030),0 12px 36px rgba(0,0,0,.28)!important;
}
html.light .command-topbar,
html.light .topbar{
  background:rgba(255,253,247,.82)!important;
  border-bottom-color:rgba(55,45,32,.100)!important;
  box-shadow:0 1px 0 rgba(55,45,32,.050),0 12px 34px rgba(55,45,32,.080)!important;
}

/* Topbar welcome block. */
.command-topbar{
  grid-template-columns:minmax(230px,300px) minmax(260px,600px) auto!important;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.topbar-left .logo{
  flex-shrink:0;
}
.logo-wordmark{
  color:var(--text)!important;
}
.logo-wordmark span{color:var(--accent)!important;}
.topbar-welcome{
  min-width:0;
  padding-left:16px;
  border-left:1px solid var(--border);
  line-height:1.05;
}
.welcome-main{
  font-family:'Syne',sans-serif;
  font-size:13px;
  font-weight:750;
  letter-spacing:-.25px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:155px;
}
.welcome-meta{
  margin-top:5px;
  display:flex;
  align-items:center;
  gap:7px;
  font-family:'DM Mono',monospace;
  font-size:8.5px;
  letter-spacing:.55px;
  color:var(--muted2);
  white-space:nowrap;
}
.welcome-dot{color:var(--accent);opacity:.8;}
#top-local-time{color:var(--accent);}

/* Warmer, calmer surfaces. */
.command-search input,
.cat-block,
.profile-card,
.stack-card,
.modal,
.cmdbox,
.onboard-modal,
.lg-auth-box,
.setting-box,
.sync-mode-opt,
.onboard-card,
.onboard-stack{
  background:
    linear-gradient(180deg,rgba(246,237,218,.040),rgba(246,237,218,.012)),
    rgba(17,16,14,.760)!important;
  border-color:rgba(246,237,218,.080)!important;
}
html.light .command-search input,
html.light .cat-block,
html.light .profile-card,
html.light .stack-card,
html.light .modal,
html.light .cmdbox,
html.light .onboard-modal,
html.light .lg-auth-box,
html.light .setting-box,
html.light .sync-mode-opt,
html.light .onboard-card,
html.light .onboard-stack{
  background:
    linear-gradient(180deg,rgba(255,255,255,.720),rgba(255,253,247,.520)),
    rgba(255,253,247,.820)!important;
  border-color:rgba(55,45,32,.095)!important;
}

.command-search input{
  color:var(--text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 34px rgba(0,0,0,.18)!important;
}
.command-search input:focus{
  border-color:var(--ab)!important;
  box-shadow:0 0 0 4px var(--adim),0 18px 44px rgba(0,0,0,.22)!important;
}
.command-search .si,
.command-search .sk{color:var(--accent)!important;}

/* Nav/actions: less dead-black, more premium. */
.view-switcher .nav-pill{
  color:var(--muted2)!important;
}
.view-switcher .nav-pill:hover,
.tb-action-btn:hover{
  background:rgba(246,237,218,.060)!important;
  border-color:rgba(246,237,218,.150)!important;
  color:var(--text)!important;
}
.view-switcher .nav-pill.active,
.tb-action-btn.primary{
  background:rgba(231,185,111,.115)!important;
  border-color:rgba(231,185,111,.245)!important;
  color:var(--accent)!important;
}
html.light .view-switcher .nav-pill:hover,
html.light .tb-action-btn:hover{
  background:rgba(255,255,255,.760)!important;
  border-color:rgba(55,45,32,.140)!important;
  color:var(--text)!important;
}
html.light .view-switcher .nav-pill.active,
html.light .tb-action-btn.primary{
  background:rgba(154,103,39,.100)!important;
  border-color:rgba(154,103,39,.210)!important;
  color:var(--accent)!important;
}

/* App icons: easier to stare at, no boxy hover. */
.icon-wrap{
  background:
    linear-gradient(180deg,rgba(246,237,218,.075),rgba(246,237,218,.020)),
    rgba(20,19,17,.900)!important;
  border-color:rgba(246,237,218,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.030)!important;
}
html.light .icon-wrap{
  background:
    linear-gradient(180deg,rgba(255,255,255,.920),rgba(255,253,247,.620)),
    rgba(255,253,247,.880)!important;
  border-color:rgba(55,45,32,.100)!important;
  box-shadow:0 8px 20px rgba(55,45,32,.055)!important;
}
.app-tile:hover{
  background:transparent!important;
  box-shadow:none!important;
}
.app-tile:hover .icon-wrap{
  border-color:rgba(246,237,218,.150)!important;
  transform:none!important;
}
.app-tile:hover .icon-wrap img,
.app-tile:hover .icon-wrap .il{
  transform:scale(1.12)!important;
}
.icon-wrap img,
.icon-wrap .il{
  transition:transform .18s var(--ease), filter .18s var(--ease)!important;
}
.t-name{
  color:rgba(245,239,228,.680)!important;
  font-size:10px!important;
  font-weight:650!important;
  letter-spacing:-.05px!important;
}
.app-tile:hover .t-name{
  color:var(--text)!important;
}
html.light .t-name{color:rgba(29,26,21,.650)!important;}
html.light .app-tile:hover .t-name{color:var(--text)!important;}

/* Icon-only highlight, bright but tight. */
.app-tile.highlighted,
.app-tile.is-highlighted,
.app-tile.gold,
.app-tile[data-highlighted="true"]{
  outline:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
.app-tile.highlighted .icon-wrap,
.app-tile.is-highlighted .icon-wrap,
.app-tile.gold .icon-wrap,
.app-tile[data-highlighted="true"] .icon-wrap{
  outline:2px solid #FFD66B!important;
  outline-offset:2px!important;
  border-color:rgba(255,214,107,.92)!important;
  box-shadow:0 0 0 1px rgba(255,214,107,.20),0 0 16px rgba(255,214,107,.24)!important;
}
.app-tile.highlighted:hover .icon-wrap,
.app-tile.is-highlighted:hover .icon-wrap,
.app-tile.gold:hover .icon-wrap,
.app-tile[data-highlighted="true"]:hover .icon-wrap{
  outline-color:#FFE08E!important;
  box-shadow:0 0 0 1px rgba(255,224,142,.24),0 0 20px rgba(255,214,107,.30)!important;
}

@media(max-width:1080px){
  .command-topbar{grid-template-columns:minmax(180px,230px) minmax(220px,1fr) auto!important;gap:12px!important;padding:0 20px!important;}
  .topbar-welcome{display:none;}
}
@media(max-width:760px){
  .command-topbar{grid-template-columns:1fr auto!important;height:auto!important;padding:14px 16px!important;}
  .topbar-mid{grid-column:1/-1!important;order:3!important;width:100%!important;}
  .topbar-left{gap:10px!important;}
}

/* ══════════════════════════════════════════════════════════
   V10/V11 — user-selectable colour system: 20 presets
   Keeps light/dark mode, but lets the user pick the accent/mood.
══════════════════════════════════════════════════════════ */
html[data-color-theme="obsidian"]{
  --bg:#050506;--bg2:#09090b;--s1:#101012;--s2:#17171a;--s3:#232329;
  --text:#F5F5F3;--muted:#5F6066;--muted2:#A2A3AA;
  --accent:#FFD166;--adim:rgba(255,209,102,.075);--adim2:rgba(255,209,102,.14);--ab:rgba(255,209,102,.28);
  --theme-glow-a:rgba(255,209,102,.075);--theme-glow-b:rgba(255,255,255,.025);--theme-grid:rgba(255,255,255,.018);
  --theme-name:'Obsidian';
}
html[data-color-theme="graphite"]{
  --bg:#0A0A0B;--bg2:#111113;--s1:#18181B;--s2:#202024;--s3:#2B2B31;
  --text:#F2F2F4;--muted:#63636B;--muted2:#A8A8B3;
  --accent:#C8D0D8;--adim:rgba(200,208,216,.075);--adim2:rgba(200,208,216,.14);--ab:rgba(200,208,216,.25);
  --theme-glow-a:rgba(200,208,216,.06);--theme-glow-b:rgba(255,255,255,.030);--theme-grid:rgba(255,255,255,.020);
}
html[data-color-theme="midnight"]{
  --bg:#05070D;--bg2:#09111E;--s1:#0D1522;--s2:#121D2D;--s3:#1A2A40;
  --text:#F2F7FF;--muted:#566477;--muted2:#97A8BE;
  --accent:#5CC8FF;--adim:rgba(92,200,255,.075);--adim2:rgba(92,200,255,.14);--ab:rgba(92,200,255,.28);
  --theme-glow-a:rgba(92,200,255,.090);--theme-glow-b:rgba(80,110,255,.045);--theme-grid:rgba(92,200,255,.016);
}
html[data-color-theme="violet"]{
  --bg:#07050D;--bg2:#100A1F;--s1:#140F23;--s2:#1C1530;--s3:#2A1E45;
  --text:#FAF7FF;--muted:#675C78;--muted2:#AFA4C3;
  --accent:#B794FF;--adim:rgba(183,148,255,.075);--adim2:rgba(183,148,255,.14);--ab:rgba(183,148,255,.28);
  --theme-glow-a:rgba(183,148,255,.090);--theme-glow-b:rgba(255,255,255,.020);--theme-grid:rgba(183,148,255,.015);
}
html[data-color-theme="emerald"]{
  --bg:#050B08;--bg2:#07140F;--s1:#0D1B15;--s2:#13251D;--s3:#1B362A;
  --text:#F3FFF9;--muted:#51685D;--muted2:#95B3A4;
  --accent:#62E6A8;--adim:rgba(98,230,168,.075);--adim2:rgba(98,230,168,.14);--ab:rgba(98,230,168,.28);
  --theme-glow-a:rgba(98,230,168,.090);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(98,230,168,.014);
}
html[data-color-theme="crimson"]{
  --bg:#0B0506;--bg2:#16090C;--s1:#1D0F12;--s2:#271519;--s3:#3A1E25;
  --text:#FFF6F7;--muted:#72585D;--muted2:#C0A0A6;
  --accent:#FF6B7A;--adim:rgba(255,107,122,.075);--adim2:rgba(255,107,122,.14);--ab:rgba(255,107,122,.28);
  --theme-glow-a:rgba(255,107,122,.085);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(255,107,122,.014);
}
html[data-color-theme="copper"]{
  --bg:#090604;--bg2:#120C07;--s1:#19110C;--s2:#221812;--s3:#332419;
  --text:#FFF8F0;--muted:#6D5A48;--muted2:#B99B7C;
  --accent:#FFB86B;--adim:rgba(255,184,107,.075);--adim2:rgba(255,184,107,.14);--ab:rgba(255,184,107,.28);
  --theme-glow-a:rgba(255,184,107,.085);--theme-glow-b:rgba(255,255,255,.020);--theme-grid:rgba(255,184,107,.014);
}
html[data-color-theme="ocean"]{
  --bg:#03090B;--bg2:#071418;--s1:#0B1B20;--s2:#10262D;--s3:#193741;
  --text:#F1FCFF;--muted:#506A72;--muted2:#98B6C0;
  --accent:#42E8D8;--adim:rgba(66,232,216,.075);--adim2:rgba(66,232,216,.14);--ab:rgba(66,232,216,.28);
  --theme-glow-a:rgba(66,232,216,.085);--theme-glow-b:rgba(80,160,255,.035);--theme-grid:rgba(66,232,216,.014);
}
html[data-color-theme="mono"]{
  --bg:#030303;--bg2:#080808;--s1:#111111;--s2:#181818;--s3:#242424;
  --text:#FFFFFF;--muted:#5B5B5B;--muted2:#B0B0B0;
  --accent:#FFFFFF;--adim:rgba(255,255,255,.060);--adim2:rgba(255,255,255,.105);--ab:rgba(255,255,255,.220);
  --theme-glow-a:rgba(255,255,255,.045);--theme-glow-b:rgba(255,255,255,.015);--theme-grid:rgba(255,255,255,.016);
}
html[data-color-theme="rose"]{
  --bg:#0C0509;--bg2:#170A12;--s1:#1E1018;--s2:#291722;--s3:#3C2232;
  --text:#FFF7FB;--muted:#705866;--muted2:#C4A1B3;
  --accent:#FF8FCC;--adim:rgba(255,143,204,.075);--adim2:rgba(255,143,204,.14);--ab:rgba(255,143,204,.28);
  --theme-glow-a:rgba(255,143,204,.085);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(255,143,204,.014);
}

/* Light mode keeps the picked accent but flips the app into a clean light canvas. */
html.light[data-color-theme]{
  --bg:#F6F4EF;--bg2:#EDE9E1;--s1:#FFFDF8;--s2:#F1EEE7;--s3:#E6E1D7;
  --text:#171717;--muted:#8A8174;--muted2:#5F5A52;
  --theme-glow-a:rgba(255,255,255,.82);--theme-glow-b:var(--adim);--theme-grid:rgba(40,34,26,.035);
}

/* Apply the selected colours to the real app shell. */
body:not(.app-locked){
  background:
    radial-gradient(circle at 52% -18%, var(--theme-glow-a), transparent 34%),
    radial-gradient(circle at 12% 4%, var(--theme-glow-b), transparent 28%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)!important;
  background-color:var(--bg)!important;
  color:var(--text)!important;
}
body:not(.app-locked) .page::before{
  background-image:
    linear-gradient(var(--theme-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--theme-grid) 1px, transparent 1px)!important;
}
.command-topbar,.topbar{
  background:color-mix(in srgb, var(--bg) 86%, transparent)!important;
  border-bottom-color:var(--border)!important;
}
.command-search input,.cat-block,.profile-card,.stack-card,.modal,.cmdbox,.onboard-modal,.lg-auth-box,.setting-box,.sync-mode-opt,.onboard-card,.onboard-stack{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.010)),var(--s1)!important;
  border-color:var(--border)!important;
}
html.light .command-search input,html.light .cat-block,html.light .profile-card,html.light .stack-card,html.light .modal,html.light .cmdbox,html.light .onboard-modal,html.light .lg-auth-box,html.light .setting-box,html.light .sync-mode-opt,html.light .onboard-card,html.light .onboard-stack{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.38)),var(--s1)!important;
}
.icon-wrap{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),var(--s2)!important;
  border-color:var(--border)!important;
}
html.light .icon-wrap{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.58)),var(--s2)!important;}
.view-switcher .nav-pill.active,.tb-action-btn.primary,.theme-option.active,.palette-option.active{
  background:var(--adim2)!important;
  border-color:var(--ab)!important;
  color:var(--accent)!important;
}
.nav-pill.active,.sh-btn,.btn-s,.onboard-btn-next,.imp-btn{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--bg)!important;}
.logo-wordmark span,.sh-label,.rl,.welcome-dot,#top-local-time,.command-search .si,.command-search .sk{color:var(--accent)!important;}

/* Modern colour picker UI. */
.theme-card-modern{grid-column:span 1;}
.theme-picker-box{padding:16px!important;}
.mode-options{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin:0 0 16px!important;}
.palette-row{margin-top:18px!important;padding-top:16px;border-top:1px solid var(--border);}
.palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px;}
.palette-option{
  display:flex;align-items:center;gap:9px;min-height:42px;padding:8px 10px;border-radius:12px;
  background:rgba(255,255,255,.018);border:1px solid var(--border);color:var(--muted2);
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.35px;cursor:pointer;transition:transform .15s var(--ease),border-color .15s,background .15s,color .15s;
}
.palette-option:hover{transform:translateY(-1px);border-color:var(--bh);background:rgba(255,255,255,.035);color:var(--text);}
.palette-option.active{box-shadow:0 0 0 1px var(--ab),0 10px 24px rgba(0,0,0,.16)!important;}
.palette-swatch{display:flex;align-items:center;gap:3px;flex-shrink:0;}
.palette-swatch i{display:block;width:10px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);}
html.light .palette-swatch i{border-color:rgba(0,0,0,.10);}
.palette-option span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.palette-option[data-color-theme="obsidian"] .palette-swatch i:nth-child(1){background:#050506}.palette-option[data-color-theme="obsidian"] .palette-swatch i:nth-child(2){background:#17171a}.palette-option[data-color-theme="obsidian"] .palette-swatch i:nth-child(3){background:#FFD166}
.palette-option[data-color-theme="graphite"] .palette-swatch i:nth-child(1){background:#0A0A0B}.palette-option[data-color-theme="graphite"] .palette-swatch i:nth-child(2){background:#202024}.palette-option[data-color-theme="graphite"] .palette-swatch i:nth-child(3){background:#C8D0D8}
.palette-option[data-color-theme="midnight"] .palette-swatch i:nth-child(1){background:#05070D}.palette-option[data-color-theme="midnight"] .palette-swatch i:nth-child(2){background:#121D2D}.palette-option[data-color-theme="midnight"] .palette-swatch i:nth-child(3){background:#5CC8FF}
.palette-option[data-color-theme="violet"] .palette-swatch i:nth-child(1){background:#07050D}.palette-option[data-color-theme="violet"] .palette-swatch i:nth-child(2){background:#1C1530}.palette-option[data-color-theme="violet"] .palette-swatch i:nth-child(3){background:#B794FF}
.palette-option[data-color-theme="emerald"] .palette-swatch i:nth-child(1){background:#050B08}.palette-option[data-color-theme="emerald"] .palette-swatch i:nth-child(2){background:#13251D}.palette-option[data-color-theme="emerald"] .palette-swatch i:nth-child(3){background:#62E6A8}
.palette-option[data-color-theme="crimson"] .palette-swatch i:nth-child(1){background:#0B0506}.palette-option[data-color-theme="crimson"] .palette-swatch i:nth-child(2){background:#271519}.palette-option[data-color-theme="crimson"] .palette-swatch i:nth-child(3){background:#FF6B7A}
.palette-option[data-color-theme="copper"] .palette-swatch i:nth-child(1){background:#090604}.palette-option[data-color-theme="copper"] .palette-swatch i:nth-child(2){background:#221812}.palette-option[data-color-theme="copper"] .palette-swatch i:nth-child(3){background:#FFB86B}
.palette-option[data-color-theme="ocean"] .palette-swatch i:nth-child(1){background:#03090B}.palette-option[data-color-theme="ocean"] .palette-swatch i:nth-child(2){background:#10262D}.palette-option[data-color-theme="ocean"] .palette-swatch i:nth-child(3){background:#42E8D8}
.palette-option[data-color-theme="mono"] .palette-swatch i:nth-child(1){background:#030303}.palette-option[data-color-theme="mono"] .palette-swatch i:nth-child(2){background:#181818}.palette-option[data-color-theme="mono"] .palette-swatch i:nth-child(3){background:#FFFFFF}
.palette-option[data-color-theme="rose"] .palette-swatch i:nth-child(1){background:#0C0509}.palette-option[data-color-theme="rose"] .palette-swatch i:nth-child(2){background:#291722}.palette-option[data-color-theme="rose"] .palette-swatch i:nth-child(3){background:#FF8FCC}

@media(max-width:600px){.palette-grid{grid-template-columns:1fr;}}


/* ══════════════════════════════════════════════════════════
   V11 — requested changes
   - Greeting/time moved into the launcher hero
   - Category rail boxed again and grab-scrollable on Windows/Mac
   - Palette-only settings: no dark/light mode
   - 20 colour palettes
══════════════════════════════════════════════════════════ */

/* Force palette mode to stay dark-only. Dark/light controls are removed in HTML, and these overrides stop old light CSS from leaking in. */
html.light{color-scheme:dark!important;}
html.light[data-color-theme],html[data-theme="dark"][data-color-theme]{
  color-scheme:dark!important;
}
html.light body:not(.app-locked){
  background:
    radial-gradient(circle at 52% -18%, var(--theme-glow-a), transparent 34%),
    radial-gradient(circle at 12% 4%, var(--theme-glow-b), transparent 28%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)!important;
  color:var(--text)!important;
}

/* Topbar is lighter now: logo only on left, greeting lives in content. */
.command-topbar{grid-template-columns:minmax(120px,180px) minmax(260px,1fr) auto!important;}
.topbar-welcome{display:none!important;}
.topbar-left{min-width:0!important;}
.logo-wordmark{font-size:16px!important;}

/* Launcher greeting/clock block replacing the old Your Stack text. */
.welcome-stack-head{
  align-items:flex-start!important;
  margin-bottom:18px!important;
}
.welcome-stack-hero{
  gap:8px!important;
  max-width:760px;
}
.welcome-stack-hero .sh-label,
#welcome-greeting{
  color:var(--accent)!important;
  font-size:10px!important;
  letter-spacing:2.8px!important;
  text-transform:uppercase!important;
}
#welcome-main{
  font-size:42px!important;
  letter-spacing:-1.8px!important;
  line-height:.98!important;
}
.welcome-stack-meta{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:var(--muted2)!important;
  max-width:none!important;
}
#top-local-time{color:var(--accent)!important;font-weight:700!important;}
.welcome-dot{color:var(--muted)!important;}

/* Boxed category rail, but with smoother floating category items inside. */
.category-strip.launch-categories{
  display:flex!important;
  align-items:center!important;
  min-height:58px!important;
  margin:0 0 34px!important;
  padding:12px 14px!important;
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),
    color-mix(in srgb,var(--s1) 82%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 52px rgba(0,0,0,.16)!important;
  overflow:hidden!important;
  position:relative!important;
}
.category-strip.launch-categories::after{display:none!important;}
.category-strip .rl{
  flex:0 0 auto!important;
  color:var(--accent)!important;
  letter-spacing:2px!important;
}
.category-strip .rdiv{flex:0 0 auto!important;margin-right:10px!important;background:var(--border)!important;}
.category-strip .cat-tabs.category-tabs-rail{
  display:flex!important;
  flex:1 1 auto!important;
  min-width:0!important;
  gap:8px!important;
  margin:0!important;
  padding:2px 64px 2px 0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:contain!important;
  scroll-behavior:auto!important;
  cursor:grab!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  scrollbar-width:thin!important;
  scrollbar-color:var(--ab) transparent!important;
  touch-action:pan-x!important;
}
.category-strip .cat-tabs.category-tabs-rail.is-grabbing{cursor:grabbing!important;scroll-behavior:auto!important;}
.category-strip .cat-tabs.category-tabs-rail::-webkit-scrollbar{height:6px!important;display:block!important;}
.category-strip .cat-tabs.category-tabs-rail::-webkit-scrollbar-track{background:transparent!important;}
.category-strip .cat-tabs.category-tabs-rail::-webkit-scrollbar-thumb{background:var(--ab)!important;border-radius:999px!important;}
.category-strip .cat-tab{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  height:32px!important;
  padding:0 13px!important;
  border-radius:999px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--muted2)!important;
  font-size:10px!important;
  letter-spacing:.8px!important;
  transform:none!important;
  white-space:nowrap!important;
}
.category-strip .cat-tab:hover{
  color:var(--text)!important;
  border-color:var(--border)!important;
  background:rgba(255,255,255,.028)!important;
}
.category-strip .cat-tab.active{
  color:var(--accent)!important;
  border-color:var(--ab)!important;
  background:var(--adim)!important;
  box-shadow:0 0 0 1px var(--ab),0 10px 28px rgba(0,0,0,.16)!important;
}
.cat-rail-grab{
  position:absolute!important;
  right:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  height:26px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--s2) 82%,transparent)!important;
  border:1px solid var(--border)!important;
  color:var(--muted)!important;
  font-family:'DM Mono',monospace!important;
  font-size:8px!important;
  letter-spacing:.8px!important;
  text-transform:uppercase!important;
  pointer-events:none!important;
  box-shadow:-20px 0 28px var(--s1)!important;
}

/* Palette-only settings card. */
.theme-card-modern.wide{grid-column:1/-1!important;}
.mode-options,.theme-options.mode-options,.theme-option[data-theme],#theme-display{display:none!important;}
.palette-only-box{padding:18px!important;}
.palette-row-top{
  margin:0 0 14px!important;
  padding:0 0 14px!important;
  border-top:none!important;
  border-bottom:1px solid var(--border)!important;
}
.palette-grid-expanded{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
.palette-grid-expanded .palette-option{
  min-height:48px!important;
  border-radius:14px!important;
  padding:9px 11px!important;
  background:rgba(255,255,255,.020)!important;
}
.palette-grid-expanded .palette-option:hover{
  background:rgba(255,255,255,.040)!important;
}
.palette-grid-expanded .palette-option.active{
  background:var(--adim2)!important;
  color:var(--accent)!important;
  border-color:var(--ab)!important;
}

/* Additional palette variables. */
html[data-color-theme="slate"]{
  --bg:#06080B;--bg2:#0B0F14;--s1:#111820;--s2:#18212C;--s3:#243040;
  --text:#F4F8FC;--muted:#5E6A78;--muted2:#9EADBD;
  --accent:#A7B8CC;--adim:rgba(167,184,204,.075);--adim2:rgba(167,184,204,.14);--ab:rgba(167,184,204,.28);
  --theme-glow-a:rgba(167,184,204,.060);--theme-glow-b:rgba(255,255,255,.020);--theme-grid:rgba(167,184,204,.016);
}
html[data-color-theme="royal"]{
  --bg:#060512;--bg2:#0D0A25;--s1:#141033;--s2:#1C1746;--s3:#2A2268;
  --text:#F8F6FF;--muted:#625B80;--muted2:#ADA5D2;
  --accent:#7C6DFF;--adim:rgba(124,109,255,.075);--adim2:rgba(124,109,255,.15);--ab:rgba(124,109,255,.30);
  --theme-glow-a:rgba(124,109,255,.090);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(124,109,255,.016);
}
html[data-color-theme="forest"]{
  --bg:#040905;--bg2:#071208;--s1:#0D1A10;--s2:#142419;--s3:#1D3524;
  --text:#F4FFF5;--muted:#526A56;--muted2:#9BB59E;
  --accent:#91E88A;--adim:rgba(145,232,138,.075);--adim2:rgba(145,232,138,.145);--ab:rgba(145,232,138,.29);
  --theme-glow-a:rgba(145,232,138,.080);--theme-glow-b:rgba(255,255,255,.016);--theme-grid:rgba(145,232,138,.014);
}
html[data-color-theme="solar"]{
  --bg:#0A0702;--bg2:#171005;--s1:#211709;--s2:#2C1F0D;--s3:#442F12;
  --text:#FFF9EC;--muted:#79664A;--muted2:#C7AD7D;
  --accent:#F7C948;--adim:rgba(247,201,72,.075);--adim2:rgba(247,201,72,.145);--ab:rgba(247,201,72,.30);
  --theme-glow-a:rgba(247,201,72,.090);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(247,201,72,.014);
}
html[data-color-theme="cyber"]{
  --bg:#03080A;--bg2:#061014;--s1:#0B181E;--s2:#11232B;--s3:#193542;
  --text:#F1FEFF;--muted:#506A73;--muted2:#9AC2C9;
  --accent:#00F5D4;--adim:rgba(0,245,212,.075);--adim2:rgba(0,245,212,.145);--ab:rgba(0,245,212,.30);
  --theme-glow-a:rgba(0,245,212,.085);--theme-glow-b:rgba(255,0,230,.035);--theme-grid:rgba(0,245,212,.014);
}
html[data-color-theme="sand"]{
  --bg:#090806;--bg2:#13100B;--s1:#1C1710;--s2:#272116;--s3:#3A2F1F;
  --text:#FFF8E8;--muted:#756B5C;--muted2:#BFB29E;
  --accent:#D6B47A;--adim:rgba(214,180,122,.075);--adim2:rgba(214,180,122,.145);--ab:rgba(214,180,122,.29);
  --theme-glow-a:rgba(214,180,122,.070);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(214,180,122,.014);
}
html[data-color-theme="frost"]{
  --bg:#03080C;--bg2:#071118;--s1:#0D1A24;--s2:#142633;--s3:#1E394A;
  --text:#F3FCFF;--muted:#536A77;--muted2:#9CB9C7;
  --accent:#9DE8FF;--adim:rgba(157,232,255,.075);--adim2:rgba(157,232,255,.145);--ab:rgba(157,232,255,.29);
  --theme-glow-a:rgba(157,232,255,.090);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(157,232,255,.014);
}
html[data-color-theme="lava"]{
  --bg:#0D0402;--bg2:#1A0804;--s1:#24100A;--s2:#32170E;--s3:#4A2114;
  --text:#FFF6F1;--muted:#79594B;--muted2:#C8A091;
  --accent:#FF7A3D;--adim:rgba(255,122,61,.075);--adim2:rgba(255,122,61,.145);--ab:rgba(255,122,61,.30);
  --theme-glow-a:rgba(255,122,61,.090);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(255,122,61,.014);
}
html[data-color-theme="candy"]{
  --bg:#0B050D;--bg2:#16091B;--s1:#1F1028;--s2:#2A1735;--s3:#3C214D;
  --text:#FFF7FF;--muted:#715879;--muted2:#C4A3CD;
  --accent:#FF7AF5;--adim:rgba(255,122,245,.075);--adim2:rgba(255,122,245,.145);--ab:rgba(255,122,245,.30);
  --theme-glow-a:rgba(255,122,245,.080);--theme-glow-b:rgba(124,109,255,.045);--theme-grid:rgba(255,122,245,.014);
}
html[data-color-theme="moss"]{
  --bg:#060804;--bg2:#0E1308;--s1:#151B0E;--s2:#1F2815;--s3:#2E3B1F;
  --text:#FAFFF2;--muted:#606B50;--muted2:#ABB897;
  --accent:#B6D96A;--adim:rgba(182,217,106,.075);--adim2:rgba(182,217,106,.145);--ab:rgba(182,217,106,.29);
  --theme-glow-a:rgba(182,217,106,.075);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(182,217,106,.014);
}

/* Extra swatches for the added palettes. */
.palette-option[data-color-theme="slate"] .palette-swatch i:nth-child(1){background:#06080B}.palette-option[data-color-theme="slate"] .palette-swatch i:nth-child(2){background:#18212C}.palette-option[data-color-theme="slate"] .palette-swatch i:nth-child(3){background:#A7B8CC}
.palette-option[data-color-theme="royal"] .palette-swatch i:nth-child(1){background:#060512}.palette-option[data-color-theme="royal"] .palette-swatch i:nth-child(2){background:#1C1746}.palette-option[data-color-theme="royal"] .palette-swatch i:nth-child(3){background:#7C6DFF}
.palette-option[data-color-theme="forest"] .palette-swatch i:nth-child(1){background:#040905}.palette-option[data-color-theme="forest"] .palette-swatch i:nth-child(2){background:#142419}.palette-option[data-color-theme="forest"] .palette-swatch i:nth-child(3){background:#91E88A}
.palette-option[data-color-theme="solar"] .palette-swatch i:nth-child(1){background:#0A0702}.palette-option[data-color-theme="solar"] .palette-swatch i:nth-child(2){background:#2C1F0D}.palette-option[data-color-theme="solar"] .palette-swatch i:nth-child(3){background:#F7C948}
.palette-option[data-color-theme="cyber"] .palette-swatch i:nth-child(1){background:#03080A}.palette-option[data-color-theme="cyber"] .palette-swatch i:nth-child(2){background:#11232B}.palette-option[data-color-theme="cyber"] .palette-swatch i:nth-child(3){background:#00F5D4}
.palette-option[data-color-theme="sand"] .palette-swatch i:nth-child(1){background:#090806}.palette-option[data-color-theme="sand"] .palette-swatch i:nth-child(2){background:#272116}.palette-option[data-color-theme="sand"] .palette-swatch i:nth-child(3){background:#D6B47A}
.palette-option[data-color-theme="frost"] .palette-swatch i:nth-child(1){background:#03080C}.palette-option[data-color-theme="frost"] .palette-swatch i:nth-child(2){background:#142633}.palette-option[data-color-theme="frost"] .palette-swatch i:nth-child(3){background:#9DE8FF}
.palette-option[data-color-theme="lava"] .palette-swatch i:nth-child(1){background:#0D0402}.palette-option[data-color-theme="lava"] .palette-swatch i:nth-child(2){background:#32170E}.palette-option[data-color-theme="lava"] .palette-swatch i:nth-child(3){background:#FF7A3D}
.palette-option[data-color-theme="candy"] .palette-swatch i:nth-child(1){background:#0B050D}.palette-option[data-color-theme="candy"] .palette-swatch i:nth-child(2){background:#2A1735}.palette-option[data-color-theme="candy"] .palette-swatch i:nth-child(3){background:#FF7AF5}
.palette-option[data-color-theme="moss"] .palette-swatch i:nth-child(1){background:#060804}.palette-option[data-color-theme="moss"] .palette-swatch i:nth-child(2){background:#1F2815}.palette-option[data-color-theme="moss"] .palette-swatch i:nth-child(3){background:#B6D96A}

@media(max-width:980px){
  .palette-grid-expanded{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  #welcome-main{font-size:36px!important;}
}
@media(max-width:640px){
  .palette-grid-expanded{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .cat-rail-grab{display:none!important;}
  .category-strip .cat-tabs.category-tabs-rail{padding-right:0!important;}
  #welcome-main{font-size:30px!important;}
  .welcome-stack-meta{flex-wrap:wrap!important;}
}


/* ══════════════════════════════════════════════════════════
   V12 — Original landing colours, Original preset, time format,
   and click-safe category rail polish.
══════════════════════════════════════════════════════════ */

/* Keep the public landing page on the original black/lime identity,
   regardless of the user's chosen app palette. */
.login-gate{
  --bg:#0a0a0c!important;
  --bg2:#0a0a0c!important;
  --s1:#111114!important;
  --s2:#18181c!important;
  --s3:#222228!important;
  --border:rgba(255,255,255,0.05)!important;
  --bh:rgba(255,255,255,0.11)!important;
  --text:#eeecea!important;
  --muted:#54545a!important;
  --muted2:#888892!important;
  --accent:#c9f135!important;
  --adim:rgba(201,241,53,0.07)!important;
  --adim2:rgba(201,241,53,0.13)!important;
  --ab:rgba(201,241,53,0.22)!important;
  --theme-glow-a:rgba(201,241,53,0.05)!important;
  --theme-glow-b:rgba(201,241,53,0.02)!important;
  --theme-grid:rgba(255,255,255,0.018)!important;
  background:#0a0a0c!important;
}
.login-gate .lg-h-glow{background:radial-gradient(circle,rgba(201,241,53,0.05) 0%,transparent 60%)!important;}
.login-gate .lg-h-vline{background:linear-gradient(to bottom,transparent,rgba(201,241,53,0.12),transparent)!important;}
.login-gate .lg-ht2,.login-gate .lg-sl2{color:#c9f135!important;text-shadow:0 0 50px rgba(201,241,53,.35),0 0 120px rgba(201,241,53,.12)!important;}
.login-gate .lg-hero-btn,.login-gate .lg-btn-email{background:#c9f135!important;color:#060608!important;}
.login-gate .lg-p-glowbar{background:linear-gradient(to right,transparent,rgba(201,241,53,.30),transparent)!important;}

/* Original palette option for the logged-in app. */
html[data-color-theme="original"]{
  --bg:#0a0a0c;--bg2:#0a0a0c;--s1:#111114;--s2:#18181c;--s3:#222228;
  --border:rgba(255,255,255,0.05);--bh:rgba(255,255,255,0.11);
  --text:#eeecea;--muted:#54545a;--muted2:#888892;
  --accent:#c9f135;--adim:rgba(201,241,53,0.07);--adim2:rgba(201,241,53,0.13);--ab:rgba(201,241,53,0.22);
  --theme-glow-a:rgba(201,241,53,.05);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(255,255,255,.018);
}
.palette-option[data-color-theme="original"] .palette-swatch i:nth-child(1){background:#0a0a0c}
.palette-option[data-color-theme="original"] .palette-swatch i:nth-child(2){background:#18181c}
.palette-option[data-color-theme="original"] .palette-swatch i:nth-child(3){background:#c9f135}

/* Time format setting. */
.time-format-box{padding:16px!important;}
.time-format-options{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:8px!important;
  margin-top:10px!important;
}
.time-format-option{
  min-height:42px!important;
  border-radius:12px!important;
  border:1px solid var(--border)!important;
  background:rgba(255,255,255,.018)!important;
  color:var(--muted2)!important;
  font-family:'DM Mono',monospace!important;
  font-size:10px!important;
  letter-spacing:.7px!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)!important;
}
.time-format-option:hover{
  transform:translateY(-1px)!important;
  border-color:var(--bh)!important;
  color:var(--text)!important;
  background:rgba(255,255,255,.040)!important;
}
.time-format-option.active{
  color:var(--accent)!important;
  border-color:var(--ab)!important;
  background:var(--adim2)!important;
  box-shadow:0 0 0 1px var(--ab)!important;
}

/* Category rail: keep the boxed rail, but make the menu click reliably. */
.category-strip .cat-tabs.category-tabs-rail{
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:pan-x!important;
  overscroll-behavior-inline:contain!important;
}
.category-strip .cat-tabs.category-tabs-rail.is-grabbing .cat-tab{cursor:grabbing!important;}
.category-strip .cat-tab{pointer-events:auto!important;}
.category-strip .cat-tab:active{transform:none!important;}

@media(max-width:980px){
  .time-format-card{grid-column:1/-1!important;}
}


/* ══════════════════════════════════════════════════════════
   StackMap v13 — landing original + category/menu/action fixes
══════════════════════════════════════════════════════════ */

/* Force the public landing page back to the original black/lime identity, no matter what app palette is selected. */
.login-gate{
  --bg:#0a0a0c!important;
  --s1:#111114!important;
  --s2:#18181c!important;
  --s3:#222228!important;
  --border:rgba(255,255,255,0.05)!important;
  --bh:rgba(255,255,255,0.11)!important;
  --text:#eeecea!important;
  --muted:#54545a!important;
  --muted2:#888892!important;
  --accent:#c9f135!important;
  --adim:rgba(201,241,53,0.07)!important;
  --adim2:rgba(201,241,53,0.13)!important;
  --ab:rgba(201,241,53,0.22)!important;
  background:#0a0a0c!important;
}
.login-gate .lg-scroll{background:#0a0a0c!important;}
.login-gate .lg-hero-btn,
.login-gate .lg-btn-email{
  background:#c9f135!important;
  color:#060608!important;
}
.login-gate .lg-hero-btn:hover,
.login-gate .lg-btn-email:hover{background:#d4f548!important;}
.login-gate #lg-cur{background:#c9f135!important;}
.login-gate #lg-cur-r{border-color:rgba(201,241,53,.35)!important;}

/* Category rail: real clickable options again. No right-side helper text, no chunky scrollbar. */
.category-strip.launch-categories{
  padding:12px 14px!important;
  overflow:hidden!important;
}
.category-strip .cat-tabs.category-tabs-rail{
  padding:2px 0!important;
  cursor:default!important;
  user-select:auto!important;
  -webkit-user-select:auto!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  touch-action:auto!important;
  scroll-behavior:smooth!important;
}
.category-strip .cat-tabs.category-tabs-rail::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
.category-strip .cat-tabs.category-tabs-rail.is-grabbing{cursor:default!important;}
.category-strip .cat-tab{
  cursor:pointer!important;
  pointer-events:auto!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.category-strip .cat-tab:active{
  transform:scale(.98)!important;
}
.cat-rail-grab{display:none!important;}

/* Top action buttons now match Map / Stacks / Settings sizing exactly. */
.topbar-right .view-switcher .nav-pill,
.topbar-right .tb-action-btn{
  height:36px!important;
  min-height:36px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 13px!important;
  border-radius:12px!important;
  font-family:'Syne',sans-serif!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}
.topbar-right .tb-action-btn.ghost,
.topbar-right .tb-action-btn.primary{
  min-width:auto!important;
}
.topbar-right .view-switcher{
  align-items:center!important;
}

@media(max-width:860px){
  .topbar-right .view-switcher .nav-pill,
  .topbar-right .tb-action-btn{
    height:32px!important;
    min-height:32px!important;
    padding:0 10px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }
}


/* ══════════════════════════════════════════════════════════
   StackMap v14 — category menu hard fix + original landing lock
══════════════════════════════════════════════════════════ */

.login-gate,
.login-gate.landing-original,
body.app-locked .login-gate{
  --bg:#0a0a0c!important;--bg2:#0a0a0c!important;--s1:#111114!important;--s2:#18181c!important;--s3:#222228!important;
  --border:rgba(255,255,255,0.05)!important;--bh:rgba(255,255,255,0.11)!important;
  --text:#eeecea!important;--muted:#54545a!important;--muted2:#888892!important;
  --accent:#c9f135!important;--adim:rgba(201,241,53,0.07)!important;--adim2:rgba(201,241,53,0.13)!important;--ab:rgba(201,241,53,0.22)!important;
  background:#0a0a0c!important;color:#eeecea!important;
}
.login-gate .lg-scroll,.login-gate .lg-p-body,.login-gate .lg-nstat{background:#0a0a0c!important;}
.login-gate .lg-h-glow,.login-gate .lg-signin-glow{background:radial-gradient(circle,rgba(201,241,53,0.05) 0%,transparent 60%)!important;}
.login-gate .lg-h-grid{background-image:linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px)!important;}
.login-gate .lg-ht2,.login-gate .lg-sl2,.login-gate .lg-logo span,.login-gate .lg-p-wordmark span,.login-gate .lg-f-logo span,.login-gate .lg-nstat-n{color:#c9f135!important;}
.login-gate .lg-hero-btn,.login-gate .lg-btn-email,.login-gate .lg-p-pill.active{background:#c9f135!important;color:#060608!important;}
.login-gate .lg-badge,.login-gate .lg-nav-cta,.login-gate .lg-signin-badge,.login-gate .lg-fcard-tag,.login-gate .lg-p-label{color:#c9f135!important;border-color:rgba(201,241,53,0.22)!important;background:rgba(201,241,53,0.07)!important;}

.category-strip.launch-categories{
  display:block!important;min-height:0!important;margin:0 0 30px!important;padding:14px 16px!important;overflow:visible!important;
  border:1px solid var(--border)!important;border-radius:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.040),rgba(255,255,255,.012)),var(--s1)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 38px rgba(0,0,0,.16)!important;
}
.category-strip.launch-categories::after,.cat-rail-grab,.category-strip .rdiv{display:none!important;}
.category-strip .rl{display:block!important;margin:0 0 10px!important;color:var(--accent)!important;font-family:'DM Mono',monospace!important;font-size:8px!important;letter-spacing:2.5px!important;text-transform:uppercase!important;}
.category-strip .cat-tabs.category-tabs-rail,.category-tabs-rail.cat-tabs,.cat-tabs#cat-tabs{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;width:100%!important;max-width:100%!important;
  margin:0!important;padding:0!important;overflow:visible!important;overflow-x:visible!important;overflow-y:visible!important;
  cursor:default!important;user-select:auto!important;-webkit-user-select:auto!important;touch-action:auto!important;scroll-behavior:auto!important;
  scrollbar-width:none!important;-ms-overflow-style:none!important;will-change:auto!important;transform:none!important;contain:none!important;
}
.category-strip .cat-tabs.category-tabs-rail::-webkit-scrollbar,.category-tabs-rail.cat-tabs::-webkit-scrollbar,.cat-tabs#cat-tabs::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;}
.category-strip .cat-tabs.category-tabs-rail.is-grabbing,.category-tabs-rail.cat-tabs.is-grabbing{cursor:default!important;}
.category-strip .cat-tab,#cat-tabs .cat-tab{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;min-width:0!important;
  height:34px!important;padding:0 13px!important;border-radius:999px!important;border:1px solid transparent!important;background:transparent!important;color:var(--muted2)!important;
  font-family:'DM Mono',monospace!important;font-size:10px!important;font-weight:600!important;letter-spacing:.6px!important;line-height:1!important;white-space:nowrap!important;
  cursor:pointer!important;pointer-events:auto!important;user-select:none!important;-webkit-user-select:none!important;
  transition:background .10s ease,border-color .10s ease,color .10s ease!important;transform:none!important;will-change:auto!important;
}
.category-strip .cat-tab:hover,#cat-tabs .cat-tab:hover{color:var(--text)!important;border-color:var(--border)!important;background:rgba(255,255,255,.032)!important;transform:none!important;}
.category-strip .cat-tab:active,#cat-tabs .cat-tab:active{transform:none!important;}
.category-strip .cat-tab.active,#cat-tabs .cat-tab.active{color:var(--accent)!important;border-color:var(--ab)!important;background:var(--adim)!important;box-shadow:inset 0 0 0 1px var(--ab)!important;}

.command-topbar .topbar-right .view-switcher .nav-pill,.command-topbar .topbar-right .tb-action-btn{
  height:36px!important;min-height:36px!important;padding:0 13px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border-radius:12px!important;font-family:'Syne',sans-serif!important;font-size:11px!important;font-weight:750!important;line-height:1!important;box-sizing:border-box!important;white-space:nowrap!important;
}
.command-topbar .topbar-right .tb-action-btn{border:1px solid var(--border)!important;}
.command-topbar .topbar-right .tb-action-btn.primary{border-color:var(--accent)!important;}
@media(max-width:860px){.command-topbar .topbar-right .view-switcher .nav-pill,.command-topbar .topbar-right .tb-action-btn{height:32px!important;min-height:32px!important;padding:0 10px!important;font-size:10px!important;}}


/* ══════════════════════════════════════════════════════════
   StackMap v15 — original single-row category slider, click-safe
══════════════════════════════════════════════════════════ */

.login-gate,
.login-gate.landing-original,
body.app-locked .login-gate{
  --bg:#0a0a0c!important;--bg2:#0a0a0c!important;--s1:#111114!important;--s2:#18181c!important;--s3:#222228!important;
  --border:rgba(255,255,255,0.05)!important;--bh:rgba(255,255,255,0.11)!important;
  --text:#eeecea!important;--muted:#54545a!important;--muted2:#888892!important;
  --accent:#c9f135!important;--adim:rgba(201,241,53,0.07)!important;--adim2:rgba(201,241,53,0.13)!important;--ab:rgba(201,241,53,0.22)!important;
  background:#0a0a0c!important;color:#eeecea!important;
}
.login-gate .lg-scroll,.login-gate .lg-p-body,.login-gate .lg-nstat{background:#0a0a0c!important;}
.login-gate .lg-h-glow,.login-gate .lg-signin-glow{background:radial-gradient(circle,rgba(201,241,53,0.05) 0%,transparent 60%)!important;}
.login-gate .lg-ht2,.login-gate .lg-sl2,.login-gate .lg-logo span,.login-gate .lg-p-wordmark span,.login-gate .lg-f-logo span,.login-gate .lg-nstat-n{color:#c9f135!important;}
.login-gate .lg-hero-btn,.login-gate .lg-btn-email,.login-gate .lg-p-pill.active{background:#c9f135!important;color:#060608!important;}
.login-gate .lg-badge,.login-gate .lg-nav-cta,.login-gate .lg-signin-badge,.login-gate .lg-fcard-tag,.login-gate .lg-p-label{color:#c9f135!important;border-color:rgba(201,241,53,0.22)!important;background:rgba(201,241,53,0.07)!important;}

.category-strip.launch-categories{
  display:flex!important;
  align-items:center!important;
  min-height:58px!important;
  margin:0 0 34px!important;
  padding:12px 14px!important;
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.014)),
    color-mix(in srgb,var(--s1) 82%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 52px rgba(0,0,0,.16)!important;
  overflow:hidden!important;
  position:relative!important;
}
.category-strip.launch-categories::after{
  content:''!important;
  display:block!important;
  position:absolute!important;
  top:8px!important;
  right:8px!important;
  bottom:8px!important;
  width:44px!important;
  pointer-events:none!important;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--s1) 94%,transparent))!important;
  border-radius:0 14px 14px 0!important;
}
.category-strip .rl{
  display:block!important;
  flex:0 0 auto!important;
  margin:0 12px 0 0!important;
  color:var(--accent)!important;
  font-family:'DM Mono',monospace!important;
  font-size:8px!important;
  letter-spacing:2.5px!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.category-strip .rdiv{
  display:block!important;
  flex:0 0 auto!important;
  width:1px!important;
  height:18px!important;
  margin:0 12px 0 0!important;
  background:var(--border)!important;
}
.cat-rail-grab{display:none!important;}
.category-strip .cat-tabs.category-tabs-rail,
.category-tabs-rail.cat-tabs,
.cat-tabs#cat-tabs{
  display:flex!important;
  flex:1 1 auto!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  padding:2px 46px 2px 0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:contain!important;
  scroll-snap-type:x proximity!important;
  scroll-behavior:smooth!important;
  cursor:default!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:pan-x manipulation!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  contain:layout style!important;
  will-change:scroll-position!important;
}
.category-strip .cat-tabs.category-tabs-rail::-webkit-scrollbar,
.category-tabs-rail.cat-tabs::-webkit-scrollbar,
.cat-tabs#cat-tabs::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
.category-strip .cat-tabs.category-tabs-rail.is-grabbing,
.category-tabs-rail.cat-tabs.is-grabbing{cursor:default!important;}
.category-strip .cat-tab,
#cat-tabs .cat-tab{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  scroll-snap-align:start!important;
  height:32px!important;
  min-width:max-content!important;
  padding:0 13px!important;
  border-radius:999px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--muted2)!important;
  font-family:'DM Mono',monospace!important;
  font-size:10px!important;
  font-weight:600!important;
  letter-spacing:.6px!important;
  line-height:1!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:manipulation!important;
  transition:background .10s ease,border-color .10s ease,color .10s ease!important;
  transform:none!important;
  will-change:auto!important;
}
.category-strip .cat-tab:hover,
#cat-tabs .cat-tab:hover{
  color:var(--text)!important;
  border-color:var(--border)!important;
  background:rgba(255,255,255,.032)!important;
  transform:none!important;
}
.category-strip .cat-tab:active,
#cat-tabs .cat-tab:active{transform:none!important;}
.category-strip .cat-tab.active,
#cat-tabs .cat-tab.active{
  color:var(--accent)!important;
  border-color:var(--ab)!important;
  background:var(--adim)!important;
  box-shadow:inset 0 0 0 1px var(--ab)!important;
}

@media(max-width:760px){
  .category-strip.launch-categories{padding:10px 12px!important;}
  .category-strip .rl{margin-right:10px!important;}
  .category-strip .rdiv{display:none!important;}
  .category-strip .cat-tabs.category-tabs-rail{padding-right:34px!important;}
}


/* ═════════════════════════════════════════════════════════════
   STACKMAP V16 — icon restore + optional category boxes
   - app favicons are full-size again, not tiny icons trapped inside a box
   - highlight stays tight around the icon only
   - Settings > Category Style can remove boxes around category sections/rail
═════════════════════════════════════════════════════════════ */

/* App icons: restore the cleaner full-icon feel. */
:root{
  --app-icon-size:54px;
  --app-icon-inner:54px;
}

.app-tile,
.add-tile{
  min-height:94px!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.app-tile:hover,
.app-tile:focus-visible,
.add-tile:hover,
.add-tile:focus-visible{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
}

.app-tile .icon-wrap{
  width:var(--app-icon-size)!important;
  height:var(--app-icon-size)!important;
  padding:0!important;
  border:0!important;
  outline:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:14px!important;
  overflow:visible!important;
  transform:none!important;
}

.app-tile .icon-wrap img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  border-radius:13px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.28));
  transform-origin:center!important;
}

.app-tile .icon-wrap .il{
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.070),rgba(255,255,255,.018)),var(--s2)!important;
  border:1px solid var(--border)!important;
  color:var(--accent)!important;
  font-size:18px!important;
  font-weight:800!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.18)!important;
}

.app-tile:hover .icon-wrap,
.app-tile:focus-visible .icon-wrap{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}

.app-tile:hover .icon-wrap img,
.app-tile:focus-visible .icon-wrap img{
  transform:scale(1.10)!important;
  filter:brightness(1.12) saturate(1.08) drop-shadow(0 10px 20px rgba(0,0,0,.32))!important;
}

.app-tile:hover .icon-wrap .il,
.app-tile:focus-visible .icon-wrap .il{
  transform:scale(1.08)!important;
  filter:brightness(1.08)!important;
}

/* Keep the Add tile intentionally dashed so it is still obviously an action. */
.add-tile .icon-wrap{
  width:var(--app-icon-size)!important;
  height:var(--app-icon-size)!important;
  border:1.5px dashed var(--bh)!important;
  background:rgba(255,255,255,.018)!important;
  box-shadow:none!important;
  border-radius:14px!important;
}
.add-tile:hover .icon-wrap,
.add-tile:focus-visible .icon-wrap{
  border-color:var(--ab)!important;
  background:var(--adim)!important;
  transform:none!important;
}

/* Highlight: tight around the icon only, never the whole tile. */
.app-tile.highlighted,
.app-tile.is-highlighted,
.app-tile.gold,
.app-tile[data-highlighted="true"]{
  outline:none!important;
  background:transparent!important;
  box-shadow:none!important;
}

.app-tile.highlighted .icon-wrap,
.app-tile.is-highlighted .icon-wrap,
.app-tile.gold .icon-wrap,
.app-tile[data-highlighted="true"] .icon-wrap{
  outline:2px solid #FFD84D!important;
  outline-offset:4px!important;
  border-radius:16px!important;
  box-shadow:0 0 0 1px rgba(255,216,77,.22),0 0 22px rgba(255,216,77,.30)!important;
}

.app-tile.highlighted .icon-wrap img,
.app-tile.is-highlighted .icon-wrap img,
.app-tile.gold .icon-wrap img,
.app-tile[data-highlighted="true"] .icon-wrap img{
  filter:brightness(1.08) drop-shadow(0 0 14px rgba(255,216,77,.22)) drop-shadow(0 8px 16px rgba(0,0,0,.30))!important;
}

.app-tile.highlighted .icon-wrap::after,
.app-tile.is-highlighted .icon-wrap::after,
.app-tile.gold .icon-wrap::after,
.app-tile[data-highlighted="true"] .icon-wrap::after{
  content:none!important;
  display:none!important;
}

/* Category Style settings buttons. */
.category-box-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.category-box-option{
  min-height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.018);
  color:var(--muted2);
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.5px;
  cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease);
}
.category-box-option:hover{
  transform:translateY(-1px);
  border-color:var(--bh);
  color:var(--text);
  background:rgba(255,255,255,.035);
}
.category-box-option.active{
  background:var(--adim2)!important;
  border-color:var(--ab)!important;
  color:var(--accent)!important;
  font-weight:800;
}

/* No-box category mode: keeps the single-row slider, but removes the chunky containers. */
html[data-category-boxes="off"] .launch-categories,
body.category-boxes-off .launch-categories{
  min-height:44px!important;
  padding:0!important;
  margin-bottom:22px!important;
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}
html[data-category-boxes="off"] .launch-categories .rdiv,
body.category-boxes-off .launch-categories .rdiv{
  opacity:.35!important;
}
html[data-category-boxes="off"] .category-tabs-rail .cat-tab,
body.category-boxes-off .category-tabs-rail .cat-tab{
  background:transparent!important;
  border-color:transparent!important;
  color:var(--muted2)!important;
}
html[data-category-boxes="off"] .category-tabs-rail .cat-tab:hover,
body.category-boxes-off .category-tabs-rail .cat-tab:hover{
  background:var(--adim)!important;
  border-color:var(--ab)!important;
  color:var(--text)!important;
}
html[data-category-boxes="off"] .category-tabs-rail .cat-tab.active,
body.category-boxes-off .category-tabs-rail .cat-tab.active{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--bg)!important;
}
html[data-category-boxes="off"] .cat-block,
body.category-boxes-off .cat-block{
  padding:8px 0 20px!important;
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}
html[data-category-boxes="off"] .cat-block-label::after,
body.category-boxes-off .cat-block-label::after{
  opacity:.35!important;
}

@media(max-width:640px){
  :root{--app-icon-size:48px;--app-icon-inner:48px;}
  .category-box-options{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════════════
   StackMap v17 — fixed app labels + 3 app-size presets
   No slider. Names stay readable across small/medium/large.
══════════════════════════════════════════════════════════ */

/* remove any leftover range/slider from app display area */
.app-size-card input[type="range"],
.app-size-box input[type="range"],
#app-size-slider{
  display:none!important;
}

.app-size-box{
  padding:16px!important;
}

.app-size-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}

.app-size-option{
  min-height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.026);
  color:var(--muted2);
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.7px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .12s var(--ease);
}

.app-size-option:hover{
  color:var(--text);
  border-color:var(--bh);
  background:rgba(255,255,255,.05);
  transform:translateY(-1px);
}

.app-size-option.active,
.app-size-option[aria-pressed="true"]{
  color:#060608;
  border-color:var(--accent);
  background:var(--accent);
  font-weight:800;
}

/* preset dimensions: direct CSS vars keep old render code working */
html[data-app-size="small"]{
  --app-tile-size:78px;
  --app-icon-size:40px;
  --app-icon-inner:38px;
  --app-label-size:8.4px;
  --app-label-line:1.15;
}
html[data-app-size="medium"],
html:not([data-app-size]){
  --app-tile-size:96px;
  --app-icon-size:52px;
  --app-icon-inner:50px;
  --app-label-size:9.2px;
  --app-label-line:1.16;
}
html[data-app-size="large"]{
  --app-tile-size:118px;
  --app-icon-size:66px;
  --app-icon-inner:62px;
  --app-label-size:10px;
  --app-label-line:1.18;
}

/* app names: never hard-cut to one unreadable line */
.app-tile .t-name,
.t-name{
  width:calc(var(--app-tile-size) + 10px)!important;
  max-width:calc(var(--app-tile-size) + 10px)!important;
  min-height:calc(var(--app-label-size,9px) * var(--app-label-line,1.15) * 2 + 2px)!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:var(--app-label-line,1.15)!important;
  font-size:var(--app-label-size,9px)!important;
  letter-spacing:-.08px!important;
  text-align:center!important;
  color:color-mix(in srgb,var(--text) 72%,transparent)!important;
  text-shadow:0 1px 8px rgba(0,0,0,.5)!important;
}

.app-tile:hover .t-name,
.app-tile:focus-visible .t-name{
  color:var(--text)!important;
  text-shadow:0 1px 10px rgba(0,0,0,.7)!important;
}

/* keep the full-icon feel while each preset changes size */
.app-tile,
.add-tile{
  width:calc(var(--app-tile-size) + 12px)!important;
  flex-basis:calc(var(--app-tile-size) + 12px)!important;
  min-height:calc(var(--app-icon-size) + 42px)!important;
  padding:10px 6px 12px!important;
  gap:8px!important;
}

.app-tile .icon-wrap,
.add-tile .icon-wrap{
  width:var(--app-icon-size)!important;
  height:var(--app-icon-size)!important;
}

.app-tile .icon-wrap img{
  width:var(--app-icon-inner)!important;
  height:var(--app-icon-inner)!important;
  max-width:100%!important;
  max-height:100%!important;
}

.app-tile .icon-wrap .il{
  font-size:calc(var(--app-icon-size) * .32)!important;
}

@media(max-width:620px){
  html[data-app-size="large"]{
    --app-tile-size:104px;
    --app-icon-size:58px;
    --app-icon-inner:54px;
    --app-label-size:9.3px;
  }
  .app-size-options{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════════════════
   STACKMAP v17 — app size preset buttons + readable labels
   - removes old size slider from the UI
   - Small / Medium / Large presets
   - app names wrap cleanly instead of being cut off
═════════════════════════════════════════════════════════════ */

/* Hide any old range slider if older HTML/JS injects it later. */
#app-size-slider,
.app-size-card input[type="range"]{
  display:none!important;
}

.app-size-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}

.app-size-option{
  min-height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.018);
  color:var(--muted2);
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:.5px;
  cursor:pointer;
  transition:border-color .15s, background-color .15s, color .15s, transform .15s;
}

.app-size-option:hover,
.app-size-option:focus-visible{
  border-color:var(--ab);
  background:var(--adim);
  color:var(--text);
  transform:translateY(-1px);
}

.app-size-option.active{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#080808!important;
  font-weight:800;
  box-shadow:0 0 0 1px var(--ab),0 12px 24px rgba(0,0,0,.18);
}

/* Preset dimensions. These drive the existing app tile/icon CSS variables. */
html[data-app-size="small"]{
  --app-tile-size:78px;
  --app-icon-size:40px;
  --app-icon-inner:40px;
  --app-name-font:8px;
  --app-name-line:1.12;
  --app-tile-min-height:78px;
}
html[data-app-size="medium"],
html:not([data-app-size]){
  --app-tile-size:96px;
  --app-icon-size:54px;
  --app-icon-inner:54px;
  --app-name-font:9px;
  --app-name-line:1.15;
  --app-tile-min-height:98px;
}
html[data-app-size="large"]{
  --app-tile-size:118px;
  --app-icon-size:68px;
  --app-icon-inner:68px;
  --app-name-font:10px;
  --app-name-line:1.18;
  --app-tile-min-height:126px;
}

/* Make every size readable: no ellipsis, no one-line cutoff. */
.app-tile,
.add-tile{
  width:var(--app-tile-size)!important;
  flex-basis:var(--app-tile-size)!important;
  min-height:var(--app-tile-min-height)!important;
  padding:10px 5px 8px!important;
  gap:7px!important;
  overflow:visible!important;
}

.app-tile .icon-wrap,
.add-tile .icon-wrap{
  width:var(--app-icon-size)!important;
  height:var(--app-icon-size)!important;
  flex:0 0 var(--app-icon-size)!important;
}

.app-tile .icon-wrap img,
.add-tile .icon-wrap img{
  width:var(--app-icon-inner)!important;
  height:var(--app-icon-inner)!important;
}

.app-tile .icon-wrap .il,
.add-tile .icon-wrap .il{
  width:var(--app-icon-inner)!important;
  height:var(--app-icon-inner)!important;
  font-size:calc(var(--app-name-font) + 7px)!important;
}

.t-name,
.add-tile .t-name{
  width:100%!important;
  max-width:100%!important;
  min-height:calc(var(--app-name-font) * 2.55)!important;
  color:rgba(255,255,255,.74)!important;
  font-family:'DM Mono',monospace!important;
  font-size:var(--app-name-font)!important;
  line-height:var(--app-name-line)!important;
  font-weight:500!important;
  letter-spacing:-.08px!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:auto;
  display:block!important;
}

.app-tile:hover .t-name,
.app-tile:focus-visible .t-name,
.add-tile:hover .t-name,
.add-tile:focus-visible .t-name{
  color:var(--text)!important;
}

/* Kill old tooltip/name-bubble behaviour completely. */
.app-tile::after,
.app-tile:hover::after,
.app-tile:focus-visible::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
}

/* On tiny screens, avoid cramped labels while keeping the chosen preset feel. */
@media(max-width:520px){
  html[data-app-size="large"]{
    --app-tile-size:104px;
    --app-icon-size:62px;
    --app-icon-inner:62px;
    --app-name-font:9px;
    --app-tile-min-height:118px;
  }
  .app-size-options{grid-template-columns:1fr;}
}


/* ══════════════════════════════════════════════════════════
   StackMap v18 — creative theme systems + compact menus + mobile polish
══════════════════════════════════════════════════════════ */
html[data-color-theme="night-ops"]{--bg:#05070A;--bg2:#0B1118;--s1:#101923;--s2:#162435;--s3:#162435;--text:#F5F7FA;--muted:#53606F;--muted2:#AEB8C5;--accent:#6EE7FF;--adim:rgba(110,231,255,.08);--adim2:rgba(110,231,255,.16);--ab:rgba(110,231,255,.32);--theme-glow-a:rgba(110,231,255,.09);--theme-glow-b:rgba(157,232,255,.025);--theme-grid:rgba(110,231,255,.015);}
html[data-color-theme="carbon-gold"]{--bg:#070706;--bg2:#0F0E0A;--s1:#17150F;--s2:#221F15;--s3:#221F15;--text:#FFF9E8;--muted:#5F584A;--muted2:#BEB197;--accent:#FFD166;--adim:rgba(255,209,102,.08);--adim2:rgba(255,209,102,.15);--ab:rgba(255,209,102,.30);--theme-glow-a:rgba(255,209,102,.09);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(255,209,102,.014);}
html[data-color-theme="deep-ocean"]{--bg:#02080B;--bg2:#061117;--s1:#0B1B24;--s2:#102B38;--s3:#102B38;--text:#EFFCFF;--muted:#4B6672;--muted2:#9BC7D6;--accent:#38E4D9;--adim:rgba(56,228,217,.08);--adim2:rgba(56,228,217,.15);--ab:rgba(56,228,217,.31);--theme-glow-a:rgba(56,228,217,.09);--theme-glow-b:rgba(39,110,255,.035);--theme-grid:rgba(56,228,217,.014);}
html[data-color-theme="aurora"]{--bg:#04080A;--bg2:#071317;--s1:#0D1D22;--s2:#142C31;--s3:#142C31;--text:#F2FFFD;--muted:#526D70;--muted2:#A0C8C4;--accent:#7CFFB2;--adim:rgba(124,255,178,.08);--adim2:rgba(124,255,178,.15);--ab:rgba(124,255,178,.30);--theme-glow-a:rgba(124,255,178,.085);--theme-glow-b:rgba(116,124,255,.04);--theme-grid:rgba(124,255,178,.014);}
html[data-color-theme="neon-orchid"]{--bg:#08040D;--bg2:#11091B;--s1:#1D102A;--s2:#2D1742;--s3:#2D1742;--text:#FFF7FF;--muted:#715982;--muted2:#CDA6E0;--accent:#D66BFF;--adim:rgba(214,107,255,.08);--adim2:rgba(214,107,255,.15);--ab:rgba(214,107,255,.31);--theme-glow-a:rgba(214,107,255,.09);--theme-glow-b:rgba(255,90,210,.04);--theme-grid:rgba(214,107,255,.014);}
html[data-color-theme="cyber-lime"]{--bg:#050805;--bg2:#0D1208;--s1:#141C0D;--s2:#202B14;--s3:#202B14;--text:#F9FFF1;--muted:#59664D;--muted2:#AAB994;--accent:#C9F135;--adim:rgba(201,241,53,.08);--adim2:rgba(201,241,53,.15);--ab:rgba(201,241,53,.30);--theme-glow-a:rgba(201,241,53,.09);--theme-glow-b:rgba(0,255,210,.025);--theme-grid:rgba(201,241,53,.014);}
html[data-color-theme="blood-moon"]{--bg:#0B0405;--bg2:#17080A;--s1:#241014;--s2:#351820;--s3:#351820;--text:#FFF5F6;--muted:#765158;--muted2:#C996A0;--accent:#FF596E;--adim:rgba(255,89,110,.08);--adim2:rgba(255,89,110,.15);--ab:rgba(255,89,110,.31);--theme-glow-a:rgba(255,89,110,.09);--theme-glow-b:rgba(255,160,90,.03);--theme-grid:rgba(255,89,110,.014);}
html[data-color-theme="copper-forge"]{--bg:#0A0603;--bg2:#160D06;--s1:#21150B;--s2:#32200F;--s3:#32200F;--text:#FFF6EC;--muted:#765E48;--muted2:#C8A17D;--accent:#FF9F4A;--adim:rgba(255,159,74,.08);--adim2:rgba(255,159,74,.15);--ab:rgba(255,159,74,.30);--theme-glow-a:rgba(255,159,74,.085);--theme-glow-b:rgba(255,220,160,.025);--theme-grid:rgba(255,159,74,.014);}
html[data-color-theme="forest-terminal"]{--bg:#030805;--bg2:#08120B;--s1:#0E1C12;--s2:#152A1B;--s3:#152A1B;--text:#F4FFF5;--muted:#516A56;--muted2:#9DB79D;--accent:#78F29C;--adim:rgba(120,242,156,.08);--adim2:rgba(120,242,156,.15);--ab:rgba(120,242,156,.30);--theme-glow-a:rgba(120,242,156,.085);--theme-glow-b:rgba(201,241,53,.025);--theme-grid:rgba(120,242,156,.014);}
html[data-color-theme="royal-ink"]{--bg:#050511;--bg2:#0C0A22;--s1:#15113A;--s2:#211A58;--s3:#211A58;--text:#F7F5FF;--muted:#625A86;--muted2:#AEA3DC;--accent:#8A7DFF;--adim:rgba(138,125,255,.08);--adim2:rgba(138,125,255,.15);--ab:rgba(138,125,255,.32);--theme-glow-a:rgba(138,125,255,.09);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(138,125,255,.014);}
html[data-color-theme="frost-glass"]{--bg:#F5FAFF;--bg2:#EAF3FA;--s1:#FFFFFF;--s2:#DDEAF3;--s3:#DDEAF3;--text:#0F1720;--muted:#8392A0;--muted2:#425466;--accent:#2187FF;--adim:rgba(33,135,255,.08);--adim2:rgba(33,135,255,.13);--ab:rgba(33,135,255,.26);--theme-glow-a:rgba(33,135,255,.07);--theme-glow-b:rgba(255,255,255,.45);--theme-grid:rgba(33,135,255,.025);}
html[data-color-theme="desert-signal"]{--bg:#0B0905;--bg2:#17130B;--s1:#211A10;--s2:#312516;--s3:#312516;--text:#FFF5E0;--muted:#776951;--muted2:#C8B288;--accent:#E7B95B;--adim:rgba(231,185,91,.08);--adim2:rgba(231,185,91,.15);--ab:rgba(231,185,91,.30);--theme-glow-a:rgba(231,185,91,.08);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(231,185,91,.014);}
html[data-color-theme="solar-flare"]{--bg:#0D0702;--bg2:#1A0D04;--s1:#261408;--s2:#3A1E0A;--s3:#3A1E0A;--text:#FFF7EE;--muted:#80604A;--muted2:#D2A07B;--accent:#FFB000;--adim:rgba(255,176,0,.08);--adim2:rgba(255,176,0,.15);--ab:rgba(255,176,0,.30);--theme-glow-a:rgba(255,176,0,.09);--theme-glow-b:rgba(255,80,20,.035);--theme-grid:rgba(255,176,0,.014);}
html[data-color-theme="rose-noir"]{--bg:#0B0508;--bg2:#170A11;--s1:#24101A;--s2:#351927;--s3:#351927;--text:#FFF6FA;--muted:#795767;--muted2:#C8A0B1;--accent:#FF7AB6;--adim:rgba(255,122,182,.08);--adim2:rgba(255,122,182,.15);--ab:rgba(255,122,182,.31);--theme-glow-a:rgba(255,122,182,.09);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(255,122,182,.014);}
html[data-color-theme="emerald-circuit"]{--bg:#030907;--bg2:#07140F;--s1:#0D2018;--s2:#143126;--s3:#143126;--text:#F2FFF9;--muted:#4D6D60;--muted2:#9EC5B6;--accent:#35F0A1;--adim:rgba(53,240,161,.08);--adim2:rgba(53,240,161,.15);--ab:rgba(53,240,161,.30);--theme-glow-a:rgba(53,240,161,.085);--theme-glow-b:rgba(0,245,212,.035);--theme-grid:rgba(53,240,161,.014);}
html[data-color-theme="mono-lab"]{--bg:#040404;--bg2:#0B0B0B;--s1:#131313;--s2:#202020;--s3:#202020;--text:#FAFAFA;--muted:#5B5B5B;--muted2:#B8B8B8;--accent:#FFFFFF;--adim:rgba(255,255,255,.07);--adim2:rgba(255,255,255,.12);--ab:rgba(255,255,255,.24);--theme-glow-a:rgba(255,255,255,.055);--theme-glow-b:rgba(255,255,255,.015);--theme-grid:rgba(255,255,255,.012);}
html[data-color-theme="blue-steel"]{--bg:#05080C;--bg2:#0B1119;--s1:#111C29;--s2:#1A2A3E;--s3:#1A2A3E;--text:#F5FAFF;--muted:#586879;--muted2:#A8B8CA;--accent:#75A7FF;--adim:rgba(117,167,255,.08);--adim2:rgba(117,167,255,.15);--ab:rgba(117,167,255,.30);--theme-glow-a:rgba(117,167,255,.085);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(117,167,255,.014);}
html[data-color-theme="purple-rain"]{--bg:#060411;--bg2:#0D0920;--s1:#171235;--s2:#241B53;--s3:#241B53;--text:#F9F4FF;--muted:#685C85;--muted2:#B9A8DD;--accent:#B982FF;--adim:rgba(185,130,255,.08);--adim2:rgba(185,130,255,.15);--ab:rgba(185,130,255,.30);--theme-glow-a:rgba(185,130,255,.085);--theme-glow-b:rgba(50,170,255,.032);--theme-grid:rgba(185,130,255,.014);}
html[data-color-theme="mint-byte"]{--bg:#030A09;--bg2:#071512;--s1:#0D211D;--s2:#14322C;--s3:#14322C;--text:#F1FFFD;--muted:#4D6D67;--muted2:#9BC2BA;--accent:#8CFFD8;--adim:rgba(140,255,216,.08);--adim2:rgba(140,255,216,.15);--ab:rgba(140,255,216,.30);--theme-glow-a:rgba(140,255,216,.08);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(140,255,216,.014);}
html[data-color-theme="amber-vault"]{--bg:#090704;--bg2:#141007;--s1:#1F170B;--s2:#2D220E;--s3:#2D220E;--text:#FFF8E8;--muted:#75654B;--muted2:#C7B17C;--accent:#F4C45F;--adim:rgba(244,196,95,.08);--adim2:rgba(244,196,95,.15);--ab:rgba(244,196,95,.30);--theme-glow-a:rgba(244,196,95,.085);--theme-glow-b:rgba(255,255,255,.016);--theme-grid:rgba(244,196,95,.014);}
html[data-color-theme="crimson-grid"]{--bg:#0B0306;--bg2:#170710;--s1:#240D19;--s2:#351327;--s3:#351327;--text:#FFF4F8;--muted:#76505F;--muted2:#C996AA;--accent:#FF477E;--adim:rgba(255,71,126,.08);--adim2:rgba(255,71,126,.15);--ab:rgba(255,71,126,.31);--theme-glow-a:rgba(255,71,126,.09);--theme-glow-b:rgba(138,125,255,.03);--theme-grid:rgba(255,71,126,.014);}
html[data-color-theme="arctic-night"]{--bg:#020609;--bg2:#061016;--s1:#0B1A22;--s2:#112A36;--s3:#112A36;--text:#F2FCFF;--muted:#506A76;--muted2:#9DC1D0;--accent:#A8F1FF;--adim:rgba(168,241,255,.08);--adim2:rgba(168,241,255,.15);--ab:rgba(168,241,255,.30);--theme-glow-a:rgba(168,241,255,.085);--theme-glow-b:rgba(255,255,255,.018);--theme-grid:rgba(168,241,255,.014);}
html[data-color-theme="candy-pulse"]{--bg:#0A0410;--bg2:#140820;--s1:#211034;--s2:#321A4D;--s3:#321A4D;--text:#FFF5FF;--muted:#725487;--muted2:#CFA5E6;--accent:#FF6FEA;--adim:rgba(255,111,234,.08);--adim2:rgba(255,111,234,.15);--ab:rgba(255,111,234,.31);--theme-glow-a:rgba(255,111,234,.09);--theme-glow-b:rgba(103,232,249,.035);--theme-grid:rgba(255,111,234,.014);}
html[data-color-theme="moss-code"]{--bg:#060804;--bg2:#0E1207;--s1:#171D0E;--s2:#232B15;--s3:#232B15;--text:#FAFFF1;--muted:#616B50;--muted2:#ADB996;--accent:#B6D96A;--adim:rgba(182,217,106,.08);--adim2:rgba(182,217,106,.15);--ab:rgba(182,217,106,.30);--theme-glow-a:rgba(182,217,106,.085);--theme-glow-b:rgba(255,255,255,.016);--theme-grid:rgba(182,217,106,.014);}

/* ── New clever themes ── */
html[data-color-theme="synthwave"]{--bg:#070418;--bg2:#0F0826;--s1:#180E37;--s2:#241350;--s3:#241350;--text:#FFF1FB;--muted:#6C5C8C;--muted2:#CBA9E8;--accent:#FF2E92;--adim:rgba(255,46,146,.09);--adim2:rgba(255,46,146,.16);--ab:rgba(255,46,146,.33);--theme-glow-a:rgba(255,46,146,.10);--theme-glow-b:rgba(112,0,255,.07);--theme-grid:rgba(255,46,146,.018);}
html[data-color-theme="solar-citrus"]{--bg:#040D0B;--bg2:#0A1813;--s1:#10241D;--s2:#17352A;--s3:#17352A;--text:#FFFCEF;--muted:#5F7066;--muted2:#B9CFC3;--accent:#FFE14D;--adim:rgba(255,225,77,.09);--adim2:rgba(255,225,77,.16);--ab:rgba(255,225,77,.32);--theme-glow-a:rgba(255,225,77,.10);--theme-glow-b:rgba(255,110,46,.05);--theme-grid:rgba(255,225,77,.016);}
html[data-color-theme="ice-violet"]{--bg:#08051A;--bg2:#100B2C;--s1:#1A1242;--s2:#271A62;--s3:#271A62;--text:#F6FBFF;--muted:#6A6790;--muted2:#B7C4F2;--accent:#B6F7FF;--adim:rgba(182,247,255,.09);--adim2:rgba(182,247,255,.16);--ab:rgba(182,247,255,.32);--theme-glow-a:rgba(182,247,255,.10);--theme-glow-b:rgba(255,123,234,.05);--theme-grid:rgba(182,247,255,.016);}
html[data-color-theme="toxic-glow"]{--bg:#05070A;--bg2:#0A1410;--s1:#101F19;--s2:#172F25;--s3:#172F25;--text:#F2FFF6;--muted:#566860;--muted2:#A6C9B6;--accent:#39FF88;--adim:rgba(57,255,136,.09);--adim2:rgba(57,255,136,.16);--ab:rgba(57,255,136,.32);--theme-glow-a:rgba(57,255,136,.10);--theme-glow-b:rgba(255,46,90,.045);--theme-grid:rgba(57,255,136,.016);}
.palette-option[data-color-theme="night-ops"] .palette-swatch i:nth-child(1){background:#05070A}.palette-option[data-color-theme="night-ops"] .palette-swatch i:nth-child(2){background:#162435}.palette-option[data-color-theme="night-ops"] .palette-swatch i:nth-child(3){background:#6EE7FF}
.palette-option[data-color-theme="carbon-gold"] .palette-swatch i:nth-child(1){background:#070706}.palette-option[data-color-theme="carbon-gold"] .palette-swatch i:nth-child(2){background:#221F15}.palette-option[data-color-theme="carbon-gold"] .palette-swatch i:nth-child(3){background:#FFD166}
.palette-option[data-color-theme="deep-ocean"] .palette-swatch i:nth-child(1){background:#02080B}.palette-option[data-color-theme="deep-ocean"] .palette-swatch i:nth-child(2){background:#102B38}.palette-option[data-color-theme="deep-ocean"] .palette-swatch i:nth-child(3){background:#38E4D9}
.palette-option[data-color-theme="aurora"] .palette-swatch i:nth-child(1){background:#04080A}.palette-option[data-color-theme="aurora"] .palette-swatch i:nth-child(2){background:#142C31}.palette-option[data-color-theme="aurora"] .palette-swatch i:nth-child(3){background:#7CFFB2}
.palette-option[data-color-theme="neon-orchid"] .palette-swatch i:nth-child(1){background:#08040D}.palette-option[data-color-theme="neon-orchid"] .palette-swatch i:nth-child(2){background:#2D1742}.palette-option[data-color-theme="neon-orchid"] .palette-swatch i:nth-child(3){background:#D66BFF}
.palette-option[data-color-theme="cyber-lime"] .palette-swatch i:nth-child(1){background:#050805}.palette-option[data-color-theme="cyber-lime"] .palette-swatch i:nth-child(2){background:#202B14}.palette-option[data-color-theme="cyber-lime"] .palette-swatch i:nth-child(3){background:#C9F135}
.palette-option[data-color-theme="blood-moon"] .palette-swatch i:nth-child(1){background:#0B0405}.palette-option[data-color-theme="blood-moon"] .palette-swatch i:nth-child(2){background:#351820}.palette-option[data-color-theme="blood-moon"] .palette-swatch i:nth-child(3){background:#FF596E}
.palette-option[data-color-theme="copper-forge"] .palette-swatch i:nth-child(1){background:#0A0603}.palette-option[data-color-theme="copper-forge"] .palette-swatch i:nth-child(2){background:#32200F}.palette-option[data-color-theme="copper-forge"] .palette-swatch i:nth-child(3){background:#FF9F4A}
.palette-option[data-color-theme="forest-terminal"] .palette-swatch i:nth-child(1){background:#030805}.palette-option[data-color-theme="forest-terminal"] .palette-swatch i:nth-child(2){background:#152A1B}.palette-option[data-color-theme="forest-terminal"] .palette-swatch i:nth-child(3){background:#78F29C}
.palette-option[data-color-theme="royal-ink"] .palette-swatch i:nth-child(1){background:#050511}.palette-option[data-color-theme="royal-ink"] .palette-swatch i:nth-child(2){background:#211A58}.palette-option[data-color-theme="royal-ink"] .palette-swatch i:nth-child(3){background:#8A7DFF}
.palette-option[data-color-theme="frost-glass"] .palette-swatch i:nth-child(1){background:#F5FAFF}.palette-option[data-color-theme="frost-glass"] .palette-swatch i:nth-child(2){background:#DDEAF3}.palette-option[data-color-theme="frost-glass"] .palette-swatch i:nth-child(3){background:#2187FF}
.palette-option[data-color-theme="desert-signal"] .palette-swatch i:nth-child(1){background:#0B0905}.palette-option[data-color-theme="desert-signal"] .palette-swatch i:nth-child(2){background:#312516}.palette-option[data-color-theme="desert-signal"] .palette-swatch i:nth-child(3){background:#E7B95B}
.palette-option[data-color-theme="solar-flare"] .palette-swatch i:nth-child(1){background:#0D0702}.palette-option[data-color-theme="solar-flare"] .palette-swatch i:nth-child(2){background:#3A1E0A}.palette-option[data-color-theme="solar-flare"] .palette-swatch i:nth-child(3){background:#FFB000}
.palette-option[data-color-theme="rose-noir"] .palette-swatch i:nth-child(1){background:#0B0508}.palette-option[data-color-theme="rose-noir"] .palette-swatch i:nth-child(2){background:#351927}.palette-option[data-color-theme="rose-noir"] .palette-swatch i:nth-child(3){background:#FF7AB6}
.palette-option[data-color-theme="emerald-circuit"] .palette-swatch i:nth-child(1){background:#030907}.palette-option[data-color-theme="emerald-circuit"] .palette-swatch i:nth-child(2){background:#143126}.palette-option[data-color-theme="emerald-circuit"] .palette-swatch i:nth-child(3){background:#35F0A1}
.palette-option[data-color-theme="mono-lab"] .palette-swatch i:nth-child(1){background:#040404}.palette-option[data-color-theme="mono-lab"] .palette-swatch i:nth-child(2){background:#202020}.palette-option[data-color-theme="mono-lab"] .palette-swatch i:nth-child(3){background:#FFFFFF}
.palette-option[data-color-theme="blue-steel"] .palette-swatch i:nth-child(1){background:#05080C}.palette-option[data-color-theme="blue-steel"] .palette-swatch i:nth-child(2){background:#1A2A3E}.palette-option[data-color-theme="blue-steel"] .palette-swatch i:nth-child(3){background:#75A7FF}
.palette-option[data-color-theme="purple-rain"] .palette-swatch i:nth-child(1){background:#060411}.palette-option[data-color-theme="purple-rain"] .palette-swatch i:nth-child(2){background:#241B53}.palette-option[data-color-theme="purple-rain"] .palette-swatch i:nth-child(3){background:#B982FF}
.palette-option[data-color-theme="mint-byte"] .palette-swatch i:nth-child(1){background:#030A09}.palette-option[data-color-theme="mint-byte"] .palette-swatch i:nth-child(2){background:#14322C}.palette-option[data-color-theme="mint-byte"] .palette-swatch i:nth-child(3){background:#8CFFD8}
.palette-option[data-color-theme="amber-vault"] .palette-swatch i:nth-child(1){background:#090704}.palette-option[data-color-theme="amber-vault"] .palette-swatch i:nth-child(2){background:#2D220E}.palette-option[data-color-theme="amber-vault"] .palette-swatch i:nth-child(3){background:#F4C45F}
.palette-option[data-color-theme="crimson-grid"] .palette-swatch i:nth-child(1){background:#0B0306}.palette-option[data-color-theme="crimson-grid"] .palette-swatch i:nth-child(2){background:#351327}.palette-option[data-color-theme="crimson-grid"] .palette-swatch i:nth-child(3){background:#FF477E}
.palette-option[data-color-theme="arctic-night"] .palette-swatch i:nth-child(1){background:#020609}.palette-option[data-color-theme="arctic-night"] .palette-swatch i:nth-child(2){background:#112A36}.palette-option[data-color-theme="arctic-night"] .palette-swatch i:nth-child(3){background:#A8F1FF}
.palette-option[data-color-theme="candy-pulse"] .palette-swatch i:nth-child(1){background:#0A0410}.palette-option[data-color-theme="candy-pulse"] .palette-swatch i:nth-child(2){background:#321A4D}.palette-option[data-color-theme="candy-pulse"] .palette-swatch i:nth-child(3){background:#FF6FEA}
.palette-option[data-color-theme="moss-code"] .palette-swatch i:nth-child(1){background:#060804}.palette-option[data-color-theme="moss-code"] .palette-swatch i:nth-child(2){background:#232B15}.palette-option[data-color-theme="moss-code"] .palette-swatch i:nth-child(3){background:#B6D96A}
.palette-option[data-color-theme="synthwave"] .palette-swatch i:nth-child(1){background:#070418}.palette-option[data-color-theme="synthwave"] .palette-swatch i:nth-child(2){background:#241350}.palette-option[data-color-theme="synthwave"] .palette-swatch i:nth-child(3){background:#FF2E92}
.palette-option[data-color-theme="solar-citrus"] .palette-swatch i:nth-child(1){background:#040D0B}.palette-option[data-color-theme="solar-citrus"] .palette-swatch i:nth-child(2){background:#17352A}.palette-option[data-color-theme="solar-citrus"] .palette-swatch i:nth-child(3){background:#FFE14D}
.palette-option[data-color-theme="ice-violet"] .palette-swatch i:nth-child(1){background:#08051A}.palette-option[data-color-theme="ice-violet"] .palette-swatch i:nth-child(2){background:#271A62}.palette-option[data-color-theme="ice-violet"] .palette-swatch i:nth-child(3){background:#B6F7FF}
.palette-option[data-color-theme="toxic-glow"] .palette-swatch i:nth-child(1){background:#05070A}.palette-option[data-color-theme="toxic-glow"] .palette-swatch i:nth-child(2){background:#172F25}.palette-option[data-color-theme="toxic-glow"] .palette-swatch i:nth-child(3){background:#39FF88}

.palette-grid-expanded{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important;}
.palette-grid-expanded .palette-option{min-height:44px!important;padding:8px 9px!important;border-radius:12px!important;background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;}
.palette-grid-expanded .palette-option span:last-child{font-size:9px!important;letter-spacing:.45px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.palette-swatch{min-width:34px!important;height:18px!important;border-radius:999px!important;overflow:hidden!important;box-shadow:0 0 0 1px rgba(255,255,255,.08)!important;}
.palette-swatch i{height:100%!important;}.palette-grid-expanded .palette-option.active{box-shadow:inset 0 0 0 1px var(--ab),0 10px 26px rgba(0,0,0,.18)!important;}
.command-topbar{height:52px!important;padding:0 22px!important;gap:10px!important;}.command-topbar .topbar-right{gap:6px!important;}.command-topbar .topbar-right .view-switcher{padding:2px!important;border-radius:10px!important;gap:1px!important;}
.command-topbar .topbar-right .view-switcher .nav-pill,.command-topbar .topbar-right .tb-action-btn{height:28px!important;min-height:28px!important;padding:0 9px!important;border-radius:8px!important;font-size:9.5px!important;letter-spacing:.1px!important;font-weight:650!important;line-height:1!important;}
.command-topbar .nav-pill-icon{display:none!important;}.command-search input{height:34px!important;font-size:10.5px!important;}.command-search{max-width:460px!important;}.tb-icon-btn{width:30px!important;height:30px!important;border-radius:8px!important;}.auth-user-btn{min-height:30px!important;padding:3px 7px!important;border-radius:8px!important;}
.category-strip.launch-categories{min-height:40px!important;padding:8px 12px!important;border-radius:14px!important;margin-bottom:24px!important;}.category-strip .rl{font-size:7.5px!important;margin-right:10px!important;letter-spacing:2px!important;}.category-strip .rdiv{height:13px!important;margin-right:10px!important;}
.category-strip .cat-tabs.category-tabs-rail,.category-tabs-rail.cat-tabs,.cat-tabs#cat-tabs{gap:5px!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;}.category-strip .cat-tab,#cat-tabs .cat-tab{height:28px!important;padding:0 11px!important;border-radius:9px!important;font-size:9.2px!important;letter-spacing:.45px!important;}.category-strip .cat-tabs.category-tabs-rail::-webkit-scrollbar,.category-tabs-rail.cat-tabs::-webkit-scrollbar,.cat-tabs#cat-tabs::-webkit-scrollbar{display:none!important;height:0!important;}
@media(max-width:900px){.command-topbar{height:auto!important;min-height:0!important;padding:10px 12px!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;}.topbar-left{order:1!important;flex:0 0 auto!important;}.topbar-right{order:2!important;margin-left:auto!important;display:flex!important;flex-wrap:nowrap!important;gap:5px!important;overflow-x:auto!important;max-width:calc(100vw - 112px)!important;scrollbar-width:none!important;}.topbar-right::-webkit-scrollbar{display:none!important;}.topbar-mid{order:3!important;flex:1 0 100%!important;width:100%!important;justify-content:stretch!important;}.command-search{max-width:none!important;width:100%!important;}.command-search input{width:100%!important;min-width:0!important;}.command-topbar .topbar-right .view-switcher .nav-pill,.command-topbar .topbar-right .tb-action-btn{height:27px!important;min-height:27px!important;padding:0 8px!important;font-size:9px!important;border-radius:8px!important;}.tb-sync-dot{display:none!important;}.auth-user-name{display:none!important;}}
@media(max-width:720px){.page{padding:0!important;}.section{padding:22px 14px 0!important;}.section:last-child{padding-bottom:80px!important;}.section-head{align-items:flex-start!important;gap:8px!important;margin-bottom:16px!important;}.welcome-stack-hero .sh-title,.sh-title{font-size:22px!important;line-height:1.1!important;}.sh-sub,.welcome-stack-meta{font-size:10px!important;line-height:1.45!important;}.category-strip.launch-categories{margin-left:0!important;margin-right:0!important;padding:8px 10px!important;}.dock-grid{justify-content:flex-start!important;gap:4px 2px!important;}.profile-wrap,.settings-grid-modern{grid-template-columns:1fr!important;gap:10px!important;}.profile-card{padding:16px!important;border-radius:14px!important;}.settings-hero{padding:18px!important;border-radius:16px!important;}.settings-hero h3{font-size:18px!important;}.settings-hero p{font-size:10px!important;}.palette-grid-expanded{grid-template-columns:repeat(2,minmax(0,1fr))!important;}.palette-grid-expanded .palette-option{min-height:40px!important;padding:7px 8px!important;}.palette-grid-expanded .palette-option span:last-child{font-size:8.5px!important;}.app-size-options,.category-box-options,.time-format-options{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;}.category-box-options,.time-format-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:430px){.logo-wordmark{font-size:14px!important;}.command-topbar{padding:9px 10px!important;}.topbar-right{max-width:calc(100vw - 94px)!important;}.command-topbar .topbar-right .view-switcher .nav-pill,.command-topbar .topbar-right .tb-action-btn{height:26px!important;padding:0 7px!important;font-size:8.6px!important;}.tb-icon-btn{width:26px!important;height:26px!important;}.auth-avatar{width:22px!important;height:22px!important;}html[data-app-size="large"]{--app-tile-size:104px;--app-icon-size:58px;--app-icon-inner:54px;--app-label-size:9.2px;}html[data-app-size="medium"],html:not([data-app-size]){--app-tile-size:86px;--app-icon-size:48px;--app-icon-inner:46px;--app-label-size:8.6px;}html[data-app-size="small"]{--app-tile-size:72px;--app-icon-size:38px;--app-icon-inner:36px;--app-label-size:8px;}}



/* ══════════════════════════════════════════════════════════
   StackMap v19 — theme fix
   The v18 buttons used new palette keys, but the JS whitelist only
   accepted old palette keys. These rules make palette changes obvious
   across the app while keeping the landing page locked to Original.
══════════════════════════════════════════════════════════ */
html[data-color-theme] body:not(.app-locked){
  background:
    radial-gradient(circle at 50% -20%, var(--theme-glow-a, rgba(201,241,53,.05)), transparent 36%),
    radial-gradient(circle at 10% 0%, var(--theme-glow-b, rgba(255,255,255,.018)), transparent 28%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2,var(--bg)) 100%)!important;
}
html[data-color-theme] body:not(.app-locked)::before{
  opacity:.32!important;
  background-image:
    linear-gradient(var(--theme-grid,rgba(255,255,255,.014)) 1px,transparent 1px),
    linear-gradient(90deg,var(--theme-grid,rgba(255,255,255,.014)) 1px,transparent 1px)!important;
  background-size:72px 72px!important;
}
html[data-color-theme] .topbar,
html[data-color-theme] .recent-strip,
html[data-color-theme] .profile-card,
html[data-color-theme] .stack-card,
html[data-color-theme] .modal,
html[data-color-theme] .cmdbox{
  background:color-mix(in srgb, var(--s1) 94%, transparent)!important;
}
html[data-color-theme] .nav-pill.active,
html[data-color-theme] .palette-option.active,
html[data-color-theme] .cat-tab.active,
html[data-color-theme] .btn-s,
html[data-color-theme] .sh-btn:not(.ghost){
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--bg)!important;
}
body.app-locked .login-gate,
body.app-locked .lg-scroll{
  --bg:#0a0a0c!important;--bg2:#0a0a0c!important;--s1:#111114!important;--s2:#18181c!important;--s3:#222228!important;
  --text:#eeecea!important;--muted:#54545a!important;--muted2:#888892!important;
  --accent:#c9f135!important;--adim:rgba(201,241,53,0.07)!important;--adim2:rgba(201,241,53,0.13)!important;--ab:rgba(201,241,53,0.22)!important;
  --theme-glow-a:rgba(201,241,53,0.05)!important;--theme-glow-b:rgba(201,241,53,0.02)!important;--theme-grid:rgba(255,255,255,0.018)!important;
}


/* ══════════════════════════════════════════════════════════
   StackMap v20 — Obsidian is its own theme + app spread layout
══════════════════════════════════════════════════════════ */

/* Make Obsidian clearly different from Original. Original remains black/lime; Obsidian becomes deep black with gold. */
html[data-color-theme="obsidian"]{
  --bg:#030304!important;
  --bg2:#070708!important;
  --s1:#0C0C0E!important;
  --s2:#141416!important;
  --s3:#202024!important;
  --text:#F7F5EF!important;
  --muted:#57565D!important;
  --muted2:#A6A4AD!important;
  --accent:#FFD166!important;
  --adim:rgba(255,209,102,.075)!important;
  --adim2:rgba(255,209,102,.14)!important;
  --ab:rgba(255,209,102,.30)!important;
  --theme-glow-a:rgba(255,209,102,.080)!important;
  --theme-glow-b:rgba(255,255,255,.020)!important;
  --theme-grid:rgba(255,209,102,.012)!important;
}
.palette-option[data-color-theme="obsidian"] span:last-child::after{
  content:"";
}
.palette-option[data-color-theme="obsidian"] .palette-swatch i:nth-child(1){background:#030304!important;}
.palette-option[data-color-theme="obsidian"] .palette-swatch i:nth-child(2){background:#141416!important;}
.palette-option[data-color-theme="obsidian"] .palette-swatch i:nth-child(3){background:#FFD166!important;}

/* App layout setting buttons reuse the same compact segmented-button language. */
.app-layout-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:4px;
}
.app-layout-option{
  min-height:34px;
  border-radius:9px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.018);
  color:var(--muted2);
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:.55px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);
}
.app-layout-option:hover{
  border-color:var(--bh);
  color:var(--text);
  background:rgba(255,255,255,.035);
  transform:translateY(-1px);
}
.app-layout-option.active,
.app-layout-option[aria-pressed="true"]{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--bg)!important;
  font-weight:800;
  box-shadow:0 8px 22px var(--adim2)!important;
}

/* Fixed = current compact flow. Wide = stretch the app rail across the available row. */
html[data-app-layout="fixed"] .dock-grid{
  justify-content:flex-start!important;
  align-content:flex-start!important;
}
html[data-app-layout="wide"] .dock-grid{
  width:100%!important;
  justify-content:space-evenly!important;
  align-content:flex-start!important;
  gap:16px 22px!important;
}
html[data-app-layout="wide"] .cat-block{
  width:100%!important;
}
html[data-app-layout="wide"] .app-tile,
html[data-app-layout="wide"] .add-tile{
  flex-grow:0!important;
}
@media(min-width:1180px){
  html[data-app-layout="wide"] .dock-grid{
    justify-content:space-between!important;
    gap:20px 26px!important;
  }
}
@media(max-width:720px){
  .app-layout-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html[data-app-layout="wide"] .dock-grid{
    justify-content:space-evenly!important;
    gap:8px 6px!important;
  }
}


/* ══════════════════════════════════════════════════════════
   STACKMAP v21 — TRUE SIDE-TO-SIDE APP LAYOUT
   Wide mode now uses a real grid, not flex spacing.
   - Fixed = original compact flow
   - Side to side = app cells fill the whole available screen width
═════════════════════════════════════════════════════════════ */

/* Keep fixed exactly like the normal app layout. */
html[data-app-layout="fixed"] .dock-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-content:flex-start!important;
}

/* Let the launcher breathe across the screen only when Side to side is selected. */
html[data-app-layout="wide"] body:not(.app-locked) .page{
  width:100%!important;
  max-width:none!important;
  padding-left:clamp(16px,3vw,46px)!important;
  padding-right:clamp(16px,3vw,46px)!important;
}

html[data-app-layout="wide"] .section,
html[data-app-layout="wide"] .cat-block{
  width:100%!important;
  max-width:none!important;
}

/* This is the important bit: the row becomes real columns that fill side-to-side. */
html[data-app-layout="wide"] .dock-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(max(var(--app-tile-size),76px),1fr))!important;
  justify-content:stretch!important;
  justify-items:stretch!important;
  align-items:start!important;
  width:100%!important;
  gap:clamp(10px,1.25vw,20px) clamp(8px,1.15vw,18px)!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* App click areas become full cells, but the icon/name stay centred and clean. */
html[data-app-layout="wide"] .app-tile,
html[data-app-layout="wide"] .add-tile{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex-basis:auto!important;
  justify-self:stretch!important;
  align-self:start!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
}

html[data-app-layout="wide"] .app-tile .icon-wrap,
html[data-app-layout="wide"] .add-tile .icon-wrap{
  margin-left:auto!important;
  margin-right:auto!important;
}

html[data-app-layout="wide"] .app-tile .t-name,
html[data-app-layout="wide"] .add-tile .t-name,
html[data-app-layout="wide"] .t-name{
  width:100%!important;
  max-width:min(100%, calc(var(--app-tile-size) + 42px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* On smaller screens, keep the same side-to-side idea but prevent cramped columns. */
@media(max-width:720px){
  html[data-app-layout="wide"] body:not(.app-locked) .page{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  html[data-app-layout="wide"] .dock-grid{
    grid-template-columns:repeat(auto-fit,minmax(max(var(--app-tile-size),72px),1fr))!important;
    gap:8px 4px!important;
  }
}

@media(max-width:430px){
  html[data-app-layout="wide"] .dock-grid{
    grid-template-columns:repeat(auto-fit,minmax(68px,1fr))!important;
  }
}


/* ══════════════════════════════════════════════════════════
   STACKMAP v22 — PACKED SIDE-TO-SIDE + SETTINGS SNAP GRID
   - Side to side now means full-width page with apps packed left-to-right.
   - No space-between / 1fr columns creating massive gaps.
   - Settings cards line up in clean rows with equal control-card heights.
═════════════════════════════════════════════════════════════ */

/* Side to side: page gets the width, app icons stay packed from left to right. */
html[data-app-layout="wide"] body:not(.app-locked) .page{
  width:100%!important;
  max-width:none!important;
  padding-left:clamp(14px,2.6vw,42px)!important;
  padding-right:clamp(14px,2.6vw,42px)!important;
}
html[data-app-layout="wide"] .section,
html[data-app-layout="wide"] .cat-block{
  width:100%!important;
  max-width:none!important;
}
html[data-app-layout="wide"] .dock-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-content:flex-start!important;
  align-items:flex-start!important;
  width:100%!important;
  gap:clamp(8px,.85vw,14px) clamp(6px,.7vw,12px)!important;
  padding-left:0!important;
  padding-right:0!important;
}
html[data-app-layout="wide"] .app-tile,
html[data-app-layout="wide"] .add-tile{
  width:var(--app-tile-size)!important;
  flex:0 0 var(--app-tile-size)!important;
  max-width:var(--app-tile-size)!important;
  min-width:0!important;
  justify-self:auto!important;
  margin:0!important;
}
html[data-app-layout="wide"] .app-tile .t-name,
html[data-app-layout="wide"] .add-tile .t-name,
html[data-app-layout="wide"] .t-name{
  max-width:100%!important;
}

/* Fixed stays compact and unchanged. */
html[data-app-layout="fixed"] .dock-grid,
html:not([data-app-layout]) .dock-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-content:flex-start!important;
}

/* Settings: predictable 12-column rows instead of uneven drifting cards. */
.settings-grid-modern.profile-wrap{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
  grid-auto-flow:row dense!important;
}
.settings-grid-modern > .profile-card,
.settings-grid-modern > .settings-advanced{
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
}
.settings-grid-modern > .profile-card:not(.wide){
  grid-column:span 6!important;
}
.settings-grid-modern > .profile-card.wide,
.settings-grid-modern > .settings-advanced{
  grid-column:1 / -1!important;
}

/* Four compact setting cards snap as one clean row on wide screens. */
@media(min-width:1180px){
  .settings-grid-modern > .app-size-card,
  .settings-grid-modern > .app-layout-card,
  .settings-grid-modern > .category-box-card,
  .settings-grid-modern > .time-format-card{
    grid-column:span 3!important;
    min-height:172px!important;
  }
}
@media(min-width:760px) and (max-width:1179px){
  .settings-grid-modern > .app-size-card,
  .settings-grid-modern > .app-layout-card,
  .settings-grid-modern > .category-box-card,
  .settings-grid-modern > .time-format-card{
    grid-column:span 6!important;
    min-height:168px!important;
  }
}

/* Make cards internally line up: label top, controls fill the card evenly. */
.profile-card .pc-label{
  min-height:18px!important;
  flex:0 0 auto!important;
}
.profile-card .setting-box{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-height:0!important;
}
.app-size-options,
.app-layout-options,
.category-box-options,
.time-format-options{
  margin-top:auto!important;
}
.app-size-option,
.app-layout-option,
.category-box-option,
.time-format-option{
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

/* Keep stats and categories visually aligned in the first row. */
.settings-grid-modern > .profile-card:nth-child(1),
.settings-grid-modern > .profile-card:nth-child(2){
  min-height:236px!important;
}
.settings-grid-modern .cats-list{
  flex:1 1 auto!important;
  min-height:126px!important;
  max-height:126px!important;
}
.settings-grid-modern .new-cat-row{
  flex:0 0 auto!important;
}

/* The big palette card should breathe but still align cleanly. */
.settings-grid-modern .theme-card-modern .setting-box{
  justify-content:flex-start!important;
}
.palette-grid-expanded{
  align-items:stretch!important;
}
.palette-grid-expanded .palette-option{
  min-height:44px!important;
}

@media(max-width:759px){
  html[data-app-layout="wide"] body:not(.app-locked) .page{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  html[data-app-layout="wide"] .dock-grid{
    gap:7px 3px!important;
  }
  html[data-app-layout="wide"] .app-tile,
  html[data-app-layout="wide"] .add-tile{
    width:var(--app-tile-size)!important;
    flex-basis:var(--app-tile-size)!important;
  }
  .settings-grid-modern.profile-wrap{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .settings-grid-modern > .profile-card,
  .settings-grid-modern > .profile-card:not(.wide),
  .settings-grid-modern > .profile-card.wide,
  .settings-grid-modern > .settings-advanced{
    grid-column:1 / -1!important;
    min-height:0!important;
  }
  .settings-grid-modern .cats-list{
    min-height:0!important;
    max-height:190px!important;
  }
}


/* StackMap v23: UI preferences now sync to Supabase state via index.html bridge. */


/* ══════════════════════════════════════════════════════════
   StackMap v24 — landing page lives through themes.
   Preview is forced to show the clean app: side-to-side + no boxes.
══════════════════════════════════════════════════════════ */

.login-gate.landing-theme-live{
  transition:background-color .7s var(--ease), color .7s var(--ease);
}

/* Theme variables scoped to the landing gate so the public page can animate
   without changing a logged-in user's saved app theme. */
.login-gate[data-landing-theme="original"]{--bg:#0a0a0c;--bg2:#111114;--s1:#111114;--s2:#18181c;--s3:#222228;--text:#eeecea;--muted:#54545a;--muted2:#888892;--accent:#c9f135;--adim:rgba(201,241,53,.07);--adim2:rgba(201,241,53,.13);--ab:rgba(201,241,53,.22);--theme-glow-a:rgba(201,241,53,.07);--theme-grid:rgba(201,241,53,.018);}
.login-gate[data-landing-theme="obsidian"]{--bg:#030304;--bg2:#09090A;--s1:#101011;--s2:#171719;--s3:#202024;--text:#F7F3EA;--muted:#59534A;--muted2:#BDB3A0;--accent:#FFD166;--adim:rgba(255,209,102,.08);--adim2:rgba(255,209,102,.15);--ab:rgba(255,209,102,.30);--theme-glow-a:rgba(255,209,102,.08);--theme-grid:rgba(255,209,102,.014);}
.login-gate[data-landing-theme="night-ops"]{--bg:#05070A;--bg2:#0B1118;--s1:#101923;--s2:#162435;--s3:#1D3146;--text:#F5F7FA;--muted:#53606F;--muted2:#AEB8C5;--accent:#6EE7FF;--adim:rgba(110,231,255,.08);--adim2:rgba(110,231,255,.16);--ab:rgba(110,231,255,.32);--theme-glow-a:rgba(110,231,255,.09);--theme-grid:rgba(110,231,255,.015);}
.login-gate[data-landing-theme="carbon-gold"]{--bg:#070706;--bg2:#0F0E0A;--s1:#17150F;--s2:#221F15;--s3:#2A271A;--text:#FFF9E8;--muted:#5F584A;--muted2:#BEB197;--accent:#FFD166;--adim:rgba(255,209,102,.08);--adim2:rgba(255,209,102,.15);--ab:rgba(255,209,102,.30);--theme-glow-a:rgba(255,209,102,.09);--theme-grid:rgba(255,209,102,.014);}
.login-gate[data-landing-theme="deep-ocean"]{--bg:#02080B;--bg2:#061117;--s1:#0B1B24;--s2:#102B38;--s3:#15384A;--text:#EFFCFF;--muted:#4B6672;--muted2:#9BC7D6;--accent:#38E4D9;--adim:rgba(56,228,217,.08);--adim2:rgba(56,228,217,.15);--ab:rgba(56,228,217,.31);--theme-glow-a:rgba(56,228,217,.09);--theme-grid:rgba(56,228,217,.014);}
.login-gate[data-landing-theme="aurora"]{--bg:#04080A;--bg2:#071317;--s1:#0D1D22;--s2:#142C31;--s3:#19393E;--text:#F2FFFD;--muted:#526D70;--muted2:#A0C8C4;--accent:#7CFFB2;--adim:rgba(124,255,178,.08);--adim2:rgba(124,255,178,.15);--ab:rgba(124,255,178,.30);--theme-glow-a:rgba(124,255,178,.085);--theme-grid:rgba(124,255,178,.014);}
.login-gate[data-landing-theme="neon-orchid"]{--bg:#08040D;--bg2:#11091B;--s1:#1D102A;--s2:#2D1742;--s3:#3A1D55;--text:#FFF7FF;--muted:#715982;--muted2:#CDA6E0;--accent:#D66BFF;--adim:rgba(214,107,255,.08);--adim2:rgba(214,107,255,.15);--ab:rgba(214,107,255,.31);--theme-glow-a:rgba(214,107,255,.09);--theme-grid:rgba(214,107,255,.014);}
.login-gate[data-landing-theme="cyber-lime"]{--bg:#050805;--bg2:#0D1208;--s1:#141C0D;--s2:#202B14;--s3:#28361A;--text:#F9FFF1;--muted:#59664D;--muted2:#AAB994;--accent:#C9F135;--adim:rgba(201,241,53,.08);--adim2:rgba(201,241,53,.15);--ab:rgba(201,241,53,.30);--theme-glow-a:rgba(201,241,53,.09);--theme-grid:rgba(201,241,53,.014);}
.login-gate[data-landing-theme="blood-moon"]{--bg:#0B0405;--bg2:#17080A;--s1:#241014;--s2:#351820;--s3:#431F29;--text:#FFF5F6;--muted:#765158;--muted2:#C996A0;--accent:#FF596E;--adim:rgba(255,89,110,.08);--adim2:rgba(255,89,110,.15);--ab:rgba(255,89,110,.31);--theme-glow-a:rgba(255,89,110,.09);--theme-grid:rgba(255,89,110,.014);}
.login-gate[data-landing-theme="copper-forge"]{--bg:#0A0603;--bg2:#160C05;--s1:#221407;--s2:#32200F;--s3:#3D2812;--text:#FFF7EE;--muted:#755D47;--muted2:#C9A680;--accent:#FF9F4A;--adim:rgba(255,159,74,.08);--adim2:rgba(255,159,74,.15);--ab:rgba(255,159,74,.31);--theme-glow-a:rgba(255,159,74,.09);--theme-grid:rgba(255,159,74,.014);}
.login-gate[data-landing-theme="forest-terminal"]{--bg:#030805;--bg2:#07120A;--s1:#0D1C11;--s2:#152A1B;--s3:#1D3524;--text:#F1FFF5;--muted:#4E694F;--muted2:#9FC59F;--accent:#78F29C;--adim:rgba(120,242,156,.08);--adim2:rgba(120,242,156,.15);--ab:rgba(120,242,156,.30);--theme-glow-a:rgba(120,242,156,.085);--theme-grid:rgba(120,242,156,.014);}
.login-gate[data-landing-theme="royal-ink"]{--bg:#050511;--bg2:#0B0A21;--s1:#15113A;--s2:#211A58;--s3:#2B2370;--text:#F8F6FF;--muted:#605B8A;--muted2:#B9B1E8;--accent:#8A7DFF;--adim:rgba(138,125,255,.08);--adim2:rgba(138,125,255,.15);--ab:rgba(138,125,255,.32);--theme-glow-a:rgba(138,125,255,.09);--theme-grid:rgba(138,125,255,.014);}
.login-gate[data-landing-theme="frost-glass"]{--bg:#F5FAFF;--bg2:#EAF3FA;--s1:#FFFFFF;--s2:#DDEAF3;--s3:#C9DAE7;--text:#102233;--muted:#6A7A88;--muted2:#41566A;--accent:#2187FF;--adim:rgba(33,135,255,.08);--adim2:rgba(33,135,255,.15);--ab:rgba(33,135,255,.24);--theme-glow-a:rgba(33,135,255,.10);--theme-grid:rgba(33,135,255,.035);}
.login-gate[data-landing-theme="desert-signal"]{--bg:#0B0905;--bg2:#171207;--s1:#21190D;--s2:#312516;--s3:#3E2F1C;--text:#FFF8EA;--muted:#71634E;--muted2:#BFAA86;--accent:#E7B95B;--adim:rgba(231,185,91,.08);--adim2:rgba(231,185,91,.15);--ab:rgba(231,185,91,.30);--theme-glow-a:rgba(231,185,91,.085);--theme-grid:rgba(231,185,91,.014);}
.login-gate[data-landing-theme="solar-flare"]{--bg:#0D0702;--bg2:#1A0D03;--s1:#251205;--s2:#3A1E0A;--s3:#49260D;--text:#FFF4DD;--muted:#7D5A36;--muted2:#D1A263;--accent:#FFB000;--adim:rgba(255,176,0,.08);--adim2:rgba(255,176,0,.15);--ab:rgba(255,176,0,.32);--theme-glow-a:rgba(255,176,0,.09);--theme-grid:rgba(255,176,0,.014);}
.login-gate[data-landing-theme="rose-noir"]{--bg:#0B0508;--bg2:#170A11;--s1:#25101A;--s2:#351927;--s3:#421F31;--text:#FFF5FA;--muted:#765367;--muted2:#CDA0BA;--accent:#FF7AB6;--adim:rgba(255,122,182,.08);--adim2:rgba(255,122,182,.15);--ab:rgba(255,122,182,.31);--theme-glow-a:rgba(255,122,182,.09);--theme-grid:rgba(255,122,182,.014);}
.login-gate[data-landing-theme="emerald-circuit"]{--bg:#030907;--bg2:#071510;--s1:#0E2119;--s2:#143126;--s3:#1A3E30;--text:#F0FFF9;--muted:#4A6F5E;--muted2:#97CBB5;--accent:#35F0A1;--adim:rgba(53,240,161,.08);--adim2:rgba(53,240,161,.15);--ab:rgba(53,240,161,.30);--theme-glow-a:rgba(53,240,161,.085);--theme-grid:rgba(53,240,161,.014);}
.login-gate[data-landing-theme="mono-lab"]{--bg:#040404;--bg2:#0A0A0A;--s1:#121212;--s2:#202020;--s3:#2B2B2B;--text:#FFFFFF;--muted:#666666;--muted2:#B8B8B8;--accent:#FFFFFF;--adim:rgba(255,255,255,.07);--adim2:rgba(255,255,255,.12);--ab:rgba(255,255,255,.24);--theme-glow-a:rgba(255,255,255,.05);--theme-grid:rgba(255,255,255,.016);}
.login-gate[data-landing-theme="blue-steel"]{--bg:#05080C;--bg2:#0B1119;--s1:#111B29;--s2:#1A2A3E;--s3:#22364F;--text:#F3F8FF;--muted:#55677A;--muted2:#A7B8CC;--accent:#75A7FF;--adim:rgba(117,167,255,.08);--adim2:rgba(117,167,255,.15);--ab:rgba(117,167,255,.30);--theme-glow-a:rgba(117,167,255,.085);--theme-grid:rgba(117,167,255,.014);}
.login-gate[data-landing-theme="purple-rain"]{--bg:#060411;--bg2:#0E0A22;--s1:#17123A;--s2:#241B53;--s3:#2F246A;--text:#FAF6FF;--muted:#665883;--muted2:#BEA8E4;--accent:#B982FF;--adim:rgba(185,130,255,.08);--adim2:rgba(185,130,255,.15);--ab:rgba(185,130,255,.31);--theme-glow-a:rgba(185,130,255,.09);--theme-grid:rgba(185,130,255,.014);}
.login-gate[data-landing-theme="mint-byte"]{--bg:#030A09;--bg2:#071512;--s1:#0D211E;--s2:#14322C;--s3:#1B4038;--text:#EFFFFB;--muted:#4E716A;--muted2:#9FD0C5;--accent:#8CFFD8;--adim:rgba(140,255,216,.08);--adim2:rgba(140,255,216,.15);--ab:rgba(140,255,216,.30);--theme-glow-a:rgba(140,255,216,.085);--theme-grid:rgba(140,255,216,.014);}
.login-gate[data-landing-theme="amber-vault"]{--bg:#090704;--bg2:#141007;--s1:#1F170B;--s2:#2D220E;--s3:#382A11;--text:#FFF8E8;--muted:#75654B;--muted2:#C7B17C;--accent:#F4C45F;--adim:rgba(244,196,95,.08);--adim2:rgba(244,196,95,.15);--ab:rgba(244,196,95,.30);--theme-glow-a:rgba(244,196,95,.085);--theme-grid:rgba(244,196,95,.014);}
.login-gate[data-landing-theme="crimson-grid"]{--bg:#0B0306;--bg2:#170710;--s1:#240D19;--s2:#351327;--s3:#441832;--text:#FFF4F8;--muted:#76505F;--muted2:#C996AA;--accent:#FF477E;--adim:rgba(255,71,126,.08);--adim2:rgba(255,71,126,.15);--ab:rgba(255,71,126,.31);--theme-glow-a:rgba(255,71,126,.09);--theme-grid:rgba(255,71,126,.014);}
.login-gate[data-landing-theme="arctic-night"]{--bg:#020609;--bg2:#061016;--s1:#0B1A22;--s2:#112A36;--s3:#173746;--text:#F2FCFF;--muted:#506A76;--muted2:#9DC1D0;--accent:#A8F1FF;--adim:rgba(168,241,255,.08);--adim2:rgba(168,241,255,.15);--ab:rgba(168,241,255,.30);--theme-glow-a:rgba(168,241,255,.085);--theme-grid:rgba(168,241,255,.014);}
.login-gate[data-landing-theme="candy-pulse"]{--bg:#0A0410;--bg2:#140820;--s1:#211034;--s2:#321A4D;--s3:#3F2160;--text:#FFF5FF;--muted:#725487;--muted2:#CFA5E6;--accent:#FF6FEA;--adim:rgba(255,111,234,.08);--adim2:rgba(255,111,234,.15);--ab:rgba(255,111,234,.31);--theme-glow-a:rgba(255,111,234,.09);--theme-grid:rgba(255,111,234,.014);}
.login-gate[data-landing-theme="moss-code"]{--bg:#060804;--bg2:#0E1207;--s1:#171D0E;--s2:#232B15;--s3:#2D361B;--text:#FAFFF1;--muted:#616B50;--muted2:#ADB996;--accent:#B6D96A;--adim:rgba(182,217,106,.08);--adim2:rgba(182,217,106,.15);--ab:rgba(182,217,106,.30);--theme-glow-a:rgba(182,217,106,.085);--theme-grid:rgba(182,217,106,.014);}

/* Override older hard-locked original landing styles so the carousel can breathe. */
.login-gate[data-landing-theme] .lg-scroll,
.login-gate[data-landing-theme] .lg-p-body,
.login-gate[data-landing-theme] .lg-nstat,
.login-gate[data-landing-theme] .lg-fcard,
.login-gate[data-landing-theme] .lg-wcard,
.login-gate[data-landing-theme] .lg-marq{
  background:var(--bg)!important;
  color:var(--text)!important;
  transition:background-color .7s var(--ease), color .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease);
}
.login-gate[data-landing-theme] .lg-p-body{
  background:
    radial-gradient(circle at 18% 4%,var(--theme-glow-a),transparent 36%),
    radial-gradient(circle at 92% 12%,var(--adim),transparent 32%),
    linear-gradient(135deg,var(--bg),var(--bg2))!important;
}
.login-gate[data-landing-theme] .lg-h-glow,
.login-gate[data-landing-theme] .lg-signin-glow,
.login-gate[data-landing-theme] .lg-manif-bg{
  background:radial-gradient(circle,var(--theme-glow-a) 0%,transparent 62%)!important;
}
.login-gate[data-landing-theme] .lg-h-grid,
.login-gate[data-landing-theme] .lg-signin-grid-bg{
  background-image:linear-gradient(var(--theme-grid) 1px,transparent 1px),linear-gradient(90deg,var(--theme-grid) 1px,transparent 1px)!important;
}
.login-gate[data-landing-theme] .lg-logo span,
.login-gate[data-landing-theme] .lg-p-wordmark span,
.login-gate[data-landing-theme] .lg-f-logo span,
.login-gate[data-landing-theme] .lg-ht2,
.login-gate[data-landing-theme] .lg-sl2,
.login-gate[data-landing-theme] .lg-ac,
.login-gate[data-landing-theme] .lg-eyebrow,
.login-gate[data-landing-theme] .lg-nstat-n,
.login-gate[data-landing-theme] .lg-fcard-icon,
.login-gate[data-landing-theme] .lg-wcard-role,
.login-gate[data-landing-theme] .lg-p-label,
.login-gate[data-landing-theme] .lg-fcard-tag,
.login-gate[data-landing-theme] .lg-nav-cta,
.login-gate[data-landing-theme] .lg-badge{
  color:var(--accent)!important;
}
.login-gate[data-landing-theme] .lg-hero-btn,
.login-gate[data-landing-theme] .lg-btn-email{
  background:var(--accent)!important;
  color:#050505!important;
}
.login-gate[data-landing-theme] .lg-badge,
.login-gate[data-landing-theme] .lg-nav-cta,
.login-gate[data-landing-theme] .lg-p-label,
.login-gate[data-landing-theme] .lg-fcard-tag{
  background:var(--adim)!important;
  border-color:var(--ab)!important;
}
.login-gate[data-landing-theme] .lg-preview-outer{
  border-color:var(--ab)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04),0 0 100px var(--theme-glow-a)!important;
}
.login-gate[data-landing-theme] .lg-preview-bar{
  background:color-mix(in srgb,var(--bg) 86%, #000 14%)!important;
  border-bottom-color:var(--border)!important;
}
.login-gate[data-landing-theme] .lg-p-addr,
.login-gate[data-landing-theme] .lg-demo-search{
  background:var(--s1)!important;
  border-color:var(--border)!important;
  color:var(--muted2)!important;
}

/* Landing theme badge */
.lg-live-theme-chip{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:25px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--ab);
  background:var(--adim);
  color:var(--accent);
  font-family:'DM Mono',monospace;
  font-size:8px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  white-space:nowrap;
}
.lg-live-theme-chip span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}
.lg-live-theme-chip b{font-weight:600;}

/* Real app preview: wide/no-box version on landing page. */
.login-gate.landing-demo-wide .lg-preview-wrap{
  max-width:min(1280px,96vw)!important;
}
.login-gate.landing-demo-wide .lg-p-body{
  padding:24px clamp(16px,3vw,34px) 28px!important;
}
.login-gate.landing-demo-wide .lg-p-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(86px,1fr))!important;
  gap:14px 6px!important;
  margin-bottom:28px!important;
  align-items:start!important;
}
.login-gate.landing-demo-wide .lg-p-tile{
  width:100%!important;
  min-width:0!important;
  padding:10px 4px!important;
  border-radius:16px!important;
  background:transparent!important;
  border:none!important;
}
.login-gate.landing-demo-wide .lg-p-tile:hover{
  background:transparent!important;
}
.login-gate.landing-demo-nobox .lg-p-ico{
  width:48px!important;
  height:48px!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  margin:0 auto!important;
}
.login-gate.landing-demo-nobox .lg-p-ico img{
  width:36px!important;
  height:36px!important;
  object-fit:contain!important;
}
.login-gate.landing-demo-wide .lg-p-name{
  width:100%!important;
  color:var(--muted2)!important;
  font-size:8.4px!important;
  line-height:1.25!important;
  white-space:normal!important;
  text-align:center!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
}
.login-gate.landing-demo-nobox .lg-p-cat{
  margin:22px 0 10px!important;
}
.login-gate.landing-demo-nobox .lg-p-cdot{
  background:var(--accent)!important;
  box-shadow:0 0 14px var(--accent)!important;
}
.login-gate.landing-demo-nobox .lg-p-cname{
  color:var(--text)!important;
  font-size:12px!important;
}
.login-gate.landing-demo-nobox .lg-demo-catbar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:18px 0 16px!important;
  display:flex!important;
  gap:18px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.login-gate.landing-demo-nobox .lg-demo-catbar span{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0 0 7px!important;
  border-radius:0!important;
  color:var(--muted2)!important;
  font-size:9px!important;
  letter-spacing:1.8px!important;
  text-transform:uppercase!important;
  position:relative!important;
}
.login-gate.landing-demo-nobox .lg-demo-catbar span.active{
  color:var(--text)!important;
}
.login-gate.landing-demo-nobox .lg-demo-catbar span.active::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 14px var(--accent);
}
.login-gate.landing-demo-nobox .lg-demo-actions span{
  background:transparent!important;
  border:1px solid var(--border)!important;
  color:var(--muted2)!important;
}
.login-gate.landing-demo-nobox .lg-demo-actions span:first-child{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#050505!important;
}
.login-gate .lg-p-glowbar{
  background:linear-gradient(to right,transparent,var(--accent),transparent)!important;
  opacity:.45!important;
}
.login-gate .lg-preview-fade{
  background:linear-gradient(to bottom,transparent,var(--bg))!important;
}

@media(max-width:760px){
  .lg-live-theme-chip{display:none!important;}
  .login-gate.landing-demo-wide .lg-p-grid{
    grid-template-columns:repeat(auto-fill,minmax(62px,1fr))!important;
    gap:10px 2px!important;
  }
  .login-gate.landing-demo-nobox .lg-p-ico{width:38px!important;height:38px!important;}
  .login-gate.landing-demo-nobox .lg-p-ico img{width:29px!important;height:29px!important;}
  .login-gate.landing-demo-wide .lg-p-name{font-size:7.4px!important;}
  .login-gate.landing-demo-nobox .lg-demo-catbar{gap:12px!important;overflow-x:auto!important;scrollbar-width:none!important;}
  .login-gate.landing-demo-nobox .lg-demo-catbar::-webkit-scrollbar{display:none!important;}
}

@supports not (background: color-mix(in srgb, red, blue)){
  .login-gate[data-landing-theme] .lg-preview-bar{background:var(--s1)!important;}
}


/* ══════════════════════════════════════════════════════════
   StackMap v25 — landing demo is the real app, no browser box.
   The public demo uses: side-to-side / no boxes / live palette cycling.
══════════════════════════════════════════════════════════ */

/* Remove the old browser-preview feeling completely. */
.lg-real-preview-wrap{
  max-width:min(1320px,96vw)!important;
  margin:0 auto!important;
  padding:0 clamp(12px,2vw,24px) 90px!important;
}
.lg-real-app-preview{
  position:relative;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:
    radial-gradient(circle at 12% 0,var(--theme-glow-a,rgba(201,241,53,.08)),transparent 34%),
    radial-gradient(circle at 92% 12%,var(--adim,rgba(201,241,53,.07)),transparent 32%),
    linear-gradient(135deg,var(--bg,#0a0a0c),var(--bg2,#111114))!important;
  color:var(--text)!important;
  transition:background .75s var(--ease), color .75s var(--ease);
}
.lg-real-app-preview::before{
  content:'';
  position:absolute;
  inset:-28px 0 -20px;
  pointer-events:none;
  background-image:
    linear-gradient(var(--theme-grid,rgba(201,241,53,.018)) 1px,transparent 1px),
    linear-gradient(90deg,var(--theme-grid,rgba(201,241,53,.018)) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 70% at 50% 20%,black 0%,transparent 100%);
  opacity:.75;
  z-index:0;
}
.lg-real-app-preview > *{position:relative;z-index:1;}

/* The preview topbar uses the real app topbar styling, but never sticks. */
.lg-real-topbar{
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  margin:0 auto 26px!important;
  height:56px!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid var(--border)!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none!important;
  padding:0 clamp(10px,2vw,28px)!important;
}
.lg-real-topbar .logo-wordmark span,
.lg-real-app-preview .logo-wordmark span,
.lg-real-app-preview .sh-label,
.lg-real-app-preview .rl,
.lg-real-app-preview .cat-label-dot,
.lg-real-app-preview .cat-tab.active,
.lg-real-app-preview .welcome-dot{
  color:var(--accent)!important;
}
.lg-real-app-preview .logo-wordmark span{color:var(--accent)!important;}
.lg-real-search input,
.lg-real-search{
  background:var(--s1)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
.lg-real-app-preview .sk{
  background:var(--s2)!important;
  border-color:var(--border)!important;
  color:var(--muted2)!important;
}
.lg-real-actions .nav-pills{
  background:var(--s2)!important;
  border-color:var(--border)!important;
}
.lg-real-actions .nav-pill{
  height:28px!important;
  padding:0 10px!important;
  font-size:10px!important;
  color:var(--muted2)!important;
}
.lg-real-actions .nav-pill.active,
.lg-real-actions .tb-action-btn.primary{
  background:var(--accent)!important;
  color:#050505!important;
  border-color:var(--accent)!important;
}
.lg-real-actions .tb-action-btn{
  height:30px!important;
  padding:0 11px!important;
  font-size:10px!important;
  border-radius:9px!important;
}
.lg-real-actions .tb-action-btn.ghost{
  background:transparent!important;
  border-color:var(--border)!important;
  color:var(--muted2)!important;
}

/* Theme chip is part of the real-style topbar, not a browser chrome badge. */
.lg-live-theme-chip{
  height:30px!important;
  margin-left:2px!important;
  border-color:var(--ab)!important;
  background:var(--adim)!important;
  color:var(--accent)!important;
}

/* Real page sizing inside the landing preview. */
.lg-real-page{
  max-width:100%!important;
  margin:0!important;
  padding:0 clamp(10px,2vw,28px) 10px!important;
}
.lg-real-page .section{
  padding:0!important;
  margin:0!important;
}
.lg-real-head{
  margin-bottom:18px!important;
  padding:0!important;
}
.lg-real-head .sh-title{
  color:var(--text)!important;
}
.lg-real-head .sh-count,
.lg-real-head .welcome-stack-meta{
  color:var(--muted2)!important;
}

/* No category boxes on the landing preview. */
.lg-real-categories{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0 0 24px!important;
  height:auto!important;
  overflow:hidden!important;
}
.lg-real-categories .rdiv{
  background:var(--border)!important;
}
.lg-real-categories .category-tabs-rail{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:14px!important;
  overflow:hidden!important;
  min-width:0!important;
}
.lg-real-categories .cat-tab{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0 0 7px!important;
  color:var(--muted2)!important;
  position:relative!important;
  font-size:10px!important;
  letter-spacing:1.4px!important;
}
.lg-real-categories .cat-tab.active{
  color:var(--text)!important;
}
.lg-real-categories .cat-tab.active::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  border-radius:999px;
  background:var(--accent)!important;
  box-shadow:0 0 14px var(--accent)!important;
}

/* No app-section boxes. */
.lg-real-blocks .cat-block{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0 0 30px!important;
}
.lg-real-blocks .cat-block-label{
  margin-bottom:12px!important;
}
.lg-real-blocks .cat-block-label::after{
  background:var(--border)!important;
}
.lg-real-blocks .cat-label-text{
  color:var(--text)!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
}
.lg-real-blocks .cat-label-dot{
  background:var(--accent)!important;
  box-shadow:0 0 12px var(--accent)!important;
}

/* Wide/no-box app grid that looks like the real app, not a framed mockup. */
.lg-real-blocks .dock-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  gap:16px 14px!important;
  padding:0!important;
  width:100%!important;
}
.lg-real-blocks .app-tile{
  width:86px!important;
  flex:0 0 86px!important;
  min-height:82px!important;
  padding:6px 4px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:14px!important;
  overflow:visible!important;
}
.lg-real-blocks .app-tile:hover{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.lg-real-blocks .icon-wrap{
  width:48px!important;
  height:48px!important;
  margin:0 auto!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:13px!important;
  overflow:visible!important;
}
.lg-real-blocks .icon-wrap img{
  width:38px!important;
  height:38px!important;
  object-fit:contain!important;
  transition:transform .18s var(--ease), filter .18s var(--ease)!important;
}
.lg-real-blocks .app-tile:hover .icon-wrap{
  transform:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.lg-real-blocks .app-tile:hover .icon-wrap img{
  transform:translateY(-2px) scale(1.11)!important;
  filter:drop-shadow(0 10px 18px var(--adim2))!important;
}
.lg-real-blocks .t-name{
  width:100%!important;
  margin-top:7px!important;
  color:var(--muted2)!important;
  font-size:9px!important;
  line-height:1.22!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
}
.lg-real-blocks .app-tile:hover .t-name{
  color:var(--text)!important;
}
.lg-real-blocks .app-tile::after{display:none!important;}

/* Make the theme carousel visibly affect the actual preview. */
.login-gate[data-landing-theme] .lg-real-app-preview,
.login-gate[data-landing-theme] .lg-real-topbar,
.login-gate[data-landing-theme] .lg-real-categories,
.login-gate[data-landing-theme] .lg-real-blocks .app-tile,
.login-gate[data-landing-theme] .lg-real-blocks .icon-wrap{
  transition:background .75s var(--ease), color .75s var(--ease), border-color .75s var(--ease), box-shadow .75s var(--ease), filter .75s var(--ease)!important;
}

/* Old browser demo classes should not create chrome if anything remains. */
.lg-preview-outer,
.lg-preview-bar,
.lg-p-glowbar,
.lg-preview-fade{display:none!important;}

@media(max-width:860px){
  .lg-real-topbar{
    height:auto!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    padding:12px 14px!important;
  }
  .lg-real-topbar .topbar-left{width:100%!important;justify-content:center!important;}
  .lg-real-topbar .topbar-mid{order:3;width:100%!important;flex:1 0 100%!important;}
  .lg-real-topbar .command-search{width:100%!important;max-width:none!important;}
  .lg-real-actions{width:100%!important;justify-content:center!important;flex-wrap:wrap!important;gap:6px!important;}
  .lg-real-actions .lg-live-theme-chip{display:none!important;}
  .lg-real-page{padding:0 12px!important;}
  .lg-real-head{justify-content:center!important;text-align:center!important;}
  .lg-real-head .sh-count{display:none!important;}
  .lg-real-categories{justify-content:flex-start!important;overflow:hidden!important;}
  .lg-real-categories .rl,.lg-real-categories .rdiv{display:none!important;}
  .lg-real-categories .category-tabs-rail{overflow-x:auto!important;scrollbar-width:none!important;gap:12px!important;}
  .lg-real-categories .category-tabs-rail::-webkit-scrollbar{display:none!important;}
  .lg-real-blocks .dock-grid{gap:12px 8px!important;}
  .lg-real-blocks .app-tile{width:70px!important;flex-basis:70px!important;min-height:78px!important;}
  .lg-real-blocks .icon-wrap{width:40px!important;height:40px!important;}
  .lg-real-blocks .icon-wrap img{width:32px!important;height:32px!important;}
  .lg-real-blocks .t-name{font-size:8px!important;}
}

@media(max-width:520px){
  .lg-real-preview-wrap{padding-left:8px!important;padding-right:8px!important;}
  .lg-real-actions .nav-pill{font-size:9px!important;padding:0 8px!important;}
  .lg-real-actions .tb-action-btn{font-size:9px!important;padding:0 9px!important;}
  .lg-real-blocks .app-tile{width:64px!important;flex-basis:64px!important;}
  .lg-real-blocks .dock-grid{gap:10px 5px!important;}
}

/* ══════════════════════════════════════════════════════════
   StackMap v26 — landing preview made to behave like the real app,
   plus search/preview visual fixes.
══════════════════════════════════════════════════════════ */

/* Remove the fake preview/frame feeling. The landing demo now sits on the page
   like the real app shell instead of inside a browser/mockup card. */
.lg-preview-wrap.lg-real-preview-wrap{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 28px 92px!important;
}

.lg-real-app-preview{
  width:100%!important;
  max-width:none!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  padding:0!important;
}

.lg-real-app-preview::before{
  display:none!important;
}

.lg-real-app-preview .topbar.command-topbar,
.lg-real-topbar{
  position:relative!important;
  top:auto!important;
  width:100%!important;
  min-height:56px!important;
  height:auto!important;
  padding:0 28px!important;
  margin:0!important;
  border-radius:0!important;
  border:0!important;
  border-bottom:1px solid var(--border)!important;
  background:rgba(10,10,12,.88)!important;
  box-shadow:none!important;
}

.login-gate[data-landing-theme] .lg-real-topbar{
  background:color-mix(in srgb, var(--bg) 88%, transparent)!important;
  border-bottom-color:var(--border)!important;
}

.lg-real-page{
  max-width:none!important;
  width:100%!important;
  padding:36px 28px 0!important;
  margin:0!important;
  background:transparent!important;
}

.lg-real-page .section{
  padding:0!important;
  margin:0!important;
}

/* Force the landing demo to the requested clean state: wide + no boxes. */
.lg-real-blocks .cat-block{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin-bottom:34px!important;
}

.lg-real-blocks .dock-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill, minmax(var(--app-tile-size), var(--app-tile-size)))!important;
  justify-content:start!important;
  align-items:start!important;
  column-gap:14px!important;
  row-gap:16px!important;
  width:100%!important;
  padding:0!important;
}

.lg-real-app-preview .icon-wrap{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

.lg-real-categories{
  margin:0 0 30px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
}

.lg-real-categories .category-tabs-rail{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  flex-wrap:nowrap!important;
  scrollbar-width:none!important;
}
.lg-real-categories .category-tabs-rail::-webkit-scrollbar{display:none!important;}

/* Make the demo inherit the exact app sizing choices used by the real app. */
.lg-real-app-preview{
  --app-tile-size:88px;
  --app-icon-size:46px;
  --app-icon-inner:34px;
}

@media(max-width:760px){
  .lg-preview-wrap.lg-real-preview-wrap{padding:0 14px 72px!important;}
  .lg-real-app-preview .topbar.command-topbar,
  .lg-real-topbar{padding:10px 14px!important;gap:8px!important;}
  .lg-real-page{padding:24px 14px 0!important;}
  .lg-real-blocks .dock-grid{
    grid-template-columns:repeat(auto-fill, minmax(72px, 72px))!important;
    column-gap:8px!important;
    row-gap:14px!important;
  }
  .lg-real-actions .nav-pill,
  .lg-real-actions .tb-action-btn{font-size:9px!important;padding:5px 8px!important;}
}

/* Search fallback hidden state. */
.app-tile.search-hidden{display:none!important;}


/* ══════════════════════════════════════════════════════════
   StackMap v28 — landing preview must be the product.
   Fixes:
   - landing theme carousel now overrides old original locks
   - removes the visible "Original" theme badge
   - preview uses the same topbar/page/section/category/app classes
     and is forced to the product state: wide + no boxes
══════════════════════════════════════════════════════════ */

/* Kill old v14/v15 hard original locks on landing when the carousel sets a theme. */
.login-gate[data-landing-theme]{
  background:
    radial-gradient(circle at 14% 0%, var(--theme-glow-a, var(--adim)) 0%, transparent 34%),
    radial-gradient(circle at 92% 8%, var(--adim) 0%, transparent 30%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg2, var(--bg)) 100%)!important;
  color:var(--text)!important;
  transition:background .65s var(--ease), color .65s var(--ease)!important;
}
.login-gate[data-landing-theme] .lg-scroll,
.login-gate[data-landing-theme] .lg-hero,
.login-gate[data-landing-theme] .lg-sec,
.login-gate[data-landing-theme] .lg-manif,
.login-gate[data-landing-theme] .lg-signin-sec,
.login-gate[data-landing-theme] .lg-footer{
  background:transparent!important;
  color:var(--text)!important;
}
.login-gate[data-landing-theme] .lg-scroll::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(var(--theme-grid, rgba(255,255,255,.018)) 1px, transparent 1px),
    linear-gradient(90deg, var(--theme-grid, rgba(255,255,255,.018)) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.65;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 18%, black 0%, transparent 78%);
}
.login-gate[data-landing-theme] .lg-scroll > *{position:relative;z-index:1;}
.login-gate[data-landing-theme] .lg-h-glow,
.login-gate[data-landing-theme] .lg-signin-glow,
.login-gate[data-landing-theme] .lg-manif-bg{
  background:radial-gradient(circle, var(--theme-glow-a, var(--adim)) 0%, transparent 64%)!important;
}
.login-gate[data-landing-theme] .lg-h-grid,
.login-gate[data-landing-theme] .lg-signin-grid-bg{
  background-image:linear-gradient(var(--theme-grid, rgba(255,255,255,.018)) 1px,transparent 1px),linear-gradient(90deg,var(--theme-grid, rgba(255,255,255,.018)) 1px,transparent 1px)!important;
}
.login-gate[data-landing-theme] .lg-logo span,
.login-gate[data-landing-theme] .logo-wordmark span,
.login-gate[data-landing-theme] .lg-ht2,
.login-gate[data-landing-theme] .lg-sl2,
.login-gate[data-landing-theme] .lg-ac,
.login-gate[data-landing-theme] .sh-label,
.login-gate[data-landing-theme] .rl,
.login-gate[data-landing-theme] .cat-label-dot,
.login-gate[data-landing-theme] .welcome-dot,
.login-gate[data-landing-theme] .cat-label-text:hover,
.login-gate[data-landing-theme] .lg-eyebrow,
.login-gate[data-landing-theme] .lg-nstat-n,
.login-gate[data-landing-theme] .lg-wcard-role{
  color:var(--accent)!important;
}
.login-gate[data-landing-theme] .lg-hero-btn,
.login-gate[data-landing-theme] .lg-btn-email,
.login-gate[data-landing-theme] .nav-pill.active,
.login-gate[data-landing-theme] .tb-action-btn.primary{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--bg)!important;
}
.login-gate[data-landing-theme] .lg-badge,
.login-gate[data-landing-theme] .lg-nav-cta,
.login-gate[data-landing-theme] .lg-signin-badge,
.login-gate[data-landing-theme] .lg-fcard-tag,
.login-gate[data-landing-theme] .lg-p-label{
  background:var(--adim)!important;
  border-color:var(--ab)!important;
  color:var(--accent)!important;
}

/* Do not show the theme name chip on the landing product preview. */
.login-gate .lg-live-theme-chip{display:none!important;}

/* Make the landing preview stop being a mockup: it should sit exactly like the app shell. */
.lg-preview-wrap.lg-real-preview-wrap{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 0 92px!important;
}
.lg-real-app-preview{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  --app-tile-size:88px;
  --app-icon-size:54px;
  --app-icon-inner:54px;
}
.lg-real-app-preview::before{display:none!important;}

/* Landing preview topbar: same product bar, no extra card/frame styling. */
.login-gate[data-landing-theme] .lg-real-app-preview .topbar.command-topbar,
.login-gate[data-landing-theme] .lg-real-topbar{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:56px!important;
  height:56px!important;
  margin:0!important;
  padding:0 28px!important;
  gap:12px!important;
  border:0!important;
  border-bottom:1px solid var(--border)!important;
  border-radius:0!important;
  background:color-mix(in srgb, var(--bg) 88%, #000 12%)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.login-gate[data-landing-theme] .lg-real-app-preview .topbar-left{display:flex!important;align-items:center!important;flex-shrink:0!important;}
.login-gate[data-landing-theme] .lg-real-app-preview .topbar-mid{flex:1!important;display:flex!important;justify-content:center!important;min-width:220px!important;}
.login-gate[data-landing-theme] .lg-real-app-preview .topbar-right{display:flex!important;align-items:center!important;gap:8px!important;flex-shrink:0!important;}
.login-gate[data-landing-theme] .lg-real-app-preview .logo-wordmark{font-size:15px!important;font-weight:800!important;color:var(--text)!important;}
.login-gate[data-landing-theme] .lg-real-app-preview .command-search input{
  width:clamp(240px, 34vw, 430px)!important;
  height:34px!important;
  background:var(--s2)!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
  border-radius:10px!important;
}
.login-gate[data-landing-theme] .lg-real-app-preview .sk{background:var(--s3)!important;border-color:var(--bh)!important;color:var(--muted2)!important;}
.login-gate[data-landing-theme] .lg-real-app-preview .nav-pills{
  display:flex!important;
  align-items:center!important;
  gap:2px!important;
  height:32px!important;
  padding:3px!important;
  border:1px solid var(--border)!important;
  border-radius:11px!important;
  background:var(--s2)!important;
  box-shadow:none!important;
}
.login-gate[data-landing-theme] .lg-real-app-preview .nav-pill,
.login-gate[data-landing-theme] .lg-real-app-preview .tb-action-btn{
  height:26px!important;
  min-height:26px!important;
  padding:0 10px!important;
  border-radius:8px!important;
  font-family:'Syne',sans-serif!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.login-gate[data-landing-theme] .lg-real-app-preview .nav-pill:not(.active){background:transparent!important;border:0!important;color:var(--muted2)!important;}
.login-gate[data-landing-theme] .lg-real-app-preview .tb-action-btn.ghost{background:var(--s2)!important;border:1px solid var(--border)!important;color:var(--muted2)!important;}

/* Landing preview page: same product page rhythm, but forced wide + no boxes. */
.login-gate[data-landing-theme] .lg-real-page{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:36px 28px 0!important;
  background:transparent!important;
}
.login-gate[data-landing-theme] .lg-real-page .section{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
}
.login-gate[data-landing-theme] .lg-real-head{
  display:flex!important;
  align-items:flex-end!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin:0 0 20px!important;
}
.login-gate[data-landing-theme] .lg-real-head .sh-title{font-size:24px!important;color:var(--text)!important;}
.login-gate[data-landing-theme] .lg-real-head .sh-count,
.login-gate[data-landing-theme] .lg-real-head .welcome-stack-meta{color:var(--muted2)!important;}
.login-gate[data-landing-theme] .lg-real-categories{
  display:flex!important;
  align-items:center!important;
  min-height:44px!important;
  margin:0 0 22px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.login-gate[data-landing-theme] .lg-real-categories .rl{margin:0 14px 0 0!important;display:block!important;white-space:nowrap!important;}
.login-gate[data-landing-theme] .lg-real-categories .rdiv{display:block!important;width:1px!important;height:14px!important;background:var(--border)!important;margin-right:14px!important;flex-shrink:0!important;}
.login-gate[data-landing-theme] .lg-real-categories .category-tabs-rail{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  flex:1!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  margin:0!important;
  padding:0!important;
}
.login-gate[data-landing-theme] .lg-real-categories .category-tabs-rail::-webkit-scrollbar{display:none!important;}
.login-gate[data-landing-theme] .lg-real-categories .cat-tab{
  flex:0 0 auto!important;
  height:30px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--muted2)!important;
  font-size:10px!important;
  transform:none!important;
  box-shadow:none!important;
}
.login-gate[data-landing-theme] .lg-real-categories .cat-tab.active{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--bg)!important;
}
.login-gate[data-landing-theme] .lg-real-blocks .cat-block{
  padding:8px 0 20px!important;
  margin:0 0 26px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.login-gate[data-landing-theme] .lg-real-blocks .cat-block-label{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 12px!important;
}
.login-gate[data-landing-theme] .lg-real-blocks .cat-block-label::after{content:''!important;display:block!important;flex:1!important;height:1px!important;background:var(--border)!important;opacity:.35!important;}
.login-gate[data-landing-theme] .lg-real-blocks .cat-label-text{font-size:13px!important;font-weight:700!important;color:var(--text)!important;background:transparent!important;border:0!important;padding:3px 6px!important;}
.login-gate[data-landing-theme] .lg-real-blocks .dock-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill, minmax(var(--app-tile-size), var(--app-tile-size)))!important;
  justify-content:start!important;
  align-items:start!important;
  column-gap:14px!important;
  row-gap:16px!important;
  width:100%!important;
  padding:0!important;
}
.login-gate[data-landing-theme] .lg-real-blocks .app-tile{
  width:var(--app-tile-size)!important;
  min-height:94px!important;
  padding:10px 6px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.login-gate[data-landing-theme] .lg-real-blocks .icon-wrap{
  width:var(--app-icon-size)!important;
  height:var(--app-icon-size)!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.login-gate[data-landing-theme] .lg-real-blocks .icon-wrap img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:13px!important;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))!important;
}
.login-gate[data-landing-theme] .lg-real-blocks .t-name{
  width:100%!important;
  margin-top:2px!important;
  color:var(--muted2)!important;
  font-family:'Syne',sans-serif!important;
  font-size:9.2px!important;
  font-weight:650!important;
  line-height:1.15!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:visible!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
}
.login-gate[data-landing-theme] .lg-real-blocks .app-tile::after{display:none!important;}

@media(max-width:900px){
  .login-gate[data-landing-theme] .lg-real-app-preview .topbar.command-topbar,
  .login-gate[data-landing-theme] .lg-real-topbar{
    height:auto!important;
    min-height:0!important;
    padding:12px 16px!important;
    flex-wrap:wrap!important;
  }
  .login-gate[data-landing-theme] .lg-real-app-preview .topbar-left{width:100%!important;justify-content:center!important;}
  .login-gate[data-landing-theme] .lg-real-app-preview .topbar-mid{width:100%!important;flex:1 0 100%!important;order:3!important;}
  .login-gate[data-landing-theme] .lg-real-app-preview .command-search input{width:100%!important;}
  .login-gate[data-landing-theme] .lg-real-app-preview .topbar-right{width:100%!important;justify-content:center!important;flex-wrap:wrap!important;}
  .login-gate[data-landing-theme] .lg-real-page{padding:24px 14px 0!important;}
  .login-gate[data-landing-theme] .lg-real-head{text-align:center!important;justify-content:center!important;}
  .login-gate[data-landing-theme] .lg-real-head .sh-count{display:none!important;}
  .login-gate[data-landing-theme] .lg-real-categories .rl,
  .login-gate[data-landing-theme] .lg-real-categories .rdiv{display:none!important;}
  .login-gate[data-landing-theme] .lg-real-blocks .dock-grid{grid-template-columns:repeat(auto-fill, minmax(72px,72px))!important;column-gap:8px!important;row-gap:14px!important;}
  .login-gate[data-landing-theme] .lg-real-blocks .app-tile{width:72px!important;min-height:84px!important;}
  .login-gate[data-landing-theme] .lg-real-blocks .icon-wrap{width:42px!important;height:42px!important;}
  .login-gate[data-landing-theme] .lg-real-blocks .t-name{font-size:8px!important;}
}


/* StackMap v28b — stronger carousel variables beat older body.app-locked landing locks. */
body.app-locked .login-gate[data-landing-theme="original"]{--bg:#0a0a0c!important;--bg2:#111114!important;--s1:#111114!important;--s2:#18181c!important;--s3:#222228!important;--text:#eeecea!important;--muted:#54545a!important;--muted2:#888892!important;--accent:#c9f135!important;--adim:rgba(201,241,53,.07)!important;--adim2:rgba(201,241,53,.13)!important;--ab:rgba(201,241,53,.22)!important;--theme-glow-a:rgba(201,241,53,.07)!important;--theme-grid:rgba(201,241,53,.018)!important;}
body.app-locked .login-gate[data-landing-theme="obsidian"]{--bg:#030304!important;--bg2:#09090A!important;--s1:#101011!important;--s2:#171719!important;--s3:#202024!important;--text:#F7F3EA!important;--muted:#59534A!important;--muted2:#BDB3A0!important;--accent:#FFD166!important;--adim:rgba(255,209,102,.08)!important;--adim2:rgba(255,209,102,.15)!important;--ab:rgba(255,209,102,.30)!important;--theme-glow-a:rgba(255,209,102,.08)!important;--theme-grid:rgba(255,209,102,.014)!important;}
body.app-locked .login-gate[data-landing-theme="night-ops"]{--bg:#05070A!important;--bg2:#0B1118!important;--s1:#101923!important;--s2:#162435!important;--s3:#1D3146!important;--text:#F5F7FA!important;--muted:#53606F!important;--muted2:#AEB8C5!important;--accent:#6EE7FF!important;--adim:rgba(110,231,255,.08)!important;--adim2:rgba(110,231,255,.16)!important;--ab:rgba(110,231,255,.32)!important;--theme-glow-a:rgba(110,231,255,.09)!important;--theme-grid:rgba(110,231,255,.015)!important;}
body.app-locked .login-gate[data-landing-theme="carbon-gold"]{--bg:#070706!important;--bg2:#0F0E0A!important;--s1:#17150F!important;--s2:#221F15!important;--s3:#2A271A!important;--text:#FFF9E8!important;--muted:#5F584A!important;--muted2:#BEB197!important;--accent:#FFD166!important;--adim:rgba(255,209,102,.08)!important;--adim2:rgba(255,209,102,.15)!important;--ab:rgba(255,209,102,.30)!important;--theme-glow-a:rgba(255,209,102,.09)!important;--theme-grid:rgba(255,209,102,.014)!important;}
body.app-locked .login-gate[data-landing-theme="deep-ocean"]{--bg:#02080B!important;--bg2:#061117!important;--s1:#0B1B24!important;--s2:#102B38!important;--s3:#15384A!important;--text:#EFFCFF!important;--muted:#4B6672!important;--muted2:#9BC7D6!important;--accent:#38E4D9!important;--adim:rgba(56,228,217,.08)!important;--adim2:rgba(56,228,217,.15)!important;--ab:rgba(56,228,217,.31)!important;--theme-glow-a:rgba(56,228,217,.09)!important;--theme-grid:rgba(56,228,217,.014)!important;}
body.app-locked .login-gate[data-landing-theme="aurora"]{--bg:#04080A!important;--bg2:#071317!important;--s1:#0D1D22!important;--s2:#142C31!important;--s3:#19393E!important;--text:#F2FFFD!important;--muted:#526D70!important;--muted2:#A0C8C4!important;--accent:#7CFFB2!important;--adim:rgba(124,255,178,.08)!important;--adim2:rgba(124,255,178,.15)!important;--ab:rgba(124,255,178,.30)!important;--theme-glow-a:rgba(124,255,178,.085)!important;--theme-grid:rgba(124,255,178,.014)!important;}
body.app-locked .login-gate[data-landing-theme="neon-orchid"]{--bg:#08040D!important;--bg2:#11091B!important;--s1:#1D102A!important;--s2:#2D1742!important;--s3:#3A1D55!important;--text:#FFF7FF!important;--muted:#715982!important;--muted2:#CDA6E0!important;--accent:#D66BFF!important;--adim:rgba(214,107,255,.08)!important;--adim2:rgba(214,107,255,.15)!important;--ab:rgba(214,107,255,.31)!important;--theme-glow-a:rgba(214,107,255,.09)!important;--theme-grid:rgba(214,107,255,.014)!important;}
body.app-locked .login-gate[data-landing-theme="cyber-lime"]{--bg:#050805!important;--bg2:#0D1208!important;--s1:#141C0D!important;--s2:#202B14!important;--s3:#28361A!important;--text:#F9FFF1!important;--muted:#59664D!important;--muted2:#AAB994!important;--accent:#C9F135!important;--adim:rgba(201,241,53,.08)!important;--adim2:rgba(201,241,53,.15)!important;--ab:rgba(201,241,53,.30)!important;--theme-glow-a:rgba(201,241,53,.09)!important;--theme-grid:rgba(201,241,53,.014)!important;}
body.app-locked .login-gate[data-landing-theme="blood-moon"]{--bg:#0B0405!important;--bg2:#17080A!important;--s1:#241014!important;--s2:#351820!important;--s3:#431F29!important;--text:#FFF5F6!important;--muted:#765158!important;--muted2:#C996A0!important;--accent:#FF596E!important;--adim:rgba(255,89,110,.08)!important;--adim2:rgba(255,89,110,.15)!important;--ab:rgba(255,89,110,.31)!important;--theme-glow-a:rgba(255,89,110,.09)!important;--theme-grid:rgba(255,89,110,.014)!important;}
body.app-locked .login-gate[data-landing-theme="copper-forge"]{--bg:#0A0603!important;--bg2:#160C05!important;--s1:#221407!important;--s2:#32200F!important;--s3:#3D2812!important;--text:#FFF7EE!important;--muted:#755D47!important;--muted2:#C9A680!important;--accent:#FF9F4A!important;--adim:rgba(255,159,74,.08)!important;--adim2:rgba(255,159,74,.15)!important;--ab:rgba(255,159,74,.31)!important;--theme-glow-a:rgba(255,159,74,.09)!important;--theme-grid:rgba(255,159,74,.014)!important;}
body.app-locked .login-gate[data-landing-theme="forest-terminal"]{--bg:#030805!important;--bg2:#07120A!important;--s1:#0D1C11!important;--s2:#152A1B!important;--s3:#1D3524!important;--text:#F1FFF5!important;--muted:#4E694F!important;--muted2:#9FC59F!important;--accent:#78F29C!important;--adim:rgba(120,242,156,.08)!important;--adim2:rgba(120,242,156,.15)!important;--ab:rgba(120,242,156,.30)!important;--theme-glow-a:rgba(120,242,156,.085)!important;--theme-grid:rgba(120,242,156,.014)!important;}
body.app-locked .login-gate[data-landing-theme="royal-ink"]{--bg:#050511!important;--bg2:#0B0A21!important;--s1:#15113A!important;--s2:#211A58!important;--s3:#2B2370!important;--text:#F8F6FF!important;--muted:#605B8A!important;--muted2:#B9B1E8!important;--accent:#8A7DFF!important;--adim:rgba(138,125,255,.08)!important;--adim2:rgba(138,125,255,.15)!important;--ab:rgba(138,125,255,.32)!important;--theme-glow-a:rgba(138,125,255,.09)!important;--theme-grid:rgba(138,125,255,.014)!important;}
body.app-locked .login-gate[data-landing-theme="frost-glass"]{--bg:#F5FAFF!important;--bg2:#EAF3FA!important;--s1:#FFFFFF!important;--s2:#DDEAF3!important;--s3:#C9DAE7!important;--text:#102233!important;--muted:#6A7A88!important;--muted2:#41566A!important;--accent:#2187FF!important;--adim:rgba(33,135,255,.08)!important;--adim2:rgba(33,135,255,.15)!important;--ab:rgba(33,135,255,.24)!important;--theme-glow-a:rgba(33,135,255,.10)!important;--theme-grid:rgba(33,135,255,.035)!important;}
body.app-locked .login-gate[data-landing-theme="desert-signal"]{--bg:#0B0905!important;--bg2:#171207!important;--s1:#21190D!important;--s2:#312516!important;--s3:#3E2F1C!important;--text:#FFF8EA!important;--muted:#71634E!important;--muted2:#BFAA86!important;--accent:#E7B95B!important;--adim:rgba(231,185,91,.08)!important;--adim2:rgba(231,185,91,.15)!important;--ab:rgba(231,185,91,.30)!important;--theme-glow-a:rgba(231,185,91,.085)!important;--theme-grid:rgba(231,185,91,.014)!important;}
body.app-locked .login-gate[data-landing-theme="solar-flare"]{--bg:#0D0702!important;--bg2:#1A0D03!important;--s1:#251205!important;--s2:#3A1E0A!important;--s3:#49260D!important;--text:#FFF4DD!important;--muted:#7D5A36!important;--muted2:#D1A263!important;--accent:#FFB000!important;--adim:rgba(255,176,0,.08)!important;--adim2:rgba(255,176,0,.15)!important;--ab:rgba(255,176,0,.32)!important;--theme-glow-a:rgba(255,176,0,.09)!important;--theme-grid:rgba(255,176,0,.014)!important;}
body.app-locked .login-gate[data-landing-theme="rose-noir"]{--bg:#0B0508!important;--bg2:#170A11!important;--s1:#25101A!important;--s2:#351927!important;--s3:#421F31!important;--text:#FFF5FA!important;--muted:#765367!important;--muted2:#CDA0BA!important;--accent:#FF7AB6!important;--adim:rgba(255,122,182,.08)!important;--adim2:rgba(255,122,182,.15)!important;--ab:rgba(255,122,182,.31)!important;--theme-glow-a:rgba(255,122,182,.09)!important;--theme-grid:rgba(255,122,182,.014)!important;}
body.app-locked .login-gate[data-landing-theme="emerald-circuit"]{--bg:#030907!important;--bg2:#071510!important;--s1:#0E2119!important;--s2:#143126!important;--s3:#1A3E30!important;--text:#F0FFF9!important;--muted:#4A6F5E!important;--muted2:#97CBB5!important;--accent:#35F0A1!important;--adim:rgba(53,240,161,.08)!important;--adim2:rgba(53,240,161,.15)!important;--ab:rgba(53,240,161,.30)!important;--theme-glow-a:rgba(53,240,161,.085)!important;--theme-grid:rgba(53,240,161,.014)!important;}
body.app-locked .login-gate[data-landing-theme="mono-lab"]{--bg:#040404!important;--bg2:#0A0A0A!important;--s1:#121212!important;--s2:#202020!important;--s3:#2B2B2B!important;--text:#FFFFFF!important;--muted:#666666!important;--muted2:#B8B8B8!important;--accent:#FFFFFF!important;--adim:rgba(255,255,255,.07)!important;--adim2:rgba(255,255,255,.12)!important;--ab:rgba(255,255,255,.24)!important;--theme-glow-a:rgba(255,255,255,.05)!important;--theme-grid:rgba(255,255,255,.016)!important;}
body.app-locked .login-gate[data-landing-theme="blue-steel"]{--bg:#05080C!important;--bg2:#0B1119!important;--s1:#111B29!important;--s2:#1A2A3E!important;--s3:#22364F!important;--text:#F3F8FF!important;--muted:#55677A!important;--muted2:#A7B8CC!important;--accent:#75A7FF!important;--adim:rgba(117,167,255,.08)!important;--adim2:rgba(117,167,255,.15)!important;--ab:rgba(117,167,255,.30)!important;--theme-glow-a:rgba(117,167,255,.085)!important;--theme-grid:rgba(117,167,255,.014)!important;}
body.app-locked .login-gate[data-landing-theme="purple-rain"]{--bg:#060411!important;--bg2:#0E0A22!important;--s1:#17123A!important;--s2:#241B53!important;--s3:#2F246A!important;--text:#FAF6FF!important;--muted:#665883!important;--muted2:#BEA8E4!important;--accent:#B982FF!important;--adim:rgba(185,130,255,.08)!important;--adim2:rgba(185,130,255,.15)!important;--ab:rgba(185,130,255,.31)!important;--theme-glow-a:rgba(185,130,255,.09)!important;--theme-grid:rgba(185,130,255,.014)!important;}
body.app-locked .login-gate[data-landing-theme="mint-byte"]{--bg:#030A09!important;--bg2:#071512!important;--s1:#0D211E!important;--s2:#14322C!important;--s3:#1B4038!important;--text:#EFFFFB!important;--muted:#4E716A!important;--muted2:#9FD0C5!important;--accent:#8CFFD8!important;--adim:rgba(140,255,216,.08)!important;--adim2:rgba(140,255,216,.15)!important;--ab:rgba(140,255,216,.30)!important;--theme-glow-a:rgba(140,255,216,.085)!important;--theme-grid:rgba(140,255,216,.014)!important;}
body.app-locked .login-gate[data-landing-theme="amber-vault"]{--bg:#090704!important;--bg2:#141007!important;--s1:#1F170B!important;--s2:#2D220E!important;--s3:#382A11!important;--text:#FFF8E8!important;--muted:#75654B!important;--muted2:#C7B17C!important;--accent:#F4C45F!important;--adim:rgba(244,196,95,.08)!important;--adim2:rgba(244,196,95,.15)!important;--ab:rgba(244,196,95,.30)!important;--theme-glow-a:rgba(244,196,95,.085)!important;--theme-grid:rgba(244,196,95,.014)!important;}
body.app-locked .login-gate[data-landing-theme="crimson-grid"]{--bg:#0B0306!important;--bg2:#170710!important;--s1:#240D19!important;--s2:#351327!important;--s3:#441832!important;--text:#FFF4F8!important;--muted:#76505F!important;--muted2:#C996AA!important;--accent:#FF477E!important;--adim:rgba(255,71,126,.08)!important;--adim2:rgba(255,71,126,.15)!important;--ab:rgba(255,71,126,.31)!important;--theme-glow-a:rgba(255,71,126,.09)!important;--theme-grid:rgba(255,71,126,.014)!important;}
body.app-locked .login-gate[data-landing-theme="arctic-night"]{--bg:#020609!important;--bg2:#061016!important;--s1:#0B1A22!important;--s2:#112A36!important;--s3:#173746!important;--text:#F2FCFF!important;--muted:#506A76!important;--muted2:#9DC1D0!important;--accent:#A8F1FF!important;--adim:rgba(168,241,255,.08)!important;--adim2:rgba(168,241,255,.15)!important;--ab:rgba(168,241,255,.30)!important;--theme-glow-a:rgba(168,241,255,.085)!important;--theme-grid:rgba(168,241,255,.014)!important;}
body.app-locked .login-gate[data-landing-theme="candy-pulse"]{--bg:#0A0410!important;--bg2:#140820!important;--s1:#211034!important;--s2:#321A4D!important;--s3:#3F2160!important;--text:#FFF5FF!important;--muted:#725487!important;--muted2:#CFA5E6!important;--accent:#FF6FEA!important;--adim:rgba(255,111,234,.08)!important;--adim2:rgba(255,111,234,.15)!important;--ab:rgba(255,111,234,.31)!important;--theme-glow-a:rgba(255,111,234,.09)!important;--theme-grid:rgba(255,111,234,.014)!important;}
body.app-locked .login-gate[data-landing-theme="moss-code"]{--bg:#060804!important;--bg2:#0E1207!important;--s1:#171D0E!important;--s2:#232B15!important;--s3:#2D361B!important;--text:#FAFFF1!important;--muted:#616B50!important;--muted2:#ADB996!important;--accent:#B6D96A!important;--adim:rgba(182,217,106,.08)!important;--adim2:rgba(182,217,106,.15)!important;--ab:rgba(182,217,106,.30)!important;--theme-glow-a:rgba(182,217,106,.085)!important;--theme-grid:rgba(182,217,106,.014)!important;}


/* ══════════════════════════════════════════════════════════
   StackMap v28 — landing preview gap + live theme repair.
   - No giant empty area under the last preview app row
   - Landing theme changes affect the actual preview colours
   - Preview remains wide / no boxes / product-style
══════════════════════════════════════════════════════════ */

/* Close up the product preview vertically. */
.login-gate .lg-preview-wrap.lg-real-preview-wrap{
  padding:0 0 28px!important;
  margin:0!important;
  min-height:0!important;
}
.login-gate .lg-real-app-preview{
  min-height:0!important;
  height:auto!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}
.login-gate .lg-real-page{
  padding-bottom:0!important;
  margin-bottom:0!important;
}
.login-gate .lg-real-page .section,
.login-gate #lg-real-sec-launcher{
  padding-bottom:0!important;
  margin-bottom:0!important;
  min-height:0!important;
}
.login-gate .lg-real-blocks{
  margin-bottom:0!important;
  padding-bottom:0!important;
}
.login-gate .lg-real-blocks .cat-block{
  margin-bottom:18px!important;
  padding-bottom:0!important;
}
.login-gate .lg-real-blocks .cat-block:last-child{
  margin-bottom:0!important;
  padding-bottom:0!important;
}
.login-gate .lg-real-blocks .dock-grid{
  margin-bottom:0!important;
  padding-bottom:0!important;
}
.login-gate .lg-preview-fade,
.login-gate .lg-p-glowbar,
.login-gate .lg-preview-outer,
.login-gate .lg-preview-bar{
  display:none!important;
}

/* Make theme changes impossible to miss in the landing preview. */
.login-gate[data-landing-theme] .lg-real-app-preview{
  background:
    radial-gradient(circle at 12% 0%, var(--theme-glow-a, var(--adim)) 0%, transparent 32%),
    radial-gradient(circle at 88% 10%, var(--adim) 0%, transparent 30%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg2, var(--bg)) 100%)!important;
  color:var(--text)!important;
  transition:background .65s var(--ease), color .65s var(--ease)!important;
}
.login-gate[data-landing-theme] .lg-real-app-preview .topbar.command-topbar,
.login-gate[data-landing-theme] .lg-real-topbar{
  background:color-mix(in srgb, var(--bg) 84%, #000 16%)!important;
  border-bottom-color:var(--border)!important;
  color:var(--text)!important;
  transition:background .65s var(--ease), border-color .65s var(--ease), color .65s var(--ease)!important;
}
.login-gate[data-landing-theme] .lg-real-page,
.login-gate[data-landing-theme] .lg-real-page .section,
.login-gate[data-landing-theme] .lg-real-categories,
.login-gate[data-landing-theme] .lg-real-blocks .cat-block{
  background:transparent!important;
  color:var(--text)!important;
}
.login-gate[data-landing-theme] .lg-real-app-preview .command-search input,
.login-gate[data-landing-theme] .lg-real-app-preview .nav-pills,
.login-gate[data-landing-theme] .lg-real-app-preview .tb-action-btn.ghost{
  background:var(--s2)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  transition:background .65s var(--ease), border-color .65s var(--ease), color .65s var(--ease)!important;
}
.login-gate[data-landing-theme] .lg-real-app-preview .nav-pill.active,
.login-gate[data-landing-theme] .lg-real-app-preview .tb-action-btn.primary,
.login-gate[data-landing-theme] .lg-real-categories .cat-tab.active{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--bg)!important;
}
.login-gate[data-landing-theme] .lg-real-app-preview .logo-wordmark span,
.login-gate[data-landing-theme] .lg-real-app-preview .sh-label,
.login-gate[data-landing-theme] .lg-real-app-preview .rl,
.login-gate[data-landing-theme] .lg-real-app-preview .cat-label-dot,
.login-gate[data-landing-theme] .lg-real-app-preview .welcome-dot{
  color:var(--accent)!important;
}
.login-gate[data-landing-theme] .lg-real-blocks .cat-label-dot{
  background:var(--accent)!important;
  box-shadow:0 0 10px var(--accent)!important;
}
.login-gate[data-landing-theme] .lg-real-blocks .icon-wrap img{
  filter:drop-shadow(0 8px 14px color-mix(in srgb, var(--accent) 22%, transparent))!important;
}

@media(max-width:760px){
  .login-gate .lg-preview-wrap.lg-real-preview-wrap{padding-bottom:24px!important;}
  .login-gate .lg-real-blocks .cat-block{margin-bottom:16px!important;}
}


/* ══════════════════════════════════════════════════════════
   StackMap v29 — centre the landing app preview only.
   Keeps v28 styling/animation intact; only recentres the
   live product preview block on the landing page.
══════════════════════════════════════════════════════════ */
.login-gate .lg-preview-wrap.lg-real-preview-wrap{
  width:100%!important;
  max-width:1280px!important;
  margin:0 auto!important;
  padding-left:24px!important;
  padding-right:24px!important;
  padding-bottom:28px!important;
}

.login-gate .lg-real-app-preview{
  width:100%!important;
  max-width:1232px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.login-gate[data-landing-theme] .lg-real-page{
  width:100%!important;
  max-width:1232px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.login-gate[data-landing-theme] .lg-real-app-preview .topbar.command-topbar,
.login-gate[data-landing-theme] .lg-real-topbar{
  border-radius:0!important;
}

@media(max-width:700px){
  .login-gate .lg-preview-wrap.lg-real-preview-wrap{
    max-width:none!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .login-gate .lg-real-app-preview,
  .login-gate[data-landing-theme] .lg-real-page{
    max-width:none!important;
  }
}


/* ══════════════════════════════════════════════════════════
   v36 INSTANT CACHED GATE
   When Supabase has a cached token, skip the visible landing gate
   during the normal auth check. This does not remove app-locked;
   it only overrides the first paint so the app shell appears instantly.
══════════════════════════════════════════════════════════ */
html.stackmap-session-likely body.app-locked .login-gate{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
html.stackmap-session-likely body.app-locked header,
html.stackmap-session-likely body.app-locked header.topbar,
html.stackmap-session-likely body.app-locked main,
html.stackmap-session-likely body.app-locked main.page,
html.stackmap-session-likely body.app-locked .page{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
html.stackmap-session-likely body.app-locked main,
html.stackmap-session-likely body.app-locked main.page,
html.stackmap-session-likely body.app-locked .page{
  display:block!important;
  min-height:100vh;
}
html.stackmap-session-likely body.app-locked .moverlay,
html.stackmap-session-likely body.app-locked .cmdov,
html.stackmap-session-likely body.app-locked .tile-ctx,
html.stackmap-session-likely body.app-locked .toast{
  display:none!important;
}

/* ── LEGAL LINKS FIX v37 ─────────────────────────────────
   Makes legal links visible for logged-out users even if the page footer is below the fold.
*/
.lg-nav-legal-mini{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:2px;
}
.lg-nav-legal-mini a{
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted2);
  text-decoration:none;
  transition:color .2s;
}
.lg-nav-legal-mini a:hover{
  color:var(--accent);
}
.lg-legal-note{
  margin:14px auto 0!important;
  max-width:390px;
  font-family:'DM Mono',monospace;
  font-size:9px;
  line-height:1.8;
  color:var(--muted2);
  text-align:center;
}
.lg-legal-note a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(56,189,248,0.35);
}
.lg-legal-note a:hover{
  color:var(--text);
  border-bottom-color:var(--text);
}
.lg-footer-legal{
  display:flex!important;
  margin-top:12px;
  opacity:0.9;
}
.lg-footer-legal .lg-f-link{
  font-size:8px;
}
.lg-legal-fixed{
  position:fixed!important;
  left:50%!important;
  bottom:12px!important;
  transform:translateX(-50%)!important;
  z-index:12000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:13px!important;
  padding:8px 13px!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  border-radius:999px!important;
  background:rgba(10,10,12,0.72)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 18px 60px rgba(0,0,0,0.35)!important;
}
.lg-legal-fixed a{
  font-family:'DM Mono',monospace!important;
  font-size:8px!important;
  letter-spacing:1.4px!important;
  text-transform:uppercase!important;
  color:rgba(238,236,234,0.72)!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.lg-legal-fixed a:hover{
  color:var(--accent)!important;
}
@media(max-width:700px){
  .lg-nav-legal-mini{display:none!important;}
  .lg-legal-fixed{
    bottom:8px!important;
    max-width:calc(100vw - 18px)!important;
    gap:8px!important;
    padding:7px 10px!important;
  }
  .lg-legal-fixed a{
    font-size:7px!important;
    letter-spacing:1px!important;
  }
}