/* ============================================================
   PLAN — Retro-UI im 2000er PS1/N64-Stil
   Pixelfont, harte Kanten, Hard-Drop-Shadows, Dither-Hintergrund.
   Pixelperfect, aber funktional.
   ============================================================ */

@font-face {
  font-family: 'Silkscreen';
  src: url('../fonts/silkscreen-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('../fonts/silkscreen-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ============ Themes ============ */
:root {
  --hour-h: 52px;                       /* muss zu calendar.js passen */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --px: 'Silkscreen', 'Courier New', monospace;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', 'Courier New', monospace;
  /* Muster als echte Pixel-Kacheln statt 4px-Gradients: Software-Renderer
     (z. B. Firefox in VMs ohne GPU) rastern winzige conic-/repeating-
     Gradients falsch — der Bild-Kachelpfad rendert überall gleich.
     Helle Kacheln für dunkle Themes; helle Themes überschreiben. */
  --dither: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAF0lEQVR42mN49+oHFwgzwACGAE4JmAAAEokW0V2G88sAAAAASUVORK5CYII=");
  --hatch:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIklEQVR42mP4//+/BDJmQAf4JMFi+CThCkgxlQGvm2gjCQAJ1WKhiR2W1gAAAABJRU5ErkJggg==");
  --hourlines: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAYAAABLolKXAAAAEElEQVR42mNgGNng////KgAKHwMia3EviQAAAABJRU5ErkJggg==");
  --dither-dark: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFklEQVR42mNgYGDggWI4wBDAKQEWAAAMdABhuuwS9AAAAABJRU5ErkJggg==");
  --hatch-dark:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIElEQVR42mNgYGAQQsMYAJ+kEAMBSbgCUkzF7yYaSAIAJrcCQU9Th0QAAAAASUVORK5CYII=");
  --hourlines-dark: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAYAAABLolKXAAAADUlEQVR42mNgGPFAAgABHAAZ6Kt9qQAAAABJRU5ErkJggg==");
}
:root[data-theme="aurora"], :root[data-theme="mint"],
:root[data-theme="peach"], :root[data-theme="sky"] {
  --dither: var(--dither-dark);
  --hatch:  var(--hatch-dark);
  --hourlines: var(--hourlines-dark);
}

/* Standard: dunkel („Nacht") — auch vor dem Login */
:root, :root[data-theme="night"] {
  --bg: #16131f; --surface: #211d30; --surface-2: #2b2640;
  --text: #eeeaf8; --muted: #8d86a3;
  --accent: #9d85ff; --accent-soft: #362e55;
  --border: #3a3452;
  --line: #6a6191;            /* harte Outline der Cards */
  --shadow-c: #0a0810;        /* Hard-Drop-Shadow */
  --danger: #ff6369; --ok: #3dd68c;
  color-scheme: dark;
}
:root[data-theme="tinte"] {
  --bg: #0f1720; --surface: #182432; --surface-2: #203040;
  --text: #e6eef6; --muted: #7d92a6;
  --accent: #35b8a5; --accent-soft: #17403c;
  --border: #2a3a4a;
  --line: #4d6e8a; --shadow-c: #05090d;
  --danger: #ff6369; --ok: #3dd68c;
  color-scheme: dark;
}
:root[data-theme="aurora"] {
  --bg: #efecf8; --surface: #ffffff; --surface-2: #e4dff4;
  --text: #2a2438; --muted: #7d7695;
  --accent: #7c5cff; --accent-soft: #e6dfff;
  --border: #d5cfe8;
  --line: #43395f; --shadow-c: #b9b0d6;
  --danger: #e5484d; --ok: #30a46c;
  color-scheme: light;
}
:root[data-theme="mint"] {
  --bg: #e9f5ef; --surface: #ffffff; --surface-2: #dceee5;
  --text: #1d3229; --muted: #6e957f;
  --accent: #18a06a; --accent-soft: #d3efe2;
  --border: #c9e2d5;
  --line: #2b5642; --shadow-c: #b0d4c1;
  --danger: #e5484d; --ok: #30a46c;
  color-scheme: light;
}
:root[data-theme="peach"] {
  --bg: #faf0e7; --surface: #ffffff; --surface-2: #f5e4d5;
  --text: #3a2a20; --muted: #a58a75;
  --accent: #f2734b; --accent-soft: #fcded1;
  --border: #ecd8c6;
  --line: #5c4030; --shadow-c: #dcc2ab;
  --danger: #e5484d; --ok: #30a46c;
  color-scheme: light;
}
:root[data-theme="sky"] {
  --bg: #eaf2fa; --surface: #ffffff; --surface-2: #dcebf7;
  --text: #1c2b3a; --muted: #6e8ba5;
  --accent: #2f80d7; --accent-soft: #d6e8fa;
  --border: #cbdff0;
  --line: #2c4a68; --shadow-c: #b4cee4;
  --danger: #e5484d; --ok: #30a46c;
  color-scheme: light;
}

/* ============ Basics ============ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Dither-Checkerboard wie ein PS1-Menühintergrund */
body, .login-screen {
  background-color: var(--bg);
  background-image: var(--dither);
  background-size: 4px 4px;
}
body {
  font-family: var(--font);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
.hidden { display: none !important; }
h1, h2, h3 {
  margin: 0 0 .6em;
  font-family: var(--px);
  font-weight: 700;
  letter-spacing: 0;
}
h2 { font-size: 1.05rem; }
h3 { font-size: .8rem; color: var(--muted); text-transform: uppercase; }
a { color: var(--accent); text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ---- Buttons: chunky Gameboy/N64-Menü-Knöpfe ---- */
.btn {
  border: 2px solid var(--line);
  background: var(--surface);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--shadow-c);
  padding: 9px 14px;
  font-family: var(--px);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--shadow-c);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-danger { color: var(--danger); }
.btn-big { padding: 13px 16px; font-size: .9rem; }
.btn-ghost {
  border: none; background: transparent;
  box-shadow: none; padding: 6px 8px;
}
.btn-ghost:active { transform: scale(.9); }

/* ---- Inputs: klare Boxen mit harter Kante ---- */
input[type=text], input[type=password], input[type=time], input[type=date],
select, textarea {
  width: 100%;
  border: 2px solid var(--line);
  background: var(--surface);
  border-radius: 0;
  padding: 10px 12px;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent-soft);
}
label {
  display: block;
  font-family: var(--px);
  font-size: .68rem;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 12px;
}
label > input, label > select, label > textarea {
  margin-top: 6px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  color: var(--text);
}

.form-error { color: var(--danger); font-size: .9rem; }

/* ============ Login ============ */
.login-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 100;
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface);
  border: 3px solid var(--line);
  box-shadow: 6px 6px 0 var(--shadow-c);
  padding: 30px 26px;
  text-align: center;
}
.login-logo { font-size: 3rem; margin-bottom: 6px; }
.login-card h1 { font-size: 1.6rem; margin-bottom: 4px; }
.login-sub {
  font-family: var(--px); font-size: .68rem;
  color: var(--muted); margin: 0 0 22px;
}
.login-card label { text-align: left; }
.login-card .btn { width: 100%; margin-top: 6px; }

