/* ==========================================================
   BeHueman — Design tokens + base styles
   ========================================================== */

:root {
  /* Hues — paleta tęczy, ale w ciepłej, ziemistej tonacji */
  --hue-rose: #E8A4A0;     /* ciało */
  --hue-amber: #E8B872;    /* dusza / zabawa */
  --hue-sage: #9FB89A;     /* umysł */
  --hue-sky: #8AAFC8;      /* relacje */
  --hue-violet: #B5A0CC;   /* nauka */
  --hue-clay: #C8553D;     /* akcent — warm brick */

  /* Ink — neutralna paleta atramentu */
  --ink-1: #1F1B16;
  --ink-2: #3A332B;
  --ink-3: #6B6155;
  --ink-4: #A39B8E;
  --ink-5: #D6CFC1;

  /* Surface */
  --bg: #F5F1E8;          /* paper */
  --bg-elev: #FBF8F1;     /* card */
  --bg-soft: #EFE9DB;
  --bg-sunk: #E8E2D2;
  --line: #DCD5C5;
  --line-soft: #E8E2D2;
  --accent: var(--hue-clay);
  --accent-soft: color-mix(in oklab, var(--hue-clay) 14%, var(--bg-elev));

  /* Type */
  --font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radius */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 16px;
  --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(31,27,22,0.04), 0 1px 1px rgba(31,27,22,0.03);
  --sh-2: 0 4px 12px rgba(31,27,22,0.06), 0 1px 3px rgba(31,27,22,0.04);
  --sh-3: 0 12px 32px rgba(31,27,22,0.10), 0 4px 8px rgba(31,27,22,0.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

/* Layout */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* ==========================================================
   Sidebar
   ========================================================== */

.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.logo-mark {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 8px 12px 12px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.logo-mark .hue {
  background: linear-gradient(90deg, var(--hue-rose) 0%, var(--hue-amber) 25%, var(--hue-sage) 50%, var(--hue-sky) 75%, var(--hue-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.logo-sub {
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 12px;
  margin-bottom: 18px;
}

.nav-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  padding: 14px 12px 6px;
  font-weight: 600;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-2);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13.5px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.nav-item:hover {
  background: var(--bg-soft);
}
.nav-item.active {
  background: var(--ink-1);
  color: var(--bg-elev);
}
.nav-item.active .nav-icon { color: var(--bg-elev); }
.nav-item .badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: white;
}
.nav-item.active .badge { background: rgba(255,255,255,0.2); }
.nav-item .ff-pill {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.nav-item.active .ff-pill { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); }

.nav-icon {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}

.sidebar-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* Phase toggle */
.phase-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-soft);
  padding: 4px;
  border-radius: var(--r-pill);
  margin-bottom: 8px;
}
.phase-switch button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.phase-switch button.on {
  background: var(--ink-1);
  color: var(--bg-elev);
}

/* Role switch */
.role-switch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-soft);
  padding: 6px;
  border-radius: var(--r-2);
  margin-bottom: 8px;
}
.role-switch-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  padding: 2px 6px 4px;
  font-weight: 600;
}
.role-switch-options {
  display: flex;
  gap: 2px;
}
.role-switch-options button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 4px 6px;
  border-radius: var(--r-1);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.role-switch-options button.on {
  background: white;
  color: var(--ink-1);
  box-shadow: var(--sh-1);
}

/* User chip */
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-2);
  background: var(--bg-soft);
  cursor: pointer;
}
.user-chip:hover { background: var(--bg-sunk); }
.user-chip-name { font-size: 13px; font-weight: 600; }
.user-chip-role { font-size: 11px; color: var(--ink-3); }

/* ==========================================================
   Topbar
   ========================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.search {
  flex: 1;
  max-width: 520px;
  position: relative;
}
.search input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  font-size: 13px;
  outline: none;
  color: var(--ink-1);
}
.search input:focus { border-color: var(--ink-3); }
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  position: relative;
}
.icon-btn:hover { background: var(--bg-soft); }
.icon-btn .dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-elev);
}

/* ==========================================================
   Main content
   ========================================================== */

.main {
  min-width: 0;
}
.page {
  padding: 32px 40px 64px;
  max-width: 1280px;
  margin: 0 auto;
}
.page-narrow { max-width: 720px; }
.page-wide { max-width: 1480px; }

.page-header {
  margin-bottom: 24px;
}
.page-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-weight: 600;
}
.page-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink-1);
}
.page-sub {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 600px;
  line-height: 1.5;
}

/* ==========================================================
   Cards & primitives
   ========================================================== */

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink-1);
  color: var(--bg-elev);
}
.btn-primary:hover { background: var(--ink-2); }
.btn-accent {
  background: var(--accent);
  color: white;
}
.btn-accent:hover { background: color-mix(in oklab, var(--accent) 85%, black); }
.btn-soft {
  background: var(--bg-soft);
  color: var(--ink-1);
}
.btn-soft:hover { background: var(--bg-sunk); }
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--bg-soft); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-soft);
  color: var(--ink-2);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: var(--bg-sunk); }
