@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
:root{--canvas:#070707;--surface:#101010;--surface2:#181111;--hair:#342020;--primary:#ff2436;--soft:#ff5a66;--deep:#b80716;--ink:#f5f5f5;--body:#b9b3b3;--muted:#7d7373;--ok:#19d18f}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{font-family:'Be Vietnam Pro',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--canvas);color:var(--ink)}button,input,textarea{font:inherit}#app{display:grid;grid-template-columns:260px minmax(0,1fr) 360px;gap:0;min-height:100vh}.sidebar,.status{border-color:var(--hair);background:linear-gradient(180deg,#0c0707,#070707)}.sidebar{border-right:1px solid var(--hair);padding:20px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}.brand img{width:42px;height:42px;object-fit:contain}.brand b{display:block}.brand span{color:var(--muted);font-size:12px}.cmd{display:block;margin-top:24px;padding:10px;border:1px solid var(--hair);border-radius:8px;color:var(--body);font-family:'JetBrains Mono',SFMono-Regular,Consolas,monospace;font-size:12px;white-space:normal}.nav{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;margin:4px 0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--body);cursor:pointer;transition:.2s}.nav svg{width:20px;height:20px}.nav:hover,.nav.active{color:var(--ink);border-color:var(--hair);background:var(--surface2)}.nav.active{box-shadow:inset 3px 0 0 var(--primary)}main{padding:28px;min-width:0}.top{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:22px}.eyebrow{margin:0 0 8px;color:var(--primary);font-size:12px;font-weight:700;letter-spacing:2.5px}.top h1{font-size:clamp(32px,5vw,60px);font-weight:400;letter-spacing:-.8px;line-height:1;margin:0}.pill{border:1px solid var(--hair);border-radius:999px;padding:7px 12px;color:var(--body);font-size:13px}.pill.ok{border-color:var(--ok);color:var(--ok)}.panel{animation:enter .24s ease}.lead{font-size:18px;line-height:1.6;color:var(--body);max-width:680px}.grid{display:grid;gap:14px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px}.card{border:1px solid var(--hair);border-radius:10px;background:rgba(16,16,16,.9);padding:18px;transition:border-color .2s,background .2s,transform .2s}.card:hover{border-color:#653030;background:#141010}.option{cursor:pointer;display:grid;gap:5px}.option input{accent-color:var(--primary)}.option b{text-transform:uppercase}.option span,.card p{color:var(--body)}.mode{margin:14px 0 18px}.primary,.secondary,.save{border-radius:8px;border:1px solid var(--primary);background:var(--primary);color:#120405;padding:12px 16px;font-weight:700;cursor:pointer;transition:.2s}.primary{width:100%;min-height:50px}.primary:hover{background:var(--soft);transform:translateY(-1px)}.secondary,.save{background:transparent;color:var(--ink);border-color:var(--hair);padding:9px 12px}.secondary:hover,.save:hover{border-color:var(--primary);color:var(--primary)}.status{border-left:1px solid var(--hair);padding:20px;height:100vh;position:sticky;top:0}.terminal{height:calc(100vh - 80px);overflow:auto;background:#050505;border:1px solid var(--hair);border-radius:10px;padding:12px;font-family:'JetBrains Mono',SFMono-Regular,Consolas,monospace;font-size:12px;color:#d6caca}.terminal.big{height:70vh}.terminal p{margin:0 0 6px;white-space:pre-wrap}.files{display:grid;gap:14px}.file header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.file textarea{width:100%;min-height:280px;background:#080808;color:var(--ink);border:1px solid var(--hair);border-radius:8px;padding:12px;line-height:1.55;font-family:'JetBrains Mono',SFMono-Regular,Consolas,monospace}.skeleton{height:120px;border-radius:8px;background:linear-gradient(90deg,#120c0c,#211414,#120c0c);background-size:200% 100%;animation:shimmer 1.2s infinite}.bottom{display:none}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes shimmer{to{background-position:-200% 0}}@media (max-width:1180px){#app{grid-template-columns:88px minmax(0,1fr)}.sidebar{padding:14px}.brand div,.nav span,.cmd,.status{display:none}.brand{justify-content:center}.nav{justify-content:center}.hero-grid{grid-template-columns:1fr}.three{grid-template-columns:repeat(2,1fr)}}@media (max-width:760px){#app{display:block;padding-bottom:74px}.sidebar{height:auto;position:static;border-right:0;border-bottom:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between}.sidebar nav,.cmd{display:none}.brand{margin:0}.brand div{display:block}main{padding:18px}.top{align-items:center}.two,.three{grid-template-columns:1fr}.panel{padding-bottom:16px}.bottom{position:fixed;left:0;right:0;bottom:0;height:66px;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(7,7,7,.92);backdrop-filter:blur(14px);border-top:1px solid var(--hair);z-index:20}.bottom .nav{margin:0;border:0;border-radius:0;flex-direction:column;gap:3px;justify-content:center;font-size:11px}.bottom .nav svg{width:19px}.bottom .nav.active{box-shadow:inset 0 3px 0 var(--primary)}.primary{position:sticky;bottom:82px;z-index:10}.top h1{font-size:32px}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* vNext choice cards */
.setup-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}.setup-main{min-width:0}.setup-copy{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.mini-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,36,54,.32);background:rgba(255,36,54,.08);color:var(--soft);border-radius:999px;padding:8px 11px;font-size:12px;font-weight:700;letter-spacing:.4px;white-space:nowrap}.section-head{display:flex;align-items:center;gap:12px;margin:18px 0 10px}.section-head>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,36,54,.18),rgba(255,36,54,.04));border:1px solid rgba(255,36,54,.28);color:var(--soft);font-family:'JetBrains Mono',SFMono-Regular,Consolas,monospace;font-size:12px}.section-head b{display:block;font-size:15px}.section-head small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.choice-grid{display:grid;gap:14px}.os-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:18px}.choice-card{position:relative;min-height:126px;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:16px;align-items:center;overflow:hidden;border:1px solid var(--hair);border-radius:16px;background:linear-gradient(145deg,rgba(20,16,16,.96),rgba(8,8,8,.96));padding:18px;cursor:pointer;transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}.choice-card:hover{transform:translateY(-2px);border-color:rgba(255,90,102,.45);box-shadow:0 18px 54px rgba(0,0,0,.38),0 0 0 1px rgba(255,36,54,.05) inset}.choice-card input{position:absolute;opacity:0;pointer-events:none}.choice-card__glow{position:absolute;inset:auto -20% -60% 20%;height:120px;background:radial-gradient(circle,rgba(255,36,54,.22),transparent 62%);opacity:0;transition:.22s}.choice-card__icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#1b1515,#0d0b0b);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.choice-card__icon img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}.choice-card__body{display:grid;gap:6px;min-width:0}.choice-card__body strong{font-size:17px;letter-spacing:-.2px}.choice-card__body small{color:var(--body);line-height:1.35}.choice-card__meta{height:100%;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:14px}.choice-card__meta em{font-style:normal;font-size:11px;color:var(--muted);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:999px;padding:5px 8px}.choice-card__meta i{width:22px;height:22px;border-radius:999px;border:2px solid rgba(255,255,255,.72);box-shadow:0 0 0 4px rgba(255,255,255,.03);transition:.18s}.choice-card:has(input:checked),.choice-card.is-selected{border-color:rgba(255,36,54,.9);background:linear-gradient(145deg,rgba(37,14,17,.98),rgba(12,8,8,.98));box-shadow:0 0 0 1px rgba(255,36,54,.26) inset,0 18px 60px rgba(255,36,54,.08)}.choice-card:has(input:checked) .choice-card__glow,.choice-card.is-selected .choice-card__glow{opacity:1}.choice-card:has(input:checked) .choice-card__meta i,.choice-card.is-selected .choice-card__meta i{border-color:var(--primary);background:radial-gradient(circle at center,var(--primary) 0 42%,transparent 46%);box-shadow:0 0 0 5px rgba(255,36,54,.12),0 0 24px rgba(255,36,54,.32)}.choice-card:has(input:checked) .choice-card__meta em,.choice-card.is-selected .choice-card__meta em{color:var(--ink);border-color:rgba(255,36,54,.28);background:rgba(255,36,54,.12)}.install-cta{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;border-radius:14px}.install-cta span{font-size:15px}.install-cta small{font-size:12px;font-weight:500;color:rgba(18,4,5,.72)}.system-card{min-height:360px}.sys-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);padding:12px 0}.sys-row span{color:var(--muted)}.sys-row b.ok{color:var(--ok)}.sys-row b.bad{color:var(--soft)}.system-card code{display:block;margin-top:16px;line-height:1.5;color:var(--body);font-size:12px;word-break:break-word}
@media (max-width:1180px){.setup-shell{grid-template-columns:1fr}.system-card{min-height:auto}.os-grid,.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.setup-copy{display:block}.mini-pill{margin-bottom:10px}.os-grid,.mode-grid{grid-template-columns:1fr}.choice-card{min-height:104px;grid-template-columns:50px minmax(0,1fr) auto;border-radius:14px;padding:14px}.choice-card__icon{width:50px;height:50px;border-radius:14px}.choice-card__icon img{width:30px;height:30px}.choice-card__meta em{display:none}.section-head{margin-top:16px}.install-cta small{display:none}}


