/* ══════════════════════════════════════════════════════════════
   Rezble — Design System
   Temelji na Safe aesthetic: DM Sans, terracotta #C4704B, deep green #1B4332
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --font-sans:    "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --ease:         cubic-bezier(.2,.8,.2,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);

  /* Canvas */
  --bg:           #F6F1E9;
  --bg-elev:      #FFFFFF;
  --bg-sunken:    #EDE5D6;

  /* Ink */
  --ink:          #1F2A26;
  --ink-soft:     #3C4A44;
  --ink-mute:     #7A8580;

  /* Lines */
  --line:         #E3D9C6;
  --line-strong:  #C8BCA3;
  --canvas-grid:  #E3D9C6;
  --canvas-hair:  #EFE7D5;

  /* Accent */
  --accent:       #C4704B;
  --accent-soft:  #F5E3D7;
  --accent-ink:   #FFFFFF;
  --secondary:    #1B4332;

  /* Semantic */
  --info:         #4A6FA5;
  --warning:      #D4A94B;
  --success:      #4A7C59;
  --danger:       #B8452E;

  /* Sidebar */
  --sidebar-bg:         #1B4332;
  --sidebar-ink:        #F1EDE2;
  --sidebar-mute:       #8FA79B;
  --sidebar-line:       rgba(241,237,226,.12);
  --sidebar-hover:      rgba(241,237,226,.06);
  --sidebar-active-bg:  rgba(196,112,75,.18);
  --sidebar-active-ink: #F5E3D7;
  --sidebar-width:      252px;
  --sidebar-width-collapsed: 68px;

  /* Reservations */
  --res-past:    #8B938E;
  --res-now:     #C4704B;
  --res-next:    #1B4332;
  --res-pending: #D4A94B;

  /* Cards */
  --card-radius:  14px;
  --shadow-card:  0 1px 2px rgba(30,40,30,.04), 0 4px 16px -6px rgba(30,40,30,.08);
  --shadow-pop:   0 8px 30px -8px rgba(30,40,30,.22);

  /* Legacy bridge — da stari CSS ne izgubi obarvanja */
  --color-bg:           #F6F1E9;
  --color-surface:      #FFFFFF;
  --color-accent:       #C4704B;
  --color-accent-hover: #A85C3A;
  --color-accent-light: rgba(196,112,75,.12);
  --color-text:         #1F2A26;
  --color-text-2:       #3C4A44;
  --color-muted:        #7A8580;
  --color-border:       #E3D9C6;
  --color-success:      #4A7C59;
  --color-danger:       #B8452E;
  --font:               "DM Sans", system-ui, -apple-system, sans-serif;
  --radius:             10px;
  --radius-lg:          14px;
}

/* ── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
button { font: inherit; border: 0; background: transparent; cursor: pointer; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; }

/* ── Skrijemo stari header ───────────────────────────────────── */
.app-header,
.mobile-nav { display: none !important; }

/* ── App layout ─────────────────────────────────────────────── */
body { padding-top: 0; }
@media (max-width: 900px) { body:has(.rz-mobile-bar) { padding-top: 52px; } }

.rz-app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .28s var(--ease);
}
.rz-app.is-collapsed {
  grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

.rz-main {
  overflow-y: auto;
  min-height: 100vh;
  padding: 28px 32px 40px;
  background: var(--bg);
}
.rz-main::-webkit-scrollbar { width: 8px; }
.rz-main::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 2px solid var(--bg);
}

/* ── Trial banner fix ────────────────────────────────────────── */
.trial-banner {
  margin: -28px -32px 20px;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.rz-sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  border-right: 1px solid var(--sidebar-line);
  display: flex;
  flex-direction: column;
  padding: 14px 10px 10px;
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .28s var(--ease);
}
/* Mobile: rz-app gre v 1 stolpec, sidebar plava ven (drawer), main poenoten padding. */
@media (max-width: 900px) {
  .rz-app, .rz-app.is-collapsed { grid-template-columns: 1fr !important; }
  .rz-main { padding: 16px 14px 32px !important; }
  .rz-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 80;
    transition: left .28s var(--ease) !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.25);
  }
  .rz-sidebar.is-mobile-open { left: 0 !important; }
}

.rz-side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 10px;
  flex-shrink: 0;
}

.rz-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sidebar-ink);
  white-space: nowrap;
}
.rz-logo-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sidebar-ink);
}
.rz-plan-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  text-transform: uppercase;
}

.rz-collapse {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--sidebar-mute);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.rz-collapse:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink);
}

