/* Arrabona Tasks – felület
   Elrendezés: felső sáv + bal oldali menü + tartalom; mobilon a menü vízszintes fülsorrá alakul.
   Színek: élénk, elegáns bordó akcentus, enyhén bordó felé hajló meleg semlegesek; szemantikus színek külön.
   Betűk: rendszerbetűk (nincs külső betöltés → gyors és GDPR-barát). */

:root {
  --bg: #f6f4f4;
  --surface: #ffffff;
  --surface-2: #f2eeef;
  --surface-3: #e7e0e2;
  --border: #e2dadc;
  --border-strong: #c6b9bd;
  --fg: #24161b;
  --fg-muted: #5c4950;
  --fg-subtle: #75626a;
  --accent: #6b1428;
  --accent-hover: #520f1f;
  --accent-soft: #f3e7ea;
  --accent-fg: #ffffff;
  --brand: #5a1021;
  --brand-fg: #ffffff;
  --brand-2: #5a1021;
  --focus: #a3324d;
  --danger: #d1281c;
  --danger-soft: #fdecea;
  --warn: #8a5300;
  --warn-soft: #fdf2dc;
  --ok: #17693d;
  --ok-soft: #e3f4ea;
  --gold: #b7791f;
  --silver: #7b8794;
  --bronze: #a0522d;
  --shadow: 0 1px 2px rgb(36 22 27 / .06), 0 4px 14px rgb(36 22 27 / .06);
  --shadow-lg: 0 12px 40px rgb(36 22 27 / .18);

  --av-0: #6b1428; --av-1: #7a3e9d; --av-2: #1d7a55; --av-3: #b0451b;
  --av-4: #3b5bb8; --av-5: #8f5a00; --av-6: #a3285a; --av-7: #2f6f73;

  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --sidebar-w: 256px;
  --topbar-h: 60px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #130d10; --surface: #1d1418; --surface-2: #261b20; --surface-3: #32242a;
    --border: #3a2a31; --border-strong: #534049;
    --fg: #f1e8eb; --fg-muted: #c3b0b7; --fg-subtle: #a08c94;
    --accent: #d48a9b; --accent-hover: #e3a5b3; --accent-soft: #33171e; --accent-fg: #1e070d;
    --brand: #4a0d1b; --brand-fg: #ffffff; --brand-2: #4a0d1b;
    --focus: #e3a5b3;
    --danger: #ff8a80; --danger-soft: #3c1a18; --warn: #f0b64e; --warn-soft: #33270f; --ok: #6fcf97; --ok-soft: #143023;
    --gold: #e3b341; --silver: #b8c2cc; --bronze: #d08a5c;
    --shadow: 0 1px 2px rgb(0 0 0 / .4); --shadow-lg: 0 12px 40px rgb(0 0 0 / .55);
    --av-0: #d48a9b; --av-1: #b07ad1; --av-2: #4fb58a; --av-3: #e0875f;
    --av-4: #7f9be6; --av-5: #d3a24a; --av-6: #de6f9b; --av-7: #5fb0b4;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #130d10; --surface: #1d1418; --surface-2: #261b20; --surface-3: #32242a;
  --border: #3a2a31; --border-strong: #534049;
  --fg: #f1e8eb; --fg-muted: #c3b0b7; --fg-subtle: #a08c94;
  --accent: #d48a9b; --accent-hover: #e3a5b3; --accent-soft: #33171e; --accent-fg: #1e070d;
  --brand: #4a0d1b; --brand-fg: #ffffff; --brand-2: #4a0d1b;
  --focus: #e3a5b3;
  --danger: #ff8a80; --danger-soft: #3c1a18; --warn: #f0b64e; --warn-soft: #33270f; --ok: #6fcf97; --ok-soft: #143023;
  --gold: #e3b341; --silver: #b8c2cc; --bronze: #d08a5c;
  --shadow: 0 1px 2px rgb(0 0 0 / .4); --shadow-lg: 0 12px 40px rgb(0 0 0 / .55);
  --av-0: #d48a9b; --av-1: #b07ad1; --av-2: #4fb58a; --av-3: #e0875f;
  --av-4: #7f9be6; --av-5: #d3a24a; --av-6: #de6f9b; --av-7: #5fb0b4;
  color-scheme: dark;
}

/* ---------- Alapok ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 1rem/1.55 var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.25; margin: 0; text-wrap: balance; color: var(--fg); }
h1 { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }
img, svg { max-width: 100%; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--accent-fg); padding: .6rem 1rem; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--accent-fg); }
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); font-size: .875rem; }
.mono { font-family: var(--font-mono); font-size: .85em; font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- Felső sáv ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 1rem;
  padding-inline: 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  color: var(--fg); text-decoration: none; font-family: var(--font-display);
  font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em;
  min-width: calc(var(--sidebar-w) - 1rem);
}
.brand:hover { color: var(--fg); }
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand small { font-weight: 500; color: var(--fg-muted); font-size: .8rem; letter-spacing: .02em; }
.search {
  flex: 1; max-width: 640px; position: relative;
}
.search .icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--fg-subtle); pointer-events: none; }
.search input {
  width: 100%; height: 42px; padding: 0 1rem 0 2.5rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--surface-2); color: var(--fg); font: inherit;
}
.search input:hover { background: var(--surface-3); }
.search input:focus { background: var(--surface); border-color: var(--border-strong); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; border-radius: 999px; display: flex; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu[open] > summary .avatar { box-shadow: 0 0 0 3px var(--accent-soft); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .5rem; z-index: 40;
}
.menu-panel .who { padding: .6rem .75rem .75rem; border-bottom: 1px solid var(--border); margin-bottom: .35rem; }
.menu-panel .who strong { display: block; }
.menu-panel .who span { color: var(--fg-muted); font-size: .875rem; word-break: break-all; }
.menu-item {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: .55rem .75rem; border-radius: var(--radius-sm);
  color: var(--fg); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; text-align: left;
}
.menu-item:hover { background: var(--surface-2); color: var(--fg); }

/* ---------- Váz ---------- */
.shell { flex: 1; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.sidebar {
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: 1rem .75rem 1.5rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.sidebar .btn-new { margin: 0 .25rem 1rem; justify-content: flex-start; padding-inline: 1.1rem 1.4rem; height: 48px; border-radius: 16px; box-shadow: var(--shadow); }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem .9rem; border-radius: 999px;
  color: var(--fg); text-decoration: none; font-weight: 500;
}
.nav-link:hover { background: var(--surface-3); color: var(--fg); }
.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.nav-link .count { margin-left: auto; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--fg-muted); font-weight: 600; }
.nav-link[aria-current="page"] .count { color: var(--accent); }
.nav-link .count.is-alert { color: var(--danger); }
.nav-heading { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-subtle); font-weight: 700; padding: 1.1rem .9rem .35rem; }

.main { padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem; min-width: 0; }
.main:focus { outline: none; }
.container { max-width: 960px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.container.narrow { max-width: 720px; }

.page-head { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.page-head .lede { color: var(--fg-muted); margin-top: .25rem; }
.page-head .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--fg-muted); text-decoration: none; font-size: .9rem; font-weight: 500; }
.back-link:hover { color: var(--accent); }

/* ---------- Gombok ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 40px; padding: 0 1rem; border-radius: 999px;
  font: 600 .95rem/1 var(--font-sans); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { background: var(--surface-2); color: var(--fg); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--fg-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--fg); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: var(--surface); }
.btn-danger-solid:hover { filter: brightness(.92); color: var(--surface); background: var(--danger); }
.btn-sm { height: 32px; padding: 0 .75rem; font-size: .85rem; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.inline-form { display: inline; margin: 0; }

/* ---------- Értesítések ---------- */
.flash-stack { display: flex; flex-direction: column; gap: .5rem; max-width: 960px; margin: 0 auto 1rem; }
.flash {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .75rem 1rem; border-radius: var(--radius);
  border: 1px solid; font-weight: 500;
}
.flash .icon { margin-top: .15rem; }
.flash-success { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
.flash-error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
.flash-warning { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); }
.flash-info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); }
.flash p { color: var(--fg); }
.flash-close { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; line-height: 0; border-radius: 4px; }

