/* SecretShare — sober professional theme (default). Hacker mode overrides via [data-theme="hacker"]. */

/* ============================================================
   PROFESSIONAL MODE (default) — clean, corporate, minimal
   ============================================================ */
:root{
  --bg:#eef1f5; --panel:#ffffff; --line:#dfe3ea;
  --txt:#1f2733; --muted:#6b7480; --accent:#2563eb; --red:#dc2626;
  --amber:#b45309;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* background layers — hidden in pro */
#three,#matrix,.scanlines,.vignette{display:none}

/* stage + panel */
.stage{position:relative;z-index:5;min-height:100vh;display:flex;
  align-items:center;justify-content:center;padding:24px}
.panel{position:relative;width:100%;max-width:680px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:30px 30px 24px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.08)}
.panel.danger{border-color:#f1c4c4;box-shadow:0 8px 24px rgba(220,38,38,.08)}

/* header bar */
.bar{display:flex;align-items:center;gap:8px;margin:-6px 0 18px;color:var(--muted);font-size:12px}

/* brand */
.brand{display:flex;align-items:center;gap:9px}
.brand .wm{font-size:14px;font-weight:700;letter-spacing:.4px;color:var(--txt)}

/* toggles */
.toggles{margin-left:auto;display:flex;align-items:center;gap:14px;flex:0 0 auto}
.themetog{display:flex;align-items:center;gap:3px;font-size:11px;letter-spacing:1px}
.themetog button{all:unset;cursor:pointer;color:var(--muted);padding:2px 7px;border-radius:6px;transition:.15s}
.themetog button:hover{color:var(--txt)}
.themetog button.on{color:var(--accent);background:rgba(37,99,235,.12)}
.themetog .sep{color:#c4ccd6}
.langtog{display:inline-flex;align-items:center;gap:2px;line-height:1}
.langtog button{all:unset;cursor:pointer;font-size:12px;font-weight:600;line-height:1;padding:2px 7px;border-radius:4px;
  opacity:.4;transition:opacity .15s;color:var(--muted)}
.langtog button:hover{opacity:.8}
.langtog button.on{opacity:1;color:var(--accent)}

/* title */
h1{font-size:24px;font-weight:700;letter-spacing:.2px;margin:0 0 2px;color:var(--txt);line-height:1}
.sub{color:var(--muted);font-size:13px;margin:6px 0 22px;min-height:1.4em}
.cursor::after{display:none}

/* form */
label{display:block;font-size:11px;color:var(--muted);margin:16px 0 7px;text-transform:uppercase;letter-spacing:1px}
textarea,select,input{width:100%;background:#fff;color:var(--txt);
  border:1px solid var(--line);border-radius:9px;padding:13px;font:inherit;font-size:14px;outline:none;transition:.18s}
textarea{min-height:120px;resize:vertical}
textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
select{appearance:none;cursor:pointer}

/* buttons */
.btn{margin-top:22px;width:100%;cursor:pointer;border:1px solid var(--accent);
  background:var(--accent);color:#fff;border-radius:10px;padding:14px;font:inherit;font-weight:600;
  letter-spacing:.2px;transition:.18s}
.btn:hover{background:#1d4ed8;color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:hover{background:#b91c1c;color:#fff}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--muted);text-transform:none;letter-spacing:.3px;font-weight:600;margin-top:14px}
.btn.ghost:hover{background:#f3f5f8;color:var(--txt)}

/* result / link box */
.result{margin-top:22px;display:none;min-height:0}
.result.show{display:block}
.linkbox{display:flex;gap:8px;margin-top:8px}
.linkbox input{font-size:13px;color:var(--accent);border-color:var(--line)}
.copy{margin:0;width:auto;padding:0 18px;flex:0 0 auto}
.meta{color:var(--muted);font-size:12px;margin-top:12px;display:flex;gap:8px;align-items:center}
.err{color:var(--red);font-size:13px;margin-top:14px;min-height:18px}

/* reveal page */
.prep{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 16px}
.prep-steps{margin:0;padding:0 0 0 18px;font-size:13px;line-height:1.45;color:var(--txt)}
.prep-steps li{margin:0 0 7px}
.prep-steps li:last-child{margin-bottom:0}
.ready-check{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;padding:12px 14px;
  background:#f8fafc;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--txt);cursor:pointer;line-height:1.45}
.ready-check input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--red);width:16px;height:16px;cursor:pointer}
#ready .btn{margin-top:0}
.secretbox{display:none;margin-top:4px}
.secretbox.show{display:block}
.save-banner{margin:0 0 12px;padding:11px 14px;border-radius:10px;background:#ecfdf3;border:1px solid #a7f3d0;
  color:#166534;font-size:13px;font-weight:600;line-height:1.45}
.secretbox .btn.copy{margin-top:0;width:100%}
pre{background:#f4f6f9;border:1px solid var(--line);border-radius:10px;padding:18px;
  margin:8px 0 0;white-space:pre-wrap;word-break:break-all;color:#111827;font-size:15px}
.gone{display:none;text-align:center;color:var(--red);font-size:15px;margin-top:8px}
.gone.show{display:block}

/* footer */
.foot{color:var(--muted);font-size:11px;margin-top:24px;border-top:1px solid var(--line);padding-top:14px;line-height:1.7}
.foot b{color:var(--txt)}
.foot .c{color:var(--accent)}
.foot .branding{display:block;margin-top:10px;font-size:10px;letter-spacing:.8px;color:#a0aab4;}
a{color:var(--accent)}

/* cipher overlay — clean */
.cipherfx{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;border-radius:12px;
  background:rgba(255,255,255,.96);overflow:hidden}
.cipherfx.show{display:flex}
.cipherfx .lbl{color:var(--accent);font-weight:600;letter-spacing:1px;font-size:18px}
.cipherfx pre{display:none}
.cipherfx .pbar{width:62%;height:4px;background:#e6eaf0;border-radius:3px;overflow:hidden}
.cipherfx .pbar i{display:block;height:100%;width:0;background:var(--accent)}
.cipherfx::after{display:none}

/* ============================================================
   HACKER MODE — 3D vault + matrix rain + glitch + neon
   ============================================================ */
[data-theme="hacker"]{
  --bg:#05070c; --panel:rgba(10,15,24,.62); --line:#1d6b48;
  --txt:#dfe7ee; --muted:#6f8aa0; --accent:#27d07a; --red:#ff3b3b;
  --cyan:#5df2ff; --amber:#ffcf4d;
  color-scheme:dark;
}
[data-theme="hacker"] body{
  font:15px/1.55 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  background:var(--bg);overflow:hidden}

/* background layers */
[data-theme="hacker"] #three,[data-theme="hacker"] #matrix{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:0}
[data-theme="hacker"] #matrix{opacity:.30;mix-blend-mode:screen}
[data-theme="hacker"] .scanlines{display:block;position:fixed;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.25) 3px,rgba(0,0,0,0) 4px);
  animation:flick 6s infinite}
[data-theme="hacker"] .vignette{display:block;position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%,transparent 48%,rgba(0,0,0,.55) 100%)}
@keyframes flick{0%,97%,100%{opacity:.5}98%{opacity:.2}99%{opacity:.7}}

/* panel */
[data-theme="hacker"] .panel{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(9px);
  box-shadow:0 0 0 1px rgba(39,208,122,.12),0 0 60px rgba(39,208,122,.10),inset 0 0 30px rgba(0,0,0,.5);
  animation:rise .6s cubic-bezier(.2,.9,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
[data-theme="hacker"] .panel.danger{border-color:#6b1d1d;box-shadow:0 0 0 1px rgba(255,59,59,.15),0 0 60px rgba(255,59,59,.12),inset 0 0 30px rgba(0,0,0,.5)}

/* terminal dots */
[data-theme="hacker"] .bar::before{content:"";display:inline-flex;gap:5px}
[data-theme="hacker"] .bar{gap:12px}

/* brand */
[data-theme="hacker"] .brand .wm{font-size:14px;font-weight:700;letter-spacing:.4px;color:var(--txt)}

/* title glitch */
[data-theme="hacker"] h1{font-size:30px;font-weight:800;letter-spacing:1px;position:relative;color:#fff}
[data-theme="hacker"] h1::before,[data-theme="hacker"] h1::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;clip-path:inset(0)}
[data-theme="hacker"] h1::before{color:var(--red);transform:translate(2px,0);animation:gl1 2.6s infinite steps(2)}
[data-theme="hacker"] h1::after{color:var(--cyan);transform:translate(-2px,0);animation:gl2 3.1s infinite steps(2)}
@keyframes gl1{0%,92%,100%{clip-path:inset(0 0 100% 0)}93%{clip-path:inset(10% 0 60% 0)}96%{clip-path:inset(50% 0 20% 0)}}
@keyframes gl2{0%,90%,100%{clip-path:inset(100% 0 0 0)}91%{clip-path:inset(70% 0 10% 0)}95%{clip-path:inset(20% 0 55% 0)}}

/* cursor */
[data-theme="hacker"] .cursor::after{content:"▋";color:var(--accent);animation:blink 1s steps(1) infinite;display:inline}
@keyframes blink{50%{opacity:0}}

/* inputs */
[data-theme="hacker"] textarea,[data-theme="hacker"] select,[data-theme="hacker"] input{
  background:rgba(5,9,15,.85);color:var(--txt);border:1px solid #173a2a}
[data-theme="hacker"] textarea:focus,[data-theme="hacker"] select:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 18px rgba(39,208,122,.25)}
[data-theme="hacker"] .linkbox input{color:var(--cyan);border-color:#13404a}

/* buttons */
[data-theme="hacker"] .btn{
  background:linear-gradient(180deg,rgba(39,208,122,.18),rgba(39,208,122,.05));
  color:var(--accent);border:1px solid var(--accent);text-transform:uppercase;letter-spacing:1px;font-weight:800;
  box-shadow:none;position:relative;overflow:hidden}
[data-theme="hacker"] .btn:hover{color:#04130b;background:var(--accent);box-shadow:0 0 26px rgba(39,208,122,.55)}
[data-theme="hacker"] .btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .5s}
[data-theme="hacker"] .btn:hover::after{left:140%}
[data-theme="hacker"] .btn.red{border-color:var(--red);color:var(--red);background:linear-gradient(180deg,rgba(255,59,59,.18),rgba(255,59,59,.05))}
[data-theme="hacker"] .btn.red:hover{color:#fff;background:var(--red);box-shadow:0 0 26px rgba(255,59,59,.55)}
[data-theme="hacker"] .btn.ghost{border-color:#2a3a4a;color:var(--muted);background:rgba(255,255,255,.02);text-transform:none;letter-spacing:.3px;font-weight:600}
[data-theme="hacker"] .btn.ghost:hover{color:var(--txt);background:rgba(255,255,255,.06);box-shadow:none}

/* misc */
[data-theme="hacker"] .err{text-shadow:0 0 10px rgba(255,59,59,.4)}
[data-theme="hacker"] pre{background:rgba(5,9,15,.9);border:1px solid var(--line);color:var(--accent);text-shadow:0 0 12px rgba(39,208,122,.4)}
[data-theme="hacker"] .prep{border-color:#133225;background:rgba(5,9,15,.55)}
[data-theme="hacker"] .ready-check{border-color:#133225;background:rgba(5,9,15,.55);color:var(--txt)}
[data-theme="hacker"] .save-banner{border-color:#134e2a;background:rgba(39,208,122,.08);color:var(--accent)}
[data-theme="hacker"] .gone{text-shadow:0 0 14px rgba(255,59,59,.5)}
[data-theme="hacker"] .foot{color:var(--muted);border-top-color:#133225}
[data-theme="hacker"] .foot b{color:var(--accent)}
[data-theme="hacker"] .foot .c{color:var(--cyan)}
[data-theme="hacker"] .foot .branding{color:#3a5a4a}
[data-theme="hacker"] .themetog button.on{color:var(--accent);background:rgba(39,208,122,.12);text-shadow:0 0 8px rgba(39,208,122,.55)}
[data-theme="hacker"] .danger .themetog button.on{color:var(--red);background:rgba(255,59,59,.12);text-shadow:0 0 8px rgba(255,59,59,.55)}
[data-theme="hacker"] .langtog button.on{color:var(--accent)}
[data-theme="hacker"] .themetog .sep{color:#2a3a4a}

/* cipher overlay */
[data-theme="hacker"] .cipherfx{
  background:rgba(5,8,14,.93);backdrop-filter:blur(4px);overflow:hidden}
[data-theme="hacker"] .cipherfx.show{animation:rise .2s both}
[data-theme="hacker"] .cipherfx .lbl{color:var(--accent);font-weight:800;letter-spacing:5px;
  text-shadow:0 0 18px rgba(39,208,122,.7);animation:pulselbl 1s ease-in-out infinite}
@keyframes pulselbl{50%{opacity:.55}}
[data-theme="hacker"] .cipherfx pre{display:block;margin:0;color:var(--accent);opacity:.45;font-size:12px;line-height:1.25;
  white-space:pre;max-width:90%;overflow:hidden;text-shadow:0 0 8px rgba(39,208,122,.4)}
[data-theme="hacker"] .cipherfx .pbar{background:rgba(39,208,122,.15)}
[data-theme="hacker"] .cipherfx .pbar i{box-shadow:0 0 12px var(--accent)}
[data-theme="hacker"] .cipherfx::after{display:block;content:"";position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 14px var(--accent);animation:scan 1.5s linear infinite;opacity:.8}
@keyframes scan{0%{top:6%}100%{top:94%}}
[data-theme="hacker"] .danger .cipherfx .lbl,[data-theme="hacker"] .danger .cipherfx pre{color:var(--red);text-shadow:0 0 18px rgba(255,59,59,.7)}
[data-theme="hacker"] .danger .cipherfx .pbar i{background:var(--red);box-shadow:0 0 12px var(--red)}
[data-theme="hacker"] .danger .cipherfx::after{background:linear-gradient(90deg,transparent,var(--red),transparent);box-shadow:0 0 14px var(--red)}

[data-theme="hacker"] a{color:var(--cyan)}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}