/* CodeBox — Oberflaeche im Zuschnitt von Proton Authenticator:
   dunkler Grund mit Lila-Akzent, Kartenliste, grosser Code, darunter der
   naechste Code, rechts der Restzeit-Ring. */

:root {
  --grund: #16141c;
  --grund-2: #1d1a26;
  --karte: rgba(255, 255, 255, .055);
  --karte-rand: rgba(255, 255, 255, .085);
  --karte-hell: rgba(255, 255, 255, .09);
  --schrift: #f4f3f8;
  --schrift-matt: #9b97a8;
  --schrift-still: #6f6b7e;
  --akzent: #6d4aff;
  --akzent-hell: #a48bff;
  --gefahr: #ec5f5f;
  --warnung: #e2b04a;
  --gut: #4ad6a0;
  --rund: 16px;
  --abstand: 16px;
  --leiste-hoehe: 116px;
}

* { box-sizing: border-box; }

html { background: var(--grund); }

body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  color: var(--schrift);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* Zwei weiche Lichtkegel auf dunklem Grund — ohne Bilddatei, damit die
     Seite nichts nachladen muss. */
  background:
    radial-gradient(90vw 60vh at 12% -10%, rgba(109, 74, 255, .28), transparent 62%),
    radial-gradient(70vw 50vh at 100% 8%, rgba(109, 74, 255, .14), transparent 60%),
    var(--grund);
  background-attachment: fixed;
}

.symbolvorrat { display: none; }
.versteckt { display: none; }
.symbol { width: 22px; height: 22px; display: block; }
.symbol--gross { width: 26px; height: 26px; }

/* ---------- Kopfleiste ---------- */

.leiste {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) var(--abstand) 12px;
  background: linear-gradient(to bottom, rgba(22, 20, 28, .96), rgba(22, 20, 28, .82));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.leiste__oben { display: flex; align-items: center; gap: 10px; }
.leiste__name { font-size: 21px; font-weight: 700; letter-spacing: -.2px; flex: 1; }
.leiste__knoepfe { display: flex; gap: 8px; }

.rundknopf {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--karte-rand);
  background: var(--karte);
  color: var(--schrift-matt);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rundknopf:hover { background: var(--karte-hell); color: var(--schrift); }
.rundknopf:active { transform: scale(.94); }

.suchfeld {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--karte-rand);
  background: var(--karte);
}
.suchfeld__lupe { color: var(--schrift-still); flex: none; width: 18px; height: 18px; }
.suchfeld__eingabe {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  outline: none;
}
.suchfeld__eingabe::placeholder { color: var(--schrift-still); }
.suchfeld__eingabe::-webkit-search-cancel-button { filter: invert(.6); }

/* ---------- Liste ---------- */

.haupt {
  padding: 14px var(--abstand) calc(env(safe-area-inset-bottom) + 96px);
}

.eintraege { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.eintrag {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--rund);
  border: 1px solid var(--karte-rand);
  background: var(--karte);
  transition: background .15s, transform .12s, opacity .15s;
}
.eintrag:hover { background: var(--karte-hell); }
.eintrag--gezogen { opacity: .45; }
.eintrag--ziel { box-shadow: inset 0 2px 0 var(--akzent-hell); }

.zeichen {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  color: hsl(var(--ton, 260) 85% 88%);
  background: hsl(var(--ton, 260) 55% 22%);
  border: 1px solid hsl(var(--ton, 260) 60% 34%);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.zeichen:active { cursor: grabbing; }

.eintrag__mitte { min-width: 0; display: grid; gap: 1px; cursor: pointer; }

.eintrag__kopf {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.eintrag__aussteller {
  font-size: 14px;
  font-weight: 600;
  color: var(--schrift);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eintrag__konto {
  font-size: 13px;
  color: var(--schrift-matt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eintrag__code {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--schrift);
}
.eintrag--knapp .eintrag__code { color: var(--akzent-hell); }

.eintrag__naechster {
  font-size: 12px;
  color: var(--schrift-still);
  font-variant-numeric: tabular-nums;
  letter-spacing: .6px;
}
.eintrag__naechster b { font-weight: 600; color: var(--schrift-matt); }

.eintrag__rechts { display: flex; align-items: center; gap: 4px; }

/* Restzeit-Ring: --anteil geht von 1 auf 0. */
.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
}
.ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--akzent) calc(var(--anteil, 1) * 360deg), rgba(255, 255, 255, .1) 0);
  mask: radial-gradient(circle, transparent 13.5px, #000 14.5px);
  -webkit-mask: radial-gradient(circle, transparent 13.5px, #000 14.5px);
  transition: none;
}
.ring__zahl {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--schrift-matt);
}
.ring--knapp::before {
  background: conic-gradient(var(--gefahr) calc(var(--anteil, 1) * 360deg), rgba(255, 255, 255, .1) 0);
}
.ring--knapp .ring__zahl { color: var(--gefahr); }

.eintrag__stern,
.eintrag__menue {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--schrift-still);
  cursor: pointer;
}
.eintrag__stern:hover, .eintrag__menue:hover { background: var(--karte-hell); color: var(--schrift); }
.eintrag__stern--an { color: var(--warnung); }

.eintrag__zaehlknopf {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--karte-rand);
  background: var(--karte);
  color: var(--schrift-matt);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.leer { display: grid; gap: 8px; place-items: center; padding: 64px 12px; text-align: center; }
.leer__zeichen { width: 56px; height: 56px; color: var(--schrift-still); }
.leer__text { margin: 0; color: var(--schrift-matt); }
.leer__text--klein { font-size: 13px; color: var(--schrift-still); max-width: 34ch; }