/* ---------- Kártya / panel ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-body { padding: 1.25rem; }
.panel-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 1rem; }
.panel-head .count-pill { margin-left: auto; }

/* ---------- Eszköztár a listán ---------- */
.toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.toolbar .result-info { color: var(--fg-muted); font-size: .9rem; }
.toolbar select { height: 36px; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg a { padding: .35rem .8rem; border-radius: 999px; text-decoration: none; color: var(--fg-muted); font-size: .85rem; font-weight: 600; }
.seg a:hover { color: var(--fg); }
.seg a[aria-current="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }

/* ---------- Feladatlista ---------- */
.task-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.task-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: start;
  padding: .9rem 1.1rem .9rem .8rem; border-bottom: 1px solid var(--border); position: relative;
}
.task-item:last-child { border-bottom: 0; }
.task-item:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.task-item.prio-high::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--danger);
}
.check-btn {
  width: 28px; height: 28px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--surface); color: transparent;
  display: grid; place-items: center; cursor: pointer; padding: 0; transition: all .15s;
}
.check-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.check-btn.is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.check-btn .icon { width: 16px; height: 16px; stroke-width: 3; }
.check-placeholder { width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; border: 2px dashed var(--border); display: grid; place-items: center; color: var(--fg-subtle); }
.check-placeholder .icon { width: 14px; height: 14px; }
.task-main { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.task-title { font-weight: 600; color: var(--fg); text-decoration: none; font-size: 1.02rem; line-height: 1.35; overflow-wrap: anywhere; }
.task-title::after { content: ""; position: absolute; inset: 0; } /* az egész sor kattintható */
.task-title:hover { color: var(--accent); }
.task-item.is-complete .task-title { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.task-excerpt { color: var(--fg-muted); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.task-meta { display: flex; align-items: center; gap: .35rem .9rem; flex-wrap: wrap; font-size: .85rem; color: var(--fg-muted); }
.task-meta .route { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.task-meta .route .arrow { color: var(--fg-subtle); }
.task-meta .stat { display: inline-flex; align-items: center; gap: .25rem; }
.task-side { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }
.task-item .check-btn, .task-item form { position: relative; z-index: 1; }

/* Határidő-chip és státuszok */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  height: 26px; padding: 0 .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--fg-muted); border: 1px solid transparent;
}
.chip .icon { width: 14px; height: 14px; }
.chip-overdue { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.chip-soon { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.chip-upcoming { background: var(--accent-soft); color: var(--accent); }
.chip-done { background: var(--ok-soft); color: var(--ok); }
.chip-prio-high { background: var(--danger-soft); color: var(--danger); }
.chip-prio-low { background: var(--surface-2); color: var(--fg-subtle); }
.count-pill { font-size: .75rem; font-weight: 700; background: var(--surface-2); color: var(--fg-muted); border-radius: 999px; padding: .1rem .55rem; font-variant-numeric: tabular-nums; }

/* Avatarok */
.avatar {
  --av: var(--av-0);
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--av) 16%, var(--surface)); color: var(--av);
  font: 700 .8rem/1 var(--font-sans); letter-spacing: .02em;
  border: 1px solid color-mix(in srgb, var(--av) 30%, transparent);
}
.avatar-xs { width: 22px; height: 22px; font-size: .62rem; }
.avatar-sm { width: 26px; height: 26px; font-size: .68rem; }
.avatar-lg { width: 40px; height: 40px; font-size: .95rem; }
.av-0 { --av: var(--av-0); } .av-1 { --av: var(--av-1); } .av-2 { --av: var(--av-2); } .av-3 { --av: var(--av-3); }
.av-4 { --av: var(--av-4); } .av-5 { --av: var(--av-5); } .av-6 { --av: var(--av-6); } .av-7 { --av: var(--av-7); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { border: 2px solid var(--surface); margin-left: -6px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar.is-done { position: relative; }
.avatar.is-done::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--surface);
}
.person { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.person .name { font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }

/* Üres állapot */
.empty { text-align: center; padding: 3rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.empty-art { width: 120px; height: 120px; color: var(--accent); }
.empty p { color: var(--fg-muted); max-width: 42ch; }

/* Lapozó */
.pager { display: flex; justify-content: center; align-items: center; gap: .5rem; }
.pager .current { font-variant-numeric: tabular-nums; color: var(--fg-muted); font-size: .9rem; padding-inline: .5rem; }

/* ---------- Űrlapok ---------- */
.form-grid { display: grid; gap: 1.1rem; }
.form-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field > label, .field > .label, legend.label { font-weight: 600; font-size: .92rem; color: var(--fg); }
.field .req { color: var(--danger); margin-left: .15rem; }
.field .hint { color: var(--fg-muted); font-size: .85rem; }
.field .error { color: var(--danger); font-size: .88rem; font-weight: 600; display: flex; gap: .35rem; align-items: flex-start; }
.field .error .icon { margin-top: .12rem; width: 1em; height: 1em; }
.input, select, textarea {
  width: 100%; font: inherit; color: var(--fg);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .6rem .75rem; min-height: 44px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.input:hover, select:hover, textarea:hover { border-color: var(--fg-subtle); }
.input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
select { appearance: none; padding-right: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.check-row { display: flex; align-items: flex-start; gap: .65rem; }
.check-row input[type="checkbox"] { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--accent); flex: none; }
.check-row label { font-weight: 500; }
.check-row .hint { display: block; }
.radio-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.radio-pills label {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid var(--border-strong); cursor: pointer; font-weight: 600; font-size: .9rem; background: var(--surface);
}
.radio-pills input { accent-color: var(--accent); margin: 0; }
.radio-pills label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.radio-pills label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding-top: .5rem; }
.char-count { font-size: .8rem; color: var(--fg-subtle); font-variant-numeric: tabular-nums; align-self: flex-end; }
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 3rem; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.strength { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.strength > span { display: block; height: 100%; width: 0; background: var(--danger); transition: width .2s, background-color .2s; }

/* Felelős-választó (combobox) */
.picker { position: relative; }
.picker-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.picker-chips:empty { display: none; }
.person-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .3rem .2rem .25rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: .9rem; font-weight: 600;
}
.person-chip button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; display: grid; place-items: center; padding: 0; }
.person-chip button:hover { background: var(--surface-3); color: var(--danger); }
.person-chip button .icon { width: 14px; height: 14px; }
.picker-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  list-style: none; margin: 0; padding: .35rem; max-height: 300px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.picker-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--radius-sm); cursor: pointer; }
.picker-list li[aria-selected="true"], .picker-list li:hover { background: var(--accent-soft); }
.picker-list li .email { color: var(--fg-muted); font-size: .85rem; overflow-wrap: anywhere; }
.picker-list li.empty-row { cursor: default; color: var(--fg-muted); background: none; }
.picker-list li.picker-letter {
  position: sticky; top: -.35rem; z-index: 1; cursor: default; padding: .3rem .6rem .2rem; margin-top: .15rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); background: var(--surface);
  border-bottom: 1px solid var(--border); border-radius: 0;
}
.picker-list li.picker-letter:hover { background: var(--surface); }
.picker-list { max-height: 340px; }

/* Fájl-feltöltő */
.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--surface-2);
  transition: border-color .15s, background-color .15s;
}
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .icon { width: 28px; height: 28px; color: var(--accent); }
.dropzone input[type="file"] { max-width: 100%; font: inherit; }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.file-list li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.file-list li .size { color: var(--fg-subtle); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Feladat részletei ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.task-head { display: flex; flex-direction: column; gap: .75rem; }
.task-head h1 { font-size: 1.75rem; overflow-wrap: anywhere; }
.task-head .badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.routing {
  display: grid; grid-template-columns: auto 1fr; gap: .75rem 1rem; align-items: start;
  padding: 1rem 1.25rem; background: var(--surface-2); border-radius: var(--radius);
}
.routing dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-muted); font-weight: 700; padding-top: .35rem; }
.routing dd { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; min-width: 0; }
.routing .person small { color: var(--fg-muted); font-weight: 500; }
.message-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; max-width: 70ch; }
.message-body.is-empty { color: var(--fg-subtle); font-style: italic; }
.facts { display: flex; flex-direction: column; }
.facts > div { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-muted); font-weight: 700; }
.facts dd { margin: 0; font-weight: 600; }
.facts dd .subtle { font-weight: 400; }
.side-stack { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: calc(var(--topbar-h) + 1rem); }
.gcal { display: flex; flex-direction: column; gap: .75rem; }
.gcal-head { display: flex; align-items: center; gap: .6rem; }
.gcal-logo { width: 28px; height: 28px; flex: none; }

.assignee-list { list-style: none; margin: 0; padding: 0; }
.assignee-list li { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--border); }
.assignee-list li:last-child { border-bottom: 0; }
.assignee-list .who { min-width: 0; display: flex; flex-direction: column; }
.assignee-list .who span { color: var(--fg-muted); font-size: .85rem; overflow-wrap: anywhere; }
.assignee-list .state { margin-left: auto; }

.attachments { list-style: none; margin: 0; padding: 0; }
.attachments li { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--border); }
.attachments li:last-child { border-bottom: 0; }
.file-badge {
  width: 40px; height: 40px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font: 700 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .02em;
}
.attachments .file-info { min-width: 0; display: flex; flex-direction: column; }
.attachments .file-info a { font-weight: 600; overflow-wrap: anywhere; }
.attachments .file-info span { color: var(--fg-muted); font-size: .82rem; }
.attachments .file-actions { margin-left: auto; display: flex; gap: .25rem; }
.upload-inline { padding: 1rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.thread > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.thread .bubble-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.thread .bubble-head strong { font-weight: 650; }
.thread .bubble-head time { color: var(--fg-subtle); font-size: .82rem; }
.thread .bubble-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .2rem; }
.thread .tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: .05rem .35rem; }
.composer { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.composer textarea { min-height: 90px; }

.timeline { list-style: none; margin: 0; padding: .5rem 1.25rem 1rem; }
.timeline li { position: relative; padding: .45rem 0 .45rem 1.25rem; font-size: .88rem; color: var(--fg-muted); }
.timeline li::before { content: ""; position: absolute; left: 3px; top: .95rem; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.timeline li::after { content: ""; position: absolute; left: 6px; top: 1.45rem; bottom: -.45rem; width: 1px; background: var(--border); }
.timeline li:last-child::after { display: none; }
.timeline strong { color: var(--fg); font-weight: 600; }
.timeline time { display: block; font-size: .78rem; color: var(--fg-subtle); }

.progress { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--fg-muted); }
.progress-bar { flex: 1; height: 8px; border: 0; border-radius: 99px; background: var(--surface-3); overflow: hidden; appearance: none; -webkit-appearance: none; }
.progress-bar::-webkit-progress-bar { background: var(--surface-3); border-radius: 99px; }
.progress-bar::-webkit-progress-value { background: var(--ok); border-radius: 99px; }
.progress-bar::-moz-progress-bar { background: var(--ok); border-radius: 99px; }
.gcal-day { fill: var(--accent); font: 700 11px var(--font-sans); }

/* ---------- Bejelentkezés / regisztráció ---------- */
.auth-page { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-aside {
  background: var(--brand); color: var(--brand-fg);
  padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; gap: 2rem; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-aside .brand, .auth-aside .brand small { color: inherit; }
.auth-aside h2 { color: inherit; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; max-width: 18ch; }
.auth-aside p { opacity: .88; max-width: 44ch; font-size: 1.05rem; }
.auth-aside ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.auth-aside li { display: flex; gap: .7rem; align-items: flex-start; }
.auth-aside li .icon { margin-top: .15rem; }
.auth-aside .waves { position: absolute; right: -40px; bottom: -30px; width: 380px; opacity: .14; pointer-events: none; }
.auth-main { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 5vw, 4rem) 1rem; }
.auth-card { width: 100%; max-width: 420px; margin-inline: auto; display: flex; flex-direction: column; gap: 1.5rem; }
.auth-card h1 { font-size: 1.7rem; }
.auth-card .lede { color: var(--fg-muted); margin-top: .35rem; }
.auth-alt { text-align: center; color: var(--fg-muted); }
.auth-page.is-wide { display: block; }
.auth-page.is-wide .auth-main { padding-block: 2rem 3rem; }
.auth-page.is-wide .prose-wrap { max-width: 820px; margin-inline: auto; width: 100%; }
.mini-top { display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--border); background: var(--surface); }

/* Tájékoztató szövegek */
.prose { max-width: 75ch; display: flex; flex-direction: column; gap: .9rem; }
.prose h2 { margin-top: 1.25rem; font-size: 1.2rem; }
.prose h3 { margin-top: .5rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { background: var(--surface-2); font-weight: 650; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.prose .note { padding: .8rem 1rem; background: var(--surface-2); border-radius: var(--radius-sm); color: var(--fg-muted); }
kbd { font-family: var(--font-mono); font-size: .8em; padding: .1rem .4rem; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }

/* ---------- Lábléc ---------- */
.site-footer {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: 1.1rem clamp(1rem, 3vw, 2.5rem); font-size: .85rem; color: var(--fg-muted);
  display: flex; gap: .5rem 1.5rem; flex-wrap: wrap; align-items: center;
}
.site-footer nav ul { list-style: none; display: flex; gap: .4rem 1.25rem; flex-wrap: wrap; margin: 0; padding: 0; }
.site-footer a { color: var(--fg-muted); }
.site-footer a:hover { color: var(--accent); }
.site-footer .copy { margin-left: auto; }

/* ---------- Megerősítő párbeszédablak ---------- */
dialog.confirm {
  border: 0; padding: 0; border-radius: 14px; width: min(440px, calc(100vw - 32px));
  background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg);
}
dialog.confirm::backdrop { background: rgb(10 18 28 / .5); }
dialog.confirm .dlg-body { padding: 1.4rem 1.4rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
dialog.confirm .dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.4rem 1.2rem; }

/* ---------- Hibajelzés (bal alsó gomb, űrlap, tipp, admin lista) ---------- */
.bug-fab {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); color: var(--accent); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.bug-fab .icon { width: 22px; height: 22px; }
.bug-fab:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.bug-fab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.bug-fab.is-pulsing { animation: bug-pulse 1.6s ease-out infinite; }
@keyframes bug-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-lg); }
  100% { box-shadow: 0 0 0 16px transparent, var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) { .bug-fab, .bug-fab.is-pulsing { animation: none; transition: none; } }
