/* ===== TutedoFlow 2.0 · tokeny, reset, typografia, przyciski, formularze ===== */
:root {
  --ah: 250; --as: 84%; --al: 62%;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sidebar-w: 252px;
  --topbar-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d12;
  --bg-2: #0f1218;
  --card: #141821;
  --card-2: #1a1f2b;
  --card-3: #212837;
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .13);
  --text: #eef0f6;
  --text-2: #a7aec0;
  --text-3: #727a8e;
  --good: #3ddc9a; --good-soft: rgba(61, 220, 154, .13);
  --warn: #f6b93b; --warn-soft: rgba(246, 185, 59, .13);
  --danger: #ff6b7a; --danger-soft: rgba(255, 107, 122, .13);
  --info: #6aa8ff; --info-soft: rgba(106, 168, 255, .13);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 8px 24px rgba(0, 0, 0, .35);
  --glass: rgba(11, 13, 18, .78);
  --sl: 64%;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-2: #eceff6;
  --card: #ffffff;
  --card-2: #f5f7fb;
  --card-3: #ebeef6;
  --line: rgba(20, 28, 54, .085);
  --line-2: rgba(20, 28, 54, .15);
  --text: #0e1424;
  --text-2: #525c75;
  --text-3: #8791a8;
  --good: #079669; --good-soft: rgba(7, 150, 105, .11);
  --warn: #b9770a; --warn-soft: rgba(217, 140, 10, .13);
  --danger: #d63048; --danger-soft: rgba(214, 48, 72, .1);
  --info: #2563d8; --info-soft: rgba(37, 99, 216, .1);
  --shadow-sm: 0 1px 2px rgba(20, 28, 54, .06);
  --shadow: 0 10px 30px -14px rgba(20, 28, 54, .22), 0 2px 6px rgba(20, 28, 54, .05);
  --shadow-lg: 0 30px 80px -24px rgba(20, 28, 54, .35), 0 8px 24px rgba(20, 28, 54, .08);
  --glass: rgba(244, 246, 251, .8);
  --sl: 46%;
}
:root {
  --accent: hsl(var(--ah) var(--as) var(--al));
  --accent-hi: hsl(calc(var(--ah) + 18) var(--as) calc(var(--al) + 6%));
  --accent-soft: hsl(var(--ah) var(--as) var(--al) / .14);
  --accent-soft-2: hsl(var(--ah) var(--as) var(--al) / .24);
  --accent-text: hsl(var(--ah) calc(var(--as) - 4%) calc(var(--al) + 14%));
}
:root[data-theme="light"] { --accent-text: hsl(var(--ah) var(--as) calc(var(--al) - 8%)); }

/* kolor ucznia: --h ustawiane inline */
.avatar, .ev, .tl-item, .inbox-row, .mpill, .mcell-dots i, .student-card, .trow, .row-btn, .swatch,
.hero-next, .lesson-hero, .pal-item, .profile-hero, .page { --sc: hsl(var(--h, 220) 72% var(--sl)); --sc-soft: hsl(var(--h, 220) 72% var(--sl) / .16); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.no-scroll, html.no-scroll body { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; min-height: 100dvh; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button:disabled { cursor: not-allowed; }
img, svg { display: block; max-width: 100%; }
.ico { flex: none; }
kbd { font-family: inherit; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: var(--card-3); color: var(--text-2); border: 1px solid var(--line); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--card-3); padding: 2px 6px; border-radius: 6px; }
::selection { background: var(--accent-soft-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }

/* ---- utilities ---- */
.muted { color: var(--text-3); }
.text-good { color: var(--good); } .text-danger { color: var(--danger); } .text-warn { color: var(--warn); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }
.pad { padding: 14px 4px; } .pad-b { padding-bottom: 12px; } .pad-t { padding-top: 12px; }
.link { color: var(--accent-text); } .link:hover { text-decoration: underline; }
.link-btn { color: var(--accent-text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.link-btn:hover { text-decoration: underline; }
.btn-danger-text { color: var(--danger) !important; }
.grad { background: linear-gradient(100deg, var(--accent-hi), #3ec6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 720px) { .hide-sm { display: none !important; } }

/* ---- przyciski ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r);
  font-weight: 600; font-size: 14px; white-space: nowrap; border: 1px solid transparent; transition: transform .12s var(--ease), background .15s, border-color .15s, box-shadow .2s, opacity .15s;
  text-align: center; user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .55; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; gap: 6px; }
.btn-lg { height: 50px; padding: 0 22px; font-size: 15px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn-icon-only { width: 40px; padding: 0; } .btn-sm.btn-icon-only { width: 34px; }
.btn-primary { color: #fff; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 6px 18px -6px hsl(var(--ah) var(--as) var(--al) / .65), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 8px 22px -6px hsl(var(--ah) var(--as) var(--al) / .75), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-secondary { background: var(--card-2); border-color: var(--line-2); color: var(--text); }
.btn-secondary:hover:not(:disabled) { background: var(--card-3); }
.btn-ghost { color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--card-2); color: var(--text); }
.btn-danger { color: #fff; background: linear-gradient(180deg, #ff7e8b, #e5384f); box-shadow: 0 6px 18px -6px rgba(229, 56, 79, .6); }
.btn-success { color: var(--good); background: var(--good-soft); border-color: transparent; }
.btn-success:hover:not(:disabled) { background: var(--good); color: #052a1c; }
.btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; } .btn-group .btn:first-child { border-radius: 10px 0 0 10px; } .btn-group .btn:last-child { border-radius: 0 10px 10px 0; margin-left: -1px; }
.btn-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.btn-row-wrap { flex-wrap: wrap; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; display: inline-grid; place-items: center; color: var(--text-2); transition: background .15s, color .15s; flex: none; }
.icon-btn:hover { background: var(--card-2); color: var(--text); }

/* ---- formularze ---- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field-hint { font-size: 12px; color: var(--text-3); }
.input {
  width: 100%; height: 44px; padding: 0 14px; border-radius: var(--r); background: var(--card-2); border: 1px solid var(--line-2); color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s; outline: none; min-width: 0;
}
textarea.input { height: auto; padding: 11px 14px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: var(--text-3); }
.input:hover { border-color: var(--line-2); background: var(--card-3); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--card-2); }
.input-lg { height: 54px; font-size: 20px; font-weight: 700; }
.input-sm { height: 34px; font-size: 13px; padding: 0 10px; border-radius: 10px; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
select.input option { background: var(--card); color: var(--text); }
input[type="date"], input[type="time"] { min-height: 44px; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; filter: invert(var(--invert, 0)); }
:root[data-theme="dark"] { --invert: 1; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .form-row, .form-row-3 { grid-template-columns: 1fr 1fr; } .form-row-3 .field:first-child { grid-column: 1 / -1; } }
.form-row.when-weekday { grid-template-columns: minmax(0, 1fr) 146px; }
.form-row.when-weekday .input { min-width: 0; }
.wd-group { gap: 6px; }
.wd-group .chip-radio { flex: 1 1 0; min-width: 34px; }
.wd-group .chip-radio span { display: flex; justify-content: center; width: 100%; padding: 7px 0; }
@media (max-width: 520px) { .form-row.when-weekday { grid-template-columns: 1fr; } }
.form-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin: 8px 0 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.form-error { padding: 10px 14px; border-radius: var(--r); background: var(--danger-soft); color: var(--danger); font-weight: 500; margin-bottom: 14px; }

/* chipy / przełączniki */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; background: var(--card-3); color: var(--text-2); white-space: nowrap; }
.chip-good { background: var(--good-soft); color: var(--good); } .chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-danger { background: var(--danger-soft); color: var(--danger); } .chip-info { background: var(--info-soft); color: var(--info); }
.chip-accent { background: var(--accent-soft); color: var(--accent-text); } .chip-muted { background: var(--card-3); color: var(--text-3); }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { padding: 6px 13px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--text-2); transition: all .15s; }
.chip-btn:hover { background: var(--card-3); color: var(--text); }
.chip-btn.is-active, .chip-btn.active { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.chip-radio { position: relative; cursor: pointer; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio span { display: inline-flex; padding: 7px 14px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--text-2); transition: all .15s; }
.chip-radio:hover span { background: var(--card-3); }
.chip-radio input:checked + span { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.mood-group .chip-radio span { min-width: 40px; justify-content: center; }

.toggle { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 4px 0; margin-bottom: 8px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-ui { flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--card-3); border: 1px solid var(--line-2); position: relative; transition: background .2s, border-color .2s; margin-top: 1px; }
.toggle-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: transform .22s var(--ease), background .2s; }
.toggle input:checked + .toggle-ui { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-ui::after { transform: translateX(18px); background: #fff; }
.toggle input:focus-visible + .toggle-ui { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle-text { display: flex; flex-direction: column; gap: 2px; }
.toggle-label { font-weight: 500; }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; cursor: pointer; width: 32px; height: 32px; display: inline-grid; place-items: center; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch span { width: 26px; height: 26px; border-radius: 50%; background: var(--sc); transition: transform .15s var(--ease), box-shadow .15s; }
.swatch:hover span { transform: scale(1.1); }
.swatch input:checked + span, .swatch-btn.is-sel span { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--sc); transform: scale(1.02); }
.swatch-btn span { background: hsl(var(--h) 80% 58%); }
.swatch-btn.is-sel span { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px hsl(var(--h) 80% 58%); }

.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; }
.segmented button { padding: 6px 14px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--text-2); transition: all .15s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--card-3); color: var(--text); box-shadow: var(--shadow-sm); }
:root[data-theme="light"] .segmented button.active { background: #fff; }
.segmented-sm button { padding: 4px 10px; font-size: 12.5px; }
.segmented button i { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--card-3); color: var(--text-3); }

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