/* VaultGuard Designs: klassisch, pixel, futur, cyber, pastell, maler
   Alle Designs sind Variablen auf [data-theme]. Besondere Effekte stehen am Ende. */

@font-face{font-family:'Press Start 2P';src:url(fonts/pressstart.woff2) format('woff2');font-display:swap}
@font-face{font-family:'VT323';src:url(fonts/vt323.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Orbitron';font-weight:500;src:url(fonts/orbitron-500.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Orbitron';font-weight:700;src:url(fonts/orbitron-700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Rajdhani';font-weight:500;src:url(fonts/rajdhani-500.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Rajdhani';font-weight:700;src:url(fonts/rajdhani-700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Share Tech Mono';src:url(fonts/sharetech.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Nunito';font-weight:600;src:url(fonts/nunito-600.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Nunito';font-weight:800;src:url(fonts/nunito-800.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Caveat';font-weight:700;src:url(fonts/caveat-700.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Lora';font-weight:500;src:url(fonts/lora-500.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Lora';font-weight:600;src:url(fonts/lora-600.woff2) format('woff2');font-display:swap}

/* ================= Designs (Variablen) ================= */

/* Klassisch: dunkel und schlicht */
:root,[data-theme="klassisch"]{
  --bg:#0f1720;--bg2:#0c131b;--card:#18232f;--card2:#1e2d3d;--line:#26364a;
  --txt:#e8eef5;--mut:#8aa0b6;--acc:#3ea6ff;--acc2:#3ea6ff;--ink:#04121f;--red:#ff5d6c;
  --inp:#101a24;--avbg:#21405f;--avfg:#3ea6ff;--veil:#0009;
  --r:12px;--r2:10px;--bw:1px;--cb:transparent;--shadow:none;--btn-shadow:none;
  --clip:none;--clip-s:none;--key-r:50%;--dot-r:50%;
  --f-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--f-head:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs:16px;--brand-fs:26px;--h2-fs:19px;--key-fs:26px;--head-ls:.5px;--head-tt:none;--head-fw:700;
  --bgimg:none;--bgsize:auto;--cs:dark;--glow:none;--tbg:#000d;--tfg:#fff;--ins:rgba(0,0,0,.35);
  --lga-fill:#3ea6ff;--lga-stroke:none;--lga-sw:0;--lgb-fill:#0f1720;--lg-filter:none;--d-std:block;--d-px:none;
  --g1:#3ea6ff;--g2:#3ea6ff;
}

/* Pixel: 8 Bit Retro */
[data-theme="pixel"]{
  --bg:#1a1c2c;--bg2:#12131f;--card:#333c57;--card2:#3f4a6b;--line:#566c86;
  --txt:#f4f4f4;--mut:#94b0c2;--acc:#ffcd75;--acc2:#ef7d57;--ink:#1a1c2c;--red:#ef7d57;
  --inp:#222a44;--avbg:#3b5dc9;--avfg:#73eff7;--veil:#0a0b14cc;
  --r:0;--r2:0;--bw:4px;--cb:#0d0e1a;
  --shadow:inset -4px -4px 0 rgba(0,0,0,.35),inset 4px 4px 0 rgba(255,255,255,.12);
  --btn-shadow:inset -4px -4px 0 rgba(0,0,0,.3),inset 4px 4px 0 rgba(255,255,255,.35);
  --clip:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  --clip-s:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  --key-r:0;--dot-r:0;
  --f-body:'VT323',ui-monospace,monospace;--f-head:'Press Start 2P',ui-monospace,monospace;
  --fs:22px;--brand-fs:15px;--h2-fs:13px;--key-fs:32px;--head-ls:0;--head-tt:none;--head-fw:400;
  --bgimg:linear-gradient(rgba(255,255,255,.045) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.045) 2px,transparent 2px);
  --bgsize:16px 16px,16px 16px;--cs:dark;--glow:none;
  --lgb-fill:#1a1c2c;--lg-filter:none;--d-std:none;--d-px:block;
  --g1:#41a6f6;--g2:#73eff7;
}

/* Futuristisch: Glas und Hologramm */
[data-theme="futur"]{
  --bg:#050a14;--bg2:#060e1cd9;--card:#5ee7ff0f;--card2:#5ee7ff1f;--line:#5ee7ff47;
  --txt:#e4f7ff;--mut:#7ea6bf;--acc:#5ee7ff;--acc2:#9b8cff;--ink:#021018;--red:#ff6b8a;
  --inp:#5ee7ff0d;--avbg:#5ee7ff1a;--avfg:#5ee7ff;--veil:#02060ccc;
  --r:16px;--r2:10px;--bw:1px;--cb:var(--line);
  --shadow:0 0 26px #5ee7ff14,inset 0 0 20px #5ee7ff0d;--btn-shadow:0 0 18px #5ee7ff55;
  --clip:none;--clip-s:none;--key-r:50%;--dot-r:50%;
  --f-body:'Rajdhani',system-ui,sans-serif;--f-head:'Orbitron',system-ui,sans-serif;
  --fs:19px;--brand-fs:21px;--h2-fs:17px;--key-fs:26px;--head-ls:3px;--head-tt:uppercase;--head-fw:700;
  --bgimg:radial-gradient(900px 520px at 50% -12%,#5ee7ff38,transparent 62%),radial-gradient(700px 520px at 105% 108%,#9b8cff38,transparent 60%),linear-gradient(#5ee7ff0d 1px,transparent 1px),linear-gradient(90deg,#5ee7ff0d 1px,transparent 1px);
  --bgsize:auto,auto,36px 36px,36px 36px;--cs:dark;--glow:0 0 14px #5ee7ffb3;
  --lga-fill:none;--lga-stroke:#5ee7ff;--lga-sw:2.2;--lgb-fill:#5ee7ff;--lg-filter:drop-shadow(0 0 6px #5ee7ff);--d-std:block;--d-px:none;
  --g1:#5ee7ff;--g2:#9b8cff;
  --fx:#5ee7ff;--fx35:#5ee7ff59;--fx13:#5ee7ff22;--fx50:#5ee7ff80;
}

/* Cyberpunk: Neon und Glitch */
[data-theme="cyber"]{
  --bg:#0a0012;--bg2:#0d0019;--card:#170626;--card2:#220a38;--line:#3a1260;
  --txt:#f5f0ff;--mut:#a587cc;--acc:#f9f002;--acc2:#ff2a6d;--ink:#0a0012;--red:#ff2a6d;
  --inp:#12041f;--avbg:#ff2a6d;--avfg:#0a0012;--veil:#05000acc;
  --r:0;--r2:0;--bw:2px;--cb:var(--line);
  --shadow:none;--btn-shadow:none;
  --clip:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  --clip-s:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  --key-r:0;--dot-r:0;
  --f-body:'Share Tech Mono',ui-monospace,monospace;--f-head:'Rajdhani',system-ui,sans-serif;
  --fs:15px;--brand-fs:30px;--h2-fs:22px;--key-fs:28px;--head-ls:3px;--head-tt:uppercase;--head-fw:700;
  --bgimg:radial-gradient(620px 420px at 0% 0%,#ff2a6d47,transparent 62%),radial-gradient(620px 520px at 100% 100%,#05d9e838,transparent 62%),repeating-linear-gradient(0deg,#ffffff09 0 1px,transparent 1px 3px);
  --bgsize:auto,auto,auto;--cs:dark;--glow:2px 0 #ff2a6d,-2px 0 #05d9e8;
  --lga-fill:#ff2a6d;--lga-stroke:none;--lga-sw:0;--lgb-fill:#0a0012;--lg-filter:drop-shadow(0 0 7px #ff2a6d);--d-std:block;--d-px:none;
  --g1:#ff2a6d;--g2:#05d9e8;
}

/* Pastell: sanft und hell */
[data-theme="pastell"]{
  --bg:#fff6f1;--bg2:#ffffffd9;--card:#ffffff;--card2:#fff0f6;--line:#f3dfe8;
  --txt:#5a4a68;--mut:#a393b0;--acc:#b9a6f5;--acc2:#f5a6c6;--ink:#3d2c5a;--red:#e8798f;
  --inp:#fffaf7;--avbg:#e4dcff;--avfg:#6a54b8;--veil:#5a4a6855;
  --r:24px;--r2:16px;--bw:0px;--cb:transparent;
  --shadow:0 8px 24px #a58cbe2e;--btn-shadow:0 6px 16px #b9a6f566;
  --clip:none;--clip-s:none;--key-r:50%;--dot-r:50%;
  --f-body:'Nunito',system-ui,sans-serif;--f-head:'Nunito',system-ui,sans-serif;
  --fs:16px;--brand-fs:26px;--h2-fs:20px;--key-fs:26px;--head-ls:.3px;--head-tt:none;--head-fw:800;
  --bgimg:radial-gradient(420px 320px at 8% 6%,#c8f0deda,transparent 70%),radial-gradient(380px 300px at 100% 22%,#e4dcffe6,transparent 70%),radial-gradient(420px 360px at 0% 100%,#ffe0cfe6,transparent 70%),radial-gradient(360px 300px at 100% 100%,#d4ebffe6,transparent 70%);
  --bgsize:auto,auto,auto,auto;--cs:light;--glow:none;
  --lga-fill:url(#lgGrad);--lga-stroke:none;--lga-sw:0;--lgb-fill:#fffaf7;--lg-filter:drop-shadow(0 4px 6px #b9a6f566);--d-std:block;--d-px:none;
  --g1:#f5a6c6;--g2:#b9a6f5;
  --mint:#c8f0de;--peach:#ffe0cf;--lav:#e4dcff;--sky:#d4ebff;--pink:#ffd9e6;
  --mint-k:#2f7a5b;--peach-k:#b2603a;--lav-k:#6a54b8;--sky-k:#3f7bb0;--pink-k:#b84a73;
  --secbg:#f6eefa;--dotb:#d9c9e8;--psh:#a58cbe2e;--hsh:#a58cbe22;--tbg:#5a4a68ee;--tfg:#fff;
}

/* Malerisch: Aquarell auf Papier */
[data-theme="maler"]{
  --bg:#f2e8d5;--bg2:#f7efdee6;--card:#fffbf0c7;--card2:#fff6deF2;--line:#3d2f2873;
  --txt:#3d2f28;--mut:#8a7766;--acc:#3f7f86;--acc2:#c9604f;--ink:#fffaf0;--red:#b8473a;
  --inp:#fffbf0cc;--avbg:#c9604f;--avfg:#fffaf0;--veil:#3d2f2866;
  --r:14px 26px 16px 30px/28px 14px 30px 16px;--r2:10px 18px 12px 20px/18px 10px 20px 12px;--bw:2px;--cb:#3d2f2880;
  --shadow:none;--btn-shadow:none;
  --clip:none;--clip-s:none;--key-r:46% 54% 50% 50%/52% 48% 52% 48%;--dot-r:46% 54% 50% 50%/52% 48% 52% 48%;
  --f-body:'Lora',Georgia,serif;--f-head:'Caveat','Segoe Script',cursive;
  --fs:16px;--brand-fs:40px;--h2-fs:30px;--key-fs:34px;--head-ls:.5px;--head-tt:none;--head-fw:700;
  --bgimg:radial-gradient(520px 380px at 0% 0%,#7fb7b08c,transparent 70%),radial-gradient(460px 360px at 100% 18%,#e8a5a080,transparent 70%),radial-gradient(540px 420px at 12% 106%,#e3b86a80,transparent 70%),radial-gradient(430px 370px at 100% 100%,#7b8fc473,transparent 70%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --bgsize:auto,auto,auto,auto,160px 160px;--cs:light;--glow:none;
  --lga-fill:url(#lgGrad);--lga-stroke:#3d2f28;--lga-sw:1.4;--lgb-fill:#fffaf0;--lg-filter:none;--d-std:block;--d-px:none;
  --g1:#3f7f86;--g2:#7b8fc4;
  --hl:#ffffff8c;--hl2:#ffffffa6;--secbg:#fffbf0e6;--pd1:#a9d2cc;--pd2:#f0bdb8;--pd3:#efd49c;--pd4:#b4bfe2;--sheetbg:#f6eedcf5;--tbg:#3d2f28f0;--tfg:#fff;
}

/* ================= Grundlayout ================= */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overscroll-behavior:none}
html{background:var(--bg);color-scheme:var(--cs)}
body{max-width:520px;margin:0 auto;position:relative;overflow:hidden;color:var(--txt);font-family:var(--f-body);font-size:var(--fs);background:var(--bgimg),var(--bg);background-size:var(--bgsize);image-rendering:auto}
:is([data-theme="pixel"],[data-theme="quest"]) body{image-rendering:pixelated}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:var(--txt);background:var(--inp);border:var(--bw) solid var(--line);border-radius:var(--r2);clip-path:var(--clip-s);padding:12px;width:100%}
input::placeholder,textarea::placeholder{color:var(--mut)}
input:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:0;border-color:transparent}
.hide{display:none!important}
svg.lg{width:44px;height:44px;filter:var(--lg-filter);overflow:visible}
.lg-std{display:var(--d-std)}
.lg-px{display:var(--d-px);shape-rendering:crispEdges}
.lga{fill:var(--lga-fill);stroke:var(--lga-stroke);stroke-width:var(--lga-sw)}
.lgb{fill:var(--lgb-fill)}
.pxo{fill:var(--pxo,#73eff7)}.pxf{fill:var(--pxf,#41a6f6)}.pxk{fill:var(--pxk,#1a1c2c)}

/* PIN-Bildschirm */
#lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:env(safe-area-inset-top) 20px env(safe-area-inset-bottom);gap:10px}
.brand{display:flex;align-items:center;gap:12px}
.brand span{font-family:var(--f-head);font-weight:var(--head-fw);font-size:var(--brand-fs);letter-spacing:var(--head-ls);text-transform:var(--head-tt);text-shadow:var(--glow);line-height:1.1}
#lockMsg{color:var(--mut);min-height:1.4em;margin-top:8px;text-align:center}
#lockMsg.err{color:var(--red)}
#dots{display:flex;gap:12px;margin:10px 0 18px}
#dots i{width:15px;height:15px;border-radius:var(--dot-r);border:2px solid var(--mut);transition:background .12s}
#dots i.on{background:var(--acc);border-color:var(--acc);box-shadow:var(--btn-shadow)}
#pad{display:grid;grid-template-columns:repeat(3,76px);gap:14px}
#pad button{--fill:var(--card);height:64px;border-radius:var(--key-r);clip-path:var(--clip-s);background:var(--fill);border:var(--bw) solid var(--cb);box-shadow:var(--shadow);font-family:var(--f-head);font-weight:var(--head-fw);font-size:var(--key-fs)}
#pad button:active{background:var(--card2);transform:translateY(2px)}
#pad .ghost{background:none;border-color:transparent;box-shadow:none;font-size:20px;color:var(--mut)}

/* Hauptansicht */
#main{position:absolute;inset:0;display:flex;flex-direction:column}
header{position:relative;padding:calc(env(safe-area-inset-top) + 14px) 56px 12px;border-bottom:var(--bw) solid var(--line);background:var(--bg2);display:flex;justify-content:center;min-height:64px}
[data-theme="klassisch"] header{border-bottom-width:1px}
[data-theme="pastell"] header{border-bottom:0}
.brand svg.lg{width:40px;height:40px}
#themeBtn{position:absolute;right:10px;bottom:10px;width:42px;height:42px;display:grid;place-items:center;color:var(--mut);border-radius:var(--r2)}
#themeBtn:active{background:var(--card)}
#themeBtn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#list{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.item{--fill:var(--card);display:flex;align-items:center;gap:12px;background:var(--fill);border:var(--bw) solid var(--cb);border-radius:var(--r);clip-path:var(--clip);box-shadow:var(--shadow);padding:12px 14px;text-align:left;width:100%}
.item:active{background:var(--card2)}
.item .av{width:40px;height:40px;border-radius:var(--r2);background:var(--avbg);display:grid;place-items:center;font-family:var(--f-head);font-weight:var(--head-fw);color:var(--avfg);flex:none}
.item .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .u{color:var(--mut);font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .tx{flex:1;min-width:0}
.item .x{color:var(--red);font-size:22px;padding:0 6px}
.empty{color:var(--mut);text-align:center;margin-top:50px}
nav{display:grid;grid-template-columns:repeat(5,1fr);border-top:var(--bw) solid var(--line);background:var(--bg2);padding:6px 2px calc(env(safe-area-inset-bottom) + 6px)}
[data-theme="klassisch"] nav{border-top-width:1px}
[data-theme="pastell"] nav{border-top:0}
nav button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:.68em;color:var(--mut);border-radius:var(--r2);letter-spacing:var(--head-ls)}
nav button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav button.act{color:var(--red)}
nav button:active{background:var(--card);color:var(--acc)}

/* Sheet */
#veil{position:absolute;inset:0;background:var(--veil);display:flex;align-items:flex-end;z-index:5}
#sheet{background:var(--bg);border-top:var(--bw) solid var(--line);border-radius:18px 18px 0 0;width:100%;max-height:88%;overflow-y:auto;padding:18px 16px calc(env(safe-area-inset-bottom) + 18px)}
#sheet h2{margin:0 0 14px;font-family:var(--f-head);font-weight:var(--head-fw);font-size:var(--h2-fs);letter-spacing:var(--head-ls);text-transform:var(--head-tt);text-shadow:var(--glow)}
label{display:block;color:var(--mut);font-size:.82em;margin:12px 0 5px}
.row{display:flex;gap:8px}
.btn{--fill:var(--acc);background:var(--fill);color:var(--ink);font-weight:700;border-radius:var(--r2);clip-path:var(--clip-s);padding:12px 16px;border:var(--bw) solid var(--cb);box-shadow:var(--btn-shadow);letter-spacing:var(--head-ls)}
.btn.sec{--fill:var(--card);color:var(--txt);font-weight:500;box-shadow:var(--shadow)}
.btn.danger{--fill:var(--red);color:#fff;box-shadow:var(--btn-shadow)}
.btn.sm{padding:10px 12px;flex:none}
.btn:active{filter:brightness(1.12);transform:translateY(1px)}
.actions{display:flex;gap:8px;margin-top:18px}
.actions .btn{flex:1}
.rest{--fill:var(--card);display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--fill);border:var(--bw) solid var(--cb);border-radius:var(--r2);clip-path:var(--clip-s);padding:10px 12px;margin-bottom:8px}
.rest small{color:var(--mut);display:block}
hr{border:0;border-top:var(--bw) solid var(--line);margin:16px 0}
#toast{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 84px);background:var(--tbg);color:var(--tfg);padding:10px 16px;border-radius:20px;font-size:.9em;z-index:9;max-width:90%;text-align:center}
[data-theme="pixel"] #toast,[data-theme="cyber"] #toast{border-radius:0;clip-path:var(--clip-s);border:2px solid var(--acc)}
[data-theme="maler"] #toast{border-radius:var(--r2)}

/* Design-Auswahl */
.themes{display:grid;gap:14px}
.tcard{display:block;width:100%;text-align:left;padding:0;border:2px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);position:relative}
.tcard.cur{border-color:var(--acc)}
.tcard .meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 14px;font-size:.92em}
.tcard .meta span{color:var(--mut)}
.tcard.cur .meta::after{content:"✓";color:var(--acc);font-weight:700;margin-left:auto}
.pv{padding:14px;background:var(--bgimg),var(--bg);background-size:var(--bgsize);color:var(--txt);font-family:var(--f-body);font-size:var(--fs);display:flex;flex-direction:column;gap:10px;pointer-events:none}
.pv-title{font-family:var(--f-head);font-weight:var(--head-fw);font-size:calc(var(--brand-fs) * .8);letter-spacing:var(--head-ls);text-transform:var(--head-tt);text-shadow:var(--glow);text-align:center;line-height:1.2}
.pv-card{display:flex;align-items:center;gap:10px;background:var(--card);border:var(--bw) solid var(--cb);border-radius:var(--r);clip-path:var(--clip);box-shadow:var(--shadow);padding:9px 12px}
.pv-av{width:34px;height:34px;border-radius:var(--r2);background:var(--avbg);color:var(--avfg);display:grid;place-items:center;font-family:var(--f-head);font-weight:var(--head-fw);flex:none}
.pv-tx{display:flex;flex-direction:column;min-width:0}
.pv-tx b{font-weight:600}
.pv-tx small{color:var(--mut);font-size:.85em}
.pv-row{display:flex;gap:8px}
.pv-btn{flex:1;text-align:center;background:var(--acc);color:var(--ink);font-weight:700;border-radius:var(--r2);clip-path:var(--clip-s);padding:8px 10px;border:var(--bw) solid var(--cb);box-shadow:var(--btn-shadow);font-size:.9em}
.pv-btn.sec{background:var(--card);color:var(--txt);font-weight:500;box-shadow:var(--shadow)}

/* ================= Besondere Effekte ================= */

/* Pixel: Tasten wie Spielekonsole */
:is([data-theme="pixel"],[data-theme="quest"]) .btn,:is([data-theme="pixel"],[data-theme="quest"]) #pad button{border-color:var(--cb)}
:is([data-theme="pixel"],[data-theme="quest"]) .btn:active,:is([data-theme="pixel"],[data-theme="quest"]) #pad button:active{transform:translateY(3px)}
:is([data-theme="pixel"],[data-theme="quest"]) .item,:is([data-theme="pixel"],[data-theme="quest"]) .rest{text-transform:none}
:is([data-theme="pixel"],[data-theme="quest"]) nav button{text-transform:uppercase;font-size:.75em}
:is([data-theme="pixel"],[data-theme="quest"]) input,:is([data-theme="pixel"],[data-theme="quest"]) textarea{border-color:var(--cb);box-shadow:inset 4px 4px 0 var(--ins)}
:is([data-theme="pixel"],[data-theme="quest"]) #sheet{border-radius:0;border-top:4px solid var(--cb);box-shadow:0 -4px 0 var(--line)}
:is([data-theme="pixel"],[data-theme="quest"]) .tcard{border-radius:0;border-width:4px}
:is([data-theme="pixel"],[data-theme="quest"]) #dots i{width:18px;height:18px}

/* Futuristisch: Glas */
[data-theme="futur"] .item,[data-theme="futur"] .rest,[data-theme="futur"] #pad button,[data-theme="futur"] #sheet{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
[data-theme="futur"] .btn:not(.sec):not(.danger){background:linear-gradient(90deg,var(--g1),var(--g2));border-color:transparent}
[data-theme="futur"] #pad button{border-color:var(--fx35)}
[data-theme="futur"] #pad button:active{box-shadow:0 0 22px var(--fx50);border-color:var(--acc)}
[data-theme="futur"] #dots i.on{box-shadow:0 0 12px var(--acc)}
[data-theme="futur"] header{box-shadow:0 1px 18px var(--fx13)}
[data-theme="futur"] nav{box-shadow:0 -1px 18px var(--fx13)}
[data-theme="futur"] .item .av{border:1px solid var(--fx35)}
[data-theme="futur"] #sheet{border-top-color:var(--fx50);box-shadow:0 -10px 40px var(--fx13)}

/* Cyberpunk: Neon, Kanten, Glitch */
[data-theme="cyber"] .item{border-left:5px solid var(--acc2)}
[data-theme="cyber"] .item:nth-child(even){border-left-color:var(--g2)}
[data-theme="cyber"] .item .t{text-transform:uppercase;letter-spacing:1.5px;font-family:var(--f-head);font-weight:700;font-size:1.25em}
[data-theme="cyber"] .btn{text-transform:uppercase;font-family:var(--f-head);font-weight:700;font-size:1.15em}
[data-theme="cyber"] #pad button{border-color:var(--acc2);color:var(--txt)}
[data-theme="cyber"] #pad button:active{background:var(--acc);color:var(--ink)}
[data-theme="cyber"] #dots i{transform:rotate(45deg);width:13px;height:13px}
[data-theme="cyber"] #dots i.on{background:var(--acc2);border-color:var(--acc2);box-shadow:0 0 12px #ff2a6d}
[data-theme="cyber"] header{border-bottom:2px solid var(--acc2);box-shadow:0 2px 0 var(--g2)}
[data-theme="cyber"] nav{border-top:2px solid var(--g2);box-shadow:0 -2px 0 var(--acc2)}
[data-theme="cyber"] nav button:active{background:var(--card);color:var(--acc)}
[data-theme="cyber"] #sheet{border-radius:0;border-top:3px solid var(--acc2);box-shadow:0 -3px 0 var(--g2)}
[data-theme="cyber"] #lockMsg{text-transform:uppercase;letter-spacing:2px}
@media (prefers-reduced-motion:no-preference){
  [data-theme="cyber"] .brand span{animation:glitch 5s infinite steps(1)}
}
@keyframes glitch{0%,90%,100%{transform:none}91%{transform:translate(2px,-1px)}93%{transform:translate(-3px,1px)}95%{transform:translate(1px,0)}97%{transform:translate(-1px,-1px)}}

/* Pastell: bunte Bonbons */
[data-theme="pastell"] .item:nth-child(5n+1) .av{background:var(--mint);color:var(--mint-k)}
[data-theme="pastell"] .item:nth-child(5n+2) .av{background:var(--peach);color:var(--peach-k)}
[data-theme="pastell"] .item:nth-child(5n+3) .av{background:var(--lav);color:var(--lav-k)}
[data-theme="pastell"] .item:nth-child(5n+4) .av{background:var(--sky);color:var(--sky-k)}
[data-theme="pastell"] .item:nth-child(5n+5) .av{background:var(--pink);color:var(--pink-k)}
[data-theme="pastell"] #pad button{border:0;box-shadow:0 6px 14px var(--psh)}
[data-theme="pastell"] #pad button:nth-child(4n+1){background:var(--lav)}
[data-theme="pastell"] #pad button:nth-child(4n+2){background:var(--peach)}
[data-theme="pastell"] #pad button:nth-child(4n+3){background:var(--mint)}
[data-theme="pastell"] #pad button:nth-child(4n+4){background:var(--sky)}
[data-theme="pastell"] #pad .ghost{background:none;box-shadow:none}
[data-theme="pastell"] #dots i{border-color:var(--dotb)}
[data-theme="pastell"] #dots i.on{background:var(--acc2);border-color:var(--acc2)}
[data-theme="pastell"] input,[data-theme="pastell"] textarea{border:2px solid var(--line)}
[data-theme="pastell"] .btn.sec{background:var(--secbg)}
[data-theme="pastell"] #sheet{border-radius:28px 28px 0 0;border-top:0;box-shadow:0 -10px 40px var(--psh)}
[data-theme="pastell"] .item .t{font-weight:800}
[data-theme="pastell"] header{box-shadow:0 4px 18px var(--hsh)}
[data-theme="pastell"] nav{box-shadow:0 -4px 18px var(--hsh)}

/* Malerisch: Aquarell, Tinte, raue Kanten */
[data-theme="maler"] .item,[data-theme="maler"] .btn,[data-theme="maler"] #pad button,[data-theme="maler"] .rest{position:relative;isolation:isolate;background:none;border:0;box-shadow:none}
[data-theme="maler"] .item::before,[data-theme="maler"] .btn::before,[data-theme="maler"] #pad button::before,[data-theme="maler"] .rest::before{content:"";position:absolute;inset:0;z-index:-1;border:2px solid var(--cb);border-radius:inherit;background:radial-gradient(120% 150% at 12% 0%,var(--hl),transparent 55%),var(--fill);filter:url(#rough)}
[data-theme="maler"] .btn.sec::before{background:radial-gradient(120% 150% at 12% 0%,var(--hl2),transparent 55%),var(--secbg)}
[data-theme="maler"] #pad button:nth-child(4n+1)::before{background:radial-gradient(120% 150% at 12% 0%,var(--hl),transparent 55%),var(--pd1)}
[data-theme="maler"] #pad button:nth-child(4n+2)::before{background:radial-gradient(120% 150% at 12% 0%,var(--hl),transparent 55%),var(--pd2)}
[data-theme="maler"] #pad button:nth-child(4n+3)::before{background:radial-gradient(120% 150% at 12% 0%,var(--hl),transparent 55%),var(--pd3)}
[data-theme="maler"] #pad button:nth-child(4n+4)::before{background:radial-gradient(120% 150% at 12% 0%,var(--hl),transparent 55%),var(--pd4)}
[data-theme="maler"] #pad .ghost::before{display:none}
[data-theme="maler"] #pad button{font-weight:700}
[data-theme="maler"] .item .av{border:2px solid var(--cb);font-size:1.5em}
[data-theme="maler"] .item .t{font-weight:600;font-size:1.05em}
[data-theme="maler"] .item .u{font-style:italic}
[data-theme="maler"] .item:nth-child(4n+1) .av{background:#3f7f86}
[data-theme="maler"] .item:nth-child(4n+2) .av{background:#c9604f}
[data-theme="maler"] .item:nth-child(4n+3) .av{background:#d29a3a}
[data-theme="maler"] .item:nth-child(4n+4) .av{background:#6f83bd}
[data-theme="maler"] .brand span{position:relative;padding-bottom:4px}
[data-theme="maler"] .brand span::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:6px;border-radius:50%;background:linear-gradient(90deg,transparent,#c9604f99 15%,#e3b86acc 55%,#3f7f8699 85%,transparent);filter:blur(.6px)}
[data-theme="maler"] #dots i{border:2px solid var(--txt);background:transparent}
[data-theme="maler"] #dots i.on{background:var(--acc2);border-color:var(--txt)}
[data-theme="maler"] header{border-bottom:2px solid var(--line)}
[data-theme="maler"] nav{border-top:2px solid var(--line)}
[data-theme="maler"] nav button{font-family:var(--f-head);font-size:1.1em;letter-spacing:.3px}
[data-theme="maler"] nav button:active,[data-theme="maler"] nav button.act{color:var(--acc2)}
[data-theme="maler"] #sheet{background:var(--sheetbg);border-top:2px solid var(--cb);border-radius:30px 18px 0 0}
[data-theme="maler"] #sheet h2{font-weight:700}
[data-theme="maler"] label{font-style:italic}
[data-theme="maler"] input,[data-theme="maler"] textarea{border:2px solid var(--cb);background:var(--inp)}
[data-theme="maler"] .tcard{border-radius:14px 24px 16px 26px/24px 14px 26px 16px;border-color:var(--cb)}
[data-theme="maler"] .pv-btn,[data-theme="maler"] .pv-card{border-width:2px}

/* Menüleiste: Beschriftung darf nicht überlaufen */
nav button{min-width:0;overflow:hidden;white-space:nowrap}
[data-theme="futur"] nav button,[data-theme="cyber"] nav button{letter-spacing:0;font-size:.6em}
#pad button:disabled{visibility:hidden}

/* Suche */
#searchBar{padding:12px 14px 0}
#q{-webkit-appearance:none;appearance:none}

/* Hell und Dunkel: jede Variante überschreibt nur ihre Farben */
[data-theme="klassisch"][data-mode="light"]{
  --bg:#f3f6fa;--bg2:#ffffff;--card:#ffffff;--card2:#e8eff7;--line:#d3deea;
  --txt:#14202c;--mut:#5b7087;--acc:#1b7fd6;--acc2:#1b7fd6;--ink:#ffffff;--red:#d63a4a;
  --inp:#f8fafd;--avbg:#d9eafb;--avfg:#1b7fd6;--veil:#14202c66;--shadow:0 1px 3px #0a1e3214;
  --cs:light;--lga-fill:#1b7fd6;--lgb-fill:#ffffff;--g1:#1b7fd6;--g2:#1b7fd6;
}
[data-theme="pixel"][data-mode="light"]{
  --bg:#ece6cf;--bg2:#dcd5b6;--card:#fffdf0;--card2:#f1ebd0;--line:#8c9570;
  --txt:#262b1a;--mut:#667050;--acc:#3b5dc9;--acc2:#d9603b;--ink:#ffffff;--red:#b13e53;
  --inp:#fffdf0;--avbg:#3b5dc9;--avfg:#ffffff;--veil:#262b1acc;--cb:#262b1a;--ins:rgba(38,43,26,.2);
  --shadow:inset -4px -4px 0 rgba(38,43,26,.16),inset 4px 4px 0 rgba(255,255,255,.7);
  --btn-shadow:inset -4px -4px 0 rgba(0,0,0,.25),inset 4px 4px 0 rgba(255,255,255,.35);
  --bgimg:linear-gradient(rgba(38,43,26,.06) 2px,transparent 2px),linear-gradient(90deg,rgba(38,43,26,.06) 2px,transparent 2px);
  --cs:light;
}
[data-theme="futur"][data-mode="light"]{
  --bg:#e8f5fa;--bg2:#ffffffd9;--card:#ffffffa6;--card2:#ffffffe0;--line:#0e8fa84d;
  --txt:#0a2533;--mut:#4a7185;--acc:#0790ad;--acc2:#7a66f0;--ink:#ffffff;--red:#dc3d66;
  --inp:#ffffffb3;--avbg:#0aa8c81f;--avfg:#067a93;--veil:#0a253366;
  --shadow:0 0 26px #0aa8c81f,inset 0 0 20px #ffffff80;--btn-shadow:0 6px 18px #0aa8c855;
  --bgimg:radial-gradient(900px 520px at 50% -12%,#5ee7ff66,transparent 62%),radial-gradient(700px 520px at 105% 108%,#9b8cff44,transparent 60%),linear-gradient(#0aa8c814 1px,transparent 1px),linear-gradient(90deg,#0aa8c814 1px,transparent 1px);
  --cs:light;--glow:none;
  --lga-stroke:#0790ad;--lgb-fill:#0790ad;--lg-filter:drop-shadow(0 0 5px #0aa8c88c);
  --g1:#0aa8c8;--g2:#7a66f0;--fx:#0aa8c8;--fx35:#0aa8c859;--fx13:#0aa8c822;--fx50:#0aa8c880;
}
[data-theme="cyber"][data-mode="light"]{
  --bg:#f1edf7;--bg2:#fbf9fff0;--card:#ffffff;--card2:#fff6c4;--line:#cbb9e6;
  --txt:#1a0a2e;--mut:#6a5789;--acc:#ffe600;--acc2:#ff2a6d;--ink:#1a0a2e;--red:#e0155a;
  --inp:#ffffff;--avbg:#ff2a6d;--avfg:#ffffff;--veil:#1a0a2e99;--cb:#1a0a2e;
  --bgimg:radial-gradient(620px 420px at 0% 0%,#ff2a6d33,transparent 62%),radial-gradient(620px 520px at 100% 100%,#05d9e844,transparent 62%),repeating-linear-gradient(0deg,#1a0a2e0a 0 1px,transparent 1px 3px);
  --cs:light;--lg-filter:drop-shadow(0 0 5px #ff2a6d88);
}
[data-theme="pastell"][data-mode="dark"]{
  --bg:#1e1832;--bg2:#271f40d9;--card:#2d2449;--card2:#382d5a;--line:#45396b;
  --txt:#f1e9ff;--mut:#a99bc9;--acc:#b9a6f5;--acc2:#f5a6c6;--ink:#1e1832;--red:#ff8aa3;
  --inp:#251d3d;--avbg:#3d3166;--avfg:#d8ceff;--veil:#080414aa;
  --shadow:0 8px 24px #00000055;--btn-shadow:0 6px 16px #b9a6f540;
  --bgimg:radial-gradient(420px 320px at 8% 6%,#2f5a4c88,transparent 70%),radial-gradient(380px 300px at 100% 22%,#473b7899,transparent 70%),radial-gradient(420px 360px at 0% 100%,#5c3f3688,transparent 70%),radial-gradient(360px 300px at 100% 100%,#2f4c6e88,transparent 70%);
  --cs:dark;--lgb-fill:#1e1832;--lg-filter:drop-shadow(0 4px 8px #b9a6f540);
  --mint:#2f5a4c;--peach:#5c3f36;--lav:#473b78;--sky:#2f4c6e;--pink:#6a3652;
  --mint-k:#bff0dc;--peach-k:#ffd2bd;--lav-k:#d8ceff;--sky-k:#c4e2ff;--pink-k:#ffc4dc;
  --secbg:#372d58;--dotb:#54477d;--psh:#00000055;--hsh:#00000040;--tbg:#f1e9ffee;--tfg:#1e1832;
}
[data-theme="maler"][data-mode="dark"]{
  --bg:#231c19;--bg2:#2b2320e6;--card:#3a2f2ac7;--card2:#483b34f2;--line:#f1e6d066;
  --txt:#f1e6d0;--mut:#b5a48e;--acc:#6fb5bb;--acc2:#e58a78;--ink:#1d1714;--red:#ee7e6e;
  --inp:#3a2f2acc;--avbg:#c9604f;--avfg:#fff6e6;--veil:#0a0605aa;--cb:#f1e6d099;
  --bgimg:radial-gradient(520px 380px at 0% 0%,#3f7f8666,transparent 70%),radial-gradient(460px 360px at 100% 18%,#c9604f55,transparent 70%),radial-gradient(540px 420px at 12% 106%,#d29a3a4d,transparent 70%),radial-gradient(430px 370px at 100% 100%,#6f83bd55,transparent 70%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .75 0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --cs:dark;--lga-stroke:#f1e6d0;--lgb-fill:#1d1714;
  --hl:#ffffff1c;--hl2:#ffffff26;--secbg:#3a2f2af2;--pd1:#2f5a56;--pd2:#6a3a35;--pd3:#6b5426;--pd4:#38457a;--sheetbg:#2b2320f5;--tbg:#f1e6d0f0;--tfg:#231c19;
}

/* ================= Neue Designs: Terminal, Quest, Toon ================= */

/* Terminal: grüne Konsole (dunkel) */
[data-theme="terminal"]{
  --bg:#020b04;--bg2:#03140a;--card:#04170b;--card2:#082414;--line:#14602f;
  --txt:#39ff6a;--mut:#1fae47;--acc:#39ff6a;--acc2:#b6ff3b;--ink:#00140a;--red:#ff5c5c;
  --inp:#020b04;--avbg:#082414;--avfg:#39ff6a;--veil:#000000d0;
  --r:0;--r2:0;--bw:1px;--cb:var(--line);--shadow:none;--btn-shadow:none;
  --clip:none;--clip-s:none;--key-r:0;--dot-r:0;
  --f-body:'Share Tech Mono',ui-monospace,monospace;--f-head:'VT323',ui-monospace,monospace;
  --fs:15px;--brand-fs:34px;--h2-fs:28px;--key-fs:32px;--head-ls:1px;--head-tt:none;--head-fw:400;
  --bgimg:radial-gradient(120% 90% at 50% 0%,#39ff6a14,transparent 70%),repeating-linear-gradient(0deg,#00000052 0 1px,transparent 1px 3px);
  --bgsize:auto,auto;--cs:dark;--glow:0 0 8px #39ff6aa6;
  --lga-fill:none;--lga-stroke:#39ff6a;--lga-sw:2.2;--lgb-fill:#39ff6a;--lg-filter:drop-shadow(0 0 5px #39ff6a);--d-std:block;--d-px:none;
  --g1:#39ff6a;--g2:#b6ff3b;--tbg:#000000ee;--tfg:#39ff6a;
}
[data-theme="terminal"][data-mode="light"]{
  --bg:#eef2e0;--bg2:#e2e9cc;--card:#f8faee;--card2:#e4ecce;--line:#9db37a;
  --txt:#12331a;--mut:#4d6b45;--acc:#0f7a2e;--acc2:#5c8a00;--ink:#f4fff4;--red:#b3261e;
  --inp:#f8faee;--avbg:#dce6c0;--avfg:#0f7a2e;--veil:#12331a99;
  --bgimg:radial-gradient(120% 90% at 50% 0%,#ffffff99,transparent 70%),repeating-linear-gradient(0deg,#12331a0d 0 1px,transparent 1px 3px);
  --cs:light;--glow:none;--lga-stroke:#0f7a2e;--lgb-fill:#0f7a2e;--lg-filter:none;--tbg:#12331aee;--tfg:#cfffd8;
}
[data-theme="terminal"] .brand span::before{content:"> "}
[data-theme="terminal"] .brand span::after{content:"_";animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){[data-theme="terminal"] .brand span::after{animation:none}}
[data-theme="terminal"] .item .t::before{content:"> "}
[data-theme="terminal"] .item:active{background:var(--card2)}
[data-theme="terminal"] .btn{text-transform:uppercase;letter-spacing:1px;border-color:var(--acc)}
[data-theme="terminal"] .btn.sec{border-color:var(--line)}
[data-theme="terminal"] .btn:not(.sec):not(.danger):active{box-shadow:0 0 14px var(--acc)}
[data-theme="terminal"] #pad button{color:var(--acc);border-color:var(--line)}
[data-theme="terminal"] #pad button:active{background:var(--acc);color:var(--ink);box-shadow:0 0 16px var(--acc)}
[data-theme="terminal"] #dots i{width:14px;height:14px;border-color:var(--acc)}
[data-theme="terminal"] #dots i.on{box-shadow:0 0 10px var(--acc)}
[data-theme="terminal"] #sheet{border-radius:0;border-top:1px solid var(--acc)}
[data-theme="terminal"] #toast{border:1px solid var(--acc);border-radius:0}
[data-theme="terminal"] header,[data-theme="terminal"] nav{border-color:var(--acc)}
[data-theme="terminal"] nav button{text-transform:uppercase;font-size:.62em}
[data-theme="terminal"] #lockMsg{text-transform:uppercase;letter-spacing:1px}

/* Quest: Fantasy-Abenteuer im 16-Bit-Stil (hell: Wiese) */
[data-theme="quest"]{
  --bg:#b9e08a;--bg2:#f3e6b3;--card:#fff8dc;--card2:#f3e6b3;--line:#6a8f45;
  --txt:#2b2410;--mut:#6b5d33;--acc:#e0a526;--acc2:#d9423a;--ink:#2b1a02;--red:#c2362f;
  --inp:#fffdf0;--avbg:#3f9b4b;--avfg:#fff8dc;--veil:#2b2410aa;
  --r:0;--r2:0;--bw:4px;--cb:#3b2a12;
  --shadow:inset -4px -4px 0 rgba(59,42,18,.18),inset 4px 4px 0 rgba(255,255,255,.65);
  --btn-shadow:inset -4px -4px 0 rgba(0,0,0,.25),inset 4px 4px 0 rgba(255,255,255,.4);
  --clip:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
  --clip-s:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  --key-r:0;--dot-r:0;--ins:rgba(59,42,18,.22);
  --f-body:'VT323',ui-monospace,monospace;--f-head:'Press Start 2P',ui-monospace,monospace;
  --fs:22px;--brand-fs:15px;--h2-fs:13px;--key-fs:32px;--head-ls:0;--head-tt:none;--head-fw:400;
  --bgimg:conic-gradient(#ffffff1f 25%,transparent 0 50%,#ffffff1f 0 75%,transparent 0);
  --bgsize:48px 48px;--cs:light;--glow:none;
  --lgb-fill:#10203a;--lg-filter:none;--d-std:none;--d-px:block;
  --pxo:#3b2a12;--pxf:#3f9b4b;--pxk:#fff8dc;
  --g1:#3f9b4b;--g2:#e0a526;
}
[data-theme="quest"][data-mode="dark"]{
  --bg:#173a26;--bg2:#0e1a12;--card:#0b1730;--card2:#14264a;--line:#5f7f58;
  --txt:#fff6dc;--mut:#a9c3a0;--acc:#f2c14e;--acc2:#e0483e;--ink:#2a1a05;--red:#e0483e;
  --inp:#0b1730;--avbg:#2f8f4e;--avfg:#fff6dc;--veil:#050d08cc;--cb:#f5e6b8;
  --shadow:inset -4px -4px 0 rgba(0,0,0,.45),inset 4px 4px 0 rgba(255,255,255,.1);
  --btn-shadow:inset -4px -4px 0 rgba(0,0,0,.3),inset 4px 4px 0 rgba(255,255,255,.35);
  --ins:rgba(0,0,0,.4);
  --bgimg:conic-gradient(#ffffff0f 25%,transparent 0 50%,#ffffff0f 0 75%,transparent 0);
  --cs:dark;--lgb-fill:#10203a;--pxo:#f2c14e;--pxf:#3aa65c;--pxk:#10203a;
  --g1:#3aa65c;--g2:#f2c14e;
}
[data-theme="quest"] header::before{content:"♥ ♥ ♥";position:absolute;left:14px;bottom:14px;color:var(--acc2);font-family:system-ui,sans-serif;font-size:17px;letter-spacing:1px;line-height:1}
[data-theme="quest"] #pad button{color:var(--txt)}
[data-theme="quest"] .btn.sec{color:var(--txt)}

/* Toon: Cel Shading, dicke Konturen, flache Farben (hell: Himmel und Meer) */
[data-theme="toon"]{
  --bg:#8fd8f0;--bg2:#fff3cc;--card:#fff9e6;--card2:#ffefb8;--line:#1d2b3a;
  --txt:#1d2b3a;--mut:#4d6b85;--acc:#ffcf3d;--acc2:#2fa8a1;--ink:#1d2b3a;--red:#e0453a;
  --inp:#ffffff;--avbg:#2fa8a1;--avfg:#ffffff;--veil:#1d2b3a99;
  --r:20px;--r2:14px;--bw:3px;--cb:#1d2b3a;
  --shadow:4px 4px 0 #1d2b3a,inset 0 -6px 0 #1d2b3a1f;--btn-shadow:3px 3px 0 #1d2b3a,inset 0 -5px 0 #1d2b3a29;
  --clip:none;--clip-s:none;--key-r:50%;--dot-r:50%;
  --f-body:'Nunito',system-ui,sans-serif;--f-head:'Nunito',system-ui,sans-serif;
  --fs:16px;--brand-fs:28px;--h2-fs:21px;--key-fs:26px;--head-ls:.4px;--head-tt:none;--head-fw:800;
  --bgimg:radial-gradient(70px 26px at 16% 11%,#fffffff0 98%,transparent),radial-gradient(110px 32px at 84% 21%,#fffffff0 98%,transparent),radial-gradient(80px 26px at 26% 90%,#ffffffcc 98%,transparent),linear-gradient(#6dc8ec,#b9e9f6 60%,#e6f7fb);
  --bgsize:auto,auto,auto,auto;--cs:light;--glow:none;
  --lga-fill:#ff6b4a;--lga-stroke:#1d2b3a;--lga-sw:2.6;--lgb-fill:#fff9e6;--lg-filter:drop-shadow(2px 2px 0 #1d2b3a);--d-std:block;--d-px:none;
  --g1:#ff6b4a;--g2:#2fa8a1;--tbg:#1d2b3a;--tfg:#fff9e6;
}
[data-theme="toon"][data-mode="dark"]{
  --bg:#14284b;--bg2:#182d52;--card:#223a63;--card2:#2c4a7a;--line:#0a1428;
  --txt:#fff3d6;--mut:#9fb8da;--acc:#ffcf3d;--acc2:#3fd0c4;--ink:#1d2b3a;--red:#ff6b5c;
  --inp:#162a4c;--avbg:#3fd0c4;--avfg:#0a1428;--veil:#050b18bb;--cb:#0a1428;
  --shadow:4px 4px 0 #0a1428,inset 0 -6px 0 #0a142840;--btn-shadow:3px 3px 0 #0a1428,inset 0 -5px 0 #0a142840;
  --bgimg:radial-gradient(2px 2px at 14% 12%,#fff 98%,transparent),radial-gradient(3px 3px at 72% 8%,#ffe9a6 98%,transparent),radial-gradient(2px 2px at 88% 30%,#fff 98%,transparent),radial-gradient(2px 2px at 30% 46%,#fff 98%,transparent),radial-gradient(3px 3px at 8% 74%,#ffe9a6 98%,transparent),radial-gradient(2px 2px at 64% 86%,#fff 98%,transparent),linear-gradient(#0f1f3d,#1f4e79);
  --bgsize:auto,auto,auto,auto,auto,auto,auto;--cs:dark;
  --lga-fill:#ff6b5c;--lga-stroke:#0a1428;--lgb-fill:#fff3d6;--lg-filter:drop-shadow(2px 2px 0 #0a1428);
  --g1:#ff6b5c;--g2:#3fd0c4;--tbg:#fff3d6;--tfg:#0a1428;
}
[data-theme="toon"] .brand span,[data-theme="toon"] .pv-title{color:#fff9e6;text-shadow:2px 2px 0 var(--cb),-1px -1px 0 var(--cb),1px -1px 0 var(--cb),-1px 1px 0 var(--cb),1px 1px 0 var(--cb)}
[data-theme="toon"] .item,[data-theme="toon"] .btn,[data-theme="toon"] #pad button,[data-theme="toon"] .rest{transition:transform .06s,box-shadow .06s}
[data-theme="toon"] .item:active,[data-theme="toon"] .btn:active,[data-theme="toon"] #pad button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--cb)}
[data-theme="toon"] #pad button:nth-child(3n+1){--fill:var(--card)}
[data-theme="toon"] #pad button:nth-child(3n+2){--fill:var(--card2)}
[data-theme="toon"] .item .av{border:3px solid var(--cb)}
[data-theme="toon"] .item:nth-child(4n+2) .av{background:#ff6b4a;color:#fff}
[data-theme="toon"] .item:nth-child(4n+3) .av{background:#ffcf3d;color:#1d2b3a}
[data-theme="toon"] .item:nth-child(4n+4) .av{background:#7a8cf0;color:#fff}
[data-theme="toon"] header,[data-theme="toon"] nav{border-color:var(--cb)}
[data-theme="toon"] #sheet{border-radius:26px 26px 0 0;border-top:3px solid var(--cb);box-shadow:0 -4px 0 var(--cb)}
[data-theme="toon"] input,[data-theme="toon"] textarea{border:3px solid var(--cb)}
[data-theme="toon"] #toast{border:3px solid var(--cb);color:var(--tfg)}
[data-theme="toon"] .item .t{font-weight:800}
[data-theme="toon"] nav button.act,[data-theme="toon"] nav button:active{color:var(--red)}
[data-theme="toon"][data-mode="dark"] .item:nth-child(4n+2) .av{background:#ff6b5c;color:#0a1428}
[data-theme="toon"][data-mode="dark"] .item:nth-child(4n+3) .av{color:#0a1428}