.site-footer { padding-left: max(clamp(1rem, 3vw, 2.5rem), 76px); }
dialog.feedback-dialog { width: min(520px, calc(100vw - 32px)); }
dialog.feedback-dialog h2, dialog.tip-dialog h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 0; }
dialog.feedback-dialog h2 .icon, dialog.tip-dialog h2 .icon { color: var(--accent); }
dialog.feedback-dialog textarea { min-height: 7.5rem; }
dialog.tip-dialog { border-top: 4px solid var(--accent); }
dialog.tip-dialog p { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.feedback-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.feedback-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: .6rem; }
.feedback-item.is-done { opacity: .78; }
.fb-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .88rem; color: var(--fg-muted); }
.fb-head strong { color: var(--fg); }
.fb-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.fb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .82rem; color: var(--fg-muted); }
.fb-foot form { margin-left: auto; }
.fb-foot code { overflow-wrap: anywhere; }
.gt-starticon { width: 10px; height: 10px; vertical-align: -1px; margin-right: 2px; color: var(--accent); }
@media print { .bug-fab, dialog.feedback-dialog, dialog.tip-dialog { display: none !important; } }

/* ---------- Hibaoldal ---------- */
.error-page { text-align: center; padding: 4rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.error-code { font: 700 4.5rem/1 var(--font-display); color: var(--accent); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- Reszponzív ---------- */
@media (max-width: 1080px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .side-stack { position: static; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 56px; }
  .brand { min-width: 0; }
  .brand .brand-text { display: none; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: sticky; top: var(--topbar-h); z-index: 20; height: auto; overflow-x: auto; overflow-y: hidden;
    flex-direction: row; align-items: center; padding: .5rem 1rem; gap: .25rem;
    background: var(--bg); border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar .btn-new, .sidebar .nav-heading, .sidebar .nav-secondary { display: none; }
  .nav-list { flex-direction: row; gap: .25rem; }
  .nav-link { white-space: nowrap; padding: .4rem .8rem; font-size: .9rem; }
  .nav-link .icon { display: none; }
  .fab {
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 25;
    width: 56px; height: 56px; border-radius: 18px; box-shadow: var(--shadow-lg);
  }
  .auth-page { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { padding: 1.5rem 1rem; gap: 1rem; }
  .auth-aside h2, .auth-aside ul, .auth-aside .waves, .auth-aside .aside-foot { display: none; }
}
@media (min-width: 901px) { .fab { display: none; } }
@media (max-width: 600px) {
  .topbar { gap: .5rem; padding-inline: .75rem; }
  .main { padding-inline: 1rem; }
  .task-item { grid-template-columns: auto minmax(0, 1fr); }
  .task-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  .routing { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .routing dd { margin-bottom: .5rem; }
  .page-head .actions { margin-left: 0; }
  .site-footer .copy { margin-left: 0; }
  h1 { font-size: 1.4rem; }
  .task-head h1 { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .check-btn, .chip, .btn { border: 1px solid CanvasText; }
  .nav-link[aria-current="page"] { outline: 2px solid Highlight; }
}
@media print {
  .topbar, .sidebar, .site-footer, .fab, .composer, .upload-inline, .actions, .gcal, .check-btn { display: none !important; }
  .shell { display: block; }
  body { background: #fff; color: #000; }
}

/* SVG grafikák színei tokenekből (CSP: nincs inline stílus) */
.mark-bg { fill: var(--brand); }
.mark-fg, .mark-wave { fill: none; stroke: var(--brand-fg); stroke-linecap: round; stroke-linejoin: round; }
.mark-wave { stroke-opacity: .55; }
.auth-aside .mark-bg { fill: var(--brand-fg); }
.auth-aside .mark-fg, .auth-aside .mark-wave { stroke: var(--brand); }
.art-soft { fill: var(--accent-soft); }
.art-accent { fill: var(--accent); }
.art-line { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; }
.art-on-accent { fill: none; stroke: var(--accent-fg); stroke-linecap: round; stroke-linejoin: round; }
.art-muted { fill: var(--surface-3); }
.art-sm { width: 88px; height: 88px; }
.mt-sm { margin-top: .75rem; }

/* ---------- Finomítások ---------- */
.label { font-weight: 600; font-size: .92rem; }
.file-label { cursor: pointer; }
.dropzone:focus-within .file-label, .upload-inline:focus-within .file-label { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn-block { white-space: normal; height: auto; min-height: 40px; padding-block: .5rem; text-align: center; line-height: 1.3; }
.assignee-list .who { flex: 1; }
.assignee-list .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignee-list .state { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--fg-subtle); display: inline-flex; align-items: center; gap: .25rem; margin-top: .15rem; }
.assignee-list .state.is-done { color: var(--ok); }
.assignee-list .state .icon { width: 14px; height: 14px; }
.avatar-xs { width: 24px; height: 24px; font-size: .6rem; letter-spacing: 0; }
.avatar-stack .avatar { margin-left: -4px; }
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg a { white-space: nowrap; }
@media (max-width: 900px) {
  .hide-mobile { display: none !important; }
  .main { padding-bottom: 6rem; }
}


/* ---------- 2. verzió: csoportok, részfeladatok, ranglista, téma/nyelv ---------- */
.pref-form { margin: 0; }
.nav-prefs { display: flex; flex-direction: column; gap: 2px; }
.nav-link.nav-link { font: inherit; font-weight: 500; }
button.nav-link { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; color: var(--fg); }
.theme-icon { display: inline-flex; }
.theme-icon .icon { width: 1.15em; height: 1.15em; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-icon-sun { display: inline-flex; }
}
.lang-badge { margin-left: auto; font: 700 .7rem/1 var(--font-mono); letter-spacing: .06em; padding: .2rem .4rem; border-radius: 4px; background: var(--surface-3); color: var(--fg-muted); }
.menu-only-mobile { display: none; }
.role-tag { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .75rem; font-weight: 700; color: var(--accent); }
.role-tag .icon { width: 14px; height: 14px; }
.auth-prefs { justify-content: flex-end; max-width: 420px; width: 100%; margin: 0 auto 1rem; gap: .25rem; }
.auth-prefs .lang-badge, .prefs-inline .lang-badge { margin-left: .25rem; }
.prefs-inline { gap: .25rem; }

/* Kiosztás: csoportok + személyek */
.assign-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: 1rem; background: var(--surface); }
.assign-box > legend { padding: 0 .35rem; }
.assign-section { display: flex; flex-direction: column; gap: .5rem; }
.assign-sub { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); margin: 0; }
.team-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.team-pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem .45rem .6rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; font-weight: 600; font-size: .92rem;
  transition: background-color .15s, border-color .15s;
}
.team-pill input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.team-pill .team-count { font-size: .78rem; font-weight: 600; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.team-pill:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.team-pill:has(input:checked) .team-count { color: var(--accent); }
.team-pill:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.team-pill:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.assign-summary { display: flex; flex-direction: column; gap: .5rem; border-top: 1px dashed var(--border); padding-top: .85rem; }
.assign-summary:has(.picker-chips:empty) { border-top: 0; padding-top: 0; }
.assign-total { margin: 0; font-weight: 700; font-size: .9rem; color: var(--fg); }
.assign-total:empty { display: none; }
.person-chip.from-team { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.team-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .85rem; }
.team-badge .icon { width: 14px; height: 14px; }

/* Részfeladatok */
.subtask-inputs { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .45rem; }
.subtask-inputs li { padding-left: .2rem; }
.subtask-inputs li::marker { color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.subtask-input-row { display: flex; gap: .4rem; }
.subtask-progress { padding: .75rem 1.25rem 0; }
.subtasks { list-style: none; margin: 0; padding: .35rem 0; }
.subtasks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .6rem 1.25rem; }
.subtasks li + li { border-top: 1px solid var(--border); }
.subtask-main { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.subtask-title { font-weight: 600; overflow-wrap: anywhere; }
.subtasks li.is-done .subtask-title { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.subtask-meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; font-size: .82rem; color: var(--fg-muted); }
.done-by { display: inline-flex; align-items: center; gap: .25rem; color: var(--ok); font-weight: 600; }
.done-by .icon { width: 14px; height: 14px; }
.check-btn.check-sm { width: 24px; height: 24px; margin-top: 0; }
.check-btn.check-sm .icon { width: 14px; height: 14px; }
.chip-sm { height: 22px; font-size: .75rem; padding: 0 .5rem; }
.subtask-add { padding: .5rem 1.25rem 1rem; border-top: 1px solid var(--border); }
.subtask-add > summary { list-style: none; width: fit-content; }
.subtask-add > summary::-webkit-details-marker { display: none; }
.subtask-add[open] > summary { margin-bottom: .75rem; }

/* Üzenet csatolmányokkal */
.bubble { min-width: 0; }
.attachments-inline { margin-top: .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.attachments-inline li { padding: .5rem .75rem; }
.attachments-inline .file-badge { width: 32px; height: 32px; font-size: .6rem; }
.composer .file-list:empty { display: none; }
.composer-actions { gap: .5rem; }
.composer-actions.is-over { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Haladás név szerint */
.progress-who { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem !important; font-weight: 500 !important; font-size: .88rem; color: var(--fg); }
.progress-who p { margin: 0; overflow-wrap: anywhere; }
.who-label { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--fg-muted); }
.who-label.is-done { color: var(--ok); }
.who-label .icon { width: 14px; height: 14px; }
.assignee-list li.is-creator { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.assignee-list .state { display: inline-flex; align-items: center; gap: .25rem; }
.assignee-list .state.is-creator { color: var(--accent); }

/* Csoportok oldal */
.summary-head { cursor: pointer; list-style: none; }
.summary-head::-webkit-details-marker { display: none; }
details.panel:not([open]) > .summary-head { border-bottom: 0; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; align-items: start; }
.team-dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand); color: var(--brand-fg); font-weight: 800; font-size: .9rem; flex: none; }
.team-card .panel-head .tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: .1rem .4rem; }
.member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.member-list li { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem .2rem .25rem; border-radius: 999px; background: var(--surface-2); font-size: .88rem; font-weight: 600; }
.team-card details > summary { list-style: none; width: fit-content; }
.team-card details > summary::-webkit-details-marker { display: none; }

/* Ranglista */
.lb-filters { align-items: flex-end; gap: 1rem; }
.lb-filters .field { min-width: 180px; }
.podium { list-style: none; margin: 0; padding: .75rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 230px)); justify-content: center; gap: 1rem; }
.podium-place {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center;
  padding: 1.5rem 1rem 1.1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
}
.podium-place.place-1 { border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); }
.podium-place.place-2 { border-color: color-mix(in srgb, var(--silver) 55%, transparent); }
.podium-place.place-3 { border-color: color-mix(in srgb, var(--bronze) 55%, transparent); }
.podium-place.is-me { box-shadow: 0 0 0 3px var(--accent-soft); }
.medal { position: absolute; top: -12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 .85rem/1 var(--font-sans); color: #fff; background: var(--gold); box-shadow: var(--shadow); }
.place-2 .medal { background: var(--silver); }
.place-3 .medal { background: var(--bronze); }
.podium-score { font: 800 1.35rem/1.2 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.lb-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.lb-table th, .lb-table td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.lb-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); background: var(--surface-2); font-weight: 700; }
.lb-table tbody tr:last-child > * { border-bottom: 0; }
.lb-table tbody th { font-weight: 600; }
.lb-table tr.is-me { background: var(--accent-soft); }
.lb-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-table td:nth-child(3) { min-width: 180px; }
.rank { font-weight: 800; }
.rank-1 { color: var(--gold); } .rank-2 { color: var(--silver); } .rank-3 { color: var(--bronze); }
.lb-bar { display: flex; align-items: center; gap: .6rem; }
.lb-bar-track { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.lb-bar-fill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .4s ease; }
.table-wrap.panel { border-radius: var(--radius); }
.js .js-hide { display: none; }

@media (max-width: 900px) {
  .menu-only-mobile { display: block; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: .35rem 0; padding: .35rem 0; }
  .menu-only-mobile .lang-badge { margin-left: auto; }
}
@media (max-width: 600px) {
  .lb-table th:nth-child(5), .lb-table td:nth-child(5), .lb-table th:nth-child(6), .lb-table td:nth-child(6) { display: none; }
  .lb-table td:nth-child(3) { min-width: 110px; }
  .lb-table th, .lb-table td { padding: .6rem .6rem; }
}

.subtask-progress .progress-bar { width: 100%; display: block; }
.thread > li .attachments li { padding: .5rem .75rem; }

/* Profilkép */
.avatar.has-img { padding: 0; overflow: hidden; background: var(--surface-2); }
.avatar.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.avatar-xl { width: 88px; height: 88px; font-size: 1.8rem; }
.avatar-edit { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.avatar-edit .stack { flex: 1; min-width: 220px; gap: .6rem; }
.progress .num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- 3. kör: saját feladatok, ütemterv, jogosultságok ---------- */
.nav-row { position: relative; }
.nav-row .nav-link { padding-right: 2.25rem; gap: .7rem; white-space: nowrap; }
.nav-row .nav-link .count { margin-right: .15rem; }
.nav-add {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); text-decoration: none; transition: background-color .15s, color .15s;
}
.nav-add:hover { background: var(--accent); color: var(--accent-fg); }
.nav-add .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.nav-sep { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.quick-inline { display: flex; gap: .6rem; align-items: center; padding: .6rem .75rem; flex-wrap: wrap; }
.quick-inline .input { min-height: 40px; }
.quick-inline #iq_title { flex: 1 1 260px; border-color: transparent; background: var(--surface-2); }
.quick-inline #iq_title:focus { background: var(--surface); border-color: var(--accent); }
.quick-inline #iq_due { width: auto; flex: 0 1 220px; }
.quick-plus { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.quick-dialog { width: min(520px, calc(100vw - 32px)); }
.quick-dialog h2 { display: flex; align-items: center; gap: .5rem; }
.quick-dialog .form-grid { gap: .8rem; }
.quick-dialog .dlg-body { gap: .8rem; }

.container-wide { max-width: 1280px; }
.tt-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.tt-weeknav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tt-weeknav .btn.is-active { border-color: var(--accent); color: var(--accent); }
.tt-weeknav .flip .icon { transform: scaleX(-1); }
.tt-range { font-size: 1.05rem; margin-left: .4rem; font-variant-numeric: tabular-nums; }
.tt-filter select { min-height: 36px; padding-block: .35rem; }
.seg a { display: inline-flex; align-items: center; gap: .35rem; }
.seg a .icon { width: 15px; height: 15px; }
.tt-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; font-size: .9rem; color: var(--fg-muted); }
.tt-stats strong { font-size: 1.15rem; color: var(--fg); margin-right: .15rem; }
.tt-stats .ok strong { color: var(--ok); }
.tt-stats .bad strong { color: var(--danger); }
.tt-stats .legend { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem .55rem; flex-wrap: wrap; font-size: .8rem; }
.tt-stats .legend .icon { width: 14px; height: 14px; }
.lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border-left: 3px solid; }
.lg-open { background: var(--accent-soft); border-color: var(--accent); }
.lg-overdue { background: var(--danger-soft); border-color: var(--danger); }
.lg-done { background: var(--ok-soft); border-color: var(--ok); }
.lg-personal { background: var(--surface); border: 1px dashed var(--fg-subtle); border-left: 3px solid var(--fg-subtle); }

.tt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.25rem; align-items: start; }
.tt-main { min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.tt-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: calc(var(--topbar-h) + 1rem); }

.tt-item {
  display: flex; flex-direction: column; gap: 1px; padding: .3rem .45rem; border-radius: 6px; text-decoration: none; min-width: 0;
  background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--fg); font-size: .8rem; line-height: 1.3;
  transition: filter .15s, transform .15s;
}
.tt-item:hover { filter: brightness(.97); color: var(--fg); }
.tt-item .tt-time { display: flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .72rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.tt-item .tt-flag { width: 12px; height: 12px; color: var(--danger); }
.tt-item .tt-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tt-item .tt-subicon { width: 12px; height: 12px; vertical-align: -.1em; color: var(--fg-muted); }
.tt-item .tt-parent { font-size: .72rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-item.is-overdue { background: var(--danger-soft); border-left-color: var(--danger); }
.tt-item.is-overdue .tt-time { color: var(--danger); }
.tt-item.is-done { background: var(--ok-soft); border-left-color: var(--ok); opacity: .8; }
.tt-item.is-done .tt-title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.tt-item.is-done .tt-time { color: var(--ok); }
.tt-item.is-personal:not(.is-done):not(.is-overdue) { background: var(--surface); border: 1px dashed var(--border-strong); border-left: 3px solid var(--fg-subtle); }
.tt-item.is-personal:not(.is-done):not(.is-overdue) .tt-time { color: var(--fg-muted); }
.tt-item.is-sub { border-left-style: dotted; }
.tt-note { margin: 0; }

.tt-agenda { display: flex; flex-direction: column; gap: .75rem; }
.tt-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.tt-day.is-today { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.tt-day.is-empty { padding-block: .6rem; }
.tt-day h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.tt-day h3 .count-pill { margin-left: auto; }
.tt-day .tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: .1rem .4rem; }
.tt-day p { margin: 0; }
.tt-daylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .5rem; }
.tt-daylist .tt-item { font-size: .88rem; padding: .5rem .65rem; }
.tt-sidelist { display: flex; flex-direction: column; gap: .35rem; padding: .75rem; }
.tt-sidelist .tt-item { font-size: .85rem; }
.tt-sidedue { font-size: .75rem; color: var(--danger); font-weight: 600; margin: -.15rem 0 .25rem .55rem; }

.role-group-h { display: flex; align-items: center; gap: .45rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-muted); padding: .9rem 1.25rem .35rem; border-top: 1px solid var(--border); }
.role-group-h .icon { width: 15px; height: 15px; }
.role-group-h .count-pill { margin-left: .25rem; }
.role-list li { gap: .9rem; }
.role-list .who { flex: 1; min-width: 0; }
.role-row.is-admin { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.role-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.role-badge .icon { width: 14px; height: 14px; }
.role-badge.is-admin { background: var(--accent-soft); color: var(--accent); }
.role-badge.is-member { background: var(--surface-2); color: var(--fg-muted); }
.role-action-placeholder { width: 8.5rem; }
.role-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.kick-btn .icon { width: 15px; height: 15px; }
.role-row.is-removed { opacity: .8; }
.role-row.is-removed .who strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.role-badge.is-removed { background: var(--danger-soft); color: var(--danger); white-space: normal; }
dialog.kick-dialog { border-top: 4px solid var(--danger); width: min(500px, calc(100vw - 32px)); }
dialog.kick-dialog h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 0; color: var(--danger); }
dialog.kick-dialog .kick-q { margin: 0; font-weight: 650; }
dialog.kick-dialog .kick-effects { margin: 0; padding-left: 1.2rem; color: var(--fg-muted); font-size: .9rem; display: flex; flex-direction: column; gap: .2rem; }
dialog.kick-dialog .btn-danger-solid:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.member-list li.is-admin { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.admin-mark { width: 13px; height: 13px; color: var(--accent); }

@media (max-width: 1100px) {
  .tt-layout { grid-template-columns: minmax(0, 1fr); }
  .tt-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 760px) {
  .tt-stats .legend { margin-left: 0; }
  .role-action-placeholder { display: none; }
  .role-list li { flex-wrap: wrap; }
}

.nav-row .nav-link[aria-current="page"] ~ .nav-add { background: var(--surface); }
.nav-row .nav-link[aria-current="page"] ~ .nav-add:hover { background: var(--accent); }
.personal-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: .1rem .55rem; border-radius: 999px; }
.personal-tag .icon { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .nav-row { display: flex; align-items: center; gap: .2rem; }
  .nav-row .nav-link { padding-right: .8rem; }
  .nav-add { position: static; transform: none; flex: none; }
  .nav-sep { margin: 0 0 0 .25rem; padding: 0 0 0 .5rem; border-top: 0; border-left: 1px solid var(--border); }
}

