:root {
    --bg: #0d0f10;
    --panel: #121516;
    --panel-2: #191d1f;
    --panel-3: #222729;
    --border: #2c3235;
    --text: #eef1f2;
    --muted: #929b9f;
    --accent: #d97757;
    --accent-hover: #e78968;
    --danger: #ff7777;
    --user: #273035;
    --shadow: 0 18px 60px rgba(0, 0, 0, .32);

    --code-bg: #1e1e1e;
    --code-toolbar: #181818;
    --code-border: #333333;
    --code-text: #d4d4d4;
    --code-keyword: #c586c0;
    --code-string: #ce9178;
    --code-comment: #6a9955;
    --code-number: #b5cea8;
    --code-variable: #9cdcfe;
    --code-function: #dcdcaa;
    --code-tag: #569cd6;
    --code-attr: #9cdcfe;
    --code-operator: #d4d4d4;
}

body[data-code-theme="monokai"] {
    --code-bg: #272822;
    --code-toolbar: #20211c;
    --code-border: #3b3d32;
    --code-text: #f8f8f2;
    --code-keyword: #f92672;
    --code-string: #e6db74;
    --code-comment: #75715e;
    --code-number: #ae81ff;
    --code-variable: #fd971f;
    --code-function: #a6e22e;
    --code-tag: #f92672;
    --code-attr: #a6e22e;
    --code-operator: #f8f8f2;
}

body[data-code-theme="dracula"] {
    --code-bg: #282a36;
    --code-toolbar: #21222c;
    --code-border: #44475a;
    --code-text: #f8f8f2;
    --code-keyword: #ff79c6;
    --code-string: #f1fa8c;
    --code-comment: #6272a4;
    --code-number: #bd93f9;
    --code-variable: #8be9fd;
    --code-function: #50fa7b;
    --code-tag: #ff79c6;
    --code-attr: #50fa7b;
    --code-operator: #ff79c6;
}

body[data-code-theme="one-dark"] {
    --code-bg: #282c34;
    --code-toolbar: #21252b;
    --code-border: #3e4451;
    --code-text: #abb2bf;
    --code-keyword: #c678dd;
    --code-string: #98c379;
    --code-comment: #5c6370;
    --code-number: #d19a66;
    --code-variable: #e06c75;
    --code-function: #61afef;
    --code-tag: #e06c75;
    --code-attr: #d19a66;
    --code-operator: #56b6c2;
}

body[data-code-theme="github-light"] {
    --code-bg: #f6f8fa;
    --code-toolbar: #eef1f4;
    --code-border: #d0d7de;
    --code-text: #24292f;
    --code-keyword: #cf222e;
    --code-string: #0a3069;
    --code-comment: #6e7781;
    --code-number: #0550ae;
    --code-variable: #953800;
    --code-function: #8250df;
    --code-tag: #116329;
    --code-attr: #953800;
    --code-operator: #24292f;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.modal-open { overflow: hidden; }
button, textarea, select { font: inherit; }
button { color: inherit; }

.app-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    height: 100dvh;
}

.sidebar {
    position: relative;
    z-index: 20;
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 17px;
    padding: 22px 14px 16px;
    border-right: 1px solid var(--border);
    background: #101314;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
}

.brand-mark,
.welcome-logo {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #e18a68, #b85236);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(217, 119, 87, .22);
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 13px;
}

.brand strong,
.brand span { display: block; }
.brand strong { font-size: 15px; }
.brand span { margin-top: 2px; color: var(--muted); font-size: 12px; }

.new-chat-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-2);
    cursor: pointer;
    transition: .18s ease;
}

.new-chat-button:hover {
    border-color: #475055;
    background: var(--panel-3);
}

.history-panel {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 8px 9px;
    color: #cbd1d3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.history-heading small {
    display: grid;
    min-width: 23px;
    height: 20px;
    place-items: center;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--panel-2);
    color: var(--muted);
    font-size: 10px;
}

.chat-history {
    min-height: 0;
    overflow-y: auto;
    padding-right: 3px;
}

.history-empty {
    padding: 16px 10px;
    color: #6f787c;
    font-size: 12px;
    text-align: center;
}