/* Restaurant info */
.rz-restaurant-block {
  padding: 4px 8px 10px;
  flex-shrink: 0;
}
.rz-rest-static {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--sidebar-line);
  font-weight: 600;
  font-size: 13px;
  color: var(--sidebar-ink);
  letter-spacing: -0.01em;
}
.rz-rest-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.rz-rest-static select {
  background: transparent;
  border: 0;
  color: var(--sidebar-ink);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  cursor: pointer;
  outline: none;
  padding: 0;
  letter-spacing: -0.01em;
  -webkit-appearance: none;
}
.rz-rest-static select option {
  background: #1B4332;
  color: #F1EDE2;
}
.rz-rest-chevron {
  color: var(--sidebar-mute);
  flex-shrink: 0;
}

/* Pending button */
.rz-pending {
  margin: 0 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed var(--sidebar-line);
  color: var(--sidebar-ink);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.rz-pending:hover {
  background: var(--sidebar-hover);
  border-style: solid;
}
.rz-pending-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sidebar-mute);
}
.rz-pending-left span { color: var(--sidebar-ink); }
.rz-pending-count {
  min-width: 20px; height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  animation: rz-pulse 1.8s ease-out infinite;
}

/* Navigation */
.rz-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  overflow: hidden;
}
.rz-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 2px;
  border-radius: 8px;
  color: var(--sidebar-mute);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
  position: relative;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.rz-nav-item:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink);
}
.rz-nav-item.is-active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-ink);
  font-weight: 600;
}
.rz-nav-mark {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 16px;
  border-radius: 2px;
  background: var(--sidebar-active-ink);
  opacity: .6;
}
.rz-nav-icon {
  width: 17px; height: 17px;
  flex-shrink: 0;
}
.rz-app.is-collapsed .rz-nav-item {
  justify-content: center;
  padding: 10px;
}
.rz-app.is-collapsed .rz-nav-label,
.rz-app.is-collapsed .rz-nav-mark,
.rz-app.is-collapsed .rz-logo-name,
.rz-app.is-collapsed .rz-plan-badge,
.rz-app.is-collapsed .rz-restaurant-block,
.rz-app.is-collapsed .rz-pending-left span,
.rz-app.is-collapsed .rz-user-info,
.rz-app.is-collapsed .rz-user-more { display: none; }
.rz-app.is-collapsed .rz-pending {
  justify-content: center;
  padding: 10px;
}

.rz-side-spacer { flex: 1; }

/* User block */
.rz-side-bottom {
  padding: 10px 8px 6px;
  border-top: 1px solid var(--sidebar-line);
  flex-shrink: 0;
}
.rz-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
}
.rz-user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--info);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.02em;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.rz-user-info { flex: 1; min-width: 0; }
.rz-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sidebar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rz-user-role {
  font-size: 11px;
  color: var(--sidebar-mute);
}
.rz-user-more {
  color: var(--sidebar-mute);
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.rz-user-more:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink);
}

/* ── Topbar ──────────────────────────────────────────────────── */
.rz-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.rz-h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.rz-top-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-mute);
}
.rz-top-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.rz-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, border-color .15s, transform .12s;
  cursor: pointer;
  white-space: nowrap;
}
.rz-btn:hover {
  border-color: var(--line-strong);
  background: var(--bg-sunken);
}
.rz-btn:active { transform: scale(.98); }
.rz-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.rz-btn-primary:hover {
  background: var(--accent);
  filter: brightness(.93);
  border-color: var(--accent);
}
.rz-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}
.rz-btn-ghost:hover {
  background: var(--bg-sunken);
  color: var(--ink);
  border-color: transparent;
}
.rz-btn-danger {
  color: var(--danger);
}
.rz-btn-danger:hover {
  background: color-mix(in oklab, var(--danger) 8%, transparent);
  border-color: color-mix(in oklab, var(--danger) 30%, transparent);
}

.rz-iconbtn {
  width: 32px; height: 32px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  background: var(--bg-elev);
  transition: background .15s, color .15s;
  cursor: pointer;
}
.rz-iconbtn:hover {
  color: var(--ink);
  background: var(--bg-sunken);
}

/* Segmented control */
.rz-seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-elev);
}
.rz-seg button {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.rz-seg button.is-sel {
  background: var(--secondary);
  color: #fff;
}

/* ── Cards ───────────────────────────────────────────────────── */
.rz-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  animation: rz-rise .4s var(--ease) both;
}
.rz-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.rz-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rz-card-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.rz-card-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rz-card-sep {
  height: 1px;
  background: var(--line);
  margin: 20px 0;
}

/* ── Form ────────────────────────────────────────────────────── */
.rz-form { display: flex; flex-direction: column; gap: 16px; }
.rz-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rz-field { display: flex; flex-direction: column; gap: 6px; }
.rz-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.rz-field-hint { font-size: 11px; color: var(--ink-mute); }
.rz-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  font-size: 13px;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.rz-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
textarea.rz-input { resize: vertical; font-family: var(--font-sans); }

