/* ---------- Der Terminbogen (Termin eintragen / bearbeiten) ----------
   Drei Karten - Wer, Wann, Was - statt einer langen Liste von Feldern.
   Jede Karte traegt oben ihr Zeichen in einer eigenen Farbe (aus dem Akzent
   gedreht wie in den Einstellungen), die Felder liegen darin eine Spur
   vertieft. Der Knopf zum Speichern klebt unten, damit er nach dem
   Ausfuellen ohne Suchen unter dem Daumen liegt. */
.modal.tf{padding-bottom:0;}
.tf-kopf{display:flex;align-items:center;gap:13px;margin:0 44px 18px 0;min-width:0;}
.tf-kopf .tb-blatt{width:50px;height:54px;border-radius:15px;}
.tf-kopf .tb-blatt b{font-size:22px;}
.tf-kopf-txt{min-width:0;}
.modal.tf .tf-kopf h3{margin:0;font-size:21px;line-height:1.15;}
.tf-tag{margin:3px 0 0;font-size:13px;line-height:1.35;color:var(--ink-soft);}

.tf-teil{
  --farbe:var(--accent);
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;padding:13px 14px 1px;margin:0 0 12px;
  box-shadow:inset 0 1px 0 var(--glanz), 0 1px 2px rgba(0,0,0,.04);
}
.tf-wer{--dreh:20;} .tf-wann{--dreh:130;} .tf-was{--dreh:250;} .tf-stand{--dreh:330;}
@supports (color: oklch(from red l c h)){
  .tf-teil{--farbe:oklch(from var(--accent) l calc(c + .06) calc(h + var(--dreh, 0)));}
}
.tf-titel{display:flex;align-items:center;gap:9px;margin:0 0 12px;min-width:0;}
.tf-zeichen{
  flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--farbe) 16%, transparent);
  color:var(--accent-deep);color:var(--farbe);
}
.tf-zeichen svg{width:16px;height:16px;}
.tf-wort{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);}
.tf-dauer{
  margin-left:auto;flex:none;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:4px 10px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-deep);
  background:color-mix(in srgb, var(--farbe) 14%, transparent);
}
.tf-dauer[hidden]{display:none;}

/* In der Karte liegen die Felder vertieft - auf dem Kartenton selbst
   verschwaenden sie sonst. */.tf-teil .field input,
.tf-teil .field select,
.tf-teil .field textarea,
.tf-teil .spick-toggle{
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ground) 55%, var(--surface));
}
.tf-teil .field input:focus, .tf-teil .field select:focus, .tf-teil .field textarea:focus{background:var(--surface);}
.tf-teil .nk-auf{margin-bottom:16px;text-align:left;}
.tf-teil .inspo-field{margin-bottom:14px;}

/* Von und bis stehen immer nebeneinander, dazwischen ein Strich - so liest
   es sich wie eine Spanne. */
.zeit-felder{flex-wrap:nowrap;gap:8px;align-items:flex-end;}
.zeit-felder .field{flex:1 1 0;}
.zf-strich{flex:none;align-self:flex-end;margin-bottom:30px;line-height:1;color:var(--ink-soft);font-weight:600;}

.tf-fuss{
  position:sticky;bottom:0;z-index:3;
  margin:0 -22px;padding:10px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to bottom, transparent, var(--ground) 34%);
}
.tf-fuss .btn{width:100%;min-height:52px;font-size:15px;gap:8px;}
.tf-fuss .btn svg{width:18px;height:18px;}
/* Nach dem Formular (Erinnerung, Loeschen) braucht der Bogen seinen Rand zurueck. */
.modal.tf > form ~ *:last-child{margin-bottom:calc(24px + env(safe-area-inset-bottom, 0px));}
@media (max-width:360px){
  .tf-teil{padding:12px 11px 1px;border-radius:18px;}
  .tf-kopf{gap:10px;}
  .modal.tf .tf-kopf h3{font-size:18px;}
  .tf-tag{font-size:12px;}
  .tf-kopf .tb-blatt{width:44px;height:48px;border-radius:13px;}
  .tf-kopf .tb-blatt b{font-size:19px;}
  .zeit-felder{gap:6px;}
  .zeit-felder .field input{padding-left:10px;padding-right:8px;}
}