/* ============ App-Layout ============ */
.app { display: flex; flex-direction: column; height: 100dvh; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 2px solid var(--line);
  flex: none;
}
.topbar-title { font-family: var(--px); font-weight: 700; font-size: .95rem; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.user-chip {
  width: 34px; height: 34px;
  border: 2px solid var(--line);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--shadow-c);
  background: var(--accent); color: #fff;
  font-family: var(--px); font-weight: 700; font-size: .9rem;
  cursor: pointer;
}
.user-chip:active { transform: translate(2px, 2px); box-shadow: none; }
.sync-status { font-size: .8rem; color: var(--muted); cursor: default; }
.sync-status.ok { color: var(--ok); }
.sync-status.pending { color: #e8a33d; }
.sync-status.offline { color: var(--muted); }
.sync-status.error { color: var(--danger); }

.view { flex: 1; overflow: auto; min-height: 0; }

.bottombar {
  display: flex; flex: none;
  background: var(--surface);
  border-top: 2px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 8px 0 6px;
  color: var(--muted);
  font-family: var(--px); font-size: .58rem; font-weight: 700;
  border-top: 3px solid transparent;
}
.nav-item .nav-icon { font-size: 1.3rem; }
.nav-item.active {
  color: var(--accent);
  border-top-color: var(--accent);
  background: var(--accent-soft);
}

/* ============ Wochenansicht ============ */
.view-week { display: flex; flex-direction: column; overflow: hidden; }
.week-layout { display: flex; flex: 1; min-height: 0; position: relative; }
.week-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.week-head { flex: none; padding: 10px 12px 8px; }
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-nav .btn { padding: 7px 11px; }
.week-nav-label {
  flex: 1; text-align: center;
  font-family: var(--px); font-weight: 700; font-size: .8rem;
}
.week-nav-label small {
  display: block; color: var(--muted);
  font-weight: 400; font-size: .58rem;
}

.week-scroll { flex: 1; overflow: auto; min-height: 0; }
.week-grid {
  display: grid;
  grid-template-columns: 44px repeat(7, minmax(96px, 1fr));
  min-width: 740px;
  position: relative;
}
.day-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  text-align: center; padding: 4px 2px 8px;
  font-family: var(--px); font-size: .68rem; font-weight: 700;
  border-bottom: 2px solid var(--line);
}
.day-head small { display: block; color: var(--muted); font-weight: 400; font-size: .6rem; }
.day-head.today .day-num {
  display: inline-block;
  background: var(--accent); color: #fff;
  border: 1px solid var(--line);
  min-width: 22px; padding: 1px 5px;
}
.day-head:first-child { left: 0; z-index: 25; }
.time-col { position: sticky; left: 0; background: var(--bg); z-index: 15; }
.time-label {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-family: var(--px); font-size: .55rem; color: var(--muted);
}
.day-col {
  position: relative;
  border-left: 1px solid var(--border);
  /* Stundenlinien als PNG-Kachel (1×52px) — Gradients rastern in
     Software-Renderern falsch; Höhe muss zu --hour-h passen */
  background-image: var(--hourlines);
  background-size: 1px var(--hour-h);
}
.day-col.today { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }

/* Zeitbereiche: Hintergrund-Zonen — flächige Tönung + Schraffur-Kachel
   (flächige color-mix-Fills rendern überall korrekt, Gradients nicht) */
.zone-block {
  position: absolute; left: 0; right: 0;
  background-color: color-mix(in srgb, var(--z-color) 14%, transparent);
  background-image: var(--hatch);
  border-left: 3px solid color-mix(in srgb, var(--z-color) 60%, transparent);
  pointer-events: none;
  z-index: 0;
}
.zone-label {
  position: absolute; top: 2px; left: 3px;
  font-family: var(--px); font-size: .5rem; font-weight: 700;
  color: var(--z-color);
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--z-color) 60%, var(--line));
  padding: 1px 5px;
  pointer-events: auto; cursor: pointer;
  white-space: nowrap; max-width: calc(100% - 8px);
  overflow: hidden; text-overflow: ellipsis;
}

/* Termine: satte Blöcke mit dunkler Outline + Hard-Shadow */
.event-block {
  position: absolute; left: 2px; right: 4px;
  z-index: 1;
  background: var(--ev-color, var(--accent));
  color: #fff;
  border: 2px solid color-mix(in srgb, var(--ev-color, var(--accent)) 45%, black);
  box-shadow: 2px 2px 0 var(--shadow-c);
  padding: 2px 5px;
  font-size: .74rem; font-weight: 700;
  overflow: hidden;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);
  animation: pop .15s steps(3, end);
}
.event-block:active { transform: translate(2px, 2px); box-shadow: none; }
.event-block .ev-link {
  position: absolute; top: 1px; right: 1px;
  font-size: .78rem; line-height: 1;
  padding: 1px 3px;
  text-decoration: none;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .5));
}
.event-block .ev-link:hover { transform: scale(1.25); }
.event-block .ev-time {
  display: block; font-weight: 400; font-size: .62rem; opacity: .9;
  font-family: var(--px);
}
.event-block.tiny { padding: 0 5px; font-size: .66rem; }
@keyframes pop { from { transform: scale(.85); opacity: .3; } }

.now-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--danger); z-index: 5; pointer-events: none;
}
.now-line::before {
  content: ''; position: absolute; left: -4px; top: -3px;
  width: 8px; height: 8px; background: var(--danger);
}

/* ---- Ebenen-Panel (rechte Sidebar) ---- */
.layer-panel {
  width: 252px; flex: none;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 2px solid var(--line);
  min-height: 0;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  font-family: var(--px); font-size: .68rem; font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  background: var(--surface-2);
}
.panel-head-btns { display: flex; align-items: center; gap: 6px; }
.panel-bgtoggle {
  border: 2px solid var(--line); background: var(--surface);
  font-family: var(--px); font-weight: 700; font-size: .75rem;
  padding: 3px 9px; cursor: pointer; color: var(--muted);
}
.panel-bgtoggle.on {
  background: var(--accent); color: #fff;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .25);
}
.panel-close {
  display: none;
  border: 2px solid var(--line); background: var(--surface);
  font-family: var(--px); font-weight: 700; font-size: .75rem;
  padding: 3px 9px; cursor: pointer;
}
.panel-backdrop { display: none; }
.panel-tree { flex: 1; overflow: auto; padding: 6px 4px; }
.layer-row {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 6px;
  font-size: .85rem; font-weight: 600;
  border: 2px solid transparent;
}
.layer-row:hover { background: var(--surface-2); border-color: var(--border); }
.layer-row.off { opacity: .45; }
.lr-caret {
  border: none; background: none; cursor: pointer;
  width: 16px; padding: 0; color: var(--muted); font-size: .7rem;
}
.lr-eye { border: none; background: none; cursor: pointer; width: 26px; font-size: .85rem; padding: 0; }
.lr-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.lr-dot { width: 10px; height: 10px; flex: none; display: inline-block; border: 1px solid var(--line); }
.lr-shared { font-size: .68rem; }
.lr-menu {
  border: none; background: none; cursor: pointer;
  color: var(--muted); padding: 2px 7px; font-weight: 800;
}
.lr-menu:hover { background: var(--accent-soft); color: var(--accent); }
.layer-row.ev { font-weight: 500; }
.layer-row.ev .lr-name { font-size: .8rem; }
/* Haushaltsaufgaben in der Sidebar */
.chore-sect {
  font-family: var(--px); font-size: .6rem; font-weight: 700;
  color: var(--danger); text-transform: uppercase;
  padding: 6px 6px 3px;
}
.chore-check {
  border: none; background: none; cursor: pointer;
  width: 28px; flex: none; padding: 0;
  font-size: .95rem; color: var(--muted);
}
.chore-check:hover { color: var(--ok); transform: scale(1.15); }
.chore-mark {
  font-family: var(--px); font-size: .5rem; font-weight: 700;
  color: var(--muted); white-space: nowrap;
}
.chore-who {
  flex: none; width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: 1px solid var(--line);
  font-family: var(--px); font-size: .5rem; font-weight: 700;
}
.layer-row.chore-due {
  border: 2px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  margin: 2px 4px 2px 0;
}
.layer-row.chore-due .chore-mark { color: var(--danger); }
.layer-row.chore-overdue { animation: chore-wobble 1.8s steps(2, end) infinite; }
@keyframes chore-wobble {
  0%, 62%, 100% { transform: translateX(0) rotate(0); }
  68% { transform: translateX(-2px) rotate(-1.2deg); }
  74% { transform: translateX(2px) rotate(1.2deg); }
  80% { transform: translateX(-2px) rotate(-.8deg); }
  86% { transform: translateX(2px) rotate(.8deg); }
  92% { transform: translateX(0) rotate(0); }
}

