:root { color-scheme: dark; --bg:#071e1e; --panel:#0c2727; --line:#334947; --text:#f4e6d3; --muted:#acb6ad; --accent:#ffe6c9; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; color:var(--text); background:transparent; border:1px solid var(--line); padding:9px 15px; border-radius:7px; }
button:hover { background:#193735; border-color:var(--muted); }
button:disabled { opacity:.5; cursor:wait; }
button.primary { background:var(--accent); color:#152727; border-color:var(--accent); font-weight:650; }
button.danger { color:#ffb1a7; margin-left:auto; }
input,textarea,select { color:var(--text); background:#071a1a; border:1px solid var(--line); padding:10px 12px; border-radius:6px; width:100%; }
input:focus,select:focus,textarea:focus,button:focus-visible { outline:2px solid #d3bfa4; outline-offset:3px; }
label { display:grid; gap:7px; color:var(--muted); font-size:13px; }
h1,h2,p { margin:0; }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:25px 28px; border-bottom:1px solid var(--line); }
header h1 { display:inline; font-size:23px; font-weight:600; }
#workspace { height:100dvh; display:flex; flex-direction:column; }
header,.toolbar { flex-shrink:0; }
.brand { color:var(--muted); font-size:18px; margin-right:20px; }
.actions { display:flex; gap:10px; }
.toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; padding:20px 28px; }
.toolbar label { min-width:150px; }
.meeting-date-filter { flex:0 1 220px; }
.toolbar .period-toggle { display:flex; flex:none; min-width:0; align-items:center; gap:8px; min-height:44px; }
.period-toggle input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.people-filter-row,.date-shortcut-row { flex-basis:100%; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; }
.people-filters,.date-shortcuts { display:flex; flex:1; min-width:0; flex-wrap:wrap; gap:4px; }
.people-filters button,.date-shortcuts button { border-color:transparent; padding:6px 10px; color:var(--muted); }
.people-filters button[aria-pressed="true"],.date-shortcuts button[aria-pressed="true"] { color:var(--accent); background:#193735; border-color:var(--line); font-weight:650; }
.filter-hint { flex-basis:100%; color:var(--muted); font-size:12px; }
#filters-error { flex-basis:100%; }
#total { color:var(--muted); font-size:14px; padding-bottom:9px; white-space:nowrap; }
.board { display:grid; flex:1; min-height:0; grid-auto-flow:column; grid-auto-columns:minmax(275px,1fr); gap:16px; overflow:auto; padding:0 28px 20px; align-items:stretch; }
.column { background:var(--panel); border:1px solid var(--line); border-radius:10px; min-height:0; padding:15px; display:flex; flex-direction:column; }
.column.over { outline:2px solid var(--accent); }
.column h2 { font-size:13px; font-weight:650; text-transform:uppercase; letter-spacing:.045em; display:flex; flex-shrink:0; justify-content:space-between; align-items:flex-start; gap:10px; min-height:42px; }
.count { color:var(--muted); font-size:14px; }
.cards { display:flex; flex:1; min-height:0; overflow-y:auto; flex-direction:column; gap:11px; }
.card { flex-shrink:0; padding:14px; width:100%; background:#102d2c; text-align:left; line-height:1.45; font-size:14px; border-color:#40504a; overflow-wrap:anywhere; }
.card:hover { background:#1b3936; }
.card.dragging { opacity:.45; }
.card small { display:block; color:var(--muted); font-size:11px; margin-top:13px; }
.card .meeting-date { color:var(--accent); font-size:12px; }
.card .meeting-extra { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.empty { padding:34px 5px; color:var(--muted); text-align:center; font-size:13px; }
.login { min-height:90vh; display:grid; place-items:center; padding:25px; }
.login form { width:min(390px,100%); display:grid; gap:23px; }
.login h1 { font-size:27px; margin-bottom:4px; }
#login-error,.error { color:#ffb3a5; font-size:14px; }
#error { margin:0 28px 20px; }
dialog { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:12px; width:min(840px,94vw); max-height:92vh; padding:25px; }
dialog::backdrop { background:#0009; }
dialog form { display:grid; gap:20px; }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; }
.dialog-heading h2 { font-size:19px; }
.body-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; font-size:14px; max-height:48vh; overflow:auto; padding:15px; background:var(--bg); border-radius:6px; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:10px; }
.account-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:12px 0; border-bottom:1px solid var(--line); }
.account-row small { display:block; color:var(--muted); }
@media(max-width:640px) {
  header { padding:18px 16px; align-items:flex-start; flex-wrap:wrap; gap:12px; }
  header h1 { display:block; font-size:21px; }
  .brand { display:block; font-size:13px; margin-bottom:3px; }
  .actions { gap:6px; }
  .actions button { font-size:12px; padding:8px 10px; }
  .toolbar { padding:14px 16px; gap:10px; }
  .toolbar label { flex:1 1 calc(50% - 10px); min-width:0; }
  .people-filter-row > span,.date-shortcut-row > span { display:none; }
  .people-filters,.date-shortcuts { gap:2px; }
  .people-filters button,.date-shortcuts button { font-size:12px; padding:6px 8px; }
  .toolbar input { min-width:0; }
  #total { margin-left:auto; }
  .board { padding:0 16px 24px; grid-auto-columns:85vw; scroll-snap-type:x proximity; }
  .column { scroll-snap-align:start; }
  dialog { width:100%; max-width:100%; max-height:94dvh; padding:18px; margin:auto 0 0; border-radius:14px 14px 0 0; }
  .dialog-actions button { flex:1 1 45%; font-size:13px; padding:10px; }
}