/* ═══════════════════════════════════════════════════════════
   STUNDENPLAN  —  style.css  v63
   Fluid Material-You Animations · Liquid Glass · Crystal Glass
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:    oklch(.96 .005 264);
  --card:  oklch(1 0 0);
  --border:oklch(0 0 0/.05);
  --tp:    oklch(.22 .008 264);
  --ts:    oklch(.32 .006 264);
  --ts2:   oklch(.46 .007 264);
  --tm:    oklch(.68 .01  264);
  --tm2:   oklch(.80 .008 264);
  --cell:  oklch(0 0 0/.028);
  --cell-f:oklch(0 0 0/.055);
  --mb:    oklch(1 0 0);
  --mt:    oklch(.22 .008 264);
  --mm:    oklch(.60 .010 264);
  --mi:    oklch(0 0 0/.045);
  --mh:    oklch(0 0 0/.08);
  --ib:    oklch(0 0 0/.10);
  --ig:    oklch(.99 .002 264);
  --e-snap:   cubic-bezier(.05,.7,.1,1);
  --e-out:    cubic-bezier(.2,1,.3,1);
  --e-std:    cubic-bezier(.4,0,.2,1);
  --e-spring: cubic-bezier(.34,1.56,.64,1);
  --e-close:  cubic-bezier(.3,0,.8,.15);
  --sat: env(safe-area-inset-top,0px);
  --sab: env(safe-area-inset-bottom,0px);
  --sal: env(safe-area-inset-left,0px);
  --sar: env(safe-area-inset-right,0px);
}

html,body { overflow:hidden;width:100%;height:100%;overscroll-behavior:none; }
body {
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  height:100dvh;
  display:flex;
  flex-direction:column;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  transition:background .4s var(--e-std), color .3s var(--e-std);
}
.safe-wrap {
  flex:1;display:flex;flex-direction:column;overflow:hidden;
  padding-top:var(--sat);padding-bottom:var(--sab);
  padding-left:var(--sal);padding-right:var(--sar);
}
.ctn { width:100%;max-width:960px;margin:0 auto;padding:10px 8px 0;display:flex;flex-direction:column;flex:1;overflow:hidden; }

.hdr {
  background:var(--card);
  border-radius:18px;
  padding:10px 14px;
  margin-bottom:7px;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  border:1px solid var(--border);
  flex-shrink:0;
  box-shadow:0 1px 3px oklch(0 0 0/.04), 0 1px 2px oklch(0 0 0/.03);
  transition:background .4s var(--e-std), border-color .3s var(--e-std), box-shadow .3s var(--e-std);
}
.wnav { display:flex;align-items:center;justify-content:center;gap:10px;color:var(--tp);font-weight:700;font-size:13px; }
.wb {
  background:var(--mi);
  border:none;
  width:36px;height:36px;min-width:44px;min-height:44px;
  border-radius:12px;
  color:var(--tp);
  font-size:12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--e-std), transform .2s var(--e-out);
}
.wb:active { transform:scale(.84); background:var(--mh); }
.gear-btn {
  background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  padding:0;justify-self:end;display:flex;align-items:center;justify-content:center;
  color:var(--tm);min-width:44px;min-height:44px;
  transition:transform .2s var(--e-out), color .2s var(--e-std);
}
.gear-btn:active { transform:scale(.82) rotate(30deg); color:var(--tp); }
.gear-btn svg { width:22px;height:22px; }

.eban {
  background:rgba(255,159,10,.07);border:1px solid rgba(255,159,10,.14);
  border-radius:10px;padding:5px 12px;margin-bottom:5px;
  display:none;align-items:center;color:#ff9f0a;font-weight:600;font-size:11px;flex-shrink:0;
  animation:fadeDown .3s var(--e-snap) both;
}
.eban.vis { display:flex; }
.trkr { display:flex;gap:5px;margin-bottom:7px;flex-wrap:wrap;flex-shrink:0; }
.trkr:empty { margin:0; }
.trk {
  border-radius:20px;padding:4px 14px;
  font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;
  transition:background .4s var(--e-out), color .3s var(--e-std), transform .3s var(--e-spring), border-color .3s var(--e-std);
  animation:popIn .4s var(--e-spring) both;
}
.trk.p { background:transparent;color:var(--tm);border:1px solid var(--ib); }
.trk.d { background:#34c759;color:#fff;border:1px solid transparent; }

.swipe-wrap { flex:1;position:relative;overflow:hidden;min-height:0;touch-action:pan-y; }
.swipe-inner { display:flex;width:300%;height:100%;will-change:transform; }
.swipe-page  { width:33.333%;height:100%;flex-shrink:0;padding:0 1px; }

.tt {
  background:var(--card);
  border-radius:18px;
  padding:6px 6px 10px;
  border:1px solid var(--border);
  display:flex;flex-direction:column;height:100%;
  box-shadow:0 1px 4px oklch(0 0 0/.04);
  transition:background .4s var(--e-std), border-color .3s var(--e-std);
}
.tt.ea { border-color:rgba(255,159,10,.18); }
.dh { display:grid;grid-template-columns:38px repeat(5,1fr);gap:2px;margin-bottom:2px;flex-shrink:0; }
.dl { text-align:center;color:var(--ts2);font-weight:800;font-size:11px;padding:4px 0; }
.sg { display:grid;gap:2.5px;flex:1;grid-template-rows:repeat(10,1fr); }
.sr { display:grid;grid-template-columns:38px repeat(5,1fr);gap:2.5px;height:100%; }

.tc { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 0; }
.tc-time  { font-size:7px;color:var(--tm);font-family:'JetBrains Mono',monospace;line-height:1; }
.tc-num   { font-size:16px;font-weight:800;color:var(--ts2);line-height:1.1; }
.tc-time2 { font-size:7px;color:var(--tm2);font-family:'JetBrains Mono',monospace;line-height:1; }

.sl {
  background:var(--cell);
  border-radius:11px;
  cursor:pointer;border:none;
  position:relative;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:3px;
  transition:
    transform   .22s var(--e-out),
    background  .3s  var(--e-std),
    box-shadow  .3s  var(--e-std),
    opacity     .3s  var(--e-std);
}
.sl::before {
  content:'';position:absolute;top:0;left:0;bottom:0;
  width:3px;border-radius:11px 0 0 11px;
  opacity:0;transition:opacity .2s var(--e-std);
  background:var(--sc,transparent);
}
.sl.hc { background:var(--cell-f); }
.sl.hc::before { opacity:1; }
.sl:active { transform:scale(.9); transition-duration:.08s; }
.edit-mode .sl { outline:1.5px dashed rgba(255,159,10,.22);outline-offset:-1.5px; }
.edit-mode .sl.hc { outline:none; }
.eh { display:none;color:rgba(255,159,10,.28);font-size:10px; }
.edit-mode .sl:not(.hc) .eh { display:flex;align-items:center;justify-content:center;flex:1; }
.sl .lb-dot {
  display:none;position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--tm);
}
.sl.has-lb:not(.hc) .lb-dot { display:block; }
.edit-mode .sl .lb-dot { display:none; }
.ls { font-weight:800;font-size:11px;color:var(--tp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;width:100%; }
.lt { font-size:8px;color:var(--ts2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;width:100%; }
.lr { font-size:7px;color:var(--tm);font-family:'JetBrains Mono',monospace;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%; }
.sd {
  display:none;position:absolute;top:1px;right:1px;
  width:13px;height:13px;background:rgba(255,59,48,.85);
  border:none;border-radius:3px;color:#fff;font-size:7px;
  cursor:pointer;z-index:5;line-height:13px;text-align:center;
}
.edit-mode .sl.hc .sd { display:block; }

body.dark {
  --bg:    oklch(.18 .006 264);
  --card:  oklch(.22 .007 264);
  --border:oklch(1 0 0/.08);
  --tp:    oklch(.96 .003 264);
  --ts:    oklch(.88 .004 264);
  --ts2:   oklch(.72 .008 264);
  --tm:    oklch(.50 .008 264);
  --tm2:   oklch(.36 .007 264);
  --cell:  oklch(1 0 0/.05);
  --cell-f:oklch(1 0 0/.08);
  --mb:    oklch(.22 .007 264);
  --mt:    oklch(.96 .003 264);
  --mm:    oklch(.58 .008 264);
  --mi:    oklch(1 0 0/.07);
  --mh:    oklch(1 0 0/.11);
  --ib:    oklch(1 0 0/.12);
  --ig:    oklch(1 0 0/.06);
}
body.dark .s-tog  { background:oklch(1 0 0/.14); }
body.dark .sm-tog { background:oklch(1 0 0/.11); }
body.dark .trk.p  { border-color:oklch(1 0 0/.14); }
body.dark .sd     { background:rgba(255,59,48,.9); }
body.dark .color-dot { border-color:oklch(1 0 0/.12); }
body.dark .hdr { box-shadow:0 1px 4px oklch(0 0 0/.2); }
body.dark .tt  { box-shadow:0 1px 6px oklch(0 0 0/.2); }

body.theme-crystal {
  --bg:transparent;
  --card:oklch(1 0 0/.52);
  --border:oklch(1 0 0/.38);
  --cell:oklch(1 0 0/.28);
  --cell-f:oklch(1 0 0/.48);
  --mb:oklch(1 0 0/.72);
  --mt:oklch(.12 .006 250);
  --mm:oklch(.42 .010 250);
  --mi:oklch(1 0 0/.26);
  --mh:oklch(1 0 0/.42);
  --ib:oklch(1 0 0/.38);
  --ig:oklch(1 0 0/.28);
  --tm:oklch(.42 .010 250);
  --tm2:oklch(.60 .010 250);
  --tp:oklch(.12 .006 250);
  --ts:oklch(.28 .008 250);
  --ts2:oklch(.34 .010 250);
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, oklch(.82 .10 260/.6), transparent),
    radial-gradient(ellipse 60% 80% at 80% 80%, oklch(.86 .08 210/.5), transparent),
    radial-gradient(ellipse 50% 50% at 50% 50%, oklch(.90 .06 290/.4), transparent),
    linear-gradient(155deg, oklch(.90 .05 260), oklch(.94 .04 215));
  background-attachment:fixed;
}
body.theme-crystal .hdr {
  backdrop-filter:blur(32px) saturate(1.8) brightness(1.04);
  -webkit-backdrop-filter:blur(32px) saturate(1.8) brightness(1.04);
  background:oklch(1 0 0/.50);
  border:1px solid oklch(1 0 0/.65);
  box-shadow:0 2px 20px oklch(0 0 0/.06),inset 0 1px 0 oklch(1 0 0/.55),inset 0 -1px 0 oklch(0 0 0/.03);
  border-radius:20px;
}
body.theme-crystal .tt {
  backdrop-filter:blur(24px) saturate(1.6) brightness(1.02);
  -webkit-backdrop-filter:blur(24px) saturate(1.6) brightness(1.02);
  background:oklch(1 0 0/.40);
  border:1px solid oklch(1 0 0/.52);
  box-shadow:0 4px 24px oklch(0 0 0/.05),inset 0 1px 0 oklch(1 0 0/.40);
  border-radius:20px;
}
body.theme-crystal .sl {
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid oklch(1 0 0/.44);
  border-radius:12px;
  box-shadow:0 1px 4px oklch(0 0 0/.04), inset 0 .5px 0 oklch(1 0 0/.35);
}
body.theme-crystal .sl::before { border-radius:12px 0 0 12px; }
body.theme-crystal .sl.hc { background:oklch(1 0 0/.50);border-color:oklch(1 0 0/.60);box-shadow:0 2px 8px oklch(0 0 0/.06), inset 0 1px 0 oklch(1 0 0/.50); }
body.theme-crystal .mc {
  backdrop-filter:blur(48px) saturate(2.0) brightness(1.04);
  -webkit-backdrop-filter:blur(48px) saturate(2.0) brightness(1.04);
  background:oklch(1 0 0/.68);
  border:1px solid oklch(1 0 0/.55);
  box-shadow:0 -4px 32px oklch(0 0 0/.08), inset 0 1px 0 oklch(1 0 0/.50);
  border-radius:24px 24px 0 0;
}
body.theme-crystal .mc-head { background:transparent;border-radius:24px 24px 0 0; }
body.theme-crystal .s-group {
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  background:oklch(1 0 0/.30);
  border:1px solid oklch(1 0 0/.44);
  border-radius:16px;
}
body.theme-crystal .s-row  { border-color:oklch(1 0 0/.20); }
body.theme-crystal .s-tog  { background:oklch(0 0 0/.10); }
body.theme-crystal .s-tog.on { background:#0a74e8; }
body.theme-crystal .s-tog.orange.on { background:#e88a0a; }
body.theme-crystal .sm-tog { background:oklch(0 0 0/.08); }
body.theme-crystal .sm-tog.on { background:#0a74e8; }
body.theme-crystal .trk { backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:oklch(1 0 0/.25);border:1px solid oklch(1 0 0/.38); }
body.theme-crystal .trk.d { background:oklch(.52 .20 145/.85);border-color:transparent; }
body.theme-crystal .sbtn { border-radius:14px; }
body.theme-crystal .pick-item { backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:oklch(1 0 0/.30);border:1px solid oklch(1 0 0/.35);border-radius:14px; }
body.theme-crystal .ci  { background:oklch(1 0 0/.30);border-color:oklch(1 0 0/.40); }
body.theme-crystal .mx  { backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:oklch(1 0 0/.30); }
body.theme-crystal .wb  { backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:oklch(1 0 0/.30);border:1px solid oklch(1 0 0/.35); }
body.theme-crystal .dl  { color:oklch(.34 .012 250);font-weight:700; }
body.theme-crystal .qr-section { backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:oklch(1 0 0/.28);border:1px solid oklch(1 0 0/.38); }
body.theme-crystal .tabs { backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:oklch(1 0 0/.25);border:1px solid oklch(1 0 0/.30); }
body.theme-crystal .tab.on { background:oklch(1 0 0/.55);color:var(--mt); }
body.theme-crystal .eban { background:rgba(255,159,10,.10);border-color:rgba(255,159,10,.20); }

body.dark.theme-crystal {
  background:
    radial-gradient(ellipse 70% 60% at 15% 15%, oklch(.25 .06 260/.5), transparent),
    radial-gradient(ellipse 60% 70% at 85% 85%, oklch(.22 .05 210/.4), transparent),
    linear-gradient(155deg, oklch(.18 .04 260), oklch(.20 .03 220));
}
body.dark.theme-crystal .hdr { background:oklch(1 0 0/.08);border-color:oklch(1 0 0/.14);box-shadow:0 2px 16px oklch(0 0 0/.3),inset 0 1px 0 oklch(1 0 0/.12); }
body.dark.theme-crystal .tt  { background:oklch(1 0 0/.06);border-color:oklch(1 0 0/.10);box-shadow:inset 0 1px 0 oklch(1 0 0/.08); }
body.dark.theme-crystal .mc  { background:oklch(.14 .01 260/.90);border-color:oklch(1 0 0/.12); }
body.dark.theme-crystal .sl  { background:oklch(1 0 0/.06);border-color:oklch(1 0 0/.10); }
body.dark.theme-crystal .sl.hc { background:oklch(1 0 0/.10);border-color:oklch(1 0 0/.14); }
body.dark.theme-crystal .s-group { background:oklch(1 0 0/.07);border-color:oklch(1 0 0/.10); }
body.dark.theme-crystal .pick-item{ background:oklch(1 0 0/.07);border-color:oklch(1 0 0/.10); }

body.theme-liquid {
  --bg:transparent;
  --card:oklch(1 0 0/.10);
  --border:oklch(1 0 0/.14);
  --cell:oklch(1 0 0/.07);
  --cell-f:oklch(1 0 0/.14);
  --mb:oklch(1 0 0/.14);
  --mt:oklch(.14 .006 264);
  --mm:oklch(.38 .010 264);
  --mi:oklch(1 0 0/.07);
  --mh:oklch(1 0 0/.15);
  --ib:oklch(1 0 0/.12);
  --ig:oklch(1 0 0/.05);
  --tm:oklch(.38 .010 264);
  --tm2:oklch(.55 .010 264);
  --tp:oklch(.14 .006 264);
  --ts:oklch(.24 .008 264);
  --ts2:oklch(.30 .010 264);
  background:
    radial-gradient(ellipse 100% 80% at 0% 0%,   oklch(.90 .08 220/.50), transparent 60%),
    radial-gradient(ellipse 80%  70% at 100% 100%, oklch(.88 .08 310/.45), transparent 60%),
    radial-gradient(ellipse 60%  60% at 50%  50%,  oklch(.94 .04 270/.30), transparent 70%),
    linear-gradient(160deg, oklch(.92 .04 210), oklch(.95 .03 270), oklch(.91 .05 320));
  background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','DM Sans',sans-serif;
}
body.theme-liquid .hdr { backdrop-filter:blur(60px) saturate(2.4) brightness(1.10);-webkit-backdrop-filter:blur(60px) saturate(2.4) brightness(1.10);background:oklch(1 0 0/.07);border:1px solid oklch(1 0 0/.36);box-shadow:inset 0 1px 0 oklch(1 0 0/.55),inset 0 -1px 0 oklch(0 0 0/.025),0 6px 30px oklch(0 0 0/.05);border-radius:24px; }
body.theme-liquid .tt { backdrop-filter:blur(52px) saturate(2.2) brightness(1.06);-webkit-backdrop-filter:blur(52px) saturate(2.2) brightness(1.06);background:oklch(1 0 0/.04);border:1px solid oklch(1 0 0/.28);box-shadow:inset 0 1px 0 oklch(1 0 0/.40),0 4px 32px oklch(0 0 0/.04);border-radius:24px; }
body.theme-liquid .sl { backdrop-filter:blur(20px) saturate(1.9) brightness(1.02);-webkit-backdrop-filter:blur(20px) saturate(1.9) brightness(1.02);border:1px solid oklch(1 0 0/.24);box-shadow:inset 0 1px 0 oklch(1 0 0/.35),0 1px 4px oklch(0 0 0/.02);border-radius:14px; }
body.theme-liquid .sl::before { border-radius:14px 0 0 14px; }
body.theme-liquid .sl.hc { background:oklch(1 0 0/.13);border-color:oklch(1 0 0/.28);box-shadow:inset 0 1px 0 oklch(1 0 0/.50),0 2px 10px oklch(0 0 0/.04); }
body.theme-liquid .mc { backdrop-filter:blur(72px) saturate(2.8) brightness(1.06);-webkit-backdrop-filter:blur(72px) saturate(2.8) brightness(1.06);background:oklch(1 0 0/.09);border:1px solid oklch(1 0 0/.32);box-shadow:inset 0 1px 0 oklch(1 0 0/.55),0 -6px 48px oklch(0 0 0/.07);border-radius:26px 26px 0 0; }
body.theme-liquid .mc-head { background:transparent;border-radius:26px 26px 0 0; }
body.theme-liquid .shh { background:oklch(0 0 0/.09); }
body.theme-liquid .s-group { backdrop-filter:blur(32px) saturate(2.0);-webkit-backdrop-filter:blur(32px) saturate(2.0);background:oklch(1 0 0/.06);border:1px solid oklch(1 0 0/.24);box-shadow:inset 0 1px 0 oklch(1 0 0/.32);border-radius:18px; }
body.theme-liquid .s-row { border-color:oklch(1 0 0/.10); }
body.theme-liquid .s-tog { background:oklch(0 0 0/.07); }
body.theme-liquid .s-tog::after { box-shadow:0 1px 4px oklch(0 0 0/.10); }
body.theme-liquid .s-tog.on { background:#007aff; }
body.theme-liquid .s-tog.orange.on { background:#ff9f0a; }
body.theme-liquid .sm-tog { background:oklch(0 0 0/.06); }
body.theme-liquid .sm-tog.on { background:#007aff; }
body.theme-liquid .sbtn { border-radius:16px;backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);background:oklch(.22 .06 264/.50);border:1px solid oklch(1 0 0/.14);box-shadow:inset 0 1px 0 oklch(1 0 0/.25);color:#fff; }
body.theme-liquid .sbtn-danger { background:oklch(.50 .24 25/.80); }
body.theme-liquid .trk { backdrop-filter:blur(14px) saturate(1.7);-webkit-backdrop-filter:blur(14px) saturate(1.7);background:oklch(1 0 0/.05);border:1px solid oklch(1 0 0/.22);box-shadow:inset 0 .5px 0 oklch(1 0 0/.28); }
body.theme-liquid .trk.d { background:oklch(.56 .22 145/.62);border-color:oklch(1 0 0/.18);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); }
body.theme-liquid .pick-item { backdrop-filter:blur(16px) saturate(1.8);-webkit-backdrop-filter:blur(16px) saturate(1.8);background:oklch(1 0 0/.06);border:1px solid oklch(1 0 0/.22);border-radius:16px;box-shadow:inset 0 .5px 0 oklch(1 0 0/.28); }
body.theme-liquid .ci { background:oklch(1 0 0/.09);border-color:oklch(1 0 0/.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); }
body.theme-liquid .mx { backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:oklch(1 0 0/.12);border:1px solid oklch(1 0 0/.22); }
body.theme-liquid .wb { backdrop-filter:blur(10px) saturate(1.6);-webkit-backdrop-filter:blur(10px) saturate(1.6);background:oklch(1 0 0/.10);border:1px solid oklch(1 0 0/.24);box-shadow:inset 0 1px 0 oklch(1 0 0/.30);border-radius:14px; }
body.theme-liquid .tabs { backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);background:oklch(1 0 0/.08);border:1px solid oklch(1 0 0/.20); }
body.theme-liquid .tab.on { background:oklch(1 0 0/.32);color:var(--mt);box-shadow:inset 0 1px 0 oklch(1 0 0/.40); }
body.theme-liquid .dl  { color:oklch(.30 .012 264);font-weight:700; }
body.theme-liquid .qr-section { backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);background:oklch(1 0 0/.07);border:1px solid oklch(1 0 0/.20); }
body.theme-liquid .lb-entry { background:oklch(1 0 0/.08);border:1px solid oklch(1 0 0/.18); }
body.theme-liquid .hdr .wb:active { background:oklch(1 0 0/.18); }
body.theme-liquid .eban { background:rgba(255,159,10,.08);border-color:rgba(255,159,10,.22); }

body.dark.theme-liquid {
  background:
    radial-gradient(ellipse 70% 60% at 10% 10%, oklch(.20 .06 220/.55), transparent),
    radial-gradient(ellipse 60% 70% at 90% 90%, oklch(.18 .06 320/.45), transparent),
    linear-gradient(145deg, oklch(.14 .04 210), oklch(.16 .03 270), oklch(.14 .04 320));
}
body.dark.theme-liquid .hdr { background:oklch(1 0 0/.07);border-color:oklch(1 0 0/.14);box-shadow:0 2px 20px oklch(0 0 0/.3),inset 0 1px 0 oklch(1 0 0/.14); }
body.dark.theme-liquid .tt  { background:oklch(1 0 0/.04);border-color:oklch(1 0 0/.09);box-shadow:inset 0 1px 0 oklch(1 0 0/.09); }
body.dark.theme-liquid .mc  { background:oklch(.10 .01 264/.88);border-color:oklch(1 0 0/.13); }
body.dark.theme-liquid .sl  { background:oklch(1 0 0/.05);border-color:oklch(1 0 0/.09);box-shadow:inset 0 .5px 0 oklch(1 0 0/.07); }
body.dark.theme-liquid .sl.hc { background:oklch(1 0 0/.09);border-color:oklch(1 0 0/.14); }
body.dark.theme-liquid .s-group { background:oklch(1 0 0/.05);border-color:oklch(1 0 0/.09); }
body.dark.theme-liquid .pick-item{ background:oklch(1 0 0/.05);border-color:oklch(1 0 0/.09); }
body.dark.theme-liquid .sbtn { background:oklch(.28 .08 264/.60); }

#qrWrap {
  overflow:hidden;max-height:0;opacity:0;margin-top:0;
  transition:max-height .45s var(--e-snap), opacity .3s var(--e-std), margin .35s var(--e-snap);
}
#qrWrap.open { max-height:700px;opacity:1;margin-top:5px; }

/* ═══════════════════════════════════════════════
   MODAL SYSTEM
   ═══════════════════════════════════════════════ */