/* ---------- Die Kundenliste (neues Gewand) ----------
   Jede Kundin ist eine eigene Kachel statt einer Zeile in einem Block - so
   hat Evi es gewollt: modern, uebersichtlich, dezent farbig. Die Kachel
   traegt von links einen Hauch ihrer Farbe (--kfarbe, dieselbe wie ihr
   Bild), der zur Mitte hin in den Kartenton auslaeuft. Wer aufpassen heisst,
   ist rot getoent statt mit einem Streifen links markiert. */
.cust-gruppe{display:flex;flex-direction:column;gap:7px;}
.cust-gruppe + .cust-gruppe{margin-top:16px;}
.cust-liste .ku-zeile,
.cust-gruppe > .ku-zeile:first-child,
.cust-buchstabe + .ku-zeile,
.cust-gruppe > .ku-zeile:last-child{
  border:1px solid var(--line);
  border-color:color-mix(in srgb, var(--kfarbe) 16%, var(--line));
  border-radius:18px;
  background:var(--surface);
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--kfarbe) 11%, var(--surface)) 0%,
    var(--surface) 58%);
  box-shadow:inset 0 1px 0 var(--glanz), 0 1px 2px rgba(0,0,0,.04), 0 6px 16px -12px rgba(0,0,0,.22);
  padding-right:10px;
  transition:transform var(--dur-schnell) var(--ease-feder), border-color var(--dur) var(--ease);
}
.cust-liste .ku-zeile:has(.ku-tipp:active){transform:scale(.985);transition-duration:.06s;}
.ku-tipp:active{opacity:1;}
.cust-liste .ku-zeile.warn,
.cust-gruppe > .ku-zeile.warn:last-child{
  border-color:color-mix(in srgb, var(--danger) 38%, transparent);
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--danger) 10%, var(--surface)) 0%,
    var(--surface) 62%);
  box-shadow:inset 0 1px 0 var(--glanz), 0 1px 2px rgba(0,0,0,.04), 0 6px 16px -12px rgba(0,0,0,.22);
}
.cust-liste .ku-zeile.warn .ku-tipp{padding-left:8px;}
.cust-liste .ku-tipp{padding:11px 4px 11px 9px;gap:12px;}
.cust-liste .ku-tipp .avatar{width:44px;height:44px;}
.cust-liste .ku-name{font-size:15px;font-weight:650;letter-spacing:-.01em;}
.ku-sub{display:flex;align-items:center;gap:5px;min-width:0;}
.ku-sub > span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.ku-sub svg{width:12px;height:12px;flex:none;opacity:.8;}
.ku-sub.ohne{opacity:.7;font-style:italic;}
/* Rechts: der naechste Termin als Pille mit einem Punkt in ihrer Farbe;
   die Schrift bleibt in --ink, damit sie in jedem Design lesbar ist. */
