/* ═══════════════════════════════════════════
   py.formhk — style.css
   Apple VisionOS × Hacker IDE aesthetic
   ═══════════════════════════════════════════ */

/* ── Variables (V1.0 Grand Unification) ── */
:root {
    --topbar: 44px;
    --sidebar-w: 200px;
    --terminal-h: 400px;
    --sensei-w: 340px;
    --radius: 12px;
    --gap: 0px;

    /* Semantic aliases for theme switching */
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --text-main: #000000;
    --text-muted: rgba(0, 0, 0, 0.45);
    --glass-bg: rgba(255, 255, 255, 0.4);
    --scroll-thumb: rgba(0, 0, 0, 0.2);
    --scroll-track: transparent;

    /* Light mode - Pure Apple (default for :root when light) */
    --bg0: #ffffff;
    --bg1: #fafafa;
    --bg2: #ffffff;
    --bg3: #f5f5f7;
    --bg4: #f2f2f2;
    --border: rgba(0, 0, 0, 0.08);
    --border-hi: rgba(0, 0, 0, 0.15);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
    --text0: #000000;
    --text1: rgba(0, 0, 0, 0.65);
    --text2: rgba(0, 0, 0, 0.45);
    --text3: rgba(0, 0, 0, 0.2);
    --accent: #000000;
    --accent2: rgba(0, 0, 0, 0.05);
    --danger: #ff3b30;
    --danger-bg: rgba(255, 59, 48, 0.1);
    --success: #34c759;
    --success-bg: rgba(52, 199, 89, 0.1);
    --warning: #ffcc00;
    --run-bg: rgba(0, 0, 0, 0.04);
    --run-border: rgba(0, 0, 0, 0.1);
    --glass: rgba(255, 255, 255, 0.4);
    --glass-hi: rgba(255, 255, 255, 0.7);
    --mono: 'JetBrains Mono', 'Fira Code', monospace;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;

    /* Premium Curves */
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --magnetic: cubic-bezier(0.16, 1, 0.3, 1);

    /* === LIQUID GLASS TOKENS (V2 Part 1) === */
    --lg-bg:           rgba(255, 255, 255, 0.12);
    --lg-bg-hover:     rgba(255, 255, 255, 0.18);
    --lg-bg-active:    rgba(255, 255, 255, 0.22);
    --lg-border:       rgba(255, 255, 255, 0.25);
    --lg-border-strong:rgba(255, 255, 255, 0.40);
    --lg-shadow:       0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    --lg-shadow-elev:  0 20px 60px rgba(0, 0, 0, 0.20), 0 4px 16px rgba(0, 0, 0, 0.12);
    --lg-blur:         blur(20px) saturate(180%);
    --lg-radius:       16px;
    --lg-radius-sm:    10px;
    --lg-radius-lg:    24px;
}

html[data-theme="dark"] {
    --lg-bg:           rgba(255, 255, 255, 0.06);
    --lg-bg-hover:     rgba(255, 255, 255, 0.10);
    --lg-bg-active:    rgba(255, 255, 255, 0.14);
    --lg-border:       rgba(255, 255, 255, 0.10);
    --lg-border-strong:rgba(255, 255, 255, 0.18);
    --lg-shadow:       0 8px 32px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.30);
    --lg-shadow-elev:  0 20px 60px rgba(0, 0, 0, 0.60), 0 4px 16px rgba(0, 0, 0, 0.40);
}

/* Reusable Liquid Glass surface classes */
.lg-surface {
    background: var(--lg-bg);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow);
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    position: relative;
    overflow: hidden;
}

.lg-surface:hover {
    background: var(--lg-bg-hover);
    border-color: var(--lg-border-strong);
}

.lg-surface-elevated {
    background: var(--lg-bg-hover);
    backdrop-filter: var(--lg-blur);
    -webkit-backdrop-filter: var(--lg-blur);
    border: 1px solid var(--lg-border-strong);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-elev);
    position: relative;
    overflow: hidden;
}

/* Top-edge shimmer highlight — Apple-style inner glass highlight */
.lg-surface::before,
.lg-surface-elevated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--lg-border-strong) 30%,
        var(--lg-border-strong) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Dark mode (default) */
html[data-theme="dark"] {
    --bg-primary: #000000;
    --bg-secondary: #050505;
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.45);
    --glass-bg: rgba(0, 0, 0, 0.4);
    --scroll-thumb: rgba(255, 255, 255, 0.2);
    --scroll-track: transparent;
    --bg0: #000000;
    --bg1: #050505;
    --bg2: #000000;
    --bg3: #0a0a0a;
    --bg4: #0f0f0f;
    --border: rgba(255, 255, 255, 0.12);
    --border-hi: rgba(255, 255, 255, 0.2);
    --text0: #ffffff;
    --text1: rgba(255, 255, 255, 0.7);
    --text2: rgba(255, 255, 255, 0.45);
    --text3: rgba(255, 255, 255, 0.2);
    --accent: #ffffff;
    --accent2: rgba(255, 255, 255, 0.12);
    --danger: #ff453a;
    --danger-bg: rgba(255, 69, 58, 0.12);
    --success: #30d158;
    --success-bg: rgba(48, 209, 88, 0.12);
    --warning: #ffd60a;
    --run-bg: rgba(255, 255, 255, 0.1);
    --run-border: rgba(255, 255, 255, 0.2);
    --glass: rgba(0, 0, 0, 0.4);
    --glass-hi: rgba(0, 0, 0, 0.7);
}

/* Light mode — proper Apple-clean IDE */
html[data-theme="light"],
body.light-mode {
    --bg-primary: #FAFAFA;
    --bg-secondary: #FFFFFF;
    --text-main: #1D1D1F;
    --text-muted: rgba(0, 0, 0, 0.45);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --scroll-thumb: rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] {
    --bg-primary: #FAFAFA;
    --bg-secondary: #FFFFFF;
    --text-main: #1D1D1F;
    --text-muted: rgba(0, 0, 0, 0.45);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --scroll-thumb: rgba(0, 0, 0, 0.2);
    --scroll-track: transparent;
    --bg0: #FAFAFA;
    --bg1: #FFFFFF;
    --bg2: #F5F5F7;
    --bg3: #EFEFEF;
    --bg4: #E8E8EA;
    --border: rgba(0, 0, 0, 0.1);
    --border-hi: rgba(0, 0, 0, 0.18);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.1);
    --text0: #1D1D1F;
    --text1: rgba(0, 0, 0, 0.65);
    --text2: rgba(0, 0, 0, 0.45);
    --text3: rgba(0, 0, 0, 0.22);
    --accent: #1D1D1F;
    --accent2: rgba(0, 0, 0, 0.06);
    --danger: #ff3b30;
    --danger-bg: rgba(255, 59, 48, 0.1);
    --success: #34c759;
    --success-bg: rgba(52, 199, 89, 0.1);
    --warning: #ff9f0a;
    --run-bg: rgba(0, 0, 0, 0.04);
    --run-border: rgba(0, 0, 0, 0.1);
    --glass: rgba(255, 255, 255, 0.5);
    --glass-hi: rgba(255, 255, 255, 0.8);
}