/* Toggle */
.rz-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line);
}
.rz-toggle-row:last-child { border-bottom: 0; }
.rz-toggle-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.rz-toggle-hint { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.rz-toggle {
  width: 36px; height: 20px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative; flex-shrink: 0;
  transition: background .2s;
  cursor: pointer;
  border: 0;
}
.rz-toggle.is-on { background: var(--accent); }
.rz-toggle-dot {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s var(--ease-spring);
}
.rz-toggle.is-on .rz-toggle-dot { left: 18px; }

/* ── Chips / badges ──────────────────────────────────────────── */
.rz-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-sunken);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.rz-chip-confirmed { background: color-mix(in oklab, var(--success) 10%, transparent); color: var(--success); border-color: transparent; }
.rz-chip-pending   { background: color-mix(in oklab, var(--danger) 10%, transparent);  color: var(--danger);  border-color: transparent; }
.rz-chip-arrived   { background: color-mix(in oklab, var(--accent) 15%, transparent);  color: var(--accent);  border-color: transparent; }
.rz-chip-danger    { background: color-mix(in oklab, var(--danger) 15%, transparent);  color: var(--danger);  border-color: transparent; font-weight: 700; }
.rz-chip-past      { color: var(--ink-mute); }

/* Plan tier badges */
.rz-tier {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  margin-left: 6px;
  vertical-align: middle;
}
.rz-tier-advanced { background: color-mix(in oklab, var(--info) 14%, transparent); color: var(--info); }
.rz-tier-premium  { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }
.rz-tier-start    { background: color-mix(in oklab, var(--ink-mute) 16%, transparent); color: var(--ink-mute); }

/* ── Tables ──────────────────────────────────────────────────── */
.rz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rz-table thead th {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink-mute); text-transform: uppercase;
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.rz-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
}
.rz-table tbody tr:last-child td { border-bottom: 0; }
.rz-table tbody tr { transition: background .15s; }
.rz-table tbody tr:hover { background: var(--bg-sunken); }

/* ── Tabs ────────────────────────────────────────────────────── */
.rz-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.rz-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  cursor: pointer;
}
.rz-tab:hover { color: var(--ink); }
.rz-tab.is-sel { color: var(--ink); border-bottom-color: var(--accent); }

/* ── KPI strip ───────────────────────────────────────────────── */
.rz-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.rz-kpi {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 16px 18px;
}
.rz-kpi.is-accent { border-color: var(--accent); background: var(--accent-soft); }
.rz-kpi-label {
  font-size: 11px; color: var(--ink-mute);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.rz-kpi-value { font-size: 28px; font-weight: 700; margin: 4px 0 2px; color: var(--ink); letter-spacing: -0.02em; }
.rz-kpi-delta { font-size: 11px; font-weight: 600; margin-bottom: 3px; display: flex; align-items: center; gap: 3px; }
.rz-kpi-delta.is-up   { color: var(--success); }
.rz-kpi-delta.is-down { color: var(--danger); }
.rz-kpi-delta.is-flat { color: var(--ink-mute); }
.rz-kpi-hint { font-size: 11px; color: var(--ink-mute); }

/* ── Grids ───────────────────────────────────────────────────── */
.rz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.rz-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ── Schedule ────────────────────────────────────────────────── */
.rz-schedule { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rz-sched-row {
  display: grid;
  grid-template-columns: 140px 1fr auto 36px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.rz-sched-row:last-child { border-bottom: 0; }
.rz-sched-row.is-closed { background: var(--bg-sunken); }
.rz-sched-day { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rz-sched-time { font-size: 13px; font-weight: 600; color: var(--ink); }
.rz-sched-row.is-closed .rz-sched-time { color: var(--ink-mute); }
.rz-sched-slots { font-size: 11px; color: var(--ink-mute); margin-top: 1px; }
.rz-sched-edit { background: var(--bg-sunken); border-bottom: 1px solid var(--line); padding: 14px 16px; }
.rz-sched-edit:last-child { border-bottom: 0; }

/* ── Chips ───────────────────────────────────────────────────── */
.rz-chip-ok   { background: color-mix(in oklab, var(--success) 12%, transparent); color: var(--success); border-color: transparent; }
.rz-chip-mute { color: var(--ink-mute); }

/* ── Auth pages ──────────────────────────────────────────────── */
.rz-auth {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}
.rz-auth-left {
  background: var(--secondary);
  color: var(--bg);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.rz-auth-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 80% 90%, color-mix(in oklab, var(--accent) 40%, transparent), transparent),
    radial-gradient(400px 300px at 10% 10%, color-mix(in oklab, #fff 8%, transparent), transparent);
  pointer-events: none;
}
.rz-auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--bg);
  position: relative;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.rz-auth-quote { position: relative; max-width: 520px; }
.rz-auth-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .15em;
  color: color-mix(in oklab, var(--bg) 60%, transparent);
  text-transform: uppercase;
}
.rz-auth-h {
  font-size: 52px;
  font-weight: 700;
  margin: 14px 0 20px;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--bg);
}
.rz-auth-p {
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--bg) 75%, transparent);
  max-width: 440px;
}
.rz-auth-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.rz-auth-stats > div {
  border-top: 1px solid color-mix(in oklab, var(--bg) 20%, transparent);
  padding-top: 12px;
}
.rz-auth-stats .rz-auth-stat-val {
  font-size: 26px;
  font-weight: 700;
  color: var(--bg);
  display: block;
}
.rz-auth-stats .rz-auth-stat-lbl {
  display: block;
  font-size: 11px;
  letter-spacing: .04em;
  color: color-mix(in oklab, var(--bg) 55%, transparent);
  margin-top: 4px;
}
.rz-auth-foot {
  font-size: 11px;
  color: color-mix(in oklab, var(--bg) 45%, transparent);
  position: relative;
}

