/* ==========================================================================
   Krokus Design System — shared stylesheet
   Dark theme with purple accent, matching v0.app design
   ========================================================================== */

/* ── Fonts ──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --bg:           oklch(0.12 0.01 270);
  --bg-card:      oklch(0.16 0.01 270);
  --bg-secondary: oklch(0.22 0.01 270);
  --bg-input:     oklch(0.22 0.01 270);
  --border:       oklch(0.26 0.01 270);
  --fg:           oklch(0.98 0 0);
  --fg-muted:     oklch(0.65 0 0);
  --accent:       oklch(0.55 0.2 280);
  --accent-fg:    oklch(0.98 0 0);
  --accent-green: oklch(0.65 0.18 145);
  --accent-yellow:oklch(0.75 0.15 85);
  --accent-red:   oklch(0.55 0.2 25);
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   24px;
  --shadow-accent: 0 8px 32px oklch(0.55 0.2 280 / 0.15);
}

/* ── Theme: Light ───────────────────────────────────────────────────────── */
html.theme-light {
  --bg:            oklch(0.98 0.005 270);
  --bg-card:       oklch(1 0 0);
  --bg-secondary:  oklch(0.95 0.01 270);
  --bg-input:      oklch(0.95 0.005 270);
  --border:        oklch(0.90 0.005 270);
  --fg:            oklch(0.15 0.01 270);
  --fg-muted:      oklch(0.45 0.01 270);
  --accent:        oklch(0.50 0.2 280);
  --accent-fg:     oklch(0.98 0 0);
  --accent-green:  oklch(0.55 0.18 145);
  --accent-yellow: oklch(0.70 0.15 85);
  --accent-red:    oklch(0.55 0.22 25);
  --shadow-accent: 0 8px 32px oklch(0.50 0.2 280 / 0.15);
}

/* ── Theme: Dark (explicit) ─────────────────────────────────────────────── */
html.theme-dark {
  --bg:            oklch(0.12 0.02 280);
  --bg-card:       oklch(0.16 0.02 280);
  --bg-secondary:  oklch(0.22 0.02 280);
  --bg-input:      oklch(0.22 0.02 280);
  --border:        oklch(0.28 0.02 280);
  --fg:            oklch(0.95 0.01 280);
  --fg-muted:      oklch(0.60 0.02 280);
  --accent:        oklch(0.60 0.2 280);
  --accent-fg:     oklch(0.98 0 0);
  --accent-green:  oklch(0.65 0.18 145);
  --accent-yellow: oklch(0.75 0.15 85);
  --accent-red:    oklch(0.55 0.2 25);
  --shadow-accent: 0 8px 32px oklch(0.60 0.2 280 / 0.15);
}

/* ── Theme: Ocean ───────────────────────────────────────────────────────── */
html.theme-ocean {
  --bg:            oklch(0.14 0.03 200);
  --bg-card:       oklch(0.18 0.03 200);
  --bg-secondary:  oklch(0.22 0.03 200);
  --bg-input:      oklch(0.22 0.03 200);
  --border:        oklch(0.28 0.03 200);
  --fg:            oklch(0.92 0.02 190);
  --fg-muted:      oklch(0.58 0.04 195);
  --accent:        oklch(0.65 0.15 175);
  --accent-fg:     oklch(0.15 0.03 200);
  --accent-green:  oklch(0.65 0.18 145);
  --accent-yellow: oklch(0.75 0.15 85);
  --accent-red:    oklch(0.55 0.2 25);
  --shadow-accent: 0 8px 32px oklch(0.65 0.15 175 / 0.15);
}

/* ── Theme: Sunset ──────────────────────────────────────────────────────── */
html.theme-sunset {
  --bg:            oklch(0.16 0.03 30);
  --bg-card:       oklch(0.20 0.04 30);
  --bg-secondary:  oklch(0.24 0.04 30);
  --bg-input:      oklch(0.24 0.04 30);
  --border:        oklch(0.30 0.04 30);
  --fg:            oklch(0.92 0.02 50);
  --fg-muted:      oklch(0.58 0.05 40);
  --accent:        oklch(0.68 0.18 35);
  --accent-fg:     oklch(0.98 0 0);
  --accent-green:  oklch(0.65 0.18 145);
  --accent-yellow: oklch(0.78 0.14 70);
  --accent-red:    oklch(0.55 0.22 15);
  --shadow-accent: 0 8px 32px oklch(0.68 0.18 35 / 0.15);
}