/* ── Reset ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global scrollbars (no default white) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb, rgba(255,255,255,0.2)) var(--scroll-track, transparent);
}
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: var(--scroll-track, transparent);
}
*::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb, rgba(255,255,255,0.2));
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover, rgba(255,255,255,0.35));
}

/* ── Premium Animations & Glass ── */
.spring {
    transition: all 0.6s var(--spring);
}

.magnetic-hover {
    transition: transform 0.6s var(--magnetic), box-shadow 0.6s var(--magnetic), border-color 0.4s ease;
}

.magnetic-hover:hover {
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

button {
    transition: transform 0.5s var(--magnetic), background 0.3s ease, opacity 0.3s ease;
}

button:active {
    transform: scale(0.96);
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--sans);
    background: var(--bg0);
    color: var(--text0);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom);
}

/* V2 Part 4 — atmospheric backgrounds for both modes */
html[data-theme="dark"] body {
    background: radial-gradient(ellipse at top, #0f1117 0%, #0a0a0c 60%);
    background-attachment: fixed;
}

html[data-theme="light"] body {
    background: linear-gradient(135deg, #f0f4ff 0%, #fafafa 50%, #f5f0ff 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* ── Pyodide Loading Overlay ── */
.py-loading {
    position: fixed;
    inset: 0;
    background: var(--bg0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.4s ease;
}

.py-loading.fade-out {
    opacity: 0;
    pointer-events: none;
}

.py-loading-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.py-logo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--glass-hi);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .5
    }
}

.py-loading-label {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.py-loading-sub {
    font-size: 12px;
    color: var(--text2);
}

/* ── Responsive Branding ── */
.nav-logo img,
.topbar-logo img,
.dashboard-logo img,
.logo img {
    max-width: 150px;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s var(--spring);
}

@media (max-width: 768px) {
    .nav-logo img {
        max-width: 120px;
    }
}

/* ── Version Footer ── */
.version-footer {
    padding: 24px;
    text-align: center;
    color: var(--text2);
    font-size: 11px;
    letter-spacing: 0.1em;
    opacity: 0.5;
}

.py-loading-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s var(--magnetic);
}

/* ── Auth Gate ── */
.auth-gate {
    position: fixed;
    inset: 0;
    background: var(--bg0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.auth-card {
    width: 380px;
    padding: 32px;
    background: var(--bg-glass);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 20px;
    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
    color: var(--text0);
}

.auth-sub {
    font-size: 12px;
    color: var(--text2);
    margin-bottom: 20px;
}

.auth-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.auth-tab {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: none;
    background: var(--bg3);
    color: var(--text2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--sans);
    transition: all 0.15s;
}

.auth-tab.active {
    background: var(--glass-hi);
    color: var(--text0);
}

.auth-msg {
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 12px;
    margin-bottom: 12px;
    display: none;
}

.auth-msg.show {
    display: block;
}

.auth-msg.error {
    background: var(--danger-bg);
    border: 1px solid rgba(255, 107, 107, 0.25);
    color: var(--danger);
}

.auth-msg.success {
    background: var(--success-bg);
    border: 1px solid rgba(81, 207, 102, 0.25);
    color: var(--success);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.password-field .password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field .password-input-wrap .inp {
    width: 100%;
    padding-right: 36px;
}

.pw-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, background 0.15s;
}

.pw-toggle-btn:hover {
    color: var(--text1);
    background: rgba(255, 255, 255, 0.04);
}

.lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.inp {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text0);
    font-size: 13px;
    font-family: var(--sans);
    outline: none;
    transition: border-color 0.15s;
}

.inp:focus {
    border-color: var(--border-hi);
}

.inp::placeholder {
    color: var(--text3);
}

.auth-submit {
    width: 100%;
    padding: 11px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--sans);
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-submit:hover:not(:disabled) {
    opacity: 0.88;
}

.auth-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spin {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: none;
}

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

/* Landing Page Marquee */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: inline-block;
    animation: scroll-marquee 20s linear infinite;
    padding-right: 48px;
    /* space between repeats */
}

@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Typography & Globals ── */
body,
html {
    background-color: var(--bg0);
    color: var(--text0);
    font-family: var(--sans);
    height: 100%;
    margin: 0;
    overflow: hidden;
    user-select: none;
}

/* AI Markdown Formatting (Pillar 2) */
.ai-message .content h1,
.ai-message .content h2,
.ai-message .content h3 {
    margin: 16px 0 8px 0;
    color: #00ff88;
    line-height: 1.2;
}

.ai-message .content h1 {
    font-size: 1.4em;
}

.ai-message .content h2 {
    font-size: 1.2em;
}

.ai-message .content h3 {
    font-size: 1.1em;
}

.ai-message .content ul,
.ai-message .content ol {
    margin: 8px 0;
    padding-left: 20px;
}

.ai-message .content li {
    margin-bottom: 4px;
}

.ai-message .content p {
    margin-bottom: 8px;
}

.ai-message .content code {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.9em;
}

/* ── AI 專屬排版：三大模式 Lead / Full / Debug ── */
.ai-message {
    position: relative;
    border-radius: 12px;
    transition: border-color 0.2s, background 0.2s;
}

/* Lead: 引導式，緊湊、蘇格拉底風格 */
.ai-message.ai-layout-lead {
    background: rgba(0, 255, 136, 0.04);
    border-left: 3px solid rgba(0, 255, 136, 0.4);
    padding: 10px 14px;
}

.ai-message.ai-layout-lead .content {
    font-size: 13px;
    line-height: 1.6;
}

.ai-message.ai-layout-lead .content pre {
    margin: 10px 0;
    font-size: 12px;
}

/* Full: 完整輸出，豐富排版 */
.ai-message.ai-layout-full {
    background: rgba(130, 170, 255, 0.06);
    border-left: 3px solid rgba(130, 170, 255, 0.5);
    padding: 14px 18px;
}

.ai-message.ai-layout-full .content {
    font-size: 14px;
    line-height: 1.7;
}

.ai-message.ai-layout-full .content pre {
    margin: 12px 0;
    font-size: 13px;
}

/* Debug: 除錯模式，代碼優先、錯誤高亮 */
.ai-message.ai-layout-debug {
    background: rgba(255, 75, 75, 0.04);
    border-left: 3px solid rgba(255, 75, 75, 0.5);
    padding: 12px 16px;
}

.ai-message.ai-layout-debug .content {
    font-size: 13px;
    font-family: var(--mono), monospace;
}

.ai-message.ai-layout-debug .content pre {
    margin: 12px 0;
    font-size: 12px;
    border: 1px solid rgba(255, 75, 75, 0.2);
    background: rgba(255, 75, 75, 0.05);
}

.ai-message.ai-layout-debug .content code {
    background: rgba(255, 75, 75, 0.15);
}

/* Custom Scrollbar for .content elements */
.content {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

.content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.content::-webkit-scrollbar-track {
    background: var(--scroll-track);
}

.content::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 4px;
    border: 2px solid var(--scroll-track);
}

/* Glassmorphism Classes (Pillar 2) */
.glass-panel {
    background: rgba(15, 15, 15, 0.65) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Aura Glow Effect (Pillar 2) */
.aura-effect {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    background: linear-gradient(to top, var(--accent) 0%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.aura-effect.active {
    opacity: 0.15;
    transform: translateY(0);
    animation: aura-breathe 4s ease-in-out infinite;
}

@keyframes aura-breathe {

    0%,
    100% {
        opacity: 0.12;
        transform: translateY(0) scale(1);
    }

    50% {
        opacity: 0.18;
        transform: translateY(-5px) scale(1.02);
    }
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text3);
    font-size: 11px;
    margin: 12px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.google-btn {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text1);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--sans);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
    margin-bottom: 8px;
}

.google-btn:hover {
    border-color: var(--border-hi);
    color: var(--text0);
}

.skip-btn {
    width: 100%;
    padding: 8px;
    background: transparent;
    border: none;
    color: var(--text2);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--sans);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.15s;
    text-align: center;
}

.skip-btn:hover {
    color: var(--text1);
}

/* ── App Shell ── */
.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ── Topbar ── */
.topbar {
    height: var(--topbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: var(--bg1);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-icon {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 100px;
    line-height: 1;
    text-transform: uppercase;
}

.plan-icon.plan-free {
    background: var(--bg2);
    color: var(--text2);
}

.plan-icon.plan-pro {
    background: linear-gradient(135deg, #c0c0c0, #808080);
    color: #000;
}

.plan-icon.plan-ultra {
    background: linear-gradient(135deg, #ffd700, #ffb347);
    color: #000;
}

.topbar-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 8px;
}

.topbar-logo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text0);
    padding: 0 4px;
}

.topbar-logo svg {
    color: var(--accent);
}

.topbar-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    font-family: var(--sans);
}

.topbar-btn:hover {
    background: var(--glass-hi);
    border-color: var(--border);
    color: var(--text0);
}

.topbar-btn.active {
    background: var(--glass-hi);
    border-color: var(--border-hi);
    color: var(--text0);
}

.sensei-btn {
    width: auto;
    gap: 6px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
}

.run-btn {
    padding: 0 12px;
    height: 28px;
    border-radius: 6px;
    background: rgba(79, 142, 247, 0.12);
    border: 1px solid rgba(79, 142, 247, 0.2);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    letter-spacing: -0.01em;
}

.run-btn:hover:not(:disabled) {
    background: rgba(79, 142, 247, 0.22);
    box-shadow: 0 0 12px rgba(79, 142, 247, 0.3);
    transform: scale(1.02);
}

.run-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.run-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.run-btn.running {
    animation: runningPulse 1s ease-in-out infinite;
}

@keyframes runningPulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .6
    }
}