/* ---------- Ütemterv: idővonal (Gantt) – kitűzéstől határidőig ---------- */
.tt-layout.is-wide { grid-template-columns: minmax(0, 1fr); }
.tt-layout.is-wide .tt-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lg-soon { background: var(--warn-soft); border-color: var(--warn); }
.lg-ms { width: 9px; height: 9px; transform: rotate(45deg); border: 2px solid var(--accent); background: var(--surface); display: inline-block; margin-inline: 2px; }
.lg-now { width: 2px; height: 14px; background: var(--danger); display: inline-block; border-radius: 2px; }
.gt { touch-action: pan-x pan-y; --label-w: 300px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.gt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gt-inner { min-width: 860px; }
.gt-inner.span-month { min-width: 1080px; }
.gt-head { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); border-bottom: 1px solid var(--border-strong); position: sticky; top: 0; z-index: 4; background: var(--surface); }
.gt-corner { position: sticky; left: 0; z-index: 5; background: var(--surface); padding: .6rem .9rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); display: flex; flex-direction: column; gap: .1rem; border-right: 1px solid var(--border); }
.gt-corner .subtle { text-transform: none; letter-spacing: 0; font-weight: 500; }
.gt-cols, .gt-bg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.gt-cols.n-28, .gt-bg.n-28 { grid-template-columns: repeat(28, minmax(0, 1fr)); }
.gt-day { position: relative; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .55rem .2rem; border-left: 1px solid var(--border); min-width: 0; }
.gt-day .dn { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); }
.gt-day .dd { font: 700 1.05rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.gt-day .dc { font-size: .64rem; align-self: center; font-weight: 700; min-width: 1.15rem; text-align: center; background: var(--surface-2); color: var(--fg-muted); border-radius: 99px; padding: 0 .3rem; line-height: 1.15rem; }
.gt-day .dm { position: absolute; left: 4px; bottom: 1px; font-size: .62rem; font-weight: 700; color: var(--accent); text-transform: uppercase; }
.gt-day.is-weekend { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.gt-day.is-today .dd { background: var(--accent); color: var(--accent-fg); border-radius: 7px; padding: .15rem .35rem; }
.gt-day.is-today .dn { color: var(--accent); }
.span-month .gt-day { flex-direction: column; align-items: center; gap: .15rem; padding: .45rem 0 .7rem; }
.span-month .gt-day .dd { font-size: .9rem; }
.span-month .gt-day .dn { font-size: .6rem; letter-spacing: 0; }
.span-month .gt-day .dc { display: none; }
.span-month .gt-day.is-monday, .span-month .gt-bg .is-monday { border-left-color: var(--border-strong); }

.gt-body { position: relative; }
.gt-bg, .gt-nowlayer { position: absolute; top: 0; bottom: 0; left: var(--label-w); right: 0; pointer-events: none; }
.gt-bg > span { border-left: 1px solid var(--border); }
.gt-bg > .is-weekend { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.gt-bg > .is-today { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.gt-nowlayer { display: grid; grid-template-columns: repeat(168, minmax(0, 1fr)); z-index: 3; }
.gt-now { grid-row: 1; width: 2px; margin-left: -1px; background: var(--danger); border-radius: 2px; justify-self: start; position: relative; }
.gt-now::before { content: ""; position: absolute; top: -1px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }

.gt-row { position: relative; display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); min-height: 58px; border-bottom: 1px solid var(--border); }
.gt-row:hover { background-color: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.gt-row:hover .gt-label { background: var(--surface-2); }
.gt-label { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--border); padding: .55rem .8rem .55rem .9rem; display: flex; align-items: flex-start; gap: .6rem; min-width: 0; }
.gt-title { font-weight: 650; color: var(--fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-title:hover { color: var(--accent); text-decoration: underline; }
.gt-prio { width: 13px; height: 13px; color: var(--danger); vertical-align: -.1em; margin-right: .15rem; }
.gt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; font-size: .74rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.gt-who { font-weight: 600; }
.gt-who.is-personal { color: var(--accent); }
.gt-due { font-weight: 700; color: var(--fg); }
.gt-due.is-overdue { color: var(--danger); }
.gt-due.is-soon { color: var(--warn); }
.gt-due.is-done { color: var(--ok); }
.gt-sub { display: inline-flex; align-items: center; gap: .2rem; }
.gt-sub .icon { width: 12px; height: 12px; }

.gt-track { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(168, minmax(0, 1fr)); align-items: center; padding-block: 8px; }
.gt-track > * { grid-row: 1; }
.gt-bar {
  --c: var(--accent); --c-soft: var(--accent-soft);
  position: relative; height: 28px; min-width: 10px; border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end; padding-inline: .5rem .6rem;
  background: var(--c-soft); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: inset -4px 0 0 var(--c); color: var(--c); text-decoration: none; font-size: .72rem; font-weight: 700; white-space: nowrap;
  transition: transform .12s, box-shadow .12s;
}
.gt-bar:hover { transform: translateY(-1px); box-shadow: inset -4px 0 0 var(--c), var(--shadow); color: var(--c); }
.gt-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--c) 22%, transparent); }
.gt-bartext { position: relative; display: inline-flex; align-items: center; gap: .25rem; overflow: hidden; text-overflow: ellipsis; }
.gt-bartext .icon { width: 13px; height: 13px; }
.gt-bar.is-soon { --c: var(--warn); --c-soft: var(--warn-soft); }
.gt-bar.is-overdue { --c: var(--danger); --c-soft: var(--danger-soft); }
.gt-bar.is-done { --c: var(--ok); --c-soft: var(--ok-soft); opacity: .85; }
.gt-bar.is-personal { border-style: dashed; border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.gt-bar.cont-left { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 2px dashed var(--c); }
.gt-bar.cont-right { border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: none; border-right: 2px dashed var(--c); }
.gt-bar.cont-right:hover { box-shadow: var(--shadow); }
.gt-row.is-done .gt-title { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ok) 60%, transparent); color: var(--fg-muted); }
.gt-section { position: relative; z-index: 2; display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; font-weight: 650; font-size: .9rem; color: var(--fg-muted); background: var(--surface-2); border-bottom: 1px solid var(--border); cursor: pointer; list-style: none; }
.gt-section::-webkit-details-marker { display: none; }
.gt-section .icon { width: 16px; height: 16px; color: var(--ok); }
.gt-done[open] .gt-section { color: var(--fg); }
.gt-empty { position: relative; z-index: 2; margin-left: var(--label-w); padding: 2.5rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.gt-empty > .icon { width: 28px; height: 28px; color: var(--fg-subtle); }
.gt-empty p { margin: 0; }
@media (max-width: 760px) {
  .gt { --label-w: 150px; }
  .gt-inner { min-width: 680px; }
  .gt-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .9rem; }
  .gt-label { padding: .45rem .6rem; }
  .gt-meta .gt-span { display: none; }
}
@media print { .gt { overflow: visible; } .gt-label, .gt-corner { position: static; } }
.gt-fill.p-0 { width: 0%; } .gt-fill.p-1 { width: 10%; } .gt-fill.p-2 { width: 20%; } .gt-fill.p-3 { width: 30%; } .gt-fill.p-4 { width: 40%; } .gt-fill.p-5 { width: 50%; } .gt-fill.p-6 { width: 60%; } .gt-fill.p-7 { width: 70%; } .gt-fill.p-8 { width: 80%; } .gt-fill.p-9 { width: 90%; } .gt-fill.p-10 { width: 100%; }
.gs-1 { grid-column-start: 1; }
.gs-2 { grid-column-start: 2; }
.gs-3 { grid-column-start: 3; }
.gs-4 { grid-column-start: 4; }
.gs-5 { grid-column-start: 5; }
.gs-6 { grid-column-start: 6; }
.gs-7 { grid-column-start: 7; }
.gs-8 { grid-column-start: 8; }
.gs-9 { grid-column-start: 9; }
.gs-10 { grid-column-start: 10; }
.gs-11 { grid-column-start: 11; }
.gs-12 { grid-column-start: 12; }
.gs-13 { grid-column-start: 13; }
.gs-14 { grid-column-start: 14; }
.gs-15 { grid-column-start: 15; }
.gs-16 { grid-column-start: 16; }
.gs-17 { grid-column-start: 17; }
.gs-18 { grid-column-start: 18; }
.gs-19 { grid-column-start: 19; }
.gs-20 { grid-column-start: 20; }
.gs-21 { grid-column-start: 21; }
.gs-22 { grid-column-start: 22; }
.gs-23 { grid-column-start: 23; }
.gs-24 { grid-column-start: 24; }
.gs-25 { grid-column-start: 25; }
.gs-26 { grid-column-start: 26; }
.gs-27 { grid-column-start: 27; }
.gs-28 { grid-column-start: 28; }
.gs-29 { grid-column-start: 29; }
.gs-30 { grid-column-start: 30; }
.gs-31 { grid-column-start: 31; }
.gs-32 { grid-column-start: 32; }
.gs-33 { grid-column-start: 33; }
.gs-34 { grid-column-start: 34; }
.gs-35 { grid-column-start: 35; }
.gs-36 { grid-column-start: 36; }
.gs-37 { grid-column-start: 37; }
.gs-38 { grid-column-start: 38; }
.gs-39 { grid-column-start: 39; }
.gs-40 { grid-column-start: 40; }
.gs-41 { grid-column-start: 41; }
.gs-42 { grid-column-start: 42; }
.gs-43 { grid-column-start: 43; }
.gs-44 { grid-column-start: 44; }
.gs-45 { grid-column-start: 45; }
.gs-46 { grid-column-start: 46; }
.gs-47 { grid-column-start: 47; }
.gs-48 { grid-column-start: 48; }
.gs-49 { grid-column-start: 49; }
.gs-50 { grid-column-start: 50; }
.gs-51 { grid-column-start: 51; }
.gs-52 { grid-column-start: 52; }
.gs-53 { grid-column-start: 53; }
.gs-54 { grid-column-start: 54; }
.gs-55 { grid-column-start: 55; }
.gs-56 { grid-column-start: 56; }
.gs-57 { grid-column-start: 57; }
.gs-58 { grid-column-start: 58; }
.gs-59 { grid-column-start: 59; }
.gs-60 { grid-column-start: 60; }
.gs-61 { grid-column-start: 61; }
.gs-62 { grid-column-start: 62; }
.gs-63 { grid-column-start: 63; }
.gs-64 { grid-column-start: 64; }
.gs-65 { grid-column-start: 65; }
.gs-66 { grid-column-start: 66; }
.gs-67 { grid-column-start: 67; }
.gs-68 { grid-column-start: 68; }
.gs-69 { grid-column-start: 69; }
.gs-70 { grid-column-start: 70; }
.gs-71 { grid-column-start: 71; }
.gs-72 { grid-column-start: 72; }
.gs-73 { grid-column-start: 73; }
.gs-74 { grid-column-start: 74; }
.gs-75 { grid-column-start: 75; }
.gs-76 { grid-column-start: 76; }
.gs-77 { grid-column-start: 77; }
.gs-78 { grid-column-start: 78; }
.gs-79 { grid-column-start: 79; }
.gs-80 { grid-column-start: 80; }
.gs-81 { grid-column-start: 81; }
.gs-82 { grid-column-start: 82; }
.gs-83 { grid-column-start: 83; }
.gs-84 { grid-column-start: 84; }
.gs-85 { grid-column-start: 85; }
.gs-86 { grid-column-start: 86; }
.gs-87 { grid-column-start: 87; }
.gs-88 { grid-column-start: 88; }
.gs-89 { grid-column-start: 89; }
.gs-90 { grid-column-start: 90; }
.gs-91 { grid-column-start: 91; }
.gs-92 { grid-column-start: 92; }
.gs-93 { grid-column-start: 93; }
.gs-94 { grid-column-start: 94; }
.gs-95 { grid-column-start: 95; }
.gs-96 { grid-column-start: 96; }
.gs-97 { grid-column-start: 97; }
.gs-98 { grid-column-start: 98; }
.gs-99 { grid-column-start: 99; }
.gs-100 { grid-column-start: 100; }
.gs-101 { grid-column-start: 101; }
.gs-102 { grid-column-start: 102; }
.gs-103 { grid-column-start: 103; }
.gs-104 { grid-column-start: 104; }
.gs-105 { grid-column-start: 105; }
.gs-106 { grid-column-start: 106; }
.gs-107 { grid-column-start: 107; }
.gs-108 { grid-column-start: 108; }
.gs-109 { grid-column-start: 109; }
.gs-110 { grid-column-start: 110; }
.gs-111 { grid-column-start: 111; }
.gs-112 { grid-column-start: 112; }
.gs-113 { grid-column-start: 113; }
.gs-114 { grid-column-start: 114; }
.gs-115 { grid-column-start: 115; }
.gs-116 { grid-column-start: 116; }
.gs-117 { grid-column-start: 117; }
.gs-118 { grid-column-start: 118; }
.gs-119 { grid-column-start: 119; }
.gs-120 { grid-column-start: 120; }
.gs-121 { grid-column-start: 121; }
.gs-122 { grid-column-start: 122; }
.gs-123 { grid-column-start: 123; }
.gs-124 { grid-column-start: 124; }
.gs-125 { grid-column-start: 125; }
.gs-126 { grid-column-start: 126; }
.gs-127 { grid-column-start: 127; }
.gs-128 { grid-column-start: 128; }
.gs-129 { grid-column-start: 129; }
.gs-130 { grid-column-start: 130; }
.gs-131 { grid-column-start: 131; }
.gs-132 { grid-column-start: 132; }
.gs-133 { grid-column-start: 133; }
.gs-134 { grid-column-start: 134; }
.gs-135 { grid-column-start: 135; }
.gs-136 { grid-column-start: 136; }
.gs-137 { grid-column-start: 137; }
.gs-138 { grid-column-start: 138; }
.gs-139 { grid-column-start: 139; }
.gs-140 { grid-column-start: 140; }
.gs-141 { grid-column-start: 141; }
.gs-142 { grid-column-start: 142; }
.gs-143 { grid-column-start: 143; }
.gs-144 { grid-column-start: 144; }
.gs-145 { grid-column-start: 145; }
.gs-146 { grid-column-start: 146; }
.gs-147 { grid-column-start: 147; }
.gs-148 { grid-column-start: 148; }
.gs-149 { grid-column-start: 149; }
.gs-150 { grid-column-start: 150; }
.gs-151 { grid-column-start: 151; }
.gs-152 { grid-column-start: 152; }
.gs-153 { grid-column-start: 153; }
.gs-154 { grid-column-start: 154; }
.gs-155 { grid-column-start: 155; }
.gs-156 { grid-column-start: 156; }
.gs-157 { grid-column-start: 157; }
.gs-158 { grid-column-start: 158; }
.gs-159 { grid-column-start: 159; }
.gs-160 { grid-column-start: 160; }
.gs-161 { grid-column-start: 161; }
.gs-162 { grid-column-start: 162; }
.gs-163 { grid-column-start: 163; }
.gs-164 { grid-column-start: 164; }
.gs-165 { grid-column-start: 165; }
.gs-166 { grid-column-start: 166; }
.gs-167 { grid-column-start: 167; }
.gs-168 { grid-column-start: 168; }
.ge-2 { grid-column-end: 2; }
.ge-3 { grid-column-end: 3; }
.ge-4 { grid-column-end: 4; }
.ge-5 { grid-column-end: 5; }
.ge-6 { grid-column-end: 6; }
.ge-7 { grid-column-end: 7; }
.ge-8 { grid-column-end: 8; }
.ge-9 { grid-column-end: 9; }
.ge-10 { grid-column-end: 10; }
.ge-11 { grid-column-end: 11; }
.ge-12 { grid-column-end: 12; }
.ge-13 { grid-column-end: 13; }
.ge-14 { grid-column-end: 14; }
.ge-15 { grid-column-end: 15; }
.ge-16 { grid-column-end: 16; }
.ge-17 { grid-column-end: 17; }
.ge-18 { grid-column-end: 18; }
.ge-19 { grid-column-end: 19; }
.ge-20 { grid-column-end: 20; }
.ge-21 { grid-column-end: 21; }
.ge-22 { grid-column-end: 22; }
.ge-23 { grid-column-end: 23; }
.ge-24 { grid-column-end: 24; }
.ge-25 { grid-column-end: 25; }
.ge-26 { grid-column-end: 26; }
.ge-27 { grid-column-end: 27; }
.ge-28 { grid-column-end: 28; }
.ge-29 { grid-column-end: 29; }
.ge-30 { grid-column-end: 30; }
.ge-31 { grid-column-end: 31; }
.ge-32 { grid-column-end: 32; }
.ge-33 { grid-column-end: 33; }
.ge-34 { grid-column-end: 34; }
.ge-35 { grid-column-end: 35; }
.ge-36 { grid-column-end: 36; }
.ge-37 { grid-column-end: 37; }
.ge-38 { grid-column-end: 38; }
.ge-39 { grid-column-end: 39; }
.ge-40 { grid-column-end: 40; }
.ge-41 { grid-column-end: 41; }
.ge-42 { grid-column-end: 42; }
.ge-43 { grid-column-end: 43; }
.ge-44 { grid-column-end: 44; }
.ge-45 { grid-column-end: 45; }
.ge-46 { grid-column-end: 46; }
.ge-47 { grid-column-end: 47; }
.ge-48 { grid-column-end: 48; }
.ge-49 { grid-column-end: 49; }
.ge-50 { grid-column-end: 50; }
.ge-51 { grid-column-end: 51; }
.ge-52 { grid-column-end: 52; }
.ge-53 { grid-column-end: 53; }
.ge-54 { grid-column-end: 54; }
.ge-55 { grid-column-end: 55; }
.ge-56 { grid-column-end: 56; }
.ge-57 { grid-column-end: 57; }
.ge-58 { grid-column-end: 58; }
.ge-59 { grid-column-end: 59; }
.ge-60 { grid-column-end: 60; }
.ge-61 { grid-column-end: 61; }
.ge-62 { grid-column-end: 62; }
.ge-63 { grid-column-end: 63; }
.ge-64 { grid-column-end: 64; }
.ge-65 { grid-column-end: 65; }
.ge-66 { grid-column-end: 66; }
.ge-67 { grid-column-end: 67; }
.ge-68 { grid-column-end: 68; }
.ge-69 { grid-column-end: 69; }
.ge-70 { grid-column-end: 70; }
.ge-71 { grid-column-end: 71; }
.ge-72 { grid-column-end: 72; }
.ge-73 { grid-column-end: 73; }
.ge-74 { grid-column-end: 74; }
.ge-75 { grid-column-end: 75; }
.ge-76 { grid-column-end: 76; }
.ge-77 { grid-column-end: 77; }
.ge-78 { grid-column-end: 78; }
.ge-79 { grid-column-end: 79; }
.ge-80 { grid-column-end: 80; }
.ge-81 { grid-column-end: 81; }
.ge-82 { grid-column-end: 82; }
.ge-83 { grid-column-end: 83; }
.ge-84 { grid-column-end: 84; }
.ge-85 { grid-column-end: 85; }
.ge-86 { grid-column-end: 86; }
.ge-87 { grid-column-end: 87; }
.ge-88 { grid-column-end: 88; }
.ge-89 { grid-column-end: 89; }
.ge-90 { grid-column-end: 90; }
.ge-91 { grid-column-end: 91; }
.ge-92 { grid-column-end: 92; }
.ge-93 { grid-column-end: 93; }
.ge-94 { grid-column-end: 94; }
.ge-95 { grid-column-end: 95; }
.ge-96 { grid-column-end: 96; }
.ge-97 { grid-column-end: 97; }
.ge-98 { grid-column-end: 98; }
.ge-99 { grid-column-end: 99; }
.ge-100 { grid-column-end: 100; }
.ge-101 { grid-column-end: 101; }
.ge-102 { grid-column-end: 102; }
.ge-103 { grid-column-end: 103; }
.ge-104 { grid-column-end: 104; }
.ge-105 { grid-column-end: 105; }
.ge-106 { grid-column-end: 106; }
.ge-107 { grid-column-end: 107; }
.ge-108 { grid-column-end: 108; }
.ge-109 { grid-column-end: 109; }
.ge-110 { grid-column-end: 110; }
.ge-111 { grid-column-end: 111; }
.ge-112 { grid-column-end: 112; }
.ge-113 { grid-column-end: 113; }
.ge-114 { grid-column-end: 114; }
.ge-115 { grid-column-end: 115; }
.ge-116 { grid-column-end: 116; }
.ge-117 { grid-column-end: 117; }
.ge-118 { grid-column-end: 118; }
.ge-119 { grid-column-end: 119; }
.ge-120 { grid-column-end: 120; }
.ge-121 { grid-column-end: 121; }
.ge-122 { grid-column-end: 122; }
.ge-123 { grid-column-end: 123; }
.ge-124 { grid-column-end: 124; }
.ge-125 { grid-column-end: 125; }
.ge-126 { grid-column-end: 126; }
.ge-127 { grid-column-end: 127; }
.ge-128 { grid-column-end: 128; }
.ge-129 { grid-column-end: 129; }
.ge-130 { grid-column-end: 130; }
.ge-131 { grid-column-end: 131; }
.ge-132 { grid-column-end: 132; }
.ge-133 { grid-column-end: 133; }
.ge-134 { grid-column-end: 134; }
.ge-135 { grid-column-end: 135; }
.ge-136 { grid-column-end: 136; }
.ge-137 { grid-column-end: 137; }
.ge-138 { grid-column-end: 138; }
.ge-139 { grid-column-end: 139; }
.ge-140 { grid-column-end: 140; }
.ge-141 { grid-column-end: 141; }
.ge-142 { grid-column-end: 142; }
.ge-143 { grid-column-end: 143; }
.ge-144 { grid-column-end: 144; }
.ge-145 { grid-column-end: 145; }
.ge-146 { grid-column-end: 146; }
.ge-147 { grid-column-end: 147; }
.ge-148 { grid-column-end: 148; }
.ge-149 { grid-column-end: 149; }
.ge-150 { grid-column-end: 150; }
.ge-151 { grid-column-end: 151; }
.ge-152 { grid-column-end: 152; }
.ge-153 { grid-column-end: 153; }
.ge-154 { grid-column-end: 154; }
.ge-155 { grid-column-end: 155; }
.ge-156 { grid-column-end: 156; }
.ge-157 { grid-column-end: 157; }
.ge-158 { grid-column-end: 158; }
.ge-159 { grid-column-end: 159; }
.ge-160 { grid-column-end: 160; }
.ge-161 { grid-column-end: 161; }
.ge-162 { grid-column-end: 162; }
.ge-163 { grid-column-end: 163; }
.ge-164 { grid-column-end: 164; }
.ge-165 { grid-column-end: 165; }
.ge-166 { grid-column-end: 166; }
.ge-167 { grid-column-end: 167; }
.ge-168 { grid-column-end: 168; }
.ge-169 { grid-column-end: 169; }

/* ---------- Ütemterv: jelölések (állapot, prioritás, részfeladatok) ---------- */
.gt-lbody { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.gt-status {
  --sc: var(--accent); --p: 0;
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: inline-grid; place-items: center;
  background: conic-gradient(var(--sc) calc(var(--p) * 1%), var(--surface-3) 0);
  font-weight: 800; font-size: .8rem; line-height: 1;
}
.gt-status::before { content: ""; grid-area: 1 / 1; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); }
.gt-status > * { grid-area: 1 / 1; position: relative; }
.gt-status .icon { width: 13px; height: 13px; stroke-width: 3; }
.gt-status.s-soon { --sc: var(--warn); background: conic-gradient(var(--sc) calc(var(--p) * 1%), color-mix(in srgb, var(--warn) 60%, var(--surface)) 0); }
.gt-status.s-overdue { background: var(--danger); color: #fff; }
.gt-status.s-overdue::before, .gt-status.s-done::before { display: none; }
.gt-status.s-done { background: var(--ok); color: #fff; }
.gt-status.p-0 { --p: 0; } .gt-status.p-1 { --p: 10; } .gt-status.p-2 { --p: 20; } .gt-status.p-3 { --p: 30; } .gt-status.p-4 { --p: 40; } .gt-status.p-5 { --p: 50; } .gt-status.p-6 { --p: 60; } .gt-status.p-7 { --p: 70; } .gt-status.p-8 { --p: 80; } .gt-status.p-9 { --p: 90; } .gt-status.p-10 { --p: 100; }
.prio-badge { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; font-weight: 700; padding: .05rem .45rem .05rem .3rem; border-radius: 99px; line-height: 1.5; white-space: nowrap; }
.prio-badge .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.prio-badge.prio-high { color: var(--danger); background: var(--danger-soft); }
.prio-badge.prio-normal { color: var(--fg-muted); background: var(--surface-2); }
.prio-badge.prio-low { color: var(--fg-subtle); background: transparent; border: 1px solid var(--border); }
.gt-row.prio-high .gt-label { box-shadow: inset 4px 0 0 var(--danger); }
.gt-row.prio-low .gt-title { font-weight: 550; }
.gt-barprio { position: relative; display: inline-flex; margin-right: auto; color: var(--danger); }
.gt-barprio .icon { width: 13px; height: 13px; stroke-width: 2.8; }
.gt-bar.prio-high { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }

.gt-steps { display: inline-flex; align-items: center; gap: 2px; }
.gt-steps i { width: 9px; height: 9px; border-radius: 2px; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-block; }
.gt-steps i.is-done { background: var(--ok); border-color: var(--ok); }
.gt-steps i.is-late { border-color: var(--danger); background: var(--danger-soft); }
.gt-steps b { margin-left: .25rem; font-size: .72rem; color: var(--fg-muted); font-weight: 700; }
.gt-dates { font-size: .72rem; }
.gt-donetext { display: inline-flex; align-items: center; gap: .25rem; color: var(--ok); font-weight: 700; }
.gt-donetext .icon { width: 12px; height: 12px; stroke-width: 3; }
.gt-ontime { font-size: .68rem; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: 99px; padding: 0 .4rem; }
.gt-ontime.is-late { color: var(--warn); background: var(--warn-soft); }
.gt-row.is-done .gt-title { text-decoration: none; color: var(--fg-muted); }

.gt-ms, .gt-closed {
  width: 18px; height: 18px; justify-self: start; margin-left: -9px; border-radius: 50%; z-index: 3; position: relative;
  display: inline-grid; place-items: center; font-size: .7rem; font-weight: 800; line-height: 1;
  background: var(--surface); border: 2px solid var(--accent); color: var(--accent); box-shadow: 0 0 0 2px var(--surface);
}
.gt-ms .icon, .gt-closed .icon { width: 11px; height: 11px; stroke-width: 3.2; }
.gt-ms.is-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.gt-ms.is-late { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.gt-closed { width: 22px; height: 22px; margin-left: -11px; background: var(--ok); border-color: var(--surface); color: #fff; box-shadow: 0 0 0 1px var(--ok), var(--shadow); }
.gt-closed .icon { width: 13px; height: 13px; }
.gt-ms.is-static, .gt-closed.is-static { margin-left: 0; box-shadow: none; }
.gt-closed.is-static { box-shadow: 0 0 0 1px var(--ok); }

.gt-toolbar2 { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.seg-sm a { font-size: .82rem; }
.gt-legend { flex: 1 1 520px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: .8rem; }
.gt-legend summary { cursor: pointer; padding: .45rem .8rem; font-weight: 650; color: var(--fg-muted); display: flex; align-items: center; gap: .4rem; }
.gt-legend summary .icon { width: 15px; height: 15px; }
.gt-legend[open] summary { border-bottom: 1px solid var(--border); }
.gt-legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem 1.25rem; padding: .7rem .9rem .8rem; }
.gt-legend h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-subtle); margin: 0 0 .35rem; }
.gt-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.gt-legend li { display: flex; align-items: center; gap: .45rem; color: var(--fg-muted); }
.gt-legend li .gt-ms + .gt-ms { margin-left: -2px; }
@media (max-width: 760px) {
  .gt { --label-w: 170px; }
  .gt-label { gap: .4rem; padding-left: .6rem; }
  .gt-meta .gt-who, .gt-dates .gt-ontime { display: none; }
}
.gt-bar.is-done { justify-content: flex-start; background: color-mix(in srgb, var(--ok) 16%, var(--surface)); }
@media (min-width: 1200px) { .gt-legend-grid { grid-template-columns: 1.2fr 1fr 1.3fr 1fr; } }

/* ---------- Ütemterv: havi nézet, nagyítás ---------- */
.gs-169 { grid-column-start: 169; }
.gs-170 { grid-column-start: 170; }
.gs-171 { grid-column-start: 171; }
.gs-172 { grid-column-start: 172; }
.gs-173 { grid-column-start: 173; }
.gs-174 { grid-column-start: 174; }
.gs-175 { grid-column-start: 175; }
.gs-176 { grid-column-start: 176; }
.gs-177 { grid-column-start: 177; }
.gs-178 { grid-column-start: 178; }
.gs-179 { grid-column-start: 179; }
.gs-180 { grid-column-start: 180; }
.gs-181 { grid-column-start: 181; }
.gs-182 { grid-column-start: 182; }
.gs-183 { grid-column-start: 183; }
.gs-184 { grid-column-start: 184; }
.gs-185 { grid-column-start: 185; }
.gs-186 { grid-column-start: 186; }
.ge-170 { grid-column-end: 170; }
.ge-171 { grid-column-end: 171; }
.ge-172 { grid-column-end: 172; }
.ge-173 { grid-column-end: 173; }
.ge-174 { grid-column-end: 174; }
.ge-175 { grid-column-end: 175; }
.ge-176 { grid-column-end: 176; }
.ge-177 { grid-column-end: 177; }
.ge-178 { grid-column-end: 178; }
.ge-179 { grid-column-end: 179; }
.ge-180 { grid-column-end: 180; }
.ge-181 { grid-column-end: 181; }
.ge-182 { grid-column-end: 182; }
.ge-183 { grid-column-end: 183; }
.ge-184 { grid-column-end: 184; }
.ge-185 { grid-column-end: 185; }
.ge-186 { grid-column-end: 186; }
.ge-187 { grid-column-end: 187; }
.cols-174 :is(.gt-track, .gt-nowlayer, .gt-hourrow) { grid-template-columns: repeat(174, minmax(0, 1fr)); } .cols-180 :is(.gt-track, .gt-nowlayer, .gt-hourrow) { grid-template-columns: repeat(180, minmax(0, 1fr)); } .cols-186 :is(.gt-track, .gt-nowlayer, .gt-hourrow) { grid-template-columns: repeat(186, minmax(0, 1fr)); }
.gt-cols.n-29, .gt-bg.n-29 { grid-template-columns: repeat(29, minmax(0, 1fr)); } .gt-cols.n-30, .gt-bg.n-30 { grid-template-columns: repeat(30, minmax(0, 1fr)); } .gt-cols.n-31, .gt-bg.n-31 { grid-template-columns: repeat(31, minmax(0, 1fr)); }

.gt-headright { min-width: 0; display: flex; flex-direction: column; }
button.gt-day { font: inherit; color: inherit; background: transparent; border: 0; border-left: 1px solid var(--border); cursor: zoom-in; width: 100%; }
button.gt-day.is-weekend { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
button.gt-day:hover { background: var(--accent-soft); }
button.gt-day:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.gt-hourrow { display: none; grid-template-columns: repeat(168, minmax(0, 1fr)); border-top: 1px solid var(--border); font-size: .62rem; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.gt-hourrow span { padding: .15rem 0 .2rem 2px; border-left: 1px solid transparent; overflow: hidden; white-space: nowrap; }
.gt-hourrow span.h0 { border-left-color: var(--border); color: var(--fg-muted); font-weight: 700; }
.gt-hourrow.per-24 span:not(.h3) { visibility: hidden; }
.zoom-hours .gt-hourrow { display: grid; }
.zoom-hours-all .gt-hourrow.per-24 span:not(.h3) { visibility: visible; }
.zoom-hours .gt-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--border) 70%, transparent) 0 1px, transparent 1px var(--colw, 40px)); }
.gt-bg { isolation: isolate; }
.gt.is-pannable .gt-body { cursor: grab; }
.gt.is-panning .gt-body { cursor: grabbing; user-select: none; }
.gt-zoombar { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.gt-zoombar[hidden] { display: none; }
.gt-zoombtns { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .2rem .3rem; }
.gt-zoombtns .btn[disabled] { opacity: .45; }
.gt-zoomlevel { min-width: 3.4rem; text-align: center; font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }
.gt-zoomhint { margin: 0; font-size: .78rem; display: inline-flex; align-items: center; gap: .35rem; flex: 1 1 320px; }
.gt-zoomhint .icon { width: 14px; height: 14px; flex: none; }
.gt-titlerow { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.gt-titlerow .gt-title { min-width: 0; }
.gt-zoomtask { flex: none; width: 24px; height: 24px; display: inline-grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--fg-subtle); cursor: zoom-in; opacity: 0; transition: opacity .12s, background-color .12s; }
.gt-row:hover .gt-zoomtask, .gt-zoomtask:focus-visible { opacity: 1; }
.gt-zoomtask:hover { background: var(--accent-soft); color: var(--accent); }
.gt-zoomtask .icon { width: 15px; height: 15px; }
@media (hover: none) { .gt-zoomtask { opacity: 1; } }
.gt-row.is-focus .gt-label { background: var(--accent-soft); }
.tt-daylist { display: flex; flex-direction: column; gap: .4rem; }
.tt-daylist .tt-item { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); align-items: center; column-gap: .6rem; }
.tt-daylist .tt-item .tt-time { grid-row: 1 / span 2; font-size: .85rem; }
.tt-daylist .tt-item .tt-title { -webkit-line-clamp: 1; }
.tt-daylist .tt-item .tt-parent { grid-column: 2; }
.pw-rules { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .8rem; color: var(--fg-muted); }
.pw-rules li { display: inline-flex; align-items: center; gap: .3rem; }
.pw-rules li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-strong); box-sizing: border-box; }
.pw-rules li.is-ok { color: var(--ok); }
.pw-rules li.is-ok::before { border-color: var(--ok); background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat; }
@media (max-width: 760px) {
  .gt-zoombtns { flex-wrap: wrap; border-radius: 14px; }
  .gt-zoomhint { display: none; }
}