.cust-liste .ku-wann.kommt{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink);font-weight:700;padding:4px 10px 4px 8px;
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--kfarbe) 15%, var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kfarbe) 28%, transparent);
}
.cust-liste .ku-wann.kommt::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--kfarbe);
}
.cust-liste .ku-wann.leer{font-weight:500;opacity:.7;}
/* Die rechte Angabe bleibt ganz - nachgeben soll der Name. */
.cust-liste .ku-wann{flex:none;max-width:none;}
/* Der Buchstabe: eine kleine Glaspille mit der Anzahl daneben. */
.cust-buchstabe{
  display:flex;align-items:center;gap:7px;
  margin:0 0 1px 4px;padding:4px 10px 4px 11px;
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.cust-buchstabe b{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--accent-deep);}
.cb-zahl{font-size:10.5px;font-weight:700;letter-spacing:0;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.cb-zahl::before{content:"·";margin-right:6px;opacity:.6;}
/* Die Reihe oben bekommt denselben zarten Lichtfleck wie die Kacheln. */
.ku-kreise{
  background:var(--surface);
  background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 60%);
}
@media (max-width:360px){
  .cust-liste .ku-tipp{padding:10px 2px 10px 7px;gap:10px;}
  .cust-liste .ku-tipp .avatar{width:40px;height:40px;}
  .cust-liste .ku-name{font-size:14.5px;}
  .cust-liste .ku-zeile{padding-right:7px;}
  .cust-liste .ku-wann{font-size:11px;}
  .cust-liste .ku-wann.kommt{padding:3px 8px 3px 7px;gap:5px;}
}

/* ---------- Kunde anlegen / bearbeiten ----------
   Derselbe Bogen wie beim Termin (.tf-teil, .tf-fuss): Karten fuer Person,
   Kontakt, Adresse, Hinweise und Aufpassen, jede in ihrer gedrehten Farbe.
   Oben eine kleine Karte der Person, die beim Tippen mitwaechst - man sieht,
   wen man gerade anlegt und was schon da ist. */
