/* ============================================================
   Tavo — Brutal skin for APP shell (paper, ink, hard borders).
   Scoped pod .app-shell / .onb / .op-shell / .modal-overlay / .toast-root.
   Nie dotyka landingu (.lp ma własne style) ani widget-owych detali,
   które muszą pozostać czytelne (tabele, inputy, sidebar-nav).
   ============================================================ */

/* ---- Palette bridge (bez zmiany bazowego tokenu --brand) ---- */
.app-shell, .onb, .op-shell, .modal-overlay, .toast-root, .demo-panel, .demo-fab {
  --paper: #F4ECDA;
  --paper-2: #FBF5E9;
  --ink: #17130F;
  --ink-2: #524941;
  --mint: #C7E7D0;
  --lav: #E4DBF4;
  --peach: #F8DCA8;
  --sky: #CFE3F2;
  --hard-sm: 3px 3px 0 var(--ink);
  --hard: 5px 5px 0 var(--ink);
}

/* Application background = paper */
.app-shell { background: var(--paper); }
.content { color: var(--ink); }

/* ---- Sidebar ---- */
.app-shell .sidebar { background: var(--paper-2); border-right: 2px solid var(--ink); }
.app-shell .sidebar__brand .brand-name { color: var(--ink); letter-spacing: -.02em; font-weight: 800; }
.app-shell .brand-mark { background: var(--brand); border: 2px solid var(--ink); box-shadow: none; border-radius: 9px; }

.app-shell .ws-switch { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--hard-sm); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.app-shell .ws-switch:hover { background: var(--paper-2); border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.app-shell .ws-switch__mark { border: 2px solid var(--ink); border-radius: 8px; }
.app-shell .ws-switch__name { color: var(--ink); font-weight: 800; }
.app-shell .ws-switch__sub { color: var(--ink-2); font-weight: 600; }

.app-shell .nav__label { color: var(--ink-2); }
.app-shell .nav { padding: var(--sp-2) 10px; gap: 3px; }
.app-shell .nav__item { color: var(--ink); font-weight: 600; border-radius: 9px; padding: 8px 10px; margin: 0 2px; transition: background var(--t-fast); }
.app-shell .nav__item:hover { background: rgba(23,19,15,.07); color: var(--ink); }
.app-shell .nav__item.is-active { background: var(--ink); color: var(--paper); }
.app-shell .nav__item.is-active .nav__icon { color: var(--paper); }
.app-shell .nav__item.is-active::before { display: none; }
.app-shell .nav__icon { color: var(--ink-2); }

.app-shell .sidebar__foot { border-top: 2px solid var(--ink); background: var(--paper-2); }
.app-shell .usage-mini { background: var(--mint); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--hard-sm); }
.app-shell .usage-mini__top { color: var(--ink); font-weight: 700; }
.app-shell .usage-mini__val { color: var(--ink); font-weight: 800; }
.app-shell .op-link { color: var(--ink); font-weight: 600; border-radius: 10px; }
.app-shell .op-link:hover { background: rgba(23,19,15,.07); color: var(--ink); }
.app-shell .op-link svg { color: var(--ink-2); }

/* ---- Topbar ---- */
.app-shell .topbar { background: var(--paper); border-bottom: 2px solid var(--ink); backdrop-filter: none; }
.app-shell .topbar__title { color: var(--ink); font-weight: 800; }
.app-shell .icon-btn { border-radius: 10px; color: var(--ink); }
.app-shell .icon-btn:hover { background: rgba(23,19,15,.08); color: var(--ink); }

/* ---- Buttons (chunky w aplikacji, ale niżej niż na landingu) ---- */
.app-shell .btn, .onb .btn, .op-shell .btn, .modal .btn, .demo-panel .btn, .demo-fab {
  border: 2px solid var(--ink); border-radius: 10px; background: var(--paper-2); color: var(--ink);
  font-weight: 700; box-shadow: 2px 2px 0 var(--ink);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast);
}
.app-shell .btn:hover, .onb .btn:hover, .op-shell .btn:hover, .modal .btn:hover, .demo-panel .btn:hover {
  transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); background: var(--paper);
}
.app-shell .btn:active, .onb .btn:active, .op-shell .btn:active, .modal .btn:active {
  transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink);
}
.app-shell .btn--primary, .onb .btn--primary, .op-shell .btn--primary, .modal .btn--primary {
  background: var(--brand); color: #fff; border-color: var(--ink);
}
.app-shell .btn--primary:hover, .onb .btn--primary:hover, .op-shell .btn--primary:hover, .modal .btn--primary:hover { background: var(--brand-600); }
.app-shell .btn--ghost, .modal .btn--ghost { border: none; box-shadow: none; background: transparent; }
.app-shell .btn--ghost:hover, .modal .btn--ghost:hover { transform: none; box-shadow: none; background: rgba(23,19,15,.07); }
.app-shell .btn--subtle, .modal .btn--subtle { background: var(--paper-2); }
.app-shell .btn--danger, .modal .btn--danger { background: #F6DEDB; color: var(--brand-700); border-color: var(--ink); }
.app-shell .btn--lg { height: 46px; }
.app-shell .btn--sm { height: 30px; border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); }

