*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f8f8f7;
  --surface: #ffffff;
  --surface-2: #fafaf9;
  --accent: #18181b;
  --accent-hover: #27272a;
  --accent-fg: #ffffff;
  --success: #16a34a;
  --error: #dc2626;
  --warning: #d97706;
  --sidebar-bg: #0f0f0f;
  --sidebar-w: 216px;
  --sidebar-cw: 52px;
  --border: #e7e5e4;
  --border-soft: #f0efee;
  --border-strong: #d4d4d8;
  --muted: #f4f4f5;
  --focus-ring: rgba(24,24,27,.08);
  --text: #111113;
  --text-2: #6b7280;
  --text-3: #a1a1aa;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(17,17,19,.05);
  --shadow-md: 0 6px 24px -6px rgba(17,17,19,.12);
  --shadow-lg: 0 24px 60px -12px rgba(17,17,19,.25);
  --ease-out: cubic-bezier(.22,1,.36,1);
  color-scheme: light;
}

/* Kontrolki bez jawnego type= (np. .td-title-input) dziedziczyłyby czarny kolor z UA.
   color-scheme + catch-all na input/textarea/select trzyma je zgodne z motywem. */
input, textarea, select, button { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — html[data-theme="dark"]. Nadpisuje tokeny + twarde kolory.
   Sidebar jest ciemny w obu trybach (spójne z designem). Append-only.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg: #0e0e11;
  --surface: #17171b;
  --surface-2: #1e1e23;
  --accent: #ededed;
  --accent-hover: #ffffff;
  --accent-fg: #17171b;
  --success: #34d399;
  --error: #f87171;
  --warning: #fbbf24;
  --sidebar-bg: #08080a;
  --border: #2a2a30;
  --border-soft: #232329;
  --border-strong: #3a3a42;
  --muted: #26262c;
  --focus-ring: rgba(255,255,255,.14);
  --text: #f2f2f3;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 24px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}

html { scrollbar-gutter: stable; }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #18181b; color: #fff; }

.serif { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -.02em; }

/* ─── REVEAL ─── */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { opacity: 0; animation: rise .6s var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 70ms); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

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

/* ─── AUTH ─── */
.auth-page { min-height: 100vh; display: flex; }
.auth-side {
  flex: 1.1; background: var(--sidebar-bg); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 56px; position: relative; overflow: hidden;
}
.auth-side::before {
  content: ""; position: absolute; inset: -40%;
  background:
    radial-gradient(42% 40% at 28% 30%, rgba(120,119,198,.22), transparent 60%),
    radial-gradient(38% 40% at 72% 68%, rgba(56,189,248,.13), transparent 60%),
    radial-gradient(30% 30% at 60% 20%, rgba(251,191,36,.10), transparent 60%);
  animation: aurora 18s ease-in-out infinite alternate;
  filter: blur(12px);
}
@keyframes aurora {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  50%  { transform: translate(4%, -3%) rotate(4deg) scale(1.06); }
  100% { transform: translate(-4%, 3%) rotate(-3deg) scale(1.02); }
}
.auth-side::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }
.auth-brand-row { display: flex; align-items: center; gap: 12px; }
.auth-brand-row img { width: 34px; height: 34px; }
.auth-brand-row span { font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.auth-hero h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 480;
  font-size: clamp(38px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.025em;
}
/* panel logowania jest ciemny w OBU motywach → kolor musi być stały jasny
   (token --border-strong robi się ciemny w dark i napis znikał) */
.auth-hero h1 em { font-style: italic; color: #d4d4d8; }
.auth-hero p { margin-top: 18px; color: rgba(255,255,255,.55); font-size: 15px; max-width: 400px; }
.auth-foot { color: rgba(255,255,255,.35); font-size: 12.5px; display: flex; gap: 18px; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.auth-card .sub { color: var(--text-2); font-size: 14px; margin-bottom: 28px; }
.demo-strip {
  margin-top: 26px; padding: 16px; border: 1px dashed var(--border);
  border-radius: 12px; background: var(--surface);
}
.demo-strip .ds-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.demo-strip .ds-btns { display: flex; gap: 8px; }
.demo-btn {
  flex: 1; height: 40px; border: 1px solid var(--border); border-radius: 9px;
  background: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .15s var(--ease-out), box-shadow .15s, border-color .15s;
}
.demo-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.demo-btn .dot { width: 8px; height: 8px; border-radius: 50%; }

@media (max-width: 860px) { .auth-side { display: none; } }

/* ─── APP LAYOUT ─── */
.app-page { min-height: 100vh; display: flex; align-items: stretch; }
.app-content { flex: 1; min-width: 0; padding: 28px 36px 60px; max-width: 1560px; }

/* ─── SIDEBAR ─── */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; flex-shrink: 0;
  transition: width .22s var(--ease-out), min-width .22s var(--ease-out);
}
.sidebar.collapsed { width: var(--sidebar-cw); min-width: var(--sidebar-cw); }
.sb-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 8px 10px 8px; }
.sb-logo { display: flex; align-items: center; gap: 10px; padding-left: 8px; white-space: nowrap; text-decoration: none; }
.sb-logo img { width: 26px; height: 26px; flex-shrink: 0; }
.sb-logo span { color: #fff; font-weight: 800; font-size: 14.5px; letter-spacing: .02em; }
.sidebar.collapsed .sb-logo span { display: none; }
.sidebar.collapsed .sb-logo { gap: 0; }
.sb-toggle {
  width: 36px; height: 36px; background: transparent; border: none;
  color: #52525b; cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; flex-shrink: 0; transition: color .15s, background .15s;
}
.sb-toggle:hover { color: #fff; background: #1c1c1c; }
.sb-toggle:focus { outline: none; }
.sb-toggle:focus-visible { outline: 2px solid #52525b; outline-offset: 2px; }
.sidebar.collapsed .sb-head { flex-direction: column; gap: 6px; }
.sidebar.collapsed .sb-logo { padding-left: 0; }

.sb-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 8px; display: flex; flex-direction: column; gap: 2px; }
/* cienki, dyskretny scrollbar w ciemnym sidebarze (gdy zakładek jest dużo) */
.sb-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
.sb-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
.sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px;
  color: rgba(255,255,255,.52); font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background .15s, color .15s;
  position: relative; user-select: none;
  border: none; background: transparent;
  font-family: inherit; text-align: left; text-decoration: none; width: 100%;
}
.sb-item:hover { background: #1a1a1a; color: rgba(255,255,255,.92); }
.sb-item.active { background: #232326; color: #fff; }
.sb-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 3px; background: #fff;
  animation: fade .3s;
}
.sb-icon { flex-shrink: 0; width: 19px; height: 19px; display: flex; align-items: center; justify-content: center; }
.sb-icon svg { display: block; width: 17px; height: 17px; }
.sidebar.collapsed .sb-label { display: none; }
.sidebar.collapsed .sb-item { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
.sidebar.collapsed .sb-item.active::before { display: none; }
.sidebar.collapsed .sb-item:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%); background: #1c1c1c; color: #fff;
  padding: 5px 11px; border-radius: 7px; font-size: 12px; white-space: nowrap; pointer-events: none;
  box-shadow: var(--shadow-md); z-index: 50;
}

.sb-footer { padding: 10px 8px 12px; border-top: 1px solid #1d1d20; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; overflow: hidden; white-space: nowrap; }
.sb-user .avatar { width: 28px; height: 28px; font-size: 11.5px; flex-shrink: 0; }
.sb-user-meta { line-height: 1.25; transition: opacity .12s; }
.sb-user-meta .n { color: #fff; font-size: 13px; font-weight: 700; }
.sb-user-meta .r { color: #7a7a85; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.sidebar.collapsed .sb-user { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .sb-user-meta { display: none; }
.sb-logout {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: 9px; color: rgba(255,255,255,.45); font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  border: none; background: transparent; font-family: inherit; width: 100%;
  transition: background .15s, color .15s;
}
.sb-logout:hover { background: #1a1a1a; color: #f87171; }
.sidebar.collapsed .sb-logout { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }

.sb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99; }
.sb-overlay.show { display: block; }

/* ─── AVATAR ─── */
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800; flex-shrink: 0;
  letter-spacing: .02em; user-select: none;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { border: 2px solid var(--surface); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }

/* ─── TOPBAR ─── */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.page-title { font-size: 25px; font-weight: 800; letter-spacing: -.025em; }
.page-title em { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; }
.page-sub { font-size: 13.5px; color: var(--text-2); margin-top: 3px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.search-pill {
  display: flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 8px 0 14px; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  color: var(--text-3); font-size: 13.5px; font-family: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.search-pill:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.search-pill svg { width: 15px; height: 15px; flex-shrink: 0; }
.search-pill .grow { flex: 1; text-align: left; }
.kbd {
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--text-2);
  background: var(--bg); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 6px; padding: 2px 7px;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  background: var(--accent); color: #fff; border: none; border-radius: 11px;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background .15s, transform .15s var(--ease-out), box-shadow .15s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn:disabled { background: var(--border-strong); cursor: not-allowed; transform: none; box-shadow: none; }
.btn svg { width: 15px; height: 15px; }
.btn.wide { width: 100%; height: 48px; font-size: 15px; }
.btn.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn.ghost:hover { background: var(--bg); }
.btn.danger { background: var(--error); }
.btn.danger:hover { background: #b91c1c; }
.btn.subtle { background: var(--muted); color: var(--text); }
.btn.subtle:hover { background: #e9e9eb; }
.btn.ghost.danger-ghost { color: var(--error); }
.btn.ghost.danger-ghost:hover { background: #fef2f2; border-color: #fecaca; }
.icon-btn {
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); cursor: pointer; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.icon-btn svg { width: 15px; height: 15px; }

/* ─── CARD ─── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.card-link { font-size: 13px; font-weight: 700; color: var(--text-2); text-decoration: none; transition: color .15s; }
.card-link:hover { color: var(--text); }

/* ─── STAT CARDS ─── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; position: relative; overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.stat-value {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: 36px; letter-spacing: -.02em; line-height: 1.15; margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.stat-value .unit { font-size: 19px; color: var(--text-3); font-style: italic; margin-left: 3px; }
.stat-foot { font-size: 12.5px; color: var(--text-2); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.stat-foot .up { color: var(--success); font-weight: 700; }
.stat-card.inverse { background: var(--accent); border-color: var(--accent); color: #fff; }
.stat-card.inverse .stat-label { color: rgba(255,255,255,.45); }
.stat-card.inverse .stat-foot { color: rgba(255,255,255,.55); }
.stat-card.inverse::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
}

/* ─── DASHBOARD GRID ─── */
.dash-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ─── CHARTS ─── */
.chart-wrap { position: relative; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-svg .bar { transform-origin: bottom; transform: scaleY(0); animation: bar-in .7s var(--ease-out) forwards; }
@keyframes bar-in { to { transform: scaleY(1); } }
.chart-svg .axis-label { font-size: 10.5px; font-weight: 600; fill: var(--text-3); font-family: 'Plus Jakarta Sans', sans-serif; }
.chart-svg .val-label { font-size: 11px; font-weight: 800; fill: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; }
.chart-svg .area-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.chart-svg .area-fill { opacity: 0; animation: fade .8s .5s forwards; }
.draw-line { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); animation: draw 1.4s var(--ease-out) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.chart-legend .li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 3px; }

.funnel-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.funnel-row .fl { width: 128px; font-size: 12.5px; font-weight: 700; color: var(--text-2); flex-shrink: 0; }
.funnel-row .ftrack { flex: 1; height: 26px; background: var(--border-soft); border-radius: 7px; overflow: hidden; }
.funnel-row .fbar {
  height: 100%; border-radius: 7px; min-width: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: grow-x .8s var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 90ms);
}
@keyframes grow-x { to { transform: scaleX(1); } }
.funnel-row .fv { width: 34px; text-align: right; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ─── FEED ─── */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.feed-item:last-child { border-bottom: none; padding-bottom: 2px; }
.feed-item:first-child { padding-top: 2px; }
.feed-body { flex: 1; min-width: 0; }
.feed-text { font-size: 13.5px; line-height: 1.45; }
.feed-text b { font-weight: 700; }
.feed-text a { color: var(--text); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--border); }
.feed-text a:hover { border-color: var(--text); }
.feed-meta { font-size: 12px; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.feed-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border-soft);
}
.feed-ico svg { width: 14px; height: 14px; color: var(--text-2); }

/* ─── LIST ROWS (dashboard tasks/events) ─── */
.mini-list { display: flex; flex-direction: column; }
.mini-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 8px;
  border-radius: 10px; text-decoration: none; color: inherit;
  transition: background .13s;
}
.mini-row:hover { background: var(--bg); }
.mini-main { flex: 1; min-width: 0; }
.mini-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-date { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini-date.overdue { color: var(--error); }
.date-chip {
  width: 42px; height: 42px; border-radius: 11px; background: var(--bg); border: 1px solid var(--border-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
}
.date-chip .d { font-size: 15px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.date-chip .m { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-top: 2px; }

/* ─── BADGES ─── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-gray { background: var(--muted); color: #52525b; }
.badge-ok { background: #dcfce7; color: #15803d; }
.badge-warn { background: #fef3c7; color: #b45309; }
.badge-err { background: #fee2e2; color: #b91c1c; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }

.prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.prio .pdot { width: 7px; height: 7px; border-radius: 50%; }
.prio.wysoki { color: #b91c1c; } .prio.wysoki .pdot { background: #dc2626; }
.prio.normalny { color: #b45309; } .prio.normalny .pdot { background: #f59e0b; }
.prio.niski { color: #52525b; } .prio.niski .pdot { background: #a1a1aa; }

/* ─── FILTERS / SEGMENTED ─── */
.filters { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button {
  height: 32px; padding: 0 14px; border: none; border-radius: 8px;
  background: transparent; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--text-2); cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 7px;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.seg .cnt { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
.f-select {
  width: auto; height: 38px; padding: 0 32px 0 12px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  cursor: pointer; font-family: inherit; color: var(--text);
  appearance: none; -webkit-appearance: none; outline: none; transition: border-color .15s;
}
.f-select:focus { border-color: var(--accent); }
.f-search {
  height: 38px; padding: 0 12px 0 34px; font-size: 13.5px; border: 1px solid var(--border);
  border-radius: 10px; font-family: inherit; outline: none; width: 300px; max-width: 100%;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 11px center;
  transition: border-color .15s, box-shadow .15s;
}
.f-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ─── KANBAN ─── */
.board-scroll { overflow-x: auto; padding-bottom: 16px; margin: 0 -4px; }
.board { display: flex; gap: 12px; align-items: flex-start; padding: 0 4px; min-width: min-content; }
.kcol { width: 264px; min-width: 264px; }
.kcol-hd { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.kcol-dot { width: 8px; height: 8px; border-radius: 50%; }
.kcol-title { font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.kcol-count { font-size: 11.5px; font-weight: 700; color: var(--text-3); background: var(--surface); border: 1px solid var(--border); padding: 1px 8px; border-radius: 20px; font-variant-numeric: tabular-nums; }
.kcol-sum { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.kcol-body {
  display: flex; flex-direction: column; gap: 9px; min-height: 60px;
  border-radius: 14px; padding: 4px; transition: background .15s, outline-color .15s;
  outline: 2px dashed transparent; outline-offset: -2px;
}
.kcol-body.drag-over { background: rgba(24,24,27,.045); outline-color: var(--border-strong); }
.kcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  padding: 14px 15px; cursor: grab; user-select: none; position: relative;
  transition: transform .18s var(--ease-out), box-shadow .18s, border-color .18s, opacity .15s;
  text-decoration: none; color: inherit; display: block;
}
.kcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.kcard.dragging { opacity: .45; transform: rotate(2deg) scale(.98); cursor: grabbing; box-shadow: var(--shadow-lg); }
.kcard-name { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.kcard-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.kcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }
.kcard-value { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kcard-value.zero { color: var(--text-3); font-weight: 600; }
.kcard-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.kcard-flag { position: absolute; top: 14px; right: 13px; }

/* ─── TABLES ─── */
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; padding: 11px 16px;
  font-size: 11px; font-weight: 800; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap;
}
td { padding: 13px 16px; font-size: 13.5px; border-bottom: 1px solid var(--border-soft); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--surface-2); }
tr.clickable { cursor: pointer; }
.c-dash { color: var(--text-3); }
.t-num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ─── TASKS ─── */
.task-group-hd { display: flex; align-items: center; gap: 9px; margin: 22px 0 10px; }
.task-group-hd:first-child { margin-top: 0; }
.task-group-hd .h { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.task-group-hd .line { flex: 1; height: 1px; background: var(--border); }
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-row {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  padding: 12px 16px; transition: transform .16s var(--ease-out), box-shadow .16s, opacity .3s;
}
.task-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.task-row.done { opacity: .55; }
.task-row.done .task-title { text-decoration: line-through; color: var(--text-2); }
.task-check {
  width: 22px; height: 22px; border-radius: 7px; border: 1.8px solid var(--border-strong);
  background: var(--surface); cursor: pointer; flex-shrink: 0; position: relative;
  transition: background .18s, border-color .18s, transform .12s;
  display: flex; align-items: center; justify-content: center;
}
.task-check:hover { border-color: var(--accent); transform: scale(1.08); }
.task-check svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(.4); transition: all .18s var(--ease-out); }
.task-check.on { background: var(--accent); border-color: var(--accent); }
.task-check.on svg { opacity: 1; transform: scale(1); }
.task-main { flex: 1; min-width: 0; }
.task-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.task-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.task-sub a { color: var(--text-2); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--border); }
.task-sub a:hover { color: var(--text); border-color: var(--text); }
.task-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.task-due { font-size: 12.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-due.overdue { color: var(--error); }
.assignee-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; padding: 3px 10px 3px 4px;
  border-radius: 20px; background: var(--bg); border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.assignee-chip .avatar { width: 20px; height: 20px; font-size: 9px; }

/* ─── CALENDAR ─── */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-month { font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 500; letter-spacing: -.02em; text-transform: capitalize; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.cal-dow { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: center; padding: 4px 0 8px; }
.cal-day {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  min-height: 104px; padding: 8px; cursor: pointer; position: relative;
  transition: border-color .15s, box-shadow .15s, transform .15s var(--ease-out);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.cal-day:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); z-index: 1; }
.cal-day.other { background: transparent; border-color: var(--border-soft); }
.cal-day.other .cal-num { color: var(--text-3); }
.cal-num { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.cal-day.today .cal-num { background: var(--accent); color: #fff; }
.cal-chip {
  font-size: 11px; font-weight: 700; padding: 2.5px 7px; border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 3px solid transparent;
}
.cal-more { font-size: 10.5px; font-weight: 700; color: var(--text-3); padding-left: 7px; }

.day-panel-list { display: flex; flex-direction: column; gap: 10px; }
.day-ev {
  display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); align-items: flex-start;
}
.day-ev .bar { width: 4px; border-radius: 4px; align-self: stretch; flex-shrink: 0; }
.day-ev .t { font-size: 13.5px; font-weight: 800; }
.day-ev .s { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* ─── CLIENT DETAIL ─── */
.detail-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
.detail-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.back-link {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
  color: var(--text-2); text-decoration: none; margin-bottom: 10px; transition: color .15s, gap .15s;
}
.back-link:hover { color: var(--text); gap: 10px; }
.client-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.client-hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.client-hero .meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); font-weight: 600; }

.info-rows { display: flex; flex-direction: column; }
.info-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--text-2); font-weight: 600; flex-shrink: 0; }
.info-row .v { font-weight: 700; text-align: right; word-break: break-word; }
.info-row .v a { color: inherit; }

/* ─── TIMELINE ─── */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 20px; }
.tl-item:last-child { padding-bottom: 4px; }
.tl-dot {
  position: absolute; left: -22px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong); z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.tl-dot.accent { border-color: var(--accent); background: var(--accent); }
.tl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tl-author { font-size: 13px; font-weight: 800; }
.tl-type { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.tl-time { font-size: 11.5px; color: var(--text-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.tl-body { font-size: 13.5px; color: var(--text); margin-top: 4px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.tl-item.system .tl-body { color: var(--text-2); font-style: italic; }

.note-box { display: flex; gap: 10px; margin-bottom: 20px; }
.note-box textarea {
  flex: 1; min-height: 44px; max-height: 160px; padding: 11px 14px; resize: vertical;
  border: 1px solid var(--border); border-radius: 11px; font-family: inherit; font-size: 13.5px;
  outline: none; transition: border-color .15s, box-shadow .15s; background: var(--surface);
}
.note-box textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ─── AUDIT STEPPER ─── */
.audit-steps { display: flex; flex-direction: column; }
.audit-step { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.audit-step:last-child { padding-bottom: 0; }
.audit-step::before {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px;
  background: var(--border); border-radius: 2px;
}
.audit-step:last-child::before { display: none; }
.audit-step.done::before { background: var(--accent); }
.as-check {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-strong);
  background: var(--surface); cursor: pointer; flex-shrink: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease-out); padding: 0;
}
.as-check svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(.4); transition: all .2s var(--ease-out); }
.as-check:hover { border-color: var(--accent); transform: scale(1.07); }
.audit-step.done .as-check { background: var(--accent); border-color: var(--accent); }
.audit-step.done .as-check svg { opacity: 1; transform: scale(1); }
.as-main { flex: 1; padding-top: 3px; }
.as-title { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.audit-step.done .as-title { color: var(--text-2); }
.as-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.audit-progress { height: 6px; background: var(--border-soft); border-radius: 6px; overflow: hidden; margin: 6px 0 18px; }
.audit-progress .p { height: 100%; background: var(--accent); border-radius: 6px; transition: width .6s var(--ease-out); }

/* ─── FORM ─── */
.fg { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], input[type=time], textarea, select.inp {
  width: 100%; height: 44px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 11px;
  font-size: 14px; font-family: inherit; color: var(--text);
  background: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
}
select.inp {
  padding-right: 34px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  cursor: pointer;
}
textarea { height: auto; padding: 11px 13px; resize: vertical; min-height: 88px; }
input:focus, select.inp:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
input.inp-err { border-color: var(--error) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important; }
.fg-row { display: grid; gap: 14px; margin-bottom: 16px; }
.fg-row.col2 { grid-template-columns: 1fr 1fr; }
.fg-row .fg { margin: 0; }
.err-box {
  background: #fef2f2; border: 1px solid #fecaca; color: var(--error);
  padding: 10px 13px; border-radius: 10px; font-size: 13.5px; display: none; margin-bottom: 14px;
}
.err-box.show { display: block; animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.pick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pick {
  height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--text-2); cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.pick:hover { border-color: var(--border-strong); color: var(--text); }
.pick.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pick .avatar { width: 20px; height: 20px; font-size: 9px; }

/* ─── DRAWER ─── */
#drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(15,15,15,.32); z-index: 499; backdrop-filter: blur(2px); animation: fade .2s; }
.drawer {
  position: fixed; top: 0; right: 0; width: 430px; max-width: 100vw; height: 100vh;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg); z-index: 500;
  transform: translateX(105%); transition: transform .3s var(--ease-out);
  overflow-y: auto; display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 26px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.drawer-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.drawer-close {
  width: 32px; height: 32px; border: none; border-radius: 9px;
  background: var(--bg); cursor: pointer; font-size: 15px; color: var(--text-2);
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.drawer-close:hover { background: var(--border); color: var(--text); }
.drawer-body { padding: 24px 26px; flex: 1; }
.drawer-foot { padding: 18px 26px; border-top: 1px solid var(--border); display: flex; gap: 10px; position: sticky; bottom: 0; background: var(--surface); }
.drawer-foot .btn { flex: 1; }

/* ─── TASK DETAIL ─── */
.td-title-input {
  width: 100%; border: none !important; box-shadow: none !important;
  font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-family: inherit;
  padding: 0 !important; height: auto !important; background: transparent;
  outline: none; margin-bottom: 4px;
}
.td-meta { display: flex; flex-direction: column; margin: 14px 0 6px; }
.td-meta-row {
  display: flex; align-items: center; gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--border-soft); min-height: 44px;
}
.td-meta-row:last-child { border-bottom: none; }
.td-meta-row .k {
  width: 108px; flex-shrink: 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-3);
}
.td-meta-row .v { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-meta-row input, .td-meta-row select.inp { height: 36px; border-color: transparent; background: transparent; padding-left: 8px; margin-left: -8px; }
.td-meta-row input:hover, .td-meta-row select.inp:hover { border-color: var(--border); background: var(--surface); }
.td-meta-row input:focus, .td-meta-row select.inp:focus { border-color: var(--accent); background: var(--surface); }
.td-desc {
  width: 100%; border: 1px solid transparent; border-radius: 10px; background: transparent;
  font-family: inherit; font-size: 13.5px; color: var(--text); line-height: 1.55;
  padding: 8px; margin-left: -8px; resize: vertical; min-height: 60px; outline: none;
  transition: border-color .15s, background .15s;
}
.td-desc:hover { border-color: var(--border); background: var(--surface); }
.td-desc:focus { border-color: var(--accent); background: var(--surface); }
.td-notes { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.td-note { display: flex; gap: 10px; }
.td-note .avatar { margin-top: 2px; }
.td-note-body { flex: 1; min-width: 0; }
.td-note-head { display: flex; align-items: baseline; gap: 8px; }
.td-note-author { font-size: 12.5px; font-weight: 800; }
.td-note-time { font-size: 11.5px; color: var(--text-3); }
.td-note-text {
  font-size: 13.5px; line-height: 1.5; margin-top: 3px;
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: 4px 12px 12px 12px; padding: 9px 12px;
  white-space: pre-wrap; word-break: break-word;
}

/* ─── CONFIRM ─── */
.confirm-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,15,15,.45);
  z-index: 700; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(2px);
}
.confirm-overlay.show { display: flex; animation: fade .15s; }
.confirm-box {
  background: var(--surface); border-radius: 18px; padding: 28px;
  width: 100%; max-width: 420px; box-shadow: var(--shadow-lg);
  animation: pop-in .25s var(--ease-out);
}
@keyframes pop-in { from { opacity: 0; transform: scale(.94) translateY(8px); } }
.confirm-msg { font-size: 14.5px; margin-bottom: 22px; line-height: 1.55; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.confirm-actions .btn { height: 40px; padding: 0 18px; font-size: 13.5px; }

/* ─── CMD-K PALETTE ─── */
.cmdk-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,15,15,.4);
  z-index: 900; padding: 12vh 16px 16px; justify-content: center; align-items: flex-start;
  backdrop-filter: blur(3px);
}
.cmdk-overlay.show { display: flex; animation: fade .13s; }
.cmdk {
  width: 100%; max-width: 560px; background: var(--surface); border-radius: 18px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: pop-in .22s var(--ease-out);
}
.cmdk-input-row { display: flex; align-items: center; gap: 11px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.cmdk-input-row svg { width: 17px; height: 17px; color: var(--text-3); flex-shrink: 0; }
.cmdk-input-row input {
  flex: 1; border: none !important; height: auto; padding: 0; font-size: 16px;
  font-family: inherit; outline: none; background: transparent; box-shadow: none !important;
}
.cmdk-list { max-height: 340px; overflow-y: auto; padding: 8px; }
.cmdk-group { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 10px 12px 5px; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 11px; cursor: pointer; text-decoration: none; color: inherit;
}
.cmdk-item.sel { background: var(--bg); }
.cmdk-item .ci-ico {
  width: 30px; height: 30px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cmdk-item.sel .ci-ico { background: var(--surface); }
.cmdk-item .ci-ico svg { width: 14px; height: 14px; color: var(--text-2); }
.cmdk-item .ci-main { flex: 1; min-width: 0; }
.cmdk-item .ci-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item .ci-sub { font-size: 11.5px; color: var(--text-3); }
.cmdk-empty { padding: 28px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.cmdk-foot { display: flex; gap: 14px; padding: 10px 20px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 11.5px; color: var(--text-3); font-weight: 600; }

/* ─── TOAST ─── */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: #111113; color: #fff; padding: 13px 22px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; z-index: 9999;
  box-shadow: var(--shadow-lg); white-space: nowrap;
  display: flex; align-items: center; gap: 9px;
  animation: toast-up .35s var(--ease-out);
}
.toast svg { width: 15px; height: 15px; color: #4ade80; }
@keyframes toast-up { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.97); } }
.toast.hide { transition: opacity .25s, transform .25s; opacity: 0; transform: translateX(-50%) translateY(8px); }

/* ─── EMPTY STATE ─── */
.empty { text-align: center; padding: 38px 20px; color: var(--text-3); }
.empty .e-ico {
  width: 46px; height: 46px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.empty .e-ico svg { width: 20px; height: 20px; }
.empty .e-t { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.empty .e-s { font-size: 12.5px; margin-top: 3px; }

/* ─── SKELETON ─── */
.skel { position: relative; overflow: hidden; background: var(--border-soft); border-radius: 8px; min-height: 14px; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ─── DEMO RIBBON ─── */
.demo-ribbon {
  position: fixed; bottom: 16px; right: 16px; z-index: 60;
  background: #111113; color: #fbbf24; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 20px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 7px; opacity: .92;
}
.demo-ribbon .pulse { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ─── RESPONSIVE ─── */
@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid, .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .fg-row.col2 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value { font-size: 28px; }
  .search-pill { min-width: 0; }
  .topbar .search-pill { display: none; }
  .search-pill .grow, .search-pill .kbd { display: none; }
  .cal-day { min-height: 64px; }
  .cal-chip { display: none; }
  .cal-day .cal-dots { display: flex; gap: 3px; flex-wrap: wrap; }
  .task-right { gap: 8px; }
  .task-due { display: none; }
}
@media (min-width: 768px) { .cal-dots { display: none; } }
.cal-dots .cdot { width: 6px; height: 6px; border-radius: 50%; }

/* ─── OŚ CZASU — zwijana ─── */
.tl-hd {
  width: 100%; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.tl-hd-right { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); }
.tl-chev { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
.tl-hd[aria-expanded="true"] .tl-chev { transform: rotate(180deg); }
.tl-hd:hover .tl-hd-right { color: var(--text-2); }
.timeline.collapsed { display: none; }

/* ─── DOKUMENTY KLIENTA ─── */
.card-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-2);
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.upload-zone {
  border: 2px dashed var(--border); border-radius: 12px; padding: 22px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--bg); }
.upload-zone.busy { opacity: .55; pointer-events: none; }
.upload-zone input { display: none; }
.upload-zone .uz-ic { width: 24px; height: 24px; color: var(--text-3); margin: 0 auto 7px; display: block; }
.upload-zone .uz-label { font-size: 13px; color: var(--text-2); }
.upload-zone .uz-label b { color: var(--text); font-weight: 700; }

.doc-list { margin-top: 6px; }
.doc-list:empty { display: none; }
.doc-file-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border-soft);
}
.doc-file-row:last-child { border-bottom: none; }
.doc-file-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.doc-file-name .df-ic { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-3); }
.doc-file-name .df-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-file-name .df-meta { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; }
.doc-file-acts { display: flex; gap: 12px; flex-shrink: 0; }
.doc-file-acts .df-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-2); transition: color .12s;
}
.doc-file-acts .df-link:hover { color: var(--text); }
.doc-file-acts .df-link.danger:hover { color: var(--error); }
.doc-empty { font-size: 13px; color: var(--text-2); margin-top: 14px; }

/* podgląd dokumentu w stronie */
.preview-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 800; align-items: center; justify-content: center; padding: 24px;
}
.preview-overlay.show { display: flex; }
.preview-box {
  position: relative; background: #fff; border-radius: 14px; padding: 14px;
  width: 100%; max-width: 940px; height: 86vh; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.preview-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-right: 20px; }
.preview-title { font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.preview-tools { display: flex; gap: 8px; flex-shrink: 0; }
.preview-content { flex: 1; min-height: 0; overflow: auto; background: var(--bg); border-radius: 8px; }
.preview-content img { max-width: 100%; display: block; margin: 0 auto; }
.preview-content iframe { width: 100%; height: 100%; border: none; }
.preview-close {
  position: absolute; top: -14px; right: -14px; width: 32px; height: 32px;
  border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 1; font-size: 15px;
}
.preview-close:hover { background: var(--accent-hover); }
@media (max-width: 600px) {
  .preview-box { height: 90vh; padding: 10px; }
  .preview-bar { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   PORTAL KLIENTA — rozszerza system panelu (te same tokeny/klasy).
   Nowe klasy z prefiksem .portal-* / .ph-* / .pa-* — nie kolidują z panelem.
   ══════════════════════════════════════════════════════════════ */

/* wyróżnik portalu w stopce sidebara */
.sb-portal-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #8a8a95; padding: 0 10px 8px 12px; white-space: nowrap;
}
.sidebar.collapsed .sb-portal-tag { display: none; }

/* ─── HERO: status współpracy (sygnaturowy element) ─── */
.portal-hero {
  background: var(--accent); color: #fff; border-radius: var(--radius);
  padding: 30px 32px; position: relative; overflow: hidden; margin-bottom: 14px;
}
.portal-hero::after {
  content: ""; position: absolute; right: -50px; top: -50px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
}
.portal-hero > * { position: relative; z-index: 1; }
.ph-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ph-phase { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(27px, 3.4vw, 37px); letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; }
.ph-phase em { font-style: italic; color: #d4d4d8; }   /* hero portalu zawsze ciemny → stały jasny */
.ph-desc { color: rgba(255,255,255,.62); font-size: 14px; margin-top: 9px; max-width: 540px; line-height: 1.5; }

/* nagłówek etapu: tytuł + licznik faz */
.ph-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ph-badge {
  flex-shrink: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 19px;
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 5px 14px; line-height: 1; margin-top: 2px;
}
.ph-badge span { color: rgba(255,255,255,.42); }

/* pasek postępu współpracy — JEDNA ciągła linia + wypełnienie do bieżącego etapu */
.ph-steps { position: relative; display: flex; margin-top: 30px; }
.ph-track {
  position: absolute; top: 6px; left: calc(50% / var(--n)); right: calc(50% / var(--n));
  height: 3px; background: rgba(255,255,255,.14); border-radius: 3px; overflow: hidden;
}
.ph-track-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  width: calc(var(--cur) / (var(--n) - 1) * 100%);
  background: linear-gradient(90deg, #a1a1aa, #ffffff);
  border-radius: 3px; transform-origin: left; transform: scaleX(0);
  animation: phFill .9s var(--ease-out) .3s forwards;
}
@keyframes phFill { to { transform: scaleX(1); } }
.ph-step { flex: 1; position: relative; padding-top: 16px; min-width: 0; }
.ph-step .dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; z-index: 1;
  animation: fade .5s var(--ease-out) both; animation-delay: calc(var(--i,0) * 130ms + .25s);
}
.ph-step .dot svg {
  width: 9px; height: 9px; color: var(--accent); stroke-width: 3.5;
  opacity: 0; animation: fade .3s var(--ease-out) forwards; animation-delay: calc(var(--i,0) * 130ms + .55s);
}
.ph-step.done .dot { background: #fff; }
.ph-step.current .dot {
  background: #fff;
  animation: fade .5s var(--ease-out) both, phPulse 2.6s ease-in-out 1.3s infinite;
  animation-delay: calc(var(--i,0) * 130ms + .25s), 1.3s;
}
@keyframes phPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.30); }
  50%      { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
}
.ph-step .pl {
  font-size: 12px; font-weight: 700; text-align: center; margin-top: 14px;
  color: rgba(255,255,255,.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .3s;
}
.ph-step.done .pl { color: rgba(255,255,255,.82); }
.ph-step.current .pl { color: #fff; }

/* ─── siatka portalu ─── */
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px) { .portal-grid { grid-template-columns: 1fr; } }

/* ─── mini-progres audytu (Start) ─── */
.pa-pills { display: flex; gap: 6px; margin: 8px 0 12px; }
.pa-pill { flex: 1; height: 7px; border-radius: 7px; background: var(--border-soft); }
.pa-pill.done { background: var(--accent); }
.pa-next { font-size: 12.5px; color: var(--text-2); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.pa-next .bdot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex-shrink: 0; }
.pa-next.ok { color: var(--success); }
.pa-next.ok .bdot { background: var(--success); }

/* ─── stepper audytu read-only (portal-audyty) ─── */
.audit-steps.static .as-check { cursor: default; }
.audit-steps.static .as-check:hover { transform: none; border-color: var(--border-strong); }
.audit-steps.static .audit-step.done .as-check:hover { border-color: var(--accent); }

/* ─── CTA kontakt ─── */
.portal-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.portal-cta .t { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.portal-cta .t b { color: var(--text); font-weight: 800; }

/* ─── karta kontaktu ─── */
.contact-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.contact-line:last-child { border-bottom: none; }
.contact-line .ci {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border-soft); color: var(--text-2);
}
.contact-line .ci svg { width: 16px; height: 16px; }
.contact-line .cm .k { font-size: 11.5px; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.contact-line .cm .v { font-size: 14px; font-weight: 700; }
.contact-line .cm .v a { color: inherit; text-decoration: none; }
.contact-line .cm .v a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   CZATY — dwupanelowy komunikator (portal + zespół). Append-only.
   ══════════════════════════════════════════════════════════════ */

/* strona czatu wypełnia widok; slim topbar zostaje nad spodem */
.chat-main { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-bottom: 20px; }
.chat-main .topbar { margin-bottom: 16px; flex-shrink: 0; }
.chat-host { flex: 1; min-height: 0; display: flex; }

.chat {
  flex: 1; min-height: 0; position: relative;
  display: grid; grid-template-columns: minmax(298px, 336px) 1fr; gap: 16px;
}

/* ── panel listy rozmów ── */
.chat-list {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.chat-list-hd { padding: 16px 16px 12px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.chat-list-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.chat-search { position: relative; margin-top: 12px; }
.chat-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }
.chat-search input {
  width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); font-size: 13.5px; font-family: inherit; color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.chat-search input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--focus-ring); }

.chat-convs { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.chat-group-label { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 13px 10px 6px; }
.chat-group-label.first { padding-top: 4px; }

.chat-conv {
  display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 12px;
  cursor: pointer; border: none; background: transparent; width: 100%; text-align: left;
  font-family: inherit; position: relative; transition: background .15s;
  opacity: 0; animation: rise .5s var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 45ms);
}
.chat-conv:hover { background: var(--bg); }
.chat-conv.active { background: var(--muted); }
.chat-conv.active::before {
  content: ""; position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 3px; background: var(--accent); animation: fade .25s;
}
.chat-conv .avatar { width: 40px; height: 40px; font-size: 14px; }
.chat-conv-main { flex: 1; min-width: 0; }
.chat-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-conv-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-time { font-size: 11px; color: var(--text-3); flex-shrink: 0; font-weight: 600; }
.chat-conv-sub { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-conv-sub .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conv.unread .chat-conv-sub .txt { color: var(--text); font-weight: 600; }
.chat-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  animation: pop-in .25s var(--ease-out);
}

/* ── panel wątku ── */
.chat-thread {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.chat-th-hd { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.chat-back { display: none; width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--bg); color: var(--text-2); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-back svg { width: 18px; height: 18px; }
.chat-back:hover { background: var(--muted); color: var(--text); }
.chat-th-hd .avatar { width: 38px; height: 38px; font-size: 13px; }
.chat-th-meta { min-width: 0; flex: 1; }
.chat-th-name { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-th-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; display: flex; align-items: center; gap: 6px; }
.chat-th-sub .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.chat-th-sub .live-dot.on { background: var(--success); animation: livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 50% { box-shadow: 0 0 0 5px rgba(22,163,74,0); } }

.chat-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 18px 10px; display: flex; flex-direction: column; }
.chat-daysep { align-self: center; margin: 12px 0 12px; }
.chat-daysep span { font-size: 11px; font-weight: 700; color: var(--text-3); background: var(--bg); padding: 4px 12px; border-radius: 999px; }

.msg { position: relative; display: flex; flex-direction: column; max-width: 76%; margin-top: 2px; animation: msgIn .38s var(--ease-out) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.them { align-self: flex-start; align-items: flex-start; }
.msg.cont { margin-top: 1px; }
.msg-name { font-size: 11.5px; font-weight: 700; margin: 7px 0 2px 12px; color: var(--text-2); }
.msg.cont .msg-name { display: none; }
.msg-bubble { position: relative; padding: 8px 12px; border-radius: 16px; box-shadow: var(--shadow-sm); max-width: 100%; }
.msg-txt { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.them .msg-bubble { background: var(--muted); color: var(--text); border-bottom-left-radius: 5px; }
.msg.me .msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg.them.cont .msg-bubble { border-top-left-radius: 6px; }
.msg.me.cont .msg-bubble { border-top-right-radius: 6px; }
.msg-time { position: absolute; bottom: 1px; font-size: 10px; color: var(--text-3); white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.msg.them .msg-time { left: 100%; margin-left: 8px; }
.msg.me .msg-time { right: 100%; margin-right: 8px; }
.msg:hover .msg-time { opacity: 1; }
.msg.pending .msg-bubble { opacity: .55; }
.msg.failed .msg-bubble { outline: 1px solid var(--error); outline-offset: 1px; }

/* potwierdzenia odczytu: ✓/✓✓ przy czasie (hover) + wiersz statusu pod ostatnią moją wiadomością */
.msg-tick { display: inline-block; margin-left: 3px; letter-spacing: -3px; font-weight: 800; opacity: .7; }
.msg-tick.read { color: var(--accent); opacity: 1; }
.msg-receipt { align-self: flex-end; font-size: 10.5px; font-weight: 600; color: var(--text-3); margin: 3px 6px 4px 0; animation: msgIn .3s var(--ease-out) both; }

/* załączniki w bąbelku */
.msg-bubble.img { padding: 4px; }
.msg-bubble.img .msg-txt { padding: 4px 8px 5px; }
.msg-bubble.file { padding: 6px 8px; }
.msg-bubble.file .msg-txt { padding: 4px 4px 2px; }
.msg-img { display: block; max-width: min(260px, 60vw); max-height: 300px; width: auto; height: auto; border-radius: 12px; cursor: zoom-in; background: #e7e5e4; }
.msg-img.ph { width: 200px; height: 150px; animation: shimmer-bg 1.3s linear infinite; background: linear-gradient(100deg, var(--muted) 30%, #f6f6f6 50%, var(--muted) 70%); background-size: 200% 100%; cursor: default; }
@keyframes shimmer-bg { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.msg-img.err { min-width: 120px; }
.msg-file { display: flex; align-items: center; gap: 10px; border: none; background: none; padding: 2px; cursor: pointer; font-family: inherit; text-align: left; color: inherit; width: 100%; }
.msg-file .fic { width: 38px; height: 38px; border-radius: 10px; background: rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.msg.me .msg-file .fic { background: rgba(255,255,255,.16); }
.msg-file .fic svg { width: 17px; height: 17px; }
.msg-file .fmeta { min-width: 0; display: flex; flex-direction: column; }
.msg-file .fname { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.msg-file .fsize { font-size: 11px; opacity: .7; }

/* akcje na własnej wiadomości (edytuj/usuń) */
.msg-acts { position: absolute; top: -11px; right: 2px; display: none; gap: 1px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 2px; box-shadow: var(--shadow-sm); z-index: 3; }
.msg.me:hover .msg-acts { display: flex; }
.msg-acts button { width: 26px; height: 26px; border: none; background: none; border-radius: 6px; color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.msg-acts button:hover { background: var(--bg); color: var(--text); }
.msg-acts button.del:hover { color: var(--error); }
.msg-acts button svg { width: 14px; height: 14px; }

/* edycja inline */
.msg-edit { display: flex; flex-direction: column; gap: 7px; min-width: 220px; }
.msg-edit textarea { width: 100%; min-height: 40px; max-height: 140px; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.4; resize: none; outline: none; }
.msg-edit textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.msg-edit-btns { display: flex; gap: 6px; justify-content: flex-end; }
.msg-edit-btns button { height: 30px; padding: 0 12px; border-radius: 8px; border: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; }
.msg-edit-btns .me-cancel { background: var(--muted); color: var(--text); }
.msg-edit-btns .me-save { background: var(--accent); color: #fff; }

/* strefa pisania */
.chat-compose { flex-shrink: 0; padding: 12px 14px 14px; border-top: 1px solid var(--border-soft); display: flex; align-items: flex-end; gap: 10px; }
.chat-compose textarea {
  flex: 1; min-height: 44px; max-height: 140px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg); font-family: inherit; font-size: 14px; line-height: 1.4; color: var(--text); resize: none; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.chat-compose textarea:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--focus-ring); }
.chat-send {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; border: none; cursor: pointer;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: transform .15s var(--ease-out), background .15s, opacity .15s;
}
.chat-send svg { width: 18px; height: 18px; }
.chat-send:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); }
.chat-send:active:not(:disabled) { transform: scale(.93); }
.chat-send:disabled { opacity: .38; cursor: default; }

/* stan pusty / brak wyboru */
.chat-blank { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; color: var(--text-3); }
.chat-blank .cb-ico { width: 58px; height: 58px; border-radius: 17px; background: var(--bg); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.chat-blank .cb-ico svg { width: 26px; height: 26px; color: var(--text-3); }
.chat-blank .cb-t { font-size: 15px; font-weight: 800; color: var(--text-2); }
.chat-blank .cb-s { font-size: 13px; margin-top: 5px; max-width: 320px; line-height: 1.5; }

/* mobile: jeden panel na raz */
@media (max-width: 767px) {
  .chat { grid-template-columns: 1fr; gap: 0; }
  .chat-thread { display: none; }
  .chat.thread-open .chat-list { display: none; }
  .chat.thread-open .chat-thread { display: flex; }
  .chat-back { display: flex; }
  .msg { max-width: 85%; }
}

/* ── narzędzia nagłówka wątku (dźwięk) ── */
.chat-th-tools { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.chat-icon-btn { width: 34px; height: 34px; border-radius: 9px; border: none; background: transparent; color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.chat-icon-btn:hover { background: var(--bg); color: var(--text-2); }
.chat-icon-btn svg { width: 18px; height: 18px; }

/* ── przycisk załącznika w composerze ── */
.chat-attach { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; border: none; cursor: pointer; background: var(--bg); color: var(--text-2); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .15s var(--ease-out); }
.chat-attach:hover { background: var(--muted); color: var(--text); }
.chat-attach:active { transform: scale(.93); }
.chat-attach svg { width: 19px; height: 19px; }
.chat-msgs.chat-dragover { outline: 2px dashed var(--accent); outline-offset: -8px; background: rgba(24,24,27,.02); }

/* ── stopka wątku: szkic załączników + panel GIF nad compose ── */
.chat-foot { flex-shrink: 0; position: relative; border-top: 1px solid var(--border-soft); }
.chat-foot .chat-compose { border-top: none; }
.chat-gifbtn { font-size: 11px; font-weight: 800; letter-spacing: .03em; font-family: inherit; }
.chat-draft { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px 0; }
.draft-item { position: relative; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 12px; padding: 6px 28px 6px 8px; max-width: 240px; }
.draft-item.img { padding: 0; overflow: hidden; }
.draft-item.img img { display: block; width: 64px; height: 64px; object-fit: cover; }
.draft-item .fic { width: 28px; height: 28px; border-radius: 8px; background: var(--muted); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.draft-item .fic svg { width: 14px; height: 14px; }
.draft-item .fmeta { min-width: 0; display: flex; flex-direction: column; }
.draft-item .fname { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-item .fsize { font-size: 10.5px; color: var(--text-3); }
.draft-x { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(24,24,27,.65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.draft-x:hover { background: rgba(24,24,27,.85); }
.draft-x svg { width: 10px; height: 10px; }
.gif-pop { position: absolute; bottom: calc(100% + 8px); right: 10px; width: min(420px, calc(100vw - 40px)); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); z-index: 30; overflow: hidden; }
.gif-hd { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.gif-hd input { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--bg); border-radius: 10px; padding: 8px 12px; font-family: inherit; font-size: 13px; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
.gif-hd input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.gif-by { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; white-space: nowrap; }
.gif-grid { max-height: 300px; overflow-y: auto; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.gif-cell { border: none; padding: 0; background: var(--muted); border-radius: 10px; overflow: hidden; cursor: pointer; width: 100%; min-height: 60px; }
.gif-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-cell:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.gif-note { grid-column: 1 / -1; text-align: center; font-size: 12.5px; color: var(--text-3); padding: 18px 0; }

/* ── obecność: kropka na awatarze ── */
.avatar { position: relative; }
.pres-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid var(--surface); background: var(--text-3); }
.pres-dot.on { background: var(--success); }
.chat-conv .avatar .pres-dot { border-color: var(--surface); }
.chat-conv.active .avatar .pres-dot { border-color: var(--muted); }

/* ── wskaźnik „pisze…" ── */
.chat-typing { display: flex; align-items: center; gap: 9px; align-self: flex-start; margin: 6px 0 3px; animation: msgIn .3s var(--ease-out) both; }
.chat-typing .who { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.chat-typing .tb { display: inline-flex; gap: 4px; background: var(--muted); border-radius: 14px; border-bottom-left-radius: 5px; padding: 11px 13px; }
.chat-typing .d { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: typedot 1.25s infinite ease-in-out; }
.chat-typing .d:nth-child(2) { animation-delay: .16s; }
.chat-typing .d:nth-child(3) { animation-delay: .32s; }
@keyframes typedot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ── lightbox obrazka ── */
.chat-lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.82); display: none; align-items: center; justify-content: center; padding: 30px; animation: fade .2s; }
.chat-lightbox.show { display: flex; }
.chat-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: var(--shadow-lg); }
.chat-lightbox .lb-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-lightbox .lb-close:hover { background: rgba(255,255,255,.24); }
.chat-lightbox .lb-close svg { width: 20px; height: 20px; }

/* ── zakładki listy (Wszystkie/Grupy/1:1) — panel zespołu ── */
.chat-tabs { display: flex; gap: 3px; margin-top: 10px; background: #e9e7e4; border-radius: 10px; padding: 3px; }
.chat-tab { flex: 1; height: 30px; border: none; background: transparent; border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.chat-tab:hover:not(.active) { color: var(--text); background: rgba(255,255,255,.5); }
.chat-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(17,17,19,.14); }

/* ══════════════════════════════════════════════════════════════
   PROJEKTY — lista, karta projektu, oś czasu postępów. Append-only.
   ══════════════════════════════════════════════════════════════ */

.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 14px; }
.proj-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px 18px; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s;
}
.proj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.proj-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.proj-card-name { font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.proj-card-client { font-size: 12.5px; color: var(--text-2); font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.proj-card-client .avatar { width: 18px; height: 18px; font-size: 8px; }
.proj-card-desc {
  font-size: 12.5px; color: var(--text-2); margin-top: 10px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.proj-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--text-3); font-weight: 600; }
.proj-card-foot .val { font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.proj-card-foot .val.zero { color: var(--text-3); font-weight: 600; }

/* pasek postępu projektu */
.proj-progress { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.proj-progress .track { flex: 1; height: 7px; border-radius: 7px; background: var(--border-soft); overflow: hidden; }
.proj-progress .fill {
  height: 100%; border-radius: 7px; background: var(--accent); min-width: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: grow-x .8s var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 70ms + .15s);
}
.proj-progress .pct { font-size: 12px; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.proj-progress.lg .track { height: 9px; }
.proj-progress.lg .pct { font-size: 14px; }
.proj-progress .fill.done { background: var(--success); }

/* ─── strona projektu ─── */
.proj-hero-sub { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); font-weight: 600; }
.proj-hero-sub a { color: var(--text); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--border); }
.proj-hero-sub a:hover { border-color: var(--text); }

.proj-view { display: none; }
.proj-view.on { display: block; animation: rise .45s var(--ease-out); }
.proj-view.chat-view.on { display: flex; }
.proj-chat-host { height: min(680px, calc(100vh - 210px)); min-height: 440px; display: flex; }

/* ─── OŚ CZASU POSTĘPÓW (kamienie milowe) ─── */
.ms-add { display: grid; grid-template-columns: 1fr 150px auto; gap: 8px; margin-bottom: 18px; }
@media (max-width: 640px) { .ms-add { grid-template-columns: 1fr; } }
.ms-add input { height: 42px; }
.ms-list { position: relative; padding-left: 30px; }
.ms-list::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--border); border-radius: 2px; }
.ms-item { position: relative; padding: 0 0 18px; opacity: 0; animation: rise .5s var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 55ms); }
.ms-item:last-child { padding-bottom: 2px; }
.ms-dot {
  position: absolute; left: -30px; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--surface); cursor: pointer; z-index: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease-out);
}
.ms-dot svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(.4); transition: all .2s var(--ease-out); }
.ms-dot:hover { transform: scale(1.12); }
.ms-item.ukonczone .ms-dot { background: var(--success); border-color: var(--success); }
.ms-item.ukonczone .ms-dot svg { opacity: 1; transform: scale(1); }
.ms-item.w_pracy .ms-dot { border-color: var(--warning); }
.ms-item.w_pracy .ms-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--warning); animation: pulse 2s infinite; }
.ms-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ms-title { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.ms-item.ukonczone .ms-title { color: var(--text-2); }
.ms-date { font-size: 12px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.ms-desc { font-size: 13px; color: var(--text-2); margin-top: 3px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ms-acts { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.ms-item:hover .ms-acts { opacity: 1; }
.ms-acts button {
  width: 24px; height: 24px; border: none; background: none; border-radius: 6px; cursor: pointer;
  color: var(--text-3); display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.ms-acts button:hover { background: var(--bg); color: var(--text); }
.ms-acts button.del:hover { color: var(--error); }
.ms-acts button svg { width: 13px; height: 13px; }
.ms-hint { font-size: 12px; color: var(--text-3); margin-top: 14px; display: flex; align-items: center; gap: 7px; }
.ms-hint svg { width: 13px; height: 13px; flex-shrink: 0; }

/* notatki projektu */
.pnote { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.pnote:last-child { border-bottom: none; }
.pnote .avatar { margin-top: 2px; }
.pnote-body { flex: 1; min-width: 0; }
.pnote-head { display: flex; align-items: baseline; gap: 8px; }
.pnote-author { font-size: 12.5px; font-weight: 800; }
.pnote-time { font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.pnote-text { font-size: 13.5px; line-height: 1.55; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.pnote-del { border: 0; background: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-3); }
.pnote-del:hover { color: var(--error); }

/* CTA tablicy na stronie projektu */
.board-cta {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 13px;
  background: var(--sidebar-bg); color: #fff; text-decoration: none; position: relative; overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.board-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.board-cta::after {
  content: ""; position: absolute; right: -24px; top: -24px; width: 110px; height: 110px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.1), transparent 70%);
}
.board-cta .bc-ico {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.board-cta .bc-ico svg { width: 20px; height: 20px; }
.board-cta .bc-t { font-size: 14.5px; font-weight: 800; }
.board-cta .bc-s { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.board-cta .bc-arrow { margin-left: auto; color: rgba(255,255,255,.6); transition: transform .2s var(--ease-out); }
.board-cta:hover .bc-arrow { transform: translateX(3px); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   TABLICA PROJEKTU — whiteboard (pan/zoom + karteczki). Append-only.
   ══════════════════════════════════════════════════════════════ */
.wb-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: #f3f2f0; }
.wb-topbar {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border); z-index: 20; flex-shrink: 0;
}
.wb-title { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-sub { font-size: 11.5px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.wb-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wb-save { font-size: 12px; font-weight: 700; color: var(--text-3); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.wb-save .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); transition: background .2s; }
.wb-save.saved .dot { background: var(--success); }
.wb-save.saving .dot { background: var(--warning); animation: pulse 1s infinite; }

.wb-stage { flex: 1; position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.wb-stage.panning { cursor: grabbing; }
.wb-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, #d6d3d1 1.1px, transparent 1.1px);
  background-size: var(--dot-s, 26px) var(--dot-s, 26px); background-position: var(--dot-x, 0) var(--dot-y, 0);
  opacity: .55;
}
.wb-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

.wb-note {
  position: absolute; width: 200px; min-height: 140px;
  border-radius: 4px; padding: 14px 14px 20px;
  box-shadow: 0 2px 10px rgba(17,17,19,.13), 0 12px 28px -14px rgba(17,17,19,.22);
  cursor: grab; user-select: none;
  font-size: 14px; line-height: 1.45; font-weight: 600; color: #292524;
  display: flex; flex-direction: column; word-break: break-word;
  transition: box-shadow .15s;
}
.wb-note.dragging { cursor: grabbing; box-shadow: 0 6px 18px rgba(17,17,19,.2), 0 26px 48px -16px rgba(17,17,19,.35); }
.wb-note.selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.wb-note .txt { flex: 1; white-space: pre-wrap; pointer-events: none; }
.wb-note textarea {
  flex: 1; width: 100%; border: none !important; background: transparent; resize: none; outline: none;
  font: inherit; color: inherit; padding: 0; box-shadow: none !important; height: auto; min-height: 90px;
}
.wb-note .wb-resize {
  position: absolute; right: 1px; bottom: 1px; width: 16px; height: 16px; cursor: nwse-resize;
  color: rgba(0,0,0,.22);
}
.wb-note .wb-resize::before { content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px; }

/* pływający pasek narzędzi zaznaczonej karteczki */
.wb-notebar {
  position: absolute; display: none; align-items: center; gap: 4px; padding: 5px 7px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px;
  box-shadow: var(--shadow-md); z-index: 30; transform: translate(-50%, calc(-100% - 10px));
  animation: pop-in .18s var(--ease-out);
}
.wb-notebar.show { display: flex; }
.wb-notebar .swatch { width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(0,0,0,.1); cursor: pointer; padding: 0; transition: transform .12s; }
.wb-notebar .swatch:hover { transform: scale(1.15); }
.wb-notebar .sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.wb-notebar .nb-del { width: 26px; height: 26px; border: none; background: none; border-radius: 7px; color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wb-notebar .nb-del:hover { background: #fee2e2; color: var(--error); }
.wb-notebar .nb-del svg { width: 14px; height: 14px; }

/* dolny dock tablicy */
.wb-dock {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 15px;
  box-shadow: var(--shadow-md); z-index: 25;
}
.wb-dock .dk-btn {
  height: 38px; padding: 0 14px; border: none; border-radius: 10px; background: transparent;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: background .13s, color .13s;
}
.wb-dock .dk-btn:hover { background: var(--bg); color: var(--text); }
.wb-dock .dk-btn.primary { background: var(--accent); color: #fff; }
.wb-dock .dk-btn.primary:hover { background: var(--accent-hover); }
.wb-dock .dk-btn svg { width: 15px; height: 15px; }
.wb-dock .sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.wb-dock .dk-zoom { font-size: 12px; font-weight: 800; color: var(--text-2); min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.wb-dock .dk-ico { width: 38px; height: 38px; padding: 0; justify-content: center; }
.wb-empty-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; color: var(--text-3); pointer-events: none; z-index: 5;
}
.wb-empty-hint .t { font-size: 15px; font-weight: 800; color: var(--text-2); }
.wb-empty-hint .s { font-size: 13px; margin-top: 4px; }

@media (max-width: 640px) {
  .wb-dock { max-width: calc(100vw - 20px); flex-wrap: wrap; justify-content: center; }
  .wb-topbar { flex-wrap: wrap; gap: 8px; }
}

/* ── TABLICA v2: narzędzia, kształty, ramki, łączniki ── */
.wb-layer { position: absolute; left: 0; top: 0; }
.wb-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.wb-svg .conn-hit { pointer-events: stroke; cursor: pointer; stroke: transparent; fill: none; }
.wb-ep { fill: #fff; stroke: var(--accent); stroke-width: 2; pointer-events: all; cursor: crosshair; }
.wb-ep.att { fill: var(--accent); }

.wb-shape {
  position: absolute; display: flex; align-items: center; justify-content: center;
  padding: 10px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text);
  line-height: 1.4; cursor: grab; user-select: none; word-break: break-word;
  border: 1.5px solid rgba(0,0,0,.14);
}
.wb-shape.rect { border-radius: 10px; box-shadow: 0 2px 10px rgba(17,17,19,.10); }
.wb-shape.ellipse { border-radius: 50%; box-shadow: 0 2px 10px rgba(17,17,19,.10); }
.wb-shape.diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: none; }
.wb-shape .txt { pointer-events: none; white-space: pre-wrap; max-width: 100%; }
.wb-shape.diamond .txt { max-width: 60%; }
.wb-shape textarea, .wb-text textarea {
  width: 100%; border: none !important; background: transparent; resize: none; outline: none;
  font: inherit; color: inherit; padding: 0; box-shadow: none !important; height: auto;
  text-align: inherit; min-height: 40px;
}

.wb-text {
  position: absolute; padding: 6px 9px; font-size: 15.5px; font-weight: 600; color: var(--text);
  line-height: 1.45; cursor: grab; user-select: none; white-space: pre-wrap; word-break: break-word;
  border-radius: 8px; min-height: 34px;
}
.wb-text:hover { outline: 1.5px dashed var(--border-strong); }
.wb-text .txt { pointer-events: none; }

.wb-frame {
  position: absolute; border: 1.6px solid #cfcccb; border-radius: 14px;
  background: rgba(255,255,255,.58); cursor: default;
}
.wb-frame-title {
  position: absolute; top: -28px; left: 0; max-width: 100%;
  font-size: 12.5px; font-weight: 800; color: var(--text-2); letter-spacing: .01em;
  padding: 3px 9px; border-radius: 7px; background: rgba(255,255,255,.8);
  cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;
}
.wb-frame-title input {
  border: none !important; background: transparent; outline: none; font: inherit; color: inherit;
  padding: 0; height: auto !important; box-shadow: none !important; width: 160px;
}
.wb-note.selected, .wb-shape.selected, .wb-text.selected, .wb-frame.selected,
.wb-frame.selected .wb-frame-title { outline: 2px solid var(--accent); outline-offset: 2px; }
.wb-shape.diamond.selected { outline: none; filter: drop-shadow(0 0 0 var(--accent)) drop-shadow(0 0 2px var(--accent)); }

.wb-marquee {
  position: absolute; border: 1.5px dashed var(--accent); border-radius: 4px;
  background: rgba(24,24,27,.05); pointer-events: none; z-index: 40;
}

.wb-dock .dk-btn.active { background: var(--accent); color: #fff; }
.wb-dock .dk-btn.active:hover { background: var(--accent-hover); }
.wb-topbar .tb-btn {
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .13s;
}
.wb-topbar .tb-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.wb-topbar .tb-btn:disabled { opacity: .35; cursor: default; }
.wb-topbar .tb-btn svg { width: 15px; height: 15px; }
.wb-topbar .tb-zoom { font-size: 12px; font-weight: 800; color: var(--text-2); min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.wb-notebar .nb-act {
  height: 26px; min-width: 26px; padding: 0 6px; border: none; background: none; border-radius: 7px;
  color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 12px; font-weight: 700;
}
.wb-notebar .nb-act:hover { background: var(--bg); color: var(--text); }
.wb-notebar .nb-act svg { width: 14px; height: 14px; }
.wb-notebar .nb-act.on { background: var(--accent); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   KLIENCI — baza klientów. Append-only.
   ══════════════════════════════════════════════════════════════ */
.kl-cell-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.kl-cell-name .avatar { width: 34px; height: 34px; font-size: 12px; border-radius: 11px; }
.kl-cell-name .n { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-cell-name .s { font-size: 11.5px; color: var(--text-3); font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-contact { line-height: 1.35; min-width: 0; }
.kl-contact .p { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-contact .e { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-audit-pills { display: inline-flex; gap: 3px; vertical-align: middle; }
.kl-audit-pills .ap { width: 14px; height: 6px; border-radius: 4px; background: var(--border); }
.kl-audit-pills .ap.done { background: var(--success); }
th.sortable { cursor: pointer; user-select: none; transition: color .13s; }
th.sortable:hover { color: var(--text); }
th.sortable .arr { display: inline-block; margin-left: 4px; opacity: 0; transition: opacity .15s, transform .2s var(--ease-out); font-size: 10px; }
th.sortable.on .arr { opacity: 1; }
th.sortable.desc .arr { transform: rotate(180deg); }
.kl-portal-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.kl-portal-dot .d { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.kl-portal-dot.on { color: var(--success); }
.kl-portal-dot.on .d { background: var(--success); }
.kl-portal-dot.warn { color: var(--warning); }
.kl-portal-dot.warn .d { background: var(--warning); }
tr.rise-row { opacity: 0; animation: rise .45s var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 28ms); }

/* ─── PORTAL: karta projektu klienta ─── */
.pp-card { margin-bottom: 14px; }
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.pp-dates { font-size: 12.5px; color: var(--text-2); font-weight: 600; margin-top: 3px; }
.pp-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-top: 10px; }
.ms-list.static .ms-dot { cursor: default; }
.ms-list.static .ms-dot:hover { transform: none; }

/* ─── drobny szlif globalny ─── */
.btn:focus-visible, .icon-btn:focus-visible, .pick:focus-visible, .seg button:focus-visible,
.task-check:focus-visible, .as-check:focus-visible, .ms-dot:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.chat-convs, .chat-msgs, .cmdk-list, .drawer { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ═══ DARK — nadpisania twardych kolorów (append-only) ═══ */
/* tekst/ikony na jasnym akcencie (przyciski, aktywne stany, dymki „ja") */
html[data-theme="dark"] .btn:not(.ghost):not(.subtle):not(.danger),
html[data-theme="dark"] .seg button.on,
html[data-theme="dark"] .pick.on,
html[data-theme="dark"] .msg.me .msg-bubble,
html[data-theme="dark"] .chat-send,
html[data-theme="dark"] .chat-badge,
html[data-theme="dark"] .cal-day.today .cal-num,
html[data-theme="dark"] .wb-dock .dk-btn.primary,
html[data-theme="dark"] .msg-edit-btns .me-save,
html[data-theme="dark"] .wb-notebar .nb-act.on { color: var(--accent-fg); }
/* aktywny tab czatu ma ciemne tło (surface), nie akcent → tekst jasny */
html[data-theme="dark"] .chat-tab.active { color: var(--text); }
html[data-theme="dark"] .task-check.on svg,
html[data-theme="dark"] .as-check svg { color: var(--accent-fg); }
html[data-theme="dark"] .msg.me .msg-file .fic { background: rgba(0,0,0,.14); }

/* karta inverse (dashboard/staty) — trzymamy ciemną, wyróżnioną */
html[data-theme="dark"] .stat-card.inverse { background: #1f1f26; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .stat-card.inverse .stat-label { color: var(--text-3); }
html[data-theme="dark"] .stat-card.inverse .stat-foot { color: var(--text-2); }
html[data-theme="dark"] .stat-card.inverse::after { background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%); }

/* portal hero — nie może stać się biały (akcent jest jasny w dark) */
html[data-theme="dark"] .portal-hero { background: #1c1c22; }

/* badge (pastelowe → półprzezroczyste) */
html[data-theme="dark"] .badge-gray { background: var(--muted); color: var(--text-2); }
html[data-theme="dark"] .badge-ok   { background: rgba(52,211,153,.16);  color: #6ee7b7; }
html[data-theme="dark"] .badge-warn { background: rgba(251,191,36,.16);  color: #fcd34d; }
html[data-theme="dark"] .badge-err  { background: rgba(248,113,113,.16); color: #fca5a5; }
html[data-theme="dark"] .badge-blue { background: rgba(96,165,250,.16);  color: #93c5fd; }
html[data-theme="dark"] .prio.wysoki { color: #fca5a5; }
html[data-theme="dark"] .prio.normalny { color: #fcd34d; }
html[data-theme="dark"] .prio.niski { color: var(--text-2); }

/* przyciski/hovery na twardych szarościach */
html[data-theme="dark"] .btn.subtle:hover { background: #303038; }
html[data-theme="dark"] .demo-btn { background: var(--surface); }
html[data-theme="dark"] .chat-tabs { background: #101014; }
html[data-theme="dark"] .chat-conv.active .avatar .pres-dot { border-color: var(--muted); }

/* pola błędu / danger-ghost */
html[data-theme="dark"] .err-box { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); color: #fca5a5; }
html[data-theme="dark"] .btn.ghost.danger-ghost:hover { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); }

/* toast, selection, podgląd dokumentu */
html[data-theme="dark"] .toast { background: #26262c; }
html[data-theme="dark"] ::selection { background: #ededed; color: #17171b; }
html[data-theme="dark"] .preview-box { background: var(--surface); }

/* skeleton shimmer ciemniejszy */
html[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }

/* ── tablica (whiteboard) w dark ── */
html[data-theme="dark"] .wb-page { background: #0b0b0e; }
html[data-theme="dark"] .wb-stage::before { background-image: radial-gradient(circle, #2c2c31 1.1px, transparent 1.1px); opacity: .8; }
html[data-theme="dark"] .wb-frame { background: rgba(255,255,255,.025); border-color: #3a3a42; }
html[data-theme="dark"] .wb-frame-title { background: rgba(24,24,28,.85); }
html[data-theme="dark"] .wb-ep { fill: #26262c; stroke: #ededed; }
html[data-theme="dark"] .wb-ep.att { fill: #ededed; }
/* (usunięte) reguła [style*="rgb(255,255,255)"] łapała też BIAŁY OBRYS i psuła kolor tekstu.
   Kolor tekstu karteczek/figur ustawia JS inline: ciemny na jasnym wypełnieniu, biały na czarnym,
   a przy przezroczystym wypełnieniu inline jest czyszczony → działa var(--text) z motywu. */

/* ikony sygnaturowe w topbarze tablicy używają .tb-btn (już na var) — ok */

/* przycisk przełącznika motywu w sidebarze — neutralny hover (nie czerwony jak logout) */
.sb-logout.theme-toggle:hover { color: #fff; }

/* ═══ PRZEJŚCIE MOTYWU — kołowa fala (View Transitions API) ═══ */
/* nadajemy stronie nazwę przejścia i wyłączamy domyślny crossfade */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  /* nowy motyw wjeżdża NA WIERZCHU jako rozszerzający się okrąg, stary stoi pod spodem */
  ::view-transition-new(root) { z-index: 2147483646; }
  ::view-transition-old(root) { z-index: 1; }
  /* miękki pierścień-poświata podążający za krawędzią fali */
  html.theme-anim::view-transition-new(root) { will-change: clip-path; }
}
/* delikatny „oddech" całej powierzchni w trakcie przejścia */
html.theme-anim { }

/* animacja ikony słońca/księżyca przy zmianie (obrót + pojawienie) */
@keyframes theme-icon-in {
  0%   { opacity: 0; transform: rotate(-140deg) scale(.4); }
  60%  { opacity: 1; transform: rotate(12deg) scale(1.12); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}
.sb-icon.anim svg,
#wb-theme.spin svg,
.auth-theme-btn svg { animation: theme-icon-in .55s var(--ease-out); }

/* przycisk motywu na stronie logowania (floating, prawy górny róg) */
.auth-theme-btn {
  position: fixed; top: 18px; right: 18px; z-index: 30;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: color .15s, border-color .15s, box-shadow .15s, transform .15s var(--ease-out);
}
.auth-theme-btn:hover { color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.auth-theme-btn:active { transform: scale(.92); }
.auth-theme-btn svg { width: 19px; height: 19px; }

/* ═══ TABLICE — lista samodzielnych tablic + foldery ═══ */
.folder-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.tboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 14px; }
.tboard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  position: relative; transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s;
}
.tboard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.tboard-canvas {
  height: 122px; border-bottom: 1px solid var(--border-soft); position: relative; overflow: hidden;
  background-color: var(--surface-2);
  background-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1px);
  background-size: 18px 18px; display: flex; align-items: center; justify-content: center;
}
.tboard-canvas .tb-ico { width: 34px; height: 34px; color: var(--text-3); opacity: .9; }
.tboard-canvas .tb-count {
  position: absolute; bottom: 8px; right: 10px; font-size: 11px; font-weight: 700; color: var(--text-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1px 9px;
}
.tboard-body { padding: 12px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tboard-name { font-size: 14px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tboard-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tboard-menu {
  flex-shrink: 0; width: 28px; height: 28px; border: none; background: transparent; border-radius: 8px;
  color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .13s, color .13s;
}
.tboard-menu:hover { background: var(--muted); color: var(--text); }
.tboard-menu svg { width: 17px; height: 17px; }
.tb-folder-head { display: flex; align-items: center; gap: 9px; margin: 26px 0 12px; }
.tb-folder-head:first-child { margin-top: 4px; }
.tb-folder-head .fh-ico { width: 17px; height: 17px; color: var(--text-2); }
.tb-folder-head .h { font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--text); }
.tb-folder-head .cnt { font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.tb-folder-head .fh-edit { border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.tb-folder-head .fh-edit:hover { background: var(--muted); color: var(--text); }
.tb-folder-head .line { flex: 1; height: 1px; background: var(--border); }

/* ═══ TABLICA v3: pisak, komentarze ═══ */
.wb-dock .dk-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; flex-shrink: 0; }

/* pasek pisaka (nad dockiem) */
.wb-penbar {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%);
  display: none; align-items: center; gap: 5px; padding: 7px 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-md); z-index: 26; flex-wrap: wrap; max-width: calc(100vw - 24px);
}
.wb-penbar.show { display: flex; animation: pop-in .18s var(--ease-out); }
.wb-penbar .pb-sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .12s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.wb-penbar .pb-sw:hover { transform: scale(1.15); }
.wb-penbar .pb-sw.on { border-color: var(--accent); }
.wb-penbar .sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.wb-penbar .pb-w { width: 30px; height: 28px; border: none; background: transparent; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wb-penbar .pb-w:hover { background: var(--muted); }
.wb-penbar .pb-w.on { background: var(--accent); }
.wb-penbar .pb-w .dotw { border-radius: 50%; background: var(--text); }
.wb-penbar .pb-w.on .dotw { background: var(--accent-fg); }
.wb-penbar .pb-t { height: 28px; padding: 0 11px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.wb-penbar .pb-t:hover { background: var(--muted); color: var(--text); }
.wb-penbar .pb-t.on { background: var(--accent); color: var(--accent-fg); }

/* rysunek: warstwa SVG selekcji */
.wb-draw-sel { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 5; }

/* pin komentarza */
.wb-comment {
  position: absolute; width: 30px; height: 30px; cursor: grab; user-select: none;
  z-index: 5; display: flex; align-items: center; justify-content: center;
}
.wb-comment .bub {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 3px; background: #eab308;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(17,17,19,.28);
  display: flex; align-items: center; justify-content: center; color: #3f2d00;
  transition: transform .12s;
}
.wb-comment:hover .bub { transform: scale(1.1); }
.wb-comment.selected .bub { outline: 2px solid var(--accent); outline-offset: 2px; }
.wb-comment .bub svg { width: 15px; height: 15px; }
.wb-comment .cnt {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: var(--accent-fg); border-radius: 10px; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--surface);
}

/* popover wątku komentarza */
.wb-comment-pop {
  position: absolute; display: none; flex-direction: column; width: 300px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); z-index: 60; overflow: hidden;
}
.wb-comment-pop.show { display: flex; animation: pop-in .18s var(--ease-out); }
.wb-comment-pop .cp-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--border-soft); }
.wb-comment-pop .cp-head .t { font-size: 13px; font-weight: 800; flex: 1; }
.wb-comment-pop .cp-head button { width: 26px; height: 26px; border: none; background: none; border-radius: 7px; color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wb-comment-pop .cp-head button:hover { background: var(--muted); color: var(--text); }
.wb-comment-pop .cp-head button.cp-del:hover { color: var(--error); background: rgba(248,113,113,.12); }
.wb-comment-pop .cp-head button svg { width: 15px; height: 15px; }
.wb-comment-pop .cp-msgs { max-height: 260px; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; }
.wb-comment-pop .cp-empty { font-size: 12.5px; color: var(--text-3); padding: 6px 0; }
.cp-msg { display: flex; gap: 9px; }
.cp-msg .avatar { width: 26px; height: 26px; font-size: 10px; flex-shrink: 0; }
.cp-msg .cm-body { min-width: 0; flex: 1; }
.cp-msg .cm-head { display: flex; align-items: baseline; gap: 7px; }
.cp-msg .cm-author { font-size: 12.5px; font-weight: 800; }
.cp-msg .cm-time { font-size: 11px; color: var(--text-3); }
.cp-msg .cm-text { font-size: 13px; line-height: 1.45; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.wb-comment-pop .cp-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-soft); align-items: flex-end; }
.wb-comment-pop .cp-compose textarea {
  flex: 1; min-height: 38px; max-height: 110px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--bg); font-family: inherit; font-size: 13px; line-height: 1.4; color: var(--text); resize: none; outline: none;
}
.wb-comment-pop .cp-compose textarea:focus { border-color: var(--accent); background: var(--surface); }
.wb-comment-pop .cp-send { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; border: none; cursor: pointer; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; }
.wb-comment-pop .cp-send:hover { background: var(--accent-hover); }
.wb-comment-pop .cp-send svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════
   KSIĘGA NAWYKÓW (habit tracker) — moduł nawyki.html
   ═══════════════════════════════════════════════════════════════ */
.hb-loading { padding: 60px 20px; text-align: center; color: var(--text-3); font-size: 14px; }

/* ── HOME: karty aktywnych miesięcy ── */
.hb-home { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 22px; }
.hb-tcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-out), box-shadow .18s, border-color .18s;
  display: flex; flex-direction: column; gap: 18px; min-height: 118px;
}
.hb-tcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.hb-tcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hb-tcard-month { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }
.hb-pill { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: var(--muted); color: var(--text-2); white-space: nowrap; }
.hb-pill-now { background: var(--accent); color: var(--accent-fg); }
.hb-tcard-foot { margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.hb-tcard-foot svg { width: 14px; height: 14px; }
.hb-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--muted); color: var(--text-2); font-size: 12px; font-weight: 800; margin-left: 2px; }

/* ── Obiekt Księgi na home ── */
.hb-book-cta { display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.hb-book { width: 52px; height: 52px; color: var(--accent); flex-shrink: 0; }
.hb-book svg { width: 100%; height: 100%; }
.hb-book-txt { flex: 1; min-width: 0; }
.hb-book-t { font-weight: 800; font-size: 15px; }
.hb-book-s { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.hb-book-cta .btn svg { width: 15px; height: 15px; }

/* ── Formularz nowego trackera / zarządzanie ── */
.hb-hint { font-size: 12px; color: var(--text-3); font-weight: 600; }
.hb-hrow, .hb-mrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hb-hrow .hb-hname, .hb-mrow .hb-mname { flex: 1; min-width: 0; }
.hb-hrow .hb-hgoal, .hb-mrow .hb-mgoal { width: 128px; flex-shrink: 0; }
.hb-hrow .icon-btn, .hb-mrow .icon-btn { flex-shrink: 0; }
.hb-addrow {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  padding: 9px 14px; border: 1px dashed var(--border-strong); border-radius: 10px;
  background: transparent; color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .15s;
}
.hb-addrow:hover { color: var(--text); border-color: var(--text-3); background: var(--muted); }
.hb-addrow svg { width: 14px; height: 14px; }
.hb-drag { cursor: grab; color: var(--text-3); font-size: 18px; user-select: none; padding: 0 2px; }
.hb-mrow.hb-dragging { opacity: .5; }

/* ── SIATKA MIESIĄCA ── */
.hb-grid-head { display: flex; align-items: center; gap: 14px; }
.hb-gridwrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
.hb-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }
.hb-grid th, .hb-grid td { border-bottom: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); }

/* nagłówek dni */
.hb-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); padding: 0; }
.hb-dcol { width: 34px; min-width: 34px; height: 46px; text-align: center; vertical-align: middle; }
.hb-dnum { display: block; font-size: 12px; font-weight: 800; color: var(--text); line-height: 1.1; }
.hb-ddow { display: block; font-size: 9px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-3); margin-top: 1px; }

/* sticky kolumna z nazwą nawyku (lewa) */
.hb-th-name, .hb-rname { position: sticky; left: 0; z-index: 3; background: var(--surface); text-align: left; min-width: 150px; max-width: 200px; padding: 8px 14px; box-shadow: 1px 0 0 var(--border); }
.hb-grid thead .hb-th-name { z-index: 4; background: var(--surface-2); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.hb-rname { padding: 9px 14px; vertical-align: middle; }
.hb-rname-txt { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.hb-rgoal { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-3); margin-top: 2px; }

/* sticky kolumny podsumowania (prawa) */
.hb-th-sum, .hb-sum { position: sticky; right: 46px; z-index: 3; background: var(--surface); width: 60px; min-width: 60px; text-align: center; font-size: 13px; box-shadow: -1px 0 0 var(--border); }
.hb-th-pct, .hb-pct { position: sticky; right: 0; z-index: 3; background: var(--surface); width: 46px; min-width: 46px; text-align: center; font-size: 12px; color: var(--text-2); font-weight: 700; }
.hb-grid thead .hb-th-sum, .hb-grid thead .hb-th-pct { z-index: 4; background: var(--surface-2); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.hb-sum { color: var(--text-2); font-weight: 600; }
.hb-sum b { color: var(--text); font-weight: 800; }
.hb-sum.hit { color: var(--success); }
.hb-sum.hit b { color: var(--success); }

/* komórki dni */
.hb-cell { width: 34px; min-width: 34px; height: 42px; text-align: center; vertical-align: middle; cursor: pointer; background: var(--surface); transition: background .12s; padding: 0; }
.hb-cell .hb-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; }
.hb-cell .hb-x svg { width: 15px; height: 15px; color: var(--accent-fg); stroke-width: 3.4; opacity: 0; transform: scale(.4); transition: opacity .16s, transform .18s var(--ease-out); }
.hb-cell:not(.on):hover { background: var(--muted); }
.hb-cell:not(.on):hover .hb-x { background: var(--muted); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.hb-cell.on .hb-x { background: var(--accent); }
.hb-cell.on .hb-x svg { opacity: 1; transform: scale(1); }
.hb-cell.hb-pop .hb-x { animation: hb-pop .28s var(--ease-out); }
@keyframes hb-pop { 0% { transform: scale(.5); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
.hb-cell.hb-pending { opacity: .6; }
.hb-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* weekend wyszarzony + start tygodnia (poniedziałek) grubsza linia */
.hb-weekend { background: var(--surface-2); }
.hb-cell.hb-weekend:not(.on) { background: var(--surface-2); }
.hb-wkstart { border-left: 2px solid var(--border-strong) !important; }
.hb-today .hb-dnum { color: var(--accent); }
.hb-grid thead th.hb-today { background: var(--muted); }
.hb-cell.hb-today { box-shadow: inset 0 0 0 1.5px var(--border-strong); }

/* legenda */
.hb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; padding: 0 4px; font-size: 12px; color: var(--text-2); }
.hb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hb-lg-box { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.hb-lg-box.on { background: var(--accent); border-color: var(--accent); }
.hb-lg-box.on svg { width: 12px; height: 12px; color: var(--accent-fg); stroke-width: 3.4; }
.hb-lg-box.hb-weekend { background: var(--surface-2); border-color: var(--border-strong); }
.hb-lg-wk { color: var(--text-3); }

/* ── SAMOOCENA (zamknięcie) ── */
.hb-review { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.hb-rev-habit { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.hb-rev-habit:last-child { border-bottom: none; padding-bottom: 0; }
.hb-rev-h-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hb-rev-h-name { font-weight: 700; font-size: 14px; }
.hb-rev-h-stat { font-size: 12px; color: var(--text-2); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb-rev-h-body { display: flex; flex-direction: column; gap: 10px; }
.hb-rev-note { font-size: 13px; }
.hb-rev-overall { position: sticky; top: 20px; }

/* gwiazdki (edytowalne) */
.hb-stars { display: flex; align-items: center; gap: 4px; }
.hb-star { background: none; border: none; padding: 2px; cursor: pointer; line-height: 0; }
.hb-star svg { width: 24px; height: 24px; fill: var(--muted); stroke: var(--border-strong); stroke-width: 1; transition: fill .12s, transform .12s var(--ease-out); }
.hb-star:hover svg { transform: scale(1.15); }
.hb-star.on svg { fill: #f5b301; stroke: #e0a000; }
.hb-stars-lbl { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--text-2); min-width: 46px; }

/* gwiazdki read-only w Księdze */
.hb-star-ro { line-height: 0; }
.hb-star-ro svg { width: 16px; height: 16px; fill: var(--muted); stroke: var(--border-strong); stroke-width: 1; }
.hb-star-ro.on svg { fill: #f5b301; stroke: #e0a000; }

/* ── ANIMACJA WYCINANIA ── */
.hb-cut-overlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; background: rgba(10,10,12,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.hb-cut-overlay.show { opacity: 1; }
.hb-cut-card { position: relative; width: min(88vw, 540px); background: var(--surface); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-lg); transform-origin: center; }
.hb-cut-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 20px; letter-spacing: -.02em; margin-bottom: 14px; color: var(--text); }
.hb-cut-dash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0; }
.hb-cut-dash rect { x: 3px; y: 3px; width: calc(100% - 6px); height: calc(100% - 6px); fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 8 5; }
.hb-scissors { position: absolute; top: -13px; left: 6%; transform: translateX(-50%); font-size: 22px; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.hb-cut-card.cutting .hb-cut-dash { animation: hb-dash-in .3s var(--ease-out) forwards; }
.hb-cut-card.cutting .hb-cut-dash rect { animation: hb-dash-march 1.2s linear .2s; }
.hb-cut-card.cutting .hb-scissors { animation: hb-scissors-run 1.25s var(--ease-out) forwards; }
@keyframes hb-dash-in { to { opacity: 1; } }
@keyframes hb-dash-march { to { stroke-dashoffset: -260; } }
@keyframes hb-scissors-run {
  0% { left: 6%; opacity: 0; transform: translateX(-50%) rotate(-8deg); }
  10% { opacity: 1; }
  50% { transform: translateX(-50%) rotate(8deg); }
  90% { opacity: 1; }
  100% { left: 94%; opacity: 1; transform: translateX(-50%) rotate(-8deg); }
}
.hb-cut-card.fly { animation: hb-fly 1s cubic-bezier(.5,0,.6,1) forwards; }
@keyframes hb-fly {
  0% { transform: translate(0,0) scale(1) rotate(0); opacity: 1; }
  25% { transform: translate(0,-14px) scale(1.02) rotate(-2deg); }
  100% { transform: translate(var(--fx), var(--fy)) scale(.04) rotate(20deg); opacity: 0; }
}
.hb-cut-card.hb-cut-fallback { animation: hb-fallback .85s var(--ease-out) forwards; }
@keyframes hb-fallback { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.5) translateY(120px); opacity: 0; } }
.hb-cut-book { position: relative; width: 68px; height: 68px; color: #fff; }
.hb-cut-book svg { width: 100%; height: 100%; }
.hb-cut-book-n { position: absolute; top: -6px; right: -10px; background: var(--success); color: #fff; font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 999px; opacity: 0; transform: scale(.4); }
.hb-cut-book.bump { animation: hb-book-bump .5s var(--ease-out); }
.hb-cut-book.bump .hb-cut-book-n { animation: hb-badge-in .4s var(--ease-out) .12s forwards; }
@keyframes hb-book-bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.18) translateY(-4px); } }
@keyframes hb-badge-in { to { opacity: 1; transform: scale(1); } }

/* miniaturka siatki (animacja + ewentualny podgląd) */
.hb-mini { display: flex; flex-direction: column; gap: 2px; }
.hb-mini-row { display: grid; gap: 2px; }
.hb-mini-cell { height: 9px; border-radius: 2px; background: var(--muted); }
.hb-mini-cell.hb-mini-name { background: transparent; font-size: 8px; color: var(--text-3); overflow: hidden; white-space: nowrap; height: auto; align-self: center; }
.hb-mini-cell.we { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-soft); }
.hb-mini-cell.wk { box-shadow: inset 1px 0 0 var(--border-strong); }
.hb-mini-cell.on { background: var(--accent); }

/* ── KSIĘGA / ARCHIWUM ── */
.hb-bookview { display: flex; align-items: stretch; gap: 14px; perspective: 2200px; }
.hb-book-stage { flex: 1; min-width: 0; }
.hb-leaf { transform-origin: left center; transform-style: preserve-3d; backface-visibility: hidden; }
.hb-leaf.flip-l { animation: hb-flip-l .4s var(--ease-out); }
.hb-leaf.flip-r { animation: hb-flip-r .4s var(--ease-out); }
@keyframes hb-flip-l { 0% { transform: rotateY(0); } 50% { transform: rotateY(-14deg); opacity: .6; } 100% { transform: rotateY(0); } }
@keyframes hb-flip-r { 0% { transform: rotateY(0); } 50% { transform: rotateY(14deg); opacity: .6; } 100% { transform: rotateY(0); } }
.hb-nav-btn { flex-shrink: 0; align-self: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: all .15s; }
.hb-nav-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.hb-nav-btn:disabled { opacity: .35; cursor: default; }
.hb-nav-btn svg { width: 20px; height: 20px; }
.hb-page { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 26px 30px; }
.hb-page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-soft); padding-bottom: 14px; margin-bottom: 16px; }
.hb-page-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 28px; letter-spacing: -.02em; }
.hb-page-meta { font-size: 12px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.hb-page-overall { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.hb-po-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-right: 10px; }
.hb-po-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.hb-po-note { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 15px; color: var(--text); margin-top: 10px; line-height: 1.5; }
.hb-page-grid { margin-bottom: 18px; }
.hb-page-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.hb-prev-item { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 11px 13px; }
.hb-prev-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hb-prev-name { font-weight: 700; font-size: 13px; }
.hb-prev-stars { display: inline-flex; gap: 1px; }
.hb-prev-note { font-size: 12.5px; color: var(--text-2); margin-top: 5px; line-height: 1.4; }
.hb-page-foot { text-align: center; font-size: 12px; color: var(--text-3); margin-top: 18px; font-weight: 600; }
.hb-book-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.hb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); cursor: pointer; transition: all .15s; }
.hb-dot.on { background: var(--accent); transform: scale(1.3); }

/* ── MOBILE ── */
@media (max-width: 767px) {
  .hb-review { grid-template-columns: 1fr; }
  .hb-rev-overall { position: static; }
  .hb-home { grid-template-columns: 1fr; }
  .hb-book-cta { flex-wrap: wrap; }
  .hb-th-name, .hb-rname { min-width: 116px; max-width: 130px; }
  .hb-page { padding: 20px 16px; }
  .hb-page-title { font-size: 22px; }
  .hb-nav-btn { width: 38px; height: 38px; }
  .hb-cell, .hb-dcol { width: 30px; min-width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-cell.hb-pop .hb-x { animation: none; }
  .hb-leaf.flip-l, .hb-leaf.flip-r { animation: none; }
}

/* ═══ DARK: ekran logowania — rozdzielenie paneli (były oba prawie czarne) ═══ */
html[data-theme="dark"] .auth-main { background: #15151a; }
html[data-theme="dark"] .auth-side { background: #08080a; }
html[data-theme="dark"] .auth-side::before { opacity: 1.35; filter: blur(10px); }
html[data-theme="dark"] .auth-card .sub { color: var(--text-2); }
html[data-theme="dark"] .demo-strip { background: #1b1b21; border-color: var(--border); }
html[data-theme="dark"] .demo-btn { background: #23232a; border-color: var(--border); }
html[data-theme="dark"] .demo-btn:hover { background: #2b2b33; }
/* tytuł w szufladzie zadania (input bez type=) — jawny kolor motywu */
.td-title-input { color: var(--text); }
.td-title-input::placeholder { color: var(--text-3); }

/* ═══ PLAKIETKI POWIADOMIEŃ W NAWIGACJI ═══ */
.sb-item { position: relative; }
.sb-badge {
  display: none; margin-left: auto; flex-shrink: 0;
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 800;
  align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
  line-height: 1; box-shadow: 0 0 0 2px rgba(0,0,0,.25);
  animation: badge-pop .3s var(--ease-out);
}
.sb-badge.show { display: inline-flex; }
@keyframes badge-pop { from { opacity: 0; transform: scale(.5); } }
/* zwinięty sidebar: plakietka jako kropka na ikonie */
.sidebar.collapsed .sb-badge.show {
  position: absolute; top: 5px; right: 6px; margin: 0;
  min-width: 9px; width: 9px; height: 9px; padding: 0; border-radius: 50%;
  font-size: 0; overflow: hidden; box-shadow: 0 0 0 2px var(--sidebar-bg);
}
/* delikatny akcent na pozycji z nowościami */
.sb-item.has-new .sb-label { color: rgba(255,255,255,.95); }

/* ═══ TABLICA: pasek zaznaczenia w wierszach + obrys/przezroczystość figur ═══ */
.wb-notebar { flex-direction: column; align-items: stretch; gap: 5px; }
.wb-notebar .nb-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wb-notebar .nb-lab {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-right: 4px; min-width: 34px;
}
/* swatch „bez tła" — przekreślony */
.wb-notebar .swatch.sw-none {
  background: var(--surface);
  background-image: linear-gradient(45deg, transparent 44%, #dc2626 44%, #dc2626 56%, transparent 56%);
  border: 1px solid var(--border-strong);
}
.wb-notebar .swatch.sw-st { width: 20px; height: 20px; border-radius: 5px; }
.wb-notebar .swatch.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.wb-notebar .nb-act.nb-sw { min-width: 26px; }

/* romb: obrys przez dwie warstwy (tło = kolor obrysu, ::before = wypełnienie) */
.wb-shape.diamond::before {
  content: ''; position: absolute; inset: var(--wb-sw, 1.5px);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: var(--wb-fill, #ffffff); z-index: 0;
}
.wb-shape.diamond.no-stroke::before { inset: 0; }
.wb-shape.diamond > .txt, .wb-shape.diamond > textarea { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   OPŁATY — wspólne konto zespołu + bankomat
   Blok ląduje ZA sekcją dark-override, więc nie skorzysta z jej poprawek:
   każde tło var(--accent) musi mieć color var(--accent-fg) OD RAZU
   (w dark --accent jest jasny, --accent-fg ciemny). Własne poprawki
   dark są na końcu tego bloku.
   ═══════════════════════════════════════════════════════════════ */
.op-loading { padding: 40px; text-align: center; color: var(--text-3); font-weight: 600; }
.op-muted { color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.op-hint { font-size: 12px; color: var(--text-3); margin-top: 6px; line-height: 1.45; }
.op-hint.warn { color: var(--warning); font-weight: 700; }
.op-neg { color: var(--error); }
.op-pos { color: var(--success); }

/* ─── pasek trybu edycji ─── */
.op-editbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px dashed var(--warning);
  border-radius: 13px; padding: 11px 14px; margin-bottom: 14px;
}
.op-editbar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex-shrink: 0; }
.op-editbar-t { font-size: 13px; font-weight: 800; color: var(--warning); }
.op-editbar-s { font-size: 12.5px; color: var(--text-2); flex: 1; min-width: 180px; }
.op-editbar-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── hero: saldo główne + rozbicie ─── */
/* Hero ma WŁASNE wejście zamiast klasy .rise. Powód: .rise ustawia opacity:0
   i dowozi widoczność animacją, więc każda inna reguła nadpisująca `animation`
   (tu: .op-bump po wpłacie) zostawiała saldo NIEWIDOCZNE. Bez opacity:0 w bazie
   podmiana animacji jest bezpieczna — element zostaje widoczny. */
.op-hero { margin-bottom: 14px; animation: rise .6s var(--ease-out) both; animation-delay: 70ms; }
.op-hero .stat-value { font-size: 42px; }
.op-hero.op-bump { animation: op-bump .65s var(--ease-out) both; animation-delay: 0s; }
@keyframes op-bump { 0% { transform: none; } 30% { transform: scale(1.015); } 100% { transform: none; } }

.op-hero-split {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14);
}
.op-chip {
  display: flex; align-items: center; gap: 9px; text-align: left;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px; padding: 9px 11px; cursor: pointer;
  transition: background .16s, transform .16s var(--ease-out), border-color .16s;
  font-family: inherit; color: inherit;
}
.op-chip:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.op-chip.me { border-color: rgba(255,255,255,.34); }
.op-chip-av { width: 26px; height: 26px; font-size: 10px; }
.op-chip-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-chip-lab { font-size: 11px; font-weight: 700; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-chip-val { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.op-chip.neg .op-chip-val { color: #ff8f8f; }

/* ─── siatka przeglądu ─── */
.op-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: start; }
.op-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.op-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 18px; }

.op-my-val { font-family: 'Fraunces', Georgia, serif; font-size: 32px; font-weight: 600; margin: 10px 0 12px; font-variant-numeric: tabular-nums; }
.op-my-val.neg { color: var(--error); }
.op-warn { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; border-radius: 11px; padding: 11px 12px; }
.op-warn svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.op-warn.ok   { background: rgba(22,163,74,.10);  color: #15803d; }
.op-warn.warn { background: rgba(217,119,6,.11);  color: #b45309; }
.op-warn.err  { background: rgba(220,38,38,.10);  color: #b91c1c; }

/* ─── wiersze opłat ─── */
.op-due.late .d { color: var(--error); }
.op-due.soon .d { color: var(--warning); }
.op-kat { width: 34px; height: 34px; border-radius: 10px; background: var(--muted); color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.op-kat svg { width: 17px; height: 17px; }
.op-fee-amount { font-size: 15px; }
.op-fee-per { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.op-row-acts { display: flex; gap: 4px; margin-left: 10px; }
.op-cell-konto { display: inline-flex; align-items: center; gap: 8px; }
.op-cell-konto .avatar { width: 24px; height: 24px; font-size: 10px; }
.op-more { display: flex; justify-content: center; margin-top: 14px; }

/* ═══ BANKOMAT ═══
   Ekran celowo NIE używa tokenów motywu — to zielony CRT w obu trybach.
   Maszyna ma wyglądać jak maszyna, a przy okazji omijamy inwersję --accent. */
.atm {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: 22px; padding: 16px;
  box-shadow: var(--shadow-md);
}
.atm-brand {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 800; letter-spacing: .22em; color: var(--text-3);
  text-transform: uppercase; margin-bottom: 10px; padding: 0 2px;
}
.atm-close { background: none; border: 0; cursor: pointer; color: var(--text-3); padding: 2px; display: inline-flex; border-radius: 7px; }
.atm-close:hover { color: var(--text); background: var(--muted); }
.atm-close svg { width: 16px; height: 16px; }

.atm-screen {
  position: relative; overflow: hidden;
  background: #0b1a12; color: #8ff0b5; border-radius: 14px;
  padding: 16px 16px 18px; min-height: 132px;
  box-shadow: inset 0 0 34px rgba(0,0,0,.65), inset 0 0 0 1px rgba(143,240,181,.10);
  font-variant-numeric: tabular-nums;
  transition: background .25s, color .25s;
}
.atm-screen.err { background: #24090b; color: #ff9d9d; }
.atm-scan {
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background:
    repeating-linear-gradient(rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.45) 100%);
}
.atm-line { position: relative; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.atm-line.dim { opacity: .55; letter-spacing: .05em; }
.atm-big {
  position: relative; font-family: 'Fraunces', Georgia, serif;
  font-size: 34px; font-weight: 600; margin: 8px 0 6px; letter-spacing: -.01em;
}
.atm-big.neg { color: #ff9d9d; }
.atm-big.dim { opacity: .4; }
.atm-cta {
  position: relative; margin-top: 12px; width: 100%; cursor: pointer;
  background: #8ff0b5; color: #06301c; border: 0; border-radius: 10px;
  padding: 11px 14px; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .1em;
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.atm-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(143,240,181,.6); }
.atm-cta:active { transform: translateY(0); }

.atm-slot { position: relative; height: 14px; background: #0a0a0c; border-radius: 8px; margin: 14px 0 0;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.85); }
.atm-led { position: absolute; right: 10px; top: 4px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); opacity: .32; }
.atm-led.blink { animation: atm-led-blink .28s linear infinite; }
@keyframes atm-led-blink { 0%,100% { opacity: .25; } 50% { opacity: 1; box-shadow: 0 0 9px var(--success); } }
.atm-tray { height: 11px; margin-top: 7px; border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, var(--muted), var(--surface-2)); border: 1px solid var(--border); border-top: 0; }
.atm-tray-lip { height: 3px; margin: 3px 16px 0; border-radius: 3px; background: rgba(0,0,0,.22); }

/* ─── overlay pełnoekranowy ─── */
.atm-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,12,.62); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .22s var(--ease-out); padding: 20px;
}
.atm-overlay.show { opacity: 1; }
.atm-stage { position: relative; width: 100%; max-width: 380px; }
.atm-overlay.show .atm-stage { animation: atm-zoom .42s var(--ease-out) both; }
@keyframes atm-zoom {
  from { transform: translate(var(--ox,0), var(--oy,0)) scale(var(--os,.6)); opacity: .3; }
  to   { transform: none; opacity: 1; }
}
.atm-full { padding: 18px; }
.atm-panel { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.atm-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.atm-key {
  height: 46px; border-radius: 11px; cursor: pointer; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  font-size: 15px; font-weight: 800; transition: all .15s var(--ease-out);
}
.atm-key:hover { border-color: var(--accent); transform: translateY(-1px); }
.atm-key.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.atm-input-wrap { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .28s var(--ease-out), opacity .2s; }
.atm-input-wrap.open { max-height: 190px; opacity: 1; }
.atm-input-wrap label { display: block; margin: 10px 0 6px; }
.atm-input-row { position: relative; display: flex; align-items: center; }
.atm-input {
  width: 100%; height: 52px; padding: 0 44px 0 14px; border-radius: 11px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.atm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.atm-input-cur { position: absolute; right: 14px; font-size: 15px; font-weight: 700; color: var(--text-3); pointer-events: none; }
.atm-input-wrap .btn { margin-top: 10px; }

.atm-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--muted); border-radius: 11px; padding: 11px 13px; }
.atm-meta-lab { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.atm-meta-val { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.atm-meta-val svg { width: 14px; height: 14px; color: var(--success); }
.atm-acts { display: flex; gap: 8px; }
.atm-acts .btn { flex: 1; }

/* ─── fazy animacji wpłaty ─── */
.atm-dots::after { content: ''; animation: atm-dots 1.1s steps(4, end) infinite; }
@keyframes atm-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.atm-bar { position: relative; height: 5px; border-radius: 4px; background: rgba(143,240,181,.18); overflow: hidden; margin-top: 10px; }
.atm-bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #8ff0b5; border-radius: 4px;
  animation: atm-bar .85s var(--ease-out) forwards; }
@keyframes atm-bar { to { width: 100%; } }

.atm-ok { position: relative; margin-top: 8px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(143,240,181,.16); display: flex; align-items: center; justify-content: center;
  animation: atm-ok-stamp .46s var(--ease-out) both; }
.atm-ok svg { width: 22px; height: 22px; color: #8ff0b5; }
@keyframes atm-ok-stamp {
  0%   { transform: scale(.4) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.atm-note {
  position: absolute; left: 50%; top: 50%; width: 190px; height: 92px; border-radius: 7px;
  margin-left: -95px; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(48deg, rgba(255,255,255,.10) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #1f7a4d, #2fa86a 55%, #1f7a4d);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.18);
  color: #eafff2; font-weight: 800; letter-spacing: .04em; font-size: 17px;
  transform: translate(var(--nx,0), calc(var(--ny,0px) + 300px)) rotate(-7deg);
  opacity: 0;
}
.atm-note.fly { animation: atm-note-in .52s cubic-bezier(.5,0,.55,1) forwards; }
@keyframes atm-note-in {
  from { transform: translate(var(--nx,0), calc(var(--ny,0px) + 300px)) rotate(-7deg) scale(.94); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: translate(var(--nx,0), var(--ny,0px)) rotate(0deg) scale(1); opacity: 1; }
}
.atm-note.eat { animation: atm-note-eat .32s cubic-bezier(.6,0,.9,.5) forwards; transform-origin: 50% 100%; }
@keyframes atm-note-eat {
  from { transform: translate(var(--nx,0), var(--ny,0px)) scaleY(1); opacity: 1; }
  to   { transform: translate(var(--nx,0), calc(var(--ny,0px) + 74px)) scaleY(.02); opacity: .12; }
}

.atm-receipt {
  position: absolute; left: 50%; bottom: 8px; width: 220px; margin-left: -110px; z-index: 4;
  background: #fdfdfb; color: #1a1a1c; border-radius: 3px; padding: 12px 14px;
  font-size: 11.5px; line-height: 1.6; pointer-events: none;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.55);
  transform: translateY(-6px) rotate(0deg); opacity: 0;
}
.atm-receipt.out { animation: atm-receipt-out .5s var(--ease-out) forwards; }
@keyframes atm-receipt-out {
  from { transform: translateY(-6px) rotate(0); opacity: 0; }
  to   { transform: translateY(52px) rotate(.7deg); opacity: 1; }
}
.atm-r-h { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-align: center;
  border-bottom: 1px dashed #c9c9c4; padding-bottom: 7px; margin-bottom: 7px; color: #52525b; }
.atm-r-row { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.atm-r-row span:first-child { color: #71717a; }
.atm-r-row.total { border-top: 1px dashed #c9c9c4; margin-top: 7px; padding-top: 7px; }

/* ─── karta admina w kolumnie bocznej (wydatek jednorazowy) ─── */
.op-adm { border-style: dashed; }
.op-adm-hd { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.op-adm-hd svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.op-adm-tag {
  margin-left: auto; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  background: var(--muted); color: var(--text-3); border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}
.op-adm-s { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: 8px 0 13px; }

/* pole „tylko do odczytu" — data księgowania ustawia serwer */
.op-static {
  height: 44px; display: flex; align-items: center; padding: 0 13px;
  border: 1px dashed var(--border); border-radius: 11px; background: var(--muted);
  font-size: 14px; font-weight: 600; color: var(--text-2);
}

/* podgląd rozbicia wydatku na konta */
.op-split-prev { border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 13px; background: var(--surface-2); }
.op-sp-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 10px; }
.op-sp-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; }
.op-sp-row .avatar { width: 24px; height: 24px; font-size: 10px; flex-shrink: 0; }
.op-sp-lab { font-weight: 700; }
.op-sp-kw { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--error); }
.op-sp-po { font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.op-sp-po.neg { color: var(--error); font-weight: 800; }

/* ─── waluty obce ─── */
.fg-row.col3 { grid-template-columns: 1.4fr .8fr 1fr; }
.op-fx {
  display: inline-block; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--muted); color: var(--text-3); border-radius: 6px; padding: 1px 6px; margin-left: 4px;
  white-space: nowrap;
}
/* wybór waluty na bankomacie — klawisze maszyny, nie kontrolki formularza */
.atm-waluty { display: flex; gap: 6px; margin-bottom: 10px; }
.atm-wal {
  flex: 1; padding: 7px 4px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #d6d6dd; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  transition: background .15s, border-color .15s, color .15s;
}
.atm-wal:hover { background: rgba(255,255,255,.11); }
.atm-wal.on { background: #8ff0b5; border-color: #8ff0b5; color: #0b1a12; }
.atm-line.warn { color: #ffd27a; font-weight: 800; }

/* ─── dark: poprawki modułu ─── */
html[data-theme="dark"] .op-hero-split { border-top-color: rgba(255,255,255,.10); }
html[data-theme="dark"] .op-split-prev { background: var(--surface); }
html[data-theme="dark"] .op-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
html[data-theme="dark"] .op-chip:hover { background: rgba(255,255,255,.10); }
html[data-theme="dark"] .op-chip.me { border-color: rgba(255,255,255,.26); }
html[data-theme="dark"] .op-warn.ok   { background: rgba(22,163,74,.16);  color: #6ee7a0; }
html[data-theme="dark"] .op-warn.warn { background: rgba(217,119,6,.18);  color: #fbbf5a; }
html[data-theme="dark"] .op-warn.err  { background: rgba(220,38,38,.16);  color: #ff9d9d; }
html[data-theme="dark"] .op-editbar { background: var(--surface-2); }
html[data-theme="dark"] .atm { background: linear-gradient(180deg, #17171c, #121216); }
html[data-theme="dark"] .atm-tray { background: linear-gradient(180deg, #17171c, #0f0f13); }
html[data-theme="dark"] .atm-key { background: var(--surface-2); }
html[data-theme="dark"] .atm-input { background: var(--surface-2); }

/* ─── responsywność ─── */
@media (max-width: 1080px) {
  .op-grid { grid-template-columns: 1fr; }
  .op-side { position: static; }
}
@media (max-width: 640px) {
  .fg-row.col3 { grid-template-columns: 1fr 1fr; }
  .fg-row.col3 .fg:last-child { grid-column: 1 / -1; }
  .op-hero-split { grid-template-columns: repeat(2, 1fr); }
  .op-hero .stat-value { font-size: 34px; }
  .op-editbar-acts { width: 100%; }
  .op-editbar-acts .btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   DŹWIĘK I EFEKTY (assets/sfx.js) — append-only.
   Kanwa efektów, pierścień kliknięcia, błysk krawędzi, panel ustawień
   i przycisk „Dźwięk" w stopce sidebara.
   Warstwy: kanwa/pierścień 9998 (pod toastem 9999), panel 10000.
   ═══════════════════════════════════════════════════════════════ */
.fx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }

.fx-ring {
  position: fixed; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; border: 1.5px solid var(--accent);
  opacity: .5; pointer-events: none; z-index: 9998;
  animation: fx-ring-out .55s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fx-ring-out {
  from { transform: scale(1); opacity: .5; }
  to   { transform: scale(9); opacity: 0; }
}

.fx-edge {
  position: fixed; inset: 0; pointer-events: none; z-index: 9997; opacity: 0;
  box-shadow: inset 0 0 70px -18px var(--fx-edge-color, transparent);
}
.fx-edge.go { animation: fx-edge-flash .62s var(--ease-out); }
@keyframes fx-edge-flash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fx-ring, .fx-edge { display: none; }
}

/* ─── przycisk w stopce sidebara ─── */
.sb-logout.sfx-btn:hover { background: #1a1a1a; color: #fff; }
.sb-logout.sfx-btn.muted { color: rgba(255,255,255,.28); }

/* ─── panel ustawień ─── */
.sfx-panel {
  position: fixed; z-index: 10000; width: 316px; max-width: calc(100vw - 24px);
  max-height: min(78vh, 660px); overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); color: var(--text);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform-origin: bottom left;
  transition: opacity .18s, visibility .18s;
}
.sfx-panel.show {
  opacity: 1; visibility: visible; pointer-events: auto;
  animation: pop-in .26s var(--ease-out);
}
.sfx-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px 11px; border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.sfx-title { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.sfx-x {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; border: none;
  background: transparent; color: var(--text-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.sfx-x:hover { background: var(--muted); color: var(--text); }
.sfx-x svg { width: 15px; height: 15px; }
.sfx-body { padding: 8px 14px 14px; }

.sfx-sec {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin: 14px 0 7px;
}
.sfx-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
/* globalne `label` w tym arkuszu jest KAPITALIKAMI (linia ~646) — panel ma
   normalny tekst, więc kasujemy transformację i kerning na własnych wierszach */
label.sfx-row, .sfx-lbl, .sfx-lbl em {
  text-transform: none; letter-spacing: normal;
}
.sfx-lbl { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); display: flex; flex-direction: column; gap: 1px; }
.sfx-lbl em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-3); }
.sfx-tgl { cursor: pointer; }
.sfx-val { font-size: 11.5px; font-weight: 700; color: var(--text-3); width: 34px; text-align: right; flex-shrink: 0; }

/* przełącznik */
.sfx-sw { position: relative; flex-shrink: 0; width: 38px; height: 22px; }
.sfx-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.sfx-sw i {
  position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong);
  transition: background .18s var(--ease-out);
}
.sfx-sw i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease-out);
}
.sfx-sw input:checked + i { background: var(--success); }
.sfx-sw input:checked + i::after { transform: translateX(16px); }
.sfx-sw input:focus-visible + i { box-shadow: 0 0 0 3px var(--focus-ring); }

/* suwak głośności */
.sfx-range { flex: 1; height: 4px; accent-color: var(--accent); cursor: pointer; }

/* zestawy brzmień */
.sfx-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sfx-pack {
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2); font-family: inherit;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .15s var(--ease-out);
}
.sfx-pack:hover { border-color: var(--border-strong); color: var(--text); }
.sfx-pack:active { transform: scale(.97); }
.sfx-pack.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* podgląd dźwięków */
.sfx-tests { display: flex; flex-wrap: wrap; gap: 5px; }
.sfx-mini {
  padding: 5px 9px; border-radius: 8px; border: 1px solid var(--border-soft);
  background: var(--surface-2); color: var(--text-2); font-family: inherit;
  font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, transform .12s var(--ease-out);
}
.sfx-mini:hover { border-color: var(--border-strong); color: var(--text); }
.sfx-mini:active { transform: scale(.94); }
.sfx-foot { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }

/* status zapisu — normalnie cichy podpis, po zmianie mignie na zielono,
   a gdy przeglądarka nie przyjmuje localStorage, mówi o tym wprost */
.sfx-zapis { margin-top: 10px; font-size: 11px; font-weight: 600; line-height: 1.45; color: var(--text-3); transition: color .2s; }
.sfx-zapis.ok { color: var(--success); }
.sfx-zapis.zle { color: var(--error); }

/* wyłączony główny włącznik — reszta przygaszona, ale nadal klikalna */
.sfx-panel.off .sfx-sec,
.sfx-panel.off .sfx-row:not(:first-child),
.sfx-panel.off .sfx-packs,
.sfx-panel.off .sfx-tests { opacity: .45; }

@media (max-width: 720px) {
  .sfx-panel { width: calc(100vw - 24px); }
}

/* ═══════════════════════════════════════════════════════════════
   GODZINY PRACY — zegar, licznik i księga godzin (assets/godziny.js)
   Akcent modułu: --gd-accent (kolor współpracownika z ASSIGNEES),
   ustawiany w JS na #view; fallback = fiolet Kacpra.
   ═══════════════════════════════════════════════════════════════ */
.gd-loading { padding: 60px 0; text-align: center; color: var(--text-3); }

/* ── hero: zegar + start/stop ── */
.gd-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 24px 32px; margin-bottom: 18px; }
.gd-clock-wrap { width: 216px; height: 216px; margin-bottom: 10px; transition: opacity .45s var(--ease-out), filter .45s var(--ease-out); }
.gd-hero.idle .gd-clock-wrap { opacity: .6; filter: saturate(.45); }
.gd-clock { width: 100%; height: 100%; display: block; }
.gd-face { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.6; }
.gd-tick { stroke: var(--border-strong); stroke-width: 1.3; }
.gd-tick.big { stroke: var(--text-3); stroke-width: 2.6; }
.gd-hand { stroke: var(--text); stroke-linecap: round; }
.gd-h { stroke-width: 5.4; }
.gd-m { stroke-width: 3.4; }
.gd-s { stroke: var(--gd-accent, #7c3aed); stroke-width: 1.8; }
.gd-cap { fill: var(--text); }
.gd-cap2 { fill: var(--gd-accent, #7c3aed); }
/* tykanie: skok co sekundę z lekkim sprężynowaniem; rotacje w JS liczone
   narastająco, żeby przejście 59s→0s nie kręciło wskazówki wstecz */
.gd-hand-g { transform-box: view-box; transform-origin: 50% 50%; transition: transform .17s cubic-bezier(.3,1.9,.45,.9); will-change: transform; }
.gd-hand-g.no-anim { transition: none; }
.gd-pulse { fill: none; stroke: var(--gd-accent, #7c3aed); stroke-width: 2; opacity: 0; transform-box: view-box; transform-origin: 50% 50%; }
.gd-hero.running .gd-pulse { animation: gd-pulse 2.6s var(--ease-out) infinite; }
@keyframes gd-pulse {
  0%   { transform: scale(.985); opacity: .5; }
  75%  { transform: scale(1.06);  opacity: 0; }
  100% { transform: scale(1.06);  opacity: 0; }
}

.gd-status { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.gd-status-sub { font-weight: 600; color: var(--text-3); }
.gd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gd-accent, #7c3aed); animation: gd-blink 1.7s ease-in-out infinite; }
@keyframes gd-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.gd-counter { font-size: 54px; font-weight: 800; letter-spacing: .015em; line-height: 1.15; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.gd-idle-t { font-size: 29px; margin-top: 4px; }
.gd-idle-s { color: var(--text-2); font-size: 14px; max-width: 400px; margin-top: 6px; }
.gd-note { max-width: 430px; margin: 14px 0 14px; min-height: 58px; }
.gd-bigbtn { height: 52px; padding: 0 32px; font-size: 15.5px; border-radius: 14px; }
.gd-hero.idle .gd-bigbtn { margin-top: 20px; }
.gd-admin-note { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.gd-warn { display: none; margin: 4px 0 2px; font-size: 13px; font-weight: 600; color: var(--warning); max-width: 430px; }
.gd-warn.show { display: block; }

/* ── statystyki ── */
.gd-bilans.ok { color: var(--success); }
.gd-bilans.minus { color: var(--error); }
.gd-bar { height: 6px; background: var(--muted); border-radius: 99px; overflow: hidden; margin: 8px 0 2px; }
.gd-bar i { display: block; height: 100%; border-radius: 99px; background: var(--gd-accent, #7c3aed); transition: width .6s var(--ease-out); }
.gd-bar i.full { background: var(--success); }

/* ── księga godzin ── */
.gd-ksiega-hd { margin-bottom: 4px; }
.gd-mnav { display: flex; align-items: center; gap: 10px; }
.gd-mbtn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); cursor: pointer; color: var(--text-2); transition: border-color .15s, color .15s; }
.gd-mbtn:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.gd-mbtn:disabled { opacity: .35; cursor: default; }
.gd-mbtn svg { width: 15px; height: 15px; }
.gd-mlabel { font-size: 17px; min-width: 132px; text-align: center; }

.gd-day-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 2px 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.gd-day-t { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.gd-day-today { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--gd-accent, #7c3aed); color: #fff; font-size: 10.5px; letter-spacing: .06em; }
.gd-day-sum { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }

.gd-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px dashed var(--border-soft); }
.gd-row:last-child { border-bottom: none; }
.gd-row-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13.5px; min-width: 112px; white-space: nowrap; }
.gd-now { color: var(--gd-accent, #7c3aed); }
.gd-sup { color: var(--text-3); font-size: 10px; margin-left: 2px; }
.gd-row-main { flex: 1; min-width: 0; }
.gd-row-note { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.gd-row-note.dim { color: var(--text-3); font-style: italic; }
.gd-row.open .gd-row-dur { color: var(--gd-accent, #7c3aed); }
.gd-chip { width: 22px; height: 22px; border-radius: 50%; background: var(--muted); color: var(--text-2); font-size: 9.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--border-strong); flex-shrink: 0; cursor: help; }
.gd-row-dur { font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-acts { display: inline-flex; gap: 4px; }
.gd-act { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 8px; color: var(--text-3); cursor: pointer; transition: background .15s, color .15s; }
.gd-act:hover { background: var(--muted); color: var(--text); }
.gd-act.danger:hover { color: var(--error); }
.gd-act svg { width: 15px; height: 15px; }
.gd-hint { font-size: 12.5px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }

/* datetime-local nie łapie się w globalny selektor inputów — wyrównujemy */
input[type=datetime-local] {
  width: 100%; height: 44px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 11px;
  font-size: 14px; font-family: inherit; color: var(--text);
  background: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input[type=datetime-local]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

@media (max-width: 640px) {
  .gd-clock-wrap { width: 176px; height: 176px; }
  .gd-counter { font-size: 42px; }
  .gd-mlabel { min-width: 0; }
  .gd-row { flex-wrap: wrap; }
  .gd-row-main { flex-basis: 100%; order: 5; padding-left: 2px; }
}

/* ── GODZINY v2: tablica rywalizacji ── */
.gd-tablica-card { margin-bottom: 22px; }
.gd-tablica-hd { margin-bottom: 10px; }
.gd-mlabel-sm { font-size: 13px; font-weight: 700; color: var(--text-2); }

.gd-t-row { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px dashed var(--border-soft); }
.gd-t-row:last-of-type { border-bottom: none; }
.gd-t-row.me { background: linear-gradient(90deg, transparent, var(--surface-2) 12%, var(--surface-2) 88%, transparent); border-radius: 10px; }
.gd-rank { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; background: var(--muted); color: var(--text-2); flex-shrink: 0; }
.gd-rank.r1 { background: #fbbf24; color: #451a03; }
.gd-rank.r2 { background: #d4d4d8; color: #27272a; }
.gd-rank.r3 { background: #d9a066; color: #431407; }
.gd-t-av { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }
.gd-t-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gd-t-name { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.gd-t-name em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.gd-t-seria { font-size: 11.5px; font-weight: 700; color: var(--warning); cursor: help; }
.gd-t-status { font-size: 12.5px; color: var(--text-3); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.gd-t-row.working .gd-t-status { color: var(--gd-accent, #7c3aed); }
.gd-t-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gd-accent, #7c3aed); animation: gd-blink 1.7s ease-in-out infinite; }

.gd-mini { width: 52px; height: 52px; flex-shrink: 0; opacity: .45; filter: saturate(.3); transition: opacity .3s, filter .3s; }
.gd-mini.on { opacity: 1; filter: none; }
.gd-mini .gd-clock { width: 100%; height: 100%; display: block; }
.gd-mini .gd-h { stroke-width: 4.5; }
.gd-mini .gd-m { stroke-width: 3; }
.gd-mini .gd-s { stroke-width: 1.6; }
.gd-mini .gd-face { stroke-width: 2; }
.gd-mini .gd-tick { stroke-width: 2; }
.gd-mini.on .gd-pulse { animation: gd-pulse 2.6s var(--ease-out) infinite; }

.gd-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 30px; flex-shrink: 0; }
.gd-spark i { width: 4px; border-radius: 2px 2px 0 0; background: var(--border-strong); min-height: 2px; }
.gd-spark i.on { background: var(--gd-accent, #7c3aed); opacity: .75; }
.gd-spark i.today { outline: 1.5px solid var(--text-3); outline-offset: 1px; }
.gd-spark i.on.today { opacity: 1; }

.gd-t-czas { display: flex; flex-direction: column; gap: 3px; min-width: 118px; flex-shrink: 0; }
.gd-t-czas b { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gd-bar.mini { margin: 0; height: 4px; width: 100%; }
.gd-t-cel { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.gd-t-pkt { display: flex; flex-direction: column; align-items: flex-end; min-width: 62px; flex-shrink: 0; }
.gd-t-pkt b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gd-t-pkt span { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }

.gd-t-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-2); }
.gd-legenda { color: var(--text-3); font-size: 12px; }

/* wybór członka w pasku edycji */
.gd-mchips { display: inline-flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 200px; }
.gd-mchip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 5px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.gd-mchip .avatar { width: 22px; height: 22px; font-size: 9px; }
.gd-mchip:hover { color: var(--text); border-color: var(--border-strong); }
.gd-mchip.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

@media (max-width: 900px) {
  .gd-spark { display: none; }
}
@media (max-width: 640px) {
  .gd-mini { display: none; }
  .gd-t-czas { min-width: 96px; }
  .gd-t-row { gap: 10px; }
}

/* ── GODZINY v3: notatka do poprawki + suma od zawsze ── */
/* Piąta karta („Łącznie od zawsze") nie mieści się w siatce 4-kolumnowej.
   Reguły MUSZĄ być za blokiem RESPONSIVE, bo nadpisują tam .stat-grid. */
.gd-stats { grid-template-columns: repeat(5, 1fr); }
.gd-stats .stat-value { font-size: 28px; }
.gd-total-card .stat-value { color: var(--gd-accent, #7c3aed); }
@media (max-width: 1320px) { .gd-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .gd-stats { grid-template-columns: repeat(2, 1fr); } }

.gd-t-total { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .01em; }

/* notatka: całe pole jest przyciskiem, ołówek wychodzi na hover */
.gd-note-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; border-radius: 8px;
  padding: 4px 8px; margin: -4px -8px;
  font: inherit; text-align: left; cursor: pointer;
  transition: background .15s;
}
.gd-note-btn:hover { background: var(--muted); }
.gd-note-btn .gd-row-note.dim { font-style: italic; }
.gd-note-pen { display: inline-flex; opacity: 0; flex-shrink: 0; color: var(--text-3); transition: opacity .15s; }
.gd-note-pen svg { width: 13px; height: 13px; }
.gd-note-btn:hover .gd-note-pen, .gd-note-btn:focus-visible .gd-note-pen { opacity: 1; }

.gd-row.editing { align-items: flex-start; }
.gd-note-edit { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 6px; }
.gd-note-edit textarea { min-height: 62px; }
.gd-note-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gd-note-acts .btn { height: 34px; padding: 0 14px; font-size: 13px; }
.gd-note-hint { font-size: 11.5px; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════
   FIT — ocena dopasowania firmy do nas (0–5 gwiazdek).
   `.ro` = wersja tylko do odczytu (karty CRM, tabela Klientów),
   bez `.ro` = picker w drawerze / na karcie klienta.
   ═══════════════════════════════════════════════════════════════ */
.fit-stars { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.fit-star { line-height: 0; display: inline-flex; }
.fit-star svg { width: 13px; height: 13px; fill: var(--muted); stroke: var(--border-strong); stroke-width: 1; transition: fill .12s, transform .12s var(--ease-out); }
.fit-star.on svg { fill: #f5b301; stroke: #e0a000; }
.fit-stars.md { gap: 4px; }
.fit-stars.md .fit-star svg { width: 22px; height: 22px; }
.fit-stars .btn-star { background: none; border: none; padding: 2px; cursor: pointer; line-height: 0; }
.fit-stars .btn-star:hover svg { transform: scale(1.15); }
.fit-stars .btn-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.fit-stars-lbl { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.fit-none { font-size: 11.5px; font-weight: 600; color: var(--text-3); }

/* w wierszu „Informacje" na karcie klienta gwiazdki mają zostać w jednej linii */
.info-row .v .fit-stars { flex-wrap: nowrap; }
.info-row .v .fit-stars.md .fit-star svg { width: 19px; height: 19px; }

/* gwiazdki na karcie w CRM — w stopce, obok wartości/źródła */
.kcard-fit { display: inline-flex; align-items: center; }
.kcard-foot .fit-star svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════
   KONTROLER (centrum dowodzenia pary marek+julian)
   ═══════════════════════════════════════════════ */
.ktr-member { border: 1px solid var(--border-soft); border-radius: 13px; padding: 12px 14px; margin-bottom: 10px; }
.ktr-member:last-child { margin-bottom: 0; }
.ktr-mem-head { display: flex; align-items: center; gap: 10px; }
.ktr-mem-meta { flex: 1; min-width: 0; }
.ktr-mem-meta .n { font-weight: 800; font-size: 14px; }
.ktr-mem-meta .s { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.ktr-online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-right: 5px; animation: ktr-pulse 1.6s ease-in-out infinite; }
@keyframes ktr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ktr-mem-tasks { margin-top: 9px; border-top: 1px dashed var(--border-soft); padding-top: 3px; }
.ktr-task { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; }
.ktr-task .t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktr-task:hover .t { text-decoration: underline; }
.ktr-task .due { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ktr-task .due.overdue { color: var(--error); }
.ktr-more { display: inline-block; font-size: 12px; font-weight: 700; color: var(--text-2); text-decoration: none; padding: 4px 0 1px; }
.ktr-more:hover { color: var(--text); }
a.icon-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* dyrektywy: karty listy + wątek wyjaśnień w szufladzie */
.dyr-list { display: flex; flex-direction: column; gap: 10px; }
.dyr-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.dyr-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.dyr-card.attn { border-color: var(--warning); }
.dyr-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dyr-card-top .when { margin-left: auto; font-size: 12px; color: var(--text-3); }
.dyr-title { font-size: 15px; font-weight: 800; margin-top: 8px; }
.dyr-excerpt { font-size: 13px; color: var(--text-2); margin-top: 4px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dyr-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.dyr-attn-tag { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--warning); text-transform: uppercase; letter-spacing: .05em; }
.dyr-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.dyr-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.dyr-wpis { display: flex; gap: 9px; }
.dyr-wpis-body { flex: 1; min-width: 0; }
.dyr-wpis-head { display: flex; gap: 8px; align-items: baseline; }
.dyr-wpis-head .a { font-size: 12.5px; font-weight: 800; }
.dyr-wpis-head .t { font-size: 11.5px; color: var(--text-3); }
.dyr-wpis-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.dyr-rozum { border: 1px solid rgba(124, 58, 237, .4); background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.dyr-rozum-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #7c3aed; margin-bottom: 5px; }
html[data-theme="dark"] .dyr-rozum-tag { color: #a78bfa; }
.dyr-akcept { border: 1px solid var(--success); background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.dyr-akcept-tag { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--success); margin-bottom: 5px; }
.dyr-akcept-tag svg { width: 12px; height: 12px; }
.dyr-sys { text-align: center; font-size: 12px; color: var(--text-3); padding: 2px 0; }
.dyr-rozum-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 9px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.dyr-rozum-check input { width: 15px; height: 15px; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }

/* notatnik operacyjny */
.ntk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ntk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-height: 150px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ntk-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ntk-card.pin { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.ntk-top { display: flex; align-items: center; gap: 8px; }
.ntk-pin-ico { margin-left: auto; color: var(--warning); display: inline-flex; }
.ntk-pin-ico svg { width: 14px; height: 14px; }
.ntk-title { font-weight: 800; font-size: 14px; }
.ntk-text { font-size: 12.5px; color: var(--text-2); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.ntk-foot { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-3); }

/* ═══════════════════════════════════════════════
   ZOBACZ JAKO — picker osoby + pasek trybu podglądu
   ═══════════════════════════════════════════════ */
.podglad-list { display: flex; flex-direction: column; gap: 6px; }
.podglad-opt {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
}
.podglad-opt:hover { border-color: var(--border-strong); background: var(--bg); }
.po-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.po-n { font-weight: 800; font-size: 14px; }
.po-r { font-size: 12px; color: var(--text-2); }
.po-go { color: var(--text-3); display: inline-flex; }
.po-go svg { width: 18px; height: 18px; }

.podglad-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 1200; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 999px;
  background: #1c1917; color: #fff; border: 1px solid #d97706;
  box-shadow: 0 12px 34px -8px rgba(0,0,0,.5); max-width: calc(100vw - 32px);
}
html[data-theme="dark"] .podglad-bar { background: #262010; border-color: #f59e0b; }
.podglad-bar .pb-dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; animation: ktr-pulse 1.6s ease-in-out infinite; }
.podglad-bar .pb-txt { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podglad-bar .pb-txt b { font-weight: 800; }
.podglad-bar .pb-ro { margin-left: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fbbf24; }
.podglad-bar .pb-back {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 7px 13px; border-radius: 999px; border: none; cursor: pointer;
  background: #f59e0b; color: #1c1917; font-weight: 800; font-size: 13px; font-family: inherit;
}
.podglad-bar .pb-back:hover { background: #fbbf24; }
.podglad-bar .pb-back svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .podglad-bar .pb-ro { display: none; }
  .podglad-bar .pb-back span, .podglad-bar .pb-back { font-size: 12px; }
}

/* w trybie podglądu toast nie może zasłaniać paska „Wróć do konta" na dole */
body.is-podglad .toast { bottom: 80px; }

/* ═══════════════════════════════════════════════
   KONTROLER v2 (priorytety, wymaga uwagi, blokery,
   termin/cykl dyrektyw, odprawa, ludzie 1:1)
   ═══════════════════════════════════════════════ */
.btn.sm { padding: 6px 12px; font-size: 12.5px; }

/* priorytety tygodnia */
.prio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.prio-card { display: flex; gap: 11px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; cursor: pointer; background: var(--surface); transition: border-color .15s, transform .15s; }
.prio-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.prio-num { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.prio-main { min-width: 0; }
.prio-title { font-weight: 800; font-size: 14px; }
.prio-opis { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.4; }
.prio-add { grid-column: span 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 13px; border: 1.5px dashed var(--border-strong); border-radius: 13px; background: transparent; color: var(--text-2); cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; }
.prio-add:hover { color: var(--text); border-color: var(--text-3); }
.prio-add svg { width: 16px; height: 16px; }

/* wymaga uwagi */
.uwaga-list { display: flex; flex-direction: column; }
.uwaga-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: inherit; }
.uwaga-row:last-child { border-bottom: none; }
.uwaga-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--muted); }
.uwaga-ico svg { width: 15px; height: 15px; }
.uwaga-ico.w3 { background: #fee2e2; color: #dc2626; }
.uwaga-ico.w2 { background: #fef3c7; color: #d97706; }
.uwaga-ico.w1 { background: #dbeafe; color: #2563eb; }
html[data-theme="dark"] .uwaga-ico.w3 { background: rgba(220,38,38,.18); }
html[data-theme="dark"] .uwaga-ico.w2 { background: rgba(217,119,6,.18); }
html[data-theme="dark"] .uwaga-ico.w1 { background: rgba(37,99,235,.18); }
.uwaga-main { flex: 1; min-width: 0; }
.uwaga-txt { font-size: 13.5px; font-weight: 600; }
.uwaga-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.uwaga-go { color: var(--text-3); display: inline-flex; }
.uwaga-go svg { width: 16px; height: 16px; }

/* dyrektywy: termin + cykliczne */
.dyr-term { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.dyr-term svg { width: 13px; height: 13px; }
.dyr-term.late { color: var(--error); }
.dyr-card.late { border-color: var(--error); }
.dyr-attn-tag.late { color: var(--error); }
.dyr-zad { display: inline-flex; align-items: center; gap: 4px; }
.dyr-zad svg { width: 12px; height: 12px; }
.dyr-cykle { border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px; margin-bottom: 12px; background: var(--surface-2); }
.dyr-cykle-hd { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 8px; }
.dyr-cykle-hd svg { width: 14px; height: 14px; }
.dyr-cykl-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; border-top: 1px solid var(--border-soft); }
.dyr-cykl-row:first-of-type { border-top: none; }
.dyr-cykl-badge { font-size: 11px; font-weight: 800; color: #7c3aed; background: #ede9fe; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
html[data-theme="dark"] .dyr-cykl-badge { background: rgba(124,58,237,.22); color: #c4b5fd; }
.dyr-cykl-title { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dyr-cykl-title:hover { text-decoration: underline; }
.dyr-cykl-next { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* odprawa */
.odp-week-lbl, .odp-week { font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.odp-snap-grid, .odp-snap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.odp-block { border: 1px solid var(--border-soft); border-radius: 11px; padding: 10px 12px; }
.odp-block-hd { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); display: flex; justify-content: space-between; margin-bottom: 7px; }
.odp-block-hd span { color: var(--text); }
.odp-block-list { display: flex; flex-direction: column; gap: 4px; }
.odp-item { font-size: 12.5px; line-height: 1.4; }
.odp-late { color: var(--error); font-weight: 700; font-variant-numeric: tabular-nums; }
.odp-more { font-size: 12px; color: var(--text-3); }
.odp-empty { font-size: 12.5px; color: var(--text-3); }
.odp-saved { margin-top: 12px; font-size: 13px; color: var(--text-2); }
.odp-snap { margin-bottom: 6px; }

/* ludzie: równoważenie + karty 1:1 */
.ludzie-hint { display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; background: #fef3c7; border-radius: 11px; margin-bottom: 12px; font-size: 13px; line-height: 1.45; }
.ludzie-hint svg { width: 17px; height: 17px; flex-shrink: 0; color: #d97706; margin-top: 1px; }
html[data-theme="dark"] .ludzie-hint { background: rgba(217,119,6,.15); }
.lud-bars { display: flex; flex-direction: column; gap: 9px; }
.lud-bar-row { display: flex; align-items: center; gap: 11px; }
.lud-bar-lbl { display: flex; align-items: center; gap: 7px; width: 120px; flex-shrink: 0; font-weight: 700; font-size: 13px; }
.lud-bar-track { flex: 1; height: 10px; background: var(--muted); border-radius: 6px; overflow: hidden; }
.lud-bar-fill { height: 100%; border-radius: 6px; min-width: 3px; transition: width .4s var(--ease-out); }
.lud-bar-num { width: 90px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lud-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface); }
.lud-card-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lud-card-meta { flex: 1; min-width: 0; }
.lud-card-meta .n { font-weight: 800; font-size: 14px; }
.lud-card-meta .s { font-size: 12px; color: var(--text-2); }
.lud-notes { display: flex; flex-direction: column; gap: 6px; }
.lud-note { padding: 8px 10px; border-radius: 9px; background: var(--bg); cursor: pointer; }
.lud-note:hover { background: var(--muted); }
.lud-note-t { font-weight: 700; font-size: 13px; }
.lud-note-s { font-size: 12px; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 720px) {
  .prio-grid, .odp-snap-grid, .odp-snap { grid-template-columns: 1fr; }
  .lud-bar-lbl { width: 90px; }
}

/* ── dyrektywy: czyj ruch (jawny ruch_key / wyliczony) ── */
.dyr-ruch-tag { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

/* ── regularne zadania (stałe obowiązki) — zakładka w Zadaniach ── */
.reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.reg-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface); }
.reg-card-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.reg-card-meta { flex: 1; min-width: 0; }
.reg-card-meta .n { font-weight: 800; font-size: 14px; }
.reg-card-meta .s { font-size: 12px; color: var(--text-2); }
.reg-list { display: flex; flex-direction: column; }
.reg-row { display: flex; align-items: center; gap: 9px; padding: 9px 2px; border-top: 1px solid var(--border-soft); cursor: pointer; }
.reg-row:first-child { border-top: none; }
.reg-row .t { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-row:hover .t { text-decoration: underline; }
.reg-row.off { opacity: .5; }
.reg-row.off .t { text-decoration: line-through; }
.reg-freq { font-size: 11px; font-weight: 800; color: #0e7490; background: #cffafe; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
html[data-theme="dark"] .reg-freq { background: rgba(14,116,144,.28); color: #67e8f9; }
.reg-hrs { font-size: 12px; font-weight: 700; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.reg-until { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.reg-until.soon { color: var(--warning); font-weight: 700; }
.reg-empty { font-size: 12.5px; color: var(--text-3); padding: 8px 2px; }
.reg-edit-on { box-shadow: 0 0 0 2px var(--warning) inset; }

/* Kontroler / Ludzie: stałe obowiązki per osoba */
.lud-reg-foot { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .reg-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE — wersja na telefon (2026-08-28)
   Desktop bez zmian. Nawigacja: górna belka z hamburgerem
   (.m-appbar, renderowana przez mountMobileNav w app.js)
   + sidebar jako wysuwana szuflada z pełnymi etykietami.
   ══════════════════════════════════════════════════════════════ */
body.sb-locked { overflow: hidden; }
.m-appbar { display: none; }

@media (max-width: 767px) {
  /* ─ górna belka aplikacji ─ */
  .m-appbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 120;
    display: flex; align-items: center; gap: 4px;
    height: calc(54px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0 6px;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-soft);
  }
  .m-burger, .m-abtn {
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--text); border-radius: 12px;
    cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
  }
  .m-burger { width: 44px; height: 44px; }
  .m-burger svg { width: 22px; height: 22px; }
  .m-abtn { width: 40px; height: 40px; color: var(--text-2); }
  .m-abtn svg { width: 19px; height: 19px; }
  .m-logo { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--text); text-decoration: none; }
  /* ikona brandu jest biała (na ciemny sidebar) — na jasnej belce odwracamy */
  .m-logo img { width: 25px; height: 25px; filter: invert(1); }
  html[data-theme="dark"] .m-logo img { filter: none; }
  .m-appbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .m-appbar .avatar { width: 31px; height: 31px; font-size: 11.5px; }

  /* ─ sidebar → szuflada ─ */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 200;
    width: min(304px, 86vw); min-width: 0;
    padding-top: env(safe-area-inset-top, 0px);
    transform: translateX(-103%); transition: transform .28s var(--ease-out);
  }
  .sidebar.m-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sb-overlay { z-index: 150; background: rgba(8,8,10,.5); }
  .app-page > .app-content { margin-left: 0; }
  .app-content { padding: calc(66px + env(safe-area-inset-top, 0px)) 14px calc(48px + env(safe-area-inset-bottom, 0px)); }

  /* strona czatu: bez nagłówka strony, pełna wysokość minus belka */
  .chat-main .topbar { display: none; }
  .chat-main { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }

  /* ─ nagłówki stron / akcje ─ */
  .topbar { row-gap: 10px; }
  .topbar-right { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
  .page-title { font-size: 22px; }

  /* ─ przełączniki .seg przewijane palcem zamiast rozpychania strony ─ */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex-shrink: 0; }

  /* ─ wiersze list (zadania, opłaty): prawa strona może zejść pod tytuł ─ */
  .task-row { flex-wrap: wrap; row-gap: 6px; }
  .task-main { min-width: 170px; }
  .task-right { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }

  /* ─ drawery pełnoekranowe ─ */
  .drawer { width: 100vw; height: 100dvh; border-left: none; }
  .drawer-head { padding: 14px 16px; }
  .drawer-body { padding: 18px 16px; }
  .drawer-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }

  /* ─ cmd-k ─ */
  .cmdk-overlay { padding: 6vh 10px 10px; }
  .cmdk-list { max-height: 46vh; }

  /* ─ karta klienta: informacje z gwiazdkami fit mogą się zawijać ─ */
  .info-row { flex-wrap: wrap; }
  .info-row .v { text-align: right; }
  .fit-stars { flex-wrap: wrap; justify-content: flex-end; }

  /* ─ CRM: kanban przewijany z dosnapowaniem kolumn ─ */
  .board-scroll { scroll-snap-type: x proximity; scroll-padding-left: 4px; -webkit-overflow-scrolling: touch; }
  .kcol { scroll-snap-align: start; }

  /* ─ godziny: tablica rywalizacji — czasy schodzą pod nazwisko ─ */
  .gd-t-row { flex-wrap: wrap; row-gap: 2px; }
  .gd-spark { display: none; }
  .gd-t-main { min-width: 130px; }
  .gd-t-czas { order: 10; flex-basis: 100%; min-width: 0; padding-left: 64px; }
  .gd-t-czas b { font-size: 13.5px; }

  /* ─ formularze: 16 px, żeby iOS nie zoomował przy fokusie ─ */
  input[type=text], input[type=email], input[type=password], input[type=search],
  input[type=number], input[type=url], input[type=tel], input[type=date], input[type=time],
  textarea, select, .cmdk-input-row input { font-size: 16px; }
}

/* ─── ZAŁĄCZNIKI ZADAŃ (chipy reużywają .draft-item ze szkicu czatu) ─── */
.att-list { display: flex; flex-wrap: wrap; gap: 8px; }
.att-list:not(:empty) { margin-bottom: 10px; }
.att-list .draft-item.saved { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.att-list .draft-item.saved:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.att-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.att-row .btn.sm svg { width: 13px; height: 13px; }
.att-hint { font-size: 12px; color: var(--text-3); }
.task-att { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); }