/* File tabs */
.file-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.file-tabs::-webkit-scrollbar {
    display: none;
}

.file-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text2);
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.12s;
    background: transparent;
    font-family: var(--mono);
}

.file-tab:hover {
    color: var(--text1);
    background: var(--glass-hi);
}

.file-tab.active {
    color: var(--text0);
    background: var(--glass-hi);
    border-color: var(--border);
}

.tab-close {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.1s;
    color: var(--text2);
    cursor: pointer;
    margin-left: 2px;
}

.file-tab:hover .tab-close,
.file-tab.active .tab-close {
    opacity: 1;
}

.tab-close:hover {
    color: var(--text0);
    background: var(--glass-hi);
}

/* Context Menu */
.context-menu {
    position: absolute;
    background: var(--bg2);
    border: 1px solid var(--border-hi);
    border-radius: 8px;
    padding: 6px;
    min-width: 140px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    z-index: 9999;
    animation: slideUpFade 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ctx-item {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text1);
    border-radius: 5px;
    cursor: pointer;
    font-family: var(--sans);
    transition: all 0.1s;
}

.ctx-item:hover {
    background: var(--accent);
    color: #fff;
}

.ctx-item.ctx-danger {
    color: var(--danger);
}

.ctx-item.ctx-danger:hover {
    background: var(--danger);
    color: #fff;
}

.slider-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 2px;
    background: var(--border-hi);
    border-radius: 2px;
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

#font-val {
    font-size: 11px;
    color: var(--text2);
    min-width: 28px;
    text-align: right;
    font-family: var(--mono);
}

/* Toggle */
.toggle {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    cursor: pointer;
}

.toggle input {
    display: none;
}

.track {
    position: absolute;
    inset: 0;
    border-radius: 9px;
    background: var(--border-hi);
    transition: background 0.2s;
}

.track::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

input:checked+.track {
    background: var(--accent);
}

input:checked+.track::after {
    transform: translateX(16px);
}

/* User avatar */
.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg3);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    color: var(--text1);
    overflow: hidden;
    transition: border-color 0.15s;
}

.user-avatar:hover {
    border-color: var(--border-hi);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Main Layout ── */
.main-layout {
    flex: 1;
    display: grid;
    grid-template-columns: var(--sidebar-w) 4px 1fr var(--sensei-panel-w, 0px);
    overflow: hidden;
    position: relative;
}

.main-layout.sidebar-collapsed {
    --sidebar-w: 0px;
}

.main-layout.sensei-open {
    --sensei-panel-w: var(--sensei-w);
}

/* ── Sidebar ── */
.sidebar {
    background: var(--bg1);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    transition: min-width 0.15s;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.icon-btn {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

.icon-btn:hover {
    background: var(--glass-hi);
    color: var(--text0);
}

.file-tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.file-tree::-webkit-scrollbar {
    width: 4px;
}

.file-tree::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.file-tree-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    color: var(--text3);
    font-size: 11px;
    text-align: center;
    padding: 20px;
}

.file-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease-out;
    border-left: 2px solid transparent;
}

.file-item:hover {
    background: var(--glass-hi);
}

.file-item.active {
    background: var(--accent2);
    border-left-color: var(--success);
}

.file-item-icon {
    color: var(--text2);
    flex-shrink: 0;
}

.file-item-name {
    flex: 1;
    font-size: 12px;
    font-family: var(--mono);
    color: var(--text1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-item.active .file-item-name {
    color: var(--accent);
}

.file-item-actions {
    display: none;
    align-items: center;
    gap: 2px;
}

.file-item:hover .file-item-actions {
    display: flex;
}

.file-action {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.file-action:hover {
    background: var(--glass-hi);
    color: var(--text0);
}

.file-action.del:hover {
    color: var(--danger);
}

/* ── Sidebar resize handle ── */
.sidebar-resize {
    width: 4px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    transition: background 0.1s;
}

.sidebar-resize:hover,
.sidebar-resize.active {
    background: var(--accent);
    opacity: 0.4;
}

/* ── Center pane ── */
.center-pane {
    display: grid;
    grid-template-columns: 6fr 5px 4fr;
    /* Editor 60%, Terminal 40% */
    grid-template-rows: 1fr;
    overflow: hidden;
    background: var(--bg0);
    /* Pure Black in Dark Mode */
}

/* Editor pane */
.editor-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg0);
}

.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    height: 36px;
    background: var(--bg1);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.editor-filename {
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text1);
    font-weight: 600;
}

/* Monaco container */
.editor-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg0);
}

