:root {
    --c-bg: #0f1115; --c-surface: #1a1d24; --c-surface-2: #232730;
    --c-text: #e9edf2; --c-text-muted: #9aa4b2; --c-border: #2c313c;
    --c-primary: #4f7cff; --c-primary-hover: #3b66e6;
    --c-success: #28c08a; --c-warning: #f5a524; --c-danger: #f04438;
    --c-low: #6b7280; --c-medium: #3b82f6; --c-high: #f59e0b; --c-critical: #ef4444;
    --r-sm: 8px; --r-md: 12px; --r-pill: 999px;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
body { min-height: 100dvh; background: var(--c-bg); color: var(--c-text); font: 400 15px/1.5 var(--font); }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--c-text-muted); font-size: 14px; }
.h1 { font-size: 22px; margin-bottom: 8px; }
.h2 { font-size: 17px; margin: 24px 0 8px; }

/* Formularze / przyciski */
input, select, button { font: inherit; }
input, select { height: 40px; padding: 0 12px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text); }
input[type="checkbox"] { height: auto; }
input:focus, select:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text); font-weight: 600; cursor: pointer; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--c-primary); border-color: transparent; color: #fff; }
.btn--secondary { background: var(--c-surface-2); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--c-text-muted); }
.btn--ghost:hover { color: var(--c-text); background: var(--c-surface-2); }

/* Auth */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.auth__card { width: 100%; max-width: 380px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 28px; }
.auth__brand { font-size: 20px; margin-bottom: 20px; text-align: center; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--c-text-muted); }
.form-error { background: color-mix(in srgb, var(--c-danger) 18%, transparent); color: var(--c-danger); padding: 10px 12px; border-radius: var(--r-md); margin-bottom: 14px; font-size: 14px; }

/* Topbar */
.topbar { display: flex; align-items: center; gap: 20px; padding: 12px 20px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.brand { font-weight: 700; color: var(--c-text); }
.nav { display: flex; gap: 6px; }
.navlink { padding: 6px 12px; border-radius: var(--r-md); color: var(--c-text-muted); }
.navlink:hover { color: var(--c-text); text-decoration: none; }
.navlink.is-active { background: var(--c-surface-2); color: var(--c-text); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.shell { max-width: 820px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 16px; }
.flash { background: color-mix(in srgb, var(--c-success) 16%, transparent); color: var(--c-success); padding: 10px 14px; border-radius: var(--r-md); }

.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 16px; }
.row-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; min-width: 180px; }
.inline-form { display: inline; margin: 0; }
.checkline { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-muted); font-size: 14px; }

/* Chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 6px 14px; border: 1px solid var(--c-border); border-radius: var(--r-pill); color: var(--c-text-muted); font-size: 13px; font-weight: 600; }
.chip:hover { color: var(--c-text); text-decoration: none; }
.chip.is-active { background: var(--c-primary); border-color: transparent; color: #fff; }

/* Lista */
.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.item__body { flex: 1; min-width: 0; }
.item__title { font-weight: 600; }
.item.is-done .item__title { text-decoration: line-through; color: var(--c-text-muted); }
.meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--c-text-muted); }
.tag { padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-surface-2); }
.check { width: 22px; height: 22px; accent-color: var(--c-success); cursor: pointer; }
.empty { padding: 24px; text-align: center; }
.swatch { width: 18px; height: 18px; border-radius: var(--r-sm); border: 1px solid var(--c-border); flex: none; }

.prio { padding: 2px 8px; border-radius: var(--r-pill); color: #fff; font-weight: 600; }
.prio--low { background: var(--c-low); } .prio--medium { background: var(--c-medium); }
.prio--high { background: var(--c-high); } .prio--critical { background: var(--c-critical); }
.stale--warning { background: color-mix(in srgb, var(--c-warning) 18%, transparent); color: var(--c-warning); }
.stale--alert { background: color-mix(in srgb, var(--c-danger) 18%, transparent); color: var(--c-danger); }

.progress { height: 6px; margin-top: 8px; background: var(--c-surface-2); border-radius: var(--r-pill); overflow: hidden; }
.progress__bar { height: 100%; background: var(--c-success); }

.item select { height: 34px; max-width: 160px; }
.cal-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-surface-2); }
.bell { position: relative; font-size: 18px; text-decoration: none; }
.bell__badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--c-danger); color: #fff; font-size: 11px; line-height: 16px; text-align: center; font-weight: 700; }
.qr { width: 120px; height: 120px; flex: none; background: #fff; border-radius: var(--r-sm); padding: 6px; }
.qr svg { width: 100%; height: 100%; display: block; }
.invite-link { width: 100%; margin-top: 8px; font-size: 13px; }
.topbar__right select { height: 34px; max-width: 180px; }

/* Pulpit — kafelki */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.tile:hover { text-decoration: none; border-color: var(--c-primary); }
.tile__num { font-size: 30px; font-weight: 700; color: var(--c-text); }
.tile__lbl { font-size: 13px; color: var(--c-text-muted); }

/* Kalendarz miesiąca */
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { text-align: center; font-size: 12px; font-weight: 700; color: var(--c-text-muted); padding: 4px 0; }
.cal-cell { min-height: 96px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-cell--out { opacity: .45; }
.cal-cell--today { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.cal-day { font-size: 12px; font-weight: 600; color: var(--c-text-muted); }
.cal-ev { font-size: 11px; line-height: 1.3; padding: 1px 6px; border-radius: var(--r-pill); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 11px; color: var(--c-text-muted); }
.cal-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ev--prio-low { background: var(--c-low); } .ev--prio-medium { background: var(--c-medium); }
.ev--prio-high { background: var(--c-high); } .ev--prio-critical { background: var(--c-critical); }
.ev--project { background: #8b5cf6; } .ev--payment { background: var(--c-warning); }

@media (max-width: 640px) {
    .cal-cell { min-height: 64px; }
    .cal-ev { font-size: 10px; }
}