/* Soft 3D gradient pass */
body{background:
  radial-gradient(circle at 18% 14%, rgba(255,36,54,.13), transparent 30%),
  radial-gradient(circle at 82% 80%, rgba(255,36,54,.09), transparent 32%),
  radial-gradient(circle at 52% 48%, rgba(255,255,255,.035), transparent 28%),
  linear-gradient(135deg,#080607 0%,#030303 52%,#0b0506 100%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.22) 1px,transparent 1.5px);background-size:92px 92px;opacity:.06;mask-image:linear-gradient(#000,transparent 90%)}
main{position:relative}.panel{position:relative}.setup-shell{grid-template-columns:minmax(0,1fr) 340px;gap:20px}.setup-main{display:grid;gap:20px}.setup-copy{border:1px solid rgba(255,255,255,.06);background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,36,54,.035));border-radius:18px;padding:18px 20px;margin-bottom:0;box-shadow:0 18px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)}
.setup-section{position:relative;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(20,16,17,.86),rgba(8,8,8,.76));border-radius:24px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.055);overflow:hidden}.setup-section:before{content:"";position:absolute;inset:-1px;pointer-events:none;background:radial-gradient(circle at 16% 0%,rgba(255,36,54,.12),transparent 36%),radial-gradient(circle at 90% 100%,rgba(255,255,255,.045),transparent 32%)}.setup-section>*{position:relative}.setup-section--mode{background:linear-gradient(145deg,rgba(13,13,15,.9),rgba(20,8,10,.72));border-color:rgba(255,36,54,.16)}
.section-head{margin:0 0 16px}.section-head>span{background:linear-gradient(135deg,rgba(255,36,54,.32),rgba(255,36,54,.06));box-shadow:0 10px 28px rgba(255,36,54,.10)}.section-head b{font-size:16px}.section-head small{font-size:13px}.choice-grid{gap:16px}.choice-card{min-height:124px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.01) 38%,rgba(255,36,54,.028));border-color:rgba(255,255,255,.09);box-shadow:0 18px 52px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.045);backdrop-filter:blur(10px)}.choice-card:hover{transform:translateY(-3px);border-color:rgba(255,90,102,.42);box-shadow:0 24px 76px rgba(0,0,0,.36),0 0 0 1px rgba(255,36,54,.08) inset}.choice-card__icon{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018));border-color:rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.26)}.choice-card__glow{display:block;inset:auto -25% -70% 10%;height:150px;background:radial-gradient(circle,rgba(255,36,54,.20),transparent 64%)}.choice-card:has(input:checked),.choice-card.is-selected{border-color:rgba(255,36,54,.95);background:linear-gradient(145deg,rgba(255,36,54,.13),rgba(24,9,11,.86) 42%,rgba(12,12,12,.92));box-shadow:0 26px 82px rgba(255,36,54,.12),0 0 0 1px rgba(255,36,54,.30) inset,inset 0 1px 0 rgba(255,255,255,.07)}.choice-card:has(input:checked):before,.choice-card.is-selected:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--soft),transparent)}.choice-card__meta em{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);backdrop-filter:blur(8px)}.choice-card__body small{color:#c8bfc0}.mode-grid .choice-card{min-height:112px}.install-cta{border-radius:18px;background:linear-gradient(135deg,#ff2436,#ff5260 46%,#b80716);box-shadow:0 24px 70px rgba(255,36,54,.22),inset 0 1px 0 rgba(255,255,255,.22);border-color:rgba(255,255,255,.08)}.install-cta:hover{box-shadow:0 30px 90px rgba(255,36,54,.30),inset 0 1px 0 rgba(255,255,255,.24)}.system-card{background:linear-gradient(145deg,rgba(20,20,20,.88),rgba(7,7,7,.92));border-color:rgba(255,255,255,.08);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.055)}.terminal{background:linear-gradient(145deg,#030303,#090506);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
@media (max-width:1180px){.setup-shell{grid-template-columns:1fr}.setup-main{gap:16px}}
@media (max-width:760px){.setup-copy,.setup-section{border-radius:18px;padding:16px}.choice-card{border-radius:16px;min-height:104px}.setup-shell{gap:16px}}

/* Vietnamese typography cleanup */
.top h1{font-family:'Be Vietnam Pro',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:650;letter-spacing:-.045em;text-transform:none}.lead,.choice-card__body small,.section-head small,.sys-row,.nav,.brand span{font-family:'Be Vietnam Pro',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}.choice-card__body strong,.section-head b,.brand b{font-family:'Be Vietnam Pro',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:750}



/* Modern Vietnamese font + mojibake-safe rendering */
:root{--font-sans:'Be Vietnam Pro',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--font-mono:'JetBrains Mono',SFMono-Regular,Consolas,monospace}
body,button,input,textarea,.top h1,.lead,.choice-card__body small,.section-head small,.sys-row,.nav,.brand span,.choice-card__body strong,.section-head b,.brand b{font-family:var(--font-sans)}
.top h1{font-weight:700;letter-spacing:-.055em;line-height:.98;text-rendering:geometricPrecision}
.lead{font-weight:400;letter-spacing:-.01em;color:#d7cfd0}
code,.cmd,.terminal,.section-head>span{font-family:var(--font-mono)}


/* 3D night-sky background + top controls */
html[data-theme="dark"]{color-scheme:dark;--canvas:#020711;--surface:#07101c;--surface2:#0b1422;--hair:rgba(96,165,250,.22);--primary:#12c9ff;--soft:#4adeff;--deep:#075985;--ink:#f8fbff;--body:#aebbd0;--muted:#6c7a92;--ok:#2ee6a6}
html[data-theme="light"]{color-scheme:light;--canvas:#f6f9ff;--surface:#fff;--surface2:#eef7ff;--hair:#d7e3f4;--primary:#0ea5e9;--soft:#38bdf8;--deep:#0369a1;--ink:#0f172a;--body:#526174;--muted:#8290a5;--ok:#059669}
body{background:radial-gradient(circle at 72% 58%,rgba(0,214,255,.18),transparent 24%),radial-gradient(circle at 50% 96%,rgba(124,58,237,.18),transparent 26%),radial-gradient(ellipse at 50% 0%,#071527 0%,#020711 48%,#01030a 100%)!important;perspective:1000px;isolation:isolate}
html[data-theme="light"] body{background:radial-gradient(circle at 75% 55%,rgba(14,165,233,.18),transparent 26%),linear-gradient(180deg,#f8fbff,#edf6ff)!important}
body:before{content:"";position:fixed;inset:-10%;pointer-events:none;z-index:-2;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.7px),radial-gradient(circle,rgba(34,211,238,.85) 0 1.3px,transparent 2px),radial-gradient(circle,rgba(147,197,253,.65) 0 .8px,transparent 1.6px);background-size:128px 128px,211px 211px,73px 73px;background-position:0 0,34px 61px,19px 27px;opacity:.42;transform:translateZ(-80px) scale(1.08);animation:starsDrift 38s linear infinite;mask-image:linear-gradient(#000,rgba(0,0,0,.78),transparent 96%)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:80px 80px;opacity:.16;transform:rotateX(58deg) translateY(-22%) scale(1.5);transform-origin:top center;mask-image:linear-gradient(transparent,#000 28%,transparent 82%)}
html[data-theme="light"] body:before,html[data-theme="light"] body:after{opacity:.08}
@keyframes starsDrift{to{background-position:128px 256px,245px 317px,92px 173px}}
.topbar{height:58px;margin:-12px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--hair);background:rgba(7,16,28,.62);backdrop-filter:blur(18px);border-radius:16px;padding:10px 12px;box-shadow:0 18px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.82);box-shadow:0 18px 50px rgba(15,23,42,.08)}
.search{flex:1;display:flex;align-items:center;gap:10px;min-width:0;color:var(--muted)}.search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px}.search span{font-size:22px;line-height:1}.topbar__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.seg{display:flex;align-items:center;gap:4px;border:1px solid var(--hair);background:rgba(255,255,255,.05);border-radius:999px;padding:4px}.seg__btn{border:0;border-radius:999px;background:transparent;color:var(--body);padding:7px 13px;font-weight:700;font-size:12px;cursor:pointer}.seg__btn.is-active{background:linear-gradient(135deg,var(--primary),var(--soft));color:#001018;box-shadow:0 8px 24px rgba(18,201,255,.25)}
.setup-copy{display:grid!important;grid-template-columns:minmax(240px,.78fr) 1fr;align-items:center!important;gap:22px!important;min-height:128px;padding:22px 24px!important;background:linear-gradient(135deg,rgba(18,201,255,.075),rgba(255,255,255,.035),rgba(124,58,237,.055))!important;border-color:rgba(96,165,250,.20)!important}.setup-copy h2{margin:12px 0 0;font-size:22px;letter-spacing:-.035em;line-height:1.15}.setup-copy .lead{margin:0;font-size:18px;line-height:1.55;max-width:560px;color:var(--body);font-weight:500}.mini-pill{border-color:rgba(18,201,255,.38)!important;background:rgba(18,201,255,.09)!important;color:var(--soft)!important}
.setup-section,.card,.choice-card,.system-card,.terminal{backdrop-filter:blur(14px);background:linear-gradient(145deg,rgba(8,18,32,.72),rgba(5,8,14,.82))!important;border-color:var(--hair)!important}.choice-card:has(input:checked),.choice-card.is-selected{border-color:var(--primary)!important;background:linear-gradient(145deg,rgba(18,201,255,.13),rgba(8,18,32,.88))!important;box-shadow:0 0 0 1px rgba(18,201,255,.25) inset,0 24px 70px rgba(18,201,255,.10)!important}.choice-card:has(input:checked) .choice-card__meta i,.choice-card.is-selected .choice-card__meta i{border-color:var(--primary)!important;background:radial-gradient(circle,var(--primary) 0 42%,transparent 46%)!important;box-shadow:0 0 0 5px rgba(18,201,255,.14),0 0 28px rgba(18,201,255,.34)!important}.install-cta{background:linear-gradient(135deg,var(--primary),var(--soft) 48%,#0284c7)!important;color:#001018!important}.install-cta small{color:rgba(0,16,24,.72)!important}
html[data-theme="light"] .setup-section,html[data-theme="light"] .card,html[data-theme="light"] .choice-card,html[data-theme="light"] .system-card,html[data-theme="light"] .terminal{background:rgba(255,255,255,.82)!important;color:var(--ink)!important}.choice-card__body small{color:var(--body)!important}
@media(max-width:900px){.topbar{height:auto}.setup-copy{grid-template-columns:1fr!important}.setup-copy .lead{font-size:16px}}


/* OpenClaw red theme + overflow containment fix */
html,body,#app{width:100%;max-width:100%;overflow-x:hidden}
html[data-theme="dark"]{color-scheme:dark;--canvas:#030712;--surface:#090e1a;--surface2:#0b1329;--hair:#1e293b;--primary:#f43f5e;--soft:#fb7185;--deep:#be123c;--ink:#f8fafc;--body:#94a3b8;--muted:#64748b;--ok:#06b6d4}
html[data-theme="light"]{color-scheme:light;--canvas:#fff7f8;--surface:#fff;--surface2:#fff1f2;--hair:#f1c9ce;--primary:#ff2436;--soft:#ff5a66;--deep:#b80716;--ink:#171112;--body:#66565a;--muted:#9a8488;--ok:#059669}
body{min-height:100vh;overflow-x:clip;background:radial-gradient(circle at 50% 0%,rgba(15,23,42,0.4) 0%,rgba(3,7,18,1) 70%)!important}
html[data-theme="light"] body{background:radial-gradient(circle at 75% 55%,rgba(255,36,54,.12),transparent 26%),linear-gradient(180deg,#fffafb,#fff1f2)!important}
body:before{inset:0!important;width:100vw;height:100vh;overflow:hidden;background-image:radial-gradient(circle,rgba(255,255,255,.90) 0 1px,transparent 1.7px),radial-gradient(circle,rgba(6,182,212,.75) 0 1.3px,transparent 2px),radial-gradient(circle,rgba(244,63,94,.55) 0 .8px,transparent 1.6px)!important;opacity:.28!important;transform:none!important;animation:starsDriftRed 46s linear infinite!important}
body:after{inset:0!important;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.018) 1px,transparent 1px)!important;background-size:86px 86px!important;opacity:.13!important;transform:none!important}
@keyframes starsDriftRed{to{background-position:128px 256px,245px 317px,92px 173px}}
.topbar{border-color:rgba(30,41,59,.8)!important;background:rgba(9,14,26,.62)!important}.seg__btn.is-active{background:linear-gradient(135deg,var(--primary),var(--soft))!important;color:#fff!important;box-shadow:0 8px 24px rgba(244,63,94,.25)!important}.mini-pill{border-color:rgba(6,182,212,.38)!important;background:rgba(6,182,212,.09)!important;color:var(--soft)!important}.setup-copy{background:linear-gradient(135deg,rgba(6,182,212,.075),rgba(255,255,255,.03),rgba(244,63,94,.05))!important;border-color:rgba(6,182,212,.20)!important}.setup-section,.card,.choice-card,.system-card,.terminal{background:linear-gradient(145deg,rgba(9,14,26,.78),rgba(3,7,18,.86))!important;border-color:rgba(30,41,59,.78)!important}.choice-card:has(input:checked),.choice-card.is-selected{border-color:var(--primary)!important;background:linear-gradient(145deg,rgba(244,63,94,.14),rgba(9,14,26,.9))!important;box-shadow:0 0 0 1px rgba(244,63,94,.25) inset,0 24px 70px rgba(244,63,94,.10)!important}.choice-card:has(input:checked) .choice-card__meta i,.choice-card.is-selected .choice-card__meta i{border-color:var(--primary)!important;background:radial-gradient(circle,var(--primary) 0 42%,transparent 46%)!important;box-shadow:0 0 0 5px rgba(244,63,94,.14),0 0 28px rgba(244,63,94,.34)!important}.install-cta{background:linear-gradient(135deg,var(--primary),var(--soft) 48%,var(--deep))!important;color:#fff!important}.install-cta small{color:rgba(255,255,255,.72)!important}
html[data-theme="light"] .topbar,html[data-theme="light"] .setup-section,html[data-theme="light"] .card,html[data-theme="light"] .choice-card,html[data-theme="light"] .system-card,html[data-theme="light"] .terminal{background:rgba(255,255,255,.86)!important;color:var(--ink)!important}


/* Sidebar profile + donate modal */
.sidebar{display:flex;flex-direction:column;min-height:100vh}.sidebar nav{flex:0 0 auto}.sidebar-extra{margin-top:auto;display:grid;gap:12px}.side-info{border:1px solid var(--hair);border-radius:10px;background:rgba(255,255,255,.035);padding:12px;color:var(--body);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.side-info b{display:block;color:var(--ink);font-size:13px;margin-bottom:8px}.side-info b span{color:var(--body);font-weight:700}.side-info p{margin:0;font-size:12px;line-height:1.55}.socials{display:flex;gap:8px;margin-top:10px}.socials a{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--body);background:rgba(255,255,255,.06);border:1px solid var(--hair);transition:.18s}.socials a:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-1px)}.socials svg{width:17px;height:17px}.donate-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,36,54,.38);border-radius:12px;background:linear-gradient(135deg,rgba(255,36,54,.18),rgba(255,90,102,.08));color:var(--ink);padding:11px 12px;cursor:pointer;font:inherit;font-weight:800;box-shadow:0 14px 36px rgba(255,36,54,.10)}.donate-btn span{color:var(--primary);font-size:18px;filter:drop-shadow(0 0 10px rgba(255,36,54,.5))}.donate-btn:hover{transform:translateY(-1px);border-color:var(--primary);box-shadow:0 18px 50px rgba(255,36,54,.18)}
.modal-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.62);backdrop-filter:blur(14px);animation:modalFade .18s ease}.donate-modal{position:relative;width:min(860px,96vw);max-height:92vh;overflow:auto;border:1px solid rgba(255,36,54,.28);border-radius:24px;background:linear-gradient(145deg,rgba(20,8,10,.98),rgba(7,7,7,.98));box-shadow:0 40px 140px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;padding:22px;animation:modalPop .24s cubic-bezier(.16,1,.3,1)}.modal-x{position:absolute;right:16px;top:14px;width:34px;height:34px;border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.06);color:var(--ink);font-size:22px;cursor:pointer}.donate-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}.donate-head>span{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:rgba(255,36,54,.16);color:var(--primary);font-size:25px}.donate-head p{margin:0;color:var(--body);font-size:13px}.donate-head h2{margin:2px 0 0;font-size:32px;letter-spacing:-.04em}.donate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.donate-grid article{border:1px solid var(--hair);border-radius:18px;background:rgba(255,255,255,.04);padding:12px;text-align:center}.donate-grid img{width:100%;height:auto;max-height:62vh;object-fit:contain;border-radius:12px;background:#fff}.donate-grid b{display:block;margin-top:10px;font-size:14px;color:var(--ink)}@keyframes modalFade{from{opacity:0}to{opacity:1}}@keyframes modalPop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
html[data-theme="light"] .side-info{background:rgba(255,255,255,.8)}html[data-theme="light"] .donate-modal{background:linear-gradient(145deg,#fff,#fff7f8)}
.confirm-modal{width:min(520px,94vw)}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.confirm-actions .secondary,.confirm-actions .primary{border-radius:14px;padding:12px 16px;font-weight:900;cursor:pointer}
.confirm-actions .secondary{border:1px solid var(--hair);background:rgba(255,255,255,.06);color:var(--ink)}
.confirm-actions .primary.danger{border:0;background:linear-gradient(135deg,#e11d30,#ff3b4d);color:#fff}
.zalo-login-modal{width:min(760px,96vw)}
.zalo-qr-image-wrap{display:grid;place-items:center;padding:10px;margin-bottom:12px;border:1px solid rgba(255,36,54,.22);border-radius:16px;background:#fff}
.zalo-qr-image{width:min(320px,100%);height:auto;image-rendering:pixelated}
.zalo-qr-log{min-height:360px;max-height:62vh;overflow:auto;border:1px solid rgba(255,36,54,.22);border-radius:16px;background:#050505;color:#f7f7f7;padding:16px;font:12px/1.08 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;letter-spacing:0}
.zalo-login-actions{position:sticky;bottom:-1px;display:flex;justify-content:flex-end;margin-top:12px;padding:12px 0 0;background:linear-gradient(180deg,transparent,rgba(14,4,6,.98) 34%)}
.zalo-login-actions .secondary{min-width:120px}
.install-modal{width:min(880px,96vw)}
.install-form{display:grid;gap:14px}
.install-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.install-grid--compact{grid-template-columns:1fr}
.install-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.install-tab{display:grid;gap:2px;align-content:center;min-height:52px;padding:12px 14px;border-radius:18px;border:1px solid var(--hair);background:rgba(255,255,255,.04);color:var(--ink);text-align:left;cursor:pointer;transition:.18s}
.install-tab strong{font-size:15px;line-height:1.1}
.install-tab small{font-size:12px;color:var(--muted);line-height:1.25}
.install-tab:hover{border-color:rgba(255,90,102,.45);transform:translateY(-1px)}
.install-tab.is-active{border-color:rgba(255,36,54,.9);background:linear-gradient(145deg,rgba(37,14,17,.98),rgba(12,8,8,.98));box-shadow:0 0 0 1px rgba(255,36,54,.26) inset,0 18px 40px rgba(255,36,54,.08)}
.field{display:grid;gap:6px}
.field.wide{grid-column:1/-1}
.field>span{font-size:12px;color:var(--body);font-weight:700}
.field>input,.field>select{width:100%;height:42px;border-radius:12px;border:1px solid var(--hair);background:rgba(255,255,255,.04);color:var(--ink);padding:0 12px}
.field>small{font-size:11px;color:var(--muted)}
.path-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.path-row .icon-btn2{height:42px}
.install-preview{border:1px solid var(--hair);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.03);color:var(--body);font-size:12px}
.install-preview code{color:var(--ink);font-family:'JetBrains Mono',SFMono-Regular,Consolas,monospace;font-size:12px}
.install-actions{display:flex;justify-content:flex-end;gap:10px}
.pill-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.pill-choice{display:grid;gap:2px;align-content:center;min-height:48px;padding:10px 12px;border-radius:999px;border:1px solid var(--hair);background:rgba(255,255,255,.04);color:var(--ink);text-align:left;cursor:pointer;transition:.18s}
.pill-choice strong{font-size:13px;line-height:1.1}
.pill-choice small{font-size:11px;color:var(--muted);line-height:1.2}
.pill-choice:hover{border-color:rgba(255,90,102,.45);transform:translateY(-1px)}
.pill-choice.is-active{border-color:rgba(255,36,54,.9);background:linear-gradient(135deg,rgba(255,36,54,.18),rgba(255,90,102,.08));box-shadow:0 0 0 1px rgba(255,36,54,.22) inset}
html[data-theme="light"] .field>input,html[data-theme="light"] .field>select{background:#fff;border-color:#e7d9dd;color:#1f1114}
html[data-theme="light"] .install-preview{background:#fff;border-color:#ecdde1}
html[data-theme="light"] .install-tab{background:#fff;border-color:#e7d9dd;color:#1f1114}
html[data-theme="light"] .install-tab.is-active{background:linear-gradient(135deg,rgba(255,36,54,.12),rgba(255,90,102,.05));border-color:rgba(255,36,54,.55)}
html[data-theme="light"] .pill-choice{background:#fff;border-color:#e7d9dd;color:#1f1114}
html[data-theme="light"] .pill-choice.is-active{background:linear-gradient(135deg,rgba(255,36,54,.12),rgba(255,90,102,.05));border-color:rgba(255,36,54,.55)}
@media(max-width:1180px){.sidebar-extra{display:none}}@media(max-width:720px){.donate-grid{grid-template-columns:1fr}.donate-modal{padding:16px;border-radius:18px}.donate-head h2{font-size:26px}}


/* Sticky header + header donate + icon cleanup */
.topbar{position:sticky;top:16px;z-index:120}.search__icon{width:19px;height:19px;flex:0 0 auto;color:var(--muted)}.top-donate{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,36,54,.34);border-radius:999px;background:linear-gradient(135deg,rgba(255,36,54,.18),rgba(255,90,102,.08));color:var(--ink);padding:8px 13px;font:inherit;font-weight:800;font-size:12px;cursor:pointer;white-space:nowrap;transition:.18s}.top-donate span{color:var(--primary);font-size:14px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,36,54,.45))}.top-donate:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:0 12px 30px rgba(255,36,54,.16)}.sidebar-extra .donate-btn{display:none!important}.side-author b{text-transform:none}.side-info p{word-break:normal;overflow-wrap:break-word}.socials svg{display:block;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.topbar{top:8px}.topbar__actions{flex-wrap:wrap}.top-donate{order:-1}}


/* Donate modal centering/equal QR + robust sticky header */
main{position:relative;overflow:visible!important}.topbar{position:-webkit-sticky!important;position:sticky!important;top:12px!important;z-index:900!important}.modal-backdrop{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:24px!important;overflow:auto!important}.donate-modal{margin:auto!important;width:min(920px,94vw)!important;max-height:90dvh!important;display:flex!important;flex-direction:column!important}.donate-head>span{font-family:Arial,Helvetica,sans-serif!important;font-size:24px!important;line-height:1!important}.donate-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch!important}.donate-grid article{display:flex!important;flex-direction:column!important;min-width:0!important}.donate-grid img{width:100%!important;aspect-ratio:105603/105603;max-height:none!important;height:auto!important;object-fit:contain!important;flex:1 1 auto!important}.donate-grid article:first-child img{aspect-ratio:1/1}.donate-grid article:nth-child(2) img{aspect-ratio:1/1;background:#fff}@media(max-width:720px){.modal-backdrop{align-items:flex-start!important}.donate-grid{grid-template-columns:1fr!important}.donate-grid img{aspect-ratio:auto!important}}


/* Final donate modal + fixed header */
main{padding-top:96px!important}.topbar{position:fixed!important;top:16px!important;left:288px!important;right:388px!important;z-index:950!important;margin:0!important}.modal-backdrop{z-index:2000!important}.modal-x{display:grid!important;place-items:center!important;color:var(--ink)!important;font-size:0!important}.modal-x svg{width:18px;height:18px;display:block}.donate-head p{font-family:var(--font-sans)!important;color:var(--body)!important;font-size:13px!important;line-height:1.3!important}.donate-head h2{font-family:var(--font-sans)!important}.qr-frame{width:100%;aspect-ratio:1/1;background:#fff;border-radius:12px;display:grid;place-items:center;overflow:hidden}.qr-frame img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center!important;border-radius:0!important;background:#fff!important}.donate-grid article:nth-child(2) .qr-frame img{object-fit:cover!important}.donate-grid article>b{font-family:var(--font-sans)!important}
@media(max-width:1180px){.topbar{left:16px!important;right:16px!important}main{padding-top:92px!important}}@media(max-width:760px){.topbar{left:12px!important;right:12px!important;top:8px!important}main{padding-top:92px!important}.qr-frame img{object-fit:contain!important}}

/* Donate microcopy */
.donate-head small{display:block;margin-top:6px;max-width:520px;color:var(--body);font-family:var(--font-sans);font-size:13px;line-height:1.45}


/* Header must stay viewport-fixed: no transformed/perspective ancestor */
html,body{transform:none!important;perspective:none!important;filter:none!important;contain:none!important}
body{perspective:none!important}.topbar{position:fixed!important;top:16px!important;left:288px!important;right:388px!important;z-index:5000!important;transform:none!important;will-change:auto!important}.topbar *{transform:none}.modal-backdrop{z-index:6000!important}
@media(max-width:1180px){.topbar{left:16px!important;right:16px!important}}
@media(max-width:760px){.topbar{left:12px!important;right:12px!important;top:8px!important}}


/* Fixed shell columns: sidebar + logs stay in place */
#app{display:block!important;min-height:100vh}.sidebar{position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:260px!important;height:100vh!important;z-index:800!important;overflow:auto!important}.status{position:fixed!important;right:0!important;top:0!important;bottom:0!important;width:360px!important;height:100vh!important;z-index:800!important;overflow:hidden!important}main{margin-left:260px!important;margin-right:360px!important;min-height:100vh!important}.topbar{left:288px!important;right:388px!important}.bottom{display:none!important}@media(max-width:1180px){.sidebar{display:none!important}.status{display:none!important}main{margin-left:0!important;margin-right:0!important;padding-bottom:90px!important}.topbar{left:16px!important;right:16px!important}.sidebar-extra{display:none!important}.bottom{display:grid!important}}@media(max-width:760px){.sidebar{display:none!important}.status{display:none!important}main{margin-left:0!important;margin-right:0!important;padding-bottom:90px!important}.topbar{left:12px!important;right:12px!important;top:8px!important}.bottom{display:grid!important}}

/* Light mode polish: Sleek Tech aesthetic (inspired by openclaw.ai) */
html[data-theme="light"] {
  --canvas: #f8fafc;
  --surface: #ffffff;
  --surface2: #f1f5f9;
  --hair: #e2e8f0;
  --primary: #f43f5e;
  --soft: #fb7185;
  --deep: #be123c;
  --ink: #0f172a;
  --body: #475569;
  --muted: #64748b;
  --ok: #0d9488;
}

html[data-theme="light"] body {
  background: radial-gradient(circle at 50% 0%, rgba(244,63,94,0.03) 0%, #f8fafc 80%) !important;
  color: var(--ink) !important;
}

html[data-theme="light"] body:before {
  background-image: radial-gradient(circle, rgba(244,63,94,0.08) 0 1px, transparent 1.6px) !important;
  opacity: 0.25 !important;
}

html[data-theme="light"] body:after {
  background: linear-gradient(90deg, rgba(15,23,42,0.015) 1px, transparent 1px), linear-gradient(180deg, rgba(15,23,42,0.012) 1px, transparent 1px) !important;
  opacity: 0.15 !important;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .status {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 60px rgba(15,23,42,0.03) !important;
}

html[data-theme="light"] .brand b,
html[data-theme="light"] .status h2,
html[data-theme="light"] .top h1,
html[data-theme="light"] .section-head b,
html[data-theme="light"] .choice-card__body strong {
  color: var(--ink) !important;
}

html[data-theme="light"] .brand span,
html[data-theme="light"] .nav,
html[data-theme="light"] .cmd,
html[data-theme="light"] .lead,
html[data-theme="light"] .section-head small,
html[data-theme="light"] .choice-card__body small,
html[data-theme="light"] .sys-row span {
  color: var(--body) !important;
}

html[data-theme="light"] .nav:hover,
html[data-theme="light"] .nav.active {
  background: #fff1f2 !important;
  border-color: #fca5a5 !important;
  color: var(--primary) !important;
}

html[data-theme="light"] .nav.active {
  box-shadow: inset 3px 0 0 var(--primary), 0 8px 24px rgba(244,63,94,0.05) !important;
}

html[data-theme="light"] .cmd,
html[data-theme="light"] .side-info,
html[data-theme="light"] .topbar,
html[data-theme="light"] .setup-copy,
html[data-theme="light"] .setup-section,
html[data-theme="light"] .card,
html[data-theme="light"] .choice-card,
html[data-theme="light"] .system-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15,23,42,0.04), inset 0 1px 0 #fff !important;
}

html[data-theme="light"] .setup-copy {
  background: linear-gradient(135deg, rgba(6,182,212,0.04), #ffffff, rgba(244,63,94,0.03)) !important;
  border-color: rgba(6,182,212,0.15) !important;
}

html[data-theme="light"] .setup-section:before {
  background: linear-gradient(135deg, rgba(6,182,212,0.03), transparent 45%) !important;
}

html[data-theme="light"] .choice-card {
  background: #ffffff !important;
}

html[data-theme="light"] .choice-card:hover {
  border-color: rgba(244,63,94,0.4) !important;
  box-shadow: 0 20px 48px rgba(15,23,42,0.06), inset 0 1px 0 #fff !important;
}

html[data-theme="light"] .choice-card:has(input:checked),
html[data-theme="light"] .choice-card.is-selected {
  background: linear-gradient(145deg, rgba(244,63,94,0.05), #ffffff) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 16px 40px rgba(244,63,94,0.08), 0 0 0 1px rgba(244,63,94,0.15) inset !important;
}

html[data-theme="light"] .choice-card__icon {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 8px 20px rgba(15,23,42,0.03) !important;
}

html[data-theme="light"] .choice-card__meta em {
  background: #fff1f2 !important;
  border-color: #fca5a5 !important;
  color: var(--primary) !important;
}

html[data-theme="light"] .choice-card__meta i {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}

html[data-theme="light"] .mini-pill,
html[data-theme="light"] .top-donate {
  background: #fff1f2 !important;
  border-color: #fca5a5 !important;
  color: var(--primary) !important;
}

html[data-theme="light"] .seg {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .seg__btn {
  color: #475569 !important;
}

html[data-theme="light"] .seg__btn.is-active {
  background: linear-gradient(135deg, var(--primary), var(--soft)) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(244,63,94,0.2) !important;
}

html[data-theme="light"] .install-cta {
  color: #fff !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--soft) 52%, var(--deep) 100%) !important;
  box-shadow: 0 16px 36px rgba(244,63,94,0.2) !important;
}

html[data-theme="light"] .install-cta small {
  color: rgba(255,255,255,0.8) !important;
}

html[data-theme="light"] .file textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}


/* Layout update: logs under system, no right column */
#app{display:block!important;min-height:100vh}
.status{display:none!important}
main{margin-left:260px!important;margin-right:0!important;min-height:100vh!important;max-width:none!important}
.topbar{left:288px!important;right:28px!important}
.setup-shell{grid-template-columns:minmax(0,1fr) 340px!important;align-items:start!important}
.setup-side{display:grid;gap:18px;align-content:start;position:sticky;top:96px}
.logs-card{min-height:300px}
.logs-card .terminal{height:300px!important;max-height:42vh!important}
.system-card{min-height:auto!important}
@media(max-width:1180px){main{margin-left:0!important;margin-right:0!important;padding-bottom:90px!important}.topbar{left:16px!important;right:16px!important}.setup-shell{grid-template-columns:1fr!important}.setup-side{position:static!important}.logs-card .terminal{height:260px!important;max-height:none!important}}
@media(max-width:760px){main{margin-left:0!important;margin-right:0!important;padding-bottom:90px!important}.topbar{left:12px!important;right:12px!important}.setup-shell{grid-template-columns:1fr!important}.setup-side{position:static!important}.logs-card .terminal{height:220px!important}}

/* Compact logo selector cards */
.os-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-bottom:0!important}
.logo-card{min-height:132px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:14px!important;text-align:center!important;padding:18px 12px!important;border-radius:20px!important}
.logo-card .choice-card__icon{width:58px!important;height:58px!important;border-radius:18px!important}
.logo-card .choice-card__icon img{width:36px!important;height:36px!important}
.logo-card .choice-card__body{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important}
.logo-card .choice-card__body strong{font-size:16px!important;line-height:1.1!important}
.logo-card .choice-card__body small{font-size:11px!important;line-height:1.1!important;color:var(--muted)!important}
.logo-card:has(input:checked):after,.logo-card.is-selected:after{display:none!important}
.logo-card:has(input:checked) .choice-card__icon,.logo-card.is-selected .choice-card__icon{box-shadow:0 16px 36px rgba(255,36,54,.18),inset 0 1px 0 rgba(255,255,255,.22)!important}
.bot-channel-static{pointer-events:none}
.bot-channel-static .choice-card__body small{color:var(--body)!important}
@media(max-width:1180px){.os-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:900px){.os-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.logo-card{min-height:118px!important}}
@media(max-width:520px){.os-grid,.mode-grid{grid-template-columns:1fr!important}}

/* Move setup intro to right side */
.setup-main{gap:20px!important}
.setup-side .setup-copy{display:block!important;min-height:auto!important;padding:18px!important;margin:0!important;border-radius:20px!important}
.setup-side .setup-copy h2{margin:12px 0 10px!important;font-size:19px!important;line-height:1.18!important;letter-spacing:-.035em!important}
.setup-side .setup-copy .lead{font-size:14px!important;line-height:1.55!important;max-width:none!important;margin:0!important}
.setup-side .mini-pill{white-space:normal!important;line-height:1.2!important}
@media(max-width:1180px){.setup-side .setup-copy{order:-1}}

/* Refined install CTA + native icon polish */
.install-cta{
  min-height:62px!important;
  border-radius:18px!important;
  border-color:rgba(255,255,255,.10)!important;
  background:linear-gradient(135deg,#9f0714 0%,#e11d30 48%,#7f0610 100%)!important;
  color:#fff!important;
  box-shadow:0 18px 50px rgba(255,36,54,.18),inset 0 1px 0 rgba(255,255,255,.16)!important;
  text-shadow:none!important;
}
.install-cta span{font-size:15px!important;font-weight:800!important;letter-spacing:-.01em!important;color:#fff!important}
.install-cta small{color:rgba(255,255,255,.70)!important;font-weight:500!important}
.install-cta:hover{background:linear-gradient(135deg,#b80b19 0%,#f23849 48%,#930815 100%)!important;box-shadow:0 22px 64px rgba(255,36,54,.24),inset 0 1px 0 rgba(255,255,255,.20)!important;transform:translateY(-1px)}
.install-cta:active{transform:translateY(0);box-shadow:0 12px 34px rgba(255,36,54,.18),inset 0 2px 8px rgba(0,0,0,.18)!important}
html[data-theme="light"] .install-cta{background:linear-gradient(135deg,#b51220 0%,#ef3346 50%,#a10d19 100%)!important;box-shadow:0 16px 42px rgba(239,51,70,.20),inset 0 1px 0 rgba(255,255,255,.22)!important}
html[data-theme="light"] .install-cta:hover{background:linear-gradient(135deg,#c81727 0%,#ff4b5d 50%,#b51220 100%)!important;box-shadow:0 20px 56px rgba(239,51,70,.26),inset 0 1px 0 rgba(255,255,255,.24)!important}
.logo-card .choice-card__icon img[src^="data:image/svg+xml"]{width:42px!important;height:42px!important;filter:drop-shadow(0 10px 18px rgba(255,36,54,.22))!important}

/* Log copy controls */
.card-head,.log-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-head h3{margin:0}
.log-toolbar{margin:-6px 0 12px}
.copy-log,.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,36,54,.26);background:rgba(255,255,255,.05);color:var(--body);border-radius:12px;padding:8px 11px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:.18s}
.icon-btn{width:36px;height:36px;padding:0;border-radius:10px;flex:0 0 auto}
.copy-log svg,.icon-btn svg{width:17px;height:17px}
.copy-log:hover,.icon-btn:hover{color:var(--ink);border-color:var(--primary);background:rgba(255,36,54,.10);transform:translateY(-1px)}
.copy-log.is-copied,.icon-btn.is-copied{color:var(--ok);border-color:rgba(25,209,143,.45);background:rgba(25,209,143,.10)}
html[data-theme="light"] .copy-log,html[data-theme="light"] .icon-btn{background:#fff7f8;border-color:#f0c8ce;color:#6b5961}
html[data-theme="light"] .copy-log:hover,html[data-theme="light"] .icon-btn:hover{background:#fff1f2;color:var(--ink);border-color:#ff9faa}

/* Bot creator */
.bot-shell{display:grid;gap:18px}
.bot-create{display:grid;gap:18px}
.bot-channel-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.bot-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bot-form-grid label{display:grid;gap:8px;color:var(--body);font-size:13px;font-weight:800}
.bot-form-grid label.wide{grid-column:1/-1}
.bot-form-grid input,.bot-form-grid textarea{
  width:100%;border:1px solid rgba(255,36,54,.22);border-radius:14px;background:rgba(255,255,255,.055);
  color:var(--ink);padding:12px 13px;font:inherit;outline:none;resize:vertical;
}
.bot-form-grid input:focus,.bot-form-grid textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,36,54,.12)}
.bot-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bot-actions .primary{border:0;border-radius:14px;padding:12px 18px;background:linear-gradient(135deg,#e11d30,#ff3b4d);color:#fff;font-weight:900;cursor:pointer}
.bot-message{color:var(--body);font-size:13px;font-weight:800}
html[data-theme="light"] .bot-form-grid input,html[data-theme="light"] .bot-form-grid textarea{background:#fff;border-color:#f0c8ce;color:#171014}
@media(max-width:900px){.bot-channel-grid{grid-template-columns:1fr!important}.bot-form-grid{grid-template-columns:1fr}}

/* Bot dashboard v2: middle content + right runtime column + bottom tree editor */
.bot-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 380px!important;gap:18px!important;align-items:start!important}
.bot-main{min-height:300px!important}
.bot-side{position:sticky;top:78px}
.bot-side h3{margin-top:0}
.bot-files-panel{grid-column:1/-1;min-height:420px}
.existing-project-card{display:grid;gap:10px;margin-top:14px}
.existing-project-actions{display:flex;gap:8px;flex-wrap:wrap}
.detected-projects{display:grid;gap:10px;max-height:260px;overflow:auto}
.detected-project{position:relative;display:grid;gap:8px;align-content:start;min-height:118px;text-align:left;border:1px solid rgba(255,36,54,.18);background:rgba(255,255,255,.035);color:var(--ink);border-radius:14px;padding:12px 144px 12px 12px;cursor:pointer;overflow:hidden;transition:.22s ease border-color,.22s ease transform,.22s ease box-shadow}
.detected-project:hover{border-color:rgba(255,255,255,.2);transform:translateY(-1px)}
.detected-project.active{border-color:rgba(255,36,54,.18);background:rgba(255,255,255,.035);box-shadow:inset 3px 0 0 var(--primary)}
.detected-project.is-loading{border-color:#7dd3fc;box-shadow:0 0 0 1px rgba(125,211,252,.25),0 18px 50px rgba(125,211,252,.10)}
.detected-project__shine{position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.16) 50%,transparent 75%);pointer-events:none;opacity:0}
.detected-project.is-loading .detected-project__shine{opacity:1;animation:projectShine 1.15s linear infinite}
.detected-project__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.detected-project__loading{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(125,211,252,.45);background:rgba(14,165,233,.12);color:#bae6fd;font-size:11px;font-weight:900;white-space:nowrap;flex:0 0 auto}
.detected-project__loading svg{width:12px;height:12px;animation:buttonSpin .8s linear infinite}
.detected-project small{display:block;color:var(--muted);word-break:break-all;white-space:normal;line-height:1.35}
.detected-project__meta{display:flex!important;gap:8px;flex-wrap:wrap;margin-top:2px}
.detected-project__actions{position:absolute;top:50%;right:12px;transform:translateY(-50%);display:flex!important;justify-content:flex-end;align-items:center;gap:8px}
.detected-project__actions .secondary{min-width:110px}
.icon-btn2{display:inline-flex;align-items:center;gap:8px}
.icon-btn2 svg{width:16px;height:16px;flex:0 0 auto}\r
.btn-icon{display:inline-flex!important;align-items:center!important;gap:7px!important}\r
.btn-icon svg{width:15px!important;height:15px!important;max-width:15px!important;max-height:15px!important;flex:0 0 15px!important}
.danger-soft{border-color:rgba(255,90,107,.28)!important;color:#ffb0b8!important}
.danger-soft:hover{border-color:#ff5a6b!important;color:#fff!important;background:rgba(255,90,107,.14)!important}
.mini-pill{display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,36,54,.55);font-size:12px;font-weight:800;letter-spacing:.2px}
.mini-pill--os{border-color:#64748b;color:#cbd5e1}
.mini-pill--docker{border-color:#2496ed;color:#9bd5ff}
.mini-pill--native{border-color:#7c5cff;color:#cfc4ff}
.channel-tabs{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.channel-tabs button{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,36,54,.24);background:rgba(255,255,255,.045);color:var(--body);border-radius:999px;padding:9px 12px;font-weight:900;cursor:pointer}
.channel-tabs button.active{background:rgba(255,36,54,.16);border-color:var(--primary);color:var(--ink);box-shadow:0 0 0 1px rgba(255,36,54,.18) inset}
.channel-tabs img{width:18px;height:18px}.channel-tabs span{display:grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;color:var(--muted)}
.bot-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.bot-item{position:relative;display:grid;gap:8px;padding:16px;border:1px solid rgba(255,36,54,.22);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:var(--ink);text-align:left;cursor:pointer}
.bot-item.active{border-color:var(--red);box-shadow:0 0 0 1px rgba(255,43,61,.22),0 18px 50px rgba(255,36,54,.12)}
.bot-item b{font-size:17px}.bot-item code{width:max-content}.bot-item small{color:var(--muted);word-break:break-all}
.bot-item-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px;opacity:0;transform:translateY(-2px);transition:.15s}
.bot-item:hover .bot-item-actions{opacity:1;transform:none}
.bot-edit,.bot-delete{width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,36,54,.32);background:rgba(255,36,54,.12);color:var(--ink);font-size:15px;line-height:1;cursor:pointer}
.bot-edit{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.bot-delete{background:rgba(255,36,54,.16);font-size:20px}
.bot-edit:hover{background:rgba(255,255,255,.12)}
.bot-delete:hover{background:var(--red);color:white}
.bot-edit,.bot-delete{display:grid;place-items:center;padding:0}
.bot-edit svg{width:14px;height:14px;display:block}
.bot-actions .btn-icon svg,.cred-save.btn-icon svg{width:16px;height:16px}
.empty-create{min-height:170px;display:grid;place-items:center;text-align:center;align-content:center;gap:10px}
.runtime-links{display:grid;gap:10px;margin-top:14px}
.runtime-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(255,36,54,.24);border-radius:14px;padding:12px 13px;color:var(--ink);text-decoration:none;background:rgba(255,255,255,.045);font-weight:900}
.runtime-badge{border-radius:999px;padding:4px 8px;font-size:11px;text-transform:uppercase;border:1px solid currentColor}
.runtime-badge.ok{color:var(--ok)}.runtime-badge.bad{color:#ff4d5e}.runtime-badge.warn{color:#fbbf24}
.runtime-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 12px}
.runtime-status-card{display:grid;gap:10px;border:1px solid rgba(255,36,54,.24);border-radius:16px;padding:13px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:var(--ink);text-decoration:none;font-weight:900}
.runtime-status-card span{font-size:13px}.runtime-status-card .runtime-badge{flex:0 0 auto}
.runtime-status-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.runtime-open-btn{display:flex;align-items:center;justify-content:center;min-height:32px;border-radius:11px;border:1px solid rgba(255,36,54,.28);background:rgba(255,36,54,.12);color:var(--ink);text-decoration:none;font-size:12px;font-weight:900}
.runtime-open-btn:hover{background:var(--red);color:#fff}
.credential-panel{display:grid;gap:12px;margin-top:14px}
.cred-field{display:grid;gap:7px;color:var(--body);font-size:12px;font-weight:900}
.cred-field>span{color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cred-field small{color:#fbbf24;font-weight:700}
.cred-input-wrap{display:flex;gap:8px}
.cred-input-wrap input{min-width:0;flex:1;border:1px solid rgba(255,36,54,.22);border-radius:13px;background:rgba(255,255,255,.055);color:var(--ink);padding:11px 12px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;outline:none}
.cred-input-wrap input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,36,54,.12)}
.cred-toggle{width:auto!important;padding:8px 10px!important;border-radius:12px!important;font-size:12px!important}
.cred-save{min-height:42px!important;border-radius:14px!important}
.cred-msg{color:var(--ok);font-size:12px;font-weight:900}
.bot-files-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.bot-files-head h3{margin:0}
.project-path-line{margin:6px 0 0;color:var(--muted);font-size:12px;font-weight:800}
.project-path-line code{word-break:break-all}
.file-workbench{display:grid;grid-template-columns:280px minmax(0,1fr);gap:14px;min-height:360px}
.file-tree{border:1px solid rgba(255,36,54,.18);border-radius:16px;background:rgba(255,255,255,.035);padding:8px;overflow:auto;max-height:520px}
.file-tree button{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:0;background:transparent;color:var(--body);padding:9px 10px;border-radius:10px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden}
.file-tree button span{overflow:hidden;text-overflow:ellipsis}
.file-tree button:hover,.file-tree button.active{background:rgba(255,36,54,.12);color:var(--ink)}
.file-tree--nested{display:block}
.tree-row{display:flex!important;align-items:center!important;gap:7px!important;width:100%!important;padding:9px 10px 9px var(--pad)!important;border:0!important;background:transparent!important;color:var(--body)!important;border-radius:10px!important;text-align:left!important;font:inherit!important;font-size:13px!important;cursor:pointer!important;white-space:nowrap!important;overflow:hidden!important}
.tree-row b{font-weight:800;overflow:hidden;text-overflow:ellipsis}
.tree-row span{flex:0 0 auto}
.tree-row:hover,.tree-row.active{background:rgba(255,36,54,.12)!important;color:var(--ink)!important}
.tree-row--dir b{color:var(--ink)}
.tree-row.is-disabled{opacity:.48;cursor:not-allowed!important}
.tree-editor--empty{display:grid;place-items:center;color:var(--muted)}
.tree-editor{width:100%;min-height:520px;border:1px solid rgba(255,36,54,.20);border-radius:16px;background:rgba(0,0,0,.22);color:var(--ink);padding:14px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;outline:none}
.tree-editor:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,36,54,.10)}
html[data-theme="light"] .channel-tabs button,html[data-theme="light"] .runtime-btn,html[data-theme="light"] .runtime-status-card,html[data-theme="light"] .runtime-open-btn,html[data-theme="light"] .bot-item,html[data-theme="light"] .file-tree{background:#fff7f8;border-color:#f0c8ce}
html[data-theme="light"] .cred-input-wrap input{background:#fff;color:#111827;border-color:#f0c8ce}
html[data-theme="light"] .tree-editor{background:#fff;color:#111827;border-color:#f0c8ce}
@media(max-width:1180px){.bot-layout{grid-template-columns:1fr!important}.bot-side{position:static}.bot-files-panel{grid-column:auto}.file-workbench{grid-template-columns:1fr}.file-tree{max-height:220px}.tree-editor{min-height:360px}}
@keyframes projectShine{to{transform:translateX(120%)}}

/* Bot create modal */
.bot-modal{width:min(920px,94vw)!important}
.bot-modal .bot-create{display:grid;gap:16px}
.bot-modal .bot-channel-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.bot-modal-backdrop{animation:modalFade .18s ease!important}
.bot-modal{animation:modalPop .28s cubic-bezier(.16,1,.3,1)!important}
@media(max-width:760px){.bot-modal .bot-channel-grid{grid-template-columns:1fr!important}}

/* Global async button loading */
button.is-loading,
a.is-loading,
button.is-press-loading{
  position:relative!important;
  opacity:.82!important;
}
button.is-loading,
a.is-loading{
  pointer-events:none!important;
  cursor:wait!important;
}
button.is-loading::after,
a.is-loading::after,
button.is-press-loading::after{
  content:""!important;
  display:inline-block!important;
  width:1em!important;
  height:1em!important;
  margin-left:.55em!important;
  border:2px solid currentColor!important;
  border-right-color:transparent!important;
  border-radius:999px!important;
  vertical-align:-.18em!important;
  animation:buttonSpin .68s linear infinite!important;
}
.icon-btn.is-loading::after,
.modal-x.is-loading::after,
.bot-delete.is-loading::after,
.icon-btn.is-press-loading::after,
.modal-x.is-press-loading::after,
.bot-delete.is-press-loading::after{
  position:absolute!important;
  inset:50% auto auto 50%!important;
  margin:-.5em 0 0 -.5em!important;
}
button.is-loading:disabled{filter:saturate(.9)}
@keyframes buttonSpin{to{transform:rotate(360deg)}}

/* Dashboard + bot split */
.dash-shell{display:grid;gap:18px}.dash-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}.dash-hero h2{margin:0;font-size:28px;letter-spacing:-.03em}.dash-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.dash-metric{display:grid;gap:8px}.dash-metric span{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}.dash-metric strong{font-size:24px;letter-spacing:-.03em}.dash-metric small{color:var(--body)}.dash-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:18px}.project-switcher{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.project-chip{position:relative;display:grid;gap:6px;text-align:left;border:1px solid rgba(255,36,54,.22);background:rgba(255,255,255,.045);border-radius:16px;padding:14px;color:var(--ink);cursor:pointer}.project-chip.active,.project-chip:hover{border-color:var(--primary);background:rgba(255,36,54,.10)}.project-chip small{color:var(--muted);word-break:break-all}.project-chip.is-loading-chip::after{content:"";position:absolute;top:10px;right:10px;width:14px;height:14px;border:2px solid #cdeefe;border-right-color:transparent;border-radius:999px;animation:buttonSpin .7s linear infinite}.dash-version-list{display:grid;gap:10px;margin-top:12px}.dash-version-list>div,.bot-meta-grid>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}.dash-version-list span,.bot-meta-grid span{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}.dash-logs .terminal{height:320px!important;max-height:42vh}.bot-layout--single{grid-template-columns:1fr!important}.bot-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.bot-meta{display:grid;gap:8px}@media(max-width:1180px){.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-layout{grid-template-columns:1fr}.dash-hero{grid-template-columns:1fr}.dash-actions{justify-content:flex-start}}@media(max-width:760px){.dash-grid,.bot-meta-grid{grid-template-columns:1fr}.project-switcher{grid-template-columns:1fr}}
.runtime-card-actions{display:flex;gap:8px;align-items:center}.runtime-card-actions .runtime-open-btn{flex:1}
.bot-main .btn-inline{width:auto!important;min-height:40px!important;padding:10px 16px!important;display:inline-flex!important;align-items:center;justify-content:center;position:static!important;bottom:auto!important;z-index:auto!important;flex:0 0 auto!important}
.feature-group{margin:8px 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.feature-card{padding:16px}
.feature-card.is-loading{position:relative;overflow:hidden;opacity:.9}
.feature-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.feature-head b{display:block;font-size:18px;margin-bottom:6px}
.feature-head p{margin:0;color:var(--body)}
.feature-switch{position:relative;display:inline-flex;flex:0 0 auto}
.feature-switch input{position:absolute;opacity:0;pointer-events:none}
.feature-switch span{width:52px;height:30px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:block;position:relative;transition:.18s}
.tree-editor:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,36,54,.10)}
html[data-theme="light"] .channel-tabs button,html[data-theme="light"] .runtime-btn,html[data-theme="light"] .runtime-status-card,html[data-theme="light"] .runtime-open-btn,html[data-theme="light"] .bot-item,html[data-theme="light"] .file-tree{background:#fff7f8;border-color:#f0c8ce}
html[data-theme="light"] .cred-input-wrap input{background:#fff;color:#111827;border-color:#f0c8ce}
html[data-theme="light"] .tree-editor{background:#fff;color:#111827;border-color:#f0c8ce}
@media(max-width:1180px){.bot-layout{grid-template-columns:1fr!important}.bot-side{position:static}.bot-files-panel{grid-column:auto}.file-workbench{grid-template-columns:1fr}.file-tree{max-height:220px}.tree-editor{min-height:360px}}
@keyframes projectShine{to{transform:translateX(120%)}}

/* Bot create modal */
.bot-modal{width:min(920px,94vw)!important}
.bot-modal .bot-create{display:grid;gap:16px}
.bot-modal .bot-channel-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.bot-modal-backdrop{animation:modalFade .18s ease!important}
.bot-modal{animation:modalPop .28s cubic-bezier(.16,1,.3,1)!important}
@media(max-width:760px){.bot-modal .bot-channel-grid{grid-template-columns:1fr!important}}

/* Global async button loading */
button.is-loading,
a.is-loading,
button.is-press-loading{
  position:relative!important;
  opacity:.82!important;
}
button.is-loading,
a.is-loading{
  pointer-events:none!important;
  cursor:wait!important;
}
button.is-loading::after,
a.is-loading::after,
button.is-press-loading::after{
  content:""!important;
  display:inline-block!important;
  width:1em!important;
  height:1em!important;
  margin-left:.55em!important;
  border:2px solid currentColor!important;
  border-right-color:transparent!important;
  border-radius:999px!important;
  vertical-align:-.18em!important;
  animation:buttonSpin .68s linear infinite!important;
}
.icon-btn.is-loading::after,
.modal-x.is-loading::after,
.bot-delete.is-loading::after,
.icon-btn.is-press-loading::after,
.modal-x.is-press-loading::after,
.bot-delete.is-press-loading::after{
  position:absolute!important;
  inset:50% auto auto 50%!important;
  margin:-.5em 0 0 -.5em!important;
}
button.is-loading:disabled{filter:saturate(.9)}
@keyframes buttonSpin{to{transform:rotate(360deg)}}

/* Dashboard + bot split */
.dash-shell{display:grid;gap:18px}.dash-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}.dash-hero h2{margin:0;font-size:28px;letter-spacing:-.03em}.dash-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.dash-metric{display:grid;gap:8px}.dash-metric span{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}.dash-metric strong{font-size:24px;letter-spacing:-.03em}.dash-metric small{color:var(--body)}.dash-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:18px}.project-switcher{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}.project-chip{position:relative;display:grid;gap:6px;text-align:left;border:1px solid rgba(255,36,54,.22);background:rgba(255,255,255,.045);border-radius:16px;padding:14px;color:var(--ink);cursor:pointer}.project-chip.active,.project-chip:hover{border-color:var(--primary);background:rgba(255,36,54,.10)}.project-chip small{color:var(--muted);word-break:break-all}.project-chip.is-loading-chip::after{content:"";position:absolute;top:10px;right:10px;width:14px;height:14px;border:2px solid #cdeefe;border-right-color:transparent;border-radius:999px;animation:buttonSpin .7s linear infinite}.dash-version-list{display:grid;gap:10px;margin-top:12px}.dash-version-list>div,.bot-meta-grid>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}.dash-version-list span,.bot-meta-grid span{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}.dash-logs .terminal{height:320px!important;max-height:42vh}.bot-layout--single{grid-template-columns:1fr!important}.bot-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.bot-meta{display:grid;gap:8px}@media(max-width:1180px){.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-layout{grid-template-columns:1fr}.dash-hero{grid-template-columns:1fr}.dash-actions{justify-content:flex-start}}@media(max-width:760px){.dash-grid,.bot-meta-grid{grid-template-columns:1fr}.project-switcher{grid-template-columns:1fr}}
.runtime-card-actions{display:flex;gap:8px;align-items:center}.runtime-card-actions .runtime-open-btn{flex:1}
.bot-main .btn-inline{width:auto!important;min-height:40px!important;padding:10px 16px!important;display:inline-flex!important;align-items:center;justify-content:center;position:static!important;bottom:auto!important;z-index:auto!important;flex:0 0 auto!important}
.feature-group{margin:8px 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.feature-card{padding:16px}
.feature-card.is-loading{position:relative;overflow:hidden;opacity:.9}
.feature-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.feature-head b{display:block;font-size:18px;margin-bottom:6px}
.feature-head p{margin:0;color:var(--body)}
.feature-switch{position:relative;display:inline-flex;flex:0 0 auto}
.feature-switch input{position:absolute;opacity:0;pointer-events:none}
.feature-switch span{width:52px;height:30px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:block;position:relative;transition:.18s}
.feature-switch span:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:#fff;transition:.18s}
.feature-switch input:checked + span{background:rgba(255,36,54,.32);border-color:rgba(255,36,54,.52)}
.feature-switch input:checked + span:after{left:25px;background:#ff4b5d}
.feature-progress{height:4px;margin-top:14px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.feature-progress i{display:block;height:100%;width:34%;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,36,54,.95),transparent);animation:featureRun 1s linear infinite}
@keyframes featureRun{from{transform:translateX(-120%)}to{transform:translateX(360%)}}
.donut-chart {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--percent) * 1%), rgba(255, 255, 255, 0.08) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.donut-chart::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: #090e1a;
  border-radius: 50%;
}

/* Light Mode Donut Overrides */
html[data-theme="light"] .donut-chart {
  background: conic-gradient(var(--primary) calc(var(--percent) * 1%), rgba(15, 23, 42, 0.06) 0) !important;
}

html[data-theme="light"] .donut-chart::before {
  background: #ffffff !important;
}
.donut-value{position:relative;font-size:18px;font-weight:800;z-index:1;letter-spacing:-0.03em}
.chart-card{display:flex;align-items:center;gap:18px;padding:16px}
.chart-info{display:flex;flex-direction:column;gap:4px}
.chart-info span{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}
.chart-info strong{font-size:18px;letter-spacing:-0.02em;line-height:1.2}
.chart-info small{color:var(--body);font-size:13px}
.chart-info span,.chart-info strong,.chart-info small{overflow-wrap:anywhere}
/* On narrow screens the chart cards sit 2-up (~162px each); stack the donut above the
   text so the labels ("Installed Extensions", model id) get the full card width. */
@media(max-width:760px){.chart-card{flex-direction:column;text-align:center;gap:10px;padding:14px}.chart-info{align-items:center}}

/* Premium Toast Notification System */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10000;
  max-width: 380px;
  pointer-events: none;
}

.toast-card {
  pointer-events: auto;
  background: rgba(16, 12, 13, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 36, 54, 0.18);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transform: translateX(130%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0;
}

.toast-card.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-card.hide {
  transform: translateX(130%);
  opacity: 0;
}

.toast-card--success {
  border-left: 4px solid var(--ok, #19d18f);
}
.toast-card--error {
  border-left: 4px solid var(--primary, #ff2436);
}
.toast-card--info {
  border-left: 4px solid var(--soft, #ff5a66);
}

.toast-card__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.toast-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.toast-card__title {
  font-weight: 750;
  font-size: 14px;
  color: var(--ink, #f8f7f7);
  letter-spacing: -0.01em;
}

.toast-card__desc {
  font-size: 12.5px;
  color: var(--body, #c9bfc0);
  line-height: 1.45;
  word-break: break-word;
}

.toast-card__close {
  background: none;
  border: none;
  color: var(--muted, #817273);
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  font-size: 20px;
  line-height: 0.8;
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.toast-card__close:hover {
  opacity: 1;
  color: var(--primary, #ff2436);
}

html[data-theme="light"] .toast-card {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 45, 63, 0.22);
  box-shadow: 0 16px 42px rgba(143, 36, 48, 0.12), inset 0 1px 0 #fff;
}
html[data-theme="light"] .toast-card__title {
  color: var(--ink, #171014);
}
html[data-theme="light"] .toast-card__desc {
  color: var(--body, #5f5258);
}

/* Premium Terminal Windows Style (macOS/Ubuntu) */
html[data-theme="dark"] .terminal {
  position: relative !important;
  padding-top: 38px !important;
  background: #020617 !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  overflow: auto !important;
}

html[data-theme="dark"] .terminal:before {
  content: "" !important;
  position: absolute !important;
  top: 13px !important;
  left: 14px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #ff5f56 !important;
  box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f !important;
  z-index: 10 !important;
}

html[data-theme="dark"] .terminal:after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 32px !important;
  background: rgba(15, 23, 42, 0.55) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

html[data-theme="dark"] .terminal p {
  color: #cbd5e1 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Premium Modal Styles in Dark Mode */
html[data-theme="dark"] .modal-backdrop {
  background: rgba(2, 6, 23, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html[data-theme="dark"] .donate-modal {
  background: linear-gradient(145deg, #090e1a, #030712) !important;
  border: 1px solid rgba(6, 182, 212, 0.22) !important;
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  border-radius: 24px !important;
}

html[data-theme="dark"] .donate-head>span {
  background: rgba(6, 182, 212, 0.12) !important;
  color: #06b6d4 !important;
  border: 1px solid rgba(6, 182, 212, 0.2) !important;
}

html[data-theme="dark"] .modal-x {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: all 0.2s ease !important;
}

html[data-theme="dark"] .modal-x:hover {
  border-color: var(--primary) !important;
  background: rgba(244, 63, 94, 0.1) !important;
  color: var(--primary) !important;
}

/* Premium Inputs in Dark Mode Modals */
html[data-theme="dark"] .field>input,
html[data-theme="dark"] .field>select,
html[data-theme="dark"] .bot-form-grid input,
html[data-theme="dark"] .bot-form-grid textarea {
  background: #020617 !important;
  border: 1px solid #1e293b !important;
  color: #f8fafc !important;
  border-radius: 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html[data-theme="dark"] .field>input:focus,
html[data-theme="dark"] .field>select:focus,
html[data-theme="dark"] .bot-form-grid input:focus,
html[data-theme="dark"] .bot-form-grid textarea:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15) !important;
}

/* Premium Tab Choices in Install Modal */
html[data-theme="dark"] .install-tab {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .install-tab:hover {
  border-color: rgba(6, 182, 212, 0.4) !important;
}

html[data-theme="dark"] .install-tab.is-active {
  border-color: #06b6d4 !important;
  background: linear-gradient(145deg, rgba(6, 182, 212, 0.12), rgba(9, 14, 26, 0.9)) !important;
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.2) inset, 0 12px 36px rgba(6, 182, 212, 0.08) !important;
}

html[data-theme="dark"] .pill-choice {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .pill-choice:hover {
  border-color: rgba(6, 182, 212, 0.4) !important;
}

html[data-theme="dark"] .pill-choice.is-active {
  border-color: #06b6d4 !important;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.14), rgba(255, 255, 255, 0.02)) !important;
}

/* Premium Modal Action Buttons */
html[data-theme="dark"] .confirm-actions button,
html[data-theme="dark"] .install-actions button,
html[data-theme="dark"] .bot-actions button {
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

html[data-theme="dark"] .confirm-actions .primary,
html[data-theme="dark"] .install-actions button[type="submit"],
html[data-theme="dark"] .bot-actions button[type="submit"] {
  background: linear-gradient(135deg, var(--primary) 0%, #db2777 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(244, 63, 94, 0.2) !important;
}

html[data-theme="dark"] .confirm-actions .primary:hover,
html[data-theme="dark"] .install-actions button[type="submit"]:hover,
html[data-theme="dark"] .bot-actions button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 30px rgba(244, 63, 94, 0.3) !important;
}

html[data-theme="dark"] .confirm-actions .secondary,
html[data-theme="dark"] .install-actions .secondary,
html[data-theme="dark"] .bot-actions .secondary {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .confirm-actions .secondary:hover,
html[data-theme="dark"] .install-actions .secondary:hover,
html[data-theme="dark"] .bot-actions .secondary:hover {
  border-color: rgba(6, 182, 212, 0.5) !important;
  color: #06b6d4 !important;
}

/* Align inline secondary buttons on Bot screen */
.bot-main .secondary.btn-inline {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  width: auto !important;
  min-height: 40px !important;
  padding: 10px 16px !important;
}

.bot-main .secondary.btn-inline:hover {
  border-color: rgba(6, 182, 212, 0.5) !important;
  color: #06b6d4 !important;
}

.bot-main .primary.btn-inline {
  background: linear-gradient(135deg, var(--primary) 0%, #db2777 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 20px rgba(244, 63, 94, 0.18) !important;
  transition: all 0.2s ease !important;
  width: auto !important;
  min-height: 40px !important;
  padding: 10px 16px !important;
}

.bot-main .primary.btn-inline:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(244, 63, 94, 0.28) !important;
}

/* Premium Skills & Plugins Separation */
.feature-group {
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--soft) !important;
  margin: 20px 0 12px 0 !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.feature-divider-wrap {
  padding: 24px 0 12px 0 !important;
}

.feature-divider {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%) !important;
  margin: 0 !important;
}

html[data-theme="light"] .feature-divider {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Premium Light Mode Polish (macOS/Ubuntu Windows Style Terminal, Modals, Buttons) */
html[data-theme="light"] .terminal {
  position: relative !important;
  padding-top: 38px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: inset 0 1px 0 #fff, 0 20px 48px rgba(15, 23, 42, 0.05) !important;
  overflow: auto !important;
}

html[data-theme="light"] .terminal:before {
  content: "" !important;
  position: absolute !important;
  top: 13px !important;
  left: 14px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #ff5f56 !important;
  box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f !important;
  z-index: 10 !important;
}

html[data-theme="light"] .terminal:after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 32px !important;
  background: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

html[data-theme="light"] .terminal p {
  color: #334155 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Light Mode Modals & Overlays */
html[data-theme="light"] .modal-backdrop {
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html[data-theme="light"] .donate-modal {
  background: linear-gradient(145deg, #ffffff, #fcfcfc) !important;
  border: 1px solid rgba(255, 45, 63, 0.22) !important;
  box-shadow: 0 40px 100px rgba(143, 36, 48, 0.12), inset 0 1px 0 #fff !important;
  border-radius: 24px !important;
}

html[data-theme="light"] .donate-head>span {
  background: rgba(255, 45, 63, 0.08) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(255, 45, 63, 0.15) !important;
}

html[data-theme="light"] .modal-x {
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .modal-x:hover {
  border-color: var(--primary) !important;
  background: rgba(255, 45, 63, 0.06) !important;
  color: var(--primary) !important;
}

/* Light Mode Text Inputs inside Modals */
html[data-theme="light"] .field>input,
html[data-theme="light"] .field>select,
html[data-theme="light"] .bot-form-grid input,
html[data-theme="light"] .bot-form-grid textarea {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html[data-theme="light"] .field>input:focus,
html[data-theme="light"] .field>select:focus,
html[data-theme="light"] .bot-form-grid input:focus,
html[data-theme="light"] .bot-form-grid textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 45, 63, 0.12) !important;
}

/* Light Mode Tab Choices in Install Modal */
html[data-theme="light"] .install-tab {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .install-tab:hover {
  border-color: var(--primary) !important;
}

html[data-theme="light"] .install-tab.is-active {
  border-color: var(--primary) !important;
  background: linear-gradient(145deg, rgba(255, 45, 63, 0.06), #ffffff) !important;
  box-shadow: 0 0 0 1px rgba(255, 45, 63, 0.15) inset, 0 12px 36px rgba(255, 45, 63, 0.05) !important;
}

html[data-theme="light"] .pill-choice {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

html[data-theme="light"] .pill-choice:hover {
  border-color: var(--primary) !important;
}

html[data-theme="light"] .pill-choice.is-active {
  border-color: var(--primary) !important;
  background: linear-gradient(135deg, rgba(255, 45, 63, 0.08), #ffffff) !important;
}

/* Light Mode Modal Buttons */
html[data-theme="light"] .confirm-actions button,
html[data-theme="light"] .install-actions button,
html[data-theme="light"] .bot-actions button {
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .confirm-actions .primary,
html[data-theme="light"] .install-actions button[type="submit"],
html[data-theme="light"] .bot-actions button[type="submit"] {
  background: linear-gradient(135deg, var(--primary) 0%, #db2777 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(255, 45, 63, 0.2) !important;
}

html[data-theme="light"] .confirm-actions .primary:hover,
html[data-theme="light"] .install-actions button[type="submit"]:hover,
html[data-theme="light"] .bot-actions button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(255, 45, 63, 0.26) !important;
}

html[data-theme="light"] .confirm-actions .secondary,
html[data-theme="light"] .install-actions .secondary,
html[data-theme="light"] .bot-actions .secondary {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .confirm-actions .secondary:hover,
html[data-theme="light"] .install-actions .secondary:hover,
html[data-theme="light"] .bot-actions .secondary:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Align inline secondary buttons on Bot screen in Light Mode */
html[data-theme="light"] .bot-main .secondary.btn-inline {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .bot-main .secondary.btn-inline:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Premium Bot Channel Tabs Styling */
.channel-tabs {
  display: flex !important;
  gap: 12px !important;
  margin: 18px 0 !important;
  border-bottom: 1px solid var(--hair) !important;
  padding-bottom: 12px !important;
}

.channel-tabs button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 1px solid var(--hair) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.channel-tabs button img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  filter: grayscale(100%) opacity(60%) !important;
  transition: all 0.2s ease !important;
}

.channel-tabs button span {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  transition: all 0.2s ease !important;
}

/* Hover State */
.channel-tabs button:hover {
  border-color: var(--primary) !important;
  color: var(--ink) !important;
}

/* Active State in Dark Mode */
html[data-theme="dark"] .channel-tabs button.active {
  border-color: var(--primary) !important;
  background: rgba(244, 63, 94, 0.1) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.15) !important;
}

html[data-theme="dark"] .channel-tabs button.active img {
  filter: none !important;
}

html[data-theme="dark"] .channel-tabs button.active span {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Active State in Light Mode */
html[data-theme="light"] .channel-tabs button {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html[data-theme="light"] .channel-tabs button img {
  filter: grayscale(100%) opacity(80%) !important;
}

html[data-theme="light"] .channel-tabs button span {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .channel-tabs button.active {
  border-color: var(--primary) !important;
  background: rgba(244, 63, 94, 0.06) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.06) !important;
}

html[data-theme="light"] .channel-tabs button.active img {
  filter: none !important;
}

html[data-theme="light"] .channel-tabs button.active span {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Move loading spinner to top-right of project-chip with beautiful styling */
.project-chip {
  position: relative !important;
}

.project-chip.is-loading::after {
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(244, 63, 94, 0.2) !important;
  border-top-color: var(--primary) !important;
  border-radius: 50% !important;
  animation: spinProjectSpinner 0.8s linear infinite !important;
  margin: 0 !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
}

@keyframes spinProjectSpinner {
  to { transform: rotate(360deg); }
}

/* Premium Bot Item Actions Styling (Visible by Default) */
.bot-item {
  position: relative !important;
}

.bot-item-actions {
  display: flex !important;
  gap: 6px !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  opacity: 1 !important; /* Always visible */
  pointer-events: auto !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
}

.bot-item-actions button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 1px solid var(--hair) !important;
  background: var(--surface2) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  padding: 0 !important;
  opacity: 0.75 !important; /* Subtle visible state */
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bot-item-actions button svg {
  width: 12px !important;
  height: 12px !important;
}

/* Hover effects for actions buttons */
.bot-item-actions button:hover {
  opacity: 1 !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.15) !important;
}

/* Specific styling for delete button to glow red on hover */
.bot-item-actions button.bot-delete:hover {
  color: #ff4b5d !important;
  border-color: #ff4b5d !important;
  box-shadow: 0 4px 12px rgba(255, 75, 93, 0.2) !important;
}

/* Light Mode Overrides for Bot Item Actions */
html[data-theme="light"] .bot-item-actions button {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html[data-theme="light"] .bot-item-actions button:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Bot view Horizontal Tabs styling */
/* Premium Bot Channel Tabs Styling */
.channel-tabs {
  display: flex !important;
  gap: 12px !important;
  margin: 18px 0 !important;
  border-bottom: 1px solid var(--hair) !important;
  padding-bottom: 12px !important;
}

.channel-tabs button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 1px solid var(--hair) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.channel-tabs button img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  filter: grayscale(100%) opacity(60%) !important;
  transition: all 0.2s ease !important;
}

.channel-tabs button span {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  transition: all 0.2s ease !important;
}

/* Hover State */
.channel-tabs button:hover {
  border-color: var(--primary) !important;
  color: var(--ink) !important;
}

/* Active State in Dark Mode */
html[data-theme="dark"] .channel-tabs button.active {
  border-color: var(--primary) !important;
  background: rgba(244, 63, 94, 0.1) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.15) !important;
}

html[data-theme="dark"] .channel-tabs button.active img {
  filter: none !important;
}

html[data-theme="dark"] .channel-tabs button.active span {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Active State in Light Mode */
html[data-theme="light"] .channel-tabs button {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html[data-theme="light"] .channel-tabs button img {
  filter: grayscale(100%) opacity(80%) !important;
}

html[data-theme="light"] .channel-tabs button span {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] .channel-tabs button.active {
  border-color: var(--primary) !important;
  background: rgba(244, 63, 94, 0.06) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.06) !important;
}

html[data-theme="light"] .channel-tabs button.active img {
  filter: none !important;
}

html[data-theme="light"] .channel-tabs button.active span {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Move loading spinner to top-right of project-chip with beautiful styling */
.project-chip {
  position: relative !important;
}

.project-chip.is-loading::after {
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(244, 63, 94, 0.2) !important;
  border-top-color: var(--primary) !important;
  border-radius: 50% !important;
  animation: spinProjectSpinner 0.8s linear infinite !important;
  margin: 0 !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
}

@keyframes spinProjectSpinner {
  to { transform: rotate(360deg); }
}

/* Premium Bot Item Actions Styling (Visible by Default) */
.bot-item {
  position: relative !important;
}

.bot-item-actions {
  display: flex !important;
  gap: 6px !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  opacity: 1 !important; /* Always visible */
  pointer-events: auto !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
}

.bot-item-actions button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 1px solid var(--hair) !important;
  background: var(--surface2) !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  padding: 0 !important;
  opacity: 0.75 !important; /* Subtle visible state */
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bot-item-actions button svg {
  width: 12px !important;
  height: 12px !important;
}

/* Hover effects for actions buttons */
.bot-item-actions button:hover {
  opacity: 1 !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.15) !important;
}

/* Specific styling for delete button to glow red on hover */
.bot-item-actions button.bot-delete:hover {
  color: #ff4b5d !important;
  border-color: #ff4b5d !important;
  box-shadow: 0 4px 12px rgba(255, 75, 93, 0.2) !important;
}

/* Light Mode Overrides for Bot Item Actions */
html[data-theme="light"] .bot-item-actions button {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

html[data-theme="light"] .bot-item-actions button:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Bot view Horizontal Tabs styling */
.bot-meta .project-switcher {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 6px !important;
  border-bottom: 1px solid var(--hair) !important;
  padding-bottom: 0 !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  scrollbar-width: none !important;
}

.bot-meta .project-switcher::-webkit-scrollbar {
  display: none !important;
}

.project-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px 10px 16px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--hair) !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 10px 10px 0 0 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  min-width: 150px !important;
  max-width: 240px !important;
  flex-shrink: 0 !important;
  margin-bottom: -1px !important;
}

.project-tab-btn:hover {
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 36, 54, 0.3) !important;
}

.project-tab-btn.active {
  color: var(--ink) !important;
  background: rgba(255, 36, 54, 0.08) !important;
  border-color: var(--hair) !important;
  border-bottom-color: var(--primary) !important;
}

.project-tab-info {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  flex: 1 !important;
  min-width: 0 !important;
  pointer-events: none !important;
}

.project-tab-info b {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--body) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.project-tab-btn.active .project-tab-info b {
  color: var(--ink) !important;
}

.project-tab-info small {
  font-size: 10px !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  margin-top: 2px !important;
}

.project-tab-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  z-index: 5 !important;
}

.project-tab-delete:hover {
  background: rgba(255, 36, 54, 0.16) !important;
  color: #ff4b5d !important;
}

.project-tab-delete svg {
  width: 14px !important;
  height: 14px !important;
}

/* Light mode support for Tabs */
html[data-theme="light"] .project-tab-btn {
  background: rgba(0, 0, 0, 0.02) !important;
}
html[data-theme="light"] .project-tab-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .project-tab-btn.active {
  background: rgba(244, 63, 94, 0.06) !important;
  border-bottom-color: var(--primary) !important;
}

/* Premium Native Bottombar styling */
.bottom {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 72px !important;
  display: none !important;
  grid-template-columns: repeat(5, 1fr) !important;
  background: rgba(16, 16, 16, 0.72) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid rgba(255, 36, 54, 0.15) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6) !important;
  z-index: 9999 !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

.bottom .nav {
  position: relative !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: transparent !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  padding: 8px 0 !important;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  height: 100% !important;
  box-shadow: none !important;
}

.bottom .nav svg {
  width: 22px !important;
  height: 22px !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.bottom .nav small {
  font-size: 11px !important;
  font-weight: 500 !important;
  display: block !important;
}

/* Active Bottom Tab indicator & micro-animations */
.bottom .nav.active {
  color: var(--primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bottom .nav.active svg {
  transform: translateY(-4px) scale(1.1) !important;
  color: var(--primary) !important;
}

.bottom .nav-ico { position: relative; display: inline-flex; line-height: 0; }
.bottom .nav.active .nav-ico::after {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  right: -5px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background-color: var(--primary) !important;
  box-shadow: 0 0 8px var(--primary) !important;
  animation: pulseActiveDot 1.5s infinite alternate !important;
}

@keyframes pulseActiveDot {
  0% {
    opacity: 0.6;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* Light Mode Overrides for Bottom Nav */
html[data-theme="light"] .bottom {
  background: rgba(255, 255, 255, 0.8) !important;
  border-top: 1px solid rgba(244, 63, 94, 0.15) !important;
  box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.08) !important;
}
html[data-theme="light"] .bottom .nav {
  color: var(--muted) !important;
}
html[data-theme="light"] .bottom .nav.active {
  color: var(--primary) !important;
}

/* Right-align version strings in lists when wrapped */
.dash-version-list div b {
  text-align: right !important;
}

/* Ensure bottom navigation bar is visible on tablet and mobile (under 1180px) */
@media (max-width: 1180px) {
  .bottom {
    display: grid !important;
  }
}

/* Beautiful "+ New Bot" card style */
.bot-create-card {
  border: 1.5px dashed rgba(255, 36, 54, 0.28) !important;
  background: rgba(255, 36, 54, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
  min-height: 104px !important;
  border-radius: 18px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bot-create-card:hover {
  border-color: var(--primary) !important;
  background: rgba(255, 36, 54, 0.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 36, 54, 0.12) !important;
}

.bot-create-card .plus-icon {
  font-size: 24px !important;
  font-weight: 300 !important;
  color: var(--primary) !important;
  line-height: 1 !important;
}

.bot-create-card span:not(.plus-icon) {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}

.bot-create-card:hover span:not(.plus-icon) {
  color: var(--ink) !important;
}

/* Light Mode Overrides for "+ New Bot" card */
html[data-theme="light"] .bot-create-card {
  border-color: rgba(244, 63, 94, 0.4) !important;
  background: rgba(244, 63, 94, 0.02) !important;
}

html[data-theme="light"] .bot-create-card:hover {
  background: rgba(244, 63, 94, 0.05) !important;
}

/* Facebook Messenger bot form layout (responsive) */
.fb-fields{grid-column:1/-1;display:grid;gap:14px}
.fb-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fb-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fb-fields label{display:grid;gap:8px;color:var(--body);font-size:13px;font-weight:800}
.fb-fields label.fb-wide{grid-column:1/-1}
.fb-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px}
.fb-help-link{font-size:11px;font-weight:600;color:var(--soft);text-decoration:none;white-space:nowrap}
.fb-help-link:hover{color:var(--primary);text-decoration:underline}
@media(max-width:900px){.fb-row3,.fb-row2{grid-template-columns:1fr}}

.bot-modal-chan img{width:42px;height:42px;border-radius:11px;object-fit:contain;display:block}
.fb-help-link{margin-right:8px}

/* Compact channel picker in the bot create modal (scales as more channels are added) */
.bot-channel-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))!important;gap:10px!important}
.bot-channel-grid .choice-card{min-height:auto!important;grid-template-columns:1fr!important;justify-items:center!important;text-align:center;gap:6px!important;padding:10px 8px!important;border-radius:12px!important}
.bot-channel-grid .choice-card__icon{width:34px!important;height:34px!important;border-radius:9px!important}
.bot-channel-grid .choice-card__icon img{width:20px!important;height:20px!important}
.bot-channel-grid .choice-card__body{justify-items:center!important;text-align:center;gap:0!important}
.bot-channel-grid .choice-card__body strong{font-size:13px}
.bot-channel-grid .choice-card__body small{display:none!important}
@media(max-width:760px){.bot-channel-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))!important}}
/* Mobile/tablet (bottom nav visible): keep the create/edit modal clear of the fixed native bar */
@media(max-width:1180px){
  .bot-modal-backdrop{padding-bottom:84px!important}
  .bot-modal{max-height:calc(100dvh - 108px)!important}
}
@media(max-width:760px){
  .bot-modal-backdrop{padding:12px 12px 80px!important}
  .bot-modal{max-height:calc(100dvh - 96px)!important}
  /* 2-up channel picker on phones — less scrolling than a single column */
  .bot-modal .bot-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Collapsible sidebar + status, and bot-page full-width layout */
.bot-page{display:grid;gap:18px}
.bot-top-row{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.bot-top-row .bot-side-col{display:grid;gap:18px}
@media(max-width:1180px){.bot-top-row{grid-template-columns:1fr}}
.nav-collapse-btn{position:absolute;top:14px;right:10px;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--hair);background:var(--surface2);color:var(--body);cursor:pointer;z-index:3}
.nav-collapse-btn:hover{color:var(--primary);border-color:var(--primary)}
.nav-collapse-btn svg{width:16px;height:16px;transition:transform .2s}
:root[data-nav="collapsed"] .nav-collapse-btn svg{transform:rotate(180deg)}
:root[data-nav="collapsed"] .sidebar{width:66px!important;padding-left:8px!important;padding-right:8px!important}
:root[data-nav="collapsed"] .sidebar .brand div,:root[data-nav="collapsed"] .sidebar .sidebar-nav span,:root[data-nav="collapsed"] .sidebar .sidebar-extra,:root[data-nav="collapsed"] .sidebar .cmd{display:none!important}
:root[data-nav="collapsed"] .sidebar .brand{justify-content:center}
:root[data-nav="collapsed"] .sidebar .nav{justify-content:center}
:root[data-nav="collapsed"] main{margin-left:66px!important}
:root[data-nav="collapsed"] .topbar{left:90px!important}
.sidebar,.topbar{transition:width .2s,left .2s}
main{transition:margin .2s}

/* Coming-soon channels (Discord, Lark): logo stays fully visible, corner badge, not selectable */
.choice-card.is-coming-soon{cursor:not-allowed}
.choice-card.is-coming-soon:hover{transform:none;border-color:var(--hair);box-shadow:none}
.choice-card.is-coming-soon .choice-card__body strong{opacity:.78}
.choice-card.is-coming-soon .coming-badge{position:absolute;top:8px;right:8px;z-index:3;font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:linear-gradient(135deg,#ff2436,#ff5260);color:#fff;box-shadow:0 4px 12px rgba(255,36,54,.32);white-space:nowrap;pointer-events:none}
/* Channel tabs (bot page): single horizontally-scrollable row */
.channel-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:6px}
.channel-tabs button{flex:0 0 auto;white-space:nowrap}
.channel-tabs button.is-coming-soon{opacity:.5;cursor:not-allowed}
.channel-tabs::-webkit-scrollbar{height:6px}
.channel-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
/* Bottom "native" nav bar: center the 4 items (overrides an earlier repeat(5,1fr) !important rule) */
.bottom{grid-template-columns:repeat(4,1fr)!important}
/* Tablet/mobile bot page: stop horizontal overflow so .channel-tabs scrolls instead of stretching the layout */
.bot-page,.bot-top-row,.bot-main,.bot-main-content,.bot-projects-and-bots,.bot-side-col,.bot-list{min-width:0}
@media(max-width:1180px){.bot-top-row{grid-template-columns:minmax(0,1fr)}}

/* ════════════════════════════════════════════════════════════════════════════
   Mobile UX refinements (user feedback)
   ════════════════════════════════════════════════════════════════════════════ */

/* [Hero] Dashboard already shows its title inside the hero card — drop the duplicate
   page-title header so it doesn't repeat "Dashboard vận hành" twice. */
body[data-active-tab="dashboard"] .top{display:none}

/* [Modals] While any modal is open, hide the fixed bottom nav so it can't cover the modal's
   lower content (and footer buttons) on mobile. The backdrop owns the screen at that point. */
body:has(.modal-backdrop) .bottom{display:none!important}
/* Bot / Cài đặt hero buttons sit side-by-side — keep their labels on one line. */
.dash-actions .icon-btn2{white-space:nowrap}

@media(max-width:760px){
  /* [Topbar] Keep search + theme + language on ONE row; theme becomes icon-only and the
     language globe icon is dropped so the whole bar stays compact. */
  .topbar{flex-direction:row!important;align-items:center!important;gap:8px;padding:8px 10px}
  .topbar__actions{width:auto!important;flex-wrap:nowrap!important;justify-content:flex-end!important;gap:6px}
  .topbar__actions .seg{padding:3px;gap:2px}
  .topbar__actions .seg[aria-label="theme"] .seg__btn span{display:none}
  .topbar__actions .seg[aria-label="theme"] .seg__btn{padding:8px 9px}
  .topbar__actions .seg[aria-label="lang"]>span{display:none!important}
  .topbar__actions .seg__btn{padding:6px 9px;font-size:11px}
  .search input{font-size:13px}

  /* [Connect project] The action buttons were absolutely positioned and overlapped the
     path text. Put the card into normal flow with full-width buttons below the content.
     The card used overflow:hidden + a fixed min-height and the list capped at 260px with an
     inner scroll — all of which clipped the now-in-flow buttons. Let everything grow. */
  .detected-projects{max-height:none!important;overflow:visible!important}
  .detected-project{padding:12px!important;min-height:0!important;height:auto!important;overflow:visible!important}
  .detected-project__actions{position:static!important;transform:none!important;width:100%;margin-top:4px}
  .detected-project__actions .secondary{min-width:0!important;flex:1}
  .detected-project b{font-size:14px}
  .detected-project small{font-size:11px}
  .detected-project__meta{gap:6px}

  /* [Connect project header] Title was squeezed to a 3-line column on the left with the two
     buttons crammed to the right. Stack it: full-width title on top, buttons full-width below. */
  .card-head:has(.existing-project-actions){flex-direction:column;align-items:stretch;gap:10px}
  .existing-project-actions{width:100%;flex-direction:column}
  .existing-project-actions .icon-btn2{width:100%;justify-content:center}

  /* [Donate modal] The QR cards went full-width (one per row) and filled the screen. Cap each
     card so the QR is just big enough to scan comfortably, centered in the modal. */
  .donate-grid article{max-width:248px;width:100%;margin:0 auto}

  /* [Skills/plugins] Mobile: tighter padding + smaller text (see the global feature-card design
     block below for the one-line name + inline toggle layout). */
  .feature-card{padding:14px}
  .feature-name{font-size:13.5px!important}
  .feature-desc{font-size:12px!important}

  /* [Maintenance row] Restart / Rebuild / Grant-disk were locked to a 34px height in one row,
     so "Cấp quyền ổ đĩa" overflowed. Let them wrap and grow vertically. */
  .bot-docker-actions{flex-wrap:wrap}
  .bot-docker-actions button{height:auto!important;min-height:40px;white-space:normal;line-height:1.2;flex:1 1 92px}

  /* [File tree] Give the tree a touch more room on mobile and let the editor breathe. */
  .file-tree{max-height:300px!important}
  .tree-editor{min-height:300px!important}
}

@media(max-width:520px){
  /* [Setup OS/mode] Shrink the logo cards: keep them 2-up (compact, less scrolling) with
     much smaller icons — just large enough to tap comfortably. */
  .os-grid,.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .logo-card{min-height:0!important;gap:8px!important;padding:12px 8px!important;border-radius:14px!important}
  .logo-card .choice-card__icon{width:40px!important;height:40px!important;border-radius:11px!important}
  .logo-card .choice-card__icon img{width:24px!important;height:24px!important}
  .logo-card .choice-card__body strong{font-size:13px!important}
  .logo-card .choice-card__body small{font-size:10px!important}
}

/* ── Feature (skill/plugin) card design ──────────────────────────────────────
   Name + a compact native-style toggle sit on ONE line; the name truncates with an ellipsis
   instead of ever wrapping to a second line. Description goes below, and the wider
   Open / Update / Install controls (when present) get their own row. */
/* min-width:0 lets the card (a grid item, default min-width:auto) shrink below its nowrap
   content so the name can ellipsis-truncate instead of overflowing the row off-screen. */
.feature-card{min-width:0}
.feature-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.feature-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
.feature-name{display:block;font-size:15px;font-weight:800;line-height:1.2;margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feature-desc{margin:8px 0 0;color:var(--body);font-size:13px;line-height:1.45}
.feature-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* Keep the Install / Update / Open buttons small & compact (in line with the toggle), so the
   "Cài đặt" button isn't the default oversized size. */
.feature-actions .secondary,.feature-actions .icon-btn2{height:28px;min-height:0;padding:4px 11px;font-size:11px;font-weight:700;border-radius:8px;border-width:1px}
.feature-actions svg{width:13px;height:13px}
/* Smaller, native-app style on/off toggle (was 52×30). */
.feature-switch span{width:42px;height:24px}
.feature-switch span:after{top:2px;left:2px;width:18px;height:18px}
.feature-switch input:checked + span:after{left:22px}