/* Terminal resize handle (now vertical bar) */
.terminal-resize {
    width: 5px;
    height: 100%;
    background: transparent;
    cursor: col-resize;
    position: relative;
    transition: background 0.1s;
    flex-shrink: 0;
    z-index: 10;
}

.terminal-resize:hover,
.terminal-resize.active {
    background: var(--accent);
    opacity: 0.3;
}

/* Terminal pane */
.terminal-pane {
    display: flex;
    flex-direction: column;
    background: var(--bg1);
    border-top: 1px solid var(--border);
    overflow: hidden;
}

/* Light mode terminal */
html[data-theme="light"] .terminal-pane,
html[data-mode="light"] .terminal-pane {
    background: #fafafa;
    border-top-color: rgba(0, 0, 0, 0.08);
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.terminal-header #clear-btn {
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.terminal-header:hover #clear-btn {
    opacity: 1;
}

.term-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text2);
    font-weight: 600;
}

.term-status {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: 100px;
    font-weight: 600;
    display: none;
}

.term-status.ok {
    display: inline;
    background: var(--success-bg);
    color: var(--success);
}

.term-status.err {
    display: inline;
    background: var(--danger-bg);
    color: var(--danger);
}

.term-status.run {
    display: inline;
    background: var(--accent2);
    color: var(--accent);
}

.terminal-output {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.65;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.terminal-output::-webkit-scrollbar {
    width: 4px;
}

.terminal-output::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.terminal-welcome {
    color: var(--text3);
    font-size: 11.5px;
}

.terminal-welcome kbd {
    font-family: var(--mono);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
}

.term-line {
    display: flex;
    gap: 8px;
    margin-bottom: 1px;
}

.term-line pre {
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

.term-out pre {
    color: var(--text1);
}

.term-err pre {
    color: #f87171;
    background: transparent;
}

.term-info pre {
    color: var(--text2);
}

.term-run pre {
    color: var(--accent);
    font-size: 11px;
}

.term-prefix {
    color: var(--text3);
    font-size: 11px;
    flex-shrink: 0;
    padding-top: 1px;
}

/* ── FORM AI Panel ── */
.sensei-panel {
    width: 0;
    overflow: hidden;
    background: var(--bg1);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    position: relative;
}

.sensei-panel.open {
    width: var(--sensei-w);
}

.sensei-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sensei-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sensei-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    animation: senseiPulse 2s ease-in-out infinite;
}

@keyframes senseiPulse {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.25)
    }
}

.sensei-intro {
    padding: 14px;
    margin: 10px;
    border-radius: 10px;
    background: var(--glass-hi);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    flex-shrink: 0;
}

.sensei-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent2);
    border: 1px solid var(--run-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.sensei-intro p {
    font-size: 12px;
    color: var(--text1);
    line-height: 1.6;
}

.sensei-message-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scrollbar-width: none;
}

.sensei-message-list::-webkit-scrollbar {
    width: 0;
}

.sensei-msg {
    font-size: 13px;
    line-height: 1.5;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    position: relative;
    max-width: 90%;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes msgIn {
    from {
        opacity: 0;
        transform: translateY(6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.sensei-msg.user {
    background: var(--accent2);
    border-color: var(--run-border);
}

.sensei-msg.ai {
    background: var(--bg3);
}

.sensei-msg.error-ctx {
    border-color: rgba(255, 107, 107, 0.2);
    background: var(--danger-bg);
}

.sensei-msg-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
}

.sensei-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text2);
    font-size: 12px;
    flex-shrink: 0;
}

.thinking-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.thinking-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    animation: dotBounce 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.thinking-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotBounce {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.3
    }

    40% {
        transform: scale(1);
        opacity: 1
    }
}

.sensei-ask-wrap {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.sensei-ask-input {
    flex: 1;
    resize: none;
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text0);
    font-size: 12px;
    font-family: var(--sans);
    outline: none;
    line-height: 1.5;
    max-height: 80px;
    overflow-y: auto;
    transition: border-color 0.15s;
}

.sensei-ask-input:focus {
    border-color: var(--border-hi);
}

.sensei-ask-input::placeholder {
    color: var(--text3);
}

.sensei-ask-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--accent);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.sensei-ask-btn:hover {
    opacity: 0.85;
}

.sensei-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(79, 142, 247, 0.16), transparent 60%),
        rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sensei-overlay-inner {
    text-align: center;
    padding: 18px 22px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 10, 10, 0.75);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

.sensei-overlay-title {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 6px;
}

.sensei-overlay-sub {
    font-size: 12px;
    color: var(--text1);
}

/* Credits Terminal Overlay */
.credits-terminal-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(79, 142, 247, 0.25), transparent 60%), #000000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.credits-terminal-inner {
    position: relative;
    width: min(960px, 90vw);
    height: min(540px, 80vh);
    background: rgba(4, 4, 4, 0.9);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.credits-terminal-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 100% 3px;
    opacity: 0.22;
    pointer-events: none;
}

.credits-terminal-output {
    position: relative;
    flex: 1;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
    color: #51cf66;
    overflow-y: auto;
    white-space: pre-wrap;
}

.credits-terminal-hint {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text2);
    text-align: right;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Dialog ── */
.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8000;
}

.dialog-box {
    width: 320px;
    background: var(--bg2);
    border: 1px solid var(--border-hi);
    border-radius: 12px;
    padding: 24px;
    animation: slideUp 0.2s ease;
}

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

.dialog-btns {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.dialog-cancel {
    flex: 1;
    padding: 9px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text1);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--sans);
}

.dialog-ok {
    flex: 1;
    padding: 9px;
    border-radius: 7px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--sans);
}

/* Share modal - clean layout, no crooked elements */
.share-modal-box {
    width: 400px;
    max-width: 90vw;
    text-align: center;
    padding: 24px;
}

.share-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.share-modal-desc {
    font-size: 13px;
    color: var(--text2);
    margin-bottom: 20px;
}

.share-modal-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
}