.kf-person{--dreh:20;} .kf-kontakt{--dreh:130;} .kf-adresse{--dreh:190;} .kf-hinweis{--dreh:260;}
.tf-teil.kf-warn{--farbe:var(--danger);}
.tf-teil.kf-warn{
  border-color:color-mix(in srgb, var(--danger) 22%, var(--line));
}
.kf-held{
  display:flex;align-items:center;gap:14px;min-width:0;
  margin:0 0 16px;padding:14px 44px 14px 14px;border-radius:22px;
  background:var(--surface);
  background:radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 65%);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glanz), 0 6px 18px -14px rgba(0,0,0,.3);
}
/* Das Kreuz sitzt oben rechts in der Karte statt ueber ihr. */
.modal.kf{position:relative;}
.modal.kf .modal-close{position:absolute;float:none;top:34px;right:32px;z-index:2;}
.kf-bild{flex:none;display:flex;}
.kf-bild .avatar{width:64px;height:64px;}
.kf-neu{
  display:grid;place-items:center;
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--accent) 14%, var(--surface));
  color:var(--accent-deep);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 30%, transparent);
}
.kf-neu svg{width:26px;height:26px;}
.kf-neu b{font-size:22px;font-weight:700;letter-spacing:.02em;}
.kf-txt{flex:1;min-width:0;}
.kf-oben{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);}
.modal.kf .kf-name{
  margin:2px 0 0;font-size:21px;line-height:1.2;overflow-wrap:anywhere;
}
.modal.kf .kf-name.leer{color:var(--ink-soft);font-weight:500;}
.kf-unter{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft);}
.kf-stand{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.kf-stand span{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;padding:3px 8px 3px 7px;border-radius:999px;
  color:var(--ink-soft);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kf-stand span svg{width:11px;height:11px;flex:none;}
.kf-stand span.an{
  color:var(--ink);background:var(--ok-soft);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent);
}
.kf-stand span.an svg{color:var(--ok);}
.tf-teil #blockedFields[hidden]{display:none;}
@media (max-width:360px){
  .kf-held{gap:11px;padding:12px 40px 12px 12px;}
  .kf-bild .avatar{width:54px;height:54px;}
  .modal.kf .kf-name{font-size:19px;}
}

/* ---------- Galerie: Ordner, Kategorien, mehrere Bilder ----------
   Die Ordner stehen oben wie Alben in einer Reihe, die fuer sich zur Seite
   rollt: Deckblatt (das neueste Bild), Name, Anzahl. Der offene Ordner ist
   in --ink gefuellt wie ein gewaehlter Chip. */
.go-leiste{
  display:flex;gap:12px;overflow-x:auto;margin:0 -20px 14px;padding:4px 20px 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  scroll-padding-left:20px;
}
.go-leiste::-webkit-scrollbar{display:none;}
/* Kein Kasten um den Ordner - nur das Deckblatt und der Name darunter. Der
   offene traegt einen Ring in --ink, sein Name wird kraeftig. */
.go-karte{
  flex:none;width:74px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0;border:none;background:none;cursor:pointer;scroll-snap-align:start;
  font-family:var(--font-body);color:var(--ink-soft);text-align:center;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell) var(--ease-feder);
}
.go-karte:active{transform:scale(.94);transition-duration:.06s;}
.go-deck{
  position:relative;display:block;width:74px;height:74px;border-radius:20px;overflow:hidden;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow:0 0 0 1px var(--line), 0 8px 16px -12px color-mix(in srgb, var(--ink) 50%, transparent);
  transition:box-shadow var(--dur) var(--ease);
}
.go-deck img{width:100%;height:100%;object-fit:cover;display:block;}
.go-deck.leer{display:grid;place-items:center;color:var(--accent-deep);}
.go-deck.leer svg{width:24px;height:24px;}
/* Die Anzahl als Pille auf dem Deckblatt. */
.go-zahl{
  position:absolute;right:5px;bottom:5px;min-width:20px;padding:2px 6px;border-radius:999px;
  font-size:10.5px;font-weight:700;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums;
  color:var(--ink);background:var(--surface);
  box-shadow:0 2px 6px -2px rgba(0,0,0,.3);
}
/* Der Name darf zweizeilig stehen - abgeschnitten waere er nutzlos. */
.go-name{width:100%;font-size:11.5px;font-weight:600;line-height:1.2;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  overflow-wrap:break-word;hyphens:auto;}
.go-karte.on{color:var(--ink);}
.go-karte.on .go-name{font-weight:750;}
.go-karte.on .go-deck{box-shadow:0 0 0 2px var(--ground), 0 0 0 4px var(--ink);}
.go-neu .go-deck{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent);}
.go-neu .go-name{color:var(--accent-deep);}
@media (hover:hover) and (pointer:fine){
  .go-karte:not(.on):hover .go-deck{box-shadow:0 0 0 1.5px var(--accent), 0 8px 16px -12px color-mix(in srgb, var(--ink) 50%, transparent);}
}
/* Der offene Ordner hat einen Kopf mit Umbenennen und Loeschen. */
.go-kopf{
  display:flex;align-items:center;gap:10px;min-width:0;margin:0 0 12px;
  padding:10px 10px 10px 12px;border-radius:18px;
  background:var(--surface);
  background:linear-gradient(100deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 60%);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--glanz);
}
.go-kopf-z{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-deep);}
.go-kopf-z svg{width:18px;height:18px;}
.go-kopf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.go-kopf-txt strong{font-size:15px;font-weight:700;overflow-wrap:anywhere;}
.go-kopf-txt span{font-size:11.5px;color:var(--ink-soft);}
.go-kopf .btn{flex:none;}
.go-kopf .btn svg{width:14px;height:14px;}
.go-weg svg{width:17px;height:17px;}
@media (max-width:360px){ .go-kopf .btn{padding-left:9px;padding-right:9px;} }
/* Wird es eng (320 px, grosse Schrift), rutschen Umbenennen und Loeschen
   unter den Namen, statt ihn Buchstabe fuer Buchstabe umzubrechen. */
.go-kopf{flex-wrap:wrap;row-gap:8px;}
.go-kopf-txt{flex:1 1 140px;}
.go-kopf-txt strong{overflow-wrap:break-word;}
.go-kopf .btn{margin-left:auto;}
/* Der Knopf zu den Kategorien steht leise hinten in der Leiste. */
.st-kat-knopf{background:transparent;}
.st-kat-knopf .st-z{display:flex;color:var(--ink-soft);}
.st-kat-knopf .st-z svg{width:13px;height:13px;}