/* ---------- Prioritás: 5 fokozat (P1 = legfontosabb … P5 = ráér) ---------- */
:root {
  --p1: #b3122e; --p1-soft: #fbe4e8;
  --p2: #c9480c; --p2-soft: #fdebe0;
  --p3: #2c6aae; --p3-soft: #e4eef9;
  --p4: #5b6e80; --p4-soft: #ebeff3;
  --p5: #8a939c; --p5-soft: #f1f3f5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p1: #ff7d8d; --p1-soft: #3d1820; --p2: #ffa06b; --p2-soft: #3a2316;
    --p3: #85b6ee; --p3-soft: #172739; --p4: #a6b5c3; --p4-soft: #242b32; --p5: #8e979f; --p5-soft: #222629;
  }
}
:root[data-theme="dark"] {
  --p1: #ff7d8d; --p1-soft: #3d1820; --p2: #ffa06b; --p2-soft: #3a2316;
  --p3: #85b6ee; --p3-soft: #172739; --p4: #a6b5c3; --p4-soft: #242b32; --p5: #8e979f; --p5-soft: #222629;
}
.prio-1 { --pc: var(--p1); --pc-soft: var(--p1-soft); }
.prio-2 { --pc: var(--p2); --pc-soft: var(--p2-soft); }
.prio-3 { --pc: var(--p3); --pc-soft: var(--p3-soft); }
.prio-4 { --pc: var(--p4); --pc-soft: var(--p4-soft); }
.prio-5 { --pc: var(--p5); --pc-soft: var(--p5-soft); }