.share-modal-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--text0);
    font-family: var(--mono);
    font-size: 12px;
    outline: none;
}

.share-modal-copy {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    transition: opacity 0.2s;
}

.share-modal-copy:hover {
    opacity: 0.9;
}

.share-modal-actions {
    display: flex;
    justify-content: center;
}

/* ── Status bar (bottom of IDE — Linear/Zed minimal style) ── */
.pf-status-bar {
    height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: #111113;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: #71717a;
    font-family: var(--mono);
    flex-shrink: 0;
    user-select: none;
}

html[data-theme="light"] .pf-status-bar {
    background: #fafafa;
    color: rgba(0, 0, 0, 0.5);
}

.pf-status-sep {
    color: rgba(255, 255, 255, 0.15);
}

.pf-status-spacer {
    flex: 1;
}

/* App must be a flex column so status bar lives at bottom under main-layout */
#app.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Settings Modal */
.settings-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.settings-modal-box {
    width: 420px;
    background: var(--lg-bg-hover);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid var(--lg-border-strong);
    border-radius: 20px;
    box-shadow: var(--lg-shadow-elev);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.settings-modal-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--lg-border-strong) 30%, var(--lg-border-strong) 70%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

html[data-mode="light"] .settings-modal-box {
    background: rgba(255, 255, 255, 0.7);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.settings-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Hide section caps headers — "less is more" redesign keeps the row labels speak for themselves. */
.settings-modal-box .settings-label {
    display: none;
}

.settings-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.settings-credits-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text2);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--sans);
    transition: border-color 0.16s var(--magnetic), background 0.16s var(--magnetic), color 0.16s var(--magnetic);
}

.settings-credits-btn:hover {
    border-color: var(--border-hi);
    background: var(--glass-hi);
    color: var(--text0);
}

.settings-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text0);
    height: 40px;
    padding: 0 4px;
    border-radius: 6px;
    transition: background 0.15s ease-out;
}

.settings-modal-box .settings-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

html[data-theme="light"] .settings-modal-box .settings-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

.settings-select {
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text0);
    padding: 6px 10px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.theme-toggles {
    display: flex;
    gap: 4px;
    background: var(--bg3);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.theme-btn {
    padding: 6px 16px;
    background: transparent;
    border: none;
    color: var(--text2);
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--sans);
}

.theme-btn.active {
    background: var(--glass-hi);
    color: var(--text0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

html[data-mode="light"] .theme-btn.active {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ── Toast ── */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(24px);
    background: var(--bg2);
    border: 1px solid var(--border-hi);
    color: var(--text0);
    padding: 9px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    white-space: nowrap;
    z-index: 9000;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
}

/* ── Keyboard shortcut hint ── */
kbd {
    font-family: var(--mono);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 10px;
    color: var(--text2);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    /* Settings modal becomes full-width bottom sheet */
    .settings-overlay {
        align-items: flex-end !important;
    }
    .settings-modal-box {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: none !important;
        max-height: 85vh;
        overflow-y: auto;
        animation: pfSheetUp 0.2s ease-out;
    }
    @keyframes pfSheetUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    /* Hide status bar on phones — too cramped */
    .pf-status-bar { display: none; }

    :root {
        --sidebar-w: 0px;
    }

    .main-layout.sensei-open {
        --sensei-panel-w: 100%;
    }

    .sensei-panel.open {
        position: fixed;
        inset: var(--topbar) 0 0 0;
        width: 100%;
        z-index: 500;
    }

    .topbar-logo span {
        display: none;
    }

    .center-pane {
        grid-template-columns: 1fr;
        grid-template-rows: 50vh 5px 1fr;
    }

    .terminal-resize {
        width: 100%;
        height: 5px;
        cursor: row-resize;
    }

    button,
    .icon-btn,
    .topbar-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .topbar,
    .sidebar,
    .navbar {
        user-select: none;
        -webkit-user-select: none;
    }

    .terminal-output,
    .file-tree {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ── Aura Visual Effects (buttery smooth, no hard edges) ── */
.aura-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 45vh;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    mix-blend-mode: screen;
    background: transparent !important;
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(40px) scaleY(0.85);
}

.aura-success {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    background: linear-gradient(to top, rgba(48, 209, 88, 0.35) 0%, rgba(48, 209, 88, 0.08) 40%, transparent 100%) !important;
    animation: aura-breathe 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) ease-in-out infinite alternate;
}

.aura-error {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    background: linear-gradient(to top, rgba(255, 69, 58, 0.35) 0%, rgba(255, 69, 58, 0.08) 40%, transparent 100%) !important;
    animation: aura-breathe 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) ease-in-out infinite alternate;
}

@keyframes aura-breathe {
    0% { opacity: 0.9; filter: brightness(1); }
    100% { opacity: 1; filter: brightness(1.15); }
}

/* Custom FORM Logos */
:root {
    --logo-url: url('./form logo /black logo.svg');
}

[data-mode="dark"] {
    --logo-url: url('./form logo /white logo.svg');
}

.brand-logo {
    width: 38px;
    height: 38px;
    background-image: var(--logo-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.brand-logo-sm {
    width: 26px;
    height: 26px;
    background-image: var(--logo-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.brand-logo-nav {
    width: 32px;
    /* Increased from 26px */
    height: 32px;
    background-image: var(--logo-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM PYTHON input() MODAL
   Apple VisionOS × Glassmorphism × Dark Minimalism
   ═══════════════════════════════════════════════════════════ */

.input-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modal-fade-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.input-modal-card {
    background: rgba(18, 18, 18, 0.82);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px 28px 20px;
    width: min(420px, calc(100vw - 40px));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 24px 64px rgba(0, 0, 0, 0.7),
        0 4px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.input-modal-header {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--mono);
}

.input-modal-tag {
    color: rgba(255, 255, 255, 0.28);
}

.input-modal-prompt {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--mono);
    line-height: 1.5;
    min-height: 20px;
    word-break: break-word;
}

.input-modal-field {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--mono);
    color: rgba(255, 255, 255, 0.95);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    caret-color: rgba(255, 255, 255, 0.8);
}

.input-modal-field::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.input-modal-field:focus {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.input-modal-actions {
    display: flex;
    justify-content: flex-end;
}

.input-modal-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--sans);
    border: none;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        opacity 0.2s ease;
    letter-spacing: -0.01em;
}

.input-modal-submit:hover {
    transform: scale(1.04) translateY(-1px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2), 0 8px 20px rgba(0, 0, 0, 0.4);
}

.input-modal-submit:active {
    transform: scale(0.97);
}

.input-modal-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
    font-family: var(--mono);
    text-align: right;
}

.input-modal-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 10px;
    font-family: var(--mono);
    color: rgba(255, 255, 255, 0.35);
}

/* ═══════════════════════════════════════════════════════════
   INTERACTIVE TERMINAL INPUT ROW (Python input() — inline)
   ═══════════════════════════════════════════════════════════ */
.term-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    animation: term-row-in 0.15s ease;
}

@keyframes term-row-in {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.term-in-prefix {
    color: rgba(255, 255, 255, 0.6) !important;
    flex-shrink: 0;
}

.term-input-field {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.92);
    caret-color: rgba(255, 255, 255, 0.9);
    padding: 0;
    min-width: 0;
}

.term-input-field::placeholder {
    color: rgba(255, 255, 255, 0.18);
}

/* ═══════════════════════════════════════════════════════════
   SPLIT-PANE LAYOUT (Trinket.io style — editor left, terminal right)
   ═══════════════════════════════════════════════════════════ */

/* The split pane fills the center area within main-layout */
.split-pane {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Editor left pane */
.editor-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 65%;
    min-width: 200px;
    overflow: hidden;
    background: var(--bg0, #000);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.editor-pane .editor-container {
    flex: 1;
    min-height: 0;
}

/* Vertical split handle (drag to resize) */
.split-handle {
    width: 5px;
    background: transparent;
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.2s;
    position: relative;
}

.split-handle:hover,
.split-handle.active {
    background: rgba(255, 255, 255, 0.12);
}

/* Terminal right pane — full height, pure black */
.terminal-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 35%;
    min-width: 160px;
    background: #000;
    overflow: hidden;
}

.terminal-output {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px 14px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.88);
    word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════
   INLINE TERMINAL INPUT (Python input() — trinket.io style)
   A seamless borderless <input> embedded right in the terminal
   ═══════════════════════════════════════════════════════════ */

.term-inline-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
    animation: term-row-in 0.12s ease;
}