.layer-row.prj-row { cursor: pointer; font-weight: 600; }
.layer-row.prj-row .lr-shared {
  font-family: var(--px); font-size: .5rem; color: var(--accent);
  border: 1px solid var(--accent); padding: 1px 4px;
}
.prj-headbtns { display: flex; gap: 2px; flex: none; }

/* Gruppen = Ordner-Balken: klar vom Rest abgesetzt, aber kompakt */
.layer-row.grp {
  background: var(--surface-2);
  border: 2px solid var(--line);
  box-shadow: 2px 2px 0 var(--shadow-c);
  margin-top: 3px; margin-bottom: 2px; margin-right: 4px;
  padding: 1px 4px;
}
.layer-row.grp .lr-eye,
.layer-row.grp .lr-menu { padding-top: 2px; padding-bottom: 2px; }
.layer-row.grp .lr-name {
  font-family: var(--px); font-size: .66rem; font-weight: 700;
}
.layer-row.grp:hover { background: var(--accent-soft); border-color: var(--line); }

/* Hintergrund-Zeilen: dezent schraffiert wie ihre Kalender-Darstellung */
.layer-row.bg {
  background-image: var(--hatch);
}
.panel-foot {
  border-top: 2px solid var(--line);
  padding: 8px 6px; display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--surface-2);
}
.panel-foot .btn {
  font-size: .6rem; padding: 6px 7px;
  border: none; box-shadow: none;
  color: var(--accent); background: transparent;
}
.panel-foot .btn:active { transform: scale(.92); }

/* Kontextmenü (⋮) */
.ctx-menu {
  position: fixed; z-index: 90;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow-c);
  overflow: hidden; min-width: 170px;
  display: flex; flex-direction: column;
}
.ctx-menu button {
  border: none; background: none; cursor: pointer;
  text-align: left; padding: 11px 14px;
  font-family: var(--px); font-size: .68rem; font-weight: 700;
}
.ctx-menu button:hover { background: var(--accent-soft); }
.ctx-menu button.danger { color: var(--danger); }

#panel-toggle { display: none; }
@media (max-width: 900px) {
  #panel-toggle { display: inline-block; }
  .panel-close { display: inline-block; }
  .panel-backdrop {
    display: block;
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--shadow-c) 45%, transparent);
    z-index: 39;
  }
  .panel-backdrop.hidden { display: none; }
  .layer-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(82vw, 300px);
    transform: translateX(103%);
    transition: transform .15s steps(4, end);
    z-index: 40;
    box-shadow: -4px 0 0 var(--shadow-c);
  }
  .layer-panel.open { transform: none; }
}

/* ============ Startseite (Module) ============ */
.home-greet { font-size: 1.2rem; margin-bottom: 2px; }
.home-sub {
  font-family: var(--px); font-size: .68rem;
  color: var(--muted); margin: 0 0 18px;
}
.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 560px) { .module-grid { grid-template-columns: repeat(3, 1fr); } }
.module-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 14px;
  background: color-mix(in srgb, var(--tile-color) 14%, var(--surface));
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow-c);
  color: var(--text);
}
.module-tile:active { transform: translate(4px, 4px); box-shadow: none; }
.module-emoji { font-size: 2.1rem; }
.module-name { font-family: var(--px); font-size: .72rem; font-weight: 700; }
.module-tile.soon { opacity: .68; }
.module-soon {
  position: absolute; top: 8px; right: 8px;
  background: var(--tile-color); color: #fff;
  border: 1px solid var(--line);
  font-family: var(--px); font-size: .5rem; font-weight: 700;
  padding: 2px 6px;
}
.placeholder-card { text-align: center; padding: 40px 16px; }
.placeholder-emoji { font-size: 3.4rem; margin-bottom: 8px; }

/* ============ Seiten (Detail/Profil/Space) ============ */
.page { padding: 16px; max-width: 640px; margin: 0 auto; }
.page-back {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--px); font-size: .68rem; font-weight: 700;
}
.card {
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow-c);
  padding: 16px;
  margin-bottom: 16px;
}
.detail-title { display: flex; align-items: center; gap: 10px; }
.detail-title h2 { margin: 0; flex: 1; }
.cat-dot { width: 14px; height: 14px; flex: none; border: 1px solid var(--line); }
.detail-meta { color: var(--muted); margin: 6px 0 0; }
.badge {
  display: inline-block;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent);
  font-family: var(--px); font-size: .58rem; font-weight: 700;
  padding: 2px 8px;
}
.row-btns { display: flex; gap: 12px; margin-top: 14px; }
.row-btns .btn { flex: 1; }

