/* KIss Cockpit – Farben und Schriften aus dem KIss-Karussell-System (Night = Standard, Paper = hell). */
:root {
  --ground:#020E1F; --panel:#0B1B36; --panel-2:#112548; --raise:#183462;
  --ink:#FFFFFF; --muted:#A7B6CC; --line:#FFFFFF1C; --line-strong:#FFFFFF38;
  --blue:#0175F9; --cyan:#00D1E2; --glow:#74F9F8; --on-blue:#FFFFFF; --on-cyan:#021A24;
  --ok:#3DDC97; --warn:#FFB547; --alert:#FF5A6A; --shade:#00000080;
  --f-display:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --f-text:Inter,"Helvetica Neue",Arial,sans-serif;
  --r-chip:8px; --r-card:16px; --r-pill:999px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:#F2F5FA; --panel:#FFFFFF; --panel-2:#EEF3FA; --raise:#E1E9F5;
    --ink:#0A1426; --muted:#4A5870; --line:#0A14261C; --line-strong:#0A142638;
    --blue:#0068D9; --cyan:#00838F; --glow:#0D60B5; --on-blue:#FFFFFF; --on-cyan:#FFFFFF;
    --ok:#1E8E5A; --warn:#A86200; --alert:#D62839; --shade:#0A142659;
    color-scheme:light;
  }
}
:root[data-theme="light"] {
  --ground:#F2F5FA; --panel:#FFFFFF; --panel-2:#EEF3FA; --raise:#E1E9F5;
  --ink:#0A1426; --muted:#4A5870; --line:#0A14261C; --line-strong:#0A142638;
  --blue:#0068D9; --cyan:#00838F; --glow:#0D60B5; --on-blue:#FFFFFF; --on-cyan:#FFFFFF;
  --ok:#1E8E5A; --warn:#A86200; --alert:#D62839; --shade:#0A142659;
  color-scheme:light;
}

* { box-sizing:border-box }
html, body { height:100% }
body { margin:0; background:var(--ground); color:var(--ink); font:400 14px/1.5 var(--f-text); -webkit-font-smoothing:antialiased }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--ground) }
button, input, select, textarea { font:inherit; color:inherit }
button { cursor:pointer }
:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px }
h1, h2, h3 { font-family:var(--f-display); margin:0; text-wrap:balance; letter-spacing:-0.01em }
.num { font-variant-numeric:tabular-nums }
[hidden] { display:none !important }
.boot { display:grid; place-items:center; height:100vh; color:var(--muted) }

/* ---------- Login ---------- */
.login { min-height:100%; display:grid; place-items:center; padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px)) }
.login-card { width:min(400px,100%); background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:18px }
.login-card .brand { padding:0 }
.login-card p { margin:0; color:var(--muted) }
.err { color:var(--alert); font-size:13px; min-height:1.2em }

/* ---------- Shell ---------- */
.app { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100% }
.side { position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column; gap:6px; padding:20px 14px; border-right:1px solid var(--line); background:var(--panel) }
.brand { display:flex; flex-direction:column; gap:2px; padding:4px 10px 18px }
.brand .logo { display:block; width:150px; height:auto }
.login-card .brand .logo { width:190px }
.logo-light { display:none !important }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-dark { display:none !important }
  :root:not([data-theme="dark"]) .logo-light { display:block !important }
}
:root[data-theme="light"] .logo-dark { display:none !important }
:root[data-theme="light"] .logo-light { display:block !important }
.brand small { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.nav { display:flex; flex-direction:column; gap:2px }
.nav a { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; color:var(--muted); text-decoration:none; font-weight:500 }
.nav a svg { width:18px; height:18px; flex:none }
.nav a:hover { background:var(--panel-2); color:var(--ink) }
.nav a[aria-current="page"] { background:var(--panel-2); color:var(--ink); box-shadow:inset 3px 0 0 var(--cyan) }
.nav a .count { margin-left:auto; font-size:12px; font-variant-numeric:tabular-nums; color:var(--muted) }
.side-foot { margin-top:auto; padding:12px 10px 0; border-top:1px solid var(--line); font-size:12px; color:var(--muted) }

.main { min-width:0; display:flex; flex-direction:column }
.top { position:sticky; top:env(safe-area-inset-top,0px); z-index:5; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-block:12px; padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px));
  background:var(--ground); border-bottom:1px solid var(--line) }
