:root {
  color-scheme: dark;
  --bg: hsl(236 25% 8%);
  --bg-deep: hsl(245 28% 5%);
  --surface: hsl(240 22% 13% / 0.78);
  --surface-raised: hsl(238 23% 17% / 0.86);
  --surface-soft: hsl(240 20% 100% / 0.045);
  --border: hsl(36 35% 92% / 0.14);
  --border-strong: hsl(36 35% 92% / 0.24);
  --text: hsl(38 35% 96%);
  --muted: hsl(36 14% 72%);
  --faint: hsl(36 12% 58%);
  --accent: hsl(32 86% 70%);
  --accent-strong: hsl(21 88% 66%);
  --accent-ink: hsl(247 27% 10%);
  --success: hsl(155 48% 67%);
  --danger: hsl(4 78% 76%);
  --focus: hsl(42 100% 78%);
  --shadow: 0 24px 70px hsl(245 50% 2% / 0.42);
  --body-glow-a: hsl(274 34% 22% / .48);
  --body-glow-b: hsl(22 65% 22% / .28);
  --card-gradient: linear-gradient(145deg, hsl(240 25% 17% / .72), var(--surface));
  --input-bg: hsl(240 18% 7% / .54);
  --input-bg-hover: hsl(240 18% 10% / .72);
  --input-bg-focus: hsl(240 18% 10% / .88);
  --danger-bg: hsl(4 55% 18% / .45);
  --button-hover: hsl(240 20% 100% / .1);
  --item-bg: hsl(240 20% 100% / .04);
  --item-hover: hsl(240 20% 100% / .075);
  --preview-bg: hsl(240 18% 7% / .36);
  --code-bg: hsl(240 28% 4% / .72);
  --focus-ring: hsl(42 100% 78% / .14);
  --inset-highlight: hsl(0 0% 100% / .05);
  --danger-border: hsl(4 70% 70% / .3);
  --primary-shadow: hsl(24 70% 45% / .2);
  --primary-shadow-hover: hsl(24 70% 45% / .3);
  --danger-hover: hsl(4 55% 18% / .5);
  --radius-lg: 1.25rem;
  --radius-md: 0.75rem;
  --ease: 180ms cubic-bezier(.2,.8,.2,1);
}

:root.light-theme {
  color-scheme: light;
  --bg: hsl(38 30% 96%);
  --bg-deep: hsl(36 33% 92%);
  --surface: hsl(0 0% 100% / .62);
  --surface-raised: hsl(0 0% 100% / .82);
  --surface-soft: hsl(36 30% 100% / .56);
  --border: hsl(32 18% 32% / .14);
  --border-strong: hsl(32 18% 32% / .26);
  --text: hsl(28 24% 16%);
  --muted: hsl(28 12% 39%);
  --faint: hsl(28 10% 52%);
  --accent: hsl(25 72% 47%);
  --accent-strong: hsl(14 70% 50%);
  --accent-ink: hsl(36 30% 98%);
  --success: hsl(155 45% 35%);
  --danger: hsl(4 66% 48%);
  --focus: hsl(25 82% 48%);
  --shadow: 0 24px 70px hsl(28 24% 42% / .14);
  --body-glow-a: hsl(38 75% 78% / .38);
  --body-glow-b: hsl(18 62% 82% / .3);
  --card-gradient: linear-gradient(145deg, hsl(0 0% 100% / .72), var(--surface));
  --input-bg: hsl(36 30% 100% / .54);
  --input-bg-hover: hsl(36 30% 100% / .78);
  --input-bg-focus: hsl(36 30% 100% / .92);
  --danger-bg: hsl(4 70% 94% / .7);
  --button-hover: hsl(32 24% 30% / .08);
  --item-bg: hsl(36 30% 100% / .42);
  --item-hover: hsl(36 30% 100% / .72);
  --preview-bg: hsl(36 25% 94% / .56);
  --code-bg: hsl(30 22% 18% / .08);
  --focus-ring: hsl(25 82% 48% / .16);
  --inset-highlight: hsl(0 0% 100% / .72);
  --danger-border: hsl(4 66% 48% / .28);
  --primary-shadow: hsl(24 70% 45% / .16);
  --primary-shadow-hover: hsl(24 70% 45% / .24);
  --danger-hover: hsl(4 70% 92% / .72);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg-deep); transition: background-color var(--ease), color var(--ease); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 0%, var(--body-glow-a), transparent 35rem),
    radial-gradient(circle at 93% 14%, var(--body-glow-b), transparent 30rem),
    linear-gradient(135deg, var(--bg-deep), var(--bg));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  transition: background-color var(--ease), color var(--ease);
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

button, input, textarea { font: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: .75rem;
  left: .75rem;
  padding: .6rem .9rem;
  color: var(--accent-ink);
  background: var(--focus);
  border-radius: .5rem;
  transform: translateY(-180%);
  transition: transform var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.page {
  width: min(100% - 2rem, 76rem);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 4rem) 0;
}

.site-header, .site-footer { width: min(100%, 76rem); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.brand { color: var(--text); text-decoration: none; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { color: var(--accent); margin-right: .4rem; }
.site-header-actions { display: flex; align-items: center; gap: .6rem; }
.theme-toggle { min-width: 2.6rem; padding: .55rem; color: var(--text); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease); }
.theme-toggle:hover { background: var(--button-hover); border-color: var(--border-strong); transform: translateY(-1px); }
.theme-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.theme-toggle .icon-sun { display: none; }
.light-theme .theme-toggle .icon-sun { display: block; }
.light-theme .theme-toggle .icon-moon { display: none; }
.eyebrow { margin: 0 0 .35rem; color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }

.card {
  width: 100%;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-gradient);
  box-shadow: var(--shadow), inset 0 1px 0 var(--inset-highlight);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), color var(--ease);
}
.narrow { width: min(100%, 34rem); margin: 4vh auto 0; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.03em; }
h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 4vw, 2.65rem); }
h2 { margin: 0; font-size: 1.1rem; }
p { color: var(--muted); }

