/* ================= AutForge — Style ================= */
:root{
  --bg-0: #06060f;
  --bg-1: #0d0d22;
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --text: #f3f4f6;
  --muted: #9ca3af;
  --accent-1: #7C3AED;
  --accent-2: #EC4899;
  --accent-3: #F59E0B;
  --ok: #10B981;
  --danger: #EF4444;
  --radius: 18px;
  --shadow: 0 30px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:'Sora',system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1000px 700px at 100% 10%, rgba(236,72,153,.22), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(245,158,11,.16), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  letter-spacing:.01em;
}

.bg-orbs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.orb{position:absolute; border-radius:50%; filter:blur(100px); opacity:.55; animation:float 18s ease-in-out infinite}
.orb1{width:520px; height:520px; background:#7C3AED; top:-10%; left:-10%}
.orb2{width:480px; height:480px; background:#EC4899; top:30%; right:-12%; animation-delay:-6s}
.orb3{width:560px; height:560px; background:#F59E0B; bottom:-20%; left:30%; animation-delay:-12s; opacity:.35}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.05)}
}

.topbar{
  position:relative; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px 12px;
  gap:12px;
  backdrop-filter: blur(18px);
  border-bottom:1px solid var(--glass-border);
  background: rgba(10,10,25,0.45);
}
.brand{display:flex; align-items:center; gap:14px}
.logo{filter:drop-shadow(0 4px 14px rgba(124,58,237,.5))}
.brand h1, .brand .brand-name{
  font-size:26px; font-weight:800; letter-spacing:-.5px; margin:0;
  background: linear-gradient(135deg, #fff 30%, #c4b5fd 60%, #f9a8d4);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* Skip link — invisible until focused */
.skip-link{
  position: fixed; top: -60px; left: 12px; z-index: 100000;
  background: var(--accent); color: #fff; padding: 10px 18px;
  border-radius: 8px; font-weight: 700; font-size: 13px;
  text-decoration: none; transition: top .18s ease;
}
.skip-link:focus{ top: 12px; outline: 2px solid #fff }
.signin-title{
  font-size:30px; font-weight:800; margin-bottom:8px;
  background: linear-gradient(135deg, #fff, #c4b5fd 60%, #f9a8d4);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tag{font-size:12px; color:var(--muted); margin-top:2px}

/* === Grouped Navigation === */
.nav-groups{display:flex; gap:6px; flex-wrap:nowrap; align-items:center}
.nav-group{position:relative}
.nav-group-btn{
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); padding:10px 16px; border-radius:999px;
  cursor:pointer; font-family:inherit; font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  transition: all .2s;
}
.nav-group-btn:hover{border-color:var(--accent-2)}
.nv-caret{font-size:9px; opacity:.6}
.nav-group:hover .nav-group-menu, .nav-group.open .nav-group-menu{display:block}
.nav-group-menu{
  display:none; position:absolute; top:calc(100% + 8px); left:0;
  background:rgba(15,15,30,.97); backdrop-filter:blur(20px);
  border:1px solid var(--glass-border); border-radius:14px;
  padding:8px; min-width:280px; z-index:1000;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  animation: fadeUp .2s ease;
}
.nav-item{
  display:flex; align-items:flex-start; gap:8px; flex-direction:column;
  width:100%; padding:10px 12px; border-radius:8px;
  background:none; border:none; cursor:pointer; color:var(--text);
  font-family:inherit; font-size:13px; text-align:left;
  transition:.15s;
}
.nav-item:hover{background:rgba(124,58,237,.18)}
.nav-item.highlight{
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(236,72,153,.12));
  border:1px solid rgba(245,158,11,.3);
}
.nav-item .ni-desc{font-size:11px; color:var(--muted); margin-top:2px; font-weight:400}

/* === Scrollable Tabs (legacy fallback for old .tabs) === */
.tabs-wrap{
  display:flex; align-items:center; gap:6px;
  flex:1; min-width:0; position:relative;
}
.tab-arrow{
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); width:32px; height:32px; border-radius:50%;
  cursor:pointer; font-size:20px; line-height:1;
  display:none; align-items:center; justify-content:center;
  flex-shrink:0; transition: all .2s;
}
.tab-arrow.show{display:flex}
.tab-arrow:hover{background: var(--accent-1); color:#fff; border-color:transparent}
.cmd-k-btn{
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); padding:8px 14px; border-radius:999px;
  cursor:pointer; font-family:inherit; font-size:13px;
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  transition: all .2s;
}
.cmd-k-btn:hover{border-color:var(--accent-2)}
.cmd-k-btn kbd{
  background:rgba(0,0,0,.4); padding:2px 6px; border-radius:4px;
  font-size:10px; font-family:'JetBrains Mono', monospace;
  border:1px solid var(--glass-border);
}

.tabs{display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; padding:4px 2px; mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); flex:1; min-width:0; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  background:var(--glass); border:1px solid var(--glass-border);
  padding:10px 18px; border-radius:999px; color:var(--text);
  cursor:pointer; font-family:inherit; font-weight:600; font-size:13px;
  transition: all .25s ease;
}
.tab{flex-shrink:0}
.tab.mode-featured:not(.active){
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(236,72,153,.12));
  border-color: rgba(245,158,11,.5);
  box-shadow: 0 4px 10px rgba(245,158,11,.15);
}
.tab.mode-featured::before{content:'★ '; color:var(--accent-3); font-size:10px}

.tab.highlight-tab{
  background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(236,72,153,.18));
  border-color: rgba(245,158,11,.6);
  box-shadow: 0 4px 14px rgba(245,158,11,.25);
  position:relative;
}
.tab.highlight-tab::after{
  content:'⭐'; position:absolute; top:-4px; right:-4px; font-size:10px;
}
.tab:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.25)}
.tab.active{
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-color:transparent;
  box-shadow: 0 6px 20px rgba(124,58,237,.4);
}

.container{position:relative; z-index:2; max-width:1280px; margin:0 auto; padding:16px 24px 60px}
.panel{display:none; animation: fadeUp .5s ease}
.panel.active{display:block}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.panel-head{margin-bottom:24px}
.panel-head h2{font-size:34px; font-weight:800; letter-spacing:-.5px}
.panel-head p{color:var(--muted); margin-top:6px}

.grid{display:grid; gap:22px}
.grid.two{grid-template-columns: 1fr 1fr}
@media(max-width:900px){.grid.two{grid-template-columns:1fr}}

.card{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius); padding:24px;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  transition: border-color .3s;
}
.card:hover{border-color: rgba(255,255,255,.2)}

label{display:block; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin:14px 0 6px}
label:first-child{margin-top:0}

textarea, input[type=text], input[type=number], select{
  width:100%; background: rgba(0,0,0,.35); border:1px solid var(--glass-border);
  border-radius:12px; color:var(--text); font-family:inherit; font-size:14px;
  padding:12px 14px; outline:none; transition: border-color .2s, box-shadow .2s;
  resize:vertical;
}
textarea:focus, input:focus, select:focus{
  border-color: var(--accent-1);
  box-shadow: 0 0 0 4px rgba(124,58,237,.18);
}

.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:flex-end}
.field{flex:1; min-width:140px}

.btn{
  font-family:inherit; font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; transition: transform .15s, box-shadow .2s, background .2s;
  display:inline-flex; align-items:center; gap:8px;
}
.btn.primary{
  color:#fff;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 10px 28px rgba(236,72,153,.35);
}
.btn.primary:hover{transform:translateY(-2px); box-shadow: 0 14px 36px rgba(236,72,153,.5)}
.btn.ghost{
  background:var(--glass); color:var(--text); border:1px solid var(--glass-border);
}
.btn.ghost:hover{background: rgba(255,255,255,.08); transform:translateY(-1px)}
.btn:disabled{opacity:.5; cursor:not-allowed}

.hint{margin-top:10px; font-size:12px; color:var(--muted)}

.preview{display:flex; flex-direction:column; gap:14px}
.image-frame{
  position:relative; aspect-ratio:1/1; width:100%;
  border-radius:14px; overflow:hidden;
  background: rgba(0,0,0,.4); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
}
.image-frame img{width:100%; height:100%; object-fit:cover; animation:reveal .5s ease}
@keyframes reveal{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none}}
.empty{color:var(--muted); text-align:center}
.empty p{margin-top:14px; font-size:13px}
.spinner-static{
  width:46px; height:46px; border-radius:50%;
  background: conic-gradient(from 0deg, #7C3AED, #EC4899, #F59E0B, #7C3AED);
  margin:0 auto; opacity:.6;
  animation: spin 4s linear infinite;
  mask: radial-gradient(circle, transparent 50%, black 53%);
  -webkit-mask: radial-gradient(circle, transparent 50%, black 53%);
}
@keyframes spin{to{transform:rotate(360deg)}}

.actions{display:flex; gap:10px; flex-wrap:wrap}
.actions.hidden{display:none}

.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:24px}
.gallery img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; cursor:pointer; border:1px solid var(--glass-border); transition: transform .2s}
.gallery img:hover{transform:scale(1.04); border-color:var(--accent-2)}

.dropzone{position:relative; min-height:380px; display:flex; align-items:center; justify-content:center; border:2px dashed rgba(255,255,255,.18); cursor:pointer}
.dropzone.drag{background: rgba(124,58,237,.08); border-color:var(--accent-1)}
.drop-inner{text-align:center; padding:30px}
.drop-icon{font-size:54px; margin-bottom:10px}
.drop-inner h3{margin-bottom:6px}
.drop-inner p{color:var(--muted); font-size:13px; margin-bottom:18px}
#preview{display:none; max-width:100%; max-height:360px; border-radius:12px; object-fit:contain}
.dropzone.has-image .drop-inner{display:none}
.dropzone.has-image #preview{display:block}

.progress{margin-top:16px; height:6px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; display:none}
.progress.show{display:block}
.progress .bar{width:0%; height:100%; background:linear-gradient(90deg, var(--accent-1), var(--accent-2)); transition: width .3s}

hr{border:none; border-top:1px solid var(--glass-border); margin:20px 0}
#pages{display:flex; flex-direction:column; gap:12px; max-height:300px; overflow-y:auto; padding-right:6px}
.page-item{
  background:rgba(0,0,0,.3); border:1px solid var(--glass-border);
  border-radius:12px; padding:12px;
}
.page-item .ph{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.page-item .ph .ptype{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent-2); font-weight:700}
.page-item input, .page-item textarea{font-size:13px; padding:8px 10px}
.page-item .del{background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:18px}
.page-item .del:hover{color:var(--danger)}

.book-preview{min-height:480px; display:flex; align-items:center; justify-content:center; padding:0; overflow:hidden}
.book-empty{color:var(--muted); text-align:center; font-size:14px; line-height:2}
.book-page{width:100%; height:100%; min-height:480px; padding:36px; overflow-y:auto}
.book-page h1{font-size:28px; margin-bottom:8px}
.book-page h2{font-size:20px; margin:18px 0 8px}
.book-page p{font-size:14px; line-height:1.7}
.book-page img{max-width:100%; border-radius:8px; margin:12px 0}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:rgba(20,20,40,.95); color:#fff; padding:14px 22px; border-radius:12px;
  border:1px solid var(--glass-border); box-shadow:var(--shadow);
  font-size:14px; opacity:0; transition:.3s; z-index:1000; pointer-events:none;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

.loading-overlay{
  position:fixed; inset:0; background:rgba(6,6,15,.7); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  z-index:999;
}
.loading-overlay.show{display:flex}
.spinner{
  width:64px; height:64px; border-radius:50%;
  background:conic-gradient(from 0deg, #7C3AED, #EC4899, #F59E0B, #7C3AED);
  animation: spin 1.2s linear infinite;
  mask: radial-gradient(circle, transparent 56%, black 60%);
  -webkit-mask: radial-gradient(circle, transparent 56%, black 60%);
}
#loadMsg{color:#fff; font-weight:600}

/* === AutoBook === */
.autobook-card{
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(236,72,153,.08));
  border: 1px solid rgba(236,72,153,.3);
  position: relative; overflow:hidden;
}
.autobook-card::before{
  content:''; position:absolute; top:-60px; right:-60px;
  width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(245,158,11,.25), transparent 70%);
  pointer-events:none;
}
.autobook-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px}
.autobook-head h3{font-size:20px; font-weight:800; letter-spacing:-.3px}
.badge{
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color:#fff; font-size:11px; font-weight:800; letter-spacing:.15em;
  padding:5px 12px; border-radius:999px;
  box-shadow: 0 4px 12px rgba(236,72,153,.4);
}
.toggles{gap:18px}
.toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13px; color:var(--text); margin:0;
  text-transform:none; letter-spacing:0; font-weight:500;
}
.toggle input{width:18px; height:18px; accent-color:var(--accent-2)}
.toggle span{color:var(--text)}
.btn.big{padding:14px 28px; font-size:15px}