/* ---------- Plus-Knopf ---------- */

.plusknopf {
  position: fixed;
  right: var(--abstand);
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(109, 74, 255, .45);
  transition: transform .12s, box-shadow .15s;
}
.plusknopf:hover { box-shadow: 0 12px 34px rgba(109, 74, 255, .6); }
.plusknopf:active { transform: scale(.93); }

/* ---------- Sperrschirm und Karten ---------- */

.sperre { display: grid; place-items: center; min-height: 100dvh; padding: var(--abstand); }

.karte {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 26px 22px;
  border-radius: 22px;
  border: 1px solid var(--karte-rand);
  background: rgba(29, 26, 38, .72);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.karte__zeichen {
  width: 56px;
  height: 56px;
  margin: 0 auto 2px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(109, 74, 255, .18);
  border: 1px solid rgba(109, 74, 255, .35);
  color: var(--akzent-hell);
}
.karte__zeichen .symbol { width: 27px; height: 27px; }

.karte__titel { margin: 0; font-size: 22px; font-weight: 700; text-align: center; letter-spacing: -.2px; }
.karte__text { margin: 0; color: var(--schrift-matt); font-size: 14px; text-align: center; }
.karte__text--warnung { color: var(--warnung); }
.karte__fussnote { margin: 0; color: var(--schrift-still); font-size: 12px; text-align: center; }

.ampel { margin: 0; font-size: 13px; color: var(--schrift-matt); min-height: 1.2em; text-align: center; }
.ampel--0, .ampel--1 { color: var(--gefahr); }
.ampel--2 { color: var(--warnung); }
.ampel--3 { color: var(--gut); }

/* ---------- Felder und Knoepfe ---------- */

.feldzeile { display: grid; gap: 6px; }
.feldzeile__beschriftung { font-size: 13px; color: var(--schrift-matt); }
.feldzeile__eingabe { display: flex; gap: 8px; align-items: center; }
.feldzeile__eingabe .feld { flex: 1; min-width: 0; }
.feldzeile__hinweis { margin: 0; font-size: 12px; color: var(--schrift-still); }

.feld {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--karte-rand);
  background: rgba(0, 0, 0, .25);
  color: inherit;
  font: inherit;
}
.feld--geheim { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .5px; }
.feld:focus-visible, .suchfeld__eingabe:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
select.feld { appearance: none; }
select.feld option { background: var(--grund-2); }

.knopf {
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--karte-rand);
  background: var(--karte);
  color: var(--schrift);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.knopf:hover { background: var(--karte-hell); }
.knopf--haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.knopf--haupt:hover { background: #7d5cff; }
.knopf--gefahr { border-color: rgba(236, 95, 95, .45); color: var(--gefahr); background: rgba(236, 95, 95, .08); }
.knopf--klein { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.knopf:disabled { opacity: .45; cursor: default; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Dialoge ---------- */

.dialog {
  border: 1px solid var(--karte-rand);
  border-radius: 22px;
  background: var(--grund-2);
  color: var(--schrift);
  padding: 0;
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.dialog--breit { width: min(560px, calc(100vw - 24px)); }
.dialog::backdrop { background: rgba(9, 8, 12, .72); backdrop-filter: blur(3px); }
.dialog__inhalt { display: grid; gap: 14px; padding: 22px; overflow: auto; }
.dialog__titel { margin: 0; font-size: 19px; font-weight: 700; }
.dialog__text { margin: 0; font-size: 14px; color: var(--schrift-matt); }
.dialog__text--klein { font-size: 12px; color: var(--schrift-still); }
.dialog__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.dialog__knoepfe--links { justify-content: flex-start; }
.dialog--scanner .scanner__bild {
  width: 100%;
  border-radius: 14px;
  background: #000;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.mehr { border-top: 1px solid var(--karte-rand); padding-top: 12px; display: grid; gap: 12px; }
.mehr summary { cursor: pointer; color: var(--schrift-matt); font-size: 14px; }

/* ---------- Einstellungen ---------- */

.abschnitt { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--karte-rand); }
.abschnitt__titel { margin: 0; font-size: 15px; font-weight: 600; }
.abschnitt__text { margin: 0; font-size: 13px; color: var(--schrift-matt); }
.abschnitt__text--warnung { color: var(--warnung); }

.schalter__zeile { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.schalter__kasten { width: 20px; height: 20px; accent-color: var(--akzent); flex: none; }

.kenn { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: 13px; }
.kenn dt { color: var(--schrift-matt); }
.kenn dd { margin: 0; display: flex; gap: 8px; align-items: center; }

.fussnote { margin: 0; font-size: 12px; color: var(--schrift-still); text-align: center; }

/* ---------- Hinweise ---------- */

.hinweise {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 90px);
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 0 12px;
  pointer-events: none;
  z-index: 20;
}
.hinweis {
  max-width: 460px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--karte-rand);
  background: rgba(29, 26, 38, .96);
  backdrop-filter: blur(10px);
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: opacity .3s, transform .3s;
}
.hinweis--gut { border-color: rgba(74, 214, 160, .5); }
.hinweis--fehler { border-color: rgba(236, 95, 95, .5); color: #ff9c9c; }
.hinweis--weg { opacity: 0; transform: translateY(6px); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Schmale Geraete: Code etwas kleiner, damit nichts umbricht. */
@media (max-width: 380px) {
  .eintrag { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 12px; }
  .zeichen { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
  .eintrag__code { font-size: 25px; letter-spacing: 1.5px; }
}