.mo { display:none;position:fixed;inset:0;z-index:1000;pointer-events:none; }
.mo-bg {
  position:absolute;inset:0;
  background:oklch(0 0 0/.36);
  opacity:0;will-change:opacity;
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:opacity .3s var(--e-std), backdrop-filter .3s var(--e-std);
}
.mo.vis { display:flex;align-items:flex-end;justify-content:center;pointer-events:auto; }
.mo.vis .mo-bg { backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); }
.mc {
  background:var(--mb);
  border-radius:24px 24px 0 0;
  max-width:500px;width:100%;max-height:93dvh;
  display:flex;flex-direction:column;
  border:1px solid var(--border);
  border-bottom:none;
  transform:translateY(100%);
  will-change:transform;
  backface-visibility:hidden;
  padding-bottom:var(--sab);
  box-shadow:
    0 -1px 3px oklch(0 0 0/.06),
    0 -4px 16px oklch(0 0 0/.08),
    0 -12px 48px oklch(0 0 0/.06);
  transition:background .4s var(--e-std), border-color .3s var(--e-std);
}
.mc-head { padding:0 20px;flex-shrink:0;position:sticky;top:0;z-index:2;background:var(--mb);border-radius:24px 24px 0 0;transition:background .4s var(--e-std); }
.mc-body { flex:1;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:0 20px 28px; }
.shh { width:40px;height:4px;background:var(--ib);border-radius:2px;margin:12px auto 14px;flex-shrink:0;opacity:.6; }
.mhr { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px; }
.mtl { font-size:19px;font-weight:800;color:var(--mt); }
.mx {
  background:var(--mi);border:none;
  width:32px;height:32px;min-width:44px;min-height:44px;
  border-radius:50%;font-size:13px;
  cursor:pointer;color:var(--mm);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--e-std), transform .2s var(--e-out);
}
.mx:active { transform:scale(.82);background:var(--mh); }