/* ── Base reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.k-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  height: 64px;
  background: color-mix(in oklch, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.k-header__left {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.k-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.k-logo__mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--fg);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}

.k-logo__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
}

.k-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.k-nav a {
  text-decoration: none;
  color: var(--fg-muted);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}

.k-nav a:hover {
  background: var(--bg-secondary);
  color: var(--fg);
}

.k-nav a.active {
  background: var(--bg-secondary);
  color: var(--fg);
  font-weight: 600;
}

.k-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── User pill ──────────────────────────────────────────────────────────── */
.k-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--fg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.15s;
}

.k-user-pill:hover {
  border-color: var(--accent);
}

.k-user-pill__avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Language dropdown ──────────────────────────────────────────────────── */
.k-lang {
  position: relative;
}

.k-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s;
}

.k-lang__toggle:hover { border-color: var(--accent); }

.k-lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  display: none;
  z-index: 200;
}

.k-lang--open .k-lang__menu { display: block; }

.k-lang__option {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
}

.k-lang__option:hover { background: var(--bg-secondary); color: var(--fg); }
.k-lang__option--active { background: oklch(0.55 0.2 280 / 0.15); color: var(--fg); font-weight: 600; }
.k-lang__check { color: var(--accent-green); }

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.k-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.k-theme-btn:hover { border-color: var(--accent); background: var(--bg-secondary); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  font-family: inherit;
}

.k-btn--primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.k-btn--primary:hover { background: oklch(0.58 0.2 280); }

.k-btn--outline {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}

.k-btn--outline:hover { background: var(--bg-secondary); border-color: var(--accent); }

.k-btn--ghost {
  background: transparent;
  color: var(--fg-muted);
  border-color: transparent;
}

.k-btn--ghost:hover { background: var(--bg-secondary); color: var(--fg); }

.k-btn--danger {
  background: oklch(0.55 0.2 25 / 0.15);
  color: var(--accent-red);
  border-color: oklch(0.55 0.2 25 / 0.3);
}

.k-btn--danger:hover { background: oklch(0.55 0.2 25 / 0.25); }

.k-btn--logout {
  background: var(--bg-secondary);
  color: var(--fg);
  border-color: var(--border);
}

.k-btn--logout:hover { background: oklch(0.55 0.2 25 / 0.15); color: var(--accent-red); border-color: var(--accent-red); }

/* ── Content layout ─────────────────────────────────────────────────────── */
.k-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 80px;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.k-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 24px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.k-card:hover {
  border-color: oklch(0.55 0.2 280 / 0.4);
  box-shadow: 0 4px 24px oklch(0.55 0.2 280 / 0.06);
}

.k-card--flat { transition: none; }
.k-card--flat:hover { border-color: var(--border); box-shadow: none; }

.k-hero-card {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 32px;
  margin-bottom: 24px;
}

/* ── Section head ───────────────────────────────────────────────────────── */
.k-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.k-section-head h1 {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.k-section-head p, .k-subtitle {
  margin: 0;
  color: var(--fg-muted);
  font-size: 14px;
}

.k-section-head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.k-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.k-badge--accent   { background: oklch(0.55 0.2 280 / 0.15); color: var(--accent); border-color: oklch(0.55 0.2 280 / 0.3); }
.k-badge--green    { background: oklch(0.65 0.18 145 / 0.15); color: var(--accent-green); border-color: oklch(0.65 0.18 145 / 0.3); }
.k-badge--yellow   { background: oklch(0.75 0.15 85 / 0.15); color: var(--accent-yellow); border-color: oklch(0.75 0.15 85 / 0.3); }
.k-badge--muted    { background: var(--bg-secondary); color: var(--fg-muted); border-color: var(--border); }
.k-badge--red      { background: oklch(0.55 0.2 25 / 0.15); color: var(--accent-red); border-color: oklch(0.55 0.2 25 / 0.3); }
.k-badge--soon     { background: oklch(0.55 0.2 280 / 0.1); color: var(--fg-muted); border-color: oklch(0.55 0.2 280 / 0.2); }

/* ── Progress bar ───────────────────────────────────────────────────────── */
.k-progress {
  background: var(--bg-secondary);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.k-progress__bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-green));
  transition: width 0.4s ease;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.k-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.k-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
}