.prio-chip {
  display: inline-flex; align-items: center; gap: .3rem; flex: none;
  font-size: .72rem; font-weight: 750; letter-spacing: .02em; line-height: 1; white-space: nowrap;
  padding: .22rem .5rem .22rem .4rem; border-radius: 6px;
  color: var(--pc); background: var(--pc-soft); border: 1px solid color-mix(in srgb, var(--pc) 30%, transparent);
  font-variant-numeric: tabular-nums;
}
.prio-chip.prio-1, .prio-chip.prio-2 { color: #fff; background: var(--pc); border-color: var(--pc); }
:root[data-theme="dark"] .prio-chip.prio-1, :root[data-theme="dark"] .prio-chip.prio-2 { color: #1a0c10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prio-chip.prio-1, :root:not([data-theme="light"]) .prio-chip.prio-2 { color: #1a0c10; } }
.prio-chip.prio-4 { background: transparent; }
.prio-chip.prio-5 { background: transparent; border-style: dashed; font-weight: 650; }
.prio-chip .prio-name { font-weight: 600; }
.prio-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.prio-bars i { width: 2.5px; border-radius: 1px; background: currentColor; }
.prio-bars i:nth-child(1) { height: 3px; } .prio-bars i:nth-child(2) { height: 4.5px; } .prio-bars i:nth-child(3) { height: 6px; }
.prio-bars i:nth-child(4) { height: 8px; } .prio-bars i:nth-child(5) { height: 10px; }
.prio-2 .prio-bars i:nth-child(n+5), .prio-3 .prio-bars i:nth-child(n+4),
.prio-4 .prio-bars i:nth-child(n+3), .prio-5 .prio-bars i:nth-child(n+2) { opacity: .25; }

/* Sor eleji prioritás-csík (lista és ütemterv) */
.task-item.prio-high::before { display: none; }
.task-item[class*="prio-"]::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pc);
}
.task-item.prio-1::before, .task-item.prio-2::before { width: 4px; }
.task-item.prio-5::before { display: none; }
.gt-row.prio-high .gt-label { box-shadow: none; }
.gt-row[class*="prio-"] .gt-label { box-shadow: inset 3px 0 0 var(--pc); }
.gt-row.prio-1 .gt-label, .gt-row.prio-2 .gt-label { box-shadow: inset 5px 0 0 var(--pc); }
.gt-row.prio-5 .gt-label { box-shadow: none; }
.gt-barprio { position: relative; margin-right: auto; font-size: .64rem; font-weight: 800; color: #fff; background: var(--pc); border-radius: 4px; padding: .1rem .3rem; line-height: 1.2; }
.gt-bar.prio-1, .gt-bar.prio-2 { border-color: color-mix(in srgb, var(--pc) 60%, transparent); }
.tt-item .prio-chip { font-size: .62rem; padding: .12rem .35rem .12rem .3rem; }

/* Prioritás-választó az űrlapon */
.prio-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.prio-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .25rem .4rem; border: 1px solid var(--border); border-top: 3px solid var(--pc); border-radius: 8px; cursor: pointer; background: var(--surface); text-align: center; transition: background-color .12s, border-color .12s, box-shadow .12s; }
.prio-opt input { position: absolute; opacity: 0; pointer-events: none; }
.prio-opt-p { font-weight: 800; font-size: .95rem; color: var(--pc); }
.prio-opt-name { font-size: .7rem; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.prio-opt:hover { background: var(--pc-soft); }
.prio-opt:has(input:checked) { background: var(--pc-soft); border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc) inset; }
.prio-opt:has(input:checked) .prio-opt-name { color: var(--fg); font-weight: 650; }
.prio-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Saját feladat sávja: satírozott */
.gt-bar.is-personal {
  border-style: solid;
  background-color: var(--c-soft);
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent) 0 3px, transparent 3px 8px);
}
.gt-bar.is-personal .gt-bartext { background: color-mix(in srgb, var(--c-soft) 85%, transparent); border-radius: 4px; padding: 0 .25rem; }

