update styling

public/style.css

@@ -30,6 +30,39 @@
     --assistant-message: #1f2937;
     --assistant-message-text: #eff4f2;
     --button-text: #fff8f0;
+    --panel-subtle: rgba(255, 251, 245, 0.55);
+    --panel-soft: rgba(255, 253, 249, 0.56);
+    --panel-soft-strong: rgba(252, 248, 240, 0.82);
+    --chip-surface: rgba(255, 252, 246, 0.8);
+    --chip-muted: rgba(24, 32, 31, 0.06);
+    --field-surface: rgba(255, 253, 249, 0.92);
+    --field-surface-strong: rgba(255, 253, 249, 0.96);
+    --field-focus-surface: #fffdfa;
+    --field-focus-border: rgba(164, 85, 45, 0.55);
+    --field-focus-ring: 0 0 0 4px rgba(164, 85, 45, 0.12);
+    --status-surface: rgba(24, 32, 31, 0.04);
+    --status-border: rgba(24, 32, 31, 0.06);
+    --status-error-surface: rgba(181, 71, 61, 0.09);
+    --status-error-border: rgba(181, 71, 61, 0.2);
+    --status-success-surface: rgba(37, 115, 93, 0.1);
+    --status-success-border: rgba(37, 115, 93, 0.2);
+    --secondary-surface: rgba(164, 85, 45, 0.1);
+    --secondary-surface-strong: rgba(164, 85, 45, 0.18);
+    --secondary-border: rgba(164, 85, 45, 0.18);
+    --secondary-border-strong: rgba(164, 85, 45, 0.34);
+    --item-hover-border: rgba(164, 85, 45, 0.28);
+    --item-active-border: rgba(164, 85, 45, 0.48);
+    --overlay-surface: linear-gradient(180deg, rgba(244, 239, 231, 0.78), rgba(248, 245, 239, 0.86));
+    --overlay-card-surface: linear-gradient(155deg, rgba(255, 253, 249, 0.96), rgba(248, 241, 233, 0.94));
+    --overlay-card-border: rgba(24, 32, 31, 0.1);
+    --overlay-card-shadow: 0 24px 70px rgba(56, 39, 21, 0.16);
+    --prompt-chip-surface: rgba(255, 251, 245, 0.65);
+    --messages-surface: rgba(252, 248, 240, 0.52);
+    --pill-surface: rgba(24, 32, 31, 0.04);
+    --pill-border: rgba(24, 32, 31, 0.08);
+    --tag-surface: rgba(24, 32, 31, 0.06);
+    --tag-ai-surface: rgba(164, 85, 45, 0.12);
+    --tag-user-surface: rgba(37, 115, 93, 0.12);
 }
 
 body[data-theme="fakegpt"] {
@@ -58,6 +91,32 @@ body[data-theme="fakegpt"] {
     --assistant-message: #202123;
     --assistant-message-text: #f3f4f6;
     --button-text: #f8fffc;
+    --panel-subtle: rgba(246, 251, 249, 0.58);
+    --panel-soft: rgba(255, 255, 255, 0.62);
+    --panel-soft-strong: rgba(255, 255, 255, 0.82);
+    --chip-surface: rgba(255, 255, 255, 0.82);
+    --chip-muted: rgba(17, 24, 39, 0.06);
+    --field-surface: rgba(255, 255, 255, 0.92);
+    --field-surface-strong: rgba(255, 255, 255, 0.96);
+    --field-focus-surface: #ffffff;
+    --field-focus-border: rgba(16, 163, 127, 0.48);
+    --field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.12);
+    --secondary-surface: rgba(16, 163, 127, 0.1);
+    --secondary-surface-strong: rgba(16, 163, 127, 0.18);
+    --secondary-border: rgba(16, 163, 127, 0.16);
+    --secondary-border-strong: rgba(16, 163, 127, 0.28);
+    --item-hover-border: rgba(16, 163, 127, 0.26);
+    --item-active-border: rgba(16, 163, 127, 0.42);
+    --overlay-surface: linear-gradient(180deg, rgba(241, 249, 246, 0.82), rgba(236, 243, 239, 0.9));
+    --overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(239, 247, 243, 0.95));
+    --overlay-card-shadow: 0 24px 70px rgba(16, 52, 44, 0.14);
+    --prompt-chip-surface: rgba(248, 255, 252, 0.72);
+    --messages-surface: rgba(243, 248, 246, 0.62);
+    --pill-surface: rgba(17, 24, 39, 0.04);
+    --pill-border: rgba(17, 24, 39, 0.08);
+    --tag-surface: rgba(17, 24, 39, 0.06);
+    --tag-ai-surface: rgba(16, 163, 127, 0.12);
+    --tag-user-surface: rgba(15, 138, 103, 0.12);
 }
 
 body[data-theme="fraud"] {
@@ -83,6 +142,32 @@ body[data-theme="fraud"] {
     --assistant-message: #40352f;
     --assistant-message-text: #faf4ef;
     --button-text: #fff9f4;
+    --panel-subtle: rgba(255, 248, 240, 0.6);
+    --panel-soft: rgba(255, 249, 242, 0.62);
+    --panel-soft-strong: rgba(252, 246, 238, 0.82);
+    --chip-surface: rgba(255, 250, 244, 0.82);
+    --chip-muted: rgba(45, 38, 30, 0.06);
+    --field-surface: rgba(255, 249, 242, 0.92);
+    --field-surface-strong: rgba(255, 249, 242, 0.96);
+    --field-focus-surface: #fffaf5;
+    --field-focus-border: rgba(196, 111, 76, 0.45);
+    --field-focus-ring: 0 0 0 4px rgba(196, 111, 76, 0.12);
+    --secondary-surface: rgba(196, 111, 76, 0.1);
+    --secondary-surface-strong: rgba(196, 111, 76, 0.18);
+    --secondary-border: rgba(196, 111, 76, 0.18);
+    --secondary-border-strong: rgba(196, 111, 76, 0.32);
+    --item-hover-border: rgba(196, 111, 76, 0.24);
+    --item-active-border: rgba(196, 111, 76, 0.38);
+    --overlay-surface: linear-gradient(180deg, rgba(245, 236, 227, 0.82), rgba(250, 244, 236, 0.88));
+    --overlay-card-surface: linear-gradient(155deg, rgba(255, 251, 245, 0.97), rgba(246, 237, 226, 0.94));
+    --overlay-card-shadow: 0 24px 70px rgba(94, 58, 33, 0.14);
+    --prompt-chip-surface: rgba(255, 250, 244, 0.74);
+    --messages-surface: rgba(250, 243, 234, 0.62);
+    --pill-surface: rgba(45, 38, 30, 0.04);
+    --pill-border: rgba(45, 38, 30, 0.08);
+    --tag-surface: rgba(45, 38, 30, 0.06);
+    --tag-ai-surface: rgba(196, 111, 76, 0.12);
+    --tag-user-surface: rgba(111, 131, 96, 0.14);
 }
 
 body[data-theme="germini"] {
@@ -108,6 +193,33 @@ body[data-theme="germini"] {
     --assistant-message: linear-gradient(145deg, #3046c8, #7e3fdc);
     --assistant-message-text: #f8f7ff;
     --button-text: #f8f7ff;
+    --panel-subtle: rgba(255, 255, 255, 0.34);
+    --panel-soft: rgba(255, 255, 255, 0.38);
+    --panel-soft-strong: rgba(255, 255, 255, 0.46);
+    --chip-surface: rgba(255, 255, 255, 0.38);
+    --chip-muted: rgba(255, 255, 255, 0.2);
+    --field-surface: rgba(255, 255, 255, 0.42);
+    --field-surface-strong: rgba(255, 255, 255, 0.46);
+    --field-focus-surface: rgba(255, 255, 255, 0.52);
+    --field-focus-border: rgba(90, 109, 240, 0.34);
+    --field-focus-ring: 0 0 0 4px rgba(90, 109, 240, 0.12);
+    --secondary-surface: rgba(255, 255, 255, 0.3);
+    --secondary-surface-strong: rgba(255, 255, 255, 0.42);
+    --secondary-border: rgba(255, 255, 255, 0.32);
+    --secondary-border-strong: rgba(255, 255, 255, 0.48);
+    --item-hover-border: rgba(255, 255, 255, 0.42);
+    --item-active-border: rgba(90, 109, 240, 0.34);
+    --overlay-surface: linear-gradient(180deg, rgba(227, 235, 255, 0.74), rgba(241, 245, 255, 0.84));
+    --overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.78), rgba(235, 238, 255, 0.86));
+    --overlay-card-border: rgba(255, 255, 255, 0.34);
+    --overlay-card-shadow: 0 24px 70px rgba(98, 110, 255, 0.16);
+    --prompt-chip-surface: rgba(255, 255, 255, 0.36);
+    --messages-surface: rgba(255, 255, 255, 0.3);
+    --pill-surface: rgba(255, 255, 255, 0.22);
+    --pill-border: rgba(255, 255, 255, 0.3);
+    --tag-surface: rgba(255, 255, 255, 0.24);
+    --tag-ai-surface: rgba(90, 109, 240, 0.16);
+    --tag-user-surface: rgba(45, 143, 133, 0.14);
 }
 
 body[data-theme="slopilot"] {
@@ -133,6 +245,32 @@ body[data-theme="slopilot"] {
     --assistant-message: linear-gradient(145deg, #123460, #1f6fff);
     --assistant-message-text: #f6fbff;
     --button-text: #f6fbff;
+    --panel-subtle: rgba(248, 251, 255, 0.7);
+    --panel-soft: rgba(255, 255, 255, 0.72);
+    --panel-soft-strong: rgba(255, 255, 255, 0.86);
+    --chip-surface: rgba(255, 255, 255, 0.84);
+    --chip-muted: rgba(13, 104, 255, 0.06);
+    --field-surface: rgba(255, 255, 255, 0.92);
+    --field-surface-strong: rgba(255, 255, 255, 0.96);
+    --field-focus-surface: #ffffff;
+    --field-focus-border: rgba(13, 104, 255, 0.42);
+    --field-focus-ring: 0 0 0 4px rgba(13, 104, 255, 0.12);
+    --secondary-surface: rgba(13, 104, 255, 0.1);
+    --secondary-surface-strong: rgba(13, 104, 255, 0.16);
+    --secondary-border: rgba(13, 104, 255, 0.16);
+    --secondary-border-strong: rgba(13, 104, 255, 0.3);
+    --item-hover-border: rgba(13, 104, 255, 0.22);
+    --item-active-border: rgba(13, 104, 255, 0.36);
+    --overlay-surface: linear-gradient(180deg, rgba(233, 243, 255, 0.78), rgba(244, 249, 255, 0.88));
+    --overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(236, 244, 255, 0.95));
+    --overlay-card-shadow: 0 24px 70px rgba(25, 77, 147, 0.14);
+    --prompt-chip-surface: rgba(248, 251, 255, 0.76);
+    --messages-surface: rgba(244, 249, 255, 0.72);
+    --pill-surface: rgba(13, 104, 255, 0.05);
+    --pill-border: rgba(13, 104, 255, 0.12);
+    --tag-surface: rgba(13, 104, 255, 0.07);
+    --tag-ai-surface: rgba(13, 104, 255, 0.12);
+    --tag-user-surface: rgba(17, 133, 115, 0.14);
 }
 
 body[data-theme="beta-ai"] {
@@ -158,6 +296,32 @@ body[data-theme="beta-ai"] {
     --assistant-message: linear-gradient(145deg, #2d236f, #5c49f1);
     --assistant-message-text: #f8f7ff;
     --button-text: #f8f7ff;
+    --panel-subtle: rgba(248, 245, 255, 0.68);
+    --panel-soft: rgba(255, 255, 255, 0.72);
+    --panel-soft-strong: rgba(255, 255, 255, 0.86);
+    --chip-surface: rgba(255, 255, 255, 0.84);
+    --chip-muted: rgba(79, 70, 229, 0.06);
+    --field-surface: rgba(255, 255, 255, 0.92);
+    --field-surface-strong: rgba(255, 255, 255, 0.96);
+    --field-focus-surface: #ffffff;
+    --field-focus-border: rgba(79, 70, 229, 0.36);
+    --field-focus-ring: 0 0 0 4px rgba(79, 70, 229, 0.12);
+    --secondary-surface: rgba(79, 70, 229, 0.1);
+    --secondary-surface-strong: rgba(79, 70, 229, 0.18);
+    --secondary-border: rgba(79, 70, 229, 0.16);
+    --secondary-border-strong: rgba(79, 70, 229, 0.28);
+    --item-hover-border: rgba(79, 70, 229, 0.22);
+    --item-active-border: rgba(79, 70, 229, 0.36);
+    --overlay-surface: linear-gradient(180deg, rgba(240, 236, 255, 0.8), rgba(248, 246, 255, 0.9));
+    --overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(241, 237, 255, 0.95));
+    --overlay-card-shadow: 0 24px 70px rgba(61, 54, 122, 0.14);
+    --prompt-chip-surface: rgba(250, 248, 255, 0.76);
+    --messages-surface: rgba(246, 243, 255, 0.72);
+    --pill-surface: rgba(79, 70, 229, 0.05);
+    --pill-border: rgba(79, 70, 229, 0.12);
+    --tag-surface: rgba(79, 70, 229, 0.08);
+    --tag-ai-surface: rgba(79, 70, 229, 0.13);
+    --tag-user-surface: rgba(42, 140, 123, 0.14);
 }
 
 body[data-theme="confusity"] {
@@ -183,6 +347,32 @@ body[data-theme="confusity"] {
     --assistant-message: #111827;
     --assistant-message-text: #f9fafb;
     --button-text: #f9fafb;
+    --panel-subtle: rgba(255, 255, 255, 0.7);
+    --panel-soft: rgba(248, 250, 252, 0.82);
+    --panel-soft-strong: rgba(255, 255, 255, 0.9);
+    --chip-surface: rgba(255, 255, 255, 0.92);
+    --chip-muted: rgba(17, 24, 39, 0.06);
+    --field-surface: rgba(255, 255, 255, 0.96);
+    --field-surface-strong: rgba(255, 255, 255, 0.98);
+    --field-focus-surface: #ffffff;
+    --field-focus-border: rgba(2, 132, 199, 0.34);
+    --field-focus-ring: 0 0 0 4px rgba(2, 132, 199, 0.1);
+    --secondary-surface: rgba(17, 24, 39, 0.05);
+    --secondary-surface-strong: rgba(17, 24, 39, 0.1);
+    --secondary-border: rgba(17, 24, 39, 0.1);
+    --secondary-border-strong: rgba(17, 24, 39, 0.18);
+    --item-hover-border: rgba(17, 24, 39, 0.14);
+    --item-active-border: rgba(2, 132, 199, 0.26);
+    --overlay-surface: linear-gradient(180deg, rgba(241, 245, 249, 0.82), rgba(248, 250, 252, 0.9));
+    --overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96));
+    --overlay-card-shadow: 0 24px 70px rgba(17, 24, 39, 0.1);
+    --prompt-chip-surface: rgba(248, 250, 252, 0.86);
+    --messages-surface: rgba(255, 255, 255, 0.92);
+    --pill-surface: rgba(17, 24, 39, 0.04);
+    --pill-border: rgba(17, 24, 39, 0.08);
+    --tag-surface: rgba(17, 24, 39, 0.06);
+    --tag-ai-surface: rgba(17, 24, 39, 0.08);
+    --tag-user-surface: rgba(2, 132, 199, 0.12);
 }
 
 * {
@@ -220,7 +410,7 @@ body::before {
 
 .card {
     background: var(--surface);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
     backdrop-filter: blur(10px);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow);
@@ -242,7 +432,7 @@ body::before {
 .auth-hero {
     padding: 48px;
     background: var(--hero-gradient);
-    border-right: 1px solid rgba(24, 32, 31, 0.08);
+    border-right: 1px solid var(--pill-border);
     display: grid;
     align-content: start;
     gap: 24px;
@@ -277,7 +467,7 @@ body::before {
     display: grid;
     align-content: center;
     gap: 18px;
-    background: rgba(252, 248, 240, 0.82);
+    background: var(--panel-soft-strong);
 }
 
 .auth-hero-compact {
@@ -348,8 +538,8 @@ h2 {
 .hero-panel {
     padding: 20px;
     border-radius: var(--radius-lg);
-    background: rgba(255, 251, 245, 0.55);
+    background: var(--panel-subtle);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
 }
 
 .hero-panel h2 {
@@ -362,8 +552,8 @@ h2 {
 .context-pill {
     padding: 14px;
     border-radius: var(--radius-md);
-    background: rgba(255, 253, 249, 0.56);
+    background: var(--panel-soft);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
 }
 
 .hero-stat span,
@@ -397,7 +587,7 @@ h2 {
 .modal-card,
 .market-shell {
     background: var(--surface-strong);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
 }
 
 .auth-toggle {
@@ -485,9 +675,9 @@ textarea,
 select {
     width: 100%;
     border-radius: 16px;
-    border: 1px solid rgba(24, 32, 31, 0.1);
+    border: 1px solid var(--line-strong);
     padding: 14px 16px;
-    background: rgba(255, 253, 249, 0.92);
+    background: var(--field-surface);
     font: inherit;
     color: var(--text);
     outline: none;
@@ -501,9 +691,9 @@ textarea {
 input:focus,
 textarea:focus,
 select:focus {
-    border-color: rgba(164, 85, 45, 0.55);
+    border-color: var(--field-focus-border);
-    box-shadow: 0 0 0 4px rgba(164, 85, 45, 0.12);
+    box-shadow: var(--field-focus-ring);
-    background: #fffdfa;
+    background: var(--field-focus-surface);
 }
 
 .primary-action {
@@ -515,21 +705,21 @@ select:focus {
     margin: 0;
     padding: 12px 14px;
     border-radius: 14px;
-    background: rgba(24, 32, 31, 0.04);
+    background: var(--status-surface);
-    border: 1px solid rgba(24, 32, 31, 0.06);
+    border: 1px solid var(--status-border);
     color: var(--text-soft);
 }
 
 .status.error {
     color: var(--error);
-    background: rgba(181, 71, 61, 0.09);
+    background: var(--status-error-surface);
-    border-color: rgba(181, 71, 61, 0.2);
+    border-color: var(--status-error-border);
 }
 
 .status.success {
     color: var(--success);
-    background: rgba(37, 115, 93, 0.1);
+    background: var(--status-success-surface);
-    border-color: rgba(37, 115, 93, 0.2);
+    border-color: var(--status-success-border);
 }
 
 .inline-status {
@@ -642,8 +832,8 @@ select:focus {
     gap: 10px;
     padding: 10px 12px;
     border-radius: 12px;
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
-    background: rgba(24, 32, 31, 0.04);
+    background: var(--pill-surface);
     color: var(--text-soft);
     font-size: 0.9rem;
 }
@@ -662,8 +852,8 @@ select:focus {
     gap: 10px;
     padding: 16px;
     border-radius: var(--radius-md);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
-    background: rgba(255, 252, 246, 0.8);
+    background: var(--chip-surface);
     transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
@@ -676,13 +866,13 @@ select:focus {
 
 .chat-item:hover,
 .persona-item:hover {
-    border-color: rgba(164, 85, 45, 0.28);
+    border-color: var(--item-hover-border);
     box-shadow: none;
 }
 
 .chat-item.active,
 .persona-item.active {
-    border-color: rgba(164, 85, 45, 0.48);
+    border-color: var(--item-active-border);
     box-shadow: none;
 }
 
@@ -710,7 +900,7 @@ select:focus {
 .chat-item button,
 .icon-button {
     padding: 8px 12px;
-    background: rgba(24, 32, 31, 0.06);
+    background: var(--chip-muted);
     color: var(--text);
     box-shadow: none;
     min-height: 40px;
@@ -719,16 +909,16 @@ select:focus {
 .secondary-action {
     padding: 11px 16px;
     min-height: 44px;
-    background: rgba(164, 85, 45, 0.1);
+    background: var(--secondary-surface);
     color: var(--text);
-    border: 1px solid rgba(164, 85, 45, 0.18);
+    border: 1px solid var(--secondary-border);
     text-decoration: none;
     box-shadow: none;
 }
 
 .secondary-action.active {
-    background: rgba(164, 85, 45, 0.18);
+    background: var(--secondary-surface-strong);
-    border-color: rgba(164, 85, 45, 0.34);
+    border-color: var(--secondary-border-strong);
 }
 
 .action-pair {
@@ -758,9 +948,9 @@ select:focus {
 }
 
 .tools-details {
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
     border-radius: 14px;
-    background: rgba(24, 32, 31, 0.04);
+    background: var(--pill-surface);
     padding: 8px 10px;
 }
 
@@ -786,8 +976,8 @@ select:focus {
     gap: 4px;
     padding: 12px 14px;
     border-radius: 14px;
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
-    background: rgba(24, 32, 31, 0.04);
+    background: var(--pill-surface);
 }
 
 .session-chip-label {
@@ -827,7 +1017,7 @@ select:focus {
 
 .chat-header-focus {
     padding-bottom: 2px;
-    border-bottom: 1px solid rgba(24, 32, 31, 0.07);
+    border-bottom: 1px solid var(--line);
 }
 
 .messages-panel-focus {
@@ -841,8 +1031,7 @@ select:focus {
     display: grid;
     place-items: center;
     padding: 28px;
-    background:
+    background: var(--overlay-surface);
-        linear-gradient(180deg, rgba(244, 239, 231, 0.78), rgba(248, 245, 239, 0.86));
     backdrop-filter: blur(10px);
 }
 
@@ -850,10 +1039,9 @@ select:focus {
     width: min(440px, 100%);
     padding: 28px;
     border-radius: 26px;
-    border: 1px solid rgba(24, 32, 31, 0.1);
+    border: 1px solid var(--overlay-card-border);
-    background:
+    background: var(--overlay-card-surface);
-        linear-gradient(155deg, rgba(255, 253, 249, 0.96), rgba(248, 241, 233, 0.94));
+    box-shadow: var(--overlay-card-shadow);
-    box-shadow: 0 24px 70px rgba(56, 39, 21, 0.16);
     text-align: center;
 }
 
@@ -897,7 +1085,7 @@ select:focus {
 }
 
 .input-shell-focus {
-    border-top: 1px solid rgba(24, 32, 31, 0.07);
+    border-top: 1px solid var(--line);
 }
 
 .workspace-overview,
@@ -912,7 +1100,7 @@ select:focus {
     grid-template-columns: minmax(0, 1fr) minmax(300px, 500px);
     gap: 14px;
     background: var(--overview-gradient);
-    border: 1px solid rgba(24, 32, 31, 0.07);
+    border: 1px solid var(--line);
 }
 
 .workspace-intro {
@@ -957,9 +1145,9 @@ select:focus {
     min-height: 40px;
     padding: 8px 12px;
     border-radius: 999px;
-    background: rgba(24, 32, 31, 0.06);
+    background: var(--chip-muted);
     color: var(--text);
-    border: 1px solid rgba(24, 32, 31, 0.12);
+    border: 1px solid var(--line-strong);
 }
 
 .context-chip-button span {
@@ -1013,9 +1201,9 @@ select:focus {
     min-height: 44px;
     padding: 10px 14px;
     border-radius: 999px;
-    background: rgba(164, 85, 45, 0.1);
+    background: var(--secondary-surface);
     color: var(--text);
-    border: 1px solid rgba(164, 85, 45, 0.18);
+    border: 1px solid var(--secondary-border);
     box-shadow: none;
 }
 
@@ -1033,8 +1221,8 @@ select:focus {
 }
 
 .model-badge-button[aria-expanded="true"] {
-    background: rgba(164, 85, 45, 0.16);
+    background: var(--secondary-surface-strong);
-    border-color: rgba(164, 85, 45, 0.28);
+    border-color: var(--secondary-border-strong);
 }
 
 .model-popover {
@@ -1049,7 +1237,7 @@ select:focus {
     gap: 14px;
     z-index: 20;
     background: var(--surface-strong);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
 }
 
 .model-select {
@@ -1090,10 +1278,10 @@ select:focus {
     padding-right: 48px;
     border-radius: 14px;
     appearance: none;
-    background: rgba(255, 253, 249, 0.96);
+    background: var(--field-surface-strong);
-    border-color: rgba(24, 32, 31, 0.12);
+    border-color: var(--line-strong);
     font-weight: 700;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+    box-shadow: none;
 }
 
 .model-select-chevron {
@@ -1113,8 +1301,8 @@ select:focus {
     gap: 8px;
     padding: 14px;
     border-radius: 14px;
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 252, 246, 0.92));
+    background: linear-gradient(180deg, var(--panel-soft), var(--field-surface));
     min-height: 92px;
 }
 
@@ -1134,8 +1322,8 @@ select:focus {
 .model-help-badge {
     padding: 5px 10px;
     border-radius: 999px;
-    background: rgba(164, 85, 45, 0.1);
+    background: var(--secondary-surface);
-    border: 1px solid rgba(164, 85, 45, 0.18);
+    border: 1px solid var(--secondary-border);
     color: var(--brand-strong);
     font-size: 0.72rem;
     font-weight: 800;
@@ -1175,8 +1363,8 @@ select:focus {
 }
 
 .model-help-badge[data-badge="waiting"] {
-    background: rgba(24, 32, 31, 0.06);
+    background: var(--chip-muted);
-    border-color: rgba(24, 32, 31, 0.1);
+    border-color: var(--line-strong);
     color: var(--text-soft);
 }
 
@@ -1208,9 +1396,9 @@ select:focus {
     justify-content: center;
     padding: 9px 12px;
     border-radius: 999px;
-    background: rgba(255, 251, 245, 0.65);
+    background: var(--prompt-chip-surface);
     color: var(--text);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
     box-shadow: none;
     font-weight: 600;
 }
@@ -1221,7 +1409,7 @@ select:focus {
     display: flex;
     flex-direction: column;
     gap: 12px;
-    background: rgba(252, 248, 240, 0.52);
+    background: var(--messages-surface);
     min-height: 0;
 }
 
@@ -1540,8 +1728,8 @@ select:focus {
     gap: 14px;
     padding: 16px 18px;
     border-radius: 16px;
-    background: rgba(24, 32, 31, 0.04);
+    background: var(--pill-surface);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
 }
 
 .character-library-list {
@@ -1557,8 +1745,8 @@ select:focus {
 .roleplay-starter-intro {
     padding: 16px 18px;
     border-radius: 16px;
-    background: rgba(24, 32, 31, 0.04);
+    background: var(--pill-surface);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
 }
 
 .roleplay-starter-page {
@@ -1576,17 +1764,17 @@ select:focus {
     font-size: 0.72rem;
     text-transform: uppercase;
     letter-spacing: 0.12em;
-    background: rgba(24, 32, 31, 0.06);
+    background: var(--tag-surface);
 }
 
 .persona-role-tag.ai {
     color: var(--brand-strong);
-    background: rgba(164, 85, 45, 0.12);
+    background: var(--tag-ai-surface);
 }
 
 .persona-role-tag.user {
     color: var(--success);
-    background: rgba(37, 115, 93, 0.12);
+    background: var(--tag-user-surface);
 }
 
 .persona-item p {
@@ -1722,8 +1910,8 @@ select:focus {
 .persona-form-intro {
     padding: 16px 18px;
     border-radius: 16px;
-    background: rgba(24, 32, 31, 0.04);
+    background: var(--pill-surface);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
     display: grid;
     gap: 14px;
 }
@@ -1746,8 +1934,8 @@ select:focus {
 .persona-form .field-wide {
     padding: 14px;
     border-radius: var(--radius-md);
-    background: rgba(24, 32, 31, 0.03);
+    background: var(--status-surface);
-    border: 1px solid rgba(24, 32, 31, 0.06);
+    border: 1px solid var(--status-border);
 }
 
 .persona-form .field textarea {
@@ -1759,8 +1947,8 @@ select:focus {
     gap: 8px;
     padding: 14px 16px;
     border-radius: 14px;
-    background: rgba(24, 32, 31, 0.05);
+    background: var(--chip-muted);
-    border: 1px dashed rgba(24, 32, 31, 0.16);
+    border: 1px dashed var(--line-strong);
 }
 
 .dialogue-format-label {
@@ -1924,7 +2112,7 @@ select:focus {
     padding: 12px;
     border-radius: var(--radius-lg);
     background: var(--surface-strong);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
 }
 
 .settings-nav-item {
@@ -1935,9 +2123,9 @@ select:focus {
     text-align: left;
     padding: 12px 14px;
     min-height: 48px;
-    background: rgba(24, 32, 31, 0.04);
+    background: var(--pill-surface);
     color: var(--text);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
 }
 
 .settings-nav-item.active {
@@ -1970,7 +2158,7 @@ select:focus {
     padding: 16px;
     border-radius: var(--radius-lg);
     background: var(--surface-strong);
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
 }
 
 .settings-panel-compact {
@@ -1997,8 +2185,8 @@ select:focus {
     padding: 12px 14px;
     min-height: 76px;
     border-radius: 14px;
-    border: 1px solid rgba(24, 32, 31, 0.08);
+    border: 1px solid var(--pill-border);
-    background: rgba(24, 32, 31, 0.04);
+    background: var(--pill-surface);
     align-content: center;
 }
 
@@ -2015,8 +2203,8 @@ select:focus {
     gap: 10px;
     padding: 16px;
     border-radius: 14px;
-    background: rgba(24, 32, 31, 0.04);
+    background: var(--pill-surface);
-    border: 1px dashed rgba(24, 32, 31, 0.14);
+    border: 1px dashed var(--line-strong);
 }
 
 body[data-theme="fakegpt"] {
@@ -2033,6 +2221,39 @@ body[data-theme="fakegpt"] {
     --bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
     --hero-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
     --overview-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92));
+    --panel-subtle: rgba(10, 15, 13, 0.92);
+    --panel-soft: rgba(18, 24, 21, 0.9);
+    --panel-soft-strong: rgba(18, 24, 21, 0.92);
+    --chip-surface: rgba(10, 15, 13, 0.92);
+    --chip-muted: rgba(36, 255, 180, 0.08);
+    --field-surface: rgba(10, 15, 13, 0.96);
+    --field-surface-strong: rgba(10, 15, 13, 0.96);
+    --field-focus-surface: rgba(12, 19, 16, 0.98);
+    --field-focus-border: rgba(36, 255, 180, 0.26);
+    --field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.14);
+    --status-surface: rgba(18, 24, 21, 0.9);
+    --status-border: rgba(36, 255, 180, 0.12);
+    --status-error-surface: rgba(181, 71, 61, 0.16);
+    --status-error-border: rgba(181, 71, 61, 0.28);
+    --status-success-surface: rgba(16, 163, 127, 0.14);
+    --status-success-border: rgba(36, 255, 180, 0.24);
+    --secondary-surface: rgba(18, 24, 21, 0.96);
+    --secondary-surface-strong: rgba(16, 163, 127, 0.16);
+    --secondary-border: rgba(36, 255, 180, 0.16);
+    --secondary-border-strong: rgba(36, 255, 180, 0.26);
+    --item-hover-border: rgba(36, 255, 180, 0.22);
+    --item-active-border: rgba(36, 255, 180, 0.34);
+    --overlay-surface: linear-gradient(180deg, rgba(9, 14, 12, 0.82), rgba(15, 22, 19, 0.9));
+    --overlay-card-surface: linear-gradient(155deg, rgba(14, 20, 18, 0.96), rgba(18, 24, 21, 0.94));
+    --overlay-card-border: rgba(36, 255, 180, 0.16);
+    --overlay-card-shadow: 0 24px 70px rgba(3, 10, 8, 0.5);
+    --prompt-chip-surface: rgba(18, 24, 21, 0.9);
+    --messages-surface: rgba(18, 24, 21, 0.88);
+    --pill-surface: rgba(18, 24, 21, 0.9);
+    --pill-border: rgba(36, 255, 180, 0.14);
+    --tag-surface: rgba(36, 255, 180, 0.08);
+    --tag-ai-surface: rgba(16, 163, 127, 0.16);
+    --tag-user-surface: rgba(36, 255, 180, 0.12);
     background: radial-gradient(circle at top left, rgba(16, 163, 127, 0.15), transparent 26%), linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
     color: #e8fff7;
     color-scheme: dark;