.auth-intro { margin: 0 0 1.75rem; }
.auth-form, .editor-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: .45rem; }
.form-group label { color: var(--text); font-size: .875rem; font-weight: 700; }
.form-group input, .form-group textarea, .editor-form textarea {
  width: 100%;
  padding: .78rem .9rem;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease), transform var(--ease);
}
.form-group input:hover, .form-group textarea:hover, .editor-form textarea:hover { background: var(--input-bg-hover); }
.form-group input:focus, .form-group textarea:focus, .editor-form textarea:focus { border-color: var(--focus); background: var(--input-bg-focus); box-shadow: 0 0 0 4px var(--focus-ring); outline: none; }
.form-hint { color: var(--faint); font-size: .78rem; }

.error-message {
  margin: 0;
  padding: .85rem 1rem;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-left: 3px solid var(--danger);
  border-radius: .6rem;
}
.error-state { text-align: center; }
.error-state .error-message { margin: 1.5rem 0; text-align: left; }

.btn-primary, .btn-secondary, .btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: .55rem 1rem;
  border-radius: .65rem;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 750;
  cursor: pointer;
  transition: transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.btn-primary { align-self: flex-start; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); border: 1px solid transparent; box-shadow: 0 8px 24px var(--primary-shadow); }
.btn-primary:hover { color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 12px 28px var(--primary-shadow-hover); }
.btn-secondary, .btn-small { color: var(--muted); background: var(--surface-soft); border: 1px solid var(--border); }
.btn-secondary:hover, .btn-small:hover { color: var(--text); background: var(--button-hover); border-color: var(--border-strong); transform: translateY(-1px); }
.btn-danger { color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover { color: var(--danger); background: var(--danger-hover); }
.btn-small { min-height: 2.25rem; padding: .42rem .75rem; font-size: .8rem; }
.inline-form { display: inline-flex; }

.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0; }
.toolbar-spacer { flex: 1; }
.post-list { display: grid; gap: .7rem; padding: 0; margin: 0; list-style: none; }
.post-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--item-bg); border: 1px solid var(--border); border-radius: var(--radius-md); transition: transform var(--ease), background var(--ease), border-color var(--ease); }
.post-item:hover { background: var(--item-hover); border-color: var(--border-strong); transform: translateY(-2px); }
.post-item-main { min-width: 0; }
.post-title { display: block; overflow: hidden; color: var(--text); font-size: 1rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.post-title:hover { color: var(--accent); }
.post-meta, .post-status { color: var(--faint); font-size: .78rem; }
.post-item-actions { display: flex; flex-shrink: 0; align-items: center; gap: .5rem; }
.empty-state { display: grid; justify-items: center; gap: .4rem; padding: 3.5rem 1rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.empty-state p { margin: 0; }
.empty-icon { color: var(--accent); font-size: 2rem; }

.editor-form textarea { min-height: 18rem; resize: vertical; line-height: 1.65; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
.preview-panel { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.preview-panel h2 { margin-bottom: .75rem; color: var(--muted); }
.preview-content { min-height: 4rem; padding: 1.15rem; overflow-wrap: break-word; background: var(--preview-bg); border: 1px solid var(--border); border-radius: var(--radius-md); }
.preview-content, .post-body { overflow-wrap: anywhere; }
.preview-content h1, .preview-content h2, .preview-content h3, .post-body h1, .post-body h2, .post-body h3 { margin: 1.5rem 0 .6rem; }
.preview-content h1, .post-body h1 { font-size: 1.75rem; }
.preview-content h2, .post-body h2 { font-size: 1.35rem; }
.preview-content h3, .post-body h3 { font-size: 1.1rem; }
.preview-content p, .post-body p { margin: .7rem 0; color: var(--text); }
.preview-content pre, .post-body pre { overflow-x: auto; padding: 1rem; background: var(--code-bg); border-radius: .6rem; }
.preview-content code, .post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.preview-content blockquote, .post-body blockquote { margin: 1rem 0; padding-left: 1rem; color: var(--muted); border-left: 3px solid var(--accent); }
.preview-content a, .post-body a { color: var(--accent); }
.preview-content img, .post-body img { max-width: 100%; border-radius: .5rem; }
.preview-hint { color: var(--faint) !important; font-style: italic; }
.post-status { margin: 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.share-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.share-footer p { margin: 0; font-size: .8rem; }
.copy-feedback { min-height: 1.5rem; color: var(--success); font-size: .8rem; }

@media (max-width: 600px) {
  .page { width: min(100% - 1rem, 76rem); padding: .75rem 0 2rem; }
  .site-header { margin-bottom: 1rem; }
  .card { padding: 1.15rem; border-radius: 1rem; }
  .toolbar-spacer { display: none; }
  .post-item { align-items: flex-start; flex-direction: column; }
  .post-item-actions { width: 100%; }
  .post-item-actions .btn-small, .post-item-actions .inline-form { flex: 1; }
  .post-item-actions .btn-small { width: 100%; }
  .btn-primary { width: 100%; }
  .editor-form textarea { min-height: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}