@keyframes term-row-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.term-inline-prompt {
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.8;
    white-space: pre;
}

/* The magic: looks like terminal text, behaves like an input */
.terminal-inline-input {
    flex: 1;
    min-width: 40px;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    caret-color: rgba(255, 255, 255, 0.9);
}

.terminal-inline-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* When disabled after Enter: looks like static terminal text */
.terminal-inline-input:disabled {
    color: rgba(255, 255, 255, 0.88);
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════
   RUN / STOP BUTTON GROUP
   ═══════════════════════════════════════════════════════════ */
.run-stop-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Run button — white filled, primary */
.run-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    font-size: 12.5px;
    font-weight: 700;
    font-family: var(--sans);
    border: none;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}

.run-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.25);
}

.run-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.run-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.run-btn.running {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Stop button — outline + red hover */
.stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--sans);
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: not-allowed;
    letter-spacing: -0.01em;
    transition: color 0.2s ease, border-color 0.2s ease,
        background 0.2s ease, box-shadow 0.25s ease,
        transform 0.2s ease;
}

.stop-btn:not(:disabled) {
    color: rgba(255, 95, 95, 0.9);
    border-color: rgba(255, 95, 95, 0.35);
    cursor: pointer;
    animation: stop-pulse 2s ease-in-out infinite;
}

.stop-btn:not(:disabled):hover {
    background: rgba(255, 60, 60, 0.12);
    border-color: rgba(255, 80, 80, 0.6);
    color: rgba(255, 100, 100, 1);
    box-shadow: 0 0 14px rgba(255, 60, 60, 0.2);
    transform: translateY(-1px);
    animation: none;
}

.stop-btn:not(:disabled):active {
    transform: scale(0.97);
}

.stop-btn:disabled {
    opacity: 0.3;
}

@keyframes stop-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 80, 80, 0);
        border-color: rgba(255, 95, 95, 0.35);
    }

    50% {
        box-shadow: 0 0 8px rgba(255, 80, 80, 0.2);
        border-color: rgba(255, 95, 95, 0.5);
    }
}

/* Terminal interrupted message */
.term-interrupted {
    color: rgba(255, 90, 90, 0.85);
    font-family: var(--mono);
    font-size: 12px;
    padding: 2px 0;
    font-style: italic;
}

/* ── Package loading terminal messages ───────────────────── */
.term-pkg-info {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    font-family: var(--mono);
    font-size: 12px;
    padding: 1px 0;
}

.term-pkg-ok {
    color: rgba(100, 220, 130, 0.75);
    font-family: var(--mono);
    font-size: 12px;
    padding: 1px 0;
}

.term-pkg-error {
    color: rgba(255, 85, 85, 0.9);
    font-family: var(--mono);
    font-size: 12px;
    padding: 1px 0;
}


/* ═══════════════════════════════════════════════════════════
   PROFILE WIDGET + DROPDOWN (IDE)
   ═══════════════════════════════════════════════════════════ */
.topbar-right {
    position: relative;
}

.profile-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--glass);
    cursor: pointer;
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text0);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tier-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
    padding: 4px 10px;
    line-height: 1;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    background: var(--glass-hi);
    border: 1px solid var(--border-hi);
    border-radius: 12px;
    padding: 6px;
    box-shadow: var(--shadow-md);
    z-index: 2000;
}

.pd-item,
.pd-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: var(--text1);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pd-item:hover,
.pd-link:hover {
    background: var(--accent2);
    color: var(--text0);
}

.pd-divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--border);
}