/* Farbschema-Popout (🎨 in der Kopfzeile) */
.theme-btn {
  width: 34px; height: 34px; padding: 0;
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: 2px 2px 0 var(--shadow-c);
  cursor: pointer; font-size: 1rem; line-height: 1;
}
.theme-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.theme-pop {
  position: fixed; z-index: 95;
  width: min(260px, 92vw);
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow-c);
  padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.theme-pop label { margin-bottom: 8px; }
.theme-pop .color-input { width: 100%; height: 42px; margin-top: 6px; }
.th-slider { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 1rem; }
.th-slider input[type=range] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 10px; border: 2px solid var(--line);
  background: var(--surface-2); /* Projektregel: keine CSS-Gradients — 🌙/☀️ zeigen die Richtung */
  outline: none; padding: 0;
}
.th-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 22px;
  background: var(--accent);
  border: 2px solid var(--line);
  box-shadow: 2px 2px 0 var(--shadow-c);
  cursor: pointer;
}
.th-slider input[type=range]::-moz-range-thumb {
  width: 16px; height: 20px; border-radius: 0;
  background: var(--accent);
  border: 2px solid var(--line);
  box-shadow: 2px 2px 0 var(--shadow-c);
  cursor: pointer;
}

.color-input { width: 46px; height: 38px; padding: 2px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }

.space-textarea { min-height: 50vh; resize: vertical; line-height: 1.5; }
.autosave-hint {
  font-family: var(--px); color: var(--muted); font-size: .58rem;
  text-align: right; margin-top: 6px; min-height: 1em;
}

/* ============ Zeitbereich-Editor ============ */
.seg-box {
  border: 2px solid var(--border);
  padding: 10px; margin-bottom: 10px;
  background: var(--surface-2);
}
.day-toggles { display: flex; gap: 4px; margin-bottom: 8px; }
.day-toggle {
  flex: 1; padding: 6px 0;
  border: 2px solid var(--line);
  background: var(--surface);
  font-family: var(--px); font-size: .58rem; font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}
.day-toggle.on { background: var(--accent); border-color: var(--line); color: #fff; }
.seg-times { display: flex; align-items: center; gap: 8px; }
.seg-times input[type=time] { flex: 1; }

/* ============ Emoji-Picker ============ */
.emoji-field { display: flex; gap: 8px; margin-top: 6px; }
.emoji-field input {
  flex: 1; min-width: 0;
  font-family: var(--font); font-size: 1rem; color: var(--text);
}
.emoji-btn { padding: 6px 10px; flex: none; }
.emoji-pop {
  position: fixed; z-index: 95;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow-c);
  width: min(288px, 92vw);
  display: flex; flex-direction: column;
  gap: 6px; padding: 8px;
}
.emoji-search {
  width: 100%;
  border: 2px solid var(--line); background: var(--bg);
  padding: 7px 10px; font-size: .95rem; outline: none;
}
.emoji-search:focus { border-color: var(--accent); }
.emoji-clear {
  font-family: var(--px); font-size: .58rem; font-weight: 700;
  color: var(--muted);
  background: none; cursor: pointer;
  border: 1px dashed var(--border);
  padding: 6px 0;
}
.emoji-clear:hover { color: var(--danger); border-color: var(--danger); }
.emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: 36vh; overflow-y: auto;
}
.emoji-grid button {
  border: none; background: none; cursor: pointer;
  font-size: 1.15rem; padding: 4px 0; line-height: 1.3;
}
.emoji-grid button:hover { background: var(--accent-soft); }
.emoji-empty {
  grid-column: 1 / -1; text-align: center;
  font-family: var(--px); font-size: .6rem; color: var(--muted);
  margin: 10px 0;
}