.top .mobile-brand { display:none }
.top .mobile-brand img { display:block; height:34px; width:auto }
.search { flex:1 1 220px; min-width:0; display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:7px 12px }
.search svg { width:16px; height:16px; color:var(--muted); flex:none }
.search input { border:0; background:transparent; outline:none; width:100%; min-width:0 }
.presence { display:flex; align-items:center; gap:10px }
.presence .where { font-size:12px; color:var(--muted); line-height:1.3 }
.presence .where b { color:var(--ink); font-weight:600 }
.presence .av.off { opacity:.4 }
.live { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:5px 12px 5px 10px; font-size:12px; font-weight:600 }
.live i { width:8px; height:8px; border-radius:50%; background:var(--warn) }
.live.on i { background:var(--ok); animation:ping 2s infinite }
@keyframes ping { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent) } 70% { box-shadow:0 0 0 7px transparent } 100% { box-shadow:0 0 0 0 transparent } }
.icon-btn { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--panel); flex:none }
.icon-btn svg { width:17px; height:17px }
.me-btn { border:0; background:transparent; padding:0; border-radius:50% }
.popover { position:absolute; right:max(24px,env(safe-area-inset-right,0px)); top:calc(100% - 4px); background:var(--panel); border:1px solid var(--line-strong); border-radius:14px; padding:8px; min-width:220px; box-shadow:0 14px 40px var(--shade); display:flex; flex-direction:column }
.popover .who { padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px }
.popover .who small { display:block; color:var(--muted) }
.popover button { text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:8px }
.popover button:hover { background:var(--panel-2) }

.view { padding-block:24px 48px; padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px)); display:flex; flex-direction:column; gap:20px; min-width:0 }
.view-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap }
.view-head h1 { font-size:26px; font-weight:800 }
.view-head p { margin:4px 0 0; color:var(--muted) }
.view-head .actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.eyebrow { font-family:var(--f-display); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan) }
.note { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--muted); border:1px dashed var(--line-strong); border-radius:10px; padding:9px 12px }
.note b { color:var(--ink); font-weight:600 }

.btn { display:inline-flex; align-items:center; gap:8px; border-radius:10px; border:1px solid var(--line-strong); background:var(--panel); padding:8px 14px; font-weight:600; font-size:13px; white-space:nowrap }
.btn:hover { background:var(--panel-2) }
.btn.primary { background:var(--blue); color:var(--on-blue); border-color:transparent }
.btn.primary:hover { filter:brightness(1.08) }
.btn.danger { color:var(--alert); border-color:color-mix(in srgb,var(--alert) 50%,transparent) }
.btn.danger.armed { background:var(--alert); color:#fff; border-color:transparent }
.btn:disabled { opacity:.6; cursor:default }
.btn svg { width:16px; height:16px }
.seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden }
.seg button { border:0; background:transparent; padding:6px 12px; font-size:12px; font-weight:600; color:var(--muted) }
.seg button[aria-pressed="true"] { background:var(--panel-2); color:var(--ink) }