.history-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: .16s ease;
}

.history-item:hover { background: #181c1e; }
.history-item.active {
    border-color: #3a4246;
    background: #202527;
}

.history-open {
    min-width: 0;
    flex: 1;
    padding: 9px 32px 9px 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.history-title,
.history-meta { display: block; }
.history-title {
    overflow: hidden;
    color: #dfe4e6;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-meta {
    margin-top: 4px;
    color: #737c80;
    font-size: 10px;
}

.history-delete {
    position: absolute;
    right: 6px;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #747e82;
    cursor: pointer;
    opacity: 0;
}

.history-item:hover .history-delete,
.history-item.active .history-delete { opacity: 1; }
.history-delete:hover { background: rgba(255, 119, 119, .12); color: var(--danger); }

.sidebar-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px 0;
    color: var(--muted);
    font-size: 11px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #68c78f;
    box-shadow: 0 0 10px rgba(104, 199, 143, .6);
}

.main-panel {
    position: relative;
    min-width: 0;
    height: 100dvh;
    background:
        radial-gradient(circle at 50% -20%, rgba(217, 119, 87, .08), transparent 38%),
        var(--bg);
}

.desktop-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 9;
    display: flex;
    height: 62px;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(44, 50, 53, .72);
    background: rgba(13, 15, 16, .82);
    backdrop-filter: blur(14px);
}

.desktop-title {
    max-width: min(650px, calc(100% - 150px));
    overflow: hidden;
    color: #cfd5d7;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-button {
    position: absolute;
    right: 20px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: #aeb6b9;
    cursor: pointer;
    font-size: 19px;
}

.settings-button:hover {
    border-color: var(--border);
    background: var(--panel-2);
    color: #fff;
}

.mobile-header { display: none; }

.chat {
    height: 100%;
    overflow-y: auto;
    padding: 92px max(24px, calc((100% - 900px) / 2)) 190px;
    scroll-behavior: smooth;
}