.chip.active {
  background: var(--ink-1);
  color: var(--bg-elev);
}
.chip-hue-rose { background: color-mix(in oklab, var(--hue-rose) 25%, var(--bg-elev)); color: color-mix(in oklab, var(--hue-rose) 50%, var(--ink-1)); }
.chip-hue-amber { background: color-mix(in oklab, var(--hue-amber) 25%, var(--bg-elev)); color: color-mix(in oklab, var(--hue-amber) 60%, var(--ink-1)); }
.chip-hue-sage { background: color-mix(in oklab, var(--hue-sage) 30%, var(--bg-elev)); color: color-mix(in oklab, var(--hue-sage) 60%, var(--ink-1)); }
.chip-hue-sky { background: color-mix(in oklab, var(--hue-sky) 25%, var(--bg-elev)); color: color-mix(in oklab, var(--hue-sky) 65%, var(--ink-1)); }
.chip-hue-violet { background: color-mix(in oklab, var(--hue-violet) 28%, var(--bg-elev)); color: color-mix(in oklab, var(--hue-violet) 60%, var(--ink-1)); }
.chip-hue-cialo { background: color-mix(in oklab, var(--hue-rose) 25%, var(--bg-elev)); color: #94463F; }
.chip-hue-dusza { background: color-mix(in oklab, var(--hue-amber) 30%, var(--bg-elev)); color: #8C6A20; }
.chip-hue-umysl { background: color-mix(in oklab, var(--hue-sage) 32%, var(--bg-elev)); color: #4F6B49; }
.chip-hue-relacje { background: color-mix(in oklab, var(--hue-sky) 28%, var(--bg-elev)); color: #36647F; }

.avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  color: white;
  flex-shrink: 0;
  position: relative;
}
.avatar.verified::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid var(--bg-elev);
  border-radius: 50%;
}

/* Toggle */
.toggle {
  width: 36px;
  height: 20px;
  background: var(--ink-5);
  border-radius: var(--r-pill);
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
  flex-shrink: 0;
  transition: background 150ms ease;
}
.toggle::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 150ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.toggle.on {
  background: var(--ink-1);
}
.toggle.on::after {
  left: 18px;
}

/* Phase ribbon */
.phase-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.phase-ribbon.ff1 {
  background: color-mix(in oklab, var(--hue-sage) 25%, var(--bg-elev));
  color: #4F6B49;
}
.phase-ribbon.ff2 {
  background: color-mix(in oklab, var(--hue-violet) 25%, var(--bg-elev));
  color: #6B4F8C;
}

.flag-ff2 {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: color-mix(in oklab, var(--hue-violet) 25%, var(--bg-elev));
  color: #6B4F8C;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  vertical-align: middle;
  margin-left: 6px;
}

/* ==========================================================
   Onboarding
   ========================================================== */
.onboarding-stage {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.onboarding-progress {
  display: flex;
  gap: 6px;
  padding: 24px 40px;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
.onboarding-progress span {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
}
.onboarding-progress span.active { background: var(--ink-1); }
.onboarding-progress span.done { background: var(--ink-3); }
.onboarding-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
.onboarding-foot {
  border-top: 1px solid var(--line);
  padding: 16px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-elev);
}

/* Spectrum decoration */
.spectrum {
  height: 4px;
  background: linear-gradient(90deg,
    var(--hue-rose) 0%,
    var(--hue-amber) 25%,
    var(--hue-sage) 50%,
    var(--hue-sky) 75%,
    var(--hue-violet) 100%
  );
  border-radius: 2px;
}

/* ==========================================================
   Dashboard widgets
   ========================================================== */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.dash-grid > .col-12 { grid-column: span 12; }
.dash-grid > .col-8 { grid-column: span 8; }
.dash-grid > .col-6 { grid-column: span 6; }
.dash-grid > .col-4 { grid-column: span 4; }
.dash-grid > .col-3 { grid-column: span 3; }

.widget {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.widget-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.widget-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
}

/* Drag affordance */
.widget.drag-mode {
  border: 1px dashed var(--ink-4);
  cursor: grab;
  position: relative;
}
.widget.drag-mode:active { cursor: grabbing; }
.widget.drag-mode.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}
.widget-grip {
  color: var(--ink-4);
  cursor: grab;
}

/* ==========================================================
   Posts
   ========================================================== */

.post {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.post:last-child { border-bottom: none; }
.post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.post-author { font-weight: 600; font-size: 13.5px; }
.post-meta { font-size: 11.5px; color: var(--ink-3); }
.post-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-1);
  margin-bottom: 12px;
}
.post-body p:first-child { margin-top: 0; }
.post-body p:last-child { margin-bottom: 0; }

.post-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--ink-3);
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  margin-top: 12px;
}
.post-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: var(--r-2);
  color: var(--ink-3);
  font-size: 12.5px;
}
.post-action:hover { background: var(--bg-soft); color: var(--ink-1); }
.post-action.active { color: var(--accent); }

