:root {
  color-scheme: dark;
  --ink: #f7f1e8;
  --muted: #b4aaa2;
  --background: #171411;
  --panel: #211c18;
  --panel-soft: #2a231e;
  --line: rgba(247, 241, 232, 0.13);
  --accent: #eea66f;
  --accent-soft: #f8d0ad;
  --danger: #e67a75;
  --success: #91c49b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at top right, #3e2920 0, transparent 31rem), var(--background); color: var(--ink); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }
[hidden] { display: none !important; }

.shell { width: min(100% - 32px, 920px); min-height: 100vh; margin: 0 auto; padding: 48px 0; }
.panel, .create-code-card, .codes-card { border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); box-shadow: 0 28px 80px rgba(0,0,0,.22); }
.auth-panel, .admin-panel { width: min(100%, 580px); margin: 7vh auto; padding: clamp(32px, 7vw, 72px); }
.eyebrow, .message-label { margin: 0 0 12px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 15ch; margin-bottom: 24px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 8vw, 5.3rem); font-weight: 500; line-height: .93; letter-spacing: -.06em; }
h1 em { color: var(--accent-soft); font-style: italic; }
h2 { margin-bottom: 16px; font-size: 1.1rem; }
h3 { margin-bottom: 6px; font-size: 1rem; }
.lead { max-width: 48ch; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.stack-form { display: grid; gap: 12px; margin-top: 40px; }
label { color: var(--muted); font-size: .85rem; }
input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 13px; outline: none; background: #17120f; color: var(--ink); }
input { min-height: 50px; padding: 0 15px; }
textarea { min-height: 56px; max-height: 180px; padding: 16px; resize: vertical; line-height: 1.45; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(238,166,111,.15); }
button { min-height: 50px; border: 0; border-radius: 13px; padding: 0 18px; background: var(--accent); color: #2c190e; font-weight: 800; transition: transform .15s ease, background .15s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); background: #ffc08b; }
.fine-print, .subtle-link, .code-meta, .empty-state { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.fine-print { margin: 22px 0 0; }
.subtle-link { display: inline-block; margin-top: 20px; color: var(--accent-soft); }
.form-error { margin: 0; color: #ffc2bb; font-size: .9rem; line-height: 1.45; }

.chat-layout, .admin-layout { display: grid; gap: 20px; }
.chat-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 8px; }
.chat-header h1 { margin-bottom: 0; font-size: clamp(2rem, 6vw, 3.2rem); }
.text-button { min-height: 0; padding: 8px 0; background: transparent; color: var(--muted); font-size: .85rem; }
.text-button:hover:not(:disabled) { color: var(--accent-soft); background: transparent; }
.messages { display: flex; min-height: min(62vh, 680px); max-height: 68vh; flex-direction: column; gap: 16px; overflow-y: auto; padding: 8px 4px 8px 0; scrollbar-color: var(--panel-soft) transparent; }
.message { max-width: min(88%, 660px); padding: 18px 20px; border: 1px solid var(--line); border-radius: 19px; }
.message--assistant { align-self: flex-start; background: var(--panel); border-top-left-radius: 5px; }
.message--user { align-self: flex-end; background: #3b2b20; border-color: rgba(238,166,111,.25); border-top-right-radius: 5px; }
.message-label { margin-bottom: 8px; font-size: .62rem; }
.message--user .message-label { color: var(--accent-soft); }
.message-content { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.62; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.composer textarea { border: 0; background: transparent; box-shadow: none; }
.composer button { align-self: end; }
.composer .form-error { grid-column: 1 / -1; padding: 0 4px 4px; }

.admin-layout { max-width: 920px; margin: 0 auto; }
.create-code-card, .codes-card { padding: clamp(22px, 5vw, 34px); }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.section-heading, .code-card-top, .code-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-heading h2 { margin: 0; }
.codes-list { display: grid; gap: 12px; }
.code-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.12); }
.code-card code { display: block; overflow-x: auto; padding: 10px 12px; border-radius: 10px; background: #17120f; color: var(--accent-soft); font-size: .86rem; }
.status { display: inline-block; border-radius: 999px; padding: 5px 8px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.status--active { background: rgba(145,196,155,.15); color: var(--success); }
.status--disabled { background: rgba(230,122,117,.15); color: #ffaaa4; }
.small-button { min-height: 36px; padding: 0 11px; background: var(--panel-soft); color: var(--ink); font-size: .78rem; }
.small-button.warning { color: #ffd19d; }
.small-button.danger { color: #ffaaa4; }
.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; }

@media (max-width: 640px) {
  .shell { width: min(100% - 20px, 920px); padding: 24px 0; }
  .auth-panel, .admin-panel { margin: 0; padding: 32px 24px; }
  .chat-header { padding: 0; }
  .messages { min-height: 57vh; max-height: 60vh; }
  .message { max-width: 94%; }
  .composer { grid-template-columns: 1fr; }
  .composer button { width: 100%; }
  .inline-form { grid-template-columns: 1fr; }
  .code-card-top, .code-actions { flex-direction: column; }
  .code-actions { align-items: stretch; }
}