.k-input,
.k-select,
.k-textarea {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--fg);
  outline: none;
  transition: border-color 0.15s;
}

.k-input::placeholder, .k-textarea::placeholder { color: oklch(0.45 0 0); }
.k-input:focus, .k-select:focus, .k-textarea:focus { border-color: var(--accent); }
.k-textarea { resize: vertical; min-height: 88px; }

.k-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.k-field--full { grid-column: 1 / -1; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.k-tabs-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.k-tabs-header {
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.k-tabs-header::-webkit-scrollbar { display: none; }

.k-tab-btn {
  flex-shrink: 0;
  padding: 14px 20px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}

.k-tab-btn:hover { color: var(--fg); }
.k-tab-btn.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }

.k-tab-panel { display: none; padding: 28px; }
.k-tab-panel.active { display: block; }

/* ── Stats / KPI ─────────────────────────────────────────────────────────── */
.k-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.k-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
}

.k-kpi-card__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

.k-kpi-card__value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1;
}

.k-kpi-card__sub { font-size: 13px; color: var(--fg-muted); margin-top: 6px; }

/* ── Stat row ─────────────────────────────────────────────────────────────── */
.k-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid oklch(0.26 0.01 270 / 0.6);
  font-size: 14px;
}

.k-stat-row:last-child { border-bottom: none; }
.k-stat-row__label { color: var(--fg-muted); }
.k-stat-row__value { font-weight: 700; color: var(--fg); }

/* ── Table ───────────────────────────────────────────────────────────────── */
.k-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.k-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.k-table td { padding: 10px 12px; border-bottom: 1px solid oklch(0.26 0.01 270 / 0.5); color: var(--fg-muted); }
.k-table tr:last-child td { border-bottom: none; }
.k-table td strong { color: var(--fg); }

/* ── Grid layouts ────────────────────────────────────────────────────────── */
.k-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.k-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.k-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.k-grid--wide { grid-column: 1 / -1; }

/* ── Sector grid (survey) ────────────────────────────────────────────────── */
.k-sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.k-sector-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.k-sector-opt:has(input:checked) {
  border-color: var(--accent);
  background: oklch(0.55 0.2 280 / 0.08);
}

.k-sector-opt--locked { cursor: default; opacity: 0.75; }

.k-sector-opt input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.k-sector-opt strong { color: var(--fg); font-size: 14px; font-weight: 600; }
.k-sector-opt span { color: var(--fg-muted); font-size: 12px; }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.k-breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 20px;
  align-items: center;
}

.k-breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.k-breadcrumb a:hover { color: var(--fg); }
.k-breadcrumb span { opacity: 0.5; }

/* ── Search ───────────────────────────────────────────────────────────────── */
.k-search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.k-search-input {
  flex: 1;
  min-width: 220px;
  height: 42px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 16px;
  font-size: 14px;
  color: var(--fg);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}

.k-search-input::placeholder { color: oklch(0.45 0 0); }
.k-search-input:focus { border-color: var(--accent); }

/* ── Alphabet/tag filters ─────────────────────────────────────────────────── */
.k-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.k-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.k-filter-chip:hover { background: var(--bg-secondary); color: var(--fg); border-color: var(--accent); }
.k-filter-chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

/* ── Term card (glossary) ─────────────────────────────────────────────────── */
.k-term-list { display: grid; gap: 14px; }

.k-term-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  transition: border-color 0.2s, transform 0.15s;
}

.k-term-card:hover {
  border-color: oklch(0.55 0.2 280 / 0.5);
  transform: translateY(-1px);
}

.k-term-card h2 { margin: 0 0 8px; font-size: 22px; color: var(--fg); }
.k-term-card h2 a { color: var(--fg); text-decoration: none; }
.k-term-card h2 a:hover { color: var(--accent); }
.k-term-meta { color: var(--fg-muted); line-height: 1.7; font-size: 14px; }

.k-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.k-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: oklch(0.55 0.2 280 / 0.15);
  color: var(--accent);
  text-decoration: none;
  border: 1px solid oklch(0.55 0.2 280 / 0.3);
}

.k-tag:hover { background: oklch(0.55 0.2 280 / 0.25); }

/* ── Repeatable blocks (profile) ─────────────────────────────────────────── */
.k-repeatable-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }

.k-repeatable-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.k-repeatable-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.k-repeatable-item__title { font-size: 14px; font-weight: 700; color: var(--fg); }