/* Recommendation card embed inside post */
.rec {
  display: flex;
  gap: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 14px;
  align-items: flex-start;
  margin: 10px 0;
}
.rec-cover {
  width: 80px;
  height: 110px;
  border-radius: var(--r-1);
  background: linear-gradient(135deg, var(--hue-amber), var(--hue-rose));
  flex-shrink: 0;
  position: relative;
  box-shadow: var(--sh-1);
}
.rec-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  flex: 1;
}
.rec-source {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
}
.rec-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink-1);
}
.rec-author {
  font-size: 12.5px;
  color: var(--ink-2);
}

/* ==========================================================
   Tile (Education / Fun row strip)
   ========================================================== */

.row-strip { margin-bottom: 32px; }
.row-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
}
.row-strip-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.row-strip-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
}
.row-strip-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.row-strip-track::-webkit-scrollbar { height: 6px; }
.row-strip-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.tile {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--bg-elev);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.tile-cover {
  height: 130px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.tile-type {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(31,27,22,0.7);
  color: white;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
}
.tile-meta {
  padding: 12px;
}
.tile-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--ink-1);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-author {
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ==========================================================
   Library card
   ========================================================== */

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.lib-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 16px;
  cursor: pointer;
  transition: transform 200ms ease;
}
.lib-card:hover { transform: translateY(-2px); }
.lib-stack {
  height: 140px;
  border-radius: var(--r-1);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  margin-bottom: 12px;
}
.lib-stack > div {
  background-size: cover;
  background-position: center;
}

/* ==========================================================
   Notification row
   ========================================================== */
.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.5;
}
.notif-row.unread { background: color-mix(in oklab, var(--hue-amber) 6%, var(--bg-elev)); }
.notif-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
  flex-shrink: 0;
}

/* ==========================================================
   Section title
   ========================================================== */
.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0;
}
.section-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
}

/* ==========================================================
   Forms
   ========================================================== */

.form-group { margin-bottom: 16px; }
.form-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.input, .textarea, .select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  font-size: 14px;
  color: var(--ink-1);
  outline: none;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--ink-3); }
.textarea { resize: vertical; min-height: 90px; }
.form-help {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 5px;
}

/* ==========================================================
   Modal / Sheet
   ========================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(31,27,22,0.4);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 32px;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--bg-elev);
  border-radius: var(--r-3);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-3);
}
.modal-wide { max-width: 820px; }
.modal-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
}
.modal-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}
.modal-foot {
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ==========================================================
   Tabs
   ========================================================== */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.tab {
  border: none;
  background: transparent;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab.active {
  color: var(--ink-1);
  border-bottom-color: var(--ink-1);
}

/* ==========================================================
   Stats card
   ========================================================== */
.stat {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 16px 18px;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 8px;
}
.stat-value {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-delta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 6px;
}
.stat-delta.up { color: #4F6B49; }
.stat-delta.down { color: var(--accent); }

/* ==========================================================
   Calendar (panel autora harmonogram)
   ========================================================== */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.cal-day {
  background: var(--bg-elev);
  padding: 8px;
  min-height: 84px;
  font-size: 11px;
}
.cal-day.outside { background: var(--bg-soft); color: var(--ink-4); }
.cal-day.today { background: color-mix(in oklab, var(--hue-amber) 18%, var(--bg-elev)); }
.cal-day-num { font-weight: 600; margin-bottom: 4px; }
.cal-event {
  display: block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10.5px;
  background: color-mix(in oklab, var(--hue-sage) 30%, var(--bg-elev));
  color: var(--ink-1);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event.scheduled {
  background: color-mix(in oklab, var(--hue-amber) 35%, var(--bg-elev));
}
.cal-event.draft {
  background: var(--bg-soft);
  font-style: italic;
  color: var(--ink-3);
}

/* ==========================================================
   Empty / placeholders
   ========================================================== */

.empty {
  padding: 64px 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
}
.empty-icon {
  font-size: 48px;
  font-family: var(--font-serif);
  color: var(--ink-4);
  margin-bottom: 12px;
}

/* ==========================================================
   Small utils
   ========================================================== */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.muted { color: var(--ink-3); }


/* ==========================================================
   GLOBAL INFRASTRUCTURE — chat dock, notif dropdown,
   side drawer, toasts, context menu, reels overlay
   ========================================================== */

/* Topbar bell + chat icon with badge */
.topbar-bell { position: relative; }
.topbar-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--accent);
  color: white;
  border: 2px solid var(--bg);
  border-radius: var(--r-pill);
  font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center;
  letter-spacing: -0.02em;
}

/* ---------- Context menu ---------- */
.ctx-menu {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: 0 12px 32px rgba(31,27,22,.18), 0 2px 6px rgba(31,27,22,.06);
  padding: 6px;
  min-width: 220px;
  display: flex; flex-direction: column; gap: 1px;
}
.ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  background: transparent;
  border: none;
  color: var(--ink-1);
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-1);
}
.ctx-item:hover { background: var(--bg-soft); }
.ctx-item.danger { color: #94463F; }
.ctx-item.danger:hover { background: color-mix(in oklab, var(--hue-rose) 18%, var(--bg-elev)); }
.ctx-hint { margin-left: auto; color: var(--ink-4); font-size: 11px; }

/* ---------- Notifications dropdown ---------- */
.notif-pop {
  position: fixed;
  top: 64px; right: 24px;
  width: 380px;
  max-height: calc(100vh - 96px);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: 0 18px 48px rgba(31,27,22,.18);
  z-index: 950;
  display: flex; flex-direction: column;
}
.notif-head {
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}
.notif-tabs {
  display: flex; gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-soft);
}
.notif-tabs button {
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  font-weight: 500;
}
.notif-tabs button.on {
  color: var(--ink-1);
  border-bottom-color: var(--ink-1);
}
.notif-body {
  flex: 1; overflow-y: auto;
  padding: 4px 0 8px;
}
.notif-group-label {
  padding: 12px 16px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.notif-item {
  display: flex; gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  align-items: flex-start;
}
.notif-item:hover { background: var(--bg-soft); }
.notif-item.unread { background: color-mix(in oklab, var(--hue-amber) 7%, var(--bg-elev)); }
.notif-preview {
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--bg-soft);
  border-radius: var(--r-1);
  font-size: 11.5px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.4;
}
.notif-time {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--ink-4);
}
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.notif-foot {
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
}