/* ============ Boards (Whiteboard) ============ */
.view-board { display: flex; flex-direction: column; overflow: hidden; }
.board-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.board-main { flex: 1; display: flex; min-height: 0; position: relative; }
/* Aufgaben-Sidebar auf Projekt-Boards */
.bd-side {
  flex: none; width: 268px;
  border-left: 2px solid var(--line);
  background: var(--surface);
  overflow: auto; padding: 10px;
}
.bd-side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--px); font-size: .7rem; font-weight: 700;
  margin-bottom: 4px;
  overflow: hidden;
}
.bd-side-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-side .prj-bar { height: 18px; margin: 6px 0; }
.bd-side-task { padding: 5px 2px; font-size: .88rem; }
.bd-side .prj-add input { min-width: 0; }
@media (max-width: 900px) {
  .bd-side {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 8;
    width: min(78vw, 280px);
    box-shadow: -4px 0 0 var(--shadow-c);
  }
}
.board-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; flex: none;
  background: var(--surface);
  border-bottom: 2px solid var(--line);
}
.bd-tools, .bd-zoom { display: flex; gap: 4px; }
.bd-tool, .bd-z {
  padding: 6px 9px; font-size: .8rem; min-width: 34px;
  box-shadow: 2px 2px 0 var(--shadow-c);
}
.bd-tool:active, .bd-z:active { transform: translate(2px, 2px); box-shadow: none; }
.bd-tool.on {
  background: var(--accent); color: #fff;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .25);
}
.bd-pal { display: flex; gap: 3px; flex-wrap: wrap; }
.bd-sw { width: 22px; height: 22px; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.bd-sw.on { outline: 2px solid var(--text); outline-offset: 1px; }

.board-canvas {
  flex: 1; position: relative; min-height: 0; overflow: hidden;
  background-color: var(--bg);
  background-image: var(--dither);
  background-size: 4px 4px;
  touch-action: none;   /* Pointer-Events übernehmen auch Touch-Gesten */
}
.board-canvas #bd-svg { width: 100%; height: 100%; display: block; }
.board-canvas[data-tool="box"] #bd-svg,
.board-canvas[data-tool="line"] #bd-svg,
.board-canvas[data-tool="multi"] #bd-svg,
.board-canvas[data-tool="pen"] #bd-svg { cursor: crosshair; }
.board-canvas[data-tool="multi"] .bd-item { cursor: move; }
.board-canvas[data-tool="text"] #bd-svg,
.board-canvas[data-tool="link"] #bd-svg,
.board-canvas[data-tool="media"] #bd-svg { cursor: text; }
.board-canvas[data-tool="select"] .bd-item { cursor: move; }
.bd-handle { cursor: nwse-resize; }
.bd-linkbadge { cursor: pointer; font-size: 14px; }

.bi-text {
  width: 100%; height: 100%; overflow: hidden;
  font-family: var(--font); font-size: 15px; line-height: 1.35; font-weight: 600;
  white-space: pre-wrap; word-break: break-word;
}
/* Konsolenschrift: alle Zeichen gleich breit (Tabellen, ASCII, Code) */
.bi-text.bi-px { font-family: var(--mono); font-size: 14px; line-height: 1.45; font-weight: 400; }
.bd-edit {
  position: absolute; z-index: 5;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--accent);
  padding: 2px 4px; resize: none;
  line-height: 1.35; font-weight: 600;
  min-width: 60px; min-height: 34px;
}
.bd-selbar {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 6;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 3px 3px 0 var(--shadow-c);
  padding: 4px;
}
.bd-play { cursor: pointer; }
.bd-minimap {
  position: absolute; right: 10px; bottom: 10px;
  width: 168px; height: 112px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border: 2px solid var(--line);
  box-shadow: 3px 3px 0 var(--shadow-c);
  z-index: 6;
  cursor: crosshair;
  touch-action: none;
}
.bd-player {
  position: absolute; z-index: 7;
  background: #000;
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow-c);
}
.bd-player iframe, .bd-player video {
  width: 100%; height: 100%;
  border: none; display: block;
}
.bd-pclose {
  position: absolute; top: -14px; right: -14px;
  width: 26px; height: 26px; padding: 0;
  border: 2px solid var(--line);
  background: var(--surface); color: var(--danger);
  font-family: var(--px); font-size: .7rem; font-weight: 700;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow-c);
}
.bd-upload { display: block; text-align: center; cursor: pointer; }
.bd-stylepop {
  position: fixed; z-index: 95;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow-c);
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 94vw;
}
.bd-strow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bd-stlabel {
  flex: none; width: 62px;
  font-family: var(--px); font-size: .55rem; font-weight: 700;
  color: var(--muted); text-transform: uppercase;
}
.bd-stsw { width: 20px; height: 20px; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.bd-stsw.on { outline: 2px solid var(--text); outline-offset: 1px; }
.bd-stsw.none {
  width: auto; min-width: 24px; padding: 0 4px;
  background: var(--surface); color: var(--muted);
  font-size: .8rem; line-height: 1;
}
.bd-stcustom {
  width: 26px; height: 22px; padding: 1px;
  border: 2px solid var(--line); background: var(--surface); cursor: pointer;
}
.bd-or {
  text-align: center; color: var(--muted);
  font-family: var(--px); font-size: .6rem; font-weight: 700;
  margin: 12px 0;
}
.bd-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--px); font-size: .6rem; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--border);
  padding: 5px 10px; pointer-events: none;
  text-align: center; max-width: 90%;
}

/* Board-Übersicht: Baum entlang der Planner-Gruppen */
.bd-treehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.bd-tree { padding: 10px 8px; }
.bd-brow { cursor: pointer; font-weight: 600; }
.bd-brow:hover { background: var(--accent-soft); }
/* Review-Element (Weekly/Jahresreview): Punkteliste auf dem Board */
.bi-review {
  width: 100%; height: 100%; overflow: hidden;
  font-family: var(--font); font-size: 13px; line-height: 1.45;
  color: var(--text);
}
.bi-review .rv-title {
  font-family: var(--px); font-size: .72rem; font-weight: 700;
  margin-bottom: 6px;
}
.bi-review .rv-user {
  font-family: var(--px); font-size: .6rem; font-weight: 700;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  margin: 8px 0 4px; padding-bottom: 2px;
  display: flex; justify-content: space-between;
}
.bi-review .rv-row {
  display: flex; gap: 6px; align-items: baseline;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bi-review .rv-day { font-family: var(--px); font-size: .5rem; color: var(--muted); flex: none; width: 20px; }
.bi-review .rv-pts { margin-left: auto; font-family: var(--px); font-size: .55rem; color: var(--ok); flex: none; }
.bi-review .rv-empty { color: var(--muted); font-size: .85rem; }

/* Admin-Bereich (Benutzerverwaltung) */
.adm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--border);
}
.adm-row.off { opacity: .55; }
.adm-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-name small { color: var(--muted); }
.adm-btns { display: flex; gap: 2px; flex: none; }
.adm-create { margin-top: 14px; }