.text-red {
    color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════
   ACCOUNT / UPGRADE GLASS MODALS
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.modal-box {
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    border: 1px solid var(--border-hi);
    background: var(--glass-hi);
    box-shadow: var(--shadow-md);
    padding: 20px;
}

.upgrade-container {
    width: min(960px, 95vw);
    border-radius: 18px;
    border: 1px solid var(--border-hi);
    background: var(--glass-hi);
    box-shadow: var(--shadow-md);
    padding: 24px;
}

/* ═══════════════════════════════════════════════════════════
   LOGO DARK/LIGHT switching (IDE & shared pages)
   ═══════════════════════════════════════════════════════════ */
.logo-dark,
.logo-light {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

[data-mode="dark"] .logo-light,
[data-theme="dark"] .logo-light {
    display: none;
}

[data-mode="dark"] .logo-dark,
[data-theme="dark"] .logo-dark {
    display: block;
}

[data-mode="light"] .logo-dark,
[data-theme="light"] .logo-dark {
    display: none;
}

[data-mode="light"] .logo-light,
[data-theme="light"] .logo-light {
    display: block;
}

/* ═══════════════════════════════════════════════════════════
   WATERMARK — shown on shared/exported output surfaces
   ═══════════════════════════════════════════════════════════ */
.pyform-watermark {
    position: absolute;
    bottom: 8px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, .22);
    pointer-events: none;
    user-select: none;
    z-index: 10;
}

.pyform-watermark img {
    width: 12px;
    height: 12px;
    opacity: 0.35;
    filter: invert(1);
}

[data-mode="light"] .pyform-watermark,
[data-theme="light"] .pyform-watermark {
    color: rgba(0, 0, 0, .18);
}

[data-mode="light"] .pyform-watermark img,
[data-theme="light"] .pyform-watermark img {
    filter: none;
}

/* ── Liquid Glass Modals (Light/Dark adaptive) ── */
.liquid-glass-modal {
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .liquid-glass-modal {
    background: rgba(20, 20, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .liquid-glass-modal {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .liquid-glass-modal input {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text0) !important;
}

html[data-theme="light"] .liquid-glass-modal label {
    color: var(--text2) !important;
}

/* ═══════════════════════════════════════════════════════════
   FORM AI: Sleek UI & Cinematic Adjustments
   ═══════════════════════════════════════════════════════════ */

/* Custom Dark Scrollbar for the chat history */
#ai-chat-history::-webkit-scrollbar {
    width: 6px;
}

#ai-chat-history::-webkit-scrollbar-track {
    background: transparent;
}

#ai-chat-history::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

#ai-chat-history::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* AI Code Block Styling with Copy Button */
.ai-message pre {
    background: #1e1e1e;
    padding: 12px;
    border-radius: 8px;
    position: relative;
    overflow-x: auto;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-message pre code {
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    color: #e6e6e6;
}

/* Copy 掣：代碼塊 Copy */
.copy-code-btn {
    position: absolute;
    top: 6px;
    right: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: background 0.2s, border-color 0.2s;
}

.copy-code-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.copy-code-btn.copied {
    background: rgba(0, 255, 136, 0.25);
    border-color: rgba(0, 255, 136, 0.5);
}

/* Copy 掣：整段回應 Copy */
.ai-message-copy-all {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.2s, color 0.2s;
}

.ai-message-copy-all:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.ai-message-copy-all.copied {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
}

/* Typing Animation */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    width: fit-content;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: #888;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing-bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* ── Course Instruction Panel (3 Mode Themes) ── */
.course-instruction-panel {
    width: 280px;
    min-width: 280px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Course Mode: Duolingo — Neon Green */
.main-layout[data-mode="course"] .course-instruction-panel,
.course-instruction-panel[data-mode="course"] {
    background: rgba(0, 255, 136, 0.04);
    border-right-color: rgba(0, 255, 136, 0.3);
}
.main-layout[data-mode="course"] .cip-progress-bar {
    background: rgba(0, 255, 136, 0.15);
}
.main-layout[data-mode="course"] .cip-progress-fill {
    background: linear-gradient(90deg, #00ff88, #39ff14);
}
.main-layout[data-mode="course"] .cip-progress-label {
    color: #00ff88;
}

/* Special Task Mode: Hacker — Electric Blue */
.main-layout[data-mode="special"] .course-instruction-panel,
.course-instruction-panel[data-mode="special"] {
    background: rgba(0, 212, 255, 0.04);
    border-right-color: rgba(0, 212, 255, 0.35);
}
.cip-banner-special {
    color: #00d4ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

/* DSE Mode: Exam — Gold/Purple */
.main-layout[data-mode="dse"] .course-instruction-panel,
.course-instruction-panel[data-mode="dse"] {
    background: rgba(255, 215, 0, 0.03);
    border-right-color: rgba(155, 89, 182, 0.4);
}
.cip-banner-dse {
    color: #ffd700;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.cip-progress-wrap {
    margin-bottom: 4px;
}
.cip-progress-label {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
}
.cip-progress-bar {
    height: 4px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}
.cip-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.cip-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
}

.hint-btn-special {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 136, 204, 0.1));
    border: 1px solid rgba(0, 212, 255, 0.4);
    color: #00d4ff;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.hint-btn-special:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.25);
}
.hint-btn-special:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── AI Sidebar (FORM AI Panel) — Bulletproof Toggle ── */
#ai-sidebar {
    width: 350px;
    min-width: 280px;
    max-width: 50vw;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.2s ease, width 0.2s ease;
}

#ai-sidebar.active,
#ai-sidebar.open {
    display: flex;
}

/* 1. Premium Glassmorphism for the AI Sidebar */
#sensei-panel {
    background: rgba(15, 15, 15, 0.65) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    position: relative;
    /* Crucial for absolute resizer */
    min-width: 280px;
    /* Prevent shrinking too much */
    max-width: 50vw;
    /* Prevent taking up more than half the screen */
    transition: width 0.1s;
    /* Smooth dragging */
}

/* 2. The Draggable Handle (Left Edge) */
.resizer {
    width: 6px;
    cursor: col-resize;
    position: absolute;
    top: 0;
    left: -3px;
    /* Hangs slightly over the edge for easier grabbing */
    bottom: 0;
    background-color: transparent;
    z-index: 1000;
    transition: background-color 0.2s ease;
}

/* Highlights the edge when hovering or actively dragging */
.resizer:hover,
.resizer.active {
    background-color: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   APPLE FITNESS 12-BADGE TROPHY SYSTEM (3D Metallic)
   ═══════════════════════════════════════════════════════════ */
.trophy-categories {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trophy-cat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.trophy-cat-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.trophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 12px;
}

/* 3D perspective wrapper */
.badge-container {
    perspective: 1000px;
    aspect-ratio: 1;
}

.badge-body {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 72px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, filter 0.4s ease;
}

.badge-locked {
    background: linear-gradient(145deg, rgba(80,80,80,0.4), rgba(40,40,40,0.5));
    border: 1px solid rgba(255, 255, 255, 0.06);
    filter: grayscale(0.9) brightness(0.5);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.badge-unlocked {
    background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(200,200,200,0.08));
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    filter: none;
    animation: badge-glow 3s ease-in-out infinite;
}

/* Metallic sweep shine */
.badge-unlocked::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.7) 25%, transparent 30%);
    background-size: 200% 100%;
    background-position: 200% 0;
    animation: metallic-shine 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes metallic-shine {
    0% { background-position: 200% 0; opacity: 0.8; }
    50% { background-position: -100% 0; opacity: 1; }
    100% { background-position: 200% 0; opacity: 0.8; }
}

@keyframes badge-glow {
    0%, 100% { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.2); }
    50% { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255,200,100,0.1), inset 0 1px 0 rgba(255,255,255,0.25); }
}

.badge-body.badge-unlocked:hover {
    transform: scale(1.08) rotateY(5deg);
}