/* ---------- Chat dock ---------- */
.chat-dock {
  position: fixed; bottom: 0; right: 24px;
  z-index: 800;
  display: flex; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.chat-dock > * { pointer-events: auto; }
.chat-windows {
  display: flex; align-items: flex-end; gap: 12px;
}
.chat-launcher {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 14px;
  background: var(--ink-1);
  color: var(--bg-elev);
  border: none;
  border-top-left-radius: var(--r-2);
  border-top-right-radius: var(--r-2);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  position: relative;
  box-shadow: 0 -2px 8px rgba(31,27,22,.06);
}
.chat-launcher-badge {
  background: var(--accent);
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.chat-list-panel {
  width: 320px;
  height: 480px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-bottom: none;
  border-top-left-radius: var(--r-3);
  border-top-right-radius: var(--r-3);
  box-shadow: 0 -8px 24px rgba(31,27,22,.12);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.chat-list-head {
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}
.chat-list-search {
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-3);
}
.chat-list-search input {
  flex: 1;
  border: none; outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--ink-1);
}
.chat-list-body { flex: 1; overflow-y: auto; }
.chat-list-item {
  display: flex; gap: 10px; align-items: center;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.chat-list-item:hover { background: var(--bg-soft); }
.online-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--hue-sage);
  border: 2px solid var(--bg-elev);
}
.online-dot.small { width: 9px; height: 9px; right: -1px; bottom: -1px; }

.chat-window {
  width: 300px;
  height: 420px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-bottom: none;
  border-top-left-radius: var(--r-3);
  border-top-right-radius: var(--r-3);
  box-shadow: 0 -8px 24px rgba(31,27,22,.12);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.chat-window.collapsed { height: 52px; }
.chat-w-head {
  padding: 8px 10px;
  display: flex; align-items: center; gap: 8px;
  background: var(--ink-1);
  color: var(--bg-elev);
  cursor: pointer;
}
.chat-w-head .online-dot { border-color: var(--ink-1); }
.chat-w-btn {
  width: 24px; height: 24px;
  background: transparent;
  border: none;
  color: var(--bg-elev);
  cursor: pointer;
  border-radius: var(--r-1);
  font-size: 11px;
  display: grid; place-items: center;
}
.chat-w-btn:hover { background: rgba(255,255,255,.12); }
.chat-w-body {
  flex: 1; overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg);
}
.chat-msg { display: flex; flex-direction: column; gap: 2px; max-width: 80%; }
.chat-msg.me { align-self: flex-end; align-items: flex-end; }
.chat-msg.other { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.4;
}
.chat-msg.other .chat-bubble {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-msg.me .chat-bubble {
  background: var(--ink-1);
  color: var(--bg-elev);
  border-bottom-right-radius: 4px;
}
.chat-time {
  font-size: 10px;
  color: var(--ink-4);
  padding: 0 4px;
}
.chat-w-input {
  display: flex; gap: 6px; align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}
.chat-w-input input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-pill);
  padding: 8px 12px;
  font-size: 12.5px;
  outline: none;
  color: var(--ink-1);
}
.chat-w-input input:focus { border-color: var(--ink-3); }
.chat-send {
  width: 30px; height: 30px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
}