/* ============ Inventar ============ */
.inv-search {
  margin-bottom: 14px;
  font-size: 1.05rem !important;
  padding: 12px 14px !important;
}
.inv-row { cursor: pointer; }
.inv-row:hover { background: var(--surface-2); }
.inv-row.inv-over {
  border: 2px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  margin-right: 4px;
}
.inv-name { display: inline-flex; flex-direction: column; min-width: 0; overflow: hidden; }
.inv-name small.inv-path {
  color: var(--muted); font-size: .68rem; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-badge {
  flex: none;
  font-family: var(--px); font-size: .5rem; font-weight: 700;
  border: 1px solid var(--border); color: var(--muted);
  padding: 1px 5px; white-space: nowrap;
}
.inv-badge.soon { color: #e8a33d; border-color: #e8a33d; }
.inv-badge.over { color: var(--danger); border-color: var(--danger); }
.inv-badge.shop { border-color: var(--accent); font-size: .7rem; padding: 0 4px; }
.inv-qty {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: .8rem; white-space: nowrap;
}
.inv-qty b { min-width: 20px; text-align: center; }
.inv-step {
  width: 24px; height: 24px; padding: 0;
  border: 2px solid var(--line); background: var(--surface);
  font-family: var(--px); font-weight: 700; cursor: pointer;
  color: var(--muted);
}
.inv-step:hover { color: var(--accent); border-color: var(--accent); }
.inv-step:active { transform: translate(1px, 1px); }
.inv-fill {
  flex: none; display: inline-block; position: relative;
  width: 32px; height: 10px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.inv-fill i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.layer-row.grp.inv-loc {
  border-left: 5px solid var(--accent);
  background: var(--accent-soft);
}
.inv-hint { color: var(--accent) !important; }
.inv-sum { margin: 6px 0; font-size: .9rem; }
.iv-b-fill input[type=range] { width: 100%; margin-top: 6px; accent-color: var(--accent); }
.iv-b-fill output { font-family: var(--font); font-weight: 700; color: var(--text); }

/* Tags + Custom-Felder */
.iv-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.iv-tagchip {
  border: 2px solid var(--line); background: var(--surface);
  font-family: var(--px); font-size: .58rem; font-weight: 700;
  color: var(--muted); padding: 4px 8px; cursor: pointer;
}
.iv-tagchip.on {
  background: var(--accent); color: #fff;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .25);
}
.iv-tagchip.iv-newtag { border-style: dashed; }
.iv-cf-group {
  border: 2px solid var(--border);
  background: var(--surface-2);
  padding: 10px; margin-bottom: 10px;
}
.iv-cf-head {
  font-family: var(--px); font-size: .62rem; font-weight: 700;
  margin-bottom: 8px;
}
.tg-frow { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.tg-frow input:first-child { flex: 2; }
.tg-frow input:nth-child(2) { flex: 1; }

/* Bilder & Dokumente am Item */
.iv-media { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-thumb { position: relative; display: inline-block; }
.iv-thumb img {
  width: 68px; height: 68px; object-fit: cover; display: block;
  border: 2px solid var(--line);
  box-shadow: 2px 2px 0 var(--shadow-c);
}
.iv-thumb button, .iv-doc button {
  position: absolute; top: -8px; right: -8px;
  width: 20px; height: 20px; padding: 0;
  border: 2px solid var(--line); background: var(--surface); color: var(--danger);
  font-size: .6rem; font-weight: 700; cursor: pointer;
}
.iv-doc {
  position: relative; display: inline-flex; align-items: center;
  border: 2px solid var(--line); background: var(--surface-2);
  padding: 6px 20px 6px 8px; font-size: .85rem;
  max-width: 100%;
}
.iv-doc a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.iv-upbtns { display: flex; gap: 8px; align-items: center; margin: 8px 0 12px; }
.iv-upbtns .btn { font-size: .62rem; padding: 7px 10px; cursor: pointer; }
.iv-upstate { font-family: var(--px); font-size: .58rem; color: var(--muted); }

/* Subboard-Kachel auf dem Canvas */
.bi-board {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 2px; overflow: hidden;
  font-family: var(--px); font-size: .68rem; font-weight: 700;
  color: var(--text);
}

/* ============ Projekte (gamifiziert) ============ */
.prj-week {
  font-family: var(--px); font-size: .68rem; font-weight: 700;
  color: var(--ok); margin: 0 0 14px;
}
.prj-sect { margin: 20px 0 10px; }
.prj-archhead { cursor: pointer; user-select: none; }
.prj-card { cursor: pointer; }
.prj-card:hover { border-color: var(--prj-color, var(--accent)); }
.prj-card.dim { opacity: .62; }
.prj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.prj-name {
  font-family: var(--px); font-size: .8rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Progressbar: erledigt = satte Füllung, in Arbeit = Schraffur (wie Zeitbereiche) */
.prj-bar {
  position: relative; height: 24px; margin: 10px 0 8px;
  border: 2px solid var(--line);
  background: var(--surface-2);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .18);
  overflow: hidden;
}
.prj-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  transition: width .3s steps(6, end);
}
.prj-doing {
  position: absolute; top: 0; bottom: 0;
  background-color: color-mix(in srgb, var(--z-color, var(--accent)) 20%, transparent);
  background-image: var(--hatch);
}
.prj-pct {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--px); font-size: .6rem; font-weight: 700;
  text-shadow: 1px 1px 0 var(--shadow-c);
}

.prj-meta { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prj-meta2 {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 6px; font-size: .78rem; color: var(--muted);
}
.prj-last { margin-left: auto; font-family: var(--px); font-size: .55rem; }
.prj-due.over { color: var(--danger); font-weight: 700; }
.prj-due.today { color: #e8a33d; font-weight: 700; }

.prj-statusrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.prj-chip { padding: 6px 10px; font-size: .6rem; }
.prj-chip.on { background: var(--accent); color: #fff; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .25); }
.prj-reward { margin-top: 8px; font-size: .9rem; }
.prj-reward.muted { color: var(--muted); cursor: pointer; font-size: .8rem; }
.prj-reward.muted:hover { color: var(--accent); }
.prj-done-banner {
  margin-top: 10px; padding: 10px;
  border: 2px solid var(--ok);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  font-family: var(--px); font-size: .72rem; font-weight: 700; text-align: center;
  animation: pop .3s steps(4, end);
}

.prj-task {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
}
.prj-drag {
  flex: none; width: 14px;
  color: var(--muted); font-size: .8rem; letter-spacing: -2px;
  cursor: grab; user-select: none;
}
.prj-task.dragging { opacity: .35; }
.prj-task.drop-above { box-shadow: 0 -3px 0 var(--accent); }
.prj-task.drop-below { box-shadow: 0 3px 0 var(--accent); }
.prj-task.doing { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.prj-task.done .prj-ttitle { text-decoration: line-through; opacity: .55; }
.prj-tstate { border: none; background: none; cursor: pointer; font-size: 1.05rem; width: 30px; flex: none; padding: 0; }
.prj-tstate:active { transform: scale(1.3); }
.prj-ttitle { flex: 1; cursor: pointer; overflow-wrap: anywhere; }
.prj-tsize {
  flex: none;
  font-family: var(--px); font-size: .55rem; font-weight: 700;
  border: 1px solid var(--line); padding: 1px 5px; color: var(--muted);
}
.prj-tsize.s1 { color: var(--ok); border-color: var(--ok); }
.prj-tsize.s3 { color: var(--danger); border-color: var(--danger); }
.prj-who {
  flex: none; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: 1px solid var(--line);
  font-family: var(--px); font-size: .6rem; font-weight: 700;
}
.prj-add { display: flex; gap: 8px; margin-top: 12px; }
.prj-add input { flex: 1; }
.prj-add .btn { flex: none; }
.prj-hint { color: var(--muted); font-size: .75rem; margin-top: 10px; }

/* ✨ Glitzerregen */
.glitter {
  position: fixed; top: -24px; z-index: 99;
  pointer-events: none; line-height: 1;
  animation: glitter-fall 2s steps(22, end) forwards;
}
@keyframes glitter-fall {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(var(--gx), 55vh); opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate(calc(var(--gx) * 1.6), 108vh); opacity: 0; }
}

/* Pixel-Konfetti */
.confetti {
  position: fixed; z-index: 99;
  width: 6px; height: 6px;
  pointer-events: none;
  animation: confetti-pop 1.2s steps(8, end) forwards;
}
@keyframes confetti-pop {
  0% { transform: translate(0, 0); opacity: 1; }
  55% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.35), 70px); opacity: 0; }
}

/* ============ Modal ============ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--shadow-c) 62%, transparent);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  background: var(--surface);
  width: 100%; max-width: 480px;
  border: 3px solid var(--line);
  border-bottom: none;
  box-shadow: 6px 6px 0 var(--shadow-c);
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow: auto;
  animation: slide-up .15s steps(4, end);
}
@media (min-width: 560px) {
  .modal-backdrop { align-items: center; }
  .modal { border-bottom: 3px solid var(--line); }
}
@keyframes slide-up { from { transform: translateY(30px); opacity: .5; } }
.modal h2 { font-size: .95rem; }
.modal .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.check-line {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: .95rem;
  color: var(--text); font-weight: 500;
}
.check-line input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ============ Toast ============ */
.toast {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  background: var(--surface); color: var(--text);
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow-c);
  padding: 9px 16px;
  font-family: var(--px); font-size: .68rem; font-weight: 700;
  z-index: 80;
  animation: pop .15s steps(3, end);
  max-width: 90vw; text-align: center;
}