create-openclaw-bot 5.8.0 → 5.8.2

package/dist/web/styles.css

@@ -54,14 +54,14 @@ html[data-theme="light"] .setup-section,html[data-theme="light"] .card,html[data
 
 /* 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:#070707;--surface:#101010;--surface2:#181111;--hair:#342020;--primary:#ff2436;--soft:#ff5a66;--deep:#b80716;--ink:#f8f7f7;--body:#c9bfc0;--muted:#817273;--ok:#19d18f}
+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 72% 58%,rgba(255,36,54,.16),transparent 24%),radial-gradient(circle at 50% 96%,rgba(255,107,53,.13),transparent 26%),radial-gradient(ellipse at 50% 0%,#170608 0%,#070707 48%,#020101 100%)!important}
+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,.85) 0 1px,transparent 1.7px),radial-gradient(circle,rgba(255,90,102,.75) 0 1.3px,transparent 2px),radial-gradient(circle,rgba(255,143,102,.55) 0 .8px,transparent 1.6px)!important;opacity:.34!important;transform:none!important;animation:starsDriftRed 46s linear infinite!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(255,36,54,.18)!important;background:rgba(12,7,7,.62)!important}.seg__btn.is-active{background:linear-gradient(135deg,var(--primary),var(--soft))!important;color:#180405!important;box-shadow:0 8px 24px rgba(255,36,54,.25)!important}.mini-pill{border-color:rgba(255,36,54,.38)!important;background:rgba(255,36,54,.09)!important;color:var(--soft)!important}.setup-copy{background:linear-gradient(135deg,rgba(255,36,54,.075),rgba(255,255,255,.03),rgba(255,107,53,.05))!important;border-color:rgba(255,36,54,.20)!important}.setup-section,.card,.choice-card,.system-card,.terminal{background:linear-gradient(145deg,rgba(20,12,13,.78),rgba(6,5,5,.86))!important;border-color:rgba(255,36,54,.16)!important}.choice-card:has(input:checked),.choice-card.is-selected{border-color:var(--primary)!important;background:linear-gradient(145deg,rgba(255,36,54,.14),rgba(20,8,10,.9))!important;box-shadow:0 0 0 1px rgba(255,36,54,.25) inset,0 24px 70px rgba(255,36,54,.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(255,36,54,.14),0 0 28px rgba(255,36,54,.34)!important}.install-cta{background:linear-gradient(135deg,var(--primary),var(--soft) 48%,var(--deep))!important;color:#180405!important}.install-cta small{color:rgba(24,4,5,.72)!important}
+.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}
 
 
@@ -78,41 +78,41 @@ html[data-theme="light"] .side-info{background:rgba(255,255,255,.8)}html[data-th
 .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}}
+.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 */
@@ -142,36 +142,165 @@ body{perspective:none!important}.topbar{position:fixed!important;top:16px!import
 /* 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{width:88px!important}.status{display:none!important}main{margin-left:88px!important;margin-right:0!important}.topbar{left:112px!important;right:28px!important}.sidebar-extra{display:none!important}}@media(max-width:760px){.sidebar{position:static!important;width:auto!important;height:auto!important;overflow:visible!important}.status{display:none!important}main{margin-left:0!important;margin-right:0!important}.topbar{left:12px!important;right:12px!important}.bottom{display:grid!important}}
 
-/* Light mode polish: readable, balanced, soft red brand */
-html[data-theme="light"]{
-  --canvas:#fff8f8;--surface:#ffffff;--surface2:#fff1f2;--hair:#f4c7cd;--primary:#ff2d3f;--soft:#ff6674;--deep:#c41122;--ink:#171014;--body:#5f5258;--muted:#8b7a82;--ok:#00996d;
-}
-html[data-theme="light"] body{background:radial-gradient(circle at 78% 22%,rgba(255,45,63,.10),transparent 28%),radial-gradient(circle at 58% 92%,rgba(255,102,116,.13),transparent 30%),linear-gradient(180deg,#fffdfd 0%,#fff7f8 52%,#fff0f2 100%)!important;color:var(--ink)!important}
-html[data-theme="light"] body:before{background-image:radial-gradient(circle,rgba(255,45,63,.22) 0 1px,transparent 1.6px)!important;opacity:.16!important}
-html[data-theme="light"] body:after{background:linear-gradient(90deg,rgba(255,45,63,.045) 1px,transparent 1px),linear-gradient(180deg,rgba(255,45,63,.035) 1px,transparent 1px)!important;opacity:.10!important}
-html[data-theme="light"] .sidebar,html[data-theme="light"] .status{background:linear-gradient(180deg,#fffefe 0%,#fff7f8 100%)!important;border-color:#f0c8ce!important;box-shadow:0 0 0 1px rgba(255,255,255,.78) inset,0 20px 70px rgba(143,36,48,.08)!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:#ffb5be!important;color:var(--ink)!important}
-html[data-theme="light"] .nav.active{box-shadow:inset 3px 0 0 var(--primary),0 8px 24px rgba(255,45,63,.08)!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:rgba(255,255,255,.92)!important;border-color:#f0c8ce!important;box-shadow:0 22px 60px rgba(143,36,48,.10),0 1px 0 rgba(255,255,255,.88) inset!important}
-html[data-theme="light"] .setup-copy{background:linear-gradient(135deg,#ffffff 0%,#fff6f7 58%,#fff0f2 100%)!important}
-html[data-theme="light"] .setup-section:before{background:linear-gradient(135deg,rgba(255,45,63,.055),transparent 45%)!important}
-html[data-theme="light"] .choice-card{background:linear-gradient(145deg,#ffffff,#fffafa 62%,#fff3f4)!important}
-html[data-theme="light"] .choice-card:hover{border-color:#ff9faa!important;box-shadow:0 26px 70px rgba(143,36,48,.14),0 0 0 1px rgba(255,45,63,.10) inset!important}
-html[data-theme="light"] .choice-card:has(input:checked),html[data-theme="light"] .choice-card.is-selected{background:linear-gradient(145deg,#fff,#fff0f2)!important;border-color:var(--primary)!important;box-shadow:0 24px 70px rgba(255,45,63,.16),0 0 0 1px rgba(255,45,63,.28) inset!important}
-html[data-theme="light"] .choice-card__icon{background:linear-gradient(145deg,#fff,#f7f7f8)!important;border-color:#fff!important;box-shadow:0 14px 30px rgba(28,22,25,.13),inset 0 1px 0 #fff!important}
-html[data-theme="light"] .choice-card__meta em{background:#fff3f4!important;border-color:#ffc2ca!important;color:#7a6670!important}
-html[data-theme="light"] .choice-card__meta i{border-color:#ffb7c0!important;background:#fff!important}
-html[data-theme="light"] .mini-pill,html[data-theme="light"] .top-donate{background:#fff1f2!important;border-color:#ffb5be!important;color:var(--primary)!important}
-html[data-theme="light"] .seg{background:#fff7f8!important;border-color:#f0c8ce!important}
-html[data-theme="light"] .seg__btn{color:#6b5961!important}
-html[data-theme="light"] .seg__btn.is-active{background:linear-gradient(135deg,var(--primary),var(--soft))!important;color:#fff!important;box-shadow:0 10px 24px rgba(255,45,63,.24)!important}
-html[data-theme="light"] .install-cta{color:#fff!important;background:linear-gradient(135deg,#ff2d3f 0%,#ff6674 52%,#c41122 100%)!important;box-shadow:0 20px 48px rgba(255,45,63,.24)!important}
-html[data-theme="light"] .install-cta small{color:rgba(255,255,255,.78)!important}
-html[data-theme="light"] .terminal{background:#f9fafb!important;color:#1f2937!important;border-color:#e5e7eb!important;box-shadow:inset 0 1px 0 #fff,0 18px 40px rgba(17,24,39,.08)!important}
-html[data-theme="light"] .terminal p{color:#1f2937!important}
-html[data-theme="light"] .file textarea{background:#fff!important;color:#111827!important;border-color:#f0c8ce!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}
@@ -194,12 +323,12 @@ main{margin-left:260px!important;margin-right:0!important;min-height:100vh!impor
 .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{content:"";position:absolute;right:12px;top:12px;width:12px;height:12px;border-radius:999px;background:var(--primary);box-shadow:0 0 0 5px rgba(255,36,54,.14),0 0 22px rgba(255,36,54,.34)}
-.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}}
+.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}}
 
@@ -282,8 +411,8 @@ html[data-theme="light"] .bot-form-grid input,html[data-theme="light"] .bot-form
 .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
+.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}
@@ -299,16 +428,16 @@ html[data-theme="light"] .bot-form-grid input,html[data-theme="light"] .bot-form
 .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}
+.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}
@@ -338,16 +467,83 @@ html[data-theme="light"] .bot-form-grid input,html[data-theme="light"] .bot-form
 .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}
+.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}
@@ -415,193 +611,765 @@ button.is-loading:disabled{filter:saturate(.9)}
 .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.06) 0);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
-.donut-chart::before{content:"";position:absolute;inset:8px;background:#0d0d0d;border-radius:50%}
-.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}
-
-/* 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);
+.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}
+
+/* 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;
+}
+
+
+
+
+
+