/* ---------- Side drawer (feed config) ---------- */
.side-drawer {
  position: fixed; top: 0; right: 0;
  width: 440px; max-width: 100vw;
  height: 100vh;
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px rgba(31,27,22,.16);
  z-index: 950;
  display: flex; flex-direction: column;
  animation: slideIn .22s ease-out;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.side-drawer-head {
  padding: 22px 24px 18px;
  display: flex; align-items: flex-start; justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}
.side-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 18px 24px;
}
.side-drawer-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end;
}

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed; bottom: 64px; left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px 12px 0;
  background: var(--ink-1);
  color: var(--bg-elev);
  border-radius: var(--r-2);
  box-shadow: 0 12px 32px rgba(31,27,22,.24);
  min-width: 320px; max-width: 420px;
  overflow: hidden;
  animation: toastIn .25s ease-out;
}
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast-bar {
  width: 4px;
  align-self: stretch;
  background: var(--hue-sage);
  flex-shrink: 0;
}
.toast-ok .toast-bar { background: var(--hue-sage); }
.toast-chat .toast-bar { background: var(--hue-sky); }
.toast-warn .toast-bar { background: var(--hue-amber); }
.toast-err .toast-bar { background: var(--hue-rose); }
.toast-title { font-weight: 600; font-size: 13.5px; }
.toast-body { font-size: 12.5px; color: rgba(255,255,255,.78); margin-top: 2px; line-height: 1.4; }
.toast .icon-btn { color: rgba(255,255,255,.6); border: none; background: transparent; }
.toast .icon-btn:hover { color: white; }

/* ---------- Reels overlay ---------- */
.reels-overlay {
  position: fixed; inset: 0;
  background: rgba(15,12,8,.92);
  z-index: 1000;
  display: grid; place-items: center;
  backdrop-filter: blur(8px);
}
.reels-close {
  position: absolute; top: 20px; right: 24px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: none;
  color: white;
  cursor: pointer;
  display: grid; place-items: center;
}
.reels-stage {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  position: relative;
}
.reels-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.reels-nav {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
}
.reels-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.reel {
  width: 360px; height: 640px;
  border-radius: var(--r-3);
  position: relative;
  overflow: hidden;
}
.reel-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -100% 0; } }
.reel-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  display: flex; flex-direction: column; gap: 10px;
}
.reel-author { display: flex; gap: 10px; align-items: center; }
.reel-title {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 500;
  color: white;
  line-height: 1.25;
}
.reel-meta { color: rgba(255,255,255,.7); font-size: 12px; }
.reel-actions {
  position: absolute; right: 14px; bottom: 100px;
  display: flex; flex-direction: column; gap: 18px;
}
.reel-act {
  background: transparent; border: none; color: white;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
}

/* ---------- Form helpers used by modals ---------- */
.form-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.form-group { margin-bottom: 18px; }
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end;
}
.modal-wide { max-width: 640px; }


/* ==========================================================
   Dark mode — token overrides
   ========================================================== */
[data-theme="dark"] {
  --ink-1: #F2EAD8;
  --ink-2: #D8CFBC;
  --ink-3: #A39B8E;
  --ink-4: #6B6155;
  --ink-5: #3A332B;

  --bg: #14110D;
  --bg-elev: #1C1813;
  --bg-soft: #24201A;
  --bg-sunk: #100E0A;
  --line: #2C2820;
  --line-soft: #221E18;

  /* Hues stay the same — they are pigment, not text */
  --accent: #D9694F; /* slightly hotter clay against dark */
  --accent-soft: color-mix(in oklab, var(--accent) 22%, var(--bg-elev));

  --sh-1: 0 1px 2px rgba(0,0,0,0.3);
  --sh-2: 0 4px 12px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2);
  --sh-3: 0 12px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.25);
}
[data-theme="dark"] body { background: var(--bg) !important; color: var(--ink-1) !important; }
html[data-theme="dark"] { background: var(--bg) !important; }
[data-theme="dark"] .sidebar { background: var(--bg-elev) !important; border-color: var(--line) !important; }
[data-theme="dark"] .main { background: var(--bg) !important; }
[data-theme="dark"] .topbar { background: color-mix(in oklab, var(--bg) 85%, transparent) !important; border-color: var(--line) !important; }
[data-theme="dark"] .card { background: var(--bg-elev) !important; border-color: var(--line) !important; }
[data-theme="dark"] .modal { background: var(--bg-elev) !important; }
[data-theme="dark"] .nav-item.active { background: var(--accent) !important; color: white !important; }
[data-theme="dark"] .nav-item.active { background: var(--accent); color: white; }
[data-theme="dark"] .nav-item.active .nav-icon { color: white; }
[data-theme="dark"] .phase-switch button.on { background: var(--accent); color: white; }
[data-theme="dark"] .chip.active { background: var(--accent); color: white; }
[data-theme="dark"] .btn-primary { background: var(--accent); color: white; }
[data-theme="dark"] .btn-primary:hover { background: color-mix(in oklab, var(--accent) 85%, white); }
[data-theme="dark"] .role-switch-options button.on { background: var(--bg-soft); color: var(--ink-1); }
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.65); }
[data-theme="dark"] img, [data-theme="dark"] .reel { filter: brightness(.92); }