.ab-progress{margin-top:18px; display:none}
.ab-progress.show{display:block}
.ab-prog-bar{height:8px; background:rgba(255,255,255,.08); border-radius:6px; overflow:hidden}
.ab-prog-bar > div{height:100%; width:0%; background:linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3)); transition: width .4s ease; box-shadow: 0 0 20px rgba(236,72,153,.4)}
.ab-prog-text{margin-top:10px; font-size:13px; color:var(--text); font-weight:600}
.ab-prog-log{
  margin-top:8px; max-height:140px; overflow-y:auto;
  font-family:'JetBrains Mono', monospace; font-size:11px;
  color:var(--muted); background:rgba(0,0,0,.3); border:1px solid var(--glass-border);
  border-radius:8px; padding:10px; line-height:1.6;
}
.ab-prog-log div.ok{color:#10B981}
.ab-prog-log div.warn{color:#F59E0B}

.divider-text{
  display:flex; align-items:center; gap:14px;
  margin:32px 0 24px; color:var(--muted); font-size:12px;
  text-transform:uppercase; letter-spacing:.2em; font-weight:600;
}
.divider-text::before, .divider-text::after{
  content:''; flex:1; height:1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

/* === Chat === */
.chat-card{display:flex; flex-direction:column; gap:14px; min-height:600px}
.chat-window{
  flex:1; min-height:420px; max-height:520px; overflow-y:auto;
  display:flex; flex-direction:column; gap:14px;
  padding:18px; border-radius:14px;
  background: rgba(0,0,0,.32); border:1px solid var(--glass-border);
}
.msg{display:flex; gap:12px; align-items:flex-start; animation: fadeUp .35s ease}
.msg.user{flex-direction:row-reverse}
.msg .avatar{
  width:36px; height:36px; flex-shrink:0;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:18px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 4px 12px rgba(124,58,237,.4);
}
.msg.user .avatar{background: linear-gradient(135deg, #10B981, #0EA5E9)}
.msg .bubble{
  max-width:78%; padding:12px 16px; border-radius:14px;
  background: rgba(255,255,255,.06); border:1px solid var(--glass-border);
  font-size:14px; line-height:1.6; color:var(--text);
  white-space: pre-wrap; word-wrap: break-word;
}
.msg.user .bubble{
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(14,165,233,.18));
  border-color: rgba(16,185,129,.3);
}
.msg.bot .bubble{border-color: rgba(124,58,237,.25)}
.msg .bubble code{background:rgba(0,0,0,.4); padding:2px 6px; border-radius:4px; font-family:'JetBrains Mono', monospace; font-size:12px}
.msg .bubble pre{background:rgba(0,0,0,.45); padding:12px; border-radius:8px; overflow-x:auto; font-family:'JetBrains Mono', monospace; font-size:12px; margin:8px 0}
.typing .bubble{display:flex; gap:4px; align-items:center; padding:14px 18px}
.typing .bubble span{width:8px; height:8px; background:var(--accent-2); border-radius:50%; opacity:.5; animation: bounce 1.2s ease-in-out infinite}
.typing .bubble span:nth-child(2){animation-delay:.15s}
.typing .bubble span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:translateY(0); opacity:.4} 40%{transform:translateY(-8px); opacity:1}}

.chat-input-row{display:flex; flex-direction:column; gap:10px}
.chat-suggestions{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); padding:7px 14px; border-radius:999px;
  font-family:inherit; font-size:12px; cursor:pointer; transition: all .2s;
}
.chip:hover{background:rgba(124,58,237,.18); border-color:var(--accent-1); transform:translateY(-1px)}

.chat-compose{display:flex; gap:10px; align-items:flex-end}
.chat-compose textarea{flex:1; resize:none; max-height:140px}
.chat-actions{display:flex; gap:10px; justify-content:flex-end}

.footer{position:relative; z-index:2; text-align:center; padding:30px; color:var(--muted); font-size:12px; border-top:1px solid var(--glass-border)}

/* Feedback: type-breakdown bars */
.fb-type-bars{display:flex; flex-direction:column; gap:8px; margin-top:8px}

/* === Cloud Tab === */
.cloud-conn{margin-bottom:14px}
.cloud-status{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; background:rgba(0,0,0,.3);
  border-radius:999px; font-size:13px; font-weight:600;
}
.cs-dot{width:10px; height:10px; border-radius:50%}
.cs-dot.online{background:#10B981; box-shadow: 0 0 12px rgba(16,185,129,.6); animation: glowOnline 2s ease-in-out infinite}
.cs-dot.offline{background:#6B7280}
.cs-dot.error{background:#EF4444}

.cloud-authed.hidden{display:none}
.cloud-authed{display:flex; flex-direction:column; gap:14px; margin-top:14px}
.cloud-user{display:flex; align-items:center; gap:14px}
.cu-avatar{
  width:54px; height:54px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff; font-weight:800;
}
.cu-avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover}

.cloud-stat-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:10px; margin-top:14px;
}
.cloud-stat{
  text-align:center; padding:12px;
  background:rgba(0,0,0,.25); border-radius:10px;
}
.cloud-stat-num{font-size:22px; font-weight:800; background: linear-gradient(135deg, #fff, #c4b5fd); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.cloud-stat-lbl{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:2px}

.cloud-list{display:flex; flex-direction:column; gap:8px; margin-top:14px; max-height:480px; overflow-y:auto}
.mk-item{
  padding:14px; background:rgba(0,0,0,.25);
  border:1px solid var(--glass-border); border-radius:12px;
}
.mk-item-head{display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap}
.mk-cat-badge{font-size:10px; padding:3px 10px; background:var(--accent-1); color:#fff; border-radius:999px; font-weight:700; text-transform:uppercase; letter-spacing:.08em}
.mk-title{font-weight:700; font-size:14px; flex:1}
.mk-likes{font-size:12px; color:var(--accent-3); font-weight:700; cursor:pointer}
.mk-likes:hover{color:#EC4899}
.mk-body{
  font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:8px;
  font-family:'JetBrains Mono', monospace; background:rgba(0,0,0,.3);
  padding:10px; border-radius:6px; white-space:pre-wrap; max-height:100px; overflow-y:auto;
}
.mk-meta{display:flex; justify-content:space-between; font-size:11px; color:var(--muted)}

.lb-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:rgba(0,0,0,.25);
  border-radius:10px; border:1px solid var(--glass-border);
}
.lb-rank{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0}
.lb-rank.gold{background:linear-gradient(135deg, #fbbf24, #f59e0b); color:#fff}
.lb-rank.silver{background:linear-gradient(135deg, #d1d5db, #9ca3af); color:#fff}
.lb-rank.bronze{background:linear-gradient(135deg, #d97706, #92400e); color:#fff}
.lb-rank.normal{background:rgba(255,255,255,.06); color:var(--text)}
.lb-info{flex:1}
.lb-name{font-weight:700; font-size:13px}
.lb-badges{font-size:11px; color:var(--muted); margin-top:2px}
.lb-xp{font-family:'JetBrains Mono', monospace; font-weight:800; color:var(--accent-2)}

.activity-row{
  padding:10px 12px; background:rgba(0,0,0,.2);
  border-left:3px solid var(--accent-2); border-radius:6px;
  font-size:12px;
}
.activity-row .ar-time{font-size:10px; color:var(--muted); margin-top:2px; font-family:'JetBrains Mono', monospace}

/* === Visitor Widget === */
.visitor-widget{
  margin-top:18px;
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(14,165,233,.10), rgba(124,58,237,.08));
  border:1px solid rgba(16,185,129,.3);
}
.vw-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.vw-live{
  display:flex; align-items:center; gap:6px;
  background:rgba(16,185,129,.18); padding:4px 12px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.15em; color:#10B981;
}
.vw-dot{width:8px; height:8px; border-radius:50%; background:#10B981; animation: glowOnline 2s ease-in-out infinite}
.vw-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:12px}
.vw-stat{
  text-align:center; padding:16px;
  background:rgba(0,0,0,.25); border-radius:12px;
  transition:.2s;
}
.vw-stat:hover{transform:translateY(-3px); background:rgba(0,0,0,.35)}
.vw-num{
  font-size:32px; font-weight:900; line-height:1;
  background:linear-gradient(135deg, #fff, #34D399 60%, #0EA5E9);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.vw-lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-weight:700; margin-top:6px}
.vw-note{font-size:11px; color:var(--muted); margin-top:14px; text-align:center}

/* === Sidebar === */
.hamburger-btn{
  background:var(--glass); border:1px solid var(--glass-border);
  width:44px; height:44px; border-radius:12px;
  cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  margin-right:14px; flex-shrink:0;
}
.hamburger-btn:hover{border-color:var(--accent-2)}
.hamburger-btn span{
  width:18px; height:2px; background:var(--text);
  border-radius:2px; transition:.3s;
}
body.sidebar-open .hamburger-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.sidebar-open .hamburger-btn span:nth-child(2){opacity:0}
body.sidebar-open .hamburger-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.sidebar{
  position:fixed; left:0; top:0; bottom:0; z-index:9998;
  width:300px;
  background:
    radial-gradient(circle at 20% 0%, rgba(124,58,237,.25), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(236,72,153,.18), transparent 50%),
    rgba(8,8,20,.95);
  backdrop-filter: blur(30px) saturate(180%);
  border-right:1px solid rgba(255,255,255,.08);
  transform: translateX(-100%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column;
  box-shadow: 30px 0 80px rgba(0,0,0,.6);
}
body.sidebar-open .sidebar{transform:translateX(0)}
.sidebar-backdrop{
  position:fixed; inset:0; z-index:9997;
  background:rgba(6,6,15,.6); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition: opacity .3s;
}
body.sidebar-open .sidebar-backdrop{opacity:1; pointer-events:auto}

.sidebar-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 18px 14px;
}
.sidebar-brand{display:flex; align-items:center; gap:12px}
.sidebar-brand svg{filter: drop-shadow(0 6px 14px rgba(124,58,237,.5))}
.sb-brand-name{
  font-weight:800; font-size:17px;
  background: linear-gradient(135deg, #fff 30%, #c4b5fd 60%, #f9a8d4);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sb-brand-sub{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.15em; font-weight:600; margin-top:2px}
.sidebar-close{
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border);
  color:var(--muted); width:32px; height:32px; border-radius:50%;
  cursor:pointer; font-size:14px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  transition: all .2s;
}
.sidebar-close:hover{background:rgba(239,68,68,.85); color:#fff; border-color:transparent; transform:rotate(90deg)}

.sidebar-search-wrap{
  position:relative; margin:0 16px 12px;
}
.sidebar-search-ico{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  opacity:.5; pointer-events:none; font-size:14px;
}
.sidebar-search{
  width:100%;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  font-size:13px !important;
  padding:10px 14px 10px 38px !important;
  border-radius:10px !important;
  transition: all .2s !important;
}
.sidebar-search:focus{
  background:rgba(255,255,255,.08) !important;
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 4px rgba(236,72,153,.15) !important;
}
.sidebar-content{
  flex:1; overflow-y:auto;
  padding:4px 12px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.sidebar-content::-webkit-scrollbar{width:6px}
.sidebar-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08); border-radius:3px}

.sb-group{margin-top:14px}
.sb-group:first-child{margin-top:4px}
.sb-group-label{
  font-size:10px; font-weight:800;
  color:var(--muted); text-transform:uppercase; letter-spacing:.18em;
  padding:6px 12px 8px; margin-bottom:2px;
}

.sb-item{
  display:flex; align-items:center; gap:12px;
  width:100%; padding:10px 12px;
  background:transparent; border:none; border-radius:10px;
  color:var(--text); cursor:pointer;
  font-family:inherit; text-align:left;
  transition: all .18s;
  position:relative;
}
.sb-item .sb-ico{
  width:34px; height:34px; flex-shrink:0;
  border-radius:9px;
  background: linear-gradient(135deg, var(--sb-c, #7C3AED), color-mix(in srgb, var(--sb-c, #7C3AED) 60%, #000));
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--sb-c, #7C3AED) 40%, transparent);
  transition: transform .2s;
}
.sb-item .sb-text{display:flex; flex-direction:column; gap:1px; flex:1; min-width:0}
.sb-item .sb-name{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-item .sb-desc{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-item .sb-star{
  font-size:12px; margin-left:auto;
  filter: drop-shadow(0 0 6px rgba(245,158,11,.7));
}

.sb-item:hover{
  background: rgba(255,255,255,.05);
  transform: translateX(2px);
}
.sb-item:hover .sb-ico{transform:scale(1.08) rotate(-3deg)}

.sb-item.active{
  background: linear-gradient(135deg, color-mix(in srgb, var(--sb-c, #7C3AED) 25%, transparent), color-mix(in srgb, var(--sb-c, #7C3AED) 8%, transparent));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--sb-c, #7C3AED) 25%, transparent);
}
.sb-item.active::before{
  content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  background: var(--sb-c, #7C3AED); border-radius:0 3px 3px 0;
  box-shadow: 0 0 10px var(--sb-c, #7C3AED);
}
.sb-item.active .sb-name{color:#fff; font-weight:700}
.sb-item.active .sb-desc{color:rgba(255,255,255,.7)}

.sb-item.starred{
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(236,72,153,.12));
  border:1px solid rgba(245,158,11,.3);
}
.sb-item.starred:hover{background: linear-gradient(135deg, rgba(245,158,11,.25), rgba(236,72,153,.18))}

.sb-item.hidden-search{display:none}
.sb-group.no-results{display:none}

.sidebar-foot{
  display:flex; justify-content:space-around; align-items:center;
  padding:12px 18px; border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.3);
}
.sb-foot-stat{display:flex; flex-direction:column; align-items:center; gap:2px}
.sb-foot-stat b{
  font-size:18px; font-weight:800;
  background: linear-gradient(135deg, #fff, #c4b5fd);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sb-foot-stat span{font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:700}

/* When sidebar is open on desktop, push content */
@media(min-width: 1100px){
  body.sidebar-open .container{margin-left:300px; transition: margin-left .4s cubic-bezier(.22,1,.36,1)}
  body.sidebar-open .topbar{padding-left:calc(300px + 22px); transition: padding-left .4s cubic-bezier(.22,1,.36,1)}
  body.sidebar-open .footer{margin-left:300px; transition: margin-left .4s cubic-bezier(.22,1,.36,1)}
  body.sidebar-open .sidebar-backdrop{display:none}
}

/* === Header right (stats + theme toggle) === */
.header-right{display:flex; align-items:center; gap:14px}
.stats{display:flex; gap:14px; padding:8px 16px; background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; backdrop-filter:blur(10px)}
.stat{display:flex; flex-direction:column; align-items:center; min-width:48px}
.stat-num{
  font-size:18px; font-weight:800; line-height:1;
  background: linear-gradient(135deg, #fff, #c4b5fd 70%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat-lbl{font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.15em; margin-top:4px}
.theme-toggle{
  background:var(--glass); border:1px solid var(--glass-border); color:var(--text);
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center; transition: all .2s;
}
.theme-toggle:hover{transform:rotate(20deg); background:rgba(255,255,255,.1)}

@media(max-width:1100px){
  .topbar{flex-wrap:wrap; gap:14px}
  .stats{order:3}
}

/* === Icon-only button === */
.btn.icon-btn{
  width:44px; height:44px; padding:0; justify-content:center;
  font-size:18px;
}
.btn.icon-btn.recording{
  background:linear-gradient(135deg, #ef4444, #f97316);
  color:#fff; border-color:transparent;
  animation: pulseRec 1s ease-in-out infinite;
}
@keyframes pulseRec{
  0%,100%{box-shadow: 0 0 0 0 rgba(239,68,68,.55)}
  50%{box-shadow: 0 0 0 12px rgba(239,68,68,0)}
}

/* === 4-Image grid === */
.image-frame.grid-4{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px; aspect-ratio:auto}
.image-frame.grid-4 img{aspect-ratio:1/1; cursor:pointer; transition: transform .2s; border-radius:8px}
.image-frame.grid-4 img:hover{transform:scale(1.02)}

/* === Translator === */
#trIn, #trOut{font-size:15px; line-height:1.6}

/* === Tools === */
.tools-controls{
  position:sticky; top:0; z-index:5;
  padding: 18px 0 10px;
  margin-bottom:18px;
}
.search-wrap{
  position:relative; display:flex; align-items:center;
  margin-bottom:14px;
}
.search-icon{
  position:absolute; left:18px;
  font-size:18px; pointer-events:none; opacity:.6;
}
#toolSearch{
  width:100%; font-size:15px;
  padding:14px 50px 14px 48px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
  border-radius:14px;
  color:var(--text);
  font-family:inherit;
  outline:none; transition: border-color .2s, box-shadow .2s;
}
#toolSearch:focus{border-color: var(--accent-1); box-shadow: 0 0 0 4px rgba(124,58,237,.18)}
.search-clear{
  position:absolute; right:14px;
  background:none; border:none; color:var(--muted);
  cursor:pointer; font-size:18px; display:none;
  width:30px; height:30px; border-radius:50%;
}
.search-clear:hover{background:rgba(255,255,255,.08); color:var(--text)}
.search-clear.show{display:flex; align-items:center; justify-content:center}
.tool-cats{
  display:flex; gap:8px; flex-wrap:wrap;
  overflow-x:auto; padding-bottom:4px;
}
.cat-chip{
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); padding:7px 14px; border-radius:999px;
  font-family:inherit; font-size:12px; font-weight:600;
  cursor:pointer; white-space:nowrap; transition: all .2s;
}
.cat-chip:hover{border-color:var(--accent-1)}
.cat-chip.active{
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  border-color:transparent; color:#fff;
  box-shadow: 0 4px 14px rgba(124,58,237,.4);
}
.no-results{
  text-align:center; padding:40px; color:var(--muted);
  font-style:italic; font-size:14px;
}
.no-results.hidden{display:none}
.tool-desc{color:var(--muted); font-size:13px; margin-bottom:14px; line-height:1.6}
.tool-input-group{margin-bottom:10px}
.tool-input-group label{margin-top:0}
.tool-input-group input[type=number], .tool-input-group input[type=text],
.tool-input-group input[type=date], .tool-input-group input[type=color],
.tool-input-group select, .tool-input-group textarea{width:100%}
.tool-row-inputs{display:flex; gap:10px; flex-wrap:wrap}
.tool-row-inputs > div{flex:1; min-width:120px}
.tool-result-block{
  background: rgba(255,255,255,.04); border:1px solid var(--glass-border);
  padding:10px 14px; border-radius:8px; margin-top:8px;
  font-family:'JetBrains Mono', monospace; font-size:13px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.tool-result-block strong{color:var(--accent-2)}

.tools-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:12px; margin-bottom:22px;
}
.tool-card{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius);
  padding:22px; cursor:pointer; transition: all .25s;
  backdrop-filter:blur(20px);
}
.tool-card:hover{
  transform:translateY(-4px);
  border-color: var(--accent-2);
  background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(236,72,153,.08));
  box-shadow: 0 16px 40px rgba(124,58,237,.25);
}
.tool-icon{font-size:38px; margin-bottom:10px}
.tool-card h3{font-size:16px; font-weight:700; margin-bottom:6px}
.tool-card p{font-size:12px; color:var(--muted); line-height:1.5}

.tool-runner{margin-top:8px}
.tool-runner.hidden{display:none}
.tool-output{
  margin-top:14px; padding:18px;
  background: rgba(0,0,0,.32); border:1px solid var(--glass-border); border-radius:12px;
  font-size:14px; line-height:1.7; white-space:pre-wrap; color:var(--text);
  min-height:80px; max-height:500px; overflow-y:auto;
}
.tool-output:empty::before{content:'Output will appear here…'; color:var(--muted); font-style:italic}
.tool-output img{max-width:280px; border-radius:8px; background:#fff; padding:14px}
.palette-swatch{display:inline-block; width:90px; height:90px; border-radius:10px; margin:6px; vertical-align:top; position:relative; cursor:pointer; box-shadow: 0 6px 14px rgba(0,0,0,.35)}
.palette-swatch span{position:absolute; bottom:6px; left:6px; right:6px; font-size:10px; color:#fff; font-family:'JetBrains Mono', monospace; text-shadow: 0 1px 2px rgba(0,0,0,.7); text-align:center}

/* === Program Control Center === */
.pgm-voice-card{
  background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(245,158,11,.10));
  border:1px solid rgba(245,158,11,.3); margin-bottom:22px;
}
.pgm-h3{font-size:18px; font-weight:800; margin:26px 0 12px; display:flex; align-items:center; gap:8px}
.pgm-sub{font-size:11px; font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0}

.app-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap:10px; margin-bottom:8px;
}
.app-tile{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 8px; cursor:pointer; transition:.2s;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:14px; color:var(--text); font-family:inherit;
}
.app-tile:hover{transform:translateY(-4px); border-color:var(--accent-2); box-shadow:0 10px 24px rgba(124,58,237,.25)}
.app-tile .ai-em{font-size:32px}
.app-tile .ai-name{font-size:11px; font-weight:600; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%}

.ctrl-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
}
.ctrl-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:18px 8px; cursor:pointer; transition:.2s;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:14px; color:var(--text); font-family:inherit;
  font-size:12px; font-weight:600;
}
.ctrl-btn:hover{transform:translateY(-3px); border-color:var(--accent-1); background:rgba(124,58,237,.12)}
.ctrl-btn .cb-ico{font-size:24px}

.macro-list{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.macro-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:rgba(0,0,0,.25);
  border:1px solid var(--glass-border); border-radius:10px;
}
.macro-row b{flex-shrink:0}
.macro-row code{flex:1; color:var(--muted); font-size:12px; background:rgba(0,0,0,.3); padding:4px 10px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* === Devices Dashboard === */
.dev-actions{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
.device-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
}
.dev-card{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius: var(--radius); padding:22px;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  transition: transform .25s, border-color .25s;
}
.dev-card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.2)}
.dev-head{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.dev-head span{font-size:24px}
.dev-head h3{font-size:16px; font-weight:700; letter-spacing:.2px}

.dev-rows{display:flex; flex-direction:column; gap:8px}
.dev-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:13px; padding:6px 0;
  border-bottom: 1px dashed rgba(255,255,255,.06);
}
.dev-row:last-child{border-bottom:none}
.dev-row > span:first-child{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em}
.dev-row .v{color:var(--text); font-weight:600; text-align:right; word-break:break-word; max-width:60%}
.dev-row .v.ok{color:#10B981}
.dev-row .v.warn{color:#F59E0B}
.dev-row .v.bad{color:#EF4444}
.muted-text{color:var(--muted); font-size:12px; font-style:italic}

/* Battery widget */
.battery-meter{display:flex; align-items:center; justify-content:center; margin:0 auto 16px; gap:0; position:relative; height:64px}
.battery-shell{
  width:160px; height:60px; border:3px solid var(--text);
  border-radius:8px; position:relative; overflow:hidden;
  background: rgba(0,0,0,.3);
}
body.light .battery-shell{background: rgba(0,0,0,.05)}
.battery-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, #10B981, #34D399);
  transition: width .8s ease, background .3s;
  position:relative;
}
.battery-fill.charging{background: linear-gradient(90deg, #F59E0B, #FCD34D)}
.battery-fill.low{background: linear-gradient(90deg, #EF4444, #F87171)}
.battery-pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px; color:var(--text);
  mix-blend-mode:difference;
}
.battery-bump{width:6px; height:24px; background:var(--text); border-radius:0 4px 4px 0}

/* Storage ring */
.storage-ring{position:relative; width:130px; height:130px; margin:0 auto 14px}
.storage-ring svg{width:100%; height:100%}
.storage-ring circle{transition: stroke-dashoffset 1s ease}
.ring-pct{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:var(--text);
}

/* === Premium === */
.premium-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   margin-bottom:22px;
}
.prem-card{
  position:relative;
  background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(236,72,153,.08));
  border:1px solid rgba(245,158,11,.3);
  border-radius:var(--radius); padding:22px;
  cursor:pointer; transition: all .25s;
  backdrop-filter:blur(20px); overflow:hidden;
}
.prem-card::before{
  content:''; position:absolute; top:-40px; right:-40px;
  width:120px; height:120px; border-radius:50%;
  background: radial-gradient(circle, rgba(245,158,11,.3), transparent 70%);
  pointer-events:none;
}
.prem-card:hover{
  transform:translateY(-5px);
  border-color: var(--accent-3);
  box-shadow: 0 20px 50px rgba(245,158,11,.3);
}
.prem-icon{font-size:38px; margin-bottom:10px}
.prem-card h3{font-size:16px; font-weight:700; margin-bottom:6px}
.prem-card p{font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:10px}
.prem-tag{
  display:inline-block; padding:3px 10px;
  background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(14,165,233,.2));
  color:#34D399; font-size:10px; font-weight:700;
  border-radius:999px; border:1px solid rgba(16,185,129,.3);
}

.prem-runner{margin-top:8px}
.prem-runner.hidden{display:none}

/* Whiteboard */
.wb-toolbar{
  display:flex; gap:8px; flex-wrap:wrap; padding:12px;
  background:rgba(0,0,0,.3); border:1px solid var(--glass-border);
  border-radius:12px; margin-bottom:10px;
}
.wb-tool{
  width:38px; height:38px; border-radius:8px; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.wb-tool.active{background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color:#fff; border-color:transparent}
.wb-color-pick{display:flex; gap:6px}
.wb-color-pick .wbc{width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent}
.wb-color-pick .wbc.active{border-color:#fff; transform:scale(1.15)}
#whiteboard{border:1px solid var(--glass-border); border-radius:12px; background:#fff; cursor:crosshair; touch-action:none; max-width:100%}

/* Resume/Invoice live preview */
.split-preview{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
@media(max-width:1000px){.split-preview{grid-template-columns:1fr}}
.preview-frame{
  background:#fff; color:#1f2937; min-height:600px;
  border-radius:8px; overflow:auto; max-height:700px;
  padding:36px; font-family:'Helvetica','Arial',sans-serif; font-size:13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.preview-frame h1{font-size:24px; margin-bottom:4px}
.preview-frame h2{font-size:15px; font-weight:700; margin:14px 0 6px; padding-bottom:4px; border-bottom:2px solid #7C3AED; text-transform:uppercase; letter-spacing:.08em}
.preview-frame ul{padding-left:18px; line-height:1.6}
.invoice-table{width:100%; border-collapse:collapse; margin:14px 0}
.invoice-table th, .invoice-table td{padding:8px; border-bottom:1px solid #e5e7eb; text-align:left}
.invoice-table th{background:#f9fafb; font-size:11px; text-transform:uppercase; color:#6b7280}
.invoice-table td.num, .invoice-table th.num{text-align:right}

/* Mind map */
.mindmap-svg{width:100%; height:520px; background:rgba(0,0,0,.2); border-radius:12px; border:1px solid var(--glass-border)}
.mindmap-svg .mm-link{stroke:var(--accent-1); stroke-width:1.5; fill:none; opacity:.5}
.mindmap-svg .mm-node circle{stroke:#fff; stroke-width:2; cursor:pointer; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.mindmap-svg .mm-node text{fill:#fff; font-size:12px; font-weight:600; pointer-events:none; text-anchor:middle}

/* API Builder */
.api-endpoint{
  display:flex; gap:8px; align-items:center; padding:10px;
  background:rgba(0,0,0,.25); border:1px solid var(--glass-border); border-radius:10px;
  margin-bottom:8px; font-family:'JetBrains Mono', monospace; font-size:13px;
}
.method-badge{padding:3px 8px; border-radius:6px; font-weight:800; font-size:11px}
.method-GET{background:#10B981; color:#fff}
.method-POST{background:#F59E0B; color:#fff}
.method-PUT{background:#0EA5E9; color:#fff}
.method-DELETE{background:#EF4444; color:#fff}
.method-PATCH{background:#A855F7; color:#fff}

/* Recorder */
.rec-controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:20px; background:rgba(0,0,0,.3); border-radius:12px; border:1px solid var(--glass-border)}
.rec-status{display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; font-size:18px; font-weight:700}
.rec-dot{width:12px; height:12px; border-radius:50%; background:#ef4444; animation:pulseRec 1.2s ease-in-out infinite}
.rec-dot.idle{background:var(--muted); animation:none}

/* === Mode Switcher === */
.mode-switcher{position:relative}
.mode-btn{
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); padding:8px 14px; border-radius:999px;
  font-family:inherit; font-size:13px; cursor:pointer;
  display:flex; align-items:center; gap:8px; transition: all .2s;
}
.mode-btn:hover{border-color:var(--accent-2)}
.mode-dropdown{
  position:absolute; top:50px; right:0; z-index:9999;
  background:rgba(15,15,30,.96); backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:14px; padding:14px;
  min-width:280px; box-shadow: 0 20px 40px rgba(0,0,0,.5);
  animation: fadeUp .2s ease;
}
.mode-dropdown.hidden{display:none}
.mode-dropdown h4{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.15em; margin-bottom:8px; font-weight:700}
.mode-list{display:flex; flex-direction:column; gap:4px}
.mode-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px;
  cursor:pointer; transition:.15s;
  background:none; border:none; color:var(--text); text-align:left;
  font-family:inherit; font-size:13px; width:100%;
}
.mode-item:hover{background:rgba(124,58,237,.15)}
.mode-item.active{background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(236,72,153,.18)); border-left:3px solid var(--accent-2)}
.mode-item .mi-ico{font-size:18px}
.mode-item .mi-name{font-weight:700}
.mode-item .mi-desc{font-size:11px; color:var(--muted)}

/* === Dev Studio === */
.dev-tabs{
  display:flex; gap:6px; overflow-x:auto;
  padding:8px 0; margin-bottom:14px;
  border-bottom:1px solid var(--glass-border);
  scrollbar-width: none;
}
.dev-tabs::-webkit-scrollbar{display:none}
.dev-tab{
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); padding:8px 16px; border-radius:8px;
  cursor:pointer; font-family:inherit; font-size:13px;
  font-weight:600; white-space:nowrap; flex-shrink:0;
  transition: all .2s;
}
.dev-tab:hover{border-color:var(--accent-1)}
.dev-tab.active{background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color:#fff; border-color:transparent}
.dev-panel{display:none}
.dev-panel.active{display:block}

/* Playground */
.playground-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.playground{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
  height:540px;
}
@media(max-width:900px){.playground{grid-template-columns:1fr; height:auto}}
.pg-col{display:flex; flex-direction:column; background:#0a0a18; border:1px solid var(--glass-border); border-radius:12px; overflow:hidden}
.pg-tabs{display:flex; background:rgba(0,0,0,.4); border-bottom:1px solid var(--glass-border)}
.pg-tab{
  background:none; border:none; color:var(--muted);
  padding:10px 18px; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:700; letter-spacing:.1em;
}
.pg-tab.active{color:var(--accent-2); border-bottom:2px solid var(--accent-2)}
.pg-editor{
  flex:1; background:#0a0a18; color:#a7f3d0;
  border:none; padding:14px; font-family:'JetBrains Mono', monospace;
  font-size:13px; line-height:1.6; resize:none; outline:none;
  display:none; min-height:300px;
}
.pg-editor.active{display:block}
.pg-preview{background:#fff; border:1px solid var(--glass-border); border-radius:12px; overflow:hidden}
.pg-preview iframe{width:100%; height:100%; border:none; background:#fff}

/* API Tester */
.api-bar{display:flex; gap:8px; margin-bottom:14px}
.api-tabs{display:flex; gap:4px; margin-bottom:8px}
.api-tabb{
  background:none; border:none; color:var(--muted);
  padding:8px 14px; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:600; border-bottom:2px solid transparent;
}
.api-tabb.active{color:var(--accent-2); border-bottom-color:var(--accent-2)}
.api-pane{display:none; width:100%; font-family:'JetBrains Mono', monospace; font-size:13px}
.api-pane.active{display:block}
.api-meta{display:flex; gap:14px; margin-bottom:10px; font-size:13px; font-family:'JetBrains Mono', monospace}
.api-meta .status-200{color:#10B981}
.api-meta .status-300{color:#0EA5E9}
.api-meta .status-400, .api-meta .status-500{color:#ef4444}
.api-resp{
  background:#0a0a18; color:#a7f3d0;
  padding:14px; border-radius:10px;
  font-family:'JetBrains Mono', monospace; font-size:12px;
  max-height:400px; overflow:auto; white-space:pre-wrap; word-break:break-all;
  border:1px solid var(--glass-border);
}

/* JWT */
.jwt-split{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}
@media(max-width:700px){.jwt-split{grid-template-columns:1fr}}
.jwt-block{
  background:#0a0a18; color:#fbbf24; padding:14px; border-radius:10px;
  font-family:'JetBrains Mono', monospace; font-size:12px;
  white-space:pre-wrap; min-height:120px;
  border:1px solid var(--glass-border);
}

/* JSON / Curl / output */
.json-output, .curl-output{
  background:#0a0a18; color:#a7f3d0;
  padding:14px; border-radius:10px; margin-top:10px;
  font-family:'JetBrains Mono', monospace; font-size:12px;
  white-space:pre-wrap; word-break:break-all;
  min-height:120px; max-height:500px; overflow:auto;
  border:1px solid var(--glass-border);
}

/* Code Runner */
.runner-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.runner-bar select, .runner-bar button{flex-shrink:0}
.runner-grid{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
@media(max-width:900px){.runner-grid{grid-template-columns:1fr}}
.runner-col{display:flex; flex-direction:column}
.code-editor{
  background:#0a0a18 !important; color:#a7f3d0 !important;
  font-family:'JetBrains Mono', monospace !important;
  font-size:13px !important; line-height:1.6 !important;
  border:1px solid var(--glass-border) !important;
  resize:vertical; min-height:300px;
}
.rn-meta{
  display:flex; gap:14px; margin-bottom:6px;
  font-family:'JetBrains Mono', monospace; font-size:12px;
  color:var(--muted);
}
.rn-meta .ok{color:#10B981}
.rn-meta .err{color:#ef4444}
.rn-output{
  background:#0a0a18; color:#a7f3d0;
  padding:14px; border-radius:10px;
  font-family:'JetBrains Mono', monospace; font-size:12px;
  border:1px solid var(--glass-border);
  white-space:pre-wrap; word-break:break-all;
  min-height:200px; max-height:350px; overflow:auto;
}
.rn-stderr{color:#fca5a5; min-height:60px; max-height:120px}

/* Diff */
.diff-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:700px){.diff-grid{grid-template-columns:1fr}}
.diff-output{
  background:#0a0a18; padding:14px; border-radius:10px; margin-top:10px;
  font-family:'JetBrains Mono', monospace; font-size:13px;
  border:1px solid var(--glass-border);
}
.diff-add{background:rgba(16,185,129,.25); color:#a7f3d0; display:block; padding:2px 6px}
.diff-del{background:rgba(239,68,68,.25); color:#fca5a5; display:block; padding:2px 6px; text-decoration:line-through}

/* === Project Builder === */
.builder-hero{
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(124,58,237,.10));
  border:1px solid rgba(245,158,11,.3);
  margin-bottom:18px;
}
.bld-progress{margin-top:18px}
.bld-progress.hidden{display:none}
.bld-prog-bar{height:10px; background:rgba(255,255,255,.06); border-radius:6px; overflow:hidden}
.bld-prog-bar > div{height:100%; width:0%; background:linear-gradient(90deg, #7C3AED, #EC4899, #F59E0B); transition: width .4s ease; box-shadow: 0 0 20px rgba(236,72,153,.4)}
.bld-prog-text{margin-top:10px; font-size:14px; font-weight:700}
.bld-prog-log{margin-top:8px; max-height:200px; overflow-y:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); background:rgba(0,0,0,.3); border:1px solid var(--glass-border); border-radius:8px; padding:10px; line-height:1.6}
.bld-prog-log div.ok{color:#10B981}

.bld-result.hidden{display:none}
.bld-result{margin-top:18px}
.bld-result-head{display:flex; justify-content:space-between; align-items:center; padding:18px; background:rgba(124,58,237,.12); border-radius:14px; margin-bottom:14px; flex-wrap:wrap; gap:14px}

/* === Workflows === */
.wf-builder.hidden{display:none}
.wf-builder{margin-bottom:18px}
.wf-steps{display:flex; flex-direction:column; gap:8px; margin:14px 0}
.wf-step{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:rgba(0,0,0,.25);
  border:1px solid var(--glass-border); border-radius:10px;
}
.wf-step-num{
  width:28px; height:28px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; flex-shrink:0;
}
.wf-step-info{flex:1}
.wf-step-type{font-weight:700; font-size:13px}
.wf-step-input{font-size:11px; color:var(--muted); margin-top:2px}
.wf-list{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.wf-card{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; background:var(--glass);
  border:1px solid var(--glass-border); border-radius:12px;
  transition:.2s;
}
.wf-card:hover{border-color:var(--accent-2)}
.wf-card-info{flex:1}
.wf-card-name{font-weight:700; font-size:15px}
.wf-card-steps{font-size:11px; color:var(--muted); margin-top:2px}

/* === Voice Assistant === */
.va-card{text-align:center; padding:40px; background:var(--glass); border:1px solid var(--glass-border); border-radius:24px; backdrop-filter:blur(20px)}
.va-orb{
  width:200px; height:200px; border-radius:50%; margin:0 auto;
  background: radial-gradient(circle at 30% 30%, #EC4899, #7C3AED, #1a1a3a);
  display:flex; align-items:center; justify-content:center;
  position:relative; cursor:pointer;
  transition: all .3s;
  box-shadow: 0 20px 60px rgba(124,58,237,.4);
}
.va-orb-inner{font-size:80px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.va-orb.listening{animation: vaPulse 1.5s ease-in-out infinite}
@keyframes vaPulse{0%,100%{box-shadow: 0 0 0 0 rgba(236,72,153,.6), 0 20px 60px rgba(124,58,237,.4)} 50%{box-shadow: 0 0 0 40px rgba(236,72,153,0), 0 20px 60px rgba(124,58,237,.4)}}
.va-transcript{font-size:18px; min-height:30px; color:var(--accent-2); margin:14px 0; padding:14px; background:rgba(0,0,0,.3); border-radius:10px; font-style:italic}
.va-commands{margin-top:30px; text-align:left}
.va-commands h4{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px}
.va-chips{display:flex; gap:8px; flex-wrap:wrap}
.va-chips span{background:rgba(255,255,255,.06); padding:6px 14px; border-radius:999px; font-size:12px; color:var(--text); border:1px solid var(--glass-border)}

/* Whiteboard big version */
#wbBig{
  width:100%; max-width:100%; height:auto;
  border:1px solid var(--glass-border); border-radius:12px;
  background:#fff; cursor:crosshair; touch-action:none; margin-top:10px;
}

/* === Memory === */
.mem-summary{
  background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(236,72,153,.10));
  border:1px solid rgba(236,72,153,.3); margin-bottom:18px;
}
.mem-stat-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:14px;
}
.mem-stat-tile{
  text-align:center; padding:14px;
  background:rgba(0,0,0,.25); border-radius:12px;
}
.mst-num{font-size:30px; font-weight:900; line-height:1; background: linear-gradient(135deg, #fff, #c4b5fd); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.mst-lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-top:4px}

.mem-add{margin-bottom:14px}

.mem-controls{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:14px}
.cat-chips{display:flex; gap:6px; flex-wrap:wrap}

.mem-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
}
.mem-card{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:14px; padding:16px;
  border-left:4px solid var(--mem-color, var(--accent-1));
  position:relative; transition:.2s;
}
.mem-card:hover{transform:translateY(-3px); border-color:var(--mem-color)}
.mem-card-head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.mem-card-cat{
  font-size:10px; padding:2px 8px; border-radius:999px;
  background: var(--mem-color); color:#fff;
  text-transform:uppercase; letter-spacing:.1em; font-weight:800;
}
.mem-card-time{font-size:10px; color:var(--muted); margin-left:auto}
.mem-card-key{font-size:13px; color:var(--muted); margin-bottom:4px; font-weight:600}
.mem-card-val{font-size:15px; font-weight:600; color:var(--text); line-height:1.4}
.mem-card-actions{display:flex; gap:6px; margin-top:10px; opacity:0; transition:.2s}
.mem-card:hover .mem-card-actions{opacity:1}
.mem-card .mc-act{
  background:rgba(0,0,0,.3); border:none; color:var(--text);
  width:30px; height:30px; border-radius:6px; cursor:pointer; font-size:13px;
}
.mem-card .mc-act:hover{background:var(--mem-color)}

.toggle input[type=checkbox]{margin-right:4px}

/* === Workspace === */
.ws-projects{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:14px; margin-top:18px;
}
.ws-project-card{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:18px; padding:22px;
  cursor:pointer; transition: all .25s;
  position:relative; overflow:hidden;
  backdrop-filter:blur(20px);
}
.ws-project-card::before{
  content:''; position:absolute; top:-30px; right:-30px;
  width:120px; height:120px; border-radius:50%;
  background:var(--proj-color, #7C3AED); opacity:.25; filter:blur(30px);
}
.ws-project-card:hover{transform:translateY(-5px); border-color:var(--proj-color, var(--accent-2)); box-shadow: 0 20px 40px rgba(124,58,237,.25)}
.ws-project-card .wpc-ico{
  width:54px; height:54px; border-radius:14px;
  background: linear-gradient(135deg, var(--proj-color, #7C3AED), var(--proj-glow, #EC4899));
  display:flex; align-items:center; justify-content:center;
  font-size:28px; margin-bottom:14px; box-shadow: 0 8px 16px rgba(0,0,0,.3);
}
.ws-project-card .wpc-name{font-size:16px; font-weight:800; margin-bottom:4px}
.ws-project-card .wpc-desc{font-size:12px; color:var(--muted); line-height:1.5; min-height:34px}
.ws-project-card .wpc-meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; font-size:10px; color:var(--muted)}
.ws-project-card .wpc-meta span{padding:3px 8px; background:rgba(255,255,255,.05); border-radius:6px; border:1px solid var(--glass-border)}

/* Detail view */
.ws-detail-view.hidden{display:none}
.ws-gallery-view.hidden{display:none}
.ws-detail-head{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; margin-bottom:14px;
  background: linear-gradient(135deg, var(--proj-color,#7C3AED), var(--proj-glow,#EC4899));
  border-radius:16px;
}
.ws-project-avatar{
  width:60px; height:60px; border-radius:16px;
  background: rgba(255,255,255,.2); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; border:2px solid rgba(255,255,255,.3);
}
.ws-detail-head h3{font-size:22px; font-weight:800; color:#fff; margin-bottom:2px; outline:none}
.ws-detail-head h3:focus, .ws-detail-head p:focus{background:rgba(255,255,255,.15); border-radius:4px; padding:2px 6px}

.ws-tabs{
  display:flex; gap:6px; overflow-x:auto;
  padding:8px 0; margin-bottom:14px;
  border-bottom:1px solid var(--glass-border);
  scrollbar-width:none;
}
.ws-tabs::-webkit-scrollbar{display:none}
.ws-tab{
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); padding:10px 16px; border-radius:10px;
  cursor:pointer; font-family:inherit; font-size:13px; font-weight:600;
  white-space:nowrap; flex-shrink:0; display:flex; align-items:center; gap:6px;
  transition:.2s;
}
.ws-tab:hover{border-color:var(--accent-1)}
.ws-tab.active{background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color:#fff; border-color:transparent}
.ws-count{
  background:rgba(0,0,0,.3); padding:2px 8px;
  border-radius:999px; font-size:10px; font-weight:800;
}
.ws-tab.active .ws-count{background:rgba(255,255,255,.25)}
.ws-panel{display:none}
.ws-panel.active{display:block}

/* Files */
.ws-dropzone{
  border:2px dashed var(--glass-border); border-radius:12px;
  padding:30px; text-align:center; cursor:pointer; margin-bottom:14px;
  transition: all .2s;
}
.ws-dropzone:hover, .ws-dropzone.drag{background:rgba(124,58,237,.1); border-color:var(--accent-1)}
.ws-files-list{display:flex; flex-direction:column; gap:8px}
.ws-file-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:rgba(0,0,0,.25);
  border:1px solid var(--glass-border); border-radius:10px;
}
.ws-file-row .ws-file-ico{font-size:24px; flex-shrink:0}
.ws-file-row .ws-file-info{flex:1; min-width:0}
.ws-file-row .ws-file-name{font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ws-file-row .ws-file-meta{font-size:11px; color:var(--muted)}

/* Images */
.ws-img-gallery{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:10px; margin-top:14px;
}
.ws-img-tile{
  position:relative; border-radius:10px; overflow:hidden; aspect-ratio:1/1;
  border:1px solid var(--glass-border); cursor:pointer;
}
.ws-img-tile img{width:100%; height:100%; object-fit:cover}
.ws-img-tile .wit-del{
  position:absolute; top:6px; right:6px;
  width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,.6); border:none; color:#fff; cursor:pointer; font-size:14px;
  opacity:0; transition:.2s;
}
.ws-img-tile:hover .wit-del{opacity:1}

/* Chat */
.ws-chat-messages{
  min-height:300px; max-height:400px; overflow-y:auto;
  display:flex; flex-direction:column; gap:12px;
  padding:18px; background:rgba(0,0,0,.2); border-radius:12px;
  border:1px solid var(--glass-border); margin-bottom:10px;
}
.ws-chat-input{display:flex; gap:8px}
.ws-chat-input textarea{flex:1; resize:none; max-height:120px}

/* Tasks */
.ws-task-stats{
  display:flex; gap:10px; margin:14px 0; font-size:12px; color:var(--muted);
}
.ws-task-stats b{color:var(--text)}
.ws-tasks-list{display:flex; flex-direction:column; gap:6px}
.ws-task-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:rgba(0,0,0,.25);
  border:1px solid var(--glass-border); border-radius:8px;
}
.ws-task-row.done{opacity:.6}
.ws-task-row.done .ws-task-text{text-decoration:line-through}
.ws-task-text{flex:1; font-size:14px}

/* Notes */
.ws-notes-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:12px; margin-top:14px;
}
.ws-note-card{
  background:linear-gradient(135deg, rgba(245,158,11,.15), rgba(124,58,237,.08));
  border:1px solid var(--glass-border); border-radius:12px;
  padding:14px; cursor:pointer; transition:.2s;
  min-height:140px; display:flex; flex-direction:column;
}
.ws-note-card:hover{transform:translateY(-3px); border-color:var(--accent-2)}
.ws-note-card h4{font-size:14px; font-weight:800; margin-bottom:6px}
.ws-note-card .wnc-preview{font-size:12px; color:var(--muted); line-height:1.5; flex:1}
.ws-note-card .wnc-date{font-size:10px; color:var(--muted); margin-top:8px}
.ws-note-editor.hidden{display:none}
.ws-note-editor{
  background:rgba(0,0,0,.3); padding:16px;
  border:1px solid var(--accent-2); border-radius:12px; margin-top:14px;
}
.ws-note-editor input{margin-bottom:8px; font-size:16px; font-weight:700}

/* Code */
.ws-code-list{display:flex; flex-direction:column; gap:6px; margin-top:14px}
.ws-code-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:rgba(0,0,0,.3);
  border:1px solid var(--glass-border); border-radius:8px;
  cursor:pointer; transition:.15s;
}
.ws-code-row:hover{border-color:var(--accent-2)}
.ws-code-row .wcr-lang{font-size:10px; padding:3px 8px; background:var(--accent-1); color:#fff; border-radius:4px; font-family:'JetBrains Mono', monospace}
.ws-code-row .wcr-title{flex:1; font-weight:600; font-size:13px; font-family:'JetBrains Mono', monospace}
.ws-code-editor.hidden{display:none}
.ws-code-editor{margin-top:14px; padding:14px; background:rgba(0,0,0,.3); border-radius:12px; border:1px solid var(--accent-2)}

/* Research */
.ws-research-list{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.ws-research-card{
  padding:14px; background:rgba(0,0,0,.25);
  border:1px solid var(--glass-border); border-radius:10px;
  border-left:3px solid var(--accent-2);
}
.ws-research-card h4{font-weight:800; margin-bottom:6px}
.ws-research-card .wrc-content{font-size:13px; line-height:1.6; color:var(--text); max-height:200px; overflow:hidden}
.ws-research-card.expanded .wrc-content{max-height:none}
.ws-research-card .wrc-date{font-size:10px; color:var(--muted); margin-top:8px; display:flex; justify-content:space-between}

/* Modal */
.ws-modal.hidden{display:none}
.ws-modal{
  position:fixed; inset:0; z-index:99990;
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.ws-modal-card{
  background:rgba(15,15,30,.97); backdrop-filter:blur(30px);
  border:1px solid var(--glass-border); border-radius:18px;
  padding:30px; max-width:500px; width:100%;
}
.ws-icon-picker, .ws-color-picker{display:flex; gap:8px; flex-wrap:wrap}
.ws-icon-picker > div{
  width:44px; height:44px; border-radius:10px;
  background:rgba(255,255,255,.06); border:2px solid transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px;
}
.ws-icon-picker > div.selected{border-color:var(--accent-2); transform:scale(1.1)}
.ws-color-picker > div{width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent}
.ws-color-picker > div.selected{border-color:#fff; transform:scale(1.15)}

/* === Feedback === */
.fb-promise{
  display:flex; align-items:center; gap:18px;
  padding:20px 24px;
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(14,165,233,.12));
  border:1px solid rgba(16,185,129,.4);
  border-radius:18px; margin-bottom:18px;
}
.fb-promise-icon{
  font-size:36px;
  background: linear-gradient(135deg, #10B981, #0EA5E9);
  width:60px; height:60px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(16,185,129,.4);
  flex-shrink:0;
}
.fb-promise h3{font-size:18px; font-weight:800; margin-bottom:4px}
.fb-promise-num{
  background: linear-gradient(135deg, #10B981, #34D399);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.fb-promise p{color:var(--muted); font-size:13px}

.fb-stats{
  display:grid; grid-template-columns: auto 1fr; gap:30px;
  align-items:center; margin-bottom:18px;
}
@media(max-width:700px){.fb-stats{grid-template-columns:1fr}}
.fb-stat-rating{text-align:center}
.fb-big-rating{
  font-size:64px; font-weight:900; line-height:1;
  background: linear-gradient(135deg, #FBBF24, #F59E0B);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.fb-stars-display{font-size:24px; letter-spacing:.1em; color:#FBBF24; margin:4px 0}
.fb-rating-label{font-size:12px; color:var(--muted)}

.fb-stat-breakdown{display:flex; flex-direction:column; gap:6px}
.fb-bar-row{display:flex; align-items:center; gap:10px; font-size:12px}
.fb-bar-row .fb-star-num{width:40px; color:var(--muted); font-family:'JetBrains Mono', monospace}
.fb-bar-row .fb-bar{flex:1; height:8px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden}
.fb-bar-row .fb-bar > div{height:100%; background:linear-gradient(90deg, #FBBF24, #F59E0B); transition: width .8s ease}
.fb-bar-row .fb-bar-count{width:30px; text-align:right; color:var(--muted)}

.fb-star-picker{
  display:flex; gap:4px; margin-top:4px;
}
.fb-star-picker span{
  font-size:36px; cursor:pointer; color:rgba(255,255,255,.2);
  transition: all .15s; user-select:none;
}
.fb-star-picker span:hover, .fb-star-picker span.hover{color:#FBBF24; transform:scale(1.15)}
.fb-star-picker span.selected{color:#FBBF24}

.fb-reviews{
  display:flex; flex-direction:column; gap:10px;
  max-height:540px; overflow-y:auto; margin-top:12px;
}
.fb-review{
  padding:14px 16px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--glass-border);
  border-radius:12px;
  border-left: 3px solid var(--fb-color, #FBBF24);
}
.fb-review-head{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.fb-review-author{font-weight:700; font-size:13px}
.fb-review-stars{color:#FBBF24; font-size:14px; letter-spacing:.05em}
.fb-review-type{
  font-size:10px; padding:2px 8px; border-radius:999px;
  background: var(--fb-color, #FBBF24); color:#fff; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
}
.fb-review-time{font-size:11px; color:var(--muted); margin-left:auto}
.fb-review-subject{font-weight:700; margin-bottom:4px; font-size:14px}
.fb-review-msg{font-size:13px; color:var(--text); line-height:1.5}
.fb-review-status{
  display:inline-block; margin-top:8px;
  font-size:11px; padding:3px 10px; border-radius:999px;
  background:rgba(255,255,255,.05); color:var(--muted); font-weight:700;
}
.fb-review-status.resolved{background:#10B981; color:#fff}
.fb-review-status.in-progress{background:#F59E0B; color:#fff}
.fb-review-status.acknowledged{background:#0EA5E9; color:#fff}

.fb-tracker{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.fb-track-card{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:14px; padding:18px; text-align:center;
}
.fb-track-num{font-size:36px; font-weight:900; line-height:1; margin-bottom:6px}
.fb-track-num.open{color:#F59E0B}
.fb-track-num.progress{color:#0EA5E9}
.fb-track-num.resolved{color:#10B981}
.fb-track-lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:700}

/* === AI Agents === */
.agent-gallery{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
.agent-card{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:18px; padding:20px;
  cursor:pointer; transition: all .25s;
  backdrop-filter:blur(20px);
  position:relative; overflow:hidden;
}
.agent-card::before{
  content:''; position:absolute; top:-50px; right:-50px;
  width:140px; height:140px; border-radius:50%;
  background: var(--agent-glow); opacity:.4; filter: blur(30px);
  pointer-events:none;
}
.agent-card:hover{transform:translateY(-5px) scale(1.02); border-color:var(--agent-color); box-shadow: 0 20px 40px var(--agent-shadow)}
.agent-card .ac-avatar{
  width:70px; height:70px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; margin-bottom:14px;
  background: linear-gradient(135deg, var(--agent-color), var(--agent-glow));
  box-shadow: 0 8px 20px var(--agent-shadow);
  position:relative; z-index:2;
}
.agent-card .ac-name{font-size:17px; font-weight:800; margin-bottom:4px}
.agent-card .ac-role{font-size:11px; color:var(--accent-2); text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:8px}
.agent-card .ac-desc{font-size:12px; color:var(--muted); line-height:1.5}
.agent-card .ac-specialties{display:flex; gap:4px; flex-wrap:wrap; margin-top:10px}
.agent-card .ac-spec{font-size:10px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--glass-border); color:var(--text)}

/* Active chat */
.agent-chat.hidden{display:none}
.agent-chat{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:18px; padding:0; overflow:hidden;
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column;
  min-height:640px;
}
.agent-chat-head{
  display:flex; align-items:center; gap:14px;
  padding:16px 20px;
  background: linear-gradient(135deg, var(--agent-color, #7C3AED), var(--agent-glow, #EC4899));
  position:relative;
}
.agent-avatar-lg{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:28px;
  background: rgba(255,255,255,.2); backdrop-filter:blur(10px);
  border:2px solid rgba(255,255,255,.4);
}
.agent-chat-info{flex:1}
.agent-chat-info h3{font-size:18px; font-weight:800; color:#fff; margin-bottom:2px}
.agent-chat-info p{font-size:12px; color:rgba(255,255,255,.85); text-transform:uppercase; letter-spacing:.1em; font-weight:600}

.agent-messages{
  flex:1; padding:22px; overflow-y:auto;
  display:flex; flex-direction:column; gap:14px;
  background: rgba(0,0,0,.15);
  min-height:380px; max-height:460px;
}
.ag-msg{display:flex; gap:10px; animation: fadeUp .25s ease}
.ag-msg.user{flex-direction:row-reverse}
.ag-msg-av{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
  background: var(--agent-color, #7C3AED);
}
.ag-msg.user .ag-msg-av{background: linear-gradient(135deg, #10B981, #0EA5E9)}
.ag-msg-bubble{
  max-width:80%; padding:12px 16px;
  background: rgba(255,255,255,.08); border:1px solid var(--glass-border);
  border-radius:14px; font-size:14px; line-height:1.6;
  white-space:pre-wrap; word-wrap:break-word;
}
.ag-msg.user .ag-msg-bubble{
  background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(14,165,233,.18));
}
.ag-msg pre{background:rgba(0,0,0,.4); padding:10px; border-radius:8px; overflow-x:auto; font-family:'JetBrains Mono', monospace; font-size:12px; margin:6px 0}
.ag-msg code{background:rgba(0,0,0,.3); padding:1px 6px; border-radius:4px; font-family:'JetBrains Mono', monospace; font-size:12px}

.agent-suggestions{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:10px 20px; background: rgba(0,0,0,.15);
  border-top:1px solid var(--glass-border);
}
.ag-chip{
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); padding:7px 14px; border-radius:999px;
  font-family:inherit; font-size:11px; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:.15s;
}
.ag-chip:hover{background:var(--agent-color, var(--accent-1)); color:#fff; border-color:transparent}

.agent-input-bar{
  display:flex; gap:8px; padding:14px 20px;
  border-top:1px solid var(--glass-border);
  background: rgba(0,0,0,.2);
}
.agent-input-bar textarea{flex:1; resize:none; max-height:140px; min-height:44px}

/* Mode picker card + grid on Home */
.mode-picker-card{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%) !important;
  border: 1px solid var(--accent) !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
}
.mode-picker-card .mi-ico{font-size: 32px}
.mode-picker-card b{display:block; font-size: 15px; font-weight:700; color:var(--text); margin-bottom: 2px}
.mode-picker-card span{font-size: 12px; color: var(--muted)}
.mode-picker-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:10px; margin-bottom: 28px;
}
.mpg-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding: 14px 10px; cursor:pointer;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  font-family: inherit; text-align:center;
  transition: all .18s;
}
.mpg-card:hover{background: var(--panel-2); border-color: var(--border-2); transform: translateY(-1px)}
.mpg-card.selected{
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 4px 14px var(--accent-soft);
}
.mpg-ico{font-size: 26px}
.mpg-name{font-size: 13px; font-weight: 700}
.mpg-desc{font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .1em}

/* Ensure mode switcher stays visible on mobile */
@media(max-width:768px){
  .mode-switcher{display: block !important}
  .mode-btn{padding: 6px 12px !important; font-size: 12px !important}
}

/* === Home Dashboard === */
.hero-card{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, rgba(124,58,237,.25), rgba(236,72,153,.18), rgba(245,158,11,.12));
  border:1px solid var(--glass-border);
  border-radius:24px; padding:32px 30px;
  margin-bottom:24px;
}
.hero-orb{
  position:absolute; top:-80px; right:-80px;
  width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(245,158,11,.5), transparent 70%);
  filter:blur(40px); pointer-events:none;
  animation: floatUp 5s ease-in-out infinite;
}
.hero-content{position:relative; z-index:2; max-width:700px}
.hero-badge{
  display:inline-block; padding:6px 14px; border-radius:999px;
  background: rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);
  font-size:12px; font-weight:700; margin-bottom:16px;
  text-transform:uppercase; letter-spacing:.15em;
}
.hero-title{
  font-size:48px; font-weight:900; line-height:1.1; margin-bottom:14px;
  background: linear-gradient(135deg, #fff 30%, #c4b5fd 60%, #f9a8d4);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub{color:var(--text); opacity:.85; font-size:15px; line-height:1.6; margin-bottom:24px}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}

.dash-stats{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:14px;
}
.dash-stat-card{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:18px; padding:20px;
  backdrop-filter:blur(20px);
  text-align:center;
  transition: all .25s;
}
.dash-stat-card:hover{transform:translateY(-4px); border-color: var(--accent-2)}
.dsc-icon{font-size:32px; margin-bottom:8px}
.dsc-num{
  font-size:36px; font-weight:900; line-height:1;
  background: linear-gradient(135deg, #fff, #c4b5fd);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:4px;
}
.dsc-label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:600}

.quick-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}
.qa-card{
  display:flex; gap:14px; align-items:center;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:14px; padding:18px;
  cursor:pointer; transition: all .2s;
  backdrop-filter:blur(20px);
}
.qa-card:hover{transform:translateX(4px); border-color: var(--accent-2); background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(236,72,153,.05))}
.qa-icon{font-size:32px; flex-shrink:0}
.qa-card h4{font-size:14px; font-weight:700}
.qa-card p{font-size:11px; color:var(--muted); margin-top:2px}

.tip-card{
  display:flex; gap:18px; align-items:center;
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(124,58,237,.06));
  border:1px solid rgba(245,158,11,.25);
}
.tip-icon{font-size:38px}
.tip-card p{flex:1; font-size:14px; line-height:1.6}

/* === Sticky Notes === */
.notes-board{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:18px; margin-top:22px;
}
.note{
  padding:18px; border-radius:8px;
  min-height:200px; cursor:move;
  transition: transform .2s;
  position:relative;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transform: rotate(var(--tilt, 0deg));
  display:flex; flex-direction:column;
}
.note:hover{transform: rotate(0deg) scale(1.04); z-index:5}
.note.yellow{background: linear-gradient(135deg, #fef9c3, #fde68a); color:#422006}
.note.pink{background: linear-gradient(135deg, #fbcfe8, #f9a8d4); color:#500724}
.note.blue{background: linear-gradient(135deg, #bae6fd, #7dd3fc); color:#0c4a6e}
.note.green{background: linear-gradient(135deg, #bbf7d0, #86efac); color:#052e16}
.note.purple{background: linear-gradient(135deg, #ddd6fe, #c4b5fd); color:#2e1065}
.note.orange{background: linear-gradient(135deg, #fed7aa, #fdba74); color:#431407}
.note h4{font-size:15px; font-weight:800; margin-bottom:8px}
.note .nb{font-size:13px; line-height:1.5; flex:1; outline:none; resize:none; background:transparent; border:none; color:inherit; font-family:inherit}
.note .nb:focus{outline:1px dashed rgba(0,0,0,.2); outline-offset:4px; border-radius:4px}
.note .note-actions{display:flex; gap:6px; margin-top:8px; opacity:0; transition: opacity .2s}
.note:hover .note-actions{opacity:1}
.note .na-btn{background:rgba(0,0,0,.15); border:none; padding:4px 8px; border-radius:6px; cursor:pointer; font-size:11px; color:inherit; font-family:inherit}
.note .na-btn:hover{background:rgba(0,0,0,.3); color:#fff}

/* === Games === */
.games-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}
.game-card{
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius); padding:22px;
  cursor:pointer; transition: all .25s;
  backdrop-filter:blur(20px); text-align:center;
}
.game-card:hover{transform:translateY(-5px) rotate(-1deg); border-color:var(--accent-2); box-shadow: 0 16px 36px rgba(124,58,237,.3)}
.game-icon{font-size:48px; margin-bottom:10px}
.game-card h3{font-size:15px; font-weight:700; margin-bottom:4px}
.game-card p{font-size:11px; color:var(--muted)}

.game-stage{margin-top:18px}
.game-stage.hidden{display:none}

/* Tic Tac Toe */
.ttt{display:grid; grid-template-columns: repeat(3, 90px); gap:6px; margin:18px auto; width:fit-content}
.ttt-cell{
  width:90px; height:90px; background:var(--glass); border:1px solid var(--glass-border);
  border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:48px; font-weight:800; cursor:pointer; transition:.2s;
}
.ttt-cell:hover{background:rgba(124,58,237,.15)}
.ttt-cell.x{color:#EC4899}
.ttt-cell.o{color:#7C3AED}

/* Memory */
.mem-grid{display:grid; grid-template-columns: repeat(4, 80px); gap:8px; margin:18px auto; width:fit-content}
.mem-card{
  width:80px; height:80px; border-radius:10px;
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:36px; transition: transform .3s;
  transform-style: preserve-3d;
}
.mem-card.flipped{background: rgba(255,255,255,.95); color:#0a0a18; transform: rotateY(180deg)}
.mem-card.flipped > *{transform: rotateY(180deg)}
.mem-card.matched{background:#10B981; pointer-events:none}

/* 2048 */
.g2048{display:grid; grid-template-columns: repeat(4, 70px); gap:6px; margin:18px auto; width:fit-content; padding:10px; background:rgba(0,0,0,.3); border-radius:12px}
.g2048-cell{
  width:70px; height:70px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:20px;
  background: rgba(255,255,255,.05); color:#1f2937;
  transition: all .15s;
}
.g2048-cell[data-v="0"]{background:rgba(255,255,255,.05); color:transparent}
.g2048-cell[data-v="2"]{background:#fef3c7}
.g2048-cell[data-v="4"]{background:#fde68a}
.g2048-cell[data-v="8"]{background:#fb923c; color:#fff}
.g2048-cell[data-v="16"]{background:#f97316; color:#fff}
.g2048-cell[data-v="32"]{background:#ef4444; color:#fff}
.g2048-cell[data-v="64"]{background:#dc2626; color:#fff}
.g2048-cell[data-v="128"]{background:#a855f7; color:#fff; font-size:18px}
.g2048-cell[data-v="256"]{background:#7C3AED; color:#fff; font-size:18px}
.g2048-cell[data-v="512"]{background:#5B21B6; color:#fff; font-size:16px}
.g2048-cell[data-v="1024"]{background:#fde047; color:#000; font-size:14px}
.g2048-cell[data-v="2048"]{background:linear-gradient(135deg, #F59E0B, #EC4899); color:#fff; font-size:14px}

/* Snake */
#snakeCanvas{display:block; margin:18px auto; background:#0a0a18; border:1px solid var(--glass-border); border-radius:12px; max-width:100%}

/* Word guesser */
.word-row{display:flex; gap:6px; justify-content:center; margin-bottom:6px}
.word-cell{width:48px; height:48px; border:2px solid var(--glass-border); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; text-transform:uppercase}
.word-cell.correct{background:#10B981; border-color:#10B981; color:#fff}
.word-cell.present{background:#F59E0B; border-color:#F59E0B; color:#fff}
.word-cell.absent{background:rgba(0,0,0,.3); border-color:rgba(255,255,255,.1); color:var(--muted)}

/* Reaction */
.reaction-stage{
  height:280px; margin:18px 0; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700; cursor:pointer;
  transition: background .2s;
}
.reaction-stage.wait{background:#ef4444}
.reaction-stage.now{background:#10B981}
.reaction-stage.ready{background:#1e3a8a}

/* RPS */
.rps-btn{
  width:120px; height:120px; border-radius:50%;
  background:var(--glass); border:2px solid var(--glass-border);
  font-size:48px; cursor:pointer; transition: all .2s; margin:4px;
}
.rps-btn:hover{transform:scale(1.1); border-color:var(--accent-2)}

/* === AI Tutor v2 === */
.teacher-picker{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap:10px; margin-bottom:14px;
}
.teacher-option{
  position:relative; background:var(--glass);
  border:2px solid var(--glass-border); border-radius:14px;
  padding:12px; cursor:pointer; transition: all .2s;
  text-align:center;
}
.teacher-option:hover{transform:translateY(-3px); border-color:var(--accent-2)}
.teacher-option.selected{border-color: var(--accent-2); background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(236,72,153,.12)); box-shadow: 0 8px 20px rgba(236,72,153,.3)}
.teacher-option img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; margin-bottom:8px; background:rgba(0,0,0,.3)}
.teacher-option .to-name{font-size:13px; font-weight:700}
.teacher-option .to-desc{font-size:10px; color:var(--muted); margin-top:2px}
.teacher-option.loading::after{
  content:''; position:absolute; inset:12px;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  background-size: 200% 100%; animation: shimmer 1.5s linear infinite;
  border-radius:10px;
}
@keyframes shimmer{0%{background-position: 200% 0}100%{background-position: -200% 0}}

.ai-face-img{
  width: 80%; max-width:280px; aspect-ratio:1/1;
  border-radius:50%; object-fit:cover;
  border: 4px solid var(--accent-2);
  box-shadow: 0 14px 40px rgba(236,72,153,.4);
  transition: transform .3s ease;
}
.tutor-tile.speaking .ai-face-img{
  animation: kenBurns 4s ease-in-out infinite alternate;
}
@keyframes kenBurns{
  0%{transform: scale(1)}
  100%{transform: scale(1.04)}
}
.speaking-ring{
  position:absolute; width:0; height:0; border-radius:50%; pointer-events:none;
  transition: all .2s;
}
.tutor-tile.speaking .speaking-ring{
  width: calc(80% + 30px); aspect-ratio:1/1; max-width:310px;
  border:3px solid rgba(236,72,153,.6);
  animation: ringPulse 1.2s ease-in-out infinite;
}

/* Quiz overlay */
.quiz-overlay{
  position:absolute; inset:0; z-index:5;
  background: rgba(6,6,15,.92); backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center; padding:30px;
  border-radius:14px;
  animation: fadeUp .3s ease;
}
.quiz-overlay.hidden{display:none}
.quiz-card{
  background: linear-gradient(135deg, #1a1a2e, #2d1b69);
  border: 2px solid var(--accent-2);
  border-radius:24px; padding:34px;
  max-width:540px; width:100%;
  box-shadow: 0 30px 80px rgba(236,72,153,.4);
}
.quiz-badge{
  display:inline-block; padding:5px 14px;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color:#fff; font-weight:800; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  border-radius:999px; margin-bottom:14px;
}
.quiz-card h3{font-size:20px; font-weight:700; margin-bottom:18px; line-height:1.4}
.quiz-options{display:flex; flex-direction:column; gap:10px}
.quiz-opt{
  padding:14px 18px; border-radius:12px;
  background: rgba(255,255,255,.06); border:1px solid var(--glass-border);
  cursor:pointer; transition: all .2s;
  text-align:left; font-family:inherit; font-size:14px;
  color: var(--text); width:100%;
}
.quiz-opt:hover{border-color: var(--accent-2); background: rgba(124,58,237,.15); transform:translateX(4px)}
.quiz-opt.correct{background:#10B981; border-color:#10B981; color:#fff; animation: fadeUp .3s ease}
.quiz-opt.wrong{background:#ef4444; border-color:#ef4444; color:#fff}
.quiz-opt:disabled{cursor:not-allowed}

/* Distraction overlay */
.distract-overlay{
  position:fixed; inset:0; z-index:99999;
  background: rgba(239,68,68,.25); backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center; padding:30px;
  animation: pulseBg 1.5s ease-in-out infinite;
}
@keyframes pulseBg{
  0%,100%{background: rgba(239,68,68,.25)}
  50%{background: rgba(239,68,68,.45)}
}
.distract-overlay.hidden{display:none}
.distract-card{
  background: linear-gradient(135deg, #1a1a2e, #450a0a);
  border:3px solid #ef4444;
  border-radius:28px; padding:50px;
  text-align:center; max-width:480px;
  box-shadow: 0 30px 80px rgba(239,68,68,.5);
  animation: shakeX 0.5s ease infinite alternate;
}
@keyframes shakeX{from{transform:translateX(-4px)} to{transform:translateX(4px)}}
.distract-icon{font-size:80px; margin-bottom:14px; animation: floatUp 1.5s ease-in-out infinite}
.distract-card h2{font-size:30px; margin-bottom:10px; color:#fff}
.distract-card p{color:#fecaca; margin-bottom:22px; font-size:16px; line-height:1.5}

/* === AI Tutor (legacy still used below) === */
.tutor-start{text-align:center; padding:36px}
.tutor-hero{margin-bottom:26px}
.tutor-face-preview{
  width:140px; height:140px; margin:0 auto 14px;
  animation: floatUp 3s ease-in-out infinite;
}
.tutor-face-preview svg{width:100%; height:100%; filter:drop-shadow(0 8px 24px rgba(124,58,237,.45))}

.classroom{
  display:flex; flex-direction:column; gap:14px;
}
.classroom.hidden{display:none}
.class-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px;
  background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(236,72,153,.12));
  border:1px solid var(--glass-border);
  border-radius:14px;
}
.class-info{display:flex; gap:12px; align-items:center}
.live-dot{width:10px; height:10px; border-radius:50%; background:#ef4444; animation:pulseRec 1.2s ease-in-out infinite; flex-shrink:0}
.class-topic{font-size:15px; font-weight:700}
.class-time{font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--muted)}
.class-attention{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text)}
.att-meter{width:120px; height:8px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden}
.att-fill{height:100%; width:100%; background:linear-gradient(90deg, #ef4444, #F59E0B, #10B981); transition: width .4s ease}

.class-stage{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px;
  height: 60vh; max-height:480px;
}
@media(max-width:900px){.class-stage{grid-template-columns:1fr; height:auto}}
.class-tile{
  position:relative;
  background:#0a0a18;
  border-radius:16px; overflow:hidden;
  border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
}
.tile-label{
  position:absolute; bottom:10px; left:14px;
  background:rgba(0,0,0,.6); color:#fff;
  padding:6px 12px; border-radius:8px;
  font-size:13px;
}

.tutor-tile{
  background: radial-gradient(circle at 50% 30%, #2d1b69, #06060f 80%);
}
.ai-face{width:60%; max-width:280px; animation: floatUp 3.5s ease-in-out infinite}
.ai-face svg{width:100%; height:100%; filter:drop-shadow(0 14px 30px rgba(236,72,153,.4))}
.ai-face.speaking #aiMouth{animation: talkMouth .25s ease-in-out infinite}
@keyframes talkMouth{
  0%{rx:14; ry:4}
  50%{rx:11; ry:10}
  100%{rx:14; ry:4}
}
.ai-face #aiEyeL, .ai-face #aiEyeR{
  animation: blinkEye 4s linear infinite;
}
@keyframes blinkEye{
  0%, 92%, 100%{transform: scaleY(1)}
  96%{transform: scaleY(0.1)}
}
.user-tile video{width:100%; height:100%; object-fit:cover; transform: scaleX(-1)}
.attention-warn{
  position:absolute; top:14px; left:14px; right:14px;
  text-align:center; padding:10px 14px;
  background:rgba(239,68,68,.85); color:#fff;
  font-weight:700; border-radius:8px;
  animation: pulseRec 1s ease-in-out infinite;
}
.attention-warn.hidden{display:none}

.class-transcript{
  padding:18px;
}
#ccCurrentLine{
  font-size:18px; font-weight:600; margin-top:8px; line-height:1.5;
  min-height:60px;
}

.class-controls{
  display:flex; gap:12px; justify-content:center; padding:14px;
}
.class-controls .cc-btn{width:52px; height:52px; font-size:20px}
.cc-btn.recording{background:#10B981 !important; border-color:#10B981 !important}

.class-question{
  display:flex; gap:10px; align-items:center;
  background: var(--glass); border:1px solid var(--accent-2);
  border-radius:14px; padding:14px; backdrop-filter:blur(20px);
}
.class-question.hidden{display:none}
.class-question input{flex:1}

/* === Command Palette === */
.cmdk-overlay{
  position:fixed; inset:0; z-index:99990;
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  display:none; align-items:flex-start; justify-content:center;
  padding-top:14vh;
}
.cmdk-overlay.show{display:flex; animation: fadeUp .25s ease}
.cmdk-card{
  background:rgba(15,15,30,.95); backdrop-filter:blur(30px);
  border:1px solid var(--glass-border);
  border-radius:18px; width:90%; max-width:560px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  overflow:hidden;
}
.cmdk-search{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px; border-bottom:1px solid var(--glass-border);
}
.cmdk-search input{
  flex:1; background:transparent; border:none; color:#fff;
  font-size:17px; font-family:inherit; outline:none;
}
.cmdk-search kbd{font-size:11px; padding:3px 8px; background:rgba(255,255,255,.1); border-radius:6px; font-family:'JetBrains Mono', monospace}
.cmdk-results{max-height:60vh; overflow-y:auto; padding:8px}
.cmdk-item{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:10px;
  cursor:pointer; transition: background .15s;
}
.cmdk-item:hover, .cmdk-item.active{background:rgba(124,58,237,.2)}
.cmdk-item-icon{font-size:22px; width:32px; text-align:center}
.cmdk-item h4{font-size:14px; font-weight:600; margin-bottom:2px}
.cmdk-item p{font-size:11px; color:var(--muted)}
.cmdk-item-tag{margin-left:auto; font-size:10px; padding:3px 8px; background:rgba(255,255,255,.05); border-radius:999px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}

/* === Sign-in Splash === */
.signin-splash{
  position:fixed; inset:0; z-index:99997;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 30%, #1e1b4b, #06060f 70%);
  animation: fadeUp .5s ease;
}
.signin-splash.hidden{display:none}
.signin-card{
  background: rgba(15,15,30,.85); backdrop-filter: blur(40px);
  border:1px solid var(--glass-border);
  border-radius:28px; padding:40px;
  max-width:480px; width:90%;
  text-align:center;
  box-shadow: 0 40px 100px rgba(124,58,237,.4);
}
.signin-logo{margin-bottom:18px; animation: floatUp 3s ease-in-out infinite}
@keyframes floatUp{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
.signin-card h1{
  font-size:30px; font-weight:800; margin-bottom:8px;
  background: linear-gradient(135deg, #fff, #c4b5fd 60%, #f9a8d4);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.signin-sub{color:var(--muted); margin-bottom:24px; line-height:1.5}
#googleBtn{display:flex; justify-content:center; min-height:0}

/* Avatar picker */
.avatar-picker{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center; margin-bottom:8px;
}
.ap-option{
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; cursor:pointer; transition: all .2s;
  border:3px solid transparent;
}
.ap-option:hover{transform:scale(1.1)}
.ap-option.selected{border-color:#fff; transform:scale(1.15); box-shadow: 0 6px 16px rgba(124,58,237,.5)}

/* Advanced section */
.advanced-signin{
  margin-top:14px;
  background: rgba(0,0,0,.25);
  border:1px solid var(--glass-border);
  border-radius:10px; padding:10px 14px;
}
.advanced-signin summary{
  cursor:pointer; font-size:12px; color:var(--muted);
  user-select:none; outline:none;
  padding:4px 0;
}
.advanced-signin summary:hover{color:var(--text)}
.advanced-signin[open] summary{color:var(--text); font-weight:700}

/* === User chip in header === */
.user-chip{
  display:flex; align-items:center; gap:10px;
  padding:6px 14px 6px 6px;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:999px;
  cursor:pointer; transition: all .2s;
}
.user-chip:hover{border-color: var(--accent-2)}
.user-chip img{width:36px; height:36px; border-radius:50%; object-fit:cover; background:linear-gradient(135deg,var(--accent-1),var(--accent-2))}
.user-name{font-size:13px; font-weight:700; line-height:1.2}
.user-id{font-size:10px; color:var(--muted); font-family:'JetBrains Mono', monospace; letter-spacing:.05em}
.user-menu-btn{
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:18px; padding:4px 8px; border-radius:6px;
}
.user-menu-btn:hover{background:rgba(255,255,255,.1)}

.user-dropdown{
  position:fixed; top:84px; right:24px; z-index:9999;
  background: rgba(15,15,30,.95); backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:14px; padding:16px;
  min-width:260px; box-shadow: 0 20px 40px rgba(0,0,0,.4);
  animation: fadeUp .2s ease;
}
.user-dropdown.hidden{display:none}
.ud-header{display:flex; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--glass-border); margin-bottom:10px}
.ud-header img{width:48px; height:48px; border-radius:50%}
.ud-item{
  width:100%; background:none; border:none; color:var(--text);
  text-align:left; padding:10px 12px; border-radius:8px;
  cursor:pointer; font-family:inherit; font-size:13px;
}
.ud-item:hover{background:rgba(255,255,255,.06)}

/* === Calls (cool redesign) === */
.ident-hero{
  position:relative; overflow:hidden;
  border-radius:24px; padding:34px 38px;
  margin-bottom:22px;
  background:
    radial-gradient(circle at 80% 20%, rgba(245,158,11,.25), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(124,58,237,.3), transparent 50%),
    linear-gradient(135deg, #1a1a3a, #0a0a18);
  border:1px solid var(--glass-border);
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.ident-grid{
  display:grid; grid-template-columns: 1fr auto; gap:30px; align-items:center;
}
@media(max-width:800px){.ident-grid{grid-template-columns:1fr}}
.ident-status{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.3); border:1px solid var(--glass-border);
  padding:6px 14px; border-radius:999px; margin-bottom:10px;
  font-size:12px; font-weight:600; color:var(--muted);
}
.ident-dot{
  width:10px; height:10px; border-radius:50%; background:#fbbf24;
  animation: pulseRec 1.2s ease-in-out infinite;
}
.ident-dot.online{background:#10B981; animation: glowOnline 2s ease-in-out infinite}
.ident-dot.offline{background:#ef4444; animation:none}
@keyframes glowOnline{
  0%,100%{box-shadow: 0 0 0 0 rgba(16,185,129,.6)}
  50%{box-shadow: 0 0 0 10px rgba(16,185,129,0)}
}
.ident-title{font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.2em; font-weight:700; margin-bottom:8px}
.ident-id{
  font-family:'JetBrains Mono', monospace;
  font-size: clamp(28px, 5vw, 44px);
  font-weight:900;
  letter-spacing:.04em;
  background: linear-gradient(135deg, #fff, #fbcfe8 50%, #fde68a);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  cursor:pointer;
  margin-bottom:16px;
  word-break:break-all;
  filter: drop-shadow(0 4px 20px rgba(236,72,153,.4));
}
.ident-id:hover{transform:scale(1.01); transition:transform .2s}
.ident-actions{display:flex; gap:8px; flex-wrap:wrap}
.ident-qr-slot:empty{display:none}
.ident-qr-slot img{background:#fff; padding:12px; border-radius:14px; display:block}

.calls-grid{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
@media(max-width:900px){.calls-grid{grid-template-columns:1fr}}

.card-title{font-size:16px; font-weight:700; margin-bottom:14px}

.dial-input-wrap{position:relative; display:flex; align-items:center; gap:6px}
.dial-input-wrap .dial-input{flex:1}
.dial-input{
  font-family:'JetBrains Mono', monospace !important;
  font-size:24px !important;
  letter-spacing:.18em !important;
  text-align:center;
  font-weight:700;
  background: rgba(0,0,0,.45) !important;
  padding:14px !important;
}

.dial-pad{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;
  margin:14px 0;
}
.dp-key{
  background: rgba(255,255,255,.06); border:1px solid var(--glass-border);
  color:var(--text); cursor:pointer;
  padding:14px 0; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-family:inherit; transition: all .12s;
}
.dp-key:hover{background:rgba(124,58,237,.2); border-color:var(--accent-1); transform:scale(1.04)}
.dp-key:active{transform:scale(0.96)}
.dp-key b{font-size:22px; font-weight:700}
.dp-key small{font-size:9px; color:var(--muted); letter-spacing:.15em; font-weight:600}
.dp-key.dp-back, .dp-key.dp-paste{font-size:18px; color:var(--accent-2)}

.dial-actions{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:10px}
.dial-action{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px !important; border-radius:14px;
}
.dial-icon{font-size:22px; line-height:1}
.dial-action span:not(.dial-icon){font-size:12px}
.dial-call{box-shadow: 0 8px 20px rgba(236,72,153,.4)}

.msg-composer{
  margin-top:14px; padding:10px 14px;
  background:rgba(0,0,0,.25); border:1px solid var(--glass-border);
  border-radius:12px;
}
.msg-composer summary{cursor:pointer; font-size:13px; color:var(--muted); user-select:none; outline:none}
.msg-composer summary:hover{color:var(--text)}
.msg-composer[open] summary{color:var(--text); font-weight:600}

.contact-list{display:flex; flex-direction:column; gap:6px; max-height:440px; overflow-y:auto}
.contact-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid var(--glass-border);
  cursor:pointer; transition: all .15s;
}
.contact-item:hover{background:rgba(124,58,237,.12); border-color:var(--accent-2); transform:translateX(2px)}
.contact-avatar{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; flex-shrink:0;
}
.contact-info{flex:1; min-width:0}
.contact-name{font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.contact-meta{font-size:11px; color:var(--muted); font-family:'JetBrains Mono', monospace; margin-top:2px}
.contact-actions{display:flex; gap:4px; opacity:0; transition: opacity .2s}
.contact-item:hover .contact-actions{opacity:1}
.contact-act-btn{
  background:rgba(0,0,0,.3); border:none; color:var(--text);
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  font-size:14px; transition:.15s;
}
.contact-act-btn:hover{background:var(--accent-2); transform:scale(1.1)}

.contact-empty{
  text-align:center; padding:40px 20px;
  color:var(--muted); font-size:13px;
}
.contact-empty .em-ico{font-size:48px; margin-bottom:10px; opacity:.5}

/* Incoming call modal */
.incoming-overlay{
  position:fixed; inset:0; z-index:99998;
  background:rgba(0,0,0,.7); backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center;
}
.incoming-overlay.show{display:flex; animation: fadeUp .3s ease}
.incoming-card{
  background: linear-gradient(135deg, #1a1a2e, #2d1b69);
  border:2px solid var(--accent-2);
  border-radius:28px; padding:40px;
  text-align:center; min-width:340px;
  box-shadow: 0 30px 80px rgba(236,72,153,.5);
}
.avatar-pulse{
  width:120px; height:120px; margin:0 auto 18px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  animation: ringPulse 1.4s ease-in-out infinite;
}
.avatar-pulse img{width:108px; height:108px; border-radius:50%; object-fit:cover}
@keyframes ringPulse{
  0%,100%{box-shadow: 0 0 0 0 rgba(236,72,153,.7)}
  50%{box-shadow: 0 0 0 24px rgba(236,72,153,0)}
}
.incoming-card h2{font-size:24px; margin-bottom:6px}
.incoming-card p{color:#c4b5fd; margin-bottom:12px}
.call-action{width:64px; height:64px; border-radius:50%; padding:0; font-size:24px}
.call-accept{background:#10B981; animation: bouncePh 0.8s ease-in-out infinite alternate}
@keyframes bouncePh{from{transform:rotate(-8deg) scale(1)} to{transform:rotate(8deg) scale(1.05)}}

/* Call UI — full viewport with safe-area padding for iOS notch/home-bar */
.call-ui{
  position:fixed; inset:0; z-index:99996;
  background: linear-gradient(135deg, #0a0a18, #1a1a3a);
  display:none; flex-direction:column;
  padding-top:  env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  overflow:hidden;
}
.call-ui.active{display:flex; animation: fadeUp .3s ease}
.call-ui.minimized{
  inset:auto; bottom:24px; right:24px;
  width:300px; height:200px;
  border-radius:14px; overflow:hidden;
  border:1px solid var(--accent-2);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.call-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; background:rgba(0,0,0,.5); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  flex-shrink:0; /* never collapse the header */
}
.call-with-name{font-size:18px; font-weight:700}
.call-time{font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--accent-2); margin-top:2px}

.video-stage{
  flex: 1 1 0; min-height: 0;  /* KEY: allows children to shrink so controls stay visible */
  position:relative; background:#000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#remoteVideo{width:100%; height:100%; object-fit:cover; background:#1f2937}
#localVideo{
  position:absolute; bottom:16px; right:16px;
  width:min(220px, 30vw); height:auto; aspect-ratio: 16/10; object-fit:cover;
  border-radius:12px; border:2px solid #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  background:#1f2937;
  /* Don't cover the end-call button on narrow screens */
  max-height: 30vh;
}
@media(max-width:600px){
  #localVideo{width:110px; bottom:12px; right:12px}
}
.audio-only{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: radial-gradient(circle, #1e1b4b, #0a0a18);
}
.audio-only.hidden{display:none}
.audio-avatar-pulse{
  width:180px; height:180px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-3));
  margin-bottom:24px;
  animation: ringPulse 1.6s ease-in-out infinite;
}
.audio-only p{font-size:18px; color:#c4b5fd}

.call-controls{
  display:flex; gap:12px; justify-content:center; align-items:center;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0));
  background:rgba(0,0,0,.7); backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-border);
  flex-wrap: wrap;             /* wrap onto second row before disappearing */
  flex-shrink: 0;              /* NEVER shrink — always fully visible */
  min-height: 88px;
  position: sticky; bottom: 0; /* stays pinned even if inner content overflows */
  z-index: 2;
}
.cc-btn{
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid var(--glass-border);
  color:#fff; cursor:pointer; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  transition: all .2s;
  flex-shrink: 0;
}
@media (max-height: 500px){
  .cc-btn{width:44px; height:44px; font-size:17px}
  .call-controls{padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0)); min-height: 62px; gap: 8px}
  .call-header{padding: 8px 16px}
}
.cc-btn:hover{background:rgba(255,255,255,.2); transform:scale(1.05)}
.cc-btn.off{background:#ef4444; border-color:#ef4444}
.cc-btn.active-share{background:#10B981; border-color:#10B981}
.cc-end{background:#ef4444 !important; border-color:#ef4444 !important; transform:rotate(135deg)}
.cc-end:hover{background:#dc2626 !important}

.call-chat{
  position:absolute; right:0; top:0; bottom:0;
  width:340px; background:rgba(0,0,0,.6); backdrop-filter:blur(20px);
  border-left:1px solid var(--glass-border);
  display:flex; flex-direction:column; padding:16px;
}
.call-chat.hidden{display:none}
.cc-messages{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
.cc-msg{padding:8px 12px; background:rgba(255,255,255,.08); border-radius:10px; font-size:13px; max-width:85%}
.cc-msg.me{align-self:flex-end; background:linear-gradient(135deg, var(--accent-1), var(--accent-2))}
.cc-input{display:flex; gap:8px}
.cc-input input{flex:1}

/* === Trackers === */
.habit-list{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.habit-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; background:var(--glass);
  border:1px solid var(--glass-border); border-radius:14px;
}
.habit-name{font-weight:700; font-size:15px; flex:1}
.habit-streak{
  font-family:'JetBrains Mono', monospace; font-size:13px;
  background:linear-gradient(135deg, #F59E0B, #ef4444);
  color:#fff; padding:3px 10px; border-radius:8px;
  display:flex; align-items:center; gap:4px;
}
.habit-days{display:flex; gap:4px}
.hd-cell{
  width:24px; height:24px; border-radius:6px;
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.hd-cell.done{background:linear-gradient(135deg, #10B981, #34D399); color:#fff; border-color:transparent}
.hd-cell.today{box-shadow: 0 0 0 2px var(--accent-2)}
.hd-cell:hover{transform:scale(1.1)}

.mood-picker{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:10px;
  margin-top:14px;
}
.mood-pick{
  background:var(--glass); border:2px solid var(--glass-border);
  border-radius:14px; padding:14px; cursor:pointer;
  text-align:center; transition:.2s;
}
.mood-pick:hover{transform:scale(1.05); border-color:var(--accent-2)}
.mood-pick.selected{border-color:var(--accent-2); background:linear-gradient(135deg, rgba(124,58,237,.2), rgba(236,72,153,.15))}
.mood-pick .mp-em{font-size:36px}
.mood-pick .mp-lb{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:4px}

.mood-chart{
  display:grid; grid-template-columns: repeat(15, 1fr); gap:3px;
  margin-top:14px; padding:14px;
  background:rgba(0,0,0,.25); border-radius:12px; border:1px solid var(--glass-border);
}
.mc-day{
  aspect-ratio:1/1; border-radius:4px;
  background:rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.mc-day[data-m="5"]{background:#10B981}
.mc-day[data-m="4"]{background:#34D399}
.mc-day[data-m="3"]{background:#F59E0B}
.mc-day[data-m="2"]{background:#fb923c}
.mc-day[data-m="1"]{background:#ef4444}

.journal-list{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.journal-entry{
  padding:14px; background:rgba(0,0,0,.25);
  border-left:3px solid var(--accent-2);
  border-radius:8px; cursor:pointer;
}
.journal-entry:hover{background:rgba(124,58,237,.12)}
.journal-entry-date{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.journal-entry-preview{font-size:13px; margin-top:4px; color:var(--text); line-height:1.5}

.expense-summary{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:10px; margin:14px 0;
}
.exp-stat{
  padding:14px; background:var(--glass); border:1px solid var(--glass-border);
  border-radius:12px; text-align:center;
}
.exp-stat-num{font-size:22px; font-weight:800}
.exp-stat-num.inc{color:#10B981}
.exp-stat-num.exp{color:#ef4444}
.exp-stat-lbl{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:4px}
.expense-list{display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto}
.exp-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:rgba(0,0,0,.2);
  border-radius:8px; border:1px solid var(--glass-border);
}
.exp-row .er-amt{font-family:'JetBrains Mono', monospace; font-weight:700; margin-left:auto}
.exp-row .er-amt.inc{color:#10B981}
.exp-row .er-amt.exp{color:#ef4444}

.goal-list{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.goal-row{
  padding:14px; background:var(--glass); border:1px solid var(--glass-border);
  border-radius:12px;
}
.goal-progress{
  height:8px; background:rgba(255,255,255,.06); border-radius:4px; overflow:hidden;
  margin-top:8px;
}
.goal-progress > div{height:100%; background:linear-gradient(90deg, var(--accent-1), var(--accent-2)); transition: width .5s}
.goal-meta{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:6px}

/* Spin Wheel & Scratch Card */
.spin-stage{text-align:center; padding:14px}
.spin-wheel{
  width:280px; height:280px; border-radius:50%;
  margin:14px auto;
  position:relative;
  transition: transform 4s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 14px 40px rgba(0,0,0,.4);
}
.spin-pointer{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent;
  border-top:24px solid var(--accent-2); filter: drop-shadow(0 4px 6px rgba(0,0,0,.4));
  z-index:2;
}
.spin-wheel svg{width:100%; height:100%}

.scratch-area{
  position:relative; width:300px; height:200px;
  margin:14px auto; border-radius:14px; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.scratch-prize{
  position:absolute; inset:0;
  background: linear-gradient(135deg, #F59E0B, #EC4899);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:28px; font-weight:800; color:#fff;
}
.scratch-canvas{position:absolute; inset:0; cursor:grab; touch-action:none}

/* === Calendar === */
.quick-add{
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(245,158,11,.08));
  border:1px solid rgba(245,158,11,.3);
  margin-bottom:20px;
}
.quick-head{display:flex; align-items:center; gap:12px}
.quick-head h3{font-size:16px; font-weight:700}

.cal-layout{
  display:grid; grid-template-columns: 2fr 1fr; gap:18px;
}
@media(max-width:1100px){.cal-layout{grid-template-columns:1fr}}

.cal-nav{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.cal-nav h3{font-size:20px; font-weight:700; min-width:180px; text-align:center}
.cal-weekdays{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:4px;
  margin-bottom:8px;
}
.cal-weekdays div{
  text-align:center; padding:8px 0;
  font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.12em;
}
.cal-grid{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:4px;
}
.cal-day{
  aspect-ratio:1/1.05;
  background: rgba(255,255,255,.03);
  border:1px solid var(--glass-border);
  border-radius:10px;
  padding:6px;
  cursor:pointer;
  position:relative;
  transition: all .15s;
  display:flex; flex-direction:column;
}
.cal-day:hover{background: rgba(124,58,237,.15); border-color:var(--accent-1); transform:scale(1.03)}
.cal-day.other-month{opacity:.35}
.cal-day.today{
  background: linear-gradient(135deg, rgba(124,58,237,.22), rgba(236,72,153,.18));
  border-color: var(--accent-2);
  box-shadow: 0 4px 14px rgba(236,72,153,.25);
}
.cal-day .dnum{font-size:13px; font-weight:700; margin-bottom:auto}
.cal-day.today .dnum{color:#fff}
.cal-day .ev-dots{display:flex; gap:3px; flex-wrap:wrap}
.cal-day .ev-dots .dot{width:6px; height:6px; border-radius:50%}
.cal-day .ev-mini{
  font-size:9px; padding:1px 4px; border-radius:4px;
  background:rgba(124,58,237,.4); color:#fff;
  margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  width:100%;
}

.cal-side{display:flex; flex-direction:column; gap:18px}

.color-picker{display:flex; gap:6px; flex-wrap:wrap}
.color-picker .cp{width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition: all .15s}
.color-picker .cp.selected{transform:scale(1.2); border-color:#fff; box-shadow: 0 0 12px currentColor}
.color-picker .cp:hover{transform:scale(1.1)}

.up-list{display:flex; flex-direction:column; gap:8px; max-height:360px; overflow-y:auto; margin-top:10px}
.up-item{
  display:flex; gap:12px; align-items:center;
  padding:10px 12px;
  background: rgba(0,0,0,.25); border:1px solid var(--glass-border);
  border-radius:10px; cursor:pointer;
  transition: all .15s;
}
.up-item:hover{transform:translateX(3px); border-color: var(--accent-2)}
.up-item .ev-color{width:4px; align-self:stretch; border-radius:2px}
.up-item .ev-when{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.up-item .ev-title{font-size:14px; font-weight:600; margin-top:2px}
.up-item .ev-note{font-size:11px; color:var(--muted); margin-top:2px}
.up-item .ev-del{background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:4px}
.up-item .ev-del:hover{color:var(--danger)}
.up-item .ev-info{flex:1; min-width:0}
.up-item.fired{opacity:.55}

.cal-tools{
  margin-top:18px;
  display:grid; grid-template-columns: 1fr 1fr; gap:18px;
}
@media(max-width:900px){.cal-tools{grid-template-columns:1fr}}

.pomo-card, .clock-card{padding:24px}
.pomo-clock{
  position:relative; width:230px; height:230px; margin:14px auto;
}
.pomo-clock svg{width:100%; height:100%}
.pomo-display{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.pomo-display #pomoTime{
  font-family:'JetBrains Mono', monospace;
  font-size:42px; font-weight:800;
  background: linear-gradient(135deg, #fff, #f9a8d4);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.pomo-display #pomoLabel{
  font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.2em; margin-top:6px;
}

.clocks{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.world-clock{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px;
  background: rgba(0,0,0,.25); border:1px solid var(--glass-border);
  border-radius:10px;
}
.world-clock .wc-zone{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-weight:600}
.world-clock .wc-city{font-size:14px; font-weight:600; margin-top:2px}
.world-clock .wc-time{
  font-family:'JetBrains Mono', monospace;
  font-size:20px; font-weight:700; color:var(--accent-2);
}
.world-clock .wc-del{background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; margin-left:8px}
.world-clock .wc-del:hover{color:var(--danger)}

/* Event firing modal */
.event-alert-overlay{
  position:fixed; inset:0; z-index:99998;
  background: rgba(0,0,0,.6); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  animation: fadeUp .3s ease;
}
.event-alert{
  background: linear-gradient(135deg, #1a1a2e, #2d2d5f);
  border:2px solid var(--accent-2);
  border-radius:24px; padding:36px 40px;
  max-width:480px; box-shadow: 0 30px 80px rgba(236,72,153,.4);
  text-align:center;
  animation: alertPulse 1.5s ease-in-out infinite;
}
@keyframes alertPulse{
  0%,100%{box-shadow: 0 30px 80px rgba(236,72,153,.4)}
  50%{box-shadow: 0 30px 80px rgba(236,72,153,.7), 0 0 60px rgba(236,72,153,.3)}
}
.event-alert .ea-icon{font-size:64px; animation: shake 0.5s ease infinite alternate}
@keyframes shake{from{transform:rotate(-8deg)} to{transform:rotate(8deg)}}
.event-alert h2{font-size:24px; margin:10px 0; color:#fff}
.event-alert .ea-time{font-family:'JetBrains Mono', monospace; font-size:18px; color:var(--accent-2); margin-bottom:10px}
.event-alert .ea-note{color:#c4b5fd; font-size:14px; margin-bottom:22px; line-height:1.6}
.event-alert .ea-actions{display:flex; gap:10px; justify-content:center}

/* === Confetti === */
.confetti-canvas{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
}

/* === Light Theme === */
body.light{
  --bg-0: #f7f5fa;
  --bg-1: #ffffff;
  --glass: rgba(255,255,255,0.75);
  --glass-border: rgba(0,0,0,0.08);
  --text: #111827;
  --muted: #6b7280;
  color-scheme: light;
}
body.light{
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(1000px 700px at 100% 10%, rgba(236,72,153,.18), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(245,158,11,.15), transparent 60%),
    linear-gradient(180deg, #f7f5fa, #ffffff);
}
body.light .orb{opacity:.25}
body.light .topbar{background: rgba(255,255,255,.7)}
body.light .brand h1{
  background: linear-gradient(135deg, #1f2937 30%, #7C3AED 60%, #EC4899);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body.light textarea, body.light input[type=text], body.light input[type=number], body.light select{
  background: rgba(255,255,255,.9); color:#111827; border-color: rgba(0,0,0,.1);
}
body.light .btn.ghost{background: rgba(0,0,0,.04); color:#1f2937; border-color: rgba(0,0,0,.08)}
body.light .btn.ghost:hover{background: rgba(0,0,0,.08)}
body.light .image-frame{background:#f3f4f6}
body.light .chat-window{background:rgba(255,255,255,.5)}
body.light .msg .bubble{background:rgba(255,255,255,.8); color:#111827}
body.light .ab-prog-log{background:rgba(0,0,0,.04); color:#374151}
body.light .stat-num{
  background: linear-gradient(135deg, #1f2937, #7C3AED 80%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* === Onboarding === */
.onboarding-overlay{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 30%, #2d1b69, #06060f 70%);
  padding:20px;
}
.onboarding-overlay.hidden{display:none}
.onboard-bg{position:absolute; inset:0; width:100%; height:100%; opacity:.4; pointer-events:none}
.onboard-card{
  position:relative; z-index:2;
  background: rgba(15,15,30,.88); backdrop-filter:blur(40px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:28px; padding:50px;
  max-width:600px; width:100%;
  box-shadow: 0 40px 100px rgba(124,58,237,.4);
  animation: cardEntry .5s cubic-bezier(.16,1,.3,1);
}
@keyframes cardEntry{from{opacity:0; transform:translateY(20px) scale(.95)} to{opacity:1; transform:none}}
.onboard-skip{
  position:absolute; top:20px; right:24px;
  background:none; border:none; color:var(--muted);
  cursor:pointer; font-size:13px; font-family:inherit; transition:.2s;
}
.onboard-skip:hover{color:var(--text)}
.onboard-progress{
  display:flex; gap:6px; margin-bottom:30px;
}
.onboard-progress > span{
  flex:1; height:4px; background:rgba(255,255,255,.08); border-radius:2px;
  transition: all .3s;
}
.onboard-progress > span.done{background: linear-gradient(90deg, var(--accent-1), var(--accent-2))}
.onboard-progress > span.active{background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); animation: pulseRec 1.5s ease-in-out infinite}
.onboard-content{text-align:center; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ob-icon{font-size:84px; margin-bottom:20px; animation: floatUp 2.5s ease-in-out infinite}
.ob-title{font-size:32px; font-weight:900; margin-bottom:14px; background: linear-gradient(135deg, #fff 30%, #c4b5fd 60%, #f9a8d4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.ob-body{font-size:15px; line-height:1.7; color:var(--text); opacity:.85; max-width:480px; margin:0 auto}
.ob-highlight{color:var(--accent-2); font-weight:700}
.onboard-actions{display:flex; gap:10px; align-items:center; margin-top:30px; justify-content:space-between}
.onboard-step-num{font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace}

@media(max-width:560px){
  .onboard-card{padding:30px 24px}
  .ob-icon{font-size:64px}
  .ob-title{font-size:24px}
  .ob-body{font-size:14px}
}

/* === MOBILE RESPONSIVE === */
@media(max-width: 768px){
  .topbar{
    padding:14px 16px; flex-direction:column;
    align-items:stretch; gap:10px;
  }
  .topbar .brand{flex:1}
  .header-right{justify-content:flex-end; flex-wrap:wrap}
  .stats{padding:6px 12px; gap:10px}
  .stat{min-width:36px}
  .stat-num{font-size:14px}
  .stat-lbl{font-size:8px}
  .hamburger-btn{width:38px; height:38px; margin-right:8px}

  .container{padding:20px 12px 40px}
  .panel-head h2{font-size:24px}
  .panel-head p{font-size:13px}

  .hero-title{font-size:30px !important}
  .hero-card{padding:28px 22px !important}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}

  .grid.two, .split-preview, .grid two,
  .calls-grid, .cal-layout, .cal-tools, .calls-layout, .agent-gallery,
  .premium-grid, .games-grid, .tools-grid, .quick-grid, .dash-stats,
  .device-grid, .ws-projects, .notes-board, .agent-chat .ws-panel,
  .jwt-split, .runner-grid, .diff-grid, .class-stage{
    grid-template-columns: 1fr !important;
  }

  .sidebar{width:88%; max-width:320px}
  body.sidebar-open .container{margin-left:0 !important}
  body.sidebar-open .topbar{padding-left:16px !important}
  body.sidebar-open .footer{margin-left:0 !important}

  .tabs-wrap{padding:8px 0}
  .tab{font-size:12px; padding:8px 14px}
  .cmd-k-btn{padding:6px 10px; font-size:11px}
  .cmd-k-btn kbd{display:none}

  .ident-id{font-size: clamp(22px, 8vw, 32px) !important; letter-spacing:.02em !important}
  .big-id{font-size:24px !important; padding:14px !important}
  .dial-pad{gap:6px}
  .dp-key{padding:10px 0}
  .dp-key b{font-size:18px}

  .call-controls .cc-btn{width:48px; height:48px; font-size:18px}
  #localVideo{width:120px; height:80px}

  .builder-hero, .my-id-card{padding:18px}
  .agent-card, .game-card, .ws-project-card, .tool-card{padding:16px}

  .mode-switcher, .mode-dropdown{display:none}
  .stats{display:none}
}

@media(max-width: 480px){
  .topbar{padding:10px 12px}
  .brand h1{font-size:20px}
  .brand .tag{display:none}
  .tab{font-size:11px; padding:6px 10px}
  .hero-title{font-size:24px !important}
  .panel-head h2{font-size:20px}
  .stats{display:none}
  .ai-face-img{max-width:200px}
}

::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1); border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}
::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   POLISH OVERRIDES — consistent system, refined details
   Loaded at the END so it wins specificity battles cleanly.
   ============================================================ */

/* Universal transition speed — smooth, fast, predictable */
.btn, .tab, .cat-chip, .ws-tab, .dev-tab, .sb-item,
.card, .panel, .qa-card, .game-card, .tool-card, .agent-card,
.prem-card, .ws-project-card, .mem-card, .ai-face-img,
.contact-item, .app-tile, .ctrl-btn, .dp-key, .mode-btn,
.pg-tab, .api-tabb, .nav-item, .mode-item, .cmdk-item,
.fb-review, .mk-item, .lb-row, .ws-note-card, .ws-code-row,
input, select, textarea {
  transition: background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease, opacity .2s ease,
              color .2s ease !important;
}

/* Refined focus rings — visible but tasteful */
button:focus-visible, .btn:focus-visible, .tab:focus-visible,
input:focus, select:focus, textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent-2) !important;
}

/* Cleaner card shadows — soft, not heavy */
.card{
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.25) !important;
}
.card:hover{
  box-shadow: 0 4px 6px rgba(0,0,0,.14), 0 12px 32px rgba(0,0,0,.3) !important;
}

/* Smoother button feel — no more snap-back */
.btn{
  letter-spacing:.01em;
  will-change: transform;
}
.btn.primary{
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 6px 16px rgba(236,72,153,.22) !important;
}
.btn.primary:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 10px 24px rgba(236,72,153,.35) !important;
}
.btn:active{transform: translateY(0) !important; transition-duration: .08s !important}

/* Tab bar — quieter, more refined */
.tab{
  padding: 9px 16px !important;
  font-size: 12.5px !important;
  letter-spacing: .01em;
  font-weight: 600;
}
.tab.active{
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 4px 14px rgba(124,58,237,.3) !important;
}

/* Panel transitions — soft fade in */
.panel{display:none}
.panel.active{
  display:block;
  animation: panelFade .25s cubic-bezier(.2,.9,.3,1) !important;
}
@keyframes panelFade{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:none}
}

/* Inputs — consistent, refined */
input[type=text], input[type=number], input[type=email],
input[type=password], input[type=date], input[type=time],
input[type=tel], select, textarea{
  font-size: 14px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus){
  border-color: rgba(255,255,255,.2) !important;
}

/* Headings — tighter hierarchy */
.panel-head h2{
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.4px;
  line-height: 1.2;
}
.panel-head p{
  font-size: 14px !important;
  line-height: 1.55;
  max-width: 720px;
}
h3{letter-spacing: -.2px}
.card-title{
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.1px;
}

/* Labels — quieter, more professional */
label{
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px !important;
}

/* Cards — gentle scale on hover, not jumpy */
.qa-card:hover, .game-card:hover, .tool-card:hover, .agent-card:hover,
.prem-card:hover, .ws-project-card:hover{
  transform: translateY(-2px) !important;
}

/* Hint text — calmer */
.hint{font-size: 11.5px !important; line-height: 1.5}

/* Toast — refined */
.toast{
  font-size: 13.5px !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.3) !important;
  letter-spacing: .01em;
}

/* Container — consistent spacing */
.container{padding: 36px 28px 60px !important}
@media(max-width:768px){.container{padding: 20px 14px 40px !important}}

/* Topbar — denser, more pro */
.topbar{padding: 14px 28px !important}
@media(max-width:768px){.topbar{padding: 12px 16px !important}}
.brand h1{font-size: 22px !important; letter-spacing: -.4px}
.tag{font-size: 11px !important}

/* Stats in header — sharper */
.stat-num{font-size: 16px !important}
.stat-lbl{font-size: 8.5px !important; letter-spacing: .14em}

/* Tabs container — better breathing room */
.tabs{gap: 6px !important; padding: 6px 4px !important}

/* Loading overlay — refined */
.loading-overlay{background: rgba(6,6,15,.78) !important}
#loadMsg{font-size: 13px; letter-spacing:.02em; opacity:.9}

/* Spinner — slightly thinner ring */
.spinner{
  width: 52px !important; height: 52px !important;
  mask: radial-gradient(circle, transparent 58%, black 62%) !important;
  -webkit-mask: radial-gradient(circle, transparent 58%, black 62%) !important;
}

/* Modal overlays — gentler */
.event-alert-overlay, .quiz-overlay, .ws-modal,
.cmdk-overlay, .incoming-overlay, .onboarding-overlay,
.distract-overlay{
  animation: panelFade .25s cubic-bezier(.2,.9,.3,1) !important;
}

/* Code blocks - cleaner */
pre, code{font-family:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important}
.api-resp, .curl-output, .rn-output, .json-output{
  font-size: 12px !important;
  line-height: 1.6;
  padding: 14px 16px !important;
  border-radius: 10px !important;
}

/* Selection — branded */
::selection{background: rgba(236,72,153,.35); color: #fff}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .orb{animation: none !important}
}

/* Smoother section spacing */
.panel-head{margin-bottom: 22px !important}

/* Refined section dividers */
hr{
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
  margin: 20px 0 !important;
}

/* Better grid gaps */
.grid{gap: 16px !important}

/* Skeleton loader (used for lazy content) */
.skel{
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skelShimmer{
  from{background-position: 200% 0}
  to{background-position: -200% 0}
}

/* Cleaner empty states pattern */
.muted-text{
  color: var(--muted) !important;
  font-size: 13px !important;
  text-align: center;
}

/* Sidebar items - tighter */
.sb-item{padding: 9px 12px !important}
.sb-item .sb-ico{
  width: 32px !important; height: 32px !important;
  font-size: 15px !important;
  border-radius: 8px !important;
}
.sb-item .sb-name{font-size: 13px !important}

/* Header right - cleaner alignment */
.header-right{gap: 10px !important}

/* Smoother gradient text */
.brand h1, .hero-title, .ident-id, .big-id, .vw-num, .ob-title,
.fb-big-rating, .stat-num, .dsc-num, .mst-num{
  background-size: 100% 100%;
}

/* ============================================================
   🧼 CLEAN PASS — minimalist, professional finish
   Loaded LAST. Wins specificity. Reverses overly-decorative
   choices in favor of clarity, whitespace, and restraint.
   ============================================================ */

:root{
  --bg-0: #0a0a14;
  --bg-1: #0f0f1d;
  --panel: rgba(255,255,255,0.04);
  --panel-2: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.12);
  --text: #e5e7eb;
  --muted: #8b8d9b;
  --accent: #8b5cf6;
  --accent-soft: rgba(139,92,246,0.12);
  --radius: 12px;
}

body{
  background: var(--bg-0) !important;
  letter-spacing: 0;
}

/* Kill the orb circus — keep one very subtle glow */
.bg-orbs{opacity: 0.5}
.orb{filter: blur(180px) !important; opacity: .14 !important}
.orb1{background: #8b5cf6 !important}
.orb2{background: #6366f1 !important; opacity: .10 !important}
.orb3{display: none !important}

/* Topbar — solid, restrained */
.topbar{
  background: rgba(10,10,20,.85) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 24px !important;
}
.brand h1{
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text) !important;
  font-weight: 700;
  font-size: 18px !important;
}

/* Stats — quieter */
.stats{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  padding: 6px 14px !important;
}
.stat-num{
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text) !important;
  font-weight: 700;
}

/* Tabs — refined */
.tab{
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
.tab:hover{
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--border-2) !important;
  transform: none !important;
}
.tab.active{
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
.tab.highlight-tab{
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
}
.tab.highlight-tab::after{display:none !important}

/* Cards — solid, calmer */
.card{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 20px !important;
}
.card:hover{
  border-color: var(--border-2) !important;
  box-shadow: none !important;
}

/* Buttons — restraint, one color */
.btn{
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
  font-weight: 500 !important;
}
.btn.primary{
  background: var(--accent) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.btn.primary:hover{
  background: #7c3aed !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn.ghost{
  background: transparent !important;
  border: 1px solid var(--border) !important;
}
.btn.ghost:hover{
  background: var(--panel) !important;
  border-color: var(--border-2) !important;
  transform: none !important;
}
.btn.big{padding: 11px 22px !important; font-size: 14px !important}

/* Inputs — flat, clean */
input[type=text], input[type=number], input[type=email],
input[type=password], input[type=date], input[type=time],
input[type=tel], select, textarea{
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* Headings — clean, no gradient body text */
.panel-head h2{
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -.3px !important;
  color: var(--text) !important;
  margin-bottom: 4px !important;
}
.panel-head p{
  font-size: 13px !important;
  color: var(--muted) !important;
  max-width: 640px;
}
.panel-head{margin-bottom: 28px !important}

/* Hero — single subtle gradient, not rainbow */
.hero-card{
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(99,102,241,.06)) !important;
  border: 1px solid var(--border) !important;
  padding: 36px !important;
  border-radius: 16px !important;
}
.hero-title{
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -.5px !important;
}
.hero-orb{opacity: .3 !important; filter: blur(80px) !important}
.hero-badge{
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-size: 10px !important;
}

/* Stat tiles — flatter */
.dash-stat-card, .vw-stat, .mem-stat-tile, .exp-stat, .cloud-stat{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.dsc-num, .vw-num, .mst-num, .cloud-stat-num{
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* Quick action cards — clean rows */
.qa-card{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.qa-card:hover{
  background: var(--panel-2) !important;
  border-color: var(--border-2) !important;
  transform: none !important;
}

/* Agent cards, premium cards, game cards, tools — uniform */
.agent-card, .prem-card, .game-card, .tool-card,
.ws-project-card, .mem-card{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.agent-card:hover, .prem-card:hover, .game-card:hover,
.tool-card:hover, .ws-project-card:hover, .mem-card:hover{
  background: var(--panel-2) !important;
  border-color: var(--border-2) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

/* Agent icons — flatter */
.agent-card .ac-avatar{
  box-shadow: none !important;
  background: var(--accent) !important;
}
.agent-card::before, .prem-card::before, .ws-project-card::before{display:none !important}
.prem-card{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}

/* Premium tag — neutral */
.prem-tag{
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* Sidebar — cleaner */
.sidebar{
  background: rgba(10,10,20,.96) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 16px 0 40px rgba(0,0,0,.5) !important;
  width: 280px !important;
}
@media(min-width:1100px){
  body.sidebar-open .container{margin-left: 280px !important}
  body.sidebar-open .topbar{padding-left: 304px !important}
}
.sidebar-head{
  background: transparent !important;
  padding: 16px 18px !important;
}
.sb-brand-name{
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text) !important;
  font-size: 15px !important;
}
.sb-brand-sub{font-size: 10px !important; letter-spacing: .1em !important}
.sb-group-label{
  font-size: 10px !important;
  color: var(--muted) !important;
  letter-spacing: .12em !important;
  font-weight: 600 !important;
  padding: 4px 10px 6px !important;
}
.sb-item{
  padding: 8px 10px !important;
  border-radius: 6px !important;
  gap: 10px !important;
}
.sb-item .sb-ico{
  width: 26px !important; height: 26px !important;
  font-size: 13px !important;
  background: var(--panel-2) !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}
.sb-item .sb-name{font-size: 13px !important; font-weight: 500 !important}
.sb-item .sb-desc{font-size: 10.5px !important}
.sb-item:hover{background: var(--panel) !important; transform: none !important}
.sb-item:hover .sb-ico{transform: none !important; background: var(--accent-soft) !important}
.sb-item.active{
  background: var(--accent) !important;
}
.sb-item.active .sb-ico{background: rgba(255,255,255,.2) !important}
.sb-item.active::before{display:none !important}
.sb-item.starred{
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent) !important;
}

/* Hamburger */
.hamburger-btn{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  width: 38px !important; height: 38px !important;
  border-radius: 8px !important;
}

/* Mode/theme buttons */
.mode-btn, .theme-toggle, .cmd-k-btn, .user-chip{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}

/* Footer */
.footer{
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  padding: 24px !important;
}

/* Code & API outputs — solid */
.api-resp, .curl-output, .rn-output, .json-output, .jwt-block{
  background: #050510 !important;
  border: 1px solid var(--border) !important;
}

/* Container padding — generous */
.container{padding: 32px 28px 80px !important; max-width: 1240px !important}

/* Section spacing */
.grid{gap: 14px !important}
.row{margin-top: 10px !important; gap: 8px !important}

/* Toast — clean */
.toast{
  background: var(--bg-1) !important;
  border: 1px solid var(--border-2) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.5) !important;
  font-size: 13px !important;
}

/* Loading overlay */
.loading-overlay{background: rgba(10,10,20,.85) !important}

/* Big-id calm */
.big-id, .ident-id{
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: var(--text) !important;
}

/* Visitor widget — calmer */
.visitor-widget{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}

/* Tip card — calmer */
.tip-card{
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}

/* Selection */
::selection{background: var(--accent); color: #fff}

/* Light theme adjustments */
body.light{
  --bg-0: #f8fafc;
  --bg-1: #ffffff;
  --panel: rgba(0,0,0,0.03);
  --panel-2: rgba(0,0,0,0.05);
  --border: rgba(0,0,0,0.08);
  --border-2: rgba(0,0,0,0.12);
  --text: #1f2937;
  --muted: #6b7280;
}
body.light .topbar{background: rgba(255,255,255,.9) !important}
body.light .sidebar{background: rgba(255,255,255,.97) !important}
body.light input, body.light select, body.light textarea{
  background: #fff !important;
  color: #1f2937 !important;
}
body.light .api-resp, body.light .curl-output, body.light .rn-output,
body.light .json-output, body.light .jwt-block{
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

/* ============================================================
   🔐 COMPULSORY AUTH GATE
   Full-screen login/signup wall, server-backed. Sits above all.
   ============================================================ */
.auth-gate{
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(1000px 700px at 110% 110%, rgba(236,72,153,.24), transparent 55%),
    linear-gradient(180deg, #06060f, #0d0d22);
}
.auth-gate[hidden]{ display: none !important; }
body.auth-locked{ overflow: hidden; }

.auth-gate-orbs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ag-orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.ag-orb1{ width:420px; height:420px; background:#7C3AED; top:-120px; left:-100px; animation: agFloat 14s ease-in-out infinite; }
.ag-orb2{ width:380px; height:380px; background:#EC4899; bottom:-140px; right:-90px; animation: agFloat 18s ease-in-out infinite reverse; }
.ag-orb3{ width:300px; height:300px; background:#F59E0B; top:40%; left:60%; animation: agFloat 22s ease-in-out infinite; }
@keyframes agFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(30px,-24px) scale(1.08); }
}

.auth-gate-card{
  position: relative;
  width: 100%;
  max-width: 400px;
  background: rgba(13,13,34,.82);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 34px 30px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: center;
  color: #f3f4f6;
  animation: agCardIn .45s cubic-bezier(.2,.8,.2,1);
}
@keyframes agCardIn{ from{ opacity:0; transform: translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }

.ag-logo{ display:flex; justify-content:center; margin-bottom:10px; }
.ag-title{ font-size:24px; font-weight:800; margin:4px 0 4px; letter-spacing:-.02em; }
.ag-sub{ font-size:13px; color:#9ca3af; margin-bottom:22px; }

.ag-tabs{
  display:flex; gap:6px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding:5px;
  margin-bottom:20px;
}
.ag-tab{
  flex:1; border:none; cursor:pointer;
  background: transparent; color:#9ca3af;
  font-weight:700; font-size:14px; font-family:inherit;
  padding:9px 12px; border-radius:999px;
  transition: all .18s ease;
}
.ag-tab.active{
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  color:#fff; box-shadow:0 6px 18px rgba(124,58,237,.35);
}

.ag-form{ text-align:left; }
.ag-form label{
  display:block; font-size:11px; font-weight:600; color:#9ca3af;
  text-transform:uppercase; letter-spacing:.1em; margin:12px 0 6px;
}
.ag-form input{
  width:100%; box-sizing:border-box;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; color:#f3f4f6;
  font-family:inherit; font-size:14px; padding:12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ag-form input:focus{
  outline:none; border-color:#7C3AED;
  box-shadow:0 0 0 3px rgba(124,58,237,.25);
}
.ag-submit{
  width:100%; margin-top:20px; cursor:pointer;
  border:none; border-radius:12px;
  font-family:inherit; font-size:15px; font-weight:700; color:#fff;
  padding:13px 16px;
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  box-shadow:0 10px 26px rgba(124,58,237,.35);
  transition: transform .12s ease, opacity .15s ease;
}
.ag-submit:hover{ transform: translateY(-1px); }
.ag-submit:active{ transform: translateY(0); }
.ag-submit:disabled{ opacity:.6; cursor:progress; transform:none; }
.ag-submit.ghost{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none; margin-top:10px;
}

/* Scoped to the auth gate only — the AI-agent chat also uses .ag-msg
   and must NOT be collapsed by these rules. */
.auth-gate .ag-msg{
  min-height:0; margin-top:14px; font-size:13px; font-weight:600;
  border-radius:10px; overflow:hidden;
  max-height:0; padding:0 12px; opacity:0;
  transition: all .2s ease;
}
.auth-gate .ag-msg.show{ max-height:120px; padding:10px 12px; opacity:1; margin-top:14px; }
.auth-gate .ag-msg.error{ background: rgba(239,68,68,.14); color:#fca5a5; border:1px solid rgba(239,68,68,.3); }
.auth-gate .ag-msg.success{ background: rgba(16,185,129,.14); color:#6ee7b7; border:1px solid rgba(16,185,129,.3); }

.ag-server{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:18px; font-size:12px; color:#9ca3af;
}
.ag-server-dot{ width:9px; height:9px; border-radius:50%; background:#6b7280; flex:none; transition: background .2s; }
.ag-server-dot.online{ background:#10B981; box-shadow:0 0 8px rgba(16,185,129,.7); }
.ag-server-dot.offline{ background:#f59e0b; }
.ag-server-dot.error{ background:#ef4444; }
.ag-retry{
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#f3f4f6; border-radius:999px; padding:3px 12px; font-size:12px;
  font-family:inherit; cursor:pointer;
}
.ag-retry:hover{ border-color:#EC4899; }

.ag-advanced{ margin-top:16px; text-align:left; }
.ag-advanced summary{ cursor:pointer; font-size:12px; color:#9ca3af; list-style:none; }
.ag-advanced summary::-webkit-details-marker{ display:none; }
.ag-advanced summary:hover{ color:#f3f4f6; }
.ag-hint{ font-size:11px; color:#9ca3af; margin:10px 0; line-height:1.5; }
.ag-advanced input{
  width:100%; box-sizing:border-box;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; color:#f3f4f6; font-family:monospace; font-size:12px; padding:10px 12px;
}
.ag-note{ margin-top:18px; font-size:11px; color:#9ca3af; line-height:1.5; }

/* ============================================================
   🏠 LANDING PAGE (pre-sign-in)
   ============================================================ */
.landing{
  position: fixed; inset: 0; z-index: 100002;
  overflow-y: auto; overflow-x: hidden;
  background: #06060f;
  color: #f3f4f6;
  font-family: 'Sora', system-ui, sans-serif;
}
.landing[hidden]{ display:none; }
.ld-orbs{ position: fixed; inset:0; pointer-events:none; z-index:0; }
.ld-orb{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.35; animation: ldFloat 14s ease-in-out infinite alternate; }
.ld-orb1{ width:480px; height:480px; background:#7C3AED; top:-140px; left:-120px; }
.ld-orb2{ width:420px; height:420px; background:#EC4899; top:30%; right:-140px; animation-delay:-5s; }
.ld-orb3{ width:380px; height:380px; background:#0EA5E9; bottom:-120px; left:20%; animation-delay:-9s; }
@keyframes ldFloat{ from{ transform: translateY(-30px) } to{ transform: translateY(40px) } }

.ld-nav{
  position: relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  max-width:1120px; margin:0 auto; padding:22px 24px;
}
.ld-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:.3px; }

.ld-hero{ position:relative; z-index:2; max-width:900px; margin:0 auto; padding:64px 24px 40px; text-align:center; }
.ld-badge{
  display:inline-block; font-size:13px; padding:7px 16px; border-radius:999px;
  background:rgba(124,58,237,.16); border:1px solid rgba(124,58,237,.45); color:#d8c7ff;
  margin-bottom:22px;
}
.ld-hero h1{ font-size: clamp(38px, 7vw, 68px); font-weight:800; line-height:1.08; margin:0 0 20px; }
.ld-grad{
  background: linear-gradient(90deg, #7C3AED, #EC4899, #F59E0B);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ld-sub{ font-size: clamp(15px, 2.2vw, 19px); line-height:1.7; color:#b9bdcc; max-width:720px; margin:0 auto 32px; }
.ld-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.ld-btn{
  font-family:inherit; font-weight:700; font-size:16px; cursor:pointer;
  border-radius:999px; padding:14px 30px; border:none; transition: transform .15s ease, box-shadow .15s ease;
}
.ld-btn:hover{ transform: translateY(-2px); }
.ld-btn-primary{
  background: linear-gradient(90deg, #7C3AED, #EC4899);
  color:#fff; box-shadow: 0 12px 34px rgba(124,58,237,.45);
}
.ld-btn-primary:hover{ box-shadow: 0 16px 44px rgba(236,72,153,.55); }
.ld-btn-ghost{
  background: rgba(255,255,255,.07); color:#f3f4f6; border:1px solid rgba(255,255,255,.18);
}
.ld-stats{
  display:flex; gap:38px; justify-content:center; flex-wrap:wrap; margin-top:52px;
}
.ld-stats div{ text-align:center; }
.ld-stats b{ display:block; font-size:32px; background:linear-gradient(90deg,#7C3AED,#EC4899); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ld-stats span{ font-size:12px; color:#9ca3af; letter-spacing:.6px; text-transform:uppercase; }

.ld-section{ position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:56px 24px; }
.ld-section h2{ text-align:center; font-size: clamp(26px, 4vw, 40px); font-weight:800; margin:0 0 36px; }
.ld-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:18px; }
.ld-card{
  background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  border-radius:18px; padding:24px 22px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ld-card:hover{ transform: translateY(-5px); border-color: rgba(124,58,237,.55); box-shadow: 0 18px 40px rgba(124,58,237,.22); }
.ld-ico{ font-size:34px; margin-bottom:12px; }
.ld-card h3{ margin:0 0 8px; font-size:17px; }
.ld-card p{ margin:0; font-size:13.5px; line-height:1.65; color:#aab0c0; }

.ld-steps{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; margin-bottom:36px; }
.ld-step{
  text-align:center; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:18px; padding:28px 20px;
}
.ld-step span{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; font-weight:800; font-size:19px;
  background: linear-gradient(135deg, #7C3AED, #EC4899); margin-bottom:14px;
}
.ld-step h3{ margin:0 0 6px; font-size:16px; }
.ld-step p{ margin:0; font-size:13px; color:#aab0c0; line-height:1.6; }

.ld-footer{ position:relative; z-index:2; text-align:center; padding:38px 24px 48px; border-top:1px solid rgba(255,255,255,.07); }
.ld-footer p{ margin:0 0 8px; font-size:14px; }
.ld-fineprint{ font-size:12px !important; color:#8b90a0; }

/* --- landing v2: sticky nav, marquee, quotes, note --- */
.ld-nav{
  position: sticky; top:0; z-index:5;
  background: rgba(6,6,15,.65); backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  max-width:none; padding:14px 28px;
}
.ld-btn-sm{ padding:10px 22px; font-size:14px; }
.ld-note{ margin:16px 0 0; font-size:12.5px; color:#8b90a0; letter-spacing:.3px; }
.ld-grad{ background-size:200% auto; animation: ldGradShift 5s ease-in-out infinite alternate; }
@keyframes ldGradShift{ from{ background-position:0% center } to{ background-position:100% center } }

.ld-marquee{
  position:relative; z-index:2; overflow:hidden; padding:10px 0 4px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ld-marquee-track{
  display:flex; gap:12px; width:max-content;
  animation: ldScroll 36s linear infinite;
}
.ld-marquee-track span{
  flex:none; font-size:13px; padding:8px 18px; border-radius:999px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#c7cbd8;
}
@keyframes ldScroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.ld-quote{ display:flex; flex-direction:column; gap:10px; }
.ld-quote .ld-stars{ color:#F59E0B; letter-spacing:3px; font-size:15px; }
.ld-quote p{ font-style:italic; font-size:14px !important; color:#c7cbd8 !important; }
.ld-quote b{ font-size:13px; color:#9ca3af; }

/* --- auth gate as a POPUP over the landing page --- */
.auth-gate.ag-popup{
  z-index:100003;
  background: rgba(6,6,15,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.auth-gate.ag-popup .auth-gate-card{
  animation: agPop .3s cubic-bezier(.2,.9,.3,1.25);
}
@keyframes agPop{ from{ transform:scale(.85) translateY(16px); opacity:0 } to{ transform:scale(1) translateY(0); opacity:1 } }
.auth-gate-card{ position:relative; }
.ag-close{
  display:none; position:absolute; top:14px; right:14px; z-index:3;
  width:32px; height:32px; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:50%; color:#c7cbd8; font-size:14px; cursor:pointer; font-family:inherit;
}
.ag-close:hover{ border-color:#EC4899; color:#fff; }
.auth-gate.ag-popup .ag-close{ display:flex; }

/* --- landing v3: unlock banner, lock chips, shimmer, scroll-reveal --- */
.ld-unlock{ position:relative; z-index:2; max-width:1120px; margin:30px auto 0; padding:0 24px; }
.ld-unlock-inner{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:24px 28px; border-radius:22px;
  background: linear-gradient(120deg, rgba(124,58,237,.20), rgba(236,72,153,.14));
  border:1px solid rgba(236,72,153,.38);
  box-shadow: 0 16px 50px rgba(124,58,237,.28);
}
.ld-unlock-inner > div{ flex:1; min-width:240px; }
.ld-unlock-inner h3{ margin:0 0 5px; font-size:20px; }
.ld-unlock-inner p{ margin:0; font-size:13.5px; line-height:1.6; color:#c3c7d4; }
.ld-lock{ font-size:38px; animation: ldLockPulse 2.2s ease-in-out infinite; }
@keyframes ldLockPulse{ 0%,100%{ transform:scale(1) rotate(0deg) } 50%{ transform:scale(1.18) rotate(-8deg) } }

/* Feature cards show a lock that opens on hover — click to sign up */
#landing .ld-grid .ld-card:not(.ld-quote){ position:relative; cursor:pointer; }
#landing .ld-grid .ld-card:not(.ld-quote)::after{
  content:'🔒'; position:absolute; top:14px; right:16px; font-size:15px; opacity:.5; transition: all .15s ease;
}
#landing .ld-grid .ld-card:not(.ld-quote):hover::after{ content:'🔓'; opacity:1; transform:scale(1.2); }

/* Shimmer sweep across primary buttons */
.ld-btn-primary{ position:relative; overflow:hidden; }
.ld-btn-primary::before{
  content:''; position:absolute; top:0; left:-80%; width:55%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-20deg);
  animation: ldShine 3.6s ease-in-out infinite;
}
@keyframes ldShine{ 0%{ left:-80% } 55%{ left:135% } 100%{ left:135% } }

/* Scroll-reveal: elements fade up as they enter the viewport */
.ld-reveal{ opacity:0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.ld-reveal.ld-in{ opacity:1; transform:none; }

/* --- landing v4: rotating word, app preview, agent strip, final CTA --- */
.ld-word-wrap{ display:inline-block; min-width: 4.2ch; text-align:left; }
#ldWord{ display:inline-block; transition: opacity .25s ease, transform .25s ease; }
#ldWord.ld-word-out{ opacity:0; transform: translateY(16px) scale(.95); }
.ld-br{ display:none; }
@media (max-width:560px){ .ld-br{ display:block } }

.ld-preview{ margin-top:56px; perspective: 1100px; }
.ld-window{
  max-width:640px; margin:0 auto;
  background: rgba(16,16,32,.82); border:1px solid rgba(255,255,255,.12);
  border-radius:18px; overflow:hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 60px rgba(124,58,237,.22);
  transform: rotateX(6deg);
  animation: ldWinFloat 7s ease-in-out infinite alternate;
}
@keyframes ldWinFloat{ from{ transform: rotateX(6deg) translateY(0) } to{ transform: rotateX(3deg) translateY(-14px) } }
.ld-win-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  background: rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.08);
}
.ld-win-bar span{ width:11px; height:11px; border-radius:50%; }
.ld-win-bar span:nth-child(1){ background:#EF4444 } .ld-win-bar span:nth-child(2){ background:#F59E0B } .ld-win-bar span:nth-child(3){ background:#10B981 }
.ld-win-bar b{ margin-left:8px; font-size:12px; color:#9ca3af; font-weight:600; }
.ld-win-body{ display:flex; gap:14px; padding:18px; }
.ld-win-chat{ flex:1.4; display:flex; flex-direction:column; gap:10px; text-align:left; }
.ld-bub{
  max-width:88%; padding:9px 14px; border-radius:14px; font-size:12.5px; line-height:1.5;
  opacity:0; animation: ldBubIn .4s ease forwards;
}
.ld-bub.user{ align-self:flex-end; background:linear-gradient(135deg, rgba(124,58,237,.5), rgba(236,72,153,.4)); border-bottom-right-radius:4px; }
.ld-bub.bot{ align-self:flex-start; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-bottom-left-radius:4px; }
.ld-bub:nth-child(1){ animation-delay:.4s } .ld-bub:nth-child(2){ animation-delay:1.1s } .ld-bub:nth-child(3){ animation-delay:1.8s } .ld-bub:nth-child(4){ animation-delay:2.5s }
@keyframes ldBubIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.ld-typing{ display:flex; gap:4px; padding:12px 16px !important; }
.ld-typing i{ width:6px; height:6px; border-radius:50%; background:#9ca3af; animation: ldDot 1.2s ease-in-out infinite; }
.ld-typing i:nth-child(2){ animation-delay:.18s } .ld-typing i:nth-child(3){ animation-delay:.36s }
@keyframes ldDot{ 0%,60%,100%{ transform:none; opacity:.4 } 30%{ transform:translateY(-5px); opacity:1 } }
.ld-win-tiles{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ld-tile{
  display:flex; align-items:center; justify-content:center; font-size:30px;
  border-radius:12px; aspect-ratio:1; animation: ldTilePop .5s ease backwards;
}
.ld-tile.t1{ background:linear-gradient(135deg,#7C3AED55,#EC489944); animation-delay:2.9s }
.ld-tile.t2{ background:linear-gradient(135deg,#0EA5E955,#7C3AED44); animation-delay:3.1s }
.ld-tile.t3{ background:linear-gradient(135deg,#F59E0B55,#EF444444); animation-delay:3.3s }
.ld-tile.t4{ background:linear-gradient(135deg,#10B98155,#0EA5E944); animation-delay:3.5s }
@keyframes ldTilePop{ from{ opacity:0; transform:scale(.6) } to{ opacity:1; transform:scale(1) } }
@media (max-width:620px){ .ld-win-tiles{ display:none } }

.ld-agents{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:-10px 0 30px; }
.ld-agents span{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; font-size:26px; border-radius:50%;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  animation: ldBob 3.4s ease-in-out infinite;
}
.ld-agents span:nth-child(2n){ animation-delay:-.9s } .ld-agents span:nth-child(3n){ animation-delay:-1.7s } .ld-agents span:nth-child(5n){ animation-delay:-2.4s }
@keyframes ldBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

.ld-final{
  position:relative; z-index:2; text-align:center; padding:80px 24px 90px; overflow:hidden;
}
.ld-final::before{
  content:''; position:absolute; inset:auto 0 -60%; height:160%;
  background: radial-gradient(ellipse at center bottom, rgba(124,58,237,.35), transparent 65%);
  pointer-events:none;
}
.ld-final h2{ position:relative; font-size: clamp(30px, 5vw, 52px); font-weight:800; margin:0 0 10px; }
.ld-final p{ position:relative; color:#b9bdcc; margin:0 0 28px; font-size:16px; }
.ld-btn-xl{ position:relative; padding:18px 44px; font-size:18px; }

/* --- popup v2: richer animations --- */
.auth-gate.ag-popup{ animation: agBackdropIn .32s ease; }
@keyframes agBackdropIn{ from{ opacity:0 } to{ opacity:1 } }

/* flowing gradient glow around the card */
.auth-gate.ag-popup .auth-gate-card::before{
  content:''; position:absolute; inset:-3px; z-index:-1; border-radius:28px;
  background: linear-gradient(120deg, #7C3AED, #EC4899, #F59E0B, #0EA5E9, #7C3AED);
  background-size: 300% 300%;
  animation: agBorderFlow 6s linear infinite;
  filter: blur(9px); opacity:.55;
}
@keyframes agBorderFlow{ 0%{ background-position:0% 50% } 100%{ background-position:300% 50% } }

/* staggered entrance of everything inside the card */
.auth-gate.ag-popup .auth-gate-card > *{ animation: agItemIn .5s cubic-bezier(.2,.8,.3,1.1) backwards; }
.auth-gate.ag-popup .auth-gate-card > *:nth-child(2){ animation-delay:.05s }
.auth-gate.ag-popup .auth-gate-card > *:nth-child(3){ animation-delay:.10s }
.auth-gate.ag-popup .auth-gate-card > *:nth-child(4){ animation-delay:.15s }
.auth-gate.ag-popup .auth-gate-card > *:nth-child(5){ animation-delay:.20s }
.auth-gate.ag-popup .auth-gate-card > *:nth-child(6){ animation-delay:.25s }
.auth-gate.ag-popup .auth-gate-card > *:nth-child(7){ animation-delay:.30s }
.auth-gate.ag-popup .auth-gate-card > *:nth-child(8){ animation-delay:.35s }
@keyframes agItemIn{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

/* logo pops in, then floats gently forever */
.auth-gate.ag-popup .ag-logo svg{
  animation: agLogoPop .55s cubic-bezier(.2,.9,.3,1.4), agLogoFloat 3.6s ease-in-out .6s infinite alternate;
}
@keyframes agLogoPop{ from{ transform:scale(.4) rotate(-14deg); opacity:0 } to{ transform:scale(1) rotate(0); opacity:1 } }
@keyframes agLogoFloat{ from{ transform:translateY(0) } to{ transform:translateY(-7px) } }

/* inputs glow when focused */
.auth-gate .ag-form input:focus{
  border-color:#EC4899 !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,.22), 0 0 18px rgba(124,58,237,.25);
  transition: box-shadow .2s ease, border-color .2s ease;
}
/* submit button lifts + glows on hover */
.auth-gate .ag-submit{ transition: transform .15s ease, box-shadow .15s ease; }
.auth-gate .ag-submit:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(236,72,153,.4); }
/* error message shakes */
.auth-gate .ag-msg.error.show{ animation: agShake .4s ease; }
@keyframes agShake{ 0%,100%{ transform:none } 25%{ transform:translateX(-7px) } 50%{ transform:translateX(6px) } 75%{ transform:translateX(-3px) } }
/* close button spins on hover */
.ag-close{ transition: transform .25s ease, border-color .15s ease, color .15s ease; }
.ag-close:hover{ transform: rotate(90deg); }

/* --- landing v5: stars, aurora, unlimited strip, entrance, tilt --- */
.ld-stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 60px, #ffffffcc, transparent),
    radial-gradient(1px 1px at 160px 130px, #ffffff99, transparent),
    radial-gradient(2px 2px at 300px 40px, #4FC3F7cc, transparent),
    radial-gradient(1px 1px at 420px 200px, #ffffff88, transparent),
    radial-gradient(1.5px 1.5px at 540px 90px, #EC489988, transparent),
    radial-gradient(1px 1px at 640px 160px, #ffffffaa, transparent),
    radial-gradient(1.5px 1.5px at 90px 250px, #ffffff77, transparent),
    radial-gradient(2px 2px at 240px 310px, #4FC3F799, transparent),
    radial-gradient(1px 1px at 500px 330px, #ffffff99, transparent);
  background-size: 700px 380px;
  animation: ldTwinkle 4.5s ease-in-out infinite alternate;
}
@keyframes ldTwinkle{ from{ opacity:.35 } to{ opacity:.9 } }
.ld-aurora{
  position:fixed; top:-38%; left:50%; width:1200px; height:1200px; z-index:0;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(124,58,237,.16) 60deg, rgba(14,165,233,.14) 130deg, transparent 200deg, rgba(236,72,153,.13) 290deg, transparent 360deg);
  border-radius:50%; filter: blur(50px); pointer-events:none;
  animation: ldAurora 22s linear infinite;
}
@keyframes ldAurora{ from{ transform:translateX(-50%) rotate(0deg) } to{ transform:translateX(-50%) rotate(360deg) } }

.ld-unlimited{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.ld-unlimited span{
  font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:999px;
  background: rgba(79,195,247,.10); border:1px solid rgba(79,195,247,.4); color:#aee3ff;
  animation: ldBob 3s ease-in-out infinite;
}
.ld-unlimited span:nth-child(2){ animation-delay:-.6s } .ld-unlimited span:nth-child(3){ animation-delay:-1.2s }
.ld-unlimited span:nth-child(4){ animation-delay:-1.8s } .ld-unlimited span:nth-child(5){ animation-delay:-2.4s }
.ld-unl-hot{
  background: linear-gradient(90deg, rgba(236,72,153,.28), rgba(245,158,11,.24)) !important;
  border-color: rgba(245,158,11,.6) !important; color:#ffd9a8 !important;
  animation: ldBob 3s ease-in-out infinite, ldAnnPulse 1.8s ease-in-out infinite !important;
}

/* hero entrance cascade on load */
.ld-hero > *{ animation: agItemIn .65s cubic-bezier(.2,.8,.3,1.1) backwards; }
.ld-hero > *:nth-child(2){ animation-delay:.12s } .ld-hero > *:nth-child(3){ animation-delay:.24s }
.ld-hero > *:nth-child(4){ animation-delay:.36s } .ld-hero > *:nth-child(5){ animation-delay:.48s }
.ld-hero > *:nth-child(6){ animation-delay:.60s } .ld-hero > *:nth-child(7){ animation-delay:.72s }
.ld-hero > *:nth-child(8){ animation-delay:.84s }

/* 3D tilt on the preview window (JS-driven) */
.ld-window.ld-tilting{ animation-play-state: paused; transition: transform .08s linear; }

/* language selector */
.ld-lang{
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  background: rgba(255,255,255,.07); color:#f3f4f6;
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:9px 14px;
  outline:none; transition: border-color .15s;
}
.ld-lang:hover{ border-color:#EC4899; }
.ld-lang option{ background:#0a0a18; color:#f3f4f6; }

/* FAQ accordion */
.ld-faq{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.ld-faq details{
  background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  border-radius:16px; padding:0 20px; overflow:hidden; transition: border-color .2s;
}
.ld-faq details[open]{ border-color: rgba(124,58,237,.5); box-shadow: 0 10px 34px rgba(124,58,237,.15); }
.ld-faq summary{
  cursor:pointer; list-style:none; padding:17px 0; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ld-faq summary::-webkit-details-marker{ display:none; }
.ld-faq summary::after{
  content:'+'; font-size:22px; font-weight:400; color:#4FC3F7;
  transition: transform .25s ease; flex:none;
}
.ld-faq details[open] summary::after{ transform: rotate(45deg); }
.ld-faq p{ margin:0 0 18px; font-size:13.5px; line-height:1.7; color:#aab0c0; animation: agItemIn .3s ease; }

/* reverse marquee */
.ld-rev{ margin:10px 0 0; }
.ld-rev .ld-marquee-track{ animation-direction: reverse; }

/* --- ⚡ SPLASH loading screen (same animation language as the popup) --- */
.splash{
  position: fixed; inset:0; z-index:100010;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:#050B18; color:#f3f4f6; font-family:'Sora', system-ui, sans-serif;
  transition: opacity .55s ease, visibility .55s ease;
}
.splash.done{ opacity:0; visibility:hidden; }
.sp-logo-wrap{ position:relative; width:150px; height:150px; }
.sp-logo-wrap::before{
  content:''; position:absolute; inset:-10px; border-radius:50%;
  background: linear-gradient(120deg, #1565D8, #4FC3F7, #38BDF8, #1E88E5, #1565D8);
  background-size:300% 300%;
  animation: agBorderFlow 5s linear infinite;
  filter: blur(14px); opacity:.65;
}
.sp-logo{
  position:relative; width:150px; height:150px; border-radius:50%;
  animation: agLogoPop .7s cubic-bezier(.2,.9,.3,1.4), agLogoFloat 3.4s ease-in-out .8s infinite alternate;
}
.sp-name{
  margin:14px 0 0; font-size:26px; font-weight:800; letter-spacing:.5px;
  animation: agItemIn .6s ease .45s backwards;
}
.sp-tag{
  margin:0; font-size:11.5px; letter-spacing:3px; color:#4FC3F7;
  animation: agItemIn .6s ease .75s backwards;
}
.sp-bar{
  width:190px; height:5px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.09); margin-top:16px;
  animation: agItemIn .6s ease 1s backwards;
}
.sp-bar i{
  display:block; height:100%; width:45%; border-radius:99px;
  background: linear-gradient(90deg, #1565D8, #4FC3F7);
  animation: spLoad 1.2s ease-in-out infinite;
}
@keyframes spLoad{ 0%{ transform:translateX(-110%) } 100%{ transform:translateX(320%) } }
.sp-credit{
  position:absolute; bottom:30px; margin:0; font-size:13.5px; color:#9ca3af;
  animation: agItemIn .8s ease 1.7s backwards;
}
.sp-credit b{
  background: linear-gradient(90deg, #4FC3F7, #EC4899);
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;
}

/* --- 🔥 announcement bar: FREE for first 100 customers --- */
.ld-announce{
  position: sticky; top:0; z-index:6;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  width:100%; border:none; cursor:pointer; font-family:inherit;
  padding:11px 16px; color:#fff; font-size:14px; letter-spacing:.2px;
  background: linear-gradient(90deg, #7C3AED, #EC4899, #F59E0B, #EC4899, #7C3AED);
  background-size: 300% 100%;
  animation: ldAnnFlow 5s linear infinite;
  box-shadow: 0 4px 26px rgba(236,72,153,.45);
  overflow:hidden;
}
.ld-announce::after{
  content:''; position:absolute; top:0; left:-40%; width:30%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg); animation: ldShine 2.6s ease-in-out infinite;
}
@keyframes ldAnnFlow{ 0%{ background-position:0% 0 } 100%{ background-position:300% 0 } }
.ld-announce b{ font-weight:800; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.ld-ann-fire{ font-size:18px; animation: ldFire .9s ease-in-out infinite alternate; }
@keyframes ldFire{ from{ transform:scale(1) rotate(-6deg) } to{ transform:scale(1.35) rotate(8deg) } }
.ld-ann-cta{
  font-weight:800; padding:4px 14px; border-radius:999px;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.5);
  animation: ldAnnPulse 1.6s ease-in-out infinite;
}
@keyframes ldAnnPulse{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.45) } 50%{ transform:scale(1.06); box-shadow:0 0 0 7px rgba(255,255,255,0) } }
.ld-nav{ top:44px; } /* nav sticks below the announcement bar */
@media (max-width:640px){ .ld-ann-text{ font-size:12px } .ld-nav{ top:64px } }

/* --- Social providers --- */
.ag-or{
  display:flex; align-items:center; gap:12px;
  margin:20px 0 14px; color:#9ca3af; font-size:12px;
}
.ag-or::before, .ag-or::after{
  content:''; flex:1; height:1px; background:rgba(255,255,255,.12);
}
.ag-providers{ display:flex; flex-direction:column; gap:10px; }
.ag-provider{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:#f3f4f6; font-family:inherit; font-size:14px; font-weight:600;
  padding:11px 14px; border-radius:12px;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.ag-provider:hover{ background: rgba(255,255,255,.09); transform: translateY(-1px); }
.ag-provider:active{ transform: translateY(0); }
.ag-provider .ag-pico{ font-size:16px; line-height:1; }
.ag-github:hover{ border-color:#8b95a1; }
.ag-apple{ background:#000; border-color:#000; }
.ag-apple:hover{ background:#111; }
.ag-google-slot{ display:flex; justify-content:center; min-height:0; }
.ag-google-slot:empty{ display:none; }
/* When Google is configured, its rendered button replaces the fallback */
.ag-google-slot:not(:empty) + .ag-google-fallback{ display:none; }

/* --- Verification / secondary step --- */
.ag-step{ text-align:left; }
.ag-back{
  background:none; border:none; color:#9ca3af; cursor:pointer;
  font-family:inherit; font-size:13px; padding:0; margin-bottom:10px;
}
.ag-back:hover{ color:#f3f4f6; }
.ag-step-title{ font-size:18px; font-weight:800; margin:2px 0 6px; text-align:center; }
.ag-step-sub{ font-size:13px; color:#9ca3af; margin-bottom:16px; text-align:center; line-height:1.5; }
.ag-step-sub b{ color:#f3f4f6; }
#agStepInput{
  width:100%; box-sizing:border-box; text-align:center;
  letter-spacing:.35em; font-size:22px; font-weight:700; font-family:'JetBrains Mono', monospace;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; color:#f3f4f6; padding:14px;
}
#agStepInput.ag-text{ letter-spacing:normal; font-size:14px; font-family:inherit; text-align:left; }
#agStepInput:focus{ outline:none; border-color:#7C3AED; box-shadow:0 0 0 3px rgba(124,58,237,.25); }
.ag-linkbtn{
  display:block; width:100%; margin-top:12px; text-align:center;
  background:none; border:none; color:#EC4899; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600;
}
.ag-linkbtn:hover{ text-decoration:underline; }
.ag-linkbtn:disabled{ color:#6b7280; cursor:default; text-decoration:none; }

/* --- Owner setup panel --- */
.ag-setup-label{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; color:#9ca3af;
  text-transform:uppercase; letter-spacing:.08em; margin:14px 0 6px;
}
.ag-tag{
  text-transform:none; letter-spacing:normal; font-size:10px; font-weight:700;
  background: rgba(124,58,237,.25); color:#c4b5fd;
  padding:2px 8px; border-radius:999px;
}
#agSetup input[type=text]{
  width:100%; box-sizing:border-box; margin-bottom:8px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; color:#f3f4f6; font-family:monospace; font-size:12px; padding:10px 12px;
}
#agSetup input[type=text]:focus{ outline:none; border-color:#7C3AED; }
.ag-hr{ border:none; border-top:1px solid rgba(255,255,255,.12); margin:16px 0; }
.ag-owner{ margin-top:6px; }
.ag-import-btn{
  display:block; width:100%; box-sizing:border-box; margin-top:10px; cursor:pointer;
  text-align:center; text-transform:none; letter-spacing:normal;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#f3f4f6; font-family:inherit; font-size:14px; font-weight:700;
  padding:11px 14px; border-radius:12px;
}
.ag-import-btn:hover{ border-color:#EC4899; }
.ag-hint code{
  background: rgba(255,255,255,.08); padding:1px 5px; border-radius:5px;
  font-size:11px; color:#c4b5fd;
}

@media (max-width:480px){
  .auth-gate-card{ padding:26px 20px 22px; }
  .ag-title{ font-size:21px; }
}

/* ---- Google Sign-In button + divider ---- */
.ag-google-btn{ display:flex; justify-content:center; margin:4px 0 6px; }
.ag-or{ display:flex; align-items:center; gap:12px; margin:14px 0 10px; color:var(--muted,#9ca3af); font-size:12px; }
.ag-or::before, .ag-or::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.14); }

/* (v15 landing overrides removed — they fought the original design and
    dulled it. The original .ld-* styles above already look great.) */

/* ============================================================
   ✨ UI ENHANCEMENT LAYER (v13) — DISABLED (UI reverted to original)
   ============================================================ */
@media (max-width:0px){

  /* ---- Scroll-reveal (elements get .rv from script.js) ---- */
  .rv{ opacity:0; transform:translateY(20px) scale(.97); }
  .rv-in{
    opacity:1; transform:none;
    transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
  }

  /* ---- Cards: lift + glow + icon pop ---- */
  .tool-card{
    transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
    will-change:transform;
  }
  .tool-card:hover{
    box-shadow:0 18px 44px rgba(124,58,237,.28), 0 4px 14px rgba(0,0,0,.35);
    border-color:rgba(124,58,237,.55);
  }
  .tool-card:hover .tool-icon{ animation:bcIconPop .45s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes bcIconPop{
    0%{ transform:scale(1); }
    55%{ transform:scale(1.28) rotate(-8deg); }
    100%{ transform:scale(1.12); }
  }
  .prem-card, .mk-card{ transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; }
  .prem-card:hover, .mk-card:hover{ transform:translateY(-5px); box-shadow:0 16px 38px rgba(236,72,153,.22); }

  /* ---- Buttons: lift, squash, shine sweep ---- */
  .btn, .ag-submit, .mode-btn, .ld-btn{
    transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
  }
  .btn:hover, .ag-submit:hover{ transform:translateY(-2px); filter:brightness(1.09); }
  .btn:active, .ag-submit:active, .ld-btn:active, .tool-card:active{ transform:scale(.96); }
  .btn.primary, .ag-submit{ position:relative; overflow:hidden; }
  .btn.primary::after, .ag-submit::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
    transform:translateX(-130%); transition:transform .55s ease;
  }
  .btn.primary:hover::after, .ag-submit:hover::after{ transform:translateX(130%); }

  /* ---- Animated gradient headline text ---- */
  .ld-grad{ background-size:200% auto; animation:bcGradShift 7s linear infinite; }
  @keyframes bcGradShift{ to{ background-position:200% center; } }

  /* ---- Tool runner + results: entrance motion ---- */
  #toolRunner:not(.hidden){ animation:bcPanelIn .32s cubic-bezier(.22,1,.36,1) both; }
  @keyframes bcPanelIn{ from{ opacity:0; transform:translateY(16px) scale(.985); } to{ opacity:1; transform:none; } }
  .tool-result-block{ animation:bcRowIn .35s cubic-bezier(.22,1,.36,1) both; }
  .tool-result-block:nth-child(2){ animation-delay:.05s; }
  .tool-result-block:nth-child(3){ animation-delay:.10s; }
  .tool-result-block:nth-child(4){ animation-delay:.15s; }
  .tool-result-block:nth-child(5){ animation-delay:.20s; }
  @keyframes bcRowIn{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:none; } }

  /* ---- Palette swatches: grow on hover ---- */
  .palette-swatch{ transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
  .palette-swatch:hover{ transform:scale(1.08); z-index:2; }

  /* ---- Header stats + user chip: subtle life ---- */
  .stat{ transition:transform .2s ease; }
  .stat:hover{ transform:translateY(-2px); }
  .user-chip{ transition:box-shadow .25s ease; }
  .user-chip:hover{ box-shadow:0 0 0 2px rgba(124,58,237,.45); }

  /* ---- Leaderboard rows slide in ---- */
  .lb-row{ transition:transform .2s ease, background .2s ease; }
  .lb-row:hover{ transform:translateX(4px); }
}

/* Visible keyboard focus everywhere (accessibility — always on) */
:focus-visible{ outline:2px solid #A78BFA; outline-offset:2px; border-radius:8px; }

/* ============================================================
   💎 PREMIUM GLASSMORPHIC TITLE BAR + FEATURE CHIPS
   ============================================================ */
.topbar{
  backdrop-filter:blur(28px) !important;
  -webkit-backdrop-filter:blur(28px) !important;
  background:rgba(5,7,11,.62) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
/* Chip rail (injected into header) */
#chipRail{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bc-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:9px; cursor:pointer;
  font:600 11px 'JetBrains Mono', ui-monospace, monospace; letter-spacing:.02em;
  color:#cbd5e1; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  white-space:nowrap; user-select:none;
}
.bc-chip:hover{ transform:translateY(-1px); background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.18); }
.bc-chip:active{ transform:scale(.95); }
.bc-chip .bc-ico{ font-size:13px; line-height:1; }
.bc-chip.on{ color:#67e8f9; background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.35); box-shadow:0 0 14px rgba(34,211,238,.2); }
.bc-chip.metric{ color:#c4b5fd; background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.28); cursor:default; }
.bc-chip.metric:hover{ transform:none; }
.bc-chip .bc-dot{ width:7px; height:7px; border-radius:50%; background:#22d3ee; box-shadow:0 0 8px #22d3ee; }
@media (prefers-reduced-motion: no-preference){ .bc-chip .bc-dot{ animation:umpBlink 1.4s steps(2) infinite; } }
/* small dropdown for chips */
.bc-pop{
  position:fixed; z-index:10000; min-width:180px;
  background:rgba(11,15,25,.95); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.bc-pop button{
  display:flex; width:100%; align-items:center; gap:8px; text-align:left;
  background:none; border:none; color:#cbd5e1; cursor:pointer;
  padding:9px 11px; border-radius:8px; font:500 13px system-ui;
}
.bc-pop button:hover{ background:rgba(255,255,255,.08); color:#fff; }
@media (max-width:820px){ #chipRail .bc-chip .bc-label{ display:none; } }

/* ============================================================
   🔀 PART 3 — Visual State Machine modes
   ============================================================ */
#uiModePill{
  position:fixed; top:10px; left:50%; transform:translateX(-50%);
  z-index:9999; border:none; cursor:pointer; border-radius:999px;
  padding:6px 16px; font:600 12px system-ui; color:#fff; letter-spacing:.02em;
  backdrop-filter:blur(10px); transition:background .5s ease, box-shadow .5s ease, transform .2s ease;
  display:flex; align-items:center; gap:8px;
}
#uiModePill:hover{ transform:translateX(-50%) translateY(1px) scale(1.04); }
#uiModePill .ump-dot{ width:8px; height:8px; border-radius:50%; }
.ump-standard{ background:linear-gradient(90deg, rgba(124,58,237,.85), rgba(236,72,153,.85)); box-shadow:0 6px 20px rgba(124,58,237,.4); }
.ump-standard .ump-dot{ background:#c4b5fd; box-shadow:0 0 8px #c4b5fd; }
.ump-pro{ background:linear-gradient(90deg, rgba(16,185,129,.9), rgba(20,184,166,.9)); box-shadow:0 6px 20px rgba(16,185,129,.45); font-family:'JetBrains Mono',monospace; }
.ump-pro .ump-dot{ background:#34d399; box-shadow:0 0 10px #34d399; animation:umpBlink 1.1s steps(2) infinite; }
@keyframes umpBlink{ 50%{ opacity:.3; } }

/* Developer Pro Mode — matrix green accent + faint grid over content */
@media (prefers-reduced-motion: no-preference){
  html[data-uimode="pro"]{ --mood-a:#10B981; --mood-b:#14B8A6; }
}
html[data-uimode="pro"] .main::before,
html[data-uimode="pro"] #mainContent::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(16,185,129,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(16,185,129,.045) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 50% 40%, #000 40%, transparent 85%);
}
html[data-uimode="pro"] .tool-card:hover,
html[data-uimode="pro"] .msg.bot .bubble{
  border-color:rgba(16,185,129,.5) !important;
}
html[data-uimode="pro"] pre, html[data-uimode="pro"] code{
  border-color:rgba(16,185,129,.35) !important;
}

/* ---- 🎨 Contextual mood ribbon (top of app) ---- */
:root{ --mood-a:#7C3AED; --mood-b:#EC4899; }
#moodRibbon{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; pointer-events:none;
  background:linear-gradient(90deg, var(--mood-a), var(--mood-b), var(--mood-a));
  background-size:200% 100%;
  transition:background .6s ease;
}
@media (prefers-reduced-motion: no-preference){
  #moodRibbon{ animation:moodFlow 5s linear infinite; }
  @keyframes moodFlow{ to{ background-position:200% 0; } }
}
/* Mood-tinted glow on the AI core so the whole app feels connected */
#aiCoreHolder{ filter:drop-shadow(0 8px 24px color-mix(in srgb, var(--mood-a) 55%, transparent)); }

/* ---- 🧠 Quantum AI Core (floating brain) ---- */
#aiCoreHolder{
  filter:drop-shadow(0 8px 24px rgba(124,58,237,.45));
}
#aiCoreHolder::before{
  content:''; position:absolute; inset:-6px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(124,58,237,.18), transparent 70%);
  animation:coreBreath 3.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: no-preference){
  @keyframes coreBreath{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.15); opacity:1; } }
}
@media (max-width:600px){ #aiCoreHolder{ width:74px; height:74px; right:12px; bottom:12px; } #aiCoreHolder canvas{ width:74px; height:74px; } }

/* ============================================================
   💜 HEART-TOUCH PASS (v14) — chat, markdown, hero polish
   ============================================================ */

/* (chat bubble cosmetic overrides removed — original bubble style restored) */

/* ---- Markdown inside answers (kept — this is the chat formatting fix) ---- */
.bubble .md-h1, .ag-msg-bubble .md-h1, .wrc-content .md-h1{ display:block; font-size:1.25em; margin:10px 0 4px; background:linear-gradient(90deg,#A78BFA,#F472B6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bubble .md-h2, .ag-msg-bubble .md-h2, .wrc-content .md-h2{ display:block; font-size:1.15em; margin:9px 0 3px; color:#C4B5FD; }
.bubble .md-h3, .ag-msg-bubble .md-h3, .wrc-content .md-h3{ display:block; font-size:1.05em; margin:8px 0 2px; color:#A5B4FC; }
.md-li{ display:block; padding-left:14px; margin:2px 0; }
.md-hr{ border:none; border-top:1px solid rgba(255,255,255,.15); margin:10px 0; }
.bubble pre, .ag-msg-bubble pre{
  background:rgba(0,0,0,.45); border:1px solid rgba(124,58,237,.3);
  border-radius:10px; padding:12px 14px; overflow-x:auto;
  font-family:'JetBrains Mono', monospace; font-size:12.5px; line-height:1.55;
  margin:8px 0;
}
.bubble code, .ag-msg-bubble code{
  background:rgba(124,58,237,.18); border-radius:5px; padding:1px 6px;
  font-family:'JetBrains Mono', monospace; font-size:.9em; color:#DDD6FE;
}
.bubble a, .ag-msg-bubble a{ color:#A78BFA; text-decoration:underline; text-underline-offset:2px; }

/* ---- 💭 Collapsed "Thinking" note ---- */
.md-think{
  margin:0 0 10px; border:1px dashed rgba(167,139,250,.4);
  border-radius:10px; background:rgba(124,58,237,.08);
  font-size:12px;
}
.md-think summary{
  cursor:pointer; padding:6px 12px; color:#A78BFA; font-weight:600;
  list-style:none; user-select:none;
}
.md-think summary::-webkit-details-marker{ display:none; }
.md-think summary:hover{ color:#C4B5FD; }
.md-think > div{
  padding:4px 12px 10px; color:rgba(221,214,254,.75);
  line-height:1.6; max-height:220px; overflow-y:auto;
}

/* (landing hero glow removed — original landing restored) */

/* ---- 💳 Paywall modal ---- */
#bcPaywall{ position:fixed; inset:0; z-index:100001; display:flex; align-items:center; justify-content:center;
  background:rgba(3,4,8,.72); backdrop-filter:blur(6px); padding:20px; }
#bcPaywall .pw-card{ position:relative; width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  background:linear-gradient(180deg,#12122a,#0b0b18); border:1px solid var(--glass-border);
  border-radius:20px; padding:28px 26px; box-shadow:0 40px 90px rgba(0,0,0,.6); text-align:center; }
#bcPaywall .pw-x{ position:absolute; top:14px; right:16px; background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; }
#bcPaywall .pw-badge{ display:inline-block; background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.35);
  color:#fbbf24; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:12px; }
#bcPaywall h2{ font-size:24px; font-weight:800; margin:0 0 6px;
  background:linear-gradient(135deg,#fff,#c4b5fd 60%,#f9a8d4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#bcPaywall .pw-sub{ color:var(--muted); font-size:13.5px; line-height:1.6; margin:0 0 18px; }
#bcPaywall .pw-plans{ display:flex; gap:12px; justify-content:center; margin-bottom:20px; }
#bcPaywall .pw-plan{ flex:1; max-width:180px; background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
  border-radius:14px; padding:14px; position:relative; }
#bcPaywall .pw-plan.best{ border-color:rgba(124,58,237,.5); box-shadow:0 0 22px rgba(124,58,237,.25); }
#bcPaywall .pw-plan b{ display:block; font-size:26px; margin:2px 0; }
#bcPaywall .pw-per{ font-size:12px; color:var(--muted); }
#bcPaywall .pw-tag{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#7C3AED,#EC4899);
  color:#fff; font-size:10px; font-weight:700; padding:2px 10px; border-radius:999px; white-space:nowrap; }
#bcPaywall .pw-pay{ display:flex; gap:14px; flex-wrap:wrap; }
#bcPaywall .pw-upi, #bcPaywall .pw-card2{ flex:1; min-width:190px; background:rgba(255,255,255,.03);
  border:1px solid var(--glass-border); border-radius:14px; padding:16px; }
#bcPaywall h3{ font-size:14px; margin:0 0 10px; color:#c4b5fd; }
#bcPaywall .pw-qr{ border-radius:10px; background:#fff; padding:6px; }
#bcPaywall .pw-upi p, #bcPaywall .pw-card2 p{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:10px 0; }
#bcPaywall .pw-btn{ display:inline-block; margin-top:6px; padding:9px 16px; border-radius:10px; font-size:13px; font-weight:700;
  text-decoration:none; color:#fff; background:rgba(255,255,255,.08); border:1px solid var(--glass-border); }
#bcPaywall .pw-btn.primary{ background:linear-gradient(135deg,#7C3AED,#EC4899); border:none; }
#bcPaywall .pw-btn:hover{ filter:brightness(1.12); }
#bcPaywall .pw-foot{ font-size:11.5px; color:var(--muted); line-height:1.6; margin:18px 0 0; }
@media(max-width:520px){ #bcPaywall .pw-plans, #bcPaywall .pw-pay{ flex-direction:column; } }

/* ---- 📌 Pin-to-memory button + 📖 progressive disclosure (real features) ---- */
.msg{ position:relative; }
.msg-pin{ position:absolute; top:6px; right:8px; background:none; border:none; cursor:pointer;
  opacity:0; transition:opacity .2s, transform .15s; font-size:13px; line-height:1; }
.msg:hover .msg-pin{ opacity:.55; }
.msg-pin:hover{ opacity:1; transform:scale(1.2); }
.msg-pin.pinned{ opacity:1; filter:drop-shadow(0 0 5px #f59e0b); }
.bubble.bc-clamp{ max-height:460px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 82%, transparent);
  mask-image:linear-gradient(#000 82%, transparent); }
.bubble.bc-clamp.bc-open{ max-height:none; -webkit-mask-image:none; mask-image:none; }
.bc-showmore{ display:inline-block; margin:6px 0 2px; background:rgba(124,58,237,.15);
  border:1px solid rgba(124,58,237,.32); color:#c4b5fd; border-radius:8px;
  padding:5px 14px; cursor:pointer; font-size:12px; font-weight:600; }
.bc-showmore:hover{ background:rgba(124,58,237,.28); color:#fff; }

/* ============================================================
   📱/🖥 VIEW CHOOSER (shown after login) + VIEW MODES
   ============================================================ */
.vm-overlay{
  position:fixed; inset:0; z-index:12000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,6,20,.74); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .25s ease; padding:20px;
}
/* CRITICAL: display:flex above would override the hidden attribute, leaving an
   invisible full-screen layer that swallows every click. Never let that happen. */
.vm-overlay[hidden]{display:none !important; pointer-events:none !important}
.vm-overlay.show{opacity:1}
.vm-card{
  width:100%; max-width:560px; text-align:center;
  background:linear-gradient(160deg, rgba(30,25,60,.97), rgba(16,14,34,.97));
  border:1px solid rgba(255,255,255,.14); border-radius:24px;
  padding:36px 30px; box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 60px rgba(124,58,237,.25);
  animation:vmPop .35s cubic-bezier(.2,.8,.3,1.15);
}
@keyframes vmPop{from{opacity:0; transform:scale(.88) translateY(16px)} to{opacity:1; transform:none}}
.vm-card h3{margin:0 0 8px; font-size:24px; font-weight:800}
.vm-card p{margin:0 0 24px; color:#b9bdcc; font-size:14px; line-height:1.5}
.vm-btns{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.vm-btn{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:26px 16px 20px; cursor:pointer; color:var(--text, #fff);
  background:rgba(255,255,255,.05); border:2px solid rgba(255,255,255,.12);
  border-radius:18px; font-family:inherit; transition:all .2s ease;
}
.vm-btn:hover{transform:translateY(-4px); border-color:#7C3AED; background:rgba(124,58,237,.16); box-shadow:0 14px 34px rgba(124,58,237,.3)}
.vm-btn .vm-ico{font-size:44px; line-height:1}
.vm-btn b{font-size:16px}
.vm-btn small{font-size:11.5px; color:#9aa0b4; line-height:1.4}
.vm-btn.vm-suggest{border-color:#7C3AED; background:rgba(124,58,237,.14)}
.vm-btn.vm-suggest::after{
  content:'✓ Recommended for this device';
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:10px; font-weight:700; letter-spacing:.04em;
  background:linear-gradient(135deg,#7C3AED,#EC4899); color:#fff;
  padding:3px 10px; border-radius:999px;
}
@media(max-width:520px){ .vm-btns{grid-template-columns:1fr} .vm-card{padding:28px 20px} }

/* --- 📱 Mobile view: touch-first single-column UI on ANY screen size --- */
/* compact app-style sticky top bar: ☰ + brand + profile in ONE row */
body.view-mobile .topbar{
  padding:8px 10px; flex-direction:row; align-items:center; gap:6px; flex-wrap:nowrap;
  position:sticky; top:0; z-index:1000;
  background:rgba(14,12,28,.98) !important;
  border-bottom:1px solid rgba(255,255,255,.1);
  height: 60px; box-sizing: border-box;
}
body.view-mobile .brand{gap:8px; flex:1; min-width:0}
body.view-mobile .brand h1{font-size:clamp(15px, 4.5vw, 18px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.view-mobile .brand .tag{display:none}
body.view-mobile .hamburger-btn{width:42px; height:42px; margin-right:2px; flex-shrink:0}
body.view-mobile .theme-toggle{width:40px; height:40px; font-size:16px; flex-shrink:0}
body.view-mobile .header-right{gap:4px; flex-wrap:nowrap; flex-shrink:0}
body.view-mobile .container{padding:16px 12px 40px; max-width:100%; margin-left:auto; margin-right:auto}
body.view-mobile .panel-head h2{font-size:clamp(20px, 6vw, 26px)}
body.view-mobile .panel-head p{font-size:13px; line-height:1.4}
body.view-mobile .hero-title{font-size:clamp(24px, 7vw, 32px) !important}
body.view-mobile .hero-card{padding:24px 20px !important; margin-bottom:16px}
body.view-mobile .hero-actions{flex-direction:column; gap:10px}
body.view-mobile .hero-actions .btn{width:100%; justify-content:center}

body.view-mobile .grid.two,
body.view-mobile .split-preview,
body.view-mobile .calls-grid, body.view-mobile .cal-layout, body.view-mobile .cal-tools,
body.view-mobile .calls-layout, body.view-mobile .agent-gallery,
body.view-mobile .premium-grid, body.view-mobile .games-grid, body.view-mobile .tools-grid,
body.view-mobile .quick-grid, body.view-mobile .dash-stats,
body.view-mobile .device-grid, body.view-mobile .ws-projects, body.view-mobile .notes-board,
body.view-mobile .jwt-split, body.view-mobile .runner-grid, body.view-mobile .diff-grid,
body.view-mobile .class-stage, body.view-mobile .playground{
  grid-template-columns:1fr !important;
}

body.view-mobile .sidebar{width:88%; max-width:320px; z-index:2000}
body.view-mobile.sidebar-open .container{margin-left:auto !important}
body.view-mobile.sidebar-open .topbar{padding-left:10px !important}
body.view-mobile.sidebar-open .footer{margin-left:0 !important}
body.view-mobile .tabs-wrap{display:none !important}
body.view-mobile .mode-switcher, body.view-mobile .mode-dropdown{display:none !important}
body.view-mobile .btn{min-height:46px; font-size:15px}
body.view-mobile input, body.view-mobile select, body.view-mobile textarea{font-size:16px !important}
body.view-mobile .stats{display:none}

/* --- 📱 Mobile view PERFORMANCE & STABILITY --- */
body.view-mobile .bg-orbs, body.view-mobile .hero-orb{display:none !important}
body.view-mobile *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition-duration: 0.1s !important; /* snappier feel */
}
body.view-mobile .auth-gate.ag-popup .auth-gate-card::before{animation:none !important; filter:none !important; opacity:.3}
body.view-mobile .ld-window, body.view-mobile .ld-agents span, body.view-mobile .ld-tile{animation:none !important; transform:none !important}
body.view-mobile .ld-bub{animation-iteration-count:1}
body.view-mobile .sidebar, body.view-mobile .card, body.view-mobile .panel, body.view-mobile .glass{
  background-color:rgba(18,16,36,0.98) !important;
}

/* --- 📱 App-style bottom navigation --- */
.vm-bottomnav{display:none}
body.view-mobile .vm-bottomnav{
  display:flex; position:fixed; left:0; right:0; bottom:0; z-index:900;
  background:rgba(13,11,26,1);
  border-top:1px solid rgba(255,255,255,.15);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -10px 30px rgba(0,0,0,.6);
}
.vm-nb{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:#9aa0b4; font-family:inherit;
  font-size:22px; line-height:1; padding:6px 0; cursor:pointer; border-radius:12px;
}
.vm-nb span{font-size:10px; font-weight:700; letter-spacing:.02em}
.vm-nb.active{color:#c4b5fd}

body.view-mobile .container{padding-bottom:100px !important}
body.view-mobile .footer{padding-bottom:100px}
body.view-mobile .card, body.view-mobile .agent-card, body.view-mobile .game-card,
body.view-mobile .tool-card, body.view-mobile .ws-project-card{padding:16px; border-radius:16px}

/* --- 📱 Landing & Home adjustments --- */
body.view-mobile .ld-hero{padding:40px 20px 30px}
body.view-mobile .ld-hero h1{font-size:clamp(32px, 10vw, 44px); line-height:1.1; margin-bottom:16px}
body.view-mobile .ld-btn{padding:16px 20px; font-size:16px}
body.view-mobile .quick-grid, body.view-mobile .dash-stats{grid-template-columns:1fr 1fr !important; gap:12px}

/* Quality Pass */
body.view-mobile{overflow-x:hidden; -webkit-tap-highlight-color:transparent}
body.view-mobile .brand .logo img{width:32px; height:32px}
body.view-mobile .brand-name{font-size:17px; font-weight:700; max-width:50vw}
body.view-mobile .user-chip{padding:4px; background:rgba(255,255,255,0.06); border-radius:30px}
body.view-mobile .user-chip img{width:30px; height:30px}
body.view-mobile .user-name, body.view-mobile .user-id{display:none}

/* Chooser Buttons */
.vm-btn-auto{
  grid-column: 1 / span 2;
  margin-top: 8px;
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.3);
}

@media(max-width:520px){ 
  .vm-btns{grid-template-columns:1fr} 
  .vm-card{padding:28px 20px} 
  .vm-btn-auto{grid-column: auto}
}


/* --- 🖥 PC view: keep the desktop experience --- */
body.view-pc .container{max-width:none}
@media(max-width:768px){
  /* PC view on a small screen renders at a 1280px virtual viewport, so
     desktop rules already apply; nothing to override here. */
  body.view-pc .stats{display:flex}
}


/* ══════════════════════════════════════════════════════════════════════════
   ✨ PREMIUM LAYER v1  —  appended 2026-07
   Loaded last so it refines the existing design system without touching a
   single earlier rule. Nothing here changes layout or geometry that JS depends
   on; it only upgrades colour, depth, type and motion.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Refined palette — deeper, less muddy base; accents keep their hues so
     every inline style="--sb-c:#xxx" in index.html still matches. */
  --bg-0: #050510;
  --bg-1: #0a0a18;
  --bg-2: #101024;
  --surface-1: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.075);
  --surface-3: rgba(255,255,255,.11);
  --hairline: rgba(255,255,255,.10);
  --hairline-strong: rgba(255,255,255,.18);
  --text: #f4f4f7;
  --text-dim: #b9bbc6;
  --muted: #8b8e9e;

  /* Elevation ramp */
  --e1: 0 1px 2px rgba(0,0,0,.30);
  --e2: 0 4px 16px rgba(0,0,0,.34);
  --e3: 0 12px 34px rgba(0,0,0,.42);
  --e4: 0 28px 70px rgba(0,0,0,.55);
  --glow-accent: 0 0 0 1px rgba(124,58,237,.35), 0 12px 40px rgba(124,58,237,.28);

  --grad-brand: linear-gradient(135deg, #7C3AED 0%, #A855F7 45%, #EC4899 100%);
  --grad-text: linear-gradient(135deg,#ffffff 20%,#d8ccff 55%,#ffc9e6 100%);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── Typography scale ─────────────────────────────────────────────────── */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1,"cv11" 1;
  letter-spacing:-.005em;
  line-height:1.55;
}
.panel-head h2{
  font-size:clamp(26px,3.4vw,38px);
  line-height:1.1;
  letter-spacing:-.03em;
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.panel-head p{ font-size:15px; color:var(--text-dim); max-width:68ch; line-height:1.6 }
.card-title{ letter-spacing:-.015em }

/* ── Surfaces: real glass, layered highlight, hairline top edge ────────── */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(12,12,26,.55);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:var(--e2), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(20px) saturate(1.35);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);
  transition:transform .38s var(--ease-out), box-shadow .38s var(--ease-out),
             border-color .28s ease, background .28s ease;
}
.card:hover{
  border-color:var(--hairline-strong);
  box-shadow:var(--e3), inset 0 1px 0 rgba(255,255,255,.11);
  transform:translateY(-2px);
}
/* Soft sheen sweeping the top edge of every card */
.card{ position:relative; overflow:hidden }
.card::after{
  content:''; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 42%,transparent);
  opacity:.55;
}

/* ── Inputs: calmer default, unmistakable focus ────────────────────────── */
textarea, input[type=text], input[type=number], input[type=email],
input[type=password], input[type=search], input[type=url], select{
  background:rgba(255,255,255,.04);
  border:1px solid var(--hairline);
  color:var(--text);
  border-radius:12px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
textarea::placeholder, input::placeholder{ color:#6f7283 }
textarea:focus, input:focus, select:focus{
  outline:none;
  border-color:rgba(168,85,247,.65);
  background:rgba(255,255,255,.065);
  box-shadow:0 0 0 4px rgba(124,58,237,.16);
}
select option{ background:var(--bg-1); color:var(--text) }

/* Visible keyboard focus everywhere (a11y) without touching mouse users */
:focus-visible{ outline:2px solid rgba(168,85,247,.9); outline-offset:2px; border-radius:8px }

/* ── Buttons: crisper gradient, spring press, sheen on hover ───────────── */
.btn{
  border-radius:12px;
  font-weight:650;
  letter-spacing:-.01em;
  transition:transform .22s var(--ease-spring), box-shadow .28s var(--ease-out),
             background .22s ease, border-color .22s ease, opacity .2s ease;
}
.btn.primary{
  background:var(--grad-brand);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 20px rgba(124,58,237,.34), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.primary:hover{ box-shadow:0 12px 34px rgba(168,85,247,.46), inset 0 1px 0 rgba(255,255,255,.28) }
.btn:active:not(:disabled){ transform:translateY(1px) scale(.985) }
.btn.ghost{
  background:var(--surface-1);
  border:1px solid var(--hairline);
  backdrop-filter:blur(10px);
}
.btn.ghost:hover{ background:var(--surface-2); border-color:var(--hairline-strong) }
.btn:disabled{ opacity:.45; filter:saturate(.5) }

/* ── Sidebar: sharper hierarchy, smoother active state ─────────────────── */
.sidebar{
  background:linear-gradient(180deg, rgba(9,9,20,.94), rgba(6,6,14,.97));
  border-right:1px solid var(--hairline);
  box-shadow:var(--e4);
  backdrop-filter:blur(26px) saturate(1.3);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);
}
.sb-item{
  border-radius:12px;
  transition:background .2s ease, transform .24s var(--ease-out), color .2s ease;
}
.sb-item:hover{ transform:translateX(3px) }
.sb-item .sb-ico{ transition:transform .3s var(--ease-spring) }
.sb-item.active{
  background:linear-gradient(90deg, color-mix(in srgb, var(--sb-c, #7C3AED) 30%, transparent), transparent 88%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sb-c, #7C3AED) 34%, transparent);
}
.sb-item.active::before{ background:var(--sb-c, #7C3AED); box-shadow:0 0 14px var(--sb-c, #7C3AED) }
.sidebar-search{
  border-radius:11px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--hairline);
}
.sidebar-search:focus{ border-color:rgba(168,85,247,.6); box-shadow:0 0 0 3px rgba(124,58,237,.15) }

/* Group labels get proper eyebrow treatment */
.sb-group-label, .sidebar-content .sb-label{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; color:#6d7080;
}

/* ── Tab bar ───────────────────────────────────────────────────────────── */
.tab{
  border-radius:11px;
  transition:background .2s ease, color .2s ease, transform .2s var(--ease-out), box-shadow .2s ease;
}
.tab:hover{ transform:translateY(-1px) }
.tab.active{ box-shadow:0 6px 18px rgba(124,58,237,.3) }

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar{
  background:rgba(7,7,17,.62);
  border-bottom:1px solid var(--hairline);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
}

/* ── Panel entrance: gentler, no layout thrash ─────────────────────────── */
@keyframes pmFadeUp{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.panel.active{ animation:pmFadeUp .42s var(--ease-out) both }

/* ── Scrollbars ────────────────────────────────────────────────────────── */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14); border-radius:99px;
  border:2px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.26); background-clip:content-box }

/* ── Text selection ───────────────────────────────────────────────────── */
::selection{ background:rgba(168,85,247,.42); color:#fff }

/* ── Skeleton shimmer for loading states ──────────────────────────────── */
.pm-skel{
  background:linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%);
  background-size:400% 100%;
  animation:pmShimmer 1.35s ease-in-out infinite;
  border-radius:10px;
}
@keyframes pmShimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* ── Empty states ─────────────────────────────────────────────────────── */
.pm-empty{
  text-align:center; padding:52px 24px; color:var(--muted);
  border:1px dashed var(--hairline); border-radius:var(--radius);
  background:rgba(255,255,255,.018);
}
.pm-empty .pm-empty-ico{
  font-size:44px; display:block; margin-bottom:14px; opacity:.75;
  animation:pmBob 3.4s ease-in-out infinite;
}
.pm-empty b{ display:block; color:var(--text); font-size:16px; margin-bottom:6px; font-weight:650 }
.pm-empty p{ font-size:13.5px; max-width:44ch; margin:0 auto; line-height:1.6 }
@keyframes pmBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

/* ── Respect reduced-motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   💎 PLANS, QUOTA METER & PRICING
   ══════════════════════════════════════════════════════════════════════════ */

/* Usage meter pinned in the sidebar footer */
.q-meter{
  margin:10px 12px 6px; padding:12px 13px;
  border-radius:14px; border:1px solid var(--hairline);
  background:linear-gradient(160deg, rgba(124,58,237,.15), rgba(236,72,153,.08));
}
.q-meter-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px }
.q-plan{
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; background:var(--surface-2); color:var(--text-dim);
  border:1px solid var(--hairline);
}
.q-plan.is-paid{ background:var(--grad-brand); color:#fff; border-color:transparent }
.q-row{ display:flex; align-items:center; gap:8px; margin-top:7px; font-size:11.5px; color:var(--text-dim) }
.q-row .q-lbl{ flex:0 0 62px }
.q-row .q-val{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:650; color:var(--text) }
.q-bar{ flex:1; height:5px; border-radius:99px; background:rgba(255,255,255,.10); overflow:hidden }
.q-bar i{
  display:block; height:100%; border-radius:99px; width:0;
  background:linear-gradient(90deg,#10B981,#34d399);
  transition:width .5s var(--ease-out), background .3s ease;
}
.q-bar.warn i{ background:linear-gradient(90deg,#F59E0B,#fbbf24) }
.q-bar.full i{ background:linear-gradient(90deg,#EF4444,#f87171) }
.q-up{
  display:block; width:100%; margin-top:11px; padding:8px;
  border:0; border-radius:10px; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; color:#fff;
  background:var(--grad-brand);
  box-shadow:0 4px 14px rgba(124,58,237,.35);
  transition:transform .22s var(--ease-spring), box-shadow .25s ease;
}
.q-up:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(168,85,247,.45) }

/* Locked-feature badge on sidebar items */
.sb-item .sb-lock{ margin-left:auto; font-size:11px; opacity:.6; flex:0 0 auto }
.sb-item.is-locked .sb-name{ color:var(--text-dim) }

/* ── Pricing grid ──────────────────────────────────────────────────────── */
.pr-grid{
  display:grid; gap:18px; margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  align-items:start;
}
.pr-card{
  position:relative; padding:26px 22px 24px; border-radius:20px;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(11,11,24,.6);
  backdrop-filter:blur(18px);
  transition:transform .38s var(--ease-out), box-shadow .38s var(--ease-out), border-color .28s ease;
  display:flex; flex-direction:column;
}
.pr-card:hover{ transform:translateY(-5px); box-shadow:var(--e3); border-color:var(--hairline-strong) }
.pr-card.featured{
  border-color:rgba(168,85,247,.55);
  box-shadow:var(--glow-accent);
  transform:scale(1.025);
}
.pr-card.featured:hover{ transform:scale(1.025) translateY(-5px) }
.pr-tag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  padding:4px 14px; border-radius:99px; white-space:nowrap;
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--grad-brand); color:#fff; box-shadow:0 4px 14px rgba(124,58,237,.5);
}
.pr-name{ font-size:13px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim) }
.pr-price{ margin:12px 0 2px; font-size:36px; font-weight:800; letter-spacing:-.035em; line-height:1 }
.pr-price small{ font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0 }
.pr-note{ font-size:12px; color:var(--muted); min-height:18px }
.pr-feats{ list-style:none; margin:18px 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1 }
.pr-feats li{ font-size:13px; color:var(--text-dim); display:flex; gap:9px; align-items:flex-start; line-height:1.45 }
.pr-feats li::before{ content:'✓'; color:var(--ok); font-weight:800; flex:0 0 auto }
.pr-feats li.no{ color:#6f7283 }
.pr-feats li.no::before{ content:'✕'; color:#4b4e5c }
.pr-cta{ width:100%; justify-content:center }
.pr-card.current .pr-cta{ opacity:.6; pointer-events:none }

/* Launch / lifetime banner */
.pr-launch{
  margin-top:26px; padding:22px 24px; border-radius:20px;
  border:1px solid rgba(245,158,11,.36);
  background:linear-gradient(120deg, rgba(245,158,11,.16), rgba(236,72,153,.12) 55%, rgba(124,58,237,.14));
  display:flex; gap:20px; align-items:center; flex-wrap:wrap;
}
.pr-launch .pl-ico{ font-size:38px; flex:0 0 auto }
.pr-launch b{ font-size:17px; display:block; margin-bottom:4px; letter-spacing:-.015em }
.pr-launch p{ font-size:13px; color:var(--text-dim); margin:0; line-height:1.55 }
.pr-launch .pl-cta{ margin-left:auto }
@media(max-width:640px){ .pr-launch .pl-cta{ margin-left:0; width:100% } }

/* Billing toggle */
.pr-toggle{ display:inline-flex; padding:4px; gap:4px; border-radius:12px; background:var(--surface-1); border:1px solid var(--hairline); margin-top:18px }
.pr-toggle button{
  border:0; background:transparent; color:var(--text-dim); cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:650; padding:7px 16px; border-radius:9px;
  transition:background .2s ease, color .2s ease;
}
.pr-toggle button.on{ background:var(--grad-brand); color:#fff }
.pr-save{ font-size:11px; font-weight:700; color:var(--ok); margin-left:6px }

/* ── Upgrade / paywall modal ───────────────────────────────────────────── */
.up-backdrop{
  position:fixed; inset:0; z-index:99990; display:none;
  background:rgba(3,3,10,.74); backdrop-filter:blur(9px);
  align-items:center; justify-content:center; padding:20px;
}
.up-backdrop.open{ display:flex; animation:pmFadeUp .3s var(--ease-out) }
.up-card{
  width:100%; max-width:440px; padding:34px 30px; border-radius:22px; text-align:center;
  border:1px solid var(--hairline-strong); box-shadow:var(--e4);
  background:linear-gradient(180deg, rgba(24,18,44,.97), rgba(9,9,20,.98));
  max-height:88vh; overflow:auto;
}
.up-card .up-ico{ font-size:50px; display:block; margin-bottom:14px }
.up-card h3{ font-size:23px; font-weight:800; letter-spacing:-.025em; margin-bottom:9px }
.up-card p{ font-size:14px; color:var(--text-dim); line-height:1.6; margin-bottom:20px }
.up-card .up-btns{ display:flex; gap:10px; flex-wrap:wrap }
.up-card .up-btns .btn{ flex:1; min-width:130px; justify-content:center }
.up-reset{ font-size:11.5px; color:var(--muted); margin-top:16px }

/* ── Contact-sales form (used instead of a payment gateway) ────────────── */
.up-form{ text-align:left; margin-top:6px; display:flex; flex-direction:column; gap:11px }
.up-form label{ font-size:12px; font-weight:650; color:var(--text-dim) }
.up-form input, .up-form textarea, .up-form select{ width:100%; padding:11px 13px; font-size:13.5px }
.up-ok{
  padding:16px; border-radius:14px; text-align:center;
  background:rgba(16,185,129,.13); border:1px solid rgba(16,185,129,.4);
  color:#6ee7b7; font-size:13.5px; line-height:1.6;
}


/* ── Output rendering for the new suite tools ──────────────────────────── */
.bc-out{ max-height:min(66vh,660px); overflow:auto; padding-right:6px }
.bc-md{ font-size:14px; line-height:1.7; color:var(--text-dim) }
.bc-md h3{ font-size:18px; font-weight:750; letter-spacing:-.02em; color:var(--text); margin:20px 0 9px }
.bc-md h4{ font-size:15px; font-weight:700; color:var(--text); margin:16px 0 7px }
.bc-md h5, .bc-md h6{ font-size:13.5px; font-weight:700; color:var(--text); margin:14px 0 6px }
.bc-md h3:first-child, .bc-md h4:first-child{ margin-top:0 }
.bc-md p{ margin:0 0 12px }
.bc-md b{ color:var(--text); font-weight:650 }
.bc-md ul{ margin:0 0 14px; padding-left:20px }
.bc-md li{ margin-bottom:6px }
.bc-md li::marker{ color:var(--accent-1) }
.bc-md code{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px;
  background:rgba(255,255,255,.08); padding:2px 6px; border-radius:6px; color:#e9d5ff;
}
.bc-md hr{ border:0; border-top:1px solid var(--hairline); margin:20px 0 }
.bc-pre{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px;
  background:rgba(0,0,0,.4); border:1px solid var(--hairline);
  border-radius:12px; padding:14px 16px; overflow-x:auto; margin:0 0 14px;
  color:#e5e7eb; line-height:1.6; white-space:pre;
}
/* Markdown tables — the AI returns a lot of these */
.bc-md table{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:13px }
.bc-md th, .bc-md td{ border:1px solid var(--hairline); padding:9px 11px; text-align:left; vertical-align:top }
.bc-md th{ background:rgba(255,255,255,.06); color:var(--text); font-weight:650 }
.bc-md tr:nth-child(even) td{ background:rgba(255,255,255,.02) }


/* ══════════════════════════════════════════════════════════════════════════
   🏆 FOUNDER PROGRAMME — first 100 accounts, everything free forever
   ══════════════════════════════════════════════════════════════════════════ */

/* Sidebar meter: replaces the upgrade nag for founders */
.q-founder{
  margin-top:11px; padding:8px 10px; border-radius:10px; text-align:center;
  font-size:11.5px; font-weight:700; line-height:1.45;
  background:linear-gradient(135deg, rgba(245,158,11,.24), rgba(236,72,153,.18));
  border:1px solid rgba(245,158,11,.45); color:#fcd34d;
}
.q-plan.is-paid{ background:var(--grad-brand) }

/* Pricing-page banner */
.pr-founder{
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
  margin:22px 0 4px; padding:20px 22px; border-radius:18px;
  border:1px solid rgba(245,158,11,.42);
  background:linear-gradient(120deg, rgba(245,158,11,.15), rgba(236,72,153,.11) 60%, rgba(124,58,237,.13));
}
.pr-founder .pf-ico{ font-size:34px; flex:0 0 auto }
.pr-founder b{ display:block; font-size:16.5px; margin-bottom:4px; letter-spacing:-.015em; color:var(--text) }
.pr-founder p{ margin:0; font-size:13px; color:var(--text-dim); line-height:1.6; max-width:64ch }
.pr-founder .pf-cta{ margin-left:auto; flex:0 0 auto }

/* "You're in" — calmer, confirmatory green */
.pr-founder.is-in{
  border-color:rgba(16,185,129,.45);
  background:linear-gradient(120deg, rgba(16,185,129,.16), rgba(14,165,233,.11));
}
.pr-founder.is-in b{ color:#6ee7b7 }

/* Spots gone — neutral, not a punishment */
.pr-founder.is-closed{
  border-color:var(--hairline-strong);
  background:linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

/* Founders: the plan cards are informational, not purchasable */
.pr-card .pr-cta:disabled{ opacity:.5; cursor:default }

@media(max-width:640px){
  .pr-founder{ padding:18px }
  .pr-founder .pf-cta{ margin-left:0; width:100% }
}


/* ══════════════════════════════════════════════════════════════════════════
   ⚡ COMMAND CENTER  —  composer · agent dock · live output
   Injected at the top of the Home panel. The original Home widgets are kept
   below in a collapsible section (every id they expose is still in the DOM),
   so nothing that referenced them breaks.
   ══════════════════════════════════════════════════════════════════════════ */

.cc{ position:relative; z-index:1 }

/* ── ambient glow behind the composer ─────────────────────────────────── */
.cc-aura{
  position:absolute; inset:-60px -40px auto -40px; height:340px; z-index:-1;
  pointer-events:none; filter:blur(70px); opacity:.5;
  background:
    radial-gradient(420px 200px at 22% 40%, rgba(124,58,237,.55), transparent 70%),
    radial-gradient(380px 190px at 78% 30%, rgba(6,182,212,.42), transparent 70%),
    radial-gradient(340px 180px at 50% 85%, rgba(236,72,153,.40), transparent 70%);
  animation:ccDrift 16s ease-in-out infinite;
}
@keyframes ccDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  33%    { transform:translate3d(26px,-14px,0) scale(1.06) }
  66%    { transform:translate3d(-20px,10px,0) scale(.97) }
}

/* ── header ───────────────────────────────────────────────────────────── */
.cc-head{ text-align:center; margin-bottom:22px }
.cc-eyebrow{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
  padding:5px 14px; border-radius:99px; font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  background:rgba(255,255,255,.06); border:1px solid var(--hairline-strong);
  color:#d8ccff;
}
.cc-eyebrow .cc-dot{
  width:6px; height:6px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 8px var(--ok); animation:ccPulse 2s ease-in-out infinite;
}
@keyframes ccPulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.8)} }
.cc-title{
  font-size:clamp(28px,4.2vw,46px); font-weight:800; line-height:1.08;
  letter-spacing:-.035em; margin-bottom:9px;
  background:linear-gradient(120deg,#fff 18%,#c9b8ff 48%,#7ee7f5 74%,#ffb3dd);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  background-size:220% auto; animation:ccShine 9s linear infinite;
}
@keyframes ccShine{ to{ background-position:220% center } }
.cc-sub{ color:var(--text-dim); font-size:14.5px; max-width:58ch; margin:0 auto }

/* ── mode switch ──────────────────────────────────────────────────────── */
.cc-modes{
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  margin:20px auto 14px; padding:5px;
  background:rgba(255,255,255,.045); border:1px solid var(--hairline);
  border-radius:14px; width:fit-content; max-width:100%;
}
.cc-mode{
  display:inline-flex; align-items:center; gap:7px;
  border:0; background:transparent; color:var(--text-dim); cursor:pointer;
  font:inherit; font-size:13px; font-weight:650; padding:9px 15px; border-radius:10px;
  transition:background .22s ease, color .22s ease, transform .22s var(--ease-spring);
  white-space:nowrap;
}
.cc-mode:hover{ color:var(--text); background:rgba(255,255,255,.06) }
.cc-mode.on{
  color:#fff; transform:translateY(-1px);
  background:linear-gradient(135deg, var(--cc-c,#7C3AED), color-mix(in srgb, var(--cc-c,#7C3AED) 45%, #EC4899));
  box-shadow:0 6px 18px color-mix(in srgb, var(--cc-c,#7C3AED) 42%, transparent);
}

/* ── the composer ─────────────────────────────────────────────────────── */
.cc-composer{
  position:relative; border-radius:22px; padding:2px;
  background:linear-gradient(135deg, rgba(124,58,237,.5), rgba(6,182,212,.4) 50%, rgba(236,72,153,.5));
  transition:box-shadow .4s var(--ease-out);
}
.cc-composer.is-focus{ box-shadow:0 0 0 4px rgba(124,58,237,.18), 0 22px 60px rgba(124,58,237,.28) }
.cc-composer::before{                     /* animated border sheen while typing */
  content:''; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  background-size:280% 100%; opacity:0; transition:opacity .3s ease;
}
.cc-composer.is-typing::before{ opacity:.85; animation:ccSweep 1.6s linear infinite }
@keyframes ccSweep{ from{background-position:280% 0} to{background-position:-80% 0} }

.cc-inner{
  background:linear-gradient(180deg, rgba(14,14,30,.97), rgba(8,8,18,.99));
  border-radius:20px; padding:18px 18px 14px;
}
#ccInput{
  width:100%; min-height:96px; max-height:300px; resize:none;
  background:transparent; border:0; outline:none; padding:0; color:var(--text);
  font:inherit; font-size:16.5px; line-height:1.6;
}
#ccInput::placeholder{ color:#5f6273 }
.cc-bar{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap }
.cc-tool{
  width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--hairline); background:rgba(255,255,255,.045);
  color:var(--text-dim); cursor:pointer; font-size:15px;
  transition:background .2s, transform .22s var(--ease-spring), color .2s, border-color .2s;
}
.cc-tool:hover{ background:rgba(255,255,255,.1); color:#fff; transform:translateY(-2px); border-color:var(--hairline-strong) }
.cc-tool.on{ background:var(--grad-brand); color:#fff; border-color:transparent }
.cc-spacer{ flex:1 1 auto; min-width:8px }
.cc-count{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums }
#ccRun{
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:700; color:#fff;
  padding:11px 24px; border-radius:12px; background:var(--grad-brand);
  box-shadow:0 8px 26px rgba(124,58,237,.42), inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .22s var(--ease-spring), box-shadow .28s ease, opacity .2s;
}
#ccRun:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 14px 38px rgba(168,85,247,.5) }
#ccRun:active:not(:disabled){ transform:translateY(1px) scale(.98) }
#ccRun:disabled{ opacity:.55; cursor:progress }
#ccRun .cc-kbd{
  font-size:10.5px; font-weight:700; opacity:.8; padding:2px 6px;
  border-radius:5px; background:rgba(0,0,0,.28);
}

/* suggestion chips */
.cc-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }
.cc-chip{
  border:1px solid var(--hairline); background:rgba(255,255,255,.04);
  color:var(--text-dim); cursor:pointer; font:inherit; font-size:12.5px;
  padding:7px 13px; border-radius:99px;
  transition:background .2s, color .2s, transform .22s var(--ease-out), border-color .2s;
  animation:ccChipIn .45s var(--ease-out) both;
}
.cc-chip:hover{ background:rgba(255,255,255,.1); color:#fff; transform:translateY(-2px); border-color:var(--hairline-strong) }
@keyframes ccChipIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ── agent dock ───────────────────────────────────────────────────────── */
.cc-dock-wrap{ margin-top:30px }
.cc-dock-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.cc-dock-head h3{ font-size:15px; font-weight:750; letter-spacing:-.015em }
.cc-dock-head .cc-hint{ font-size:12px; color:var(--muted); margin-left:auto }
.cc-dock{
  display:flex; gap:11px; overflow-x:auto; padding:4px 2px 12px;
  scroll-snap-type:x proximity; scrollbar-width:thin;
}
.cc-agent{
  position:relative; flex:0 0 172px; scroll-snap-align:start; text-align:left;
  padding:14px 13px; border-radius:16px; cursor:pointer;
  border:1px solid var(--hairline); background:rgba(255,255,255,.04);
  transition:transform .32s var(--ease-out), border-color .25s, background .25s, box-shadow .32s;
  animation:ccAgentIn .5s var(--ease-out) both;
}
@keyframes ccAgentIn{ from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none} }
.cc-agent:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--a-c,#7C3AED) 55%, transparent);
  background:linear-gradient(160deg, color-mix(in srgb, var(--a-c,#7C3AED) 16%, transparent), rgba(255,255,255,.03));
  box-shadow:0 16px 40px color-mix(in srgb, var(--a-c,#7C3AED) 26%, transparent);
}
.cc-agent.on{
  border-color:var(--a-c,#7C3AED);
  background:linear-gradient(160deg, color-mix(in srgb, var(--a-c,#7C3AED) 24%, transparent), rgba(255,255,255,.04));
  box-shadow:0 0 0 1px var(--a-c,#7C3AED), 0 12px 34px color-mix(in srgb, var(--a-c,#7C3AED) 34%, transparent);
}
.cc-agent .cc-av{ font-size:24px; display:block; margin-bottom:8px }
.cc-agent .cc-an{ font-size:13.5px; font-weight:700; display:block; letter-spacing:-.01em }
.cc-agent .cc-ar{ font-size:11px; color:var(--muted); display:block; margin-top:1px }
.cc-agent .cc-status{
  position:absolute; top:13px; right:13px; width:7px; height:7px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 8px var(--ok); animation:ccPulse 2.4s ease-in-out infinite;
}
.cc-agent.busy .cc-status{ background:var(--accent-3); box-shadow:0 0 8px var(--accent-3); animation-duration:.7s }
.cc-agent .cc-specs{ display:flex; gap:4px; flex-wrap:wrap; margin-top:9px }
.cc-agent .cc-spec{
  font-size:9.5px; font-weight:650; padding:2px 6px; border-radius:5px;
  background:rgba(255,255,255,.08); color:var(--text-dim);
}

/* ── output ───────────────────────────────────────────────────────────── */
.cc-out-wrap{
  margin-top:26px; border-radius:20px; overflow:hidden;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), rgba(11,11,24,.6);
  backdrop-filter:blur(18px);
}
.cc-tabs{
  display:flex; gap:2px; padding:7px 8px; overflow-x:auto;
  border-bottom:1px solid var(--hairline); background:rgba(0,0,0,.22);
}
.cc-tab{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:650; padding:8px 14px; border-radius:9px;
  transition:background .2s, color .2s;
}
.cc-tab:hover{ color:var(--text); background:rgba(255,255,255,.06) }
.cc-tab.on{ color:#fff; background:rgba(255,255,255,.11) }
.cc-tab .cc-badge{
  font-size:10px; font-weight:800; min-width:17px; padding:1px 5px; border-radius:99px;
  background:var(--grad-brand); color:#fff;
}
.cc-actions{ display:flex; gap:6px; margin-left:auto; padding-left:8px }
.cc-body{ padding:20px 22px; min-height:190px; max-height:min(62vh,640px); overflow:auto }

/* staged progress */
.cc-stages{ display:flex; gap:0; margin-bottom:18px; flex-wrap:wrap }
.cc-stage{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted) }
.cc-stage + .cc-stage::before{
  content:''; width:26px; height:1px; margin:0 10px; background:var(--hairline-strong);
}
.cc-stage .cc-sdot{
  width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--hairline-strong); font-size:9px; flex:0 0 auto;
}
.cc-stage.done{ color:var(--ok) }
.cc-stage.done .cc-sdot{ background:var(--ok); border-color:var(--ok); color:#04231a }
.cc-stage.active{ color:#c9b8ff }
.cc-stage.active .cc-sdot{
  border-color:#a855f7; box-shadow:0 0 0 3px rgba(168,85,247,.2);
  animation:ccPulse 1.2s ease-in-out infinite;
}

/* code + file lists inside output */
.cc-file{
  display:flex; align-items:center; gap:11px; padding:11px 13px; margin-bottom:8px;
  border-radius:12px; border:1px solid var(--hairline); background:rgba(255,255,255,.035);
}
.cc-file .cc-fi{ font-size:19px }
.cc-file b{ font-size:13px; font-weight:650; display:block }
.cc-file span{ font-size:11.5px; color:var(--muted) }
.cc-file .btn{ margin-left:auto; padding:7px 13px; font-size:12px }
.cc-img{ width:100%; border-radius:14px; border:1px solid var(--hairline); display:block }

/* the preserved original Home widgets */
.cc-legacy{ margin-top:34px; border-top:1px solid var(--hairline); padding-top:8px }
.cc-legacy > summary{
  cursor:pointer; list-style:none; padding:13px 4px; font-size:13px; font-weight:700;
  color:var(--text-dim); display:flex; align-items:center; gap:9px;
  transition:color .2s ease;
}
.cc-legacy > summary::-webkit-details-marker{ display:none }
.cc-legacy > summary:hover{ color:var(--text) }
.cc-legacy > summary::after{
  content:'▾'; margin-left:auto; transition:transform .25s var(--ease-out); font-size:11px;
}
.cc-legacy[open] > summary::after{ transform:rotate(180deg) }
.cc-legacy > summary .cc-lg-hint{ font-weight:500; font-size:11.5px; color:var(--muted) }

@media(max-width:720px){
  .cc-inner{ padding:15px 14px 12px }
  #ccInput{ font-size:15.5px; min-height:82px }
  .cc-body{ padding:16px }
  .cc-agent{ flex-basis:154px }
  #ccRun{ flex:1; justify-content:center }
  #ccRun .cc-kbd{ display:none }
}


/* ══════════════════════════════════════════════════════════════════════════
   🌌 DARK AURORA CONTROL CENTER  —  premium theme
   Applied as `body.theme-aurora`, unlocked for paid plans and Founders.
   Token values are taken verbatim from the blueprint so the app matches the
   Figma spec exactly. Because everything is expressed as a variable override,
   no component rule needs to change — the whole app re-skins itself.
   ══════════════════════════════════════════════════════════════════════════ */

body.theme-aurora{
  /* Base surfaces */
  --bg-0:#070B14;  --bg-1:#0D1321;  --bg-2:#121A2B;
  --surface-1:rgba(18,26,43,.72);
  --surface-2:rgba(255,255,255,.06);
  --surface-3:rgba(255,255,255,.10);
  --hairline:rgba(255,255,255,.08);
  --hairline-strong:rgba(255,255,255,.16);

  /* Text */
  --text:#F4F7FB;  --text-dim:#A7B0C0;  --muted:#6F7A90;

  /* Accents */
  --accent-1:#7C5CFF;  --accent-2:#22D3EE;  --accent-3:#F5C76A;
  --ok:#4ADE80;  --danger:#FB7185;
  --gold:#F5C76A;

  /* Gradients */
  --grad-brand:linear-gradient(135deg,#7C5CFF 0%,#22D3EE 100%);
  --grad-premium:linear-gradient(135deg,#F5C76A 0%,#FFB86B 100%);
  --grad-text:linear-gradient(135deg,#F4F7FB 20%,#C9BCFF 55%,#7EE7F5 100%);

  /* Shadows */
  --e2:0 10px 30px rgba(0,0,0,.28);
  --e3:0 16px 44px rgba(0,0,0,.34);
  --e4:0 28px 70px rgba(0,0,0,.46);
  --glow-accent:0 0 0 1px rgba(124,92,255,.35), 0 12px 40px rgba(124,92,255,.18);

  /* Radii — blueprint scale */
  --radius:20px;

  /* Motion — blueprint easing */
  --ease-out:cubic-bezier(.2,.8,.2,1);
}

/* Deeper, calmer app background than the default purple/pink wash */
body.theme-aurora{
  background:
    radial-gradient(1200px 760px at 12% -8%, rgba(124,92,255,.26), transparent 62%),
    radial-gradient(1000px 680px at 100% 6%, rgba(34,211,238,.16), transparent 62%),
    radial-gradient(860px 620px at 46% 116%, rgba(255,79,216,.13), transparent 62%),
    linear-gradient(180deg,#070B14,#0D1321);
}

/* Aurora curtain — the signature effect. Purely decorative, pointer-events:none,
   and disabled entirely under prefers-reduced-motion (see the global rule). */
body.theme-aurora::before{
  content:''; position:fixed; inset:-18% -10% auto -10%; height:66%; z-index:0;
  pointer-events:none; opacity:.36; filter:blur(76px);
  background:
    radial-gradient(52% 60% at 22% 42%, rgba(124,92,255,.62), transparent 70%),
    radial-gradient(46% 56% at 56% 30%, rgba(34,211,238,.50), transparent 70%),
    radial-gradient(44% 58% at 82% 48%, rgba(255,79,216,.44), transparent 70%);
  animation:auroraFlow 26s ease-in-out infinite alternate;
}
@keyframes auroraFlow{
  0%   { transform:translate3d(-4%,0,0) scale(1)     skewY(0deg) }
  50%  { transform:translate3d(4%,2%,0) scale(1.10)  skewY(-1.5deg) }
  100% { transform:translate3d(-2%,-2%,0) scale(1.04) skewY(1.5deg) }
}
/* Slow particle drift */
body.theme-aurora::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.30;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 68% 14%, rgba(180,220,255,.75), transparent),
    radial-gradient(1.8px 1.8px at 34% 72%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.3px 1.3px at 84% 62%, rgba(200,180,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 52% 44%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 22% 88%, rgba(160,240,255,.65), transparent);
  background-size:100% 100%;
  animation:auroraDrift 42s linear infinite;
}
@keyframes auroraDrift{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(0,-38px,0) }
}
/* Keep real content above both decorative layers */
body.theme-aurora .topbar,
body.theme-aurora .container,
body.theme-aurora .sidebar,
body.theme-aurora .tabs-wrap{ position:relative; z-index:1 }

/* The original orbs would fight the aurora — retire them in this theme */
body.theme-aurora .bg-orbs{ display:none }

/* Blueprint typography scale */
body.theme-aurora{ font-feature-settings:"kern" 1,"liga" 1; letter-spacing:-.005em }
body.theme-aurora .cc-title{ letter-spacing:-.015em }
body.theme-aurora .panel-head h2{ letter-spacing:-.005em }
body.theme-aurora .sb-group-label{ letter-spacing:.04em }

/* Premium (gold) button — reserved for upgrade / unlock actions */
.btn.premium, body.theme-aurora .q-up{
  background:var(--grad-premium, linear-gradient(135deg,#F5C76A,#FFB86B));
  color:#2A1C05; border:0; font-weight:750;
  box-shadow:0 0 24px rgba(245,199,106,.25);
}
.btn.premium:hover{ box-shadow:0 0 34px rgba(245,199,106,.42); transform:translateY(-2px) }

/* Gold plan chip for paying users */
body.theme-aurora .q-plan.is-paid{
  background:var(--grad-premium); color:#2A1C05;
  box-shadow:0 0 18px rgba(245,199,106,.3);
}

/* ── Theme switch in the sidebar footer ──────────────────────────────── */
.cc-theme{
  display:flex; align-items:center; gap:10px; margin:8px 12px 4px;
  padding:11px 12px; border-radius:13px;
  border:1px solid var(--hairline); background:rgba(255,255,255,.035);
}
.cc-theme .ct-ico{ font-size:17px }
.cc-theme .ct-txt{ flex:1; min-width:0 }
.cc-theme b{ display:block; font-size:12.5px; font-weight:700; letter-spacing:-.01em }
.cc-theme span{ display:block; font-size:10.5px; color:var(--muted) }
.cc-theme.is-locked{ opacity:.72 }

/* Toggle switch — blueprint sizing: 44 × 24, knob 20 */
.ct-sw{
  position:relative; flex:0 0 44px; width:44px; height:24px; border-radius:999px;
  border:1px solid var(--hairline-strong); background:rgba(255,255,255,.08);
  cursor:pointer; padding:0; transition:background .25s ease, border-color .25s ease;
}
.ct-sw::after{
  content:''; position:absolute; top:1px; left:1px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:transform .28s var(--ease-spring);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.ct-sw.on{ background:var(--grad-premium, linear-gradient(135deg,#F5C76A,#FFB86B)); border-color:transparent }
.ct-sw.on::after{ transform:translateX(20px) }
.ct-sw:disabled{ cursor:not-allowed }

/* Locked-state hint shown to free users */
.cc-theme .ct-lock{ font-size:12px; opacity:.8 }


/* ══════════════════════════════════════════════════════════════════════════
   🎁 7-DAY FREE TRIAL — no card required
   ══════════════════════════════════════════════════════════════════════════ */

/* Sidebar meter: live countdown while the trial runs */
.q-trial{
  margin-top:11px; padding:9px 11px; border-radius:10px; text-align:center;
  font-size:11.5px; line-height:1.5; color:#a5f3fc;
  background:linear-gradient(135deg, rgba(34,211,238,.20), rgba(124,92,255,.16));
  border:1px solid rgba(34,211,238,.42);
}
.q-trial b{ color:#fff }
.q-trial span{ display:block; font-size:10px; color:var(--muted); margin-top:2px }

/* Trial CTA button — cyan so it reads as "try", not "buy" */
.q-up.is-trial{
  background:linear-gradient(135deg,#22D3EE,#7C5CFF);
  box-shadow:0 4px 16px rgba(34,211,238,.36);
}
.q-up.is-trial:hover{ box-shadow:0 8px 24px rgba(34,211,238,.5) }

/* Landing hero note — the trial promise deserves to be readable */
.ld-note{ line-height:1.65 }
.ld-note b{ color:var(--text) }


/* ══════════════════════════════════════════════════════════════════════════
   🚨 file:// warning overlay — shown only when the app is opened as a file
   ══════════════════════════════════════════════════════════════════════════ */
#bcFileWarn{
  position:fixed; inset:0; z-index:200000; display:grid; place-items:center;
  padding:20px; background:rgba(3,3,10,.86); backdrop-filter:blur(10px);
}
#bcFileWarn .fw-card{
  max-width:520px; width:100%; padding:32px 30px; border-radius:22px;
  background:linear-gradient(180deg, rgba(28,18,18,.98), rgba(10,8,16,.99));
  border:1px solid rgba(239,68,68,.5);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  max-height:90vh; overflow:auto;
}
#bcFileWarn .fw-ico{ font-size:44px; display:block; margin-bottom:12px }
#bcFileWarn h2{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin-bottom:12px; color:#fff }
#bcFileWarn p{ font-size:14px; line-height:1.65; color:#c9ccd8; margin-bottom:14px }
#bcFileWarn ol{ margin:0 0 16px; padding-left:22px }
#bcFileWarn li{ font-size:14px; line-height:1.7; color:#e6e8f0; margin-bottom:6px }
#bcFileWarn code{
  background:rgba(255,255,255,.1); padding:2px 6px; border-radius:5px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px;
}
#bcFileWarn b{ color:#fff }
#bcFileWarn .fw-small{ font-size:12.5px; color:#9aa0b0 }
#bcFileWarn .fw-btn{
  display:inline-block; margin:6px 8px 0 0; padding:11px 20px; border:0; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:700; color:#fff; border-radius:12px;
  background:linear-gradient(135deg,#7C3AED,#EC4899);
  box-shadow:0 8px 24px rgba(124,58,237,.4);
}
#bcFileWarn .fw-btn.fw-ghost{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  box-shadow:none; font-weight:600;
}


/* ══════════════════════════════════════════════════════════════════════════
   📏 TIGHTEN THE TOP GAP
   ══════════════════════════════════════════════════════════════════════════
   The header (padding-bottom 14px) sat directly above .container
   (padding-top 36px), leaving ~50px of dead space between the title bar and
   the first line of content on every screen. Trimmed to a deliberate ~16px.

   Both earlier .container rules use !important, so these must too — this is
   the last rule in the file, so it is the one that wins.
   ══════════════════════════════════════════════════════════════════════════ */
.container{ padding-top:16px !important }

/* Panel heading: pull it up and tighten its own trailing space a little.
   !important is required — an earlier rule already sets this with !important. */
.panel-head{ margin-bottom:18px !important }
.panel-head h2{ line-height:1.12 }

/* Command Center: the eyebrow chip already provides visual breathing room,
   so it does not need extra space above it. */
.cc-head{ margin-bottom:18px }
.cc-head .cc-eyebrow{ margin-bottom:10px }

/* Keep the aura from implying more space than it occupies (it is absolute, so
   this only affects how far the glow reaches upward, not layout). */
.cc-aura{ inset:-38px -40px auto -40px }

@media(max-width:768px){
  .container{ padding-top:12px !important }
  .panel-head{ margin-bottom:14px !important }
  .cc-head{ margin-bottom:14px }
}


/* ══════════════════════════════════════════════════════════════════════════
   🩺 BOOT WATCHDOG — only ever visible when the content area came up empty
   ══════════════════════════════════════════════════════════════════════════ */
#bcWatchdog{ margin:0 0 24px }
#bcWatchdog .wd-card{
  padding:26px 24px; border-radius:20px;
  border:1px solid rgba(251,113,133,.5);
  background:linear-gradient(180deg, rgba(40,16,24,.96), rgba(12,8,18,.98));
  box-shadow:0 22px 60px rgba(0,0,0,.5);
}
#bcWatchdog .wd-ico{ font-size:38px; display:block; margin-bottom:10px }
#bcWatchdog h2{
  font-size:21px; font-weight:800; letter-spacing:-.02em; margin-bottom:9px;
  color:#fff; background:none; -webkit-text-fill-color:#fff;
}
#bcWatchdog p{ font-size:13.5px; line-height:1.65; color:#c9ccd8; margin-bottom:16px; max-width:70ch }
#bcWatchdog .wd-facts{
  display:grid; gap:8px; margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
#bcWatchdog .wd-facts > div{
  padding:9px 11px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
#bcWatchdog .wd-facts b{
  display:block; font-size:10px; text-transform:uppercase; letter-spacing:.09em;
  color:#8b8e9e; font-weight:700; margin-bottom:2px;
}
#bcWatchdog .wd-facts span{ font-size:13px; font-weight:650; color:#f4f7fb }
#bcWatchdog .wd-lbl{
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:#8b8e9e; margin-bottom:6px;
}
#bcWatchdog .wd-pre{
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.1);
  border-radius:11px; padding:12px 14px; margin:0 0 18px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11.5px;
  line-height:1.6; color:#fca5a5; white-space:pre-wrap; max-height:190px; overflow:auto;
}
#bcWatchdog .wd-btns{ display:flex; gap:9px; flex-wrap:wrap }


/* ══════════════════════════════════════════════════════════════════════════
   📝 ANSWER AREA — give the reply real room
   ══════════════════════════════════════════════════════════════════════════
   The output panel now sits directly under the composer (see buildInner), and
   it needs to be big enough to actually read an answer in without feeling
   cramped. Previously it was a 190px box below the agent dock.
   ══════════════════════════════════════════════════════════════════════════ */
.cc-out-wrap{ margin-top:20px }
.cc-body{
  min-height:300px;                 /* was 190px — a real reading area */
  max-height:none;                  /* let long answers extend the page      */
  padding:22px 24px;
}
/* Once an answer is present, cap the height and scroll inside it so the agent
   dock below stays reachable without an endless page. */
.cc-body.has-answer{
  max-height:min(70vh, 720px);
  overflow:auto;
}
.cc-body .bc-md{ font-size:14.5px }
.cc-body .bc-md p{ margin-bottom:13px }

/* Empty state should not look like a bug — make it inviting and clearly a
   placeholder for the answer. */
.cc-body .pm-empty{ padding:44px 24px; border-style:dashed }

@media(max-width:768px){
  .cc-body{ min-height:220px; padding:16px }
  .cc-body.has-answer{ max-height:none }   /* phones: just let it flow */
}


/* ══════════════════════════════════════════════════════════════════════════
   💬 PRE-LOGIN SITE ASSISTANT — floating helper on the landing page only
   ══════════════════════════════════════════════════════════════════════════ */
/* z-index was 99500 — BELOW #landing (100002) and #authGate (100001), both of
   which are position:fixed and cover the whole viewport. This widget only ever
   mounts WHILE the landing page is shown, so it spent its entire life buried
   under the one element it is guaranteed to sit on top of: the launcher could
   not be clicked at all. 100003 puts it one step above both. (bitcom-extras.js
   sidesteps this with z-index 2147483000 on its own #bxaRoot.) */
#saRoot{ position:fixed; right:22px; bottom:22px; z-index:100003 }

/* the launcher */
.sa-fab{
  display:inline-flex; align-items:center; gap:9px; position:relative;
  padding:13px 20px 13px 16px; border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#7C5CFF,#22D3EE);
  box-shadow:0 10px 30px rgba(124,92,255,.45);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.sa-fab:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(34,211,238,.5) }
.sa-fab-ico{ font-size:18px; line-height:1 }
.sa-fab-dot{
  position:absolute; top:10px; right:14px; width:8px; height:8px; border-radius:50%;
  background:#4ADE80; box-shadow:0 0 8px #4ADE80; animation:saPing 2s ease-in-out infinite;
}
@keyframes saPing{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.75)} }
#saRoot.is-open .sa-fab{ opacity:0; pointer-events:none; transform:translateY(10px) scale(.9) }

/* the panel */
.sa-panel{
  position:absolute; right:0; bottom:0; width:min(380px, calc(100vw - 32px));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:20px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(18,20,38,.98), rgba(9,10,22,.99));
  box-shadow:0 28px 70px rgba(0,0,0,.6);
  animation:saIn .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes saIn{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }

.sa-head{
  display:flex; align-items:center; gap:11px; padding:14px 15px;
  border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
}
.sa-av{
  width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; font-size:17px;
  background:linear-gradient(135deg,#7C5CFF,#22D3EE);
}
.sa-who{ flex:1; min-width:0 }
.sa-who b{ display:block; font-size:13.5px; font-weight:700; color:#F4F7FB; letter-spacing:-.01em }
.sa-who span{ display:block; font-size:11px; color:#A7B0C0 }
.sa-x{
  border:0; background:rgba(255,255,255,.08); color:#A7B0C0; cursor:pointer;
  width:28px; height:28px; border-radius:8px; font-size:13px; flex:0 0 auto;
  transition:background .2s, color .2s;
}
.sa-x:hover{ background:rgba(255,255,255,.16); color:#fff }

/* conversation */
.sa-log{
  padding:15px; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
  height:min(46vh, 340px); font-size:13.5px; line-height:1.6;
}
.sa-msg{ max-width:88%; padding:10px 13px; border-radius:14px }
.sa-msg p{ margin:0 0 8px } .sa-msg p:last-child{ margin:0 }
.sa-msg ul{ margin:4px 0 8px; padding-left:18px } .sa-msg li{ margin-bottom:4px }
.sa-msg b{ color:#fff }
.sa-user{
  align-self:flex-end; color:#fff;
  background:linear-gradient(135deg,#7C5CFF,#6D4DF2);
  border-bottom-right-radius:5px;
}
.sa-assistant{
  align-self:flex-start; color:#D7DBE6;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
  border-bottom-left-radius:5px;
}
/* typing dots */
.sa-typing{ display:flex; gap:5px; align-items:center; padding:13px }
.sa-typing span{
  width:6px; height:6px; border-radius:50%; background:#8b8e9e;
  animation:saDot 1.2s ease-in-out infinite;
}
.sa-typing span:nth-child(2){ animation-delay:.18s }
.sa-typing span:nth-child(3){ animation-delay:.36s }
@keyframes saDot{ 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)} }

/* quick questions */
.sa-quick{
  display:flex; gap:6px; padding:0 13px 11px; flex-wrap:wrap;
  max-height:74px; overflow:hidden;
}
.sa-q{
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:#A7B0C0; cursor:pointer; font:inherit; font-size:11.5px;
  padding:6px 11px; border-radius:999px; transition:background .2s, color .2s;
}
.sa-q:hover{ background:rgba(255,255,255,.12); color:#fff }

/* input */
.sa-form{
  display:flex; gap:8px; padding:11px 13px;
  border-top:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.24);
}
.sa-form input{
  flex:1; min-width:0; padding:11px 13px; font:inherit; font-size:13.5px;
  border-radius:11px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:#F4F7FB; outline:none;
}
.sa-form input:focus{ border-color:rgba(124,92,255,.7); box-shadow:0 0 0 3px rgba(124,92,255,.16) }
.sa-form input::placeholder{ color:#6F7A90 }
.sa-send{
  flex:0 0 42px; width:42px; border:0; border-radius:11px; cursor:pointer;
  color:#fff; font-size:14px; background:linear-gradient(135deg,#7C5CFF,#22D3EE);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.sa-send:hover{ transform:translateY(-1px) }
.sa-foot{
  margin:0; padding:0 13px 12px; font-size:10.5px; color:#6F7A90; text-align:center;
}

/* live spots text in the hero note */
.ld-spots{ color:#F5C76A; font-weight:700 }

@media(max-width:520px){
  #saRoot{ right:14px; bottom:14px; left:14px }
  .sa-fab{ width:100%; justify-content:center }
  .sa-panel{ width:100%; right:0 }
  .sa-log{ height:44vh }
}
/* Visibility is decided in JS (it only mounts while the landing page is shown).
   An earlier CSS rule here also hid it whenever body lacked .auth-locked, which
   double-gated the widget and made it impossible to see while testing — if the
   JS ever mounted it at the wrong moment, CSS silently swallowed it. One gate
   only: the JS one. */
#saRoot[hidden]{ display:none }

/* Same defect as .bxa-panel: `display:flex` here beats the browser's
   [hidden]{display:none}, so saClose() set the attribute and the panel stayed
   put. #saRoot[hidden] above guards the ROOT, which JS never toggles — the
   panel is what open()/close() actually change. */
.sa-panel[hidden]{ display: none !important; }



/* ══════════════════════════════════════════════════════════════════════════
   💬 WHATSAPP UPGRADE FLOW — the 3 steps in the upgrade dialog
   ══════════════════════════════════════════════════════════════════════════ */
.up-steps{ display:flex; flex-direction:column; gap:10px; text-align:left; margin:4px 0 16px }
.up-steps > div{ display:flex; gap:12px; align-items:flex-start }
.up-steps > div > span{
  flex:0 0 24px; width:24px; height:24px; display:grid; place-items:center;
  border-radius:50%; font-size:11.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#7C5CFF,#22D3EE);
}
.up-steps b{ display:block; font-size:13.5px; font-weight:650; color:var(--text) }
.up-steps small{ display:block; font-size:11.5px; color:var(--muted); line-height:1.5; margin-top:1px }

.up-acct{
  font-size:12.5px; color:var(--text-dim); margin:0 0 14px;
  padding:9px 12px; border-radius:10px; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid var(--hairline);
}
.up-acct b{ color:var(--text) }
.up-acct.up-warn{
  color:#fcd34d; border-color:rgba(245,158,11,.42); background:rgba(245,158,11,.1);
}

/* WhatsApp buttons read as WhatsApp — green, not brand purple */
#csWhats, #prWhats{
  background:linear-gradient(135deg,#25D366,#128C7E) !important;
  color:#fff !important; border:0 !important;
  box-shadow:0 8px 24px rgba(37,211,102,.34) !important;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
#csWhats:hover, #prWhats:hover{ box-shadow:0 12px 32px rgba(37,211,102,.48) !important }

/* Single-option billing row should not look like a broken toggle */
.pr-toggle:has(> button:only-child){ background:transparent; border-color:transparent; padding:0 }
.pr-toggle > button:only-child{ cursor:default; color:var(--text-dim); background:transparent }

/* The padlock on every feature card is a CSS ::after, not an element — which
   is why removing DOM nodes never cleared it. Everything on this site is free
   now, so a lock on each tile tells visitors the opposite of the truth in the
   exact place they most need to believe it. */
#landing .ld-grid .ld-card:not(.ld-quote)::after,
#landing .ld-grid .ld-card:not(.ld-quote):hover::after{ content:none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   LANDING NAV — NO-WRAP   (16 Aug 2026)
   The header CTA wrapped onto three lines ("Claim a / free / spot") at EVERY
   width, not just on phones — .ld-btn has no white-space rule and the nav is
   a flex row, so the button was free to be squeezed narrow and wrap. Pin the
   nav buttons and the brand to a single line everywhere.
   ══════════════════════════════════════════════════════════════════════════ */
.ld-nav .ld-btn,
.ld-nav .ld-btn-sm{ white-space:nowrap; flex:0 0 auto; }
.ld-brand span{ white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   LANDING NAV — MOBILE FIX   (16 Aug 2026)

   .ld-nav was display:flex + justify-content:space-between with 28px padding
   and NO responsive rules anywhere. Measured at a 390px viewport the row
   needed 483px, so both header buttons sat completely off-screen
   (#ldLoginTop 329->411, #ldSignupTop 421->483) and the document scrolled
   sideways at 440px. On a phone the header sign-in was unreachable without
   horizontally panning the page — and the sideways scroll made the whole
   landing feel broken.

   Nothing above 620px changes.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  .ld-nav{ padding:12px 14px; gap:8px; }
  .ld-nav > div{ gap:6px !important; flex:0 0 auto; }
  .ld-brand{ font-size:15px; gap:8px; min-width:0; }          /* min-width:0 lets a flex child shrink */
  .ld-brand img{ width:28px; height:28px; }
  .ld-brand span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ld-lang{ padding:7px 8px; font-size:12px; max-width:96px; }
  .ld-nav .ld-btn,
  .ld-nav .ld-btn-sm{ padding:8px 12px; font-size:13px; white-space:nowrap; }
}

/* Below ~430px the wordmark cannot coexist with both buttons at a legible
   size. Keep the logo — it is still the brand — and drop the text. The hero
   immediately underneath announces the name in 38px type, so nothing is lost,
   and the sign-in button becomes reachable, which matters more. */
@media (max-width:430px){
  .ld-brand span{ display:none; }
  /* 360px is still a very common older-Android width. Shrink the language
     picker to the globe + code so both buttons stay on screen there too. */
  .ld-lang{ max-width:62px; padding:7px 6px; font-size:11px; }
  .ld-nav .ld-btn,
  .ld-nav .ld-btn-sm{ padding:8px 10px; font-size:12.5px; }
}

/* 320px — iPhone SE 1st gen and the oldest Androids still in use. Measured
   at 356px needed vs 320 available, so trim the last 36px from the gaps,
   the language picker and the button padding rather than let the sign-up
   button fall off the screen. */
@media (max-width:340px){
  .ld-nav{ padding:10px 6px; gap:4px; }
  .ld-brand img{ width:24px; height:24px; }
  .ld-nav > div{ gap:4px !important; }
  .ld-lang{ max-width:46px; padding:7px 4px; font-size:11px; }
  .ld-nav .ld-btn,
  .ld-nav .ld-btn-sm{ padding:7px 8px; font-size:12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDING NAV — LEGIBILITY ON OLD BROWSERS   (16 Aug 2026)
   .ld-nav was background: rgba(6,6,15,.65) + UNPREFIXED backdrop-filter only.
   iOS Safari before 15.4 needs -webkit-backdrop-filter, so on those iPhones
   — and on older Android WebViews — the blur never applied and the header was
   simply 65%% transparent: the page scrolled visibly through it and the
   Sign in / Start free labels sat on top of moving text.
   Order matters below: give everyone a near-opaque bar FIRST, then hand the
   frosted look back only to browsers that will actually render the blur.
   ══════════════════════════════════════════════════════════════════════════ */
.ld-nav{
  background: rgba(6,6,15,.94);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))){
  /* NOTE: @supports reporting true is not proof the blur RENDERS — headless
     Chromium here reports support and still computes backdrop-filter:none.
     So even this branch stays opaque enough to read against moving content;
     the blur is a bonus on top, not the thing legibility depends on. */
  .ld-nav{ background: rgba(6,6,15,.86); }
}