:root{
  --navy:#0B1F33; --navy2:#13314f; --gold:var(--accent,#C9A24B); --paper:#F7F5F1; --ink:#1a2330;   /* Gold-Akzent aus geteilter Design-DNA (data-skin=judicario); Fallback = bisheriger Wert */
  --muted:#5f6a7a; --line:#e4e0d8; --card:#fff; --ok:#2e7d57; --warn:#8a6114;                      /* AA: muted 5,04:1 auf paper (war 4,23); warn-Text 4,94:1 auf warn-bg (war 2,94) */
  --gold-text:#87681f;                                                                             /* Gold als TEXT auf hellem Grund (4,79:1) — dekoratives Gold bleibt --gold */
  --r-lg:12px; --r-md:8px; --r-sm:6px;                                                             /* Design-DNA-Radii (statt 9-22px-Streuung) */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --ease-out:cubic-bezier(.22,1,.36,1);      /* Motion-Tokens wie Chipsi */
  --focus:#0B1F33;                                                                                  /* Fokus-Ring: hell Navy, dunkel Hellgold (Overrides unten) */
  --sans:'Spline Sans',system-ui,sans-serif; --mono:'Spline Sans Mono',monospace; --serif:'Spectral',Georgia,serif;
  --slate:#3a5273; --tint-navy:#eef1f6; --tint-ok:#eef6f1; --tint-warn:#fbf1e0; --tint-gold:#fef8ea;
  --drop-bg:#fffdf8; --band-bg:#fbf7ec; --ok-ink:#3a5a45; --ok-line:#cfe6da; --tint-ok-soft:#f0f4ef;
  --warnbox-bg:#fff7f3; --warnbox-line:#e7c9b8; --warnbox-ink:#7a4a2e; --warnbox-b:#5a3520;
  --track:#eceae3; --switch-off:#cfd6df; --code-bg:#f1f3f6; --row-even:#fafbfc; --qr-empty:#f1efe9;
  --chip-bg:#eef1ee; --card-soft:#fbfaf7; --nav-bg:rgba(255,255,255,.95);
}
/* Dark-Layer (Navy-Welt, kein warmes Schwarz — Judicario-Skin) */
@media (prefers-color-scheme: dark){ :root{
  --paper:#0E1622; --card:#182838; --ink:#E7EAEF; --muted:#97A3B4; --line:#263749;
  --navy:#0B1F33; --navy2:#1B3A5C; --ok:#6FBF8F; --warn:#D9B23F; --gold-text:#D3B368;
  --slate:#A8BAD4; --tint-navy:#1D2B3D; --tint-ok:#1D3328; --tint-warn:#33301D; --tint-gold:#2C2717;
  --drop-bg:#141F2D; --band-bg:#22303F; --ok-ink:#9FCDB2; --ok-line:#2F4A3E; --tint-ok-soft:#16281F;
  --warnbox-bg:#2A1E16; --warnbox-line:#4A342A; --warnbox-ink:#D9B49A; --warnbox-b:#E8CDB6;
  --track:#263749; --switch-off:#3A4A5E; --code-bg:#1D2B3D; --row-even:#14202E; --qr-empty:#1D2B3D;
  --chip-bg:#1D2B3D; --card-soft:#131E2B; --nav-bg:rgba(14,22,34,.94);
  --focus:#E0BF73;
} }
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap}   /* fokussierbar-unsichtbar (Datei-Inputs: Tastatur oeffnet den Picker) */                                                                    /* Bugfix: display:flex der Komponenten schlug das hidden-Attribut (leeres Gold-Band auf Home) */
:where(button,[tabindex],a,input,select,summary):focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.mast :focus-visible,.nav :focus-visible{outline-color:var(--gold)}
.opt:has(.vh:focus-visible){outline:2px solid var(--focus); outline-offset:2px}                     /* Datei-Input ist visually-hidden — Fokus auf der Karte spiegeln */
.switch input:focus-visible + .sl{box-shadow:0 0 0 3px var(--tint-gold); outline:2px solid var(--focus)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:var(--sans);color:var(--ink);background:#0a0f16}
.app{max-width:480px;margin:0 auto;min-height:100dvh;background:var(--paper);display:flex;flex-direction:column;position:relative;box-shadow:0 0 60px rgba(0,0,0,.4)}
/* masthead */
.mast{background:var(--navy);color:#fff;padding:max(8px,env(safe-area-inset-top)) 18px 12px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.kick{font:600 10px var(--mono);letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
.wm{font:600 22px var(--serif);letter-spacing:-.01em;display:flex;align-items:baseline}   /* Display-Serif wie Icon-S. und Chipsi/SafeTalk-Wortmarken */
.wm .dot{width:.30em;height:.30em;background:var(--gold);margin-left:.10em;display:inline-block;border-radius:1px}
.gear{background:rgba(255,255,255,.08);color:#cdd6e2;border:0;border-radius:var(--r-md);padding:7px 10px;font:600 12px var(--sans);cursor:pointer}
#installBtn{color:var(--gold)}
/* screens */
.screens{flex:1;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;overflow-y:auto;padding:18px 18px calc(86px + env(safe-area-inset-bottom));opacity:0;transform:translateX(12px);pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.screen.on{opacity:1;transform:none;pointer-events:auto}
h2{font:600 21px var(--serif);margin:.3em 0 .15em;color:var(--ink)}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 16px;line-height:1.45}
.backrow{display:flex;align-items:center;gap:8px;font:600 13px var(--sans);color:var(--ink);margin-bottom:10px;cursor:pointer}
.backrow .chip{margin-left:auto;font:600 10px var(--mono);background:var(--chip-bg);color:var(--muted);padding:4px 9px;border-radius:20px}
/* dropzone */
.drop{display:block;width:100%;border:2px dashed var(--gold);border-radius:var(--r-lg);background:var(--drop-bg);padding:28px 18px;text-align:center;cursor:pointer;font-family:inherit}
.drop:active{transform:scale(.99)}
.plus{width:54px;height:54px;border-radius:50%;background:var(--navy);color:#fff;font-size:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.drop .big{font:600 17px var(--sans);color:var(--ink)} .drop .small{color:var(--muted);font-size:12.5px;margin-top:6px}
.mailrow{margin:14px 0;text-align:center;font-size:12px;color:var(--muted)} .mailrow b{font-family:var(--mono);color:var(--ink)}
/* option rows */
.opt{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px;margin-bottom:10px;cursor:pointer}
.opt:active{transform:scale(.99);border-color:var(--gold)}
.opt .ic{font-size:21px;width:26px;text-align:center}.opt .t{font:600 15px var(--sans);color:var(--ink);display:block}.opt .d{font-size:12px;color:var(--muted);display:block}
.opt .goarr{margin-left:auto;color:var(--gold);font-size:18px}
/* tresor cards */
.tresor{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;cursor:pointer;position:relative}
.tresor:active{transform:scale(.99)}
.tresor .nm{font:600 16px var(--sans);color:var(--ink);display:flex;align-items:center;gap:8px}
.tresor .meta{color:var(--muted);font-size:12.5px;margin-top:5px;line-height:1.4}
.tresor .tag{position:absolute;top:14px;right:14px;font:600 10px var(--mono);padding:4px 9px;border-radius:20px}
.tag.share{background:var(--tint-ok);color:var(--ok)} .tag.zk{background:var(--tint-navy);color:var(--slate)}
.addtresor{border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:14px;text-align:center;color:var(--muted);font:600 13px var(--sans);cursor:pointer}.addtresor b{color:var(--gold-text)}
.loading{color:var(--muted);font-size:13px;padding:10px 0}
/* processing */
.bar{height:10px;background:var(--track);border-radius:8px;overflow:hidden;margin:10px 0 16px}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#e0bf73);transition:width .4s}
.recog{list-style:none;padding:0;margin:0}
.recog li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;opacity:0;transform:translateY(4px);transition:.35s}
.recog li.show{opacity:1;transform:none}.recog .c{color:var(--ok);font-weight:700}.recog .w{color:var(--warn);font-weight:700}
.assure{margin-top:16px;background:var(--tint-ok-soft);border-radius:var(--r-md);padding:12px 14px;font-size:12.5px;color:var(--ok-ink)}
/* ask */
.qsug{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.qsug button{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:8px 13px;font:500 12.5px var(--sans);color:var(--ink);cursor:pointer}
.qsug button:active{background:var(--tint-gold);border-color:var(--gold)}
.bubble{background:var(--tint-navy);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 4px;padding:11px 14px;margin:8px 0;font-size:14px;max-width:90%;margin-left:auto}
.ans{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm) var(--r-lg) var(--r-lg) var(--r-lg);padding:14px;margin:8px 0;font-family:var(--serif);font-size:14.5px;line-height:1.5}
.ans .big{font:600 20px var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.massg{display:inline-block;font:600 10px var(--mono);background:var(--tint-ok);color:var(--ok);padding:2px 7px;border-radius:12px;margin-left:6px;vertical-align:middle}
.massg.warn{background:var(--tint-warn);color:var(--warn)}
.massg.demo{background:var(--chip-bg);color:var(--muted)}
.ans .src{margin-top:9px;font-family:var(--mono);font-size:11px;color:var(--muted)}.ans .src b{color:var(--ok)}
.ans.think{color:var(--muted);font-style:italic;border-left-color:var(--line)}
.askbar{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 0 2px;background:linear-gradient(transparent,var(--paper) 22%)}
.askbar input{flex:1;border:1px solid var(--line);border-radius:22px;padding:12px 16px;font:400 14px var(--sans);background:var(--card);color:var(--ink)}
.askbar button{width:46px;border:0;border-radius:50%;background:var(--navy);color:#fff;font-size:16px;cursor:pointer}
/* share */
.person{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;margin-bottom:12px}
.person .nm{font:600 15px var(--sans);color:var(--ink)}
.ro{display:flex;gap:7px;margin-top:11px}
.role{flex:1;text-align:center;font:600 12px var(--sans);padding:8px 4px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--muted);background:var(--card);cursor:pointer}
.role.act{background:var(--navy);color:#fff;border-color:var(--navy)}
.exp{font-size:11.5px;color:var(--muted);margin-top:9px;font-family:var(--mono)}
.qr{width:128px;height:128px;margin:12px auto 4px;border-radius:var(--r-md);background:var(--card-soft);border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);font:500 10px var(--mono);text-align:center}
.qr.ready{border-style:solid;border-color:var(--ok-line);color:var(--ok);font-weight:600}

.invite{display:flex;gap:10px;margin-top:8px}
.sharelink{display:flex;align-items:center;gap:8px;margin-top:10px;background:var(--card-soft);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 11px}
.sharelink code{flex:1;font:500 11px var(--mono);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sharelink button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-sm);padding:6px 10px;font:600 11px var(--sans);cursor:pointer}
.invite .b{flex:1;text-align:center;border:1px solid var(--line);border-radius:var(--r-md);padding:11px;font:600 13px var(--sans);color:var(--ink);background:var(--card);cursor:pointer}
.note{text-align:center;font-size:12px;color:var(--muted);margin-top:14px}.note b{color:var(--slate)}
.cta{background:var(--navy);color:#fff;border:0;border-radius:var(--r-lg);padding:15px;width:100%;font:600 15px var(--sans);cursor:pointer;margin-top:8px}
.cta:active{background:var(--navy2)}.cta:disabled{opacity:.45}
.hint{margin-top:8px;color:var(--muted);font-size:11.5px;text-align:center}
.statusband{display:flex;flex-wrap:wrap;gap:5px 16px;align-items:baseline;background:var(--band-bg);border:1px solid var(--gold);border-radius:var(--r-lg);padding:10px 13px;margin:2px 0 14px;font:500 12px var(--sans);color:var(--ink)}
.statusband .ok{font-weight:700;color:var(--ok)}
.statusband .lbl{color:var(--muted);font-size:11px}
.statusband b{font-family:var(--mono);color:var(--ink)}
.statusband a{color:var(--gold-text);text-decoration:underline;text-underline-offset:2px}
.authhint{background:var(--card);border:1px dashed var(--gold);border-radius:var(--r-lg);padding:11px 13px;margin:2px 0 12px;font-size:12.5px;color:var(--ink);line-height:1.5}
.authhint .ttl{font-weight:600;color:var(--slate)}
.authhint b{color:var(--slate)}
.authhint button{margin-top:8px;background:var(--navy);color:#fff;border:0;border-radius:var(--r-md);padding:7px 14px;font:600 12px var(--sans);cursor:pointer}
.authhint.ok{border-style:solid;border-color:var(--ok-line);background:var(--tint-ok-soft)}
.setrow{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px 2px;border-bottom:1px solid var(--line)}
.setlabel .t{font:600 14px var(--sans);color:var(--ink)}
.setlabel .d{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
.switch{position:relative;display:inline-block;width:46px;height:27px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--switch-off);border-radius:27px;transition:.2s;cursor:pointer}
.switch .sl:before{content:"";position:absolute;height:21px;width:21px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .sl{background:var(--warn)}
.switch input:checked + .sl:before{transform:translateX(19px)}
.setwarn{background:var(--warnbox-bg);border:1px solid var(--warnbox-line);border-radius:var(--r-md);padding:11px 13px;margin-top:14px;font-size:12px;color:var(--warnbox-ink);line-height:1.5}
.setwarn b{color:var(--warnbox-b)}
/* Markdown im Antwort-Bubble (gerendert aus Dokument/KI-Antwort) */
.ans .mdh{font:600 13px var(--sans);color:var(--ink);margin:9px 0 4px}
.ans .mdp{margin:5px 0;line-height:1.5}
.ans .mdl{margin:5px 0 5px 18px;padding:0}.ans .mdl li{margin:2px 0;line-height:1.45}
.ans .mdtw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:7px 0}
.ans .mdt{border-collapse:collapse;width:100%;font-size:11px;background:var(--card)}
.ans .mdt th,.ans .mdt td{border:0;border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.ans .mdt th{background:transparent;color:var(--muted);font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--line)}
.ans .mdt th.num,.ans .mdt td.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}

.ans code{background:var(--code-bg);border-radius:4px;padding:1px 4px;font:500 11.5px var(--mono)}
/* nav */
.nav{position:sticky;bottom:0;height:calc(68px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--nav-bg);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;z-index:20}
.nav button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 11px var(--sans);color:var(--muted);cursor:pointer}
.nav button .i{font-size:19px}.nav button.act{color:var(--ink)}
/* toast */
@media (min-width:560px){
  body{background:radial-gradient(1200px 800px at 50% -10%,#12283f,#0a0f16 70%)}
  .app{min-height:calc(100dvh - 56px);margin:28px auto;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 0 1px rgba(201,162,75,.22)}
}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(16px);background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--r-lg);font-size:13px;opacity:0;transition:.3s;z-index:50;max-width:88%;text-align:center;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast.err{background:#8F3B24;color:#fff}
.toast.ok .ic{color:var(--ok)}
.toast.action{pointer-events:auto}
.toast button{margin-left:10px;background:var(--gold);color:var(--navy);border:0;border-radius:var(--r-sm);padding:6px 12px;font:600 12px var(--sans);cursor:pointer}
/* posteingang */
.tokin{width:100%;border:0;background:transparent;font:500 14px var(--mono);color:var(--ink);outline:none;letter-spacing:.02em}
.tokrow{cursor:text}.tokwrap{flex:1}
.inboxhead{font:500 12px var(--sans);color:var(--muted);margin-bottom:12px;line-height:1.7}
.inboxhead b{color:var(--ink)}.inboxhead a{color:var(--gold-text);text-decoration:underline;text-underline-offset:2px}
.mailitem{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm) var(--r-lg) var(--r-lg) var(--r-lg);padding:12px 14px;margin-bottom:10px}
.mailtop{display:flex;align-items:baseline;gap:8px}
.mailtop b{font:600 14.5px var(--sans);color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailts{font:500 11.5px var(--mono);color:var(--muted);flex-shrink:0}
.mailsub{font-size:13px;color:var(--ink);margin-top:3px;word-break:break-word}
.mailmeta{font:500 11.5px var(--mono);color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.04em}
.emptybox{text-align:center;color:var(--muted);font-size:15px;line-height:1.6;padding:36px 16px;background:var(--card-soft);border:1px dashed var(--line);border-radius:var(--r-lg);margin-top:4px}
.emptybox span{display:block;font-size:12.5px;margin-top:8px;color:var(--muted)}

@media (hover:hover){
  .opt:hover,.tresor:hover,.person:hover{border-color:var(--gold)}
  .qsug button:hover{background:var(--tint-gold);border-color:var(--gold)}
  .cta:hover{background:var(--navy2)}
  .role:hover{border-color:var(--gold)}
  .invite .b:hover,.sharelink button:hover{border-color:var(--gold)}
  .gear:hover{background:rgba(255,255,255,.16)}
  .nav button:hover{color:var(--ink)}
}
/* Cross-Link Safebox -> Chipsi (UX-Phase-0, 2026-07-03) */
.note a.xlink{color:var(--slate);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold)}
.note a.xlink:hover{color:var(--ink)}