/* Smooth theme switch */
body, .card, .nav-item, .topbar, .modal, .chip, .btn, .input, .textarea, .select,
.tile, .post-card, .row-strip, .sidebar { transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease; }

/* ==========================================================
   Page transitions
   ========================================================== */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page { animation: pageIn 240ms cubic-bezier(.2,.7,.2,1) both; }

@keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay { animation: modalOverlayIn 180ms ease both; }
.modal { animation: modalIn 220ms cubic-bezier(.2,.7,.2,1) both; }

/* ==========================================================
   Theme toggle (in topbar)
   ========================================================== */
.theme-toggle {
  position: relative;
  width: 56px; height: 28px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  transition: background 200ms;
}
.theme-toggle .knob {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-elev);
  box-shadow: var(--sh-1);
  display: grid; place-items: center;
  font-size: 12px;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1);
  transform: translateX(0);
}
[data-theme="dark"] .theme-toggle .knob { transform: translateX(28px); }

/* ==========================================================
   Skeletons
   ========================================================== */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skel {
  background: var(--bg-soft);
  background-image: linear-gradient(90deg,
    color-mix(in oklab, var(--bg-soft) 100%, transparent) 0%,
    color-mix(in oklab, var(--bg-sunk) 100%, transparent) 50%,
    color-mix(in oklab, var(--bg-soft) 100%, transparent) 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-1);
  display: block;
}
.skel-line { height: 12px; }
.skel-line.lg { height: 18px; }
.skel-line.xl { height: 28px; }
.skel-circle { border-radius: 50%; }
.skel-card {
  border-radius: var(--r-3);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 18px;
}
.skel-stack > * + * { margin-top: 10px; }

/* ==========================================================
   Search dropdown (Cmd+K overlay)
   ========================================================== */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(31,27,22,.45);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex; justify-content: center;
  padding-top: 12vh;
  animation: modalOverlayIn 160ms ease both;
}
[data-theme="dark"] .search-overlay { background: rgba(0,0,0,.65); }
.search-panel {
  width: min(680px, 92vw);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
  animation: modalIn 200ms cubic-bezier(.2,.7,.2,1) both;
}
.search-panel-input {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.search-panel-input input {
  flex: 1;
  border: none; outline: none;
  background: transparent;
  color: var(--ink-1);
  font-size: 17px;
  font-family: inherit;
}
.search-panel-input input::placeholder { color: var(--ink-3); }
.search-panel-body { overflow-y: auto; padding: 8px 0; }
.search-section {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
  padding: 12px 20px 6px;
}
.search-result {
  display: flex; align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  border: none; background: transparent;
  width: 100%; text-align: left;
  font-family: inherit;
  color: var(--ink-1);
}
.search-result:hover, .search-result.kbd-active {
  background: var(--bg-soft);
}
.search-result-meta { flex: 1; min-width: 0; }
.search-result-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-kind {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--bg-soft);
  flex-shrink: 0;
}
.search-result mark {
  background: color-mix(in oklab, var(--hue-amber) 50%, transparent);
  color: inherit; padding: 0 2px; border-radius: 2px;
}
.search-foot {
  border-top: 1px solid var(--line);
  padding: 10px 20px;
  font-size: 11.5px; color: var(--ink-3);
  display: flex; gap: 16px; align-items: center;
}
.kbd {
  font-family: var(--font-mono);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--ink-2);
}
.search-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-3);
}

/* ==========================================================
   v2 ADDITIONS — Post reactions, Share buttons, Dev Controls
   ========================================================== */

/* 4-reaction bar */
.post-actions-v2 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  margin-top: 12px;
  flex-wrap: wrap;
}
.reactions-bar {
  display: flex;
  gap: 3px;
}
.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--bg-soft);
  font-size: 12px;
  cursor: pointer;
  transition: all 140ms ease;
  color: var(--ink-2);
}
.reaction-btn:hover { background: var(--bg-sunk); }
.reaction-btn.active {
  background: color-mix(in oklab, var(--hue-amber) 22%, var(--bg-elev));
  border-color: color-mix(in oklab, var(--hue-amber) 50%, transparent);
}
.reaction-emoji { font-size: 13px; line-height: 1; }
.reaction-count { font-size: 11.5px; color: var(--ink-3); }
.reaction-btn.active .reaction-count { color: var(--ink-2); font-weight: 600; }
.post-actions-spacer { flex: 1; }
.post-action-share {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--r-2);
  border: none;
  background: none;
  color: var(--ink-3);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 120ms ease;
}
.post-action-share:hover { background: var(--bg-soft); color: var(--ink-1); }
.post-action-share.active { color: var(--accent); }