/* ---------- Bausteine ---------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:18px; min-width:0 }
.card h2 { font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:8px }
.card h2 a, .card h2 .aside { font-family:var(--f-text); font-size:12px; font-weight:500; color:var(--muted); text-decoration:none }
.card h2 a:hover { color:var(--cyan) }
.sub { font-size:12px; color:var(--muted) }
.av { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; font-size:10px; font-weight:700; letter-spacing:.02em; flex:none }
.av.blue { background:var(--blue); color:var(--on-blue) }
.av.cyan { background:var(--cyan); color:var(--on-cyan) }
.av.none { background:var(--panel-2); color:var(--muted); border:1px dashed var(--line-strong) }
.chip { display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-chip); padding:2px 8px; font-size:11.5px; font-weight:600; white-space:nowrap; background:var(--panel-2); color:var(--muted) }
.chip.alert { background:color-mix(in srgb,var(--alert) 16%,transparent); color:var(--alert) }
.chip.warn { background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn) }
.chip.ok { background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok) }
.chip.cyan { background:color-mix(in srgb,var(--cyan) 14%,transparent); color:var(--cyan) }
.chip.blue { background:color-mix(in srgb,var(--blue) 18%,transparent); color:var(--ink) }
.dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none }
.empty { color:var(--muted); font-size:13px; padding:10px 0 }

/* Übersicht */
.ov-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; align-items:start }
.span-4 { grid-column:span 4 } .span-5 { grid-column:span 5 } .span-6 { grid-column:span 6 } .span-7 { grid-column:span 7 } .span-12 { grid-column:span 12 }
.list { display:flex; flex-direction:column; margin-top:10px }
.row { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); min-width:0 }
.row:first-child { border-top:0 }
.row .grow { flex:1; min-width:0 }
.row .t { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.row .s { font-size:12px; color:var(--muted) }
.row.link { cursor:pointer; border-radius:8px }
.row.link:hover .t { color:var(--cyan) }
.check { width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-strong); background:transparent; flex:none; display:grid; place-items:center; padding:0 }
.check:hover { border-color:var(--ok) }
.check svg { width:12px; height:12px; opacity:0 }
.check:hover svg { opacity:.6 }
.metric-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px }
.metric .v { font-family:var(--f-display); font-weight:800; font-size:24px; line-height:1.1; font-variant-numeric:tabular-nums }
.metric .l { font-size:12px; color:var(--muted) }
.d { font-size:12px; font-weight:600 }
.up { color:var(--ok) } .down { color:var(--alert) }
.spark { display:block; width:100%; height:46px; margin-top:10px }
.pipe-bar { display:flex; height:10px; border-radius:var(--r-pill); overflow:hidden; margin:14px 0 10px; gap:2px; background:var(--panel-2) }
.pipe-bar span { display:block; height:100% }
.legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 14px; font-size:12.5px }
.legend div { display:flex; align-items:center; gap:7px; color:var(--muted) }
.legend b { margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums }
.big-line { display:flex; align-items:baseline; gap:8px; margin-top:6px; flex-wrap:wrap }
.big-line .v { font-family:var(--f-display); font-weight:800; font-size:28px; font-variant-numeric:tabular-nums }
.feed .row { align-items:flex-start }
.feed .t { white-space:normal }
.feed .row.new { animation:fresh 2.4s ease-out }
@keyframes fresh { from { background:color-mix(in srgb,var(--cyan) 14%,transparent) } to { background:transparent } }
.pending { display:flex; flex-direction:column; gap:6px; margin-top:12px; padding:12px; border-radius:12px; background:var(--panel-2); font-size:12.5px; color:var(--muted) }
.pending b { color:var(--ink) }

/* Boards */
.board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:14px; overflow-x:auto; padding-bottom:6px }
.col { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); display:flex; flex-direction:column; min-width:0; min-height:220px }
.col-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line) }
.col-head h3 { font-size:13px; font-weight:700 }
.col-head .n { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums }
.col-head .add { margin-left:auto; border:0; background:transparent; color:var(--muted); width:26px; height:26px; border-radius:8px; display:grid; place-items:center; padding:0 }
.col-head .add:hover { background:var(--panel-2); color:var(--ink) }
.col-head .add svg { width:16px; height:16px }
.col-head .sum { margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums }
.drop { flex:1; display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:0 0 var(--r-card) var(--r-card); transition:background .15s }
.drop.over { background:color-mix(in srgb,var(--cyan) 8%,transparent) }
.drop .more { font-size:12px; color:var(--muted); text-align:center; padding:6px; border:0; background:transparent }
.tcard { background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:11px 12px; display:flex; flex-direction:column; gap:8px; cursor:grab; text-align:left; width:100% }
.tcard:hover { border-color:var(--line-strong) }
.tcard.dragging { opacity:.4 }
.tcard .tt { font-weight:600; line-height:1.35; overflow-wrap:anywhere }
.tcard .meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--muted) }
.tcard .meta .av { margin-left:auto; width:22px; height:22px; font-size:9px }
.tcard.done .tt { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line-strong) }
.flash { animation:flash 2.6s ease-out }
@keyframes flash { 0% { box-shadow:0 0 0 2px var(--cyan),0 0 24px color-mix(in srgb,var(--cyan) 40%,transparent) } 100% { box-shadow:0 0 0 2px transparent } }

/* Kunden */
.clients { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px }
.ccard { text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:16px; display:flex; flex-direction:column; gap:10px }
.ccard:hover { border-color:var(--line-strong) }
.ccard .name { font-family:var(--f-display); font-weight:700; font-size:15px; overflow-wrap:anywhere }
.ccard .br { font-size:12px; color:var(--muted) }
.ccard .chips { display:flex; flex-wrap:wrap; gap:5px }
.ccard .foot { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px; margin-top:auto }
.ccard .foot b { color:var(--ink); font-weight:600 }