.welcome {
    display: flex;
    min-height: calc(100dvh - 300px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.welcome-logo {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 26px;
}

.welcome h1 {
    margin: 22px 0 8px;
    font-size: clamp(27px, 4vw, 42px);
    letter-spacing: -.04em;
}

.welcome > p {
    max-width: 570px;
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: min(620px, 100%);
    margin-top: 30px;
}

.feature-grid > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(24, 28, 30, .75);
    text-align: left;
}

.feature-grid span { color: var(--accent); font-weight: 800; }
.feature-grid strong { margin-top: 12px; font-size: 14px; }
.feature-grid small { margin-top: 4px; color: var(--muted); font-size: 11px; }

.message-row {
    display: flex;
    width: 100%;
    margin: 0 0 26px;
}

.message-row.user { justify-content: flex-end; }
.message-row.assistant { justify-content: flex-start; }

.message {
    max-width: min(820px, 88%);
    overflow-wrap: anywhere;
    line-height: 1.68;
}

.message-row.user .message {
    padding: 13px 17px;
    border: 1px solid #374248;
    border-radius: 18px 18px 5px 18px;
    background: var(--user);
}

.message-row.assistant .message {
    width: 100%;
    padding: 3px 2px;
}

.message p { margin: 0 0 13px; }
.message p:last-child { margin-bottom: 0; }
.message h1,
.message h2,
.message h3 { margin: 24px 0 10px; line-height: 1.3; }
.message h1 { font-size: 1.55em; }
.message h2 { font-size: 1.3em; }
.message h3 { font-size: 1.12em; }
.message ul,
.message ol { margin: 8px 0 15px; padding-left: 25px; }
.message li { margin: 4px 0; }
.message blockquote {
    margin: 14px 0;
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--accent);
    color: #c4cbce;
}
.message a { color: #8fc6ff; }
.message code:not(pre code) {
    padding: 2px 6px;
    border-radius: 6px;
    background: #202628;
    color: #ffd1c2;
    font-size: .91em;
}

.code-block {
    margin: 17px 0;
    overflow: hidden;
    border: 1px solid var(--code-border);
    border-radius: 12px;
    background: var(--code-bg);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.code-toolbar {
    display: flex;
    min-height: 39px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 14px;
    border-bottom: 1px solid var(--code-border);
    background: var(--code-toolbar);
    color: var(--code-text);
}

.code-toolbar > span {
    opacity: .68;
    font: 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.copy-code-button {
    padding: 6px 9px;
    border: 1px solid var(--code-border);
    border-radius: 7px;
    background: transparent;
    color: var(--code-text);
    cursor: pointer;
    font-size: 10px;
    opacity: .75;
}

.copy-code-button:hover { opacity: 1; }

.code-block pre {
    margin: 0;
    padding: 17px 18px;
    overflow: auto;
    background: var(--code-bg);
    tab-size: 4;
}

.code-block code {
    color: var(--code-text);
    font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    white-space: pre;
}

.tok-keyword { color: var(--code-keyword); }
.tok-string { color: var(--code-string); }
.tok-comment { color: var(--code-comment); font-style: italic; }
.tok-number { color: var(--code-number); }
.tok-variable { color: var(--code-variable); }
.tok-function { color: var(--code-function); }
.tok-tag { color: var(--code-tag); }
.tok-attr { color: var(--code-attr); }
.tok-operator { color: var(--code-operator); }

.attachment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 9px;
}

.attachment-chip {
    display: inline-flex;
    max-width: 260px;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid #414b50;
    border-radius: 9px;
    background: rgba(10, 12, 13, .25);
    color: #dce1e3;
    font-size: 11px;
}

.attachment-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.typing { display: inline-flex; gap: 5px; padding: 10px 0; }
.typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    animation: typing 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30% { transform: translateY(-5px); opacity: 1; }
}

.composer-wrap {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 20px max(24px, calc((100% - 900px) / 2)) 18px;
    background: linear-gradient(to top, var(--bg) 68%, transparent);
}

.composer {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 9px;
    border: 1px solid #353d40;
    border-radius: 18px;
    background: #171b1d;
    box-shadow: var(--shadow);
}

.composer:focus-within {
    border-color: #755043;
    box-shadow: var(--shadow), 0 0 0 3px rgba(217, 119, 87, .08);
}

.composer textarea {
    flex: 1;
    max-height: 190px;
    padding: 10px 4px;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: var(--text);
    line-height: 1.5;
}

.composer textarea::placeholder { color: #747e82; }

.attach-button,
.send-button,
.icon-button {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    cursor: pointer;
}

.attach-button {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    background: #242a2d;
    color: #cfd5d7;
    font-size: 23px;
}
.attach-button:hover { background: #30373a; }
.attach-button:disabled { opacity: .35; cursor: not-allowed; }

.send-button {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
}
.send-button:hover { background: var(--accent-hover); }
.send-button:disabled { opacity: .42; cursor: not-allowed; }

.composer-hint {
    margin-top: 8px;
    color: #687175;
    font-size: 10px;
    text-align: center;
}

.selected-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 9px;
}

.selected-file {
    display: flex;
    max-width: 280px;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-2);
    font-size: 11px;
}
.selected-file .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-file .file-size { color: var(--muted); white-space: nowrap; }
.selected-file button { padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.selected-file button:hover { color: var(--danger); }

.error-banner {
    display: none;
    margin-bottom: 10px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 119, 119, .35);
    border-radius: 10px;
    background: rgba(150, 44, 44, .16);
    color: #ffb2b2;
    font-size: 12px;
}
.error-banner.visible { display: block; }

.sidebar-overlay { display: none; }

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .67);
    backdrop-filter: blur(7px);
}
.modal-overlay.visible { display: flex; }

.settings-modal {
    display: flex;
    width: min(760px, 100%);
    max-height: min(820px, calc(100dvh - 48px));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #373f42;
    border-radius: 18px;
    background: #15191b;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .6);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 21px; }
.modal-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }

.modal-close {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 25px;
}
.modal-close:hover { background: var(--panel-3); color: #fff; }

.modal-body {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 30px;
    overflow-y: auto;
    padding: 24px;
}

.settings-section h3 { margin: 0 0 15px; font-size: 14px; }
.settings-section > label {
    display: block;
    margin: 14px 0 7px;
    color: #cbd1d3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.settings-section select,
.settings-section textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: 0;
    background: var(--panel-2);
    color: var(--text);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.settings-section select { padding: 10px 12px; }
.settings-section textarea { min-height: 126px; padding: 11px 12px; resize: vertical; line-height: 1.45; }
.settings-section select:focus,
.settings-section textarea:focus { border-color: #8a5a49; box-shadow: 0 0 0 3px rgba(217, 119, 87, .10); }
.settings-section select:disabled,
.settings-section textarea:disabled { opacity: .57; cursor: not-allowed; }
.settings-note,
.section-description { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.section-description { margin-top: -8px; margin-bottom: 13px; }

.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.theme-option {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #191d1f;
    cursor: pointer;
}
.theme-option:hover { border-color: #4d575b; }
.theme-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(217, 119, 87, .12); }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option > strong { padding: 0 3px 2px; font-size: 11px; }

.theme-preview {
    display: block;
    padding: 12px 10px;
    overflow: hidden;
    border-radius: 7px;
    font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}
.theme-preview i { font-style: normal; }
.theme-preview em { font-style: normal; }
.theme-vscode { background: #1e1e1e; color: #d4d4d4; }
.theme-vscode i { color: #c586c0; }
.theme-vscode b { color: #dcdcaa; }
.theme-monokai { background: #272822; color: #f8f8f2; }
.theme-monokai i { color: #f92672; }
.theme-monokai b { color: #a6e22e; }
.theme-dracula { background: #282a36; color: #f8f8f2; }
.theme-dracula i { color: #ff79c6; }
.theme-dracula b { color: #50fa7b; }
.theme-one-dark { background: #282c34; color: #abb2bf; }
.theme-one-dark i { color: #c678dd; }
.theme-one-dark b { color: #61afef; }
.theme-github-light { background: #f6f8fa; color: #24292f; }
.theme-github-light i { color: #cf222e; }
.theme-github-light b { color: #8250df; }

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: #121617;
}

.primary-button,
.secondary-button {
    padding: 9px 14px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.primary-button:hover { background: var(--accent-hover); }
.primary-button:disabled { opacity: .55; cursor: not-allowed; }
.secondary-button { border: 1px solid var(--border); background: var(--panel-2); color: #d6dcde; }
.secondary-button:hover { background: var(--panel-3); }
.settings-saved { margin-right: auto; color: #7bd49d; font-size: 11px; opacity: 0; }
.settings-saved.visible { opacity: 1; }

@media (max-width: 800px) {
    .app-shell { display: block; }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(88vw, 320px);
        transform: translateX(-102%);
        transition: transform .22s ease;
        box-shadow: 20px 0 60px rgba(0, 0, 0, .5);
    }
    .sidebar.open { transform: translateX(0); }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 15;
        background: rgba(0, 0, 0, .55);
    }
    .sidebar-overlay.visible { display: block; }

    .desktop-header { display: none; }

    .mobile-header {
        position: absolute;
        inset: 0 0 auto 0;
        z-index: 8;
        display: flex;
        height: 58px;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        border-bottom: 1px solid var(--border);
        background: rgba(13, 15, 16, .9);
        backdrop-filter: blur(12px);
    }

    .mobile-header strong {
        max-width: calc(100% - 100px);
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .icon-button {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: transparent;
        font-size: 20px;
    }
    .icon-button:hover { background: var(--panel-2); }

    .chat { padding: 88px 16px 180px; }
    .composer-wrap { padding-right: 12px; padding-left: 12px; }
    .message { max-width: 94%; }
    .message-row.assistant .message { max-width: 100%; }

    .feature-grid { grid-template-columns: 1fr; max-width: 350px; }
    .feature-grid > div { flex-direction: row; align-items: center; gap: 9px; }
    .feature-grid strong { margin: 0; }
    .feature-grid small { margin: 0 0 0 auto; }

    .modal-overlay { padding: 10px; align-items: flex-end; }
    .settings-modal { max-height: calc(100dvh - 20px); border-radius: 18px 18px 10px 10px; }
    .modal-body { grid-template-columns: 1fr; gap: 26px; padding: 19px; }
    .modal-header { padding: 18px 19px 15px; }
    .modal-footer { padding: 13px 19px; }
}

@media (max-width: 480px) {
    .theme-grid { grid-template-columns: 1fr; }
    .modal-footer { flex-wrap: wrap; }
    .settings-saved { width: 100%; }
    .secondary-button,
    .primary-button { flex: 1; }
    .code-block pre { padding: 14px; }
    .code-block code { font-size: 12px; }
}

/* Authentication */
.auth-body {
    min-height: 100%;
    overflow: auto;
    background:
        radial-gradient(circle at 20% 10%, rgba(217, 119, 87, .13), transparent 34%),
        radial-gradient(circle at 86% 84%, rgba(68, 109, 130, .12), transparent 32%),
        var(--bg);
}

.auth-shell {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 28px 16px;
}

.auth-card {
    width: min(470px, 100%);
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(18, 21, 22, .96);
    box-shadow: var(--shadow);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.auth-brand strong,
.auth-brand span { display: block; }
.auth-brand strong { font-size: 17px; }
.auth-brand span { margin-top: 3px; color: var(--muted); font-size: 12px; }

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 22px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #0f1213;
}

.auth-tabs a {
    padding: 10px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.auth-tabs a.active {
    background: var(--panel-3);
    color: var(--text);
}

.auth-alert {
    margin-bottom: 17px;
    padding: 11px 13px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
}
.auth-alert.error { border-color: rgba(255, 119, 119, .4); background: rgba(255, 119, 119, .08); color: #ffaaaa; }
.auth-alert.success { border-color: rgba(123, 212, 157, .4); background: rgba(123, 212, 157, .08); color: #9be5b7; }

.auth-form { display: grid; gap: 14px; }
.auth-form label > span {
    display: block;
    margin-bottom: 7px;
    color: #cbd1d3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.auth-form input {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: 0;
    background: var(--panel-2);
    color: var(--text);
}
.auth-form input:focus { border-color: #8a5a49; box-shadow: 0 0 0 3px rgba(217, 119, 87, .10); }
.auth-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.turnstile-wrap { min-height: 65px; overflow-x: auto; }

.auth-submit {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-weight: 750;
}
.auth-submit:hover { background: var(--accent-hover); }
.auth-submit:disabled { opacity: .45; cursor: not-allowed; }
.auth-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.auth-note code { color: #e4b39f; }

/* Logged user */
.account-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-2);
}

.account-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: #30383c;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.account-info { min-width: 0; }
.account-info strong,
.account-info span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-info strong { font-size: 12px; }
.account-info span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.logout-form { margin: 0; }
.logout-form button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
}
.logout-form button:hover { background: var(--panel-3); color: #fff; }

@media (max-width: 480px) {
    .auth-card { padding: 22px 17px; }
    .auth-name-grid { grid-template-columns: 1fr; }
}

/* App appearance: local auto / dark / light setting */
html[data-app-theme="light"] {
    --bg: #f7f8f9;
    --panel: #ffffff;
    --panel-2: #f0f3f5;
    --panel-3: #e6eaed;
    --border: #d4dadd;
    --text: #1b2226;
    --muted: #667177;
    --user: #e7edf0;
    --shadow: 0 18px 60px rgba(31, 42, 48, .14);
    color-scheme: light;
}

html[data-app-theme="dark"] { color-scheme: dark; }

html[data-app-theme="light"] .sidebar { background: #f1f4f5; }
html[data-app-theme="light"] .history-heading,
html[data-app-theme="light"] .settings-section > label,
html[data-app-theme="light"] .auth-form label > span { color: #4d5960; }
html[data-app-theme="light"] .history-empty { color: #8b959a; }
html[data-app-theme="light"] .history-item:hover { background: #e8edef; }
html[data-app-theme="light"] .history-item.active { border-color: #c5cdd1; background: #dfe6e9; }
html[data-app-theme="light"] .history-title { color: #263137; }
html[data-app-theme="light"] .history-meta,
html[data-app-theme="light"] .history-delete { color: #758086; }
html[data-app-theme="light"] .main-panel {
    background: radial-gradient(circle at 50% -20%, rgba(217, 119, 87, .10), transparent 38%), var(--bg);
}
html[data-app-theme="light"] .desktop-header,
html[data-app-theme="light"] .mobile-header {
    border-color: rgba(212, 218, 221, .88);
    background: rgba(247, 248, 249, .88);
}
html[data-app-theme="light"] .desktop-title,
html[data-app-theme="light"] .settings-button { color: #566168; }
html[data-app-theme="light"] .settings-button:hover,
html[data-app-theme="light"] .modal-close:hover,
html[data-app-theme="light"] .logout-form button:hover { color: #1b2226; }
html[data-app-theme="light"] .feature-grid > div { background: rgba(255, 255, 255, .82); }
html[data-app-theme="light"] .message-row.assistant .message { border-color: #d7dde0; }
html[data-app-theme="light"] .message { color: #2c373c; }
html[data-app-theme="light"] .message a { color: #1769aa; }
html[data-app-theme="light"] .message-content :not(pre) > code { background: #e8edf0; color: #8d3d28; }
html[data-app-theme="light"] .attachment-chip { border-color: #ccd4d8; background: rgba(255, 255, 255, .58); color: #39454b; }
html[data-app-theme="light"] .composer { border-color: #c8d0d4; background: #ffffff; }
html[data-app-theme="light"] .composer:focus-within { border-color: #b97861; }
html[data-app-theme="light"] .attach-button { background: #e8edef; color: #4c5960; }
html[data-app-theme="light"] .attach-button:hover { background: #dfe5e8; }
html[data-app-theme="light"] .composer-hint { color: #7b868b; }
html[data-app-theme="light"] .selected-file { border-color: #d0d7da; background: #ffffff; }
html[data-app-theme="light"] .modal-overlay { background: rgba(38, 47, 52, .42); }
html[data-app-theme="light"] .settings-modal { border-color: #cfd6d9; background: #ffffff; box-shadow: 0 30px 100px rgba(31, 42, 48, .28); }
html[data-app-theme="light"] .modal-footer { background: #f5f7f8; }
html[data-app-theme="light"] .theme-option,
html[data-app-theme="light"] .appearance-option { background: #f7f9fa; }
html[data-app-theme="light"] .secondary-button { color: #354148; }
html[data-app-theme="light"] .auth-body {
    background:
        radial-gradient(circle at 20% 10%, rgba(217, 119, 87, .13), transparent 34%),
        radial-gradient(circle at 86% 84%, rgba(68, 109, 130, .10), transparent 32%),
        #eef2f4;
}
html[data-app-theme="light"] .auth-card { background: rgba(255, 255, 255, .96); }
html[data-app-theme="light"] .auth-tabs { background: #edf1f3; }
html[data-app-theme="light"] .auth-form input { background: #f7f9fa; }
html[data-app-theme="light"] .auth-alert.error { color: #9d3131; }
html[data-app-theme="light"] .auth-alert.success { color: #277a48; }
html[data-app-theme="light"] .account-avatar { background: #dce4e7; color: #263137; }

.settings-column {
    display: grid;
    align-content: start;
    gap: 25px;
}

.appearance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.appearance-option {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 12px 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #191d1f;
    cursor: pointer;
    text-align: center;
}
.appearance-option:hover { border-color: #4d575b; }
.appearance-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(217, 119, 87, .12); }
.appearance-option input { position: absolute; opacity: 0; pointer-events: none; }
.appearance-option span { color: var(--accent); font-size: 18px; }
.appearance-option strong { font-size: 11px; }
.appearance-option small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.pwa-section {
    padding-top: 2px;
}

.install-app-button {
    width: 100%;
    margin-top: 8px;
}

@media (max-width: 620px) {
    .appearance-grid { grid-template-columns: 1fr; }
    .appearance-option {
        grid-template-columns: 28px minmax(0, 1fr);
        align-items: center;
        text-align: left;
    }
    .appearance-option span { grid-row: 1 / span 2; }
}