/* Role badge on post author */
.role-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.role-badge.autor {
  background: color-mix(in oklab, var(--hue-violet) 20%, var(--bg-elev));
  color: color-mix(in oklab, var(--hue-violet) 60%, var(--ink-1));
}
.role-badge.partner {
  background: color-mix(in oklab, var(--hue-amber) 20%, var(--bg-elev));
  color: color-mix(in oklab, var(--hue-amber) 70%, var(--ink-2));
}

/* Dev controls (prototype-only switcher) */
.dev-controls {
  background: color-mix(in oklab, var(--hue-violet) 10%, var(--bg-soft));
  border: 1px dashed color-mix(in oklab, var(--hue-violet) 30%, var(--line));
  border-radius: var(--r-2);
  margin-bottom: 12px;
  overflow: hidden;
}
.dev-controls-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dev-controls-toggle:hover { color: var(--ink-1); }
.dev-controls-body {
  padding: 6px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dev-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  font-weight: 700;
  padding: 6px 0 3px;
}

/* ==========================================================
   Drop-a-Find button styling
   ========================================================== */
.btn-drop {
  background: color-mix(in oklab, var(--hue-amber) 30%, var(--bg-elev));
  color: var(--ink-1);
  border: 1.5px solid color-mix(in oklab, var(--hue-amber) 50%, transparent);
  font-weight: 600;
}
.btn-drop:hover {
  background: color-mix(in oklab, var(--hue-amber) 45%, var(--bg-elev));
}
[data-theme="dark"] .btn-drop {
  background: color-mix(in oklab, var(--hue-amber) 22%, var(--bg-elev));
  border-color: color-mix(in oklab, var(--hue-amber) 40%, transparent);
}

/* ==========================================================
   MyHue — bento widget edit mode
   ========================================================== */
.widget-edit-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--hue-violet) 8%, transparent);
  border: 2px dashed color-mix(in oklab, var(--hue-violet) 40%, var(--line));
  border-radius: var(--r-3);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 10px;
  pointer-events: none;
}
.widget { position: relative; }
.widget-gear {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 5;
}
.widget:hover .widget-gear { opacity: 1; }
.widget-drag-handle {
  position: absolute;
  top: 10px; left: 10px;
  color: var(--ink-4);
  cursor: grab;
  z-index: 5;
  opacity: 0;
  transition: opacity 150ms ease;
  padding: 4px;
}
.dash-edit-mode .widget-drag-handle { opacity: 1; }
.dash-edit-mode .widget {
  border: 1.5px dashed var(--line);
  transition: box-shadow 150ms;
}
.dash-edit-mode .widget:hover { box-shadow: var(--sh-2); }

/* widget toggle row */
.widget-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.widget-toggle-row:first-child { border-top: none; }

/* ==========================================================
   Community — tabs v2
   ========================================================== */
.feed-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.feed-tab {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 120ms ease;
}
.feed-tab:hover { background: var(--bg-soft); }
.feed-tab.active {
  background: var(--ink-1);
  color: var(--bg-elev);
  border-color: transparent;
}

/* ==========================================================
   Landing page
   ========================================================== */
.landing {
  background: var(--bg);
  min-height: 100vh;
  color: var(--ink-1);
}
.landing-nav {
  display: flex;
  align-items: center;
  padding: 20px 48px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 16px;
}
.landing-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 48px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.landing-hero-text h1 {
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}
.landing-hero-text p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 480px;
  margin: 0 0 32px;
}
.landing-video-placeholder {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--hue-amber) 0%, var(--hue-rose) 40%, var(--hue-violet) 100%);
  border-radius: var(--r-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.landing-video-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(31,27,22,0.15);
  border-radius: inherit;
}
.landing-video-play {
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  z-index: 1;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.landing-video-label {
  font-size: 13px;
  font-weight: 600;
  color: white;
  z-index: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.landing-section {
  padding: 64px 48px;
  max-width: 1200px;
  margin: 0 auto;
}
.landing-section-title {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.1;
}
.landing-section-sub {
  font-size: 16px;
  color: var(--ink-2);
  margin: 0 0 40px;
  max-width: 560px;
  line-height: 1.55;
}
.landing-plans {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 64px 48px;
  max-width: 1200px;
  margin: 0 auto;
}
.plan-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plan-card.featured {
  background: var(--ink-1);
  color: var(--bg-elev);
  border-color: transparent;
}
.plan-card.featured .muted { color: rgba(255,255,255,0.6); }
.plan-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.plan-card.featured .plan-name { color: rgba(255,255,255,0.6); }
.plan-price {
  font-family: var(--font-serif);
  font-size: 46px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan-price sup { font-size: 20px; vertical-align: top; margin-top: 8px; }
.plan-price .per { font-size: 14px; font-weight: 400; opacity: 0.6; margin-left: 4px; }
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  flex: 1;
}
.plan-features li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.plan-check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--hue-sage);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.plan-card.featured .plan-check { background: rgba(255,255,255,0.9); }

/* ==========================================================
   Partner context switcher
   ========================================================== */
.ctx-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--sh-3);
  z-index: 200;
  overflow: hidden;
  animation: modalIn 160ms cubic-bezier(.2,.7,.2,1) both;
}
.ctx-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 120ms;
}
.ctx-dropdown-item:hover { background: var(--bg-soft); }
.ctx-dropdown-item.active { background: color-mix(in oklab, var(--hue-sage) 12%, var(--bg-elev)); }
.ctx-dropdown-divider {
  height: 1px;
  background: var(--line-soft);
  margin: 4px 0;
}