/* Der Bogen: Chips sind Optionsfelder. Der gewaehlte ist gefuellt wie ein
   gewaehlter Filter - dieselbe Sprache, kein neues Zeichen. */
.sg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}
.sg-chip{position:relative;cursor:pointer;}
.sg-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.sg-chip .st-z{display:flex;}
.sg-chip .st-z svg{width:13px;height:13px;}
.sg-chip.st-chip .st-z{color:var(--farbe);}
.cf-chip.sg-chip:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--ground);}
.cf-chip.sg-chip:has(input:checked) .st-z{color:inherit;}
.sg-chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.sg-plus{background:transparent;color:var(--accent-deep);}
.sg-plus svg{width:12px;height:12px;}
.sg-plus[hidden], .sg-neu-feld[hidden]{display:none;}
.sg-neu-feld{display:flex;gap:6px;flex:1 1 100%;min-width:0;}
.sg-neu-feld input{
  flex:1;min-width:0;font:inherit;font-size:14px;color:var(--ink);
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ground) 55%, var(--surface));
}
.sg-neu-feld input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.sg-neu-feld .btn{flex:none;}
.sg-ordner{--dreh:40;} .sg-kat{--dreh:160;} .sg-details{--dreh:280;} .sg-bilder{--dreh:100;}

/* Die Flaeche zum Auswaehlen: gross, damit sie der Daumen trifft. */
.sg-wahl{
  position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;
  margin:0 0 14px;padding:16px 14px;border-radius:16px;
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--farbe) 10%, var(--surface));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--farbe) 30%, transparent);
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-schnell) var(--ease-feder);
}
.sg-wahl:active{transform:scale(.985);transition-duration:.06s;}
.sg-wahl input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}
.sg-wahl-z{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--on-accent);}
.sg-wahl-z svg{width:20px;height:20px;}
.sg-wahl-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sg-wahl-txt strong{font-size:14.5px;color:var(--ink);}
.sg-wahl-txt small{font-size:11.5px;color:var(--ink-soft);}
.sg-wahl:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.sg-vorschau{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px;}
.sg-vorschau[hidden]{display:none;}
.sg-vorschau.eins{grid-template-columns:minmax(0,160px);justify-content:center;}
.sg-bild{position:relative;display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--surface-2);}
.sg-bild img{width:100%;height:100%;object-fit:cover;display:block;}
.sg-raus{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:none;
  display:grid;place-items:center;cursor:pointer;padding:0;
  background:rgba(0,0,0,.55);color:#fff;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.sg-raus svg{width:12px;height:12px;}

/* Die Kategorien im eigenen Dialog. */
.sk-liste{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;}
.sk-zeile{
  --farbe:var(--accent);
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:7px 8px 7px 8px;border-radius:14px;
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ground) 45%, var(--surface));
}
@supports (color: oklch(from red l c h)){
  .sk-zeile{--farbe:oklch(from var(--accent) l calc(c + .06) calc(h + var(--dreh, 0)));}
}
.sk-z{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-soft);
  background:color-mix(in srgb, var(--farbe) 16%, transparent);color:var(--farbe);}
.sk-z svg{width:15px;height:15px;}
.sk-name{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
input.sk-name{font:inherit;font-size:14px;font-weight:600;padding:6px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);}
input.sk-name:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.sk-zahl{flex:none;font-size:11px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.sk-fest{flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);opacity:.7;padding-right:4px;}
.sk-zeile .st-btn svg{width:16px;height:16px;}
.sk-leer{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
.sk-neu{display:flex;gap:6px;margin:0 0 14px;}
.sk-neu input{
  flex:1;min-width:0;font:inherit;font-size:14px;color:var(--ink);
  padding:9px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);
  background:color-mix(in srgb, var(--ground) 55%, var(--surface));
}
.sk-neu input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.sk-neu .btn{flex:none;}