:root {
  color-scheme: light;
  --ink: #17201d;
  --muted: #69736f;
  --line: #dfe6e2;
  --paper: #fbfcfa;
  --panel: #ffffff;
  --soft: #f1f5f2;
  --accent: #126a50;
  --accent-dark: #0b4d3a;
  --accent-soft: #dff2e9;
  --warm: #f5efe2;
  --shadow: 0 18px 50px rgba(24, 50, 41, .08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #ecf6f0; --muted: #9fb0a8; --line: #2a3933; --paper: #0d1411;
    --panel: #131d19; --soft: #1a2721; --accent: #34b88a; --accent-dark: #8ee6c3;
    --accent-soft: #173d31; --warm: #2c271d; --shadow: 0 18px 50px rgba(0,0,0,.34);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ecf6f0; --muted: #9fb0a8; --line: #2a3933; --paper: #0d1411;
  --panel: #131d19; --soft: #1a2721; --accent: #34b88a; --accent-dark: #8ee6c3;
  --accent-soft: #173d31; --warm: #2c271d; --shadow: 0 18px 50px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); min-width: 320px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.auth-video-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #000; }
.auth-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-video-phone { display: none; }
.auth-video-shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(0,0,0,.08), rgba(0,0,0,.68)); }
.auth-gate { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: transparent; }
.auth-card { width: min(100%, 470px); padding: clamp(28px, 6vw, 46px); border: 1px solid rgba(133,255,173,.28); border-radius: 26px; color: #f7fff9; background: rgba(3,11,7,.78); box-shadow: 0 24px 80px rgba(0,0,0,.48); text-align: center; backdrop-filter: blur(14px); }
.auth-mark { display: grid; width: 76px; height: 76px; margin: 0 auto 22px; place-items: center; overflow: hidden; border-radius: 20px; background: #000; box-shadow: 0 14px 30px rgba(0,0,0,.24); }
.auth-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.auth-card .eyebrow { margin-bottom: 10px; }
.auth-card h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 7vw, 2.55rem); font-weight: 500; line-height: 1.08; }
.auth-copy { margin: 18px 0 22px; color: #c5d4ca; font-size: .9rem; line-height: 1.6; }
.auth-fields { display: grid; gap: 11px; margin: 0 0 16px; text-align: left; }
.auth-fields label { display: grid; gap: 5px; color: #d8e7dd; font-size: .72rem; font-weight: 750; }
.auth-fields label small { color: #91a79a; font-size: .62rem; font-weight: 500; line-height: 1.4; }
.auth-fields input { width: 100%; padding: 11px 12px; border: 1px solid rgba(173,255,200,.3); border-radius: 10px; outline: 0; color: white; background: rgba(255,255,255,.1); }
.auth-fields input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18,106,80,.1); }
.auth-button { width: 100%; padding: 13px 18px; border: 0; border-radius: 12px; color: white; background: var(--accent); font-weight: 800; box-shadow: 0 8px 18px rgba(18,106,80,.18); }
.auth-button:disabled { cursor: wait; opacity: .58; }
.auth-secondary { width: 100%; margin-top: 9px; color: #d7ffe3; border: 1px solid rgba(173,255,200,.25); background: rgba(255,255,255,.05); }
.account-note { margin: 10px 8px 0; color: #b9ffd0; font-size: .69rem; line-height: 1.45; }
.auth-status { min-height: 20px; margin: 11px 0 0; color: #b6c9bd; font-size: .73rem; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: #91a79a; font-size: .68rem; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: rgba(173,255,200,.18); }
.qr-help { display: grid; gap: 4px; margin-top: 22px; padding: 14px; border: 1px solid rgba(113,255,160,.18); border-radius: 13px; text-align: left; background: rgba(22,112,74,.23); }
.qr-help strong { color: #b9ffd0; font-size: .78rem; }
.qr-help span { color: #c8ded0; font-size: .72rem; line-height: 1.45; }
.auth-footnote { margin: 14px 4px 0; color: #91a79a; font-size: .65rem; line-height: 1.45; }
.totp-panel { display: grid; gap: 14px; text-align: center; }
.totp-panel h2 { margin: 0; font-family: Georgia, serif; font-size: 1.7rem; font-weight: 500; }
.totp-panel p { margin: 0; color: #c5d4ca; font-size: .8rem; line-height: 1.5; }
.totp-qr { display: block; width: min(100%, 245px); aspect-ratio: 1; margin: 14px auto; padding: 10px; border-radius: 16px; background: white; }
.manual-key { margin: 8px 0 14px; color: #b9ffd0; font-size: .72rem; }
.manual-key summary { cursor: pointer; }
.manual-key code { display: block; margin-top: 8px; overflow-wrap: anywhere; color: white; letter-spacing: .08em; }
.authenticator-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.authenticator-actions a { display: grid; place-items: center; text-decoration: none; line-height: 1.3; }
.authenticator-actions .button.ghost { color: #d7ffe3; border: 1px solid rgba(173,255,200,.25); }
.totp-code-label { display: grid; gap: 6px; margin: 12px 0; color: #d8e7dd; text-align: left; font-size: .72rem; font-weight: 750; }
.totp-code-label input, #recovery-codes { width: 100%; padding: 12px; border: 1px solid rgba(173,255,200,.3); border-radius: 10px; outline: 0; color: white; background: rgba(255,255,255,.1); }
.totp-code-label input { text-align: center; font-size: 1.35rem; font-weight: 800; letter-spacing: .22em; }
#recovery-codes { margin: 12px 0; resize: none; color: #d7ffe3; font-family: ui-monospace, Consolas, monospace; line-height: 1.5; text-align: center; }
.recovery-actions { display: grid; gap: 8px; }
.recovery-actions .button { color: #d7ffe3; border: 1px solid rgba(173,255,200,.25); }

.app-shell { display: grid; grid-template-columns: 252px minmax(420px, 1fr) 330px; height: 100vh; min-height: 620px; }
.sidebar, .context-panel { background: var(--panel); padding: 25px 20px; overflow-y: auto; }
.sidebar { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.context-panel { border-left: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 4px 34px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 12px; background: #000; box-shadow: 0 8px 18px rgba(0,0,0,.22); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: .96rem; }
.brand span { margin-top: 2px; color: var(--muted); font-size: .72rem; }

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; color: #53605b; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.icon-button { width: 28px; height: 28px; border: 0; border-radius: 9px; color: var(--accent); background: var(--accent-soft); font-size: 1.25rem; line-height: 1; }
.project-list { display: grid; gap: 6px; }
.project-button { width: 100%; padding: 11px 12px; border: 1px solid transparent; border-radius: 11px; text-align: left; color: var(--ink); background: transparent; }
.project-button:hover { background: var(--soft); }
.project-button.active { border-color: #b9d8cb; background: var(--accent-soft); color: var(--accent-dark); }
.project-button strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.project-button small { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; }
.history-heading { margin-top: 22px; }
.chat-history { display: grid; gap: 5px; max-height: 220px; overflow-y: auto; }
.chat-history-button { width: 100%; padding: 9px 11px; overflow: hidden; border: 0; border-radius: 10px; color: var(--muted); background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
.chat-history-button:hover { color: var(--ink); background: var(--soft); }
.chat-history-button.active { color: var(--accent-dark); background: var(--accent-soft); font-weight: 750; }
.local-card { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 13px; border-radius: 12px; background: var(--soft); }
.local-card strong, .local-card small { display: block; }
.local-card strong { font-size: .78rem; }
.local-card small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #25a46f; box-shadow: 0 0 0 4px rgba(37,164,111,.12); }
.account-actions { display: grid; gap: 5px; margin-top: 10px; }
.theme-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; color: var(--muted); font-size: .7rem; font-weight: 750; }
.theme-control select { max-width: 110px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--soft); }
.account-button { padding: 8px 10px; border: 0; border-radius: 9px; color: var(--accent-dark); background: transparent; text-align: left; font-size: .7rem; font-weight: 750; }
.account-button:hover { background: var(--soft); }
.account-button.danger { color: #8a4038; }

.workspace { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; background: radial-gradient(circle at 80% 0%, rgba(223,242,233,.65), transparent 34%), var(--paper); }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 25px 34px 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: blur(12px); }
.topbar h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 500; }
.topbar .muted { margin: 5px 0 0; max-width: 700px; font-size: .8rem; }
.mode-badge { flex: none; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent-dark); background: var(--panel); font-size: .72rem; font-weight: 700; }

.chat-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.messages { overflow-y: auto; padding: 30px max(28px, calc((100% - 800px)/2)); scroll-behavior: smooth; }
.message { display: flex; gap: 12px; margin-bottom: 24px; animation: appear .24s ease-out; }
.message.user { flex-direction: row-reverse; }
.avatar { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 11px; color: white; background: var(--accent); font-size: .65rem; font-weight: 800; }
.message.user .avatar { background: #424d49; }
.message-body { max-width: min(680px, 86%); padding: 14px 17px; border: 1px solid var(--line); border-radius: 6px 17px 17px 17px; background: var(--panel); box-shadow: 0 6px 20px rgba(24,50,41,.04); line-height: 1.58; }
.message.user .message-body { border: 0; border-radius: 17px 6px 17px 17px; color: white; background: var(--accent); }
.message-content { min-height: 1.2em; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-content p { margin: 6px 0 0; }
.message-content p:first-child, .message-content h3:first-child { margin-top: 0; }
.message-content h3 { margin: 12px 0 5px; font-size: 1rem; }
.message-content ul, .message-content ol { margin: 7px 0; padding-left: 22px; white-space: normal; }
.message-content li { margin: 3px 0; }
.message-content code { padding: 2px 5px; border-radius: 5px; background: var(--soft); font-family: ui-monospace, Consolas, monospace; font-size: .88em; }
.message.user .message-content code { background: rgba(255,255,255,.15); }
.typing-cursor::after { content: "▋"; margin-left: 2px; color: var(--accent); animation: blink .75s infinite; }
.message-meta { margin-top: 10px; color: var(--muted); font-size: .69rem; }
.message.user .message-meta { color: rgba(255,255,255,.72); }
.suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.suggestions button { padding: 7px 10px; border: 1px solid #c8ddd4; border-radius: 999px; color: var(--accent-dark); background: var(--accent-soft); font-size: .72rem; }
.typing { color: var(--muted); }
.typing::after { content: "…"; display: inline-block; width: 1.2em; animation: blink 1s infinite; }

.composer { margin: 0 max(24px, calc((100% - 820px)/2)) 24px; padding: 12px 14px 10px; border: 1px solid #cdd8d3; border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
.attachment-list { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 9px; }
.attachment-chip { display: flex; align-items: center; gap: 7px; flex: none; max-width: 220px; padding: 6px 8px; border-radius: 9px; color: var(--accent-dark); background: var(--accent-soft); font-size: .68rem; }
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { padding: 0; border: 0; color: #8a4038; background: transparent; font-weight: 900; }
.composer textarea { width: 100%; min-height: 54px; max-height: 180px; resize: vertical; border: 0; outline: 0; color: var(--ink); background: transparent; line-height: 1.45; }
.composer-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid #edf0ee; }
.attachment-button { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 9px; color: var(--accent-dark); background: var(--accent-soft); font-size: .68rem; font-weight: 750; cursor: pointer; }
.attachment-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mode-select { display: grid; gap: 3px; color: var(--muted); font-size: .65rem; font-weight: 700; }
.mode-select select { border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .73rem; }
.send-button { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 11px; color: white; background: var(--accent); font-weight: 750; }
.send-button:disabled { cursor: wait; opacity: .55; }

.context-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.context-header h2 { margin: 0; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 500; }
.count { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; color: var(--accent-dark); background: var(--accent-soft); font-size: .75rem; font-weight: 800; }
.context-section { padding: 21px 0; border-bottom: 1px solid var(--line); }
.text-button { padding: 0; border: 0; color: var(--accent); background: transparent; font-size: .72rem; font-weight: 800; text-transform: none; }
.context-list { display: grid; gap: 9px; }
.memory-item, .task-item { padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.memory-item strong { display: block; margin-bottom: 4px; font-size: .78rem; }
.memory-item p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: .72rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.memory-type { display: inline-block; margin-bottom: 5px; color: var(--accent); font-size: .6rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.task-item { display: flex; align-items: flex-start; gap: 9px; }
.task-item input { margin-top: 3px; accent-color: var(--accent); }
.task-copy strong { display: block; font-size: .76rem; }
.task-copy small { color: var(--muted); font-size: .65rem; }
.task-item.done strong { color: var(--muted); text-decoration: line-through; }
.empty-note { color: var(--muted); font-size: .74rem; line-height: 1.5; }

.compact-form { display: grid; gap: 8px; margin: 10px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.compact-form label { color: var(--muted); font-size: .68rem; font-weight: 700; }
.compact-form input, .compact-form textarea, .compact-form select { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; outline: none; color: var(--ink); background: var(--panel); font-size: .75rem; }
.compact-form input:focus, .compact-form textarea:focus, .compact-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(18,106,80,.1); }
.form-actions { display: flex; justify-content: flex-end; gap: 7px; }
.button { padding: 7px 10px; border: 0; border-radius: 8px; font-size: .7rem; font-weight: 750; }
.button.primary { color: white; background: var(--accent); }
.button.ghost { color: var(--muted); background: transparent; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 10; max-width: 340px; padding: 11px 15px; border-radius: 11px; color: white; background: #26322e; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; font-size: .78rem; }
.toast.show { opacity: 1; transform: translateY(0); }
.install-dialog { width: min(90vw, 430px); padding: 30px; border: 1px solid var(--line); border-radius: 22px; color: var(--ink); background: var(--panel); box-shadow: var(--shadow); }
.install-dialog::backdrop { background: rgba(4,12,8,.68); backdrop-filter: blur(5px); }
.install-dialog h2 { margin: 6px 0 10px; font-family: Georgia, serif; font-size: 1.75rem; font-weight: 500; }
.install-dialog p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.install-dialog #password-status { min-height: 20px; margin-bottom: 0; font-size: .75rem; }
.provider-dialog { width: min(94vw, 620px); }
.provider-list { display: grid; gap: 12px; max-height: 58vh; overflow-y: auto; }
.provider-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.provider-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.provider-card header span { color: var(--muted); font-size: .7rem; }
.provider-card label { display: grid; gap: 4px; color: var(--muted); font-size: .68rem; font-weight: 700; }
.provider-card input { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel); }
.provider-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border: 0; border-radius: 50%; color: var(--muted); background: var(--soft); font-size: 1.2rem; }

@keyframes appear { from { opacity: 0; transform: translateY(5px); } }
@keyframes blink { 50% { opacity: .25; } }
@media (max-width: 1080px) { .app-shell { grid-template-columns: 220px 1fr; } .context-panel { display: none; } }
@media (max-width: 720px) {
  .auth-video-pc { display: none; }
  .auth-video-phone { display: block; }
  .auth-video-shade { background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.68)); }
  .auth-gate { padding: 14px; }
  .auth-card { padding: 28px 22px; background: rgba(3,11,7,.72); }
  .app-shell { display: block; height: auto; min-height: 100vh; }
  .sidebar { position: static; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { margin-bottom: 16px; }
  .project-list { display: flex; overflow-x: auto; }
  .project-button { min-width: 180px; }
  .history-heading { margin-top: 14px; }
  .chat-history { display: flex; max-height: none; overflow-x: auto; }
  .chat-history-button { flex: 0 0 auto; max-width: 210px; background: var(--soft); }
  .local-card { display: none; }
  .account-actions { display: flex; overflow-x: auto; }
  .account-button { flex: none; padding: 8px 10px; background: var(--soft); }
  .workspace { min-height: calc(100vh - 180px); }
  .topbar { padding: 18px; }
  .topbar .muted { display: none; }
  .messages { padding: 22px 16px; }
  .composer { margin: 0 12px 14px; }
  .composer-bottom { flex-wrap: wrap; }
  .mode-select { order: 3; width: 100%; }
  .send-button span:first-child { display: none; }
  .authenticator-actions { grid-template-columns: 1fr; }
}