/* Ansprechpartner */
.contacts { display:flex; flex-direction:column; gap:16px }
.kt-card { padding:0; overflow:hidden }
.kt-h { display:flex; align-items:baseline; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line) }
.kt { width:100%; border-collapse:collapse; font-size:13px }
.kt th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line); background:var(--panel-2) }
.kt td { padding:8px 12px; vertical-align:top; overflow-wrap:anywhere; border:0 }
.kt th.no, .kt td.no { width:84px; white-space:nowrap; padding-left:18px; color:var(--muted); font-variant-numeric:tabular-nums }
.kt tbody { border-top:1px solid var(--line) }
.kt tbody:first-of-type { border-top:0 }
.kt tr.firm td { padding-top:12px; background:color-mix(in srgb, var(--panel-2) 55%, transparent) }
.kt tr.firm td.nm b { font-size:14px; font-weight:650 }
.kt tr.firm .chip { margin-left:8px; vertical-align:1px }
.kt tr.person td.nm { padding-left:30px; position:relative }
.kt tr.person td.nm::before { content:""; position:absolute; left:16px; top:0; bottom:50%; width:8px; border-left:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); border-bottom-left-radius:4px }
.kt tr.person td.nm b { font-weight:500 }
.kt tr[data-open] { cursor:pointer }
.kt tr[data-open]:hover td { background:var(--panel-2) }
.kt td.tel span { display:block; font-variant-numeric:tabular-nums }
.kt td.tel small { color:var(--muted); font-size:11px }
.kt .none { color:var(--muted) }
.kt tr.empty-row td { padding-top:4px; padding-bottom:10px; font-size:12px }
.clink { color:var(--ink); text-decoration:none; border-bottom:1px dotted var(--line-strong) }
.clink:hover { color:var(--cyan); border-bottom-color:var(--cyan) }

/* Content-Plan */
.week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px }
.day { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:180px; min-width:0 }
.day.today { border-color:var(--cyan) }
.day-h { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted); gap:6px }
.day-h b { font-family:var(--f-display); font-size:14px; color:var(--ink) }
.day.today .day-h b { color:var(--cyan) }
.day-h .add { border:0; background:transparent; color:var(--muted); width:24px; height:24px; border-radius:7px; display:grid; place-items:center; padding:0; margin-left:auto }
.day-h .add:hover { background:var(--panel-2); color:var(--ink) }
.day-h .add svg { width:15px; height:15px }
.post { text-align:left; border:1px solid var(--line); background:var(--panel-2); border-radius:10px; padding:8px 9px; display:flex; flex-direction:column; gap:5px; font-size:12.5px; width:100% }
.post:hover { border-color:var(--line-strong) }
.post .pt { font-weight:600; line-height:1.3; overflow-wrap:anywhere }
.post .pm { display:flex; gap:5px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:11.5px }
.ch { font-size:10px; font-weight:700; letter-spacing:.06em; border-radius:5px; padding:1px 5px; border:1px solid var(--line-strong); color:var(--ink) }
.undated { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:10px }

/* Kampagnen */
.k-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.k-head h2 { font-size:18px; font-weight:800 }
.tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.tile { background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:14px }
.tile .l { font-size:12px; color:var(--muted) }
.tile .v { font-family:var(--f-display); font-weight:800; font-size:24px; line-height:1.2; font-variant-numeric:tabular-nums; margin-top:2px }
.chart { position:relative; margin-top:12px }
.chart svg { display:block; width:100%; height:auto; overflow:visible }
.chart .tip { position:absolute; pointer-events:none; background:var(--raise); border:1px solid var(--line-strong); border-radius:8px; padding:5px 9px; font-size:12px; white-space:nowrap; transform:translate(-50%,-110%); font-variant-numeric:tabular-nums }
.chart .tip b { font-family:var(--f-display) }
.src { font-size:12px; color:var(--muted) }
.table-wrap { overflow-x:auto; margin-top:8px }
table { border-collapse:collapse; width:100%; min-width:480px; font-size:13px }
th { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; text-align:left; padding:8px 10px; border-bottom:1px solid var(--line) }
td { padding:10px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums }
td.r, th.r { text-align:right }
tr:last-child td { border-bottom:0 }
.k-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px }
.k-grid.even { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }

/* Dialoge */
.overlay { position:fixed; inset:0; z-index:30; background:var(--shade); display:grid; place-items:center; padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px)) }
.sheet { width:min(560px,100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--panel); border:1px solid var(--line-strong); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:16px }
.sheet.wide { width:min(720px,100%) }
.sheet-h { display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.sheet-h h2 { font-size:19px; font-weight:800; overflow-wrap:anywhere }
.sheet .banner { font-size:12.5px; border-radius:10px; padding:8px 12px; background:color-mix(in srgb,var(--cyan) 14%,transparent); color:var(--ink) }
.moves { display:flex; flex-wrap:wrap; gap:6px }
.moves button { border:1px solid var(--line-strong); background:transparent; border-radius:var(--r-pill); padding:5px 12px; font-size:12px; font-weight:600 }
.moves button[aria-pressed="true"] { background:var(--blue); color:var(--on-blue); border-color:transparent }
form.f { display:grid; gap:12px }
form.f label { display:grid; gap:5px; font-size:12px; color:var(--muted); font-weight:600 }
form.f input, form.f select, form.f textarea { background:var(--panel-2); border:1px solid var(--line-strong); border-radius:10px; padding:9px 11px; font-size:14px; color:var(--ink); width:100%; font-weight:400 }
form.f label.chk { display:flex; align-items:center; gap:8px; font-weight:500; color:var(--ink) }
form.f label.chk input { width:auto }
form.f textarea { min-height:90px; resize:vertical; line-height:1.45 }
form.f .two { display:grid; grid-template-columns:1fr 1fr; gap:12px }
form.f .foot { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; align-items:center; margin-top:4px }
form.f .foot .right { display:flex; gap:8px; margin-left:auto }
.section-t { font-size:12px; color:var(--muted); font-weight:600; margin-top:4px }
.toasts { position:fixed; z-index:40; right:max(20px,env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none }
.toast { pointer-events:auto; display:flex; align-items:center; gap:10px; max-width:360px; background:var(--raise); border:1px solid var(--line-strong); border-radius:12px; padding:10px 14px; font-size:13px; box-shadow:0 10px 30px var(--shade); animation:tin .25s ease-out }
.toast.error { border-color:var(--alert) }
.toast svg { width:16px; height:16px; flex:none }
@keyframes tin { from { transform:translateY(8px); opacity:0 } }

.bottom-nav { display:none }

@media (max-width:1100px) {
  .span-4, .span-5, .span-7 { grid-column:span 6 }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .k-grid, .k-grid.even { grid-template-columns:1fr }
  .week { grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media (max-width:860px) {
  .app { grid-template-columns:minmax(0,1fr) }
  .side { display:none }
  .top { padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)) }
  .top .mobile-brand { display:block }
  .search { order:5; flex-basis:100% }
  .presence .where { display:none }
  .view { padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:18px calc(96px + env(safe-area-inset-bottom,0px)) }
  .ov-grid { grid-template-columns:minmax(0,1fr) }
  .span-4, .span-5, .span-6, .span-7, .span-12 { grid-column:auto }
  .board { grid-auto-columns:minmax(78vw,1fr); scroll-snap-type:x mandatory }
  .col { scroll-snap-align:start }
  .week { grid-template-columns:minmax(0,1fr) }
  .day { min-height:0 }
  .kt thead { display:none }
  .kt, .kt tbody, .kt tr, .kt td { display:block; width:auto }
  .kt td { padding:2px 16px }
  .kt td.no { display:none }
  .kt tr { padding:8px 0 }
  .kt tr.firm td { background:none; padding-top:2px }
  .kt tr.firm td.nm { padding-bottom:4px }
  .kt tr.person td.nm { padding-left:30px }
  .kt td[data-l] { display:flex; gap:8px; padding-left:30px }
  .kt tr.firm td[data-l] { padding-left:16px }
  .kt td[data-l]::before { content:attr(data-l); color:var(--muted); font-size:12px; min-width:62px }
  .kt td[data-l]:has(> .none:only-child) { display:none }
  .kt td.tel span { display:inline }
  .kt td.tel span + span::before { content:" · " }
  .popover { right:max(16px,env(safe-area-inset-right,0px)) }
  .bottom-nav { display:flex; position:fixed; z-index:20; left:0; right:0; bottom:0; background:var(--panel); border-top:1px solid var(--line);
    padding-top:6px; padding-bottom:calc(6px + env(safe-area-inset-bottom,0px)); padding-left:max(8px,env(safe-area-inset-left,0px)); padding-right:max(8px,env(safe-area-inset-right,0px)); justify-content:space-around }
  .bottom-nav a { display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10.5px; color:var(--muted); text-decoration:none; padding:4px 6px; border-radius:8px; min-width:0 }
  .bottom-nav a svg { width:20px; height:20px }
  .bottom-nav a[aria-current="page"] { color:var(--cyan) }
  .toasts { bottom:calc(84px + env(safe-area-inset-bottom,0px)); left:max(16px,env(safe-area-inset-left,0px)); right:max(16px,env(safe-area-inset-right,0px)); align-items:stretch }
  .toast { max-width:none }
}
@media (max-width:460px) {
  .tiles { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .tile .v { font-size:20px }
  form.f .two { grid-template-columns:1fr }
  .live span { display:none }
  .sheet { padding:18px }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important }
}