:root {
  --cream: #f6f0e6;
  --paper: #fffdf8;
  --ink: #1f201d;
  --muted: #64645d;
  --line: #d9d2c7;
  --accent: #d9552d;
  --accent-dark: #a93316;
  --accent-soft: #f7ddd1;
  --sage: #dbe2d4;
  --shadow: 0 16px 44px rgba(42, 34, 25, 0.09);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--cream); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--cream); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { min-height: 44px; }

:focus-visible {
  outline: 3px solid #1871a8;
  outline-offset: 3px;
}

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.55rem, 11vw, 5.2rem); line-height: .94; letter-spacing: -.065em; max-width: 680px; }
h2 { margin-bottom: .5rem; font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -.045em; }
h3 { font-size: 1.15rem; }
em { color: var(--accent); font-family: Georgia, serif; font-weight: 500; }
.muted { color: var(--muted); line-height: 1.55; }
.eyebrow { margin-bottom: .75rem; color: var(--accent-dark); font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.brand-mark { display: grid; width: 36px; height: 36px; min-height: 36px; place-items: center; border-radius: 12px; background: var(--ink); color: var(--paper); }
.login-layout { display: grid; min-height: 100vh; place-items: center; }
.login-panel { display: grid; width: 100%; min-height: 100vh; padding: 1.25rem; place-items: center; }
.login-card { width: min(100%, 470px); padding: 1.5rem; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); }
.login-brand { margin-bottom: 2rem; }
.login-card h1 { margin-bottom: .55rem; font-size: clamp(2rem, 8vw, 2.7rem); line-height: 1.05; letter-spacing: -.045em; }
.field { display: grid; gap: .45rem; margin-top: 1.15rem; }
.field label { font-size: .88rem; font-weight: 750; }
.field input { width: 100%; min-height: 48px; padding: .8rem .9rem; border: 1px solid #aca69d; border-radius: 10px; background: #fff; color: var(--ink); }
.field input:hover { border-color: var(--ink); }
.button { display: inline-flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 10px; padding: .72rem 1rem; cursor: pointer; font-weight: 750; transition: transform .15s ease, background-color .15s ease; }
.button:not(:disabled):active { transform: translateY(1px); }
.button:disabled { cursor: not-allowed; opacity: .62; }
.button-primary { margin-top: 1.15rem; background: var(--accent); color: white; }
.button-primary:hover:not(:disabled) { background: var(--accent-dark); }
.button-secondary { border-color: var(--line); background: transparent; color: var(--ink); }
.button-secondary:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.demo-actions { display: grid; gap: .55rem; }
.divider { display: flex; align-items: center; gap: .7rem; margin: 1.15rem 0; color: var(--muted); font-size: .75rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.demo-hint { margin: .9rem 0 0; color: var(--muted); font-size: .72rem; text-align: center; }
.form-error { margin: .85rem 0 0; padding: .7rem .8rem; border-left: 4px solid #b52922; background: #fbe4e1; color: #701914; font-size: .86rem; }

.app-shell { min-height: 100vh; }
.sidebar { padding: 1.2rem; background: var(--ink); color: var(--paper); }
.sidebar .brand { color: var(--paper); }
.sidebar .brand-mark { background: var(--accent); }
.identity { display: flex; align-items: center; gap: .75rem; margin: 1.3rem 0 1rem; padding-top: 1.15rem; border-top: 1px solid #464640; }
.avatar { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 50%; background: var(--sage); color: var(--ink); font-weight: 850; }
.identity strong, .identity div span { display: block; }
.identity div span { margin-top: .2rem; color: #c7c4bb; font-size: .78rem; }
.nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: 0; padding: 0; list-style: none; }
.nav-item { display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: space-between; gap: .35rem; padding: .65rem .7rem; border-radius: 9px; color: #d6d3cb; font-size: .82rem; }
.nav-item.current { background: #393a35; color: white; font-weight: 750; }
.coming { color: #aaa69d; font-size: .64rem; white-space: nowrap; }
.logout { margin-top: 1rem; border-color: #66655f; color: white; }
.logout:hover:not(:disabled) { background: #393a35; }
.dashboard { padding: 2rem 1.2rem 4rem; }
.dashboard-header { max-width: 780px; }
.dashboard-header h1 { margin-bottom: 1.2rem; font-size: clamp(2.45rem, 10vw, 4.8rem); }
.dashboard-header .muted { font-size: 1.04rem; }
.category-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.category-pill { min-height: 32px; padding: .35rem .7rem; border: 1px solid #c5bdb1; border-radius: 999px; background: var(--paper); font-size: .78rem; font-weight: 800; }
.card-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; margin-top: 2rem; }
.preview-card { min-height: 180px; padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 8px 24px rgba(42, 34, 25, .05); }
.preview-card:first-child { background: var(--accent-soft); border-color: #efbda9; }
.card-label { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.card-value { margin: 1.7rem 0 .35rem; font-family: Georgia, serif; font-size: 2.2rem; }
.card-text { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.prototype-banner { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: var(--sage); color: #303a2b; font-size: .85rem; line-height: 1.5; }
.forbidden { display: grid; min-height: 100vh; padding: 1.5rem; place-items: center; }
.forbidden-card { width: min(100%, 540px); padding: 2rem; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.forbidden-code { margin-bottom: .5rem; color: var(--accent); font-family: Georgia, serif; font-size: 4rem; }

@media (min-width: 760px) {
  .login-panel { padding: clamp(2rem, 5vw, 4.5rem); }
  .login-card { padding: 2.2rem; }
  .app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar { display: flex; position: sticky; top: 0; height: 100vh; flex-direction: column; padding: 1.7rem 1.25rem; }
  .nav-list { grid-template-columns: 1fr; }
  .logout { margin-top: auto; }
  .dashboard { padding: clamp(3rem, 7vw, 6rem); }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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