/* ---- Cards ---- */
.app-shell .card { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--hard-sm); }
.modal-overlay .modal { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 18px; box-shadow: var(--hard-lg); color: var(--ink); }
.modal-overlay .modal__title { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.modal-overlay .modal__sub { color: var(--ink-2); }
.modal-overlay .modal__foot { background: var(--paper); border-top: 2px solid var(--ink); border-radius: 0 0 16px 16px; }
.modal-overlay .modal__close { color: var(--ink); }
.modal-overlay .modal__close:hover { background: rgba(23,19,15,.1); color: var(--ink); }
/* Modal buttons need brutal look — apply directly (they weren't reached by earlier .app-shell scope) */
.modal-overlay .btn { border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: 2px 2px 0 var(--ink); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.modal-overlay .btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.modal-overlay .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.modal-overlay .btn--primary { background: var(--brand); color: #fff; }
.modal-overlay .btn--danger { background: #F6DEDB; color: var(--brand-700); }
.modal-overlay .btn--ghost { border: none; box-shadow: none; background: transparent; }
.modal-overlay .btn--ghost:hover { transform: none; box-shadow: none; background: rgba(23,19,15,.07); }
.modal-overlay .btn--subtle { background: var(--paper); }
.app-shell .card--hover:hover { transform: translate(-2px, -2px); box-shadow: var(--hard); border-color: var(--ink); }
.app-shell .card__title { color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.app-shell .card__sub { color: var(--ink-2); font-weight: 500; }
.app-shell .page__title { color: var(--ink); font-weight: 800; letter-spacing: -.03em; }
.app-shell .page__sub { color: var(--ink-2); font-weight: 500; }

/* ---- Badges (twarde obwódki, żywe tła) ---- */
.app-shell .badge, .modal .badge, .op-shell .badge {
  border: 1.5px solid var(--ink); font-weight: 700; padding: 3px 9px;
}
.app-shell .badge--brand { background: var(--brand); color: #fff; }
.app-shell .badge--success { background: var(--mint); color: var(--ink); }
.app-shell .badge--warning { background: var(--peach); color: var(--ink); }
.app-shell .badge--info { background: var(--sky); color: var(--ink); }
.app-shell .badge--data { background: var(--mint); color: var(--ink); }
.app-shell .badge--danger { background: #F6DEDB; color: var(--brand-700); }

/* ---- Form controls ---- */
.app-shell .input, .app-shell .select, .app-shell .textarea, .modal .input, .modal .select, .modal .textarea, .onb .input, .onb .select, .onb .textarea {
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: 10px; color: var(--ink); font-weight: 500;
}
.app-shell .input:focus, .modal .input:focus, .onb .input:focus,
.app-shell .select:focus, .modal .select:focus, .onb .select:focus,
.app-shell .textarea:focus, .modal .textarea:focus, .onb .textarea:focus {
  border-color: var(--brand); box-shadow: 3px 3px 0 var(--ink);
}
.app-shell .segmented, .modal-overlay .modal .segmented, .lp .segmented { background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); border-radius: 999px; padding: 4px; gap: 2px; }
.app-shell .segmented button, .modal-overlay .modal .segmented button, .lp .segmented button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; color: var(--ink-2); font-weight: 700; line-height: 1.2; height: auto; min-height: 26px; white-space: nowrap; }
.app-shell .segmented button svg, .modal-overlay .modal .segmented button svg, .lp .segmented button svg { width: 15px; height: 15px; flex: none; }
.app-shell .segmented button[aria-pressed="true"], .modal-overlay .modal .segmented button[aria-pressed="true"], .lp .segmented button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }

/* ---- Tables (lekko: paper-2 bg, ink borders, ale zachowaj gęstość) ---- */
.app-shell .table th { color: var(--ink-2); font-weight: 800; border-bottom: 2px solid var(--ink); background: var(--paper); }
.app-shell .table td { border-bottom: 1.5px solid rgba(23,19,15,.14); color: var(--ink); }
.app-shell .table tr.is-clickable:hover { background: rgba(23,19,15,.05); }

/* ---- Progress bars ---- */
.app-shell .progress { background: var(--paper); border: 1.5px solid var(--ink); overflow: hidden; }
.app-shell .progress__bar { background: var(--ink); }
.app-shell .progress--warn .progress__bar { background: var(--warning); }
.app-shell .progress--danger .progress__bar { background: var(--brand); }

/* ---- Modal (zamiast miękkiego cienia — hard, ale nie za mocny) ---- */
.modal-overlay { background: rgba(23,19,15,.55); backdrop-filter: none; }
.modal-overlay .modal { box-shadow: 6px 6px 0 var(--ink); border-radius: 16px; }
.modal__foot { background: var(--paper); border-top: 2px solid var(--ink); border-radius: 0 0 14px 14px; }
.modal__title { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.modal__sub { color: var(--ink-2); }
.modal__close { color: var(--ink-2); border-radius: 8px; }
.modal__close:hover { background: rgba(23,19,15,.08); color: var(--ink); }

/* ---- Toasts (paper zamiast ciemnego) ---- */
.toast { background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 rgba(23,19,15,.25); }
.toast--success .toast__icon { color: var(--mint); }

/* ---- Demo FAB / panel — spójny z rodziną: paper + obwódka + hard shadow ---- */
.demo-fab { position: fixed; left: auto !important; right: 20px !important; bottom: 20px !important; }
.demo-fab__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--paper-2); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); padding: 9px 15px; height: auto; font-weight: 700; font-size: var(--fs-sm); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.demo-fab__btn:hover { background: var(--paper-2); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.demo-fab__btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.demo-fab__btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(46,125,91,.22); }
.demo-panel { position: fixed; left: auto !important; right: 20px !important; bottom: 72px !important; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--hard); color: var(--ink); }

/* ---- Sidebar nav-active state — restore brand accent stripe visibility ---- */
.app-shell .nav__item.is-active { color: var(--paper); }
.app-shell .nav__item.is-active .nav__icon { color: var(--brand); }

/* ---- Dashboard welcome card / demo notes / mini widgets ---- */
.app-shell .demo-note { background: var(--peach); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 2px 2px 0 var(--ink); font-weight: 600; padding: 12px 14px; }

/* ---- Onboarding: paper backdrop + card ---- */
.onb { background: var(--paper); color: var(--ink); }
.onb__aside { background: var(--paper-2); border-right: 2px solid var(--ink); color: var(--ink); }
.onb .onb__brand .brand-name { color: var(--ink); }
.onb__body { background: var(--paper); }

/* ---- Panel operatora — jasny brutal, spójny z resztą ---- */
.op-shell { background: var(--paper); color: var(--ink); }
.op-shell .op-top { background: var(--paper); border-bottom: 2px solid var(--ink); color: var(--ink); }
.op-shell .op-top__brand { color: var(--ink); font-weight: 800; }
.op-shell .op-top__brand .brand-mark { background: var(--brand); border: 2px solid var(--ink); color: #fff; box-shadow: none; }
.op-shell .op-badge { background: var(--mint); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 800; }
.op-shell .op-content { color: var(--ink); }
.op-shell .op-content h1 { color: var(--ink); font-weight: 800; }
.op-shell .op-content > div > p,
.op-shell .op-content p[style*="color"] { color: var(--ink-2) !important; }

.op-shell .op-card { background: var(--paper-2); border: 2px solid var(--ink); box-shadow: var(--hard-sm); border-radius: 14px; color: var(--ink); padding: var(--sp-5); }
.op-shell .op-card__title { color: var(--ink); font-weight: 800; }
.op-shell .op-card__title span[style*="color"] { color: var(--ink-2) !important; font-weight: 600; }

/* Metric cards (KPI) */
.op-shell .metric { background: var(--paper-2); border: 2px solid var(--ink); box-shadow: var(--hard-sm); border-radius: 14px; padding: var(--sp-4) var(--sp-5); color: var(--ink); }
.op-shell .metric--hero { background: var(--mint); }
.op-shell .metric__label { color: var(--ink-2); font-weight: 700; }
.op-shell .metric__label svg { color: var(--ink-2); }
.op-shell .metric__value { color: var(--ink); font-weight: 800; letter-spacing: -.03em; }
.op-shell .metric__delta { color: var(--ink-2); font-weight: 700; }
.op-shell .metric__delta svg { color: var(--success); }

/* Nadpisz twardo zakodowane ciemne kolory z operatora */
.op-shell [style*="color:#7A7468"],
.op-shell [style*="color: #7A7468"],
.op-shell [style*="color:#5F5A50"],
.op-shell [style*="color: #5F5A50"],
.op-shell [style*="color:#A79F94"],
.op-shell [style*="color: #A79F94"] { color: var(--ink-2) !important; }
.op-shell [style*="color:#C4BCB1"],
.op-shell [style*="color: #C4BCB1"] { color: var(--ink) !important; }
.op-shell [style*="color:#8FE0D8"],
.op-shell [style*="color: #8FE0D8"] { color: var(--ink-2) !important; font-weight: 700; }

/* Event status pills (tstat--*) */
.op-shell .tstat { border: 1.5px solid var(--ink) !important; font-weight: 700; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-xs); }
.op-shell .tstat--upgrade { background: var(--mint) !important; color: var(--ink) !important; }
.op-shell .tstat--churn, .op-shell .tstat--canceled { background: #F6DEDB !important; color: var(--brand-700) !important; }
.op-shell .tstat--trial { background: var(--sky) !important; color: var(--ink) !important; }
.op-shell .tstat--renewal, .op-shell .tstat--active { background: var(--mint) !important; color: var(--ink) !important; }
.op-shell .tstat--past_due, .op-shell .tstat--overdue { background: var(--peach) !important; color: var(--ink) !important; }

/* Chart bg */
.op-shell svg line[stroke*="255"] { stroke: rgba(23,19,15,.08) !important; }
.op-shell svg polyline[stroke*="255"],
.op-shell svg polyline[stroke*="#8FE0D8"] { stroke: var(--brand) !important; }
.op-shell svg text { fill: var(--ink-2) !important; }

/* Chip filters */
.op-shell .chip { border: 2px solid var(--ink); color: var(--ink); background: var(--paper-2); font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.op-shell .chip:hover { background: var(--paper); }
.op-shell .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.op-shell .op-filters { gap: 6px; }
.op-shell .op-filters > span { background: rgba(23,19,15,.14) !important; }

/* Table */
.op-shell .op-table { color: var(--ink); }
.op-shell .op-table th { color: var(--ink-2); font-weight: 800; border-bottom: 2px solid var(--ink); background: var(--paper); }
.op-shell .op-table td { border-bottom: 1.5px solid rgba(23,19,15,.14); color: var(--ink); }
.op-shell .op-table tr:hover { background: rgba(23,19,15,.05); }
.op-shell .op-table .badge { border: 1.5px solid var(--ink); font-weight: 700; }

/* Recent subs items — tinted pills */
.op-shell .op-card__title + div .badge { border: 1.5px solid var(--ink); background: var(--paper-2); color: var(--ink); font-weight: 700; }

/* Back button */
.op-shell .op-top .btn { background: var(--paper-2) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; box-shadow: 2px 2px 0 var(--ink); }
.op-shell .op-top .btn:hover { background: var(--paper) !important; }

/* Utility: strong accented CTA in dashboards */
.brand-mark svg { width: 20px; height: 20px; }

/* ---------------- Upgrade wall + checkout ---------------- */
.modal-overlay .modal .uw-hero__icon { background: var(--brand); color: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }
.modal-overlay .modal .uw-usage { background: var(--peach); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); }
.modal-overlay .modal .uw-usage__top { color: var(--ink); font-weight: 700; }
.modal-overlay .modal .uw-usage__bar { background: rgba(23,19,15,.14); }
.modal-overlay .modal .uw-usage__bar > * { background: var(--brand); }
.modal-overlay .modal .uw-compare { gap: var(--sp-4); }
.modal-overlay .modal .uw-plan { border: 2px solid var(--ink); border-radius: 14px; padding: 18px; background: var(--paper-2); box-shadow: 2px 2px 0 var(--ink); }
.modal-overlay .modal .uw-plan--to { background: var(--mint); box-shadow: 4px 4px 0 var(--ink); }
.modal-overlay .modal .uw-plan--from { background: var(--paper-2); }
.modal-overlay .modal .uw-plan__name { color: var(--ink); font-weight: 800; }
.modal-overlay .modal .uw-plan__price { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.modal-overlay .modal .uw-plan--from .uw-plan__list svg { color: var(--ink-2); }
.modal-overlay .modal .uw-plan--to .uw-plan__list svg { color: var(--brand); }
.modal-overlay .modal .uw-plan__list { color: var(--ink); }
.modal-overlay .modal .demo-note,
.app-shell .demo-note { background: var(--peach); border: 2px solid var(--ink); border-radius: 10px; color: var(--ink); font-weight: 600; padding: 10px 12px; box-shadow: 2px 2px 0 var(--ink); }

/* Checkout — payment method radios */
.modal-overlay .modal [data-method] { border: 2px solid var(--ink) !important; background: var(--paper-2) !important; color: var(--ink) !important; box-shadow: 2px 2px 0 var(--ink); font-weight: 700; }
.modal-overlay .modal [data-method][aria-pressed="true"] { background: var(--mint) !important; }

/* Success screen after payment */
.modal-overlay .modal .success-check { background: var(--mint); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }

/* ---------------- Welcome card ---------------- */
.welcome-card { background: var(--peach); border: 2px solid var(--ink) !important; border-radius: 16px !important; box-shadow: var(--hard) !important; padding: var(--sp-5); }
.welcome-card h2, .welcome-card h3 { color: var(--ink); font-weight: 800; }
.welcome-action { background: var(--paper-2); border: 2px solid var(--ink) !important; border-radius: 12px; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.welcome-action:hover { background: var(--paper-2); border-color: var(--ink) !important; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.welcome-action__ic { background: var(--mint); border: 2px solid var(--ink); color: var(--ink); border-radius: 10px; }
.welcome-action__t { color: var(--ink); font-weight: 700; }
.welcome-action__d { color: var(--ink-2); }
.welcome-action__arrow { color: var(--ink); }

/* ---------------- Onboarding ---------------- */
.onb__aside { padding: var(--sp-7) var(--sp-6); }
.onb .onb__brand { color: var(--ink); font-weight: 800; }
.onb .onb__brand .brand-mark { background: var(--brand); color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 4px; }
.onb .onb-step { color: var(--ink-2); }
.onb .onb-step.is-active { color: var(--ink); font-weight: 700; }
.onb .onb-step.is-done { color: var(--ink-2); }
.onb .onb-step__num { border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink); font-weight: 800; }
.onb .onb-step.is-active .onb-step__num { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.onb .onb-step.is-done .onb-step__num { background: var(--mint); color: var(--ink); border-color: var(--ink); }
.onb .onb-progress { background: rgba(23,19,15,.12); border-radius: 999px; height: 6px; border: 1.5px solid var(--ink); overflow: hidden; }
.onb .onb-progress__bar { background: var(--brand); }
.onb .onb-title { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.onb .onb-sub { color: var(--ink-2); }

/* Onboarding option cards (use-case, plan pick, etc.) */
.onb .option-card, .onb [data-select], .onb .plan-pick {
  background: var(--paper-2); border: 2px solid var(--ink); border-radius: 12px; padding: 14px; box-shadow: 2px 2px 0 var(--ink);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.onb .option-card:hover, .onb [data-select]:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.onb .option-card.is-selected, .onb [data-select][aria-pressed="true"] { background: var(--mint); }

/* ---------------- Guided tour spotlight ---------------- */
.tour-spot { outline: 3px solid var(--brand) !important; border-radius: 12px !important; box-shadow: 0 0 0 9999px rgba(23,19,15,.55) !important; }
.tour-tip { background: var(--paper-2) !important; border: 2px solid var(--ink) !important; border-radius: 14px !important; box-shadow: var(--hard) !important; color: var(--ink) !important; }
.tour-tip__step { color: var(--brand); font-weight: 800; }
.tour-tip__title { color: var(--ink); font-weight: 800; }
.tour-tip__text { color: var(--ink-2); }
.tour-tip__dots span { background: rgba(23,19,15,.2); }
.tour-tip__dots span.on { background: var(--brand); }

/* ---------------- Toasts ---------------- */
.toast-root .toast { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--hard-sm); color: var(--ink); font-weight: 600; }
.toast-root .toast__title { color: var(--ink); font-weight: 800; }
.toast-root .toast--success { background: var(--mint); }
.toast-root .toast--info { background: var(--sky); }
.toast-root .toast--danger { background: #F6DEDB; }

/* ---------------- Kanban cards ---------------- */
.app-shell .kanban { gap: 14px; }
.app-shell .kanban__col { background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 14px; box-shadow: 2px 2px 0 var(--ink); }
.app-shell .kanban__head { color: var(--ink); font-weight: 800; }
.app-shell .kanban__count { background: var(--paper-2); border: 1.5px solid var(--ink); color: var(--ink); font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.app-shell .proj-card { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 2px 2px 0 var(--ink); padding: 12px; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.app-shell .proj-card:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }

/* ---------------- Confirm dialogs ---------------- */
.modal-overlay .modal .confirm__ic { background: var(--peach); border: 2px solid var(--ink); border-radius: 12px; color: var(--ink); }
.modal-overlay .modal .confirm--danger .confirm__ic { background: #F6DEDB; }