/* ==========================================================
   Onboarding v2 (simplified, 3 steps)
   ========================================================== */
.onboarding-domains-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.domain-card-v2 {
  border: 1.5px solid var(--line);
  border-radius: var(--r-2);
  padding: 16px;
  cursor: pointer;
  background: var(--bg-elev);
  transition: all 140ms ease;
}
.domain-card-v2.active {
  border-color: var(--ink-1);
  background: var(--bg-soft);
}
.domain-card-v2:hover:not(.active) { border-color: var(--ink-4); }

/* sub-tags quick select */
.domain-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* mini-tutorial tooltip overlay */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}
.tutorial-tooltip {
  position: absolute;
  background: var(--ink-1);
  color: var(--bg-elev);
  border-radius: var(--r-2);
  padding: 12px 16px;
  max-width: 240px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--sh-3);
  pointer-events: auto;
  animation: toastIn 0.25s ease-out both;
}
.tutorial-tooltip::before {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  background: var(--ink-1);
  transform: rotate(45deg);
}
.tutorial-tooltip.arrow-left::before { left: -5px; top: 20px; }
.tutorial-tooltip.arrow-top::before { top: -5px; left: 24px; }
.tutorial-step-count {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin-bottom: 4px;
}
.tutorial-highlight {
  position: absolute;
  border-radius: var(--r-2);
  box-shadow: 0 0 0 3px var(--hue-amber), 0 0 0 6px rgba(232,184,114,0.3);
  pointer-events: none;
  animation: pulseRing 2s ease-in-out infinite;
}
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 3px var(--hue-amber), 0 0 0 6px rgba(232,184,114,0.25); }
  50% { box-shadow: 0 0 0 3px var(--hue-amber), 0 0 0 10px rgba(232,184,114,0.1); }
}

/* ==========================================================
   Drop-a-Find composer
   ========================================================== */
.url-fetch-preview {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  margin-top: 10px;
}
.url-fetch-cover {
  height: 80px;
  background: linear-gradient(135deg, var(--hue-amber), var(--hue-rose));
}
.url-fetch-meta { padding: 12px; }
.url-fetch-source {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
}
.url-fetch-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  margin: 4px 0;
  line-height: 1.25;
}
.loading-shimmer {
  height: 100%;
  background: linear-gradient(90deg, var(--bg-sunk) 0%, var(--bg-soft) 50%, var(--bg-sunk) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

/* ==========================================================
   TODO markers (visible in prototype)
   ========================================================== */
.todo-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in oklab, var(--hue-amber) 25%, var(--bg-elev));
  border: 1px solid color-mix(in oklab, var(--hue-amber) 50%, var(--line));
  border-radius: var(--r-1);
  padding: 5px 10px;
  font-size: 11.5px;
  color: color-mix(in oklab, var(--hue-amber) 80%, var(--ink-1));
  font-weight: 600;
}

/* ==========================================================
   Topbar v2 – two CTA buttons
   ========================================================== */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-ctx-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  cursor: pointer;
  color: var(--ink-2);
  position: relative;
  transition: background 120ms;
}
.user-ctx-btn:hover { background: var(--bg-soft); }
.partner-ctx-badge {
  position: absolute;
  bottom: -2px;
  right: 4px;
  width: 14px; height: 14px;
  background: var(--hue-amber);
  color: var(--ink-1);
  border: 2px solid var(--bg-elev);
  border-radius: 50%;
  font-size: 7px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* ==========================================================
   Joy section — Shared Moments card
   ========================================================== */
.joy-moment-card {
  flex: 0 0 200px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 16px;
  cursor: pointer;
  transition: transform 180ms ease;
  scroll-snap-align: start;
}
.joy-moment-card:hover { transform: translateY(-2px); }
.joy-moment-card .moment-who {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 8px;
}
.joy-moment-card .moment-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  margin-top: 4px;
}

/* ==========================================================
   Library — Pinterest-style boards
   ========================================================== */
.library-boards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.library-board {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.library-board:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.library-board-mosaic {
  height: 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.library-board-mosaic .main-cell {
  grid-row: span 2;
}
.library-board-info {
  padding: 10px 12px;
}
.library-board-name {
  font-size: 13.5px;
  font-weight: 600;
}
.library-board-count {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Save-to-library popup */
.save-popup {
  position: fixed;
  inset: 0;
  background: rgba(31,27,22,0.3);
  backdrop-filter: blur(2px);
  z-index: 300;
  display: grid;
  place-items: center;
}
.save-popup-panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  width: 360px;
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: modalIn 180ms ease both;
}