.k-btn-remove {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid oklch(0.55 0.2 25 / 0.3);
  border-radius: 999px;
  background: oklch(0.55 0.2 25 / 0.1);
  color: var(--accent-red);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.k-btn-remove:hover { background: oklch(0.55 0.2 25 / 0.2); }

.k-btn-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.k-btn-add:hover { border-color: var(--accent); color: var(--accent); background: oklch(0.55 0.2 280 / 0.05); }

/* ── Form actions row ─────────────────────────────────────────────────────── */
.k-form-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ── Auth layout ─────────────────────────────────────────────────────────── */
.k-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.k-auth-shell {
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}

.k-auth-left {
  padding: 52px 48px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
}

.k-auth-left h1 {
  margin: 0 0 20px;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.k-auth-left p {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--fg-muted);
  max-width: 440px;
}

.k-auth-points {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.k-auth-points li {
  position: relative;
  padding-left: 22px;
  color: var(--fg-muted);
  font-size: 16px;
}

.k-auth-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.k-auth-right {
  padding: 40px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
}

.k-auth-card {
  width: 100%;
  max-width: 400px;
}

.k-auth-card h2 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  text-align: center;
}

.k-auth-card > p {
  margin: 0 0 24px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
}

.k-form-group { margin-bottom: 16px; }

.k-form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-muted);
}

.k-form-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--fg);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}

.k-form-input::placeholder { color: oklch(0.4 0 0); }
.k-form-input:focus { border-color: var(--accent); }

.k-submit-btn {
  width: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  font-family: inherit;
  transition: background 0.15s;
}

.k-submit-btn:hover { background: oklch(0.58 0.2 280); }

.k-auth-links {
  margin-top: 20px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 14px;
}

.k-auth-links a { color: var(--accent); text-decoration: none; font-weight: 600; }

.k-messages {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: oklch(0.65 0.18 145 / 0.1);
  color: var(--accent-green);
  border: 1px solid oklch(0.65 0.18 145 / 0.3);
  font-size: 14px;
}

.errorlist {
  margin: 4px 0 0;
  padding-left: 16px;
  color: var(--accent-red);
  font-size: 13px;
}

/* ── Autosave status ─────────────────────────────────────────────────────── */
.k-autosave {
  font-size: 12px;
  color: var(--accent-green);
  opacity: 0;
  transition: opacity 0.3s;
}

.k-autosave--visible { opacity: 1; }

/* ── Sector bars (stats) ─────────────────────────────────────────────────── */
.k-sector-row { margin-bottom: 14px; }
.k-sector-row__header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: 5px;
}
.k-sector-bar-wrap { background: var(--bg-secondary); border-radius: 999px; height: 8px; overflow: hidden; }
.k-sector-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-green)); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.k-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--fg-muted);
}

.k-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

/* ── Hero card + profile ─────────────────────────────────────────────────── */
.k-profile-hero {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.k-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: oklch(0.55 0.2 280 / 0.2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
  border: 2px solid oklch(0.55 0.2 280 / 0.4);
}

/* ── Workspace sidebar ───────────────────────────────────────────────────── */
.k-workspace {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

.k-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
  position: sticky;
  top: 80px;
}

.k-sidebar h2 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.k-nav-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--fg-muted);
}

.k-nav-step--done { color: var(--accent-green); }

/* ── Project card ─────────────────────────────────────────────────────────── */
.k-project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.k-project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, oklch(0.55 0.2 280 / 0.05), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.k-project-card:hover {
  border-color: oklch(0.55 0.2 280 / 0.5);
  box-shadow: 0 4px 24px oklch(0.55 0.2 280 / 0.08);
}

.k-project-card:hover::before { opacity: 1; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .k-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .k-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .k-header { padding: 0 20px; }
  .k-content { padding: 20px 16px 60px; }
  .k-grid-2, .k-grid-3, .k-grid-4 { grid-template-columns: 1fr; }
  .k-grid--wide { grid-column: auto; }
  .k-fields-grid { grid-template-columns: 1fr; }
  .k-field--full { grid-column: auto; }
  .k-tab-panel { padding: 20px; }
  .k-auth-shell { grid-template-columns: 1fr; }
  .k-auth-left h1 { font-size: 36px; }
}

@media (max-width: 640px) {
  .k-kpi-grid { grid-template-columns: 1fr; }
  .k-section-head { flex-direction: column; }
}