.tabs { display:flex;background:var(--mi);border-radius:12px;padding:3px;margin-bottom:16px; }
.tab {
  flex:1;padding:9px;border-radius:10px;border:none;
  font-weight:700;cursor:pointer;font-size:12px;
  font-family:'DM Sans',sans-serif;
  transition:background .3s var(--e-spring), color .3s var(--e-std), transform .2s var(--e-spring);
  color:var(--mm);background:transparent;text-align:center;
  -webkit-tap-highlight-color:transparent;min-height:44px;
}
.tab.on { background:var(--mt);color:var(--mb); }
.tab:active { transform:scale(.93); }
.tpn { display:none; }
.tpn.on { display:block; }

.cf { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.cf .fw { grid-column:1/-1; }
.ci {
  padding:12px 14px;border-radius:12px;
  border:1.5px solid var(--ib);
  font-size:14px;font-family:'DM Sans',sans-serif;
  background:var(--ig);color:var(--mt);width:100%;
  transition:border-color .2s var(--e-std), box-shadow .2s var(--e-std);
}
.ci:focus { outline:none;border-color:var(--tp);box-shadow:0 0 0 3px oklch(var(--tp) / .12); }
.ci::placeholder { color:var(--mm);font-size:12px; }
.cl { font-size:10px;font-weight:700;color:var(--mm);margin-bottom:4px;display:block;text-transform:uppercase;letter-spacing:.5px; }
.sbtn {
  width:100%;padding:15px;border-radius:16px;border:none;
  font-weight:700;cursor:pointer;font-size:13px;
  font-family:'DM Sans',sans-serif;
  background:var(--mt);color:var(--mb);
  margin-top:12px;min-height:52px;
  transition:transform .2s var(--e-spring), opacity .15s var(--e-std), box-shadow .2s var(--e-std);
  box-shadow:0 2px 8px oklch(0 0 0/.12);
}
.sbtn:active { transform:scale(.96);opacity:.88;box-shadow:0 1px 3px oklch(0 0 0/.08); }
.sbtn-danger { background:#ff3b30;color:#fff; }

.lb-list-edit { margin-top:10px; }
.lbl-title { font-size:10px;font-weight:700;color:var(--mm);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px; }
.lb-entry {
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:10px;background:var(--mi);margin-bottom:4px;
  animation:fadeUp .28s var(--e-out) both;
  transition:transform .15s var(--e-out);
}
.lb-entry-color { width:3px;height:22px;border-radius:2px;flex-shrink:0; }
.lb-entry-info { flex:1;min-width:0; }
.lb-entry-name { font-weight:700;font-size:11px;color:var(--mt); }
.lb-entry-detail { font-size:9px;color:var(--mm); }
.lb-entry-del {
  background:rgba(255,59,48,.07);color:#ff3b30;border:none;
  width:20px;height:20px;border-radius:6px;
  cursor:pointer;font-size:9px;flex-shrink:0;
  min-width:36px;min-height:36px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, transform .15s var(--e-out);
}
.lb-entry-del:active { transform:scale(.80);background:rgba(255,59,48,.15); }
.lb-empty { font-size:10px;color:var(--mm);text-align:center;padding:10px; }

.pick-item {
  display:flex;align-items:center;gap:12px;padding:13px 14px;
  border-radius:14px;cursor:pointer;background:var(--mi);margin-bottom:6px;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s var(--e-out), opacity .2s var(--e-std), background .18s var(--e-std);
  min-height:56px;
  animation:fadeUp .3s var(--e-out) both;
}
.pick-item:active { transform:scale(.95);background:var(--mh); }
.pick-color { width:4px;height:24px;border-radius:2px;flex-shrink:0; }
.pick-info { flex:1; }
.pick-name { font-weight:700;font-size:13px;color:var(--mt); }
.pick-detail { font-size:9px;color:var(--mm); }
.pick-clear { opacity:.5; }
.pick-clear .pick-name { font-weight:600;color:var(--mm); }
.pick-undo { margin-top:10px;padding:10px;border-radius:10px;background:rgba(255,159,10,.05);text-align:center;cursor:pointer;font-weight:700;font-size:11px;color:#ff9f0a; }

.info-card { text-align:center;padding:4px 0; }
.info-subj { font-size:30px;font-weight:800;margin-bottom:2px; }
.info-type { font-size:9px;font-weight:700;color:var(--mm);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px; }
.info-row { display:flex;justify-content:center;gap:24px;margin-bottom:16px; }
.info-label { font-size:8px;font-weight:700;color:var(--mm);text-transform:uppercase;margin-bottom:2px; }
.info-val { font-size:14px;font-weight:700;color:var(--mt); }

.s-group {
  background:var(--mi);border-radius:16px;
  overflow:hidden;margin-top:8px;
  transition:background .3s var(--e-std);
}
.s-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border-bottom:1px solid var(--border);min-height:54px;
  transition:background .15s var(--e-std);
}
.s-row:last-child { border-bottom:none; }
.s-row:active { background:var(--mh); }
.s-row-info { flex:1;min-width:0; }
.s-row-label { font-weight:600;color:var(--mt);font-size:13px; }
.s-row-desc { font-size:9px;color:var(--mm);margin-top:2px; }

.s-tog {
  width:54px;height:32px;
  background:oklch(.8 .01 264);
  border-radius:16px;
  position:relative;
  transition:background .3s var(--e-std);
  flex-shrink:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.s-tog::after {
  content:'';position:absolute;
  width:28px;height:28px;
  background:#fff;border-radius:50%;
  top:2px;left:2px;
  transition:left .35s var(--e-spring), transform .2s var(--e-std), width .2s var(--e-std);
  box-shadow:0 2px 6px rgba(0,0,0,.22);
}
.s-tog:active::after { width:34px; }
.s-tog.on { background:#3b82f6; }
.s-tog.on::after { left:24px;transform:none; }
.s-tog.on:active::after { left:18px;width:34px; }
.s-tog.orange.on { background:#ff9f0a; }
.stl { font-size:10px;font-weight:700;color:var(--mm);margin-top:20px;margin-bottom:0;text-transform:uppercase;letter-spacing:.6px;padding-left:4px; }
.stl:first-child { margin-top:0; }

.lb-tog-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 15px;border-bottom:1px solid var(--border);min-height:52px;
  transition:background .15s var(--e-std);
}
.lb-tog-row:last-child { border-bottom:none; }
.lb-tog-row:active { background:var(--mh); }
.lb-tog-label { font-weight:600;color:var(--mt);font-size:12px; }
.sm-tog {
  width:50px;height:30px;
  background:oklch(.8 .01 264);
  border-radius:15px;
  position:relative;cursor:pointer;
  transition:background .3s var(--e-std);
  -webkit-tap-highlight-color:transparent;flex-shrink:0;
}
.sm-tog::after {
  content:'';position:absolute;
  width:26px;height:26px;
  background:#fff;border-radius:50%;
  top:2px;left:2px;
  transition:left .35s var(--e-spring), width .2s var(--e-std);
  box-shadow:0 2px 5px rgba(0,0,0,.18);
}
.sm-tog:active::after { width:32px; }
.sm-tog.on { background:#3b82f6; }
.sm-tog.on::after { left:22px; }
.sm-tog.on:active::after { left:16px; }

.qr-section { margin-top:6px;padding:12px;background:var(--mi);border-radius:12px; }
.qr-tabs { display:flex;gap:4px;margin-bottom:10px; }
.qr-tab {
  flex:1;padding:7px;border-radius:8px;border:none;
  font-weight:700;font-size:9px;cursor:pointer;
  background:var(--mh);color:var(--mm);text-align:center;
  -webkit-tap-highlight-color:transparent;min-height:36px;
  transition:background .2s var(--e-std), color .2s var(--e-std), transform .15s var(--e-out);
}
.qr-tab:active { transform:scale(.94); }
.qr-tab.on { background:var(--mt);color:var(--mb); }
.qr-box { display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0; }
.qr-canvas { background:#fff;border-radius:10px;padding:8px;display:inline-block;cursor:pointer;transition:transform .2s var(--e-out); }
.qr-canvas:active { transform:scale(.94); }
.qr-hint { font-size:8px;color:var(--mm); }
.share-size { font-size:8px;color:var(--mm);font-family:'JetBrains Mono',monospace;margin-top:2px; }
.qr-code-text { font-size:7px;font-family:'JetBrains Mono',monospace;color:var(--mm);word-break:break-all;max-height:36px;overflow-y:auto;background:var(--ig);padding:4px 8px;border-radius:6px;margin-top:4px;width:100%;text-align:center;cursor:pointer;border:1px solid var(--ib); }
.qr-full { display:none;position:fixed;inset:0;background:white;z-index:2000;align-items:center;justify-content:center;flex-direction:column;gap:16px; }
.qr-full.vis { display:flex; }
.qr-full-close { position:absolute;top:max(16px,var(--sat));right:16px;width:40px;height:40px;border-radius:50%;background:#f0f0f0;border:none;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.qr-full-canvas { background:#fff;padding:20px; }
.qr-full-label { font-size:13px;color:#666;font-weight:600; }

.scan-section { margin-top:6px; }
.scan-btn {
  width:100%;padding:11px;border-radius:12px;
  border:1.5px dashed var(--ib);background:var(--mi);
  cursor:pointer;text-align:center;
  font-weight:700;font-size:11px;color:var(--mm);margin-top:4px;min-height:46px;
  transition:background .15s, transform .15s var(--e-out);
}
.scan-btn:active { transform:scale(.97);background:var(--mh); }
.scan-or { text-align:center;font-size:9px;color:var(--mm);margin:5px 0; }
.paste-row { display:flex;gap:4px;margin-top:4px; }
.paste-row .scan-input { flex:1; }
.paste-btn {
  padding:8px 14px;border-radius:10px;border:none;
  background:var(--mi);color:var(--mt);font-weight:700;font-size:10px;
  cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;min-height:44px;
  transition:background .15s, transform .15s var(--e-out);
}
.paste-btn:active { transform:scale(.94);background:var(--mh); }
.scan-input { width:100%;padding:9px 12px;border-radius:10px;border:1.5px solid var(--ib);font-size:10px;font-family:'JetBrains Mono',monospace;background:var(--ig);color:var(--mt);transition:border-color .2s; }
.scan-input:focus { outline:none;border-color:var(--tp); }
.cam-overlay { display:none;position:fixed;inset:0;background:#000;z-index:2000;flex-direction:column; }
.cam-overlay.vis { display:flex; }
.cam-overlay video { flex:1;object-fit:cover; }
.cam-top { position:absolute;top:0;left:0;right:0;padding:max(16px,var(--sat)) 16px 16px;display:flex;justify-content:space-between;align-items:center;z-index:1; }
.cam-close { width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.5);border:none;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.cam-label { color:#fff;font-weight:700;font-size:14px; }
.cam-frame { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:240px;height:240px;border:2px solid rgba(255,255,255,.35);border-radius:18px; }

.style-card {
  border-radius:14px;padding:12px 10px;cursor:pointer;text-align:center;
  border:2px solid transparent;
  transition:border-color .25s var(--e-std), transform .2s var(--e-spring), background .25s;
  -webkit-tap-highlight-color:transparent;background:var(--mi);
}
.style-card:active { transform:scale(.93); }
.style-card.active { border-color:var(--tp); }
.style-card .style-preview { height:38px;border-radius:9px;margin-bottom:6px;overflow:hidden; }
.style-card .style-name { font-size:11px;font-weight:700;color:var(--tp); }
.style-card .style-desc { font-size:8px;color:var(--mm);margin-top:1px; }

.color-row { display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--mi);border-radius:12px;margin-bottom:5px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--e-out), background .15s;min-height:52px; }
.color-row:active { transform:scale(.97);background:var(--mh); }
.color-dot { width:26px;height:26px;border-radius:9px;flex-shrink:0;border:2px solid rgba(0,0,0,.08); }
.color-name { font-weight:700;font-size:13px;color:var(--mt);flex:1; }
.color-hex { font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--mm); }
.color-pick-wrap { padding:16px 0; }
.color-pick-subj { font-size:22px;font-weight:800;text-align:center;margin-bottom:14px; }
.color-presets { display:grid;grid-template-columns:repeat(5,1fr);gap:7px;justify-content:center;margin-bottom:16px; }
.color-preset { width:100%;aspect-ratio:1;border-radius:12px;cursor:pointer;border:3px solid transparent;transition:transform .18s var(--e-spring), border-color .15s; }
.color-preset:active { transform:scale(.82); }
.color-preset.sel { border-color:var(--tp);transform:scale(1.05); }
.color-hex-row { display:flex;gap:6px;align-items:center;margin-top:12px; }
.color-hex-input { flex:1;padding:11px 12px;border-radius:10px;border:1.5px solid var(--ib);font-size:13px;font-family:'JetBrains Mono',monospace;background:var(--ig);color:var(--mt);text-transform:uppercase;transition:border-color .2s; }
.color-hex-input:focus { outline:none;border-color:var(--tp); }
.color-preview { width:42px;height:42px;border-radius:12px;border:2px solid rgba(0,0,0,.08);transition:background .2s; }

/* ═══════════════════════════════════════════════
   TABLET / iPad  —  Modal als zentriertes Dialog-Fenster
   ═══════════════════════════════════════════════ */
@media (min-width:768px) {
  .ctn { padding:16px 20px 0; }
  .hdr { padding:10px 18px;margin-bottom:10px; }
  .wnav { font-size:15px;gap:14px; }
  .tt { border-radius:20px;padding:8px 8px 12px; }
  .dh,.sr { grid-template-columns:50px repeat(5,1fr);gap:4px; }
  .dh { margin-bottom:4px; }
  .dl { font-size:13px;padding:5px 0; }
  .sg { gap:4px; }
  .tc-num { font-size:18px; }
  .tc-time,.tc-time2 { font-size:8px; }
  .sl { border-radius:12px;padding:5px 6px; }
  .sl::before { width:4px; }
  .ls { font-size:14px; }
  .lt { font-size:10px; }
  .lr { font-size:9px; }
  .sd { width:17px;height:17px;font-size:8px;line-height:17px;top:3px;right:3px; }
  /* Modal: zentriertes Dialogfenster auf Tablet/Desktop */
  .mo.vis { align-items:center;padding:24px; }
  .mc {
    border-radius:20px;       /* alle Ecken abrunden */
    border-bottom:1px solid var(--border); /* unterer Rand wieder sichtbar */
    max-height:82vh;
    max-width:460px;
    padding-bottom:0;
    transform:none;           /* kein translateY mehr */
    box-shadow:0 8px 40px oklch(0 0 0/.18), 0 2px 8px oklch(0 0 0/.10);
  }
  .mc-head { border-radius:20px 20px 0 0; }
  .shh { display:none; }
  .mc-body { padding:0 22px 24px; }
  .color-presets { grid-template-columns:repeat(6,1fr); }
  /* Theme-overrides für Modal auf Desktop */
  body.theme-crystal .mc { border-radius:20px;border-bottom:1px solid oklch(1 0 0/.55); }
  body.theme-crystal .mc-head { border-radius:20px 20px 0 0; }
  body.theme-liquid .mc { border-radius:22px;border-bottom:1px solid oklch(1 0 0/.32); }
  body.theme-liquid .mc-head { border-radius:22px 22px 0 0; }
}
@media (min-width:1024px) {
  .ctn { max-width:1100px;padding:20px 28px 0; }
  .hdr { padding:12px 22px;margin-bottom:12px; }
  .wnav { font-size:16px;gap:16px; }
  .ls { font-size:15px; }
  .lt { font-size:11px; }
  .lr { font-size:10px; }
  .mc { max-width:520px; }
  .color-presets { grid-template-columns:repeat(7,1fr); }
}
@media (max-height:500px) and (orientation:landscape) {
  .ctn { padding:4px 8px 0; }
  .hdr { padding:6px 12px;margin-bottom:4px;border-radius:12px; }
  .trkr { margin-bottom:4px; }
  .tc-time,.tc-time2 { display:none !important; }
}

@keyframes shake {
  0%,100% { transform:translateX(0) rotate(0); }
  20%     { transform:translateX(-4px) rotate(-.5deg); }
  40%     { transform:translateX(4px)  rotate(.5deg); }
  60%     { transform:translateX(-3px) rotate(0); }
  80%     { transform:translateX(3px); }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(10px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes popIn {
  0%   { opacity:0; transform:scale(.75); }
  60%  { opacity:1; transform:scale(1.06); }
  100% { transform:scale(1); }
}
@keyframes appIn {
  from { opacity:0; transform:translateY(20px) scale(.96); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
.intro-active { animation:appIn .55s var(--e-snap) both; }