.badge-emoji,
.badge-icon { font-size: 24px; z-index: 1; display: flex; align-items: center; justify-content: center; }
.badge-icon svg { width: 28px; height: 28px; flex-shrink: 0; }
.badge-container { perspective: 200px; }
.badge-unlocked .badge-icon {
    display: flex;
    transform-style: preserve-3d;
}
.badge-unlocked .badge-icon svg {
    filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.5));
    transform-style: preserve-3d;
    animation: rotate-3d-badge 6s linear infinite;
}
@keyframes rotate-3d-badge {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
.badge-name { font-size: 9px; font-weight: 700; text-align: center; letter-spacing: 0.02em; z-index: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Unlock flip-in (when badge transitions from locked to unlocked) */
.badge-body.badge-unlocked.flip-in {
    animation: badge-flip-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes badge-flip-in {
    0% { transform: rotateY(180deg); opacity: 0; }
    100% { transform: rotateY(0deg); opacity: 1; }
}

/* Achievement Unlocked Toast (glassmorphism, slide-down + bounce) */
.achievement-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: rgba(15, 15, 15, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 700;
    z-index: 99999;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}

.achievement-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    animation: achievement-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes achievement-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-8px); }
    70% { transform: translateX(-50%) translateY(2px); }
}

.achievement-toast-emoji { font-size: 28px; }

@media (max-width: 600px) {
    .trophy-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   AUTO-CANVAS (Matplotlib chart popup — Pro/Ultra)
   ═══════════════════════════════════════════════════════════ */
.canvas-popup {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: min(420px, calc(100vw - 48px));
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    z-index: 9000;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.canvas-popup.show {
    opacity: 1;
    transform: translateY(0);
}

.canvas-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.canvas-popup-body {
    padding: 14px;
    max-height: 360px;
    overflow: auto;
}

.canvas-popup-body img {
    display: block;
    border-radius: 8px;
}
/* ── Course Showcase (Flip Cards) ── */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 48px;
    perspective: 1200px;
}

.course-flip-container {
    width: 100%;
    height: 480px;
    perspective: 1000px;
}

.course-flip-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

.course-flip-container:hover .course-flip-card {
    transform: rotateY(180deg);
}

.course-card-front, .course-card-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 24px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] .course-card-front,
html[data-theme="light"] .course-card-back {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

/* Base card border glow */
.course-flip-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 25px;
    background: linear-gradient(135deg, var(--theme-color), transparent 60%);
    z-index: -1;
    opacity: 0.5;
}

.course-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, rgba(20,20,20,0.95), rgba(10,10,10,0.98));
    border-color: var(--theme-color);
}

html[data-theme="light"] .course-card-back {
    background: linear-gradient(135deg, rgba(250,250,250,0.95), rgba(240,240,240,0.98));
}

.course-card-back h3 {
    font-size: 22px;
    margin-bottom: 24px;
    color: var(--theme-color);
    text-align: center;
}

.course-card-back ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex: 1;
}

.course-card-back li {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
    color: var(--text);
    background: rgba(255,255,255,0.05);
    padding: 12px 16px;
    border-radius: 12px;
    border-left: 3px solid var(--theme-color);
}

html[data-theme="light"] .course-card-back li {
    background: rgba(0,0,0,0.03);
}

.flip-hint {
    margin-top: auto;
    text-align: center;
    font-size: 12px;
    color: var(--theme-color);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}


/* ── Pricing Toggle ── */
.pricing-toggle-wrap {
    display: flex;
    justify-content: center;
    margin: 32px 0 16px;
}

.pricing-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

html[data-theme="light"] .pricing-toggle {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.pt-btn {
    position: relative;
    padding: 10px 24px;
    border: none;
    background: transparent;
    color: var(--text2);
    font-size: 14px;
    font-weight: 600;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s;
}

.pt-btn:hover {
    color: var(--text);
}

.pt-btn.active {
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.pt-save {
    position: absolute;
    top: -12px;
    right: -10px;
    background: #ff5f57;
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 100px;
    transform: rotate(5deg);
}

/* ── RPG Quest Log (Course Panel) ── */
.quest-log-panel {
    background: rgba(10, 15, 20, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid rgba(74, 222, 128, 0.2) !important;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: inset -10px 0 30px rgba(0,0,0,0.5);
}

.quest-progress-wrap {
    padding: 16px 20px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(74, 222, 128, 0.15);
}

.quest-progress-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
    animation: pulse-text 2s infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 15px rgba(74, 222, 128, 0.8); }
}

.quest-progress-bar {
    display: flex;
    gap: 4px;
    height: 6px;
}

.quest-progress-segment {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
}
.quest-progress-segment.completed {
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
}
.quest-progress-segment.active {
    background: #4ade80;
    opacity: 0.6;
    animation: pulse-segment 1s infinite alternate;
}

@keyframes pulse-segment {
    from { opacity: 0.4; box-shadow: 0 0 5px #4ade80; }
    to { opacity: 1; box-shadow: 0 0 15px #4ade80; }
}

.quest-header {
    padding: 20px 20px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quest-content-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
    font-family: 'Inter', sans-serif;
}

/* Quest Content Styling overrides */
.quest-context {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.quest-objective {
    background: rgba(74, 222, 128, 0.05);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.quest-objective h4 {
    color: #4ade80;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.quest-objective ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quest-objective li {
    font-size: 13px;
    color: #fff;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.quest-objective li::before {
    content: '[ ]';
    color: #4ade80;
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
}

/* Base styling for code blocks in quest */
.quest-content-scroll pre {
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    overflow-x: auto;
}

.quest-content-scroll code {
    font-family: 'JetBrains Mono', monospace;
    color: #fbbf24;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 4px;
    border-radius: 4px;
}

/* Action Area */
.quest-action-area {
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    border-top: 1px solid rgba(255,255,255,0.05);
}

.submit-quest-btn {
    width: 100%;
    padding: 16px;
    background: #4ade80;
    color: #000;
    border: none;
    border-radius: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.submit-quest-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.8);
    background: #5efa90;
}


/* ── RPG Level Up Modal ── */
.level-up-box {
    position: relative;
    max-width: 500px;
    width: 100%;
    padding: 40px;
    border-radius: 20px;
    background: rgba(15, 20, 15, 0.85);
    border: 1px solid rgba(74, 222, 128, 0.4);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(74, 222, 128, 0.1);
    text-align: center;
    overflow: hidden;
}

.level-up-glare {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(74, 222, 128, 0.2) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.level-up-title {
    position: relative;
    z-index: 1;
    font-size: 28px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-shadow: 0 0 20px rgba(255,255,255,0.5);
    margin-bottom: 12px;
}

.level-up-xp {
    position: relative;
    z-index: 1;
    font-size: 48px;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
    margin-bottom: 30px;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.ai-eval-report {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 3px solid #60a5fa;
    padding: 16px;
    border-radius: 8px;
    text-align: left;
    margin-bottom: 30px;
}

.level-up-next-btn {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 18px;
    background: #4ade80;
    color: #000;
    border: none;
    border-radius: 12px;
    font-weight: 900;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
    transition: all 0.3s;
    margin-bottom: 16px;
}

.level-up-next-btn:hover {
    box-shadow: 0 0 40px rgba(74, 222, 128, 0.8);
    background: #5efa90;
    transform: scale(1.02);
}

.level-up-review-btn {
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s;
}

.level-up-review-btn:hover {
    color: #fff;
}