:root {
  --ink:#131A2B; --ink-2:#1E2740; --ink-text:#C9D1E6;
  --paper:#E9EDF2; --surface:#FFFFFF; --line:#DDE2EA; --line-2:#EEF1F5;
  --text:#18202F; --muted:#677087;
  --cobalt:#2F45E6; --cobalt-d:#2236C2; --signal:#F4B731; --mint:#138A72; --rust:#CF4A2E;
  --radius:10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-size:15px; line-height:1.5; background:var(--paper); color:var(--text); -webkit-font-smoothing:antialiased; }
h1, h2, h3 { letter-spacing:-.015em; line-height:1.2; }
h1 { font-size:24px; margin:0 0 14px; font-weight:750; }
h2 { font-size:18px; margin:0 0 12px; font-weight:700; }
h3 { font-size:15px; margin:0 0 8px; font-weight:700; }
p { margin:0 0 12px; max-width:68ch; }
strong { font-weight:650; }
.muted { color:var(--muted); font-size:13.5px; } .center { text-align:center; }
:focus-visible { outline:3px solid color-mix(in srgb, var(--cobalt) 55%, white); outline-offset:2px; }

/* ---- каркас: темна колонка зліва, робоча область справа ---- */
.layout { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh; }
.rail { background:var(--ink); color:var(--ink-text); padding:22px 14px; display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; }
.brand { font-size:21px; font-weight:800; letter-spacing:-.03em; color:#fff; padding:0 10px; }
.brand::after { content:""; display:inline-block; width:9px; height:9px; margin-left:4px; border-radius:50%; background:var(--signal); }
.nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.nav button { text-align:left; background:none; border:0; color:var(--ink-text); padding:8px 12px; border-radius:8px; font-size:14.5px; position:relative; }
.nav button:hover { background:var(--ink-2); color:#fff; }
.nav button.active { background:var(--ink-2); color:#fff; font-weight:650; }
.nav button.active::before { content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:4px; border-radius:0 3px 3px 0; background:var(--signal); }
.me { display:flex; align-items:center; gap:10px; width:100%; padding:10px; text-align:left; background:var(--ink-2); border:1px solid transparent; border-radius:10px; color:#fff; }
.me:hover, .me.active { background:#27325A; } .me.active { border-color:var(--signal); }
.me .who { flex:1; min-width:0; font-size:15px; font-weight:600; color:#fff; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me .muted { color:#8791AE; font-size:13px; font-weight:400; }
button.exit, .rail button.exit { background:transparent; color:var(--ink-text); border-color:#3A4569; } .rail button.exit:hover { background:var(--ink-2); color:#fff; }
.main { padding:26px clamp(16px,4vw,40px) 48px; max-width:900px; width:100%; margin:0 auto; }

/* ---- вхід: по центру на темному фоні ---- */
#app > h1, #app > .card, #app > .msg, #app > p { max-width:420px; margin-left:auto; margin-right:auto; }
#app > h1 { margin-top:12vh; text-align:center; }
#app > h1.login-brand { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px; font-size:26px; }
.login-brand img { display:block; border-radius:9px; }
.login .wide-seg { display:flex; margin-bottom:6px; } .login .wide-seg button { flex:1 1 0; }
.login .wide { width:100%; margin-top:18px; padding:10px 14px; }
.login .or { display:flex; align-items:center; gap:10px; margin:18px 0 12px; color:var(--muted); font-size:13px; } .login .or::before, .login .or::after { content:""; flex:1; height:1px; background:var(--line); }
.login .social { display:grid; gap:8px; } .login .social a { display:block; } .login .social button { width:100%; }
#app > .card { margin-bottom:16px; }

/* ---- панелі ---- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.card > h3 { margin-top:26px; } .card > h3:first-child, .card > h2 + h3 { margin-top:0; }
.card > .item:first-of-type { border-top:0; }

/* ---- форми ---- */
label { display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:12px 0 4px; }
input, select, textarea { width:100%; padding:8px 10px; font:inherit; font-size:14.5px; color:var(--text); background:#fff; border:1px solid #C9D0DC; border-radius:8px; }
input:hover, select:hover, textarea:hover { border-color:#A9B2C4; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--cobalt); box-shadow:0 0 0 3px color-mix(in srgb, var(--cobalt) 20%, transparent); }
input[type=radio] { width:auto; accent-color:var(--cobalt); }
textarea { min-height:72px; resize:vertical; }
.card > input, .card > select, .card > textarea { margin-top:8px; }
.card > .row { margin-top:8px; }
button { font:inherit; font-size:14px; font-weight:600; padding:8px 14px; border-radius:8px; border:1px solid var(--cobalt); background:var(--cobalt); color:#fff; cursor:pointer; transition:background .12s; }
button:hover { background:var(--cobalt-d); }
button.secondary { background:#fff; color:var(--cobalt); border-color:#C3CAF5; } button.secondary:hover { background:#F1F3FE; }
button.danger { background:#fff; color:var(--rust); border-color:#EBC3B9; padding:5px 9px; line-height:1; } button.danger:hover { background:#FDF1EE; }
button:disabled { opacity:.5; cursor:default; }
.link { background:none !important; border:0; color:var(--cobalt); padding:0; font-weight:600; text-decoration:none; }
.link:hover { text-decoration:underline; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .row > * { flex:1 1 140px; } .row > button { flex:0 0 auto; }

/* ---- списки ---- */
.item { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line-2); flex-wrap:wrap; }
.item .grow { flex:1 1 200px; min-width:0; }
.item select { width:auto; }
.item .link { font-size:14.5px; }
.avatar { width:34px; height:34px; flex:0 0 34px; border-radius:50%; object-fit:cover; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; background:var(--line); }
.avatar.sm { width:28px; height:28px; flex-basis:28px; font-size:12.5px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; }
.tag { display:inline-block; font-size:12.5px; font-weight:600; padding:2px 9px; border-radius:99px; background:#EAEDFB; color:var(--cobalt-d); margin-left:6px; white-space:nowrap; }
.chips .tag { margin-left:0; }
.tag.r-owner { background:var(--ink); color:#fff; }
.tag.r-executor { background:#E3F3EE; color:#0B6A57; }
.tag.r-consultant { background:#F0E9FB; color:#5B2FA8; }
.tag.r-overseer { background:#E2F1F8; color:#0B6385; }
.tag.r-investor { background:#FBF0D3; color:#7A5600; }
.tag.r-custom { background:#EEF0F4; color:#47506A; }
.tag.s-active { background:#E3F3EE; color:#0B6A57; } .tag.s-paused { background:#FBF0D3; color:#7A5600; }
.tag.s-done { background:#EAEDFB; color:var(--cobalt-d); } .tag.s-cancelled, .tag.s-draft { background:#EEF0F4; color:#47506A; }

/* ---- задачі ---- */
h1 + .card, h1 + p { margin-top:0; }
.task { border-top:1px solid var(--line-2); } .card > .task:first-child { border-top:0; }
.task .item { border-top:0; }
.task.done strong { color:var(--muted); text-decoration:line-through; }
.task-desc { margin:-2px 0 8px 38px; } .task-extra { margin:0 0 10px 38px; padding:12px; background:var(--paper); border-radius:8px; }
.task-extra .item { border-top:1px solid var(--line); } .task-extra .item:first-child { border-top:0; }
.comment { display:flex; gap:10px; margin-bottom:10px; }
.overdue { color:var(--rust); font-weight:600; }
.small { font-size:13px; }
.task-actions { flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; padding-left:38px; margin-top:-4px; }
.task-actions .link { font-size:13px; }
.task-actions .danger { margin-left:auto; }
.task > .item > .grow { flex:1 1 140px; }
select.status { width:auto; padding:4px 10px; font-size:13px; font-weight:600; border-radius:99px; }
select.status.s-in_progress { background:#EAEDFB; border-color:#C3CAF5; color:var(--cobalt-d); }
select.status.s-in_review { background:#FBF0D3; border-color:#EBD38C; color:#7A5600; }
select.status.s-done { background:#E3F3EE; border-color:#B9DED3; color:#0B6A57; }
.tag.s-new, .tag.s-in_progress, .tag.s-in_review, .tag.s-done { margin-left:0; }
.tag.s-in_progress { background:#EAEDFB; color:var(--cobalt-d); } .tag.s-in_review { background:#FBF0D3; color:#7A5600; }
.avatar.open { background:transparent; color:var(--muted); border:2px dashed #B6BFD0; }
label.check { display:flex; gap:10px; align-items:center; font-weight:500; color:var(--text); font-size:14px; margin:10px 0; cursor:pointer; }
td label.check { margin:0; }
input[type=checkbox] { appearance:none; -webkit-appearance:none; flex:0 0 20px; width:20px; height:20px; margin:0; padding:0; border:1.5px solid #9AA4B8; border-radius:6px; background:#fff; display:inline-grid; place-content:center; cursor:pointer; }
input[type=checkbox]:hover { border-color:var(--cobalt); }
input[type=checkbox]::after { content:""; width:11px; height:6px; margin-top:-2px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) scale(0); transition:transform .1s; }
input[type=checkbox]:checked { background:var(--cobalt); border-color:var(--cobalt); }
input[type=checkbox]:checked::after { transform:rotate(-45deg) scale(1); }
.badge { display:inline-block; min-width:20px; margin-left:8px; padding:0 6px; border-radius:99px; background:var(--signal); color:var(--ink); font-size:12px; font-weight:700; text-align:center; }
.note.unread { background:#F5F7FE; margin:0 -12px; padding-left:12px; padding-right:12px; border-radius:8px; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--cobalt); flex:0 0 9px; }
.link.plain { text-align:left; font-weight:500; color:var(--text); }

/* ---- проєкт ---- */
.progress { margin:4px 0 12px; }
.bar { height:8px; border-radius:99px; background:#D5DBE5; overflow:hidden; margin-bottom:6px; }
.bar i { display:block; height:100%; background:var(--signal); border-radius:99px; transition:width .35s ease-out; }
.invite { padding:14px 0; border-top:1px solid var(--line-2); }
.invite:first-of-type { border-top:0; padding-top:0; }
.invite h3 { margin-bottom:4px; }

/* ---- повідомлення ---- */
.msg { padding:10px 14px; border-radius:8px; margin:0 0 14px; font-size:14px; font-weight:500; }
.msg.err { background:#FDEDE9; color:#9C2F18; border:1px solid #F3CDC3; } .msg.ok { background:#E5F5F0; color:#0B6A57; border:1px solid #BFE5DA; }

/* ---- таблиці (кола) ---- */
table { border-collapse:collapse; width:100%; font-size:14px; }
td, th { vertical-align:middle; padding:8px 6px; border-top:1px solid var(--line-2); text-align:left; }
td select { width:auto; }

/* ---- мобільний: верхня панель і висувне меню ---- */
.topbar, .scrim { display:none; }
.burger { position:relative; width:40px; height:40px; padding:0; display:grid; place-items:center; background:transparent; border:1px solid var(--ink-2); border-radius:10px; color:#fff; }
.burger:hover { background:var(--ink-2); }
.burger-bars, .burger-bars::before, .burger-bars::after { display:block; width:20px; height:2px; border-radius:2px; background:#fff; content:""; }
.burger-bars { position:relative; } .burger-bars::before { position:absolute; top:-6px; } .burger-bars::after { position:absolute; top:6px; }
.burger-dot { position:absolute; top:-6px; right:-6px; min-width:20px; padding:0 5px; border-radius:99px; background:var(--signal); color:var(--ink); font-size:12px; font-weight:700; line-height:20px; text-align:center; }
@media (max-width:760px) {
  .layout { display:block; }
  .topbar { display:flex; align-items:center; justify-content:space-between; position:fixed; z-index:20; top:0; left:0; right:0; height:54px; padding:0 14px; padding-top:env(safe-area-inset-top); background:var(--ink); }
  .scrim { display:block; position:fixed; z-index:30; inset:0; background:rgba(10,14,26,.55); opacity:0; pointer-events:none; transition:opacity .2s; }
  .layout.open .scrim { opacity:1; pointer-events:auto; }
  .rail { position:fixed; z-index:40; top:0; right:0; bottom:0; left:auto; width:min(320px,86vw); height:auto; padding:20px 14px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto; transform:translateX(100%); transition:transform .22s ease; box-shadow:-8px 0 24px rgba(0,0,0,.25); visibility:hidden; }
  .layout.open .rail { transform:none; visibility:visible; }
  .nav button { padding:11px 14px; font-size:16px; }
  .nav button.active::before { left:-14px; }
  body.menu-open { overflow:hidden; }
  .task-actions { padding-left:0; gap:4px 12px; } .task-desc, .task-extra { margin-left:0; }
  .main { padding:68px 12px 28px; }
  h1 { font-size:21px; margin-bottom:12px; }
  .card { padding:14px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* ---- профіль ---- */
.profile-head { display:flex; gap:18px; align-items:flex-start; }
.profile-head h1 { margin:0 0 2px; font-size:26px; }
.avatar.lg { width:72px; height:72px; flex-basis:72px; font-size:30px; }
.spec { font-weight:600; margin-top:6px; }
.bio { margin:16px 0 0; white-space:pre-wrap; }
.icon-btn { padding:9px; width:38px; height:38px; display:grid; place-items:center; background:#fff; color:var(--cobalt); border-color:#C3CAF5; border-radius:50%; flex:0 0 38px; }
.icon-btn:hover { background:#F1F3FE; }
.hours { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 16px; font-size:15px; }
.actions { margin-top:16px; } .actions > button { flex:0 0 auto; }
.profile-head .grow { flex:1; min-width:0; }

/* ---- проєкти ---- */
.page-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.page-head h1 { margin:0; }
textarea.short { min-height:64px; } textarea.tall { min-height:200px; line-height:1.55; }
.pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.goal-text { font-size:17px; line-height:1.5; }
.meta { margin-top:8px; }
.project-card .item { border-top:0; padding-top:0; }
.project-card h3 { margin:0; font-size:18px; } .project-card .tag { margin-left:10px; }
.progress .bar { height:10px; }
.goal { padding:14px 0; border-top:1px solid var(--line-2); } .goal:first-of-type { border-top:0; padding-top:4px; }
.goal .item { border-top:0; padding:0; }
.metric { margin-top:10px; max-width:420px; } .metric .bar { height:8px; margin-bottom:4px; } .metric span { font-size:14px; font-weight:600; }
.add-goal { margin-top:20px; padding-top:4px; border-top:1px dashed var(--line); }
.add-goal > input, .add-goal > textarea { margin-bottom:8px; }
.sub { padding:6px 0 10px; border-top:1px solid var(--line-2); } .sub:first-of-type { border-top:0; }
.sub .item { border-top:0; padding-bottom:0; } .sub .progress { margin:0 0 0 0; }

.card.nudge { border-color:var(--cobalt); box-shadow:0 0 0 3px color-mix(in srgb, var(--cobalt) 14%, transparent); }
.goal-links { display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }
.goal-panel { margin-top:10px; padding:12px; background:var(--paper); border-radius:8px; }
.goal-panel > input, .goal-panel > textarea { margin-bottom:8px; }
.hist { padding:4px 0; }
.danger-link { color:var(--rust) !important; }
.danger-zone { border-color:#EBC3B9; } .danger-zone h3 { color:var(--rust); }

.reward-label { margin-top:8px; font-size:13px; font-weight:600; color:var(--ink-2, inherit); } .reward { margin:2px 0 0; }

.filters input[type=search], .filters .row > * { min-width:0; } .filters .row { gap:8px; }
.tag-plain { background:transparent; border:1px solid var(--line); color:var(--muted, inherit); }
.need { padding:8px 0; border-top:1px solid var(--line-2); } .need:first-of-type { border-top:0; } .need p { margin:2px 0 0; }
.need-edit { padding:8px 0; border-top:1px solid var(--line-2); display:grid; gap:6px; } 

/* Стрічка */
.composer textarea { min-height:84px; } .composer .row { margin-top:8px; align-items:center; } .composer select { flex:1; min-width:0; }
.post { padding-bottom:12px; } .post-head { display:flex; gap:10px; align-items:flex-start; } .post-event { color:var(--cobalt-d, inherit); font-weight:600; margin-top:2px; }
.post-body { font-size:17px; margin:10px 0; }
.embed { margin:10px 0; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); } .embed .link { font-size:17px; font-weight:700; } .embed p { margin:6px 0; }
.embed.original { background:transparent; }
.reactions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
button.react { display:inline-flex; align-items:center; gap:6px; background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:5px 12px; font-weight:600; }
button.react:hover { background:#FDF1EE; color:var(--rust); border-color:#EBC3B9; }
button.react.on { background:#FDEDE9; border-color:#EBC3B9; color:var(--rust); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
button.tag-link { border:1px solid var(--line); background:transparent; color:var(--cobalt-d); cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; padding:2px 9px; }
button.tag-link:hover { background:#EAEDFB; border-color:#C3CAF5; }
.post-actions { display:flex; gap:18px; margin-top:10px; padding-top:8px; border-top:1px solid var(--line-2); }
.post-panel { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); display:grid; gap:8px; }
.comment { display:flex; gap:10px; align-items:flex-start; padding:6px 0; }
.danger-link { color:#B3361F; } .card.empty { text-align:center; }

.apply { margin-top:8px; display:grid; gap:8px; justify-items:start; } .apply textarea { width:100%; } .application .row { gap:8px; }

.candidate .matched { margin:8px 0; display:grid; gap:2px; } .warn { color:#7A5600; background:#FBF0D3; padding:8px 12px; border-radius:10px; }

/* ---- календар ---- */
.cal-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:14px; }
.cal-head button { padding:8px 14px; }
.cal-nav { display:flex; gap:6px; } .cal-nav button { min-width:40px; }
.cal-head .cal-title { flex:1 1 200px; margin:0; font-size:20px; order:0; }
.seg { display:inline-flex; border:1px solid #C3CAF5; border-radius:8px; overflow:hidden; }
.seg button { white-space:nowrap; border:0; border-radius:0; background:#fff; color:var(--cobalt); padding:8px 14px; } .seg button + button { border-left:1px solid #C3CAF5; }
.seg button:hover { background:#F1F3FE; } .seg button.on, .seg button.on:hover { background:var(--cobalt); color:#fff; }
.cal-extra { display:flex; gap:8px; margin-left:auto; }
@media (max-width:760px) {
  .cal-head { gap:10px 8px; } .cal-head .cal-title { flex:1 0 100%; order:-1; font-size:19px; }
  .seg { flex:1 1 auto; } .seg button { flex:1 1 0; padding:8px 6px; } .cal-extra { margin-left:0; }
}
.cal-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 10px; background:var(--cobalt); }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.cal-dow { padding:6px 8px; font-size:12.5px; font-weight:650; color:var(--muted); border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--line-2); }
.cal-cell { min-height:92px; padding:4px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; min-width:0; overflow:hidden; }
.cal-cell:hover { background:#F7F9FC; } .cal-cell.out { background:#F4F6F9; color:var(--muted); } .cal-cell.sel { outline:2px solid var(--cobalt); outline-offset:-2px; }
.cal-num { font-size:13px; font-weight:650; margin:0 0 2px 2px; } .cal-cell.today .cal-num { display:inline-block; background:var(--cobalt); color:#fff; border-radius:99px; padding:0 7px; }
.cal-chip { display:block; width:100%; text-align:left; font-size:12.5px; line-height:1.3; padding:2px 5px; margin:0 0 2px; border:0; border-left:3px solid var(--cobalt); border-radius:3px; background:#EAEDFB; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.cal-chip.static { cursor:default; } .cal-chip.busy { background:repeating-linear-gradient(135deg,#EEF1F5,#EEF1F5 5px,#E3E7EE 5px,#E3E7EE 10px); color:var(--muted); }
.cal-chip.declined { text-decoration:line-through; opacity:.6; } .cal-t { color:var(--muted); }
.cal-more { font-size:12px; color:var(--muted); padding-left:4px; }
.tg { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.tg-head, .tg-allday, .tg-body { display:grid; }
.tg-head { background:var(--line-2); border-bottom:1px solid var(--line); }
.tg-dayhead { padding:8px 4px; text-align:center; font-weight:650; border-left:1px solid var(--line); } .tg-dayhead.today { color:var(--cobalt); }
.tg-allday { border-bottom:1px solid var(--line); } .tg-gutter { font-size:11px; padding:4px; } .tg-adcell { border-left:1px solid var(--line); padding:2px; min-height:24px; min-width:0; }
.tg-scroll { max-height:560px; overflow-y:auto; } .tg-body { position:relative; }
.tg-gutter-col { position:relative; } .tg-hour { position:absolute; right:6px; transform:translateY(-50%); font-size:11px; color:var(--muted); }
.tg-col { position:relative; border-left:1px solid var(--line); background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 43px, var(--line-2) 43px, var(--line-2) 44px); cursor:pointer; min-width:0; }
.tg-col.today { background-color:#F7F9FF; }
.tg-now { position:absolute; left:0; right:0; height:2px; background:var(--rust); pointer-events:none; z-index:2; }
.cal-ev { position:absolute; text-align:left; font-size:12.5px; line-height:1.25; padding:2px 5px; border:0; border-left:3px solid var(--cobalt); border-radius:4px; background:#DDE3FB; color:var(--text); overflow:hidden; cursor:pointer; z-index:1; }
.cal-ev.static { cursor:default; } .cal-ev.busy { background:repeating-linear-gradient(135deg,#EEF1F5,#EEF1F5 5px,#E3E7EE 5px,#E3E7EE 10px); color:var(--muted); } .cal-ev.declined { text-decoration:line-through; opacity:.6; }
.cal-when { flex:0 0 96px; }
@media (max-width:760px) { .cal-cell { min-height:64px; } .cal-chip .cal-t { display:none; } }

.att-chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 8px; }
.att-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 10px; border-radius:99px; background:#EAEDFB; color:var(--cobalt-d); font-size:14px; font-weight:600; }
.att-x { background:none; border:0; padding:0 4px; color:var(--cobalt-d); cursor:pointer; font-size:13px; line-height:1; }
.att-results { margin-top:6px; border:1px solid var(--line); border-radius:8px; max-height:280px; overflow-y:auto; }
.att-results:empty { display:none; } .att-results > .muted { padding:8px 12px; }
.att-option { display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px; background:none; border:0; border-bottom:1px solid var(--line-2); text-align:left; color:var(--text); font-size:15px; cursor:pointer; border-radius:0; }
.att-option:hover { background:#F4F6FB; } .att-option:last-child { border-bottom:0; }

.slot > div { flex:1 1 200px; } .slot-tag { font-weight:650; color:var(--cobalt-d); }
.cal-ev.task, .cal-chip.task { background:#E3F3EE; }

@media (pointer:coarse) { input, select, textarea { font-size:16px; } }

/* ---- завантаженість ---- */
.wl-head { justify-content:space-between; margin-bottom:6px; } .wl-head > * { flex:0 0 auto; } .wl-head h3 { margin:0; }
.wl-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .wl-pct { font-size:26px; letter-spacing:-.02em; }
.wl-bar { height:10px; } .wl-bar i.wl-free { background:var(--mint); } .wl-bar i.wl-moderate { background:var(--cobalt); } .wl-bar i.wl-busy { background:var(--signal); } .wl-bar i.wl-overloaded { background:var(--rust); }
.tag.wl-free { background:#E3F3EE; color:#0B6A57; } .tag.wl-moderate { background:#EAEDFB; color:var(--cobalt-d); }
.tag.wl-busy { background:#FBF0D3; color:#7A5600; } .tag.wl-overloaded { background:#FDEDE9; color:#9C2F18; } .tag.wl-vacation { background:#EEF0F4; color:#47506A; }
.chips .tag.wl, .wl-top .tag { margin-left:0; }

.form-type { margin-bottom:12px; } .form-type button { flex:1 1 0; }

.tsel { display:inline-flex; align-items:center; gap:4px; } .tsel select { width:auto; padding-right:6px; }
.dt { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .dt > input { flex:1 1 150px; min-width:0; width:auto; }