:root {
    --page-gradient: linear-gradient(
        to right,
        #22d3ee 0%,
        #38bdf8 28%,
        #818cf8 58%,
        #7c3aed 82%,
        #6d28d9 100%
    );
    --word-gradient: var(--page-gradient);
    --btn-gradient: var(--page-gradient);
}

.word-gradient,
h1 {
    background-image: var(--page-gradient) !important;
    background-attachment: scroll !important;
    background-size: var(--page-ink-w, 100%) 100% !important;
    background-position: var(--page-ink-x, 0) 0 !important;
    background-repeat: no-repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-danger,
.copy,
.theme-toggle,
.nav-link,
.tab,
.delete-btn,
a.btn,
button.btn,
button.theme-toggle,
main button:not(.remove-btn) {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    background-image: var(--page-gradient) !important;
    background-attachment: scroll !important;
    background-size: var(--page-ink-w, 100%) 100% !important;
    background-position: var(--page-ink-x, 0) 0 !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 2px solid #8b5cf6 !important;
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.28);
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn-danger:hover,
.copy:hover,
.theme-toggle:hover,
.nav-link:hover,
.nav-link.active,
.tab:hover,
.tab.active,
.delete-btn:hover,
a.btn:hover,
button.btn:hover,
main button:not(.remove-btn):hover {
    transform: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #c4b5fd !important;
}

.theme-toggle {
    padding: 10px 14px;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.header,
.header-top {
    overflow: visible;
}
.header-top {
    align-items: flex-start !important;
}
.nav-links {
    align-items: stretch !important;
    align-content: flex-start !important;
}

html[data-theme="light"] {
    --bg: #f3f5fb;
    --panel: #ffffff;
    --line: rgba(79, 70, 229, 0.22);
    --gold: #4f46e5;
    --text: #1a2233;
    --muted: #5b677a;
}

html[data-theme="light"] body {
    color: var(--text, #1a2233) !important;
    background: linear-gradient(135deg, #eef1f8 0%, #f7f8fc 100%) !important;
}

html[data-theme="light"] h2,
html[data-theme="light"] h3 {
    color: #4338ca !important;
}

html[data-theme="light"] .header,
html[data-theme="light"] .card,
html[data-theme="light"] .box,
html[data-theme="light"] .status:not(.success):not(.error):not(.pending),
html[data-theme="light"] .plan,
html[data-theme="light"] .referral,
html[data-theme="light"] .wrap .panel,
html[data-theme="light"] article,
html[data-theme="light"] .summary-card {
    background: #ffffff !important;
    color: #1a2233;
    border-color: rgba(79, 70, 229, 0.28) !important;
    box-shadow: 0 10px 28px rgba(67, 56, 202, 0.08);
}

html[data-theme="light"] .nav-link,
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #8b5cf6 !important;
}

html[data-theme="light"] label,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .muted,
html[data-theme="light"] .hint,
html[data-theme="light"] .time,
html[data-theme="light"] .history-response,
html[data-theme="light"] .history-hint,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .pdn-consent,
html[data-theme="light"] .sub {
    color: #5b677a !important;
}

html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] td,
html[data-theme="light"] .history-prompt,
html[data-theme="light"] .message-content,
html[data-theme="light"] .response-box {
    color: #1a2233 !important;
}

html[data-theme="light"] a {
    color: #4338ca;
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #f4f6fb !important;
    color: #1a2233 !important;
    border-color: rgba(79, 70, 229, 0.35) !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    background: #fff !important;
}

html[data-theme="light"] .chat-messages,
html[data-theme="light"] .history-item,
html[data-theme="light"] .response-box {
    background: #f4f6fb !important;
    border-color: rgba(79, 70, 229, 0.2) !important;
}

html[data-theme="light"] .message.user,
html[data-theme="light"] .message.assistant {
    background: rgba(109, 94, 252, 0.08) !important;
}

html[data-theme="light"] .message.user .message-header,
html[data-theme="light"] .message.assistant .message-header,
html[data-theme="light"] .model-badge,
html[data-theme="light"] .doc-chip,
html[data-theme="light"] .price {
    color: #4338ca !important;
}

html[data-theme="light"] .model-badge,
html[data-theme="light"] .doc-chip {
    background: rgba(109, 94, 252, 0.1) !important;
    border-color: rgba(109, 94, 252, 0.3) !important;
}

html[data-theme="light"] .btn,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .btn-danger,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .tab,
html[data-theme="light"] .tab:hover,
html[data-theme="light"] .tab.active,
html[data-theme="light"] .delete-btn,
html[data-theme="light"] main button:not(.remove-btn) {
    background-image: var(--page-gradient) !important;
    background-attachment: scroll !important;
    background-size: var(--page-ink-w, 100%) 100% !important;
    background-position: var(--page-ink-x, 0) 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 2px solid #8b5cf6 !important;
}

html[data-theme="light"] .reference-upload,
html[data-theme="light"] .credits-bar,
html[data-theme="light"] .gallery-item,
html[data-theme="light"] .history-item {
    background: #ffffff !important;
    color: #1a2233 !important;
    border-color: rgba(79, 70, 229, 0.28) !important;
}

html[data-theme="light"] .reference-upload {
    color: #4338ca !important;
}
html[data-theme="light"] .credits-bar strong,
html[data-theme="light"] .gallery-actions a {
    color: #4338ca !important;
}
html[data-theme="light"] .history-item .prompt {
    color: #1a2233 !important;
}

html[data-theme="light"] .status.success { color: #0f766e; background: rgba(13, 148, 136, 0.1); }
html[data-theme="light"] .status.error { color: #be123c; background: rgba(244, 63, 94, 0.1); }
html[data-theme="light"] .status.pending { color: #4338ca; background: rgba(109, 94, 252, 0.12); }

html[data-theme="light"] #creditsBar,
html[data-theme="light"] #subscriptionBar {
    background: #ffffff !important;
    color: #1a2233 !important;
    border-color: rgba(79, 70, 229, 0.28) !important;
}

html[data-theme="light"] code,
html[data-theme="light"] .ip {
    background: #ecebff !important;
    color: #3730a3 !important;
}

html[data-theme="light"] main a {
    color: #3730a3 !important;
}
html[data-theme="light"] main a:hover {
    color: #1e1b4b !important;
}

html[data-theme="light"] ::-webkit-scrollbar-track { background: #e8ebf4; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(109, 94, 252, 0.45); }

html[data-theme="light"] .referral select option {
    background: #ffffff;
    color: #1a2233;
}

@media (max-width: 768px) {
    html {
        overflow-x: clip;
    }
    body {
        overflow-x: clip;
        max-width: 100%;
        padding-top: max(12px, env(safe-area-inset-top, 0px));
    }
    .container, main, .wrap {
        max-width: 100%;
        min-width: 0;
    }
    .header, .card, .header-top, .nav-links, .btn-group, .tabs {
        min-width: 0;
        max-width: 100%;
    }
    .nav-links {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .nav-link,
    .nav-links .theme-toggle,
    .nav-links .btn {
        width: 100% !important;
        max-width: 100%;
        justify-content: center;
        white-space: normal !important;
        text-align: center;
        padding: 9px 8px !important;
        font-size: 13px !important;
        box-shadow: 0 4px 10px rgba(109, 40, 217, 0.2) !important;
    }
    .tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .tab {
        width: 100%;
        padding: 10px 8px !important;
        font-size: 13px !important;
        text-align: center;
        white-space: normal !important;
        box-shadow: 0 4px 10px rgba(109, 40, 217, 0.2) !important;
    }
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .btn-group .btn {
        min-width: 0 !important;
        width: 100%;
        justify-content: center;
        white-space: normal !important;
    }
    .doc-row .btn,
    .gallery-actions .btn,
    .credits-bar .btn,
    #creditsBar .btn {
        width: auto !important;
        flex: 1 1 auto;
    }
    .message.user { margin-left: 0; }
    .message.assistant { margin-right: 0; }
    .flex-row { grid-template-columns: 1fr !important; }
}