.rz-auth-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.rz-auth-card { width: 100%; max-width: 420px; }
.rz-auth-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-sunken);
  margin-bottom: 28px;
}
.rz-auth-switch button {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
  border-radius: 7px;
  transition: all .15s;
}
.rz-auth-switch button.is-sel {
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.rz-auth-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.rz-auth-sub {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0 0 24px;
}
.rz-auth-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.rz-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rz-auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 4px 0;
}
.rz-auth-or::before, .rz-auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.rz-auth-soc {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.rz-auth-soc .rz-btn {
  flex: 1;
  justify-content: center;
  padding: 10px;
  font-size: 13px;
}
.rz-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
}
.rz-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.rz-check input { accent-color: var(--accent); }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes rz-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rz-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--danger) 60%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Kbd hint ────────────────────────────────────────────────── */
.rz-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  color: var(--ink-soft);
}

/* ── Overrides na obstoječe komponente ───────────────────────── */

/* Admin cards */
.admin-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
}
.admin-card-header {
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
}
.admin-card-header h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Buttons (legacy) */
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-primary:hover {
  filter: brightness(.93);
}

/* Schedule cards */

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

/* Calendar */
.calendar-grid .day.today {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.calendar-grid .day.selected {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

/* Stats cards */
.stats-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
}

/* Toast */
.toast {
  background: var(--ink);
  color: var(--bg-elev);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
}

/* Trial banner spacing */
.trial-banner {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

/* Pending section */
.pending-section {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
}

/* ── Command palette ─────────────────────────────────────────── */
.rz-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 6px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: var(--bg-sunken); border: 1px solid var(--line-strong);
  color: var(--ink-mute); font-family: var(--font-mono); letter-spacing: .03em;
  flex-shrink: 0;
}
.rz-kbd-hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  font-size: 12px; color: var(--ink-mute); font-weight: 500;
  background: var(--bg-sunken); border: 1px solid var(--line);
  cursor: pointer; transition: background .15s, color .15s;
}
.rz-kbd-hint:hover { background: var(--line); color: var(--ink); }

.rz-cmd-wrap {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15,20,15,.45); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: max(10vh, 60px);
}
.rz-cmd-wrap[hidden] { display: none; }
.rz-cmd {
  width: min(600px, calc(100vw - 32px));
  background: var(--bg-elev); border-radius: 14px;
  box-shadow: 0 20px 60px -10px rgba(15,20,15,.4), 0 0 0 1px var(--line);
  overflow: hidden; display: flex; flex-direction: column;
  max-height: min(560px, 80vh);
}
.rz-cmd-input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.rz-cmd-input svg { color: var(--ink-mute); flex-shrink: 0; }
.rz-cmd-input input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--ink); font-family: var(--font-sans);
}
.rz-cmd-input input::placeholder { color: var(--ink-mute); }
.rz-cmd-list { overflow-y: auto; flex: 1; padding: 6px; }
.rz-cmd-group-h {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute); padding: 8px 10px 4px;
}
.rz-cmd-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px; text-align: left;
  cursor: pointer; transition: background .1s;
  font-size: 13px; color: var(--ink);
}
.rz-cmd-row:hover, .rz-cmd-row.is-focus { background: var(--accent-soft); color: var(--accent); }
.rz-cmd-hint { margin-left: auto; font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.rz-cmd-empty { text-align: center; color: var(--ink-mute); font-size: 13px; padding: 32px 16px; }