/* Jelmagyarázat az idővonal alatt */
.gt-legend { margin-top: .25rem; }
.lg-bar { width: 38px; height: 14px; flex: none; border-radius: 4px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: inset -3px 0 0 var(--accent); }
.lg-bar.is-personal { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent) 0 3px, transparent 3px 8px); }
.lg-bar.cont { box-shadow: none; border-right: 2px dashed var(--accent); border-radius: 4px 0 0 4px; }
.gt-legend .prio-chip { min-width: 3.1rem; }
.tt-item.is-personal:not(.is-done):not(.is-overdue) { border-style: solid; background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fg-subtle) 16%, transparent) 0 3px, transparent 3px 8px); }
.tt-main > .gt-legend { flex: none; }

/* ---------- Csapatlogó (ha van public/assets/img/csapat-logo.*) ---------- */
.team-logo { display: block; object-fit: contain; }
.team-logo-aside { max-width: min(240px, 70%); max-height: 150px; width: auto; height: auto; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .25)); }
.team-logo-card { display: none; max-height: 72px; max-width: 200px; width: auto; height: auto; margin-inline: auto; }
@media (max-width: 900px) { .team-logo-card { display: block; } }
.site-footer .copy { display: inline-flex; align-items: center; gap: .55rem; }
.team-logo-foot { height: 28px; width: auto; max-width: 90px; opacity: .9; }
@media print { .team-logo-foot { display: none; } }
/* A logó sötét feliratú, átlátszó hátterű: sötét felületen fehér „kártyára” kerül */
.team-logo-aside { max-width: min(340px, 100%); max-height: none; background: #fff; padding: 14px 18px; border-radius: 14px; box-sizing: border-box; filter: none; box-shadow: 0 10px 30px rgb(0 0 0 / .28); }
.team-logo-card { max-width: 230px; max-height: none; }
.team-logo-foot { height: 30px; max-width: none; opacity: 1; }
:root[data-theme="dark"] .team-logo-card, :root[data-theme="dark"] .team-logo-foot { background: #fff; padding: 6px 10px; border-radius: 8px; box-sizing: content-box; }
:root[data-theme="dark"] .team-logo-foot { padding: 3px 6px; border-radius: 6px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .team-logo-card { background: #fff; padding: 6px 10px; border-radius: 8px; box-sizing: content-box; }
  :root:not([data-theme="light"]) .team-logo-foot { background: #fff; padding: 3px 6px; border-radius: 6px; box-sizing: content-box; }
}
@media (max-width: 900px) { .team-logo-aside { display: none; } }
.auth-aside:has(.team-logo-aside) .aside-foot { display: none; }

/* ---------- Bejelentkezés / regisztráció: versenycsapat-hero a logóval ---------- */
.auth-hero {
  --race-red: #b9201a;
  justify-content: flex-start; gap: 1.5rem; isolation: isolate;
  background:
    radial-gradient(900px 520px at 105% -5%, rgb(185 32 26 / .38), transparent 62%),
    radial-gradient(700px 480px at -15% 115%, rgb(0 0 0 / .5), transparent 60%),
    linear-gradient(155deg, #3d0b17 0%, var(--brand) 48%, #1c070d 100%);
}
.hero-center { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2rem; position: relative; z-index: 1; max-width: 620px; }
.hero-logo { position: relative; width: min(560px, 100%); margin: .5rem 0 1rem 1.2rem; animation: hero-in .7s cubic-bezier(.2, .8, .2, 1) both; }
.hero-logo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; border-radius: 16px;
  transform: skewX(-20deg); box-shadow: 0 24px 60px rgb(0 0 0 / .4), 0 2px 0 rgb(255 255 255 / .6) inset;
}
.hero-logo::after {
  content: ""; position: absolute; left: 8%; right: 22%; bottom: -16px; height: 7px; border-radius: 3px;
  background: linear-gradient(90deg, var(--race-red), rgb(185 32 26 / 0)); transform: skewX(-20deg);
}
.team-logo-hero { display: block; width: 100%; height: auto; padding: clamp(16px, 2.6vw, 30px) clamp(24px, 4vw, 48px); box-sizing: border-box; }
.hero-copy { display: flex; flex-direction: column; gap: .5rem; }
.hero-kicker { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .7); opacity: 1; display: flex; align-items: center; gap: .6rem; }
.hero-kicker::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--race-red); transform: skewX(-20deg); }
.auth-hero h2 { max-width: 20ch; font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.12; }
.auth-hero .hero-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; flex-direction: initial; }
.auth-hero .hero-features li {
  display: flex; gap: .7rem; align-items: flex-start; padding: .85rem .95rem; border-radius: 12px;
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); font-size: .9rem; line-height: 1.45;
  backdrop-filter: blur(4px); transition: background-color .15s, transform .15s;
}
.auth-hero .hero-features li:hover { background: rgb(255 255 255 / .11); transform: translateY(-1px); }
.hf-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--race-red); color: #fff; box-shadow: 0 4px 12px rgb(185 32 26 / .45); }
.hf-ico .icon { width: 16px; height: 16px; margin: 0 !important; }
.hero-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(110deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 26px);
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%); mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
}
.hero-checker {
  position: absolute; left: -30px; right: 35%; bottom: 26px; height: 20px; z-index: 0; pointer-events: none; transform: skewX(-20deg); opacity: .16;
  background: conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0) 0 0 / 20px 20px;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent);
}
.auth-hero .brand { position: relative; z-index: 1; }
@keyframes hero-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } }
@media (max-width: 1180px) { .auth-hero .hero-features { grid-template-columns: minmax(0, 1fr); } }
.team-logo-card { display: none !important; }
@media (max-width: 900px) {
  .auth-hero { padding: 1.25rem 1rem 2.25rem; gap: 1rem; }
  .auth-hero .hero-center { gap: 0; align-items: center; }
  .auth-hero .hero-copy, .auth-hero .hero-features { display: none; }
  .hero-logo { width: min(340px, 82%); margin: .75rem auto .5rem; }
  .hero-logo::after { bottom: -12px; height: 5px; }
  .hero-checker { bottom: 10px; height: 14px; background-size: 14px 14px; }
}

/* ---------- Bejelentkezés Google-fiókkal ---------- */
.oauth-sep { display: flex; align-items: center; gap: .75rem; color: var(--fg-subtle); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.oauth-sep::before, .oauth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-google { gap: .6rem; background: var(--surface); color: var(--fg); border: 1px solid var(--border-strong); font-weight: 650; }
.btn-google:hover { background: var(--surface-2); color: var(--fg); border-color: var(--fg-subtle); }
.btn-google .icon { width: 18px; height: 18px; }
.oauth-note { margin: -.6rem 0 0; text-align: center; }
.allow-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; border-top: 1px solid var(--border); }
.allow-form .field { flex: 1 1 260px; margin: 0; }
.allow-form .check { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--fg-muted); min-height: 40px; }
.allow-list .who span { font-size: .8rem; }
.allow-ico { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--fg-muted); }
.allow-ico .icon { width: 16px; height: 16px; }
.hint-warn { display: flex; align-items: flex-start; gap: .4rem; color: var(--warn); }
.hint-warn .icon { width: 15px; height: 15px; flex: none; margin-top: .15rem; }
@media (max-width: 760px) {
  .role-list li { flex-wrap: wrap; }
  .role-actions { flex-basis: 100%; flex-wrap: nowrap; }
}