:root{
  --bg:#eef1f7; --bg2:#e6eaf3;
  --card:#ffffff; --card-border:#e5e8f0;
  --text:#141a29; --muted:#697086; --faint:#8a91a6;
  --accent:#4f46e5; --accent-press:#4338ca; --accent-soft:#eef0ff;
  --dark:#111827; --dark-press:#0b1220;
  --ok:#0f9d58; --ok-soft:#e7f6ec;
  --warn:#c2410c; --warn-soft:#fdeee4;
  --danger:#dc2626; --danger-soft:#fdecec;
  --field:#ffffff; --field-border:#d5dae6;
  --shadow:0 12px 34px rgba(20,30,55,.08);
  --radius:18px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0c0f17; --bg2:#0a0d14;
    --card:#141926; --card-border:#232a3b;
    --text:#e8ebf4; --muted:#9aa2b8; --faint:#767e93;
    --accent:#8b83ff; --accent-press:#a79fff; --accent-soft:#20233a;
    /* 深色模式下默认按钮也用紫色 (原来是近白色按钮+白字,看不清) */
    --dark:#8b83ff; --dark-press:#a79fff;
    --ok:#37d180; --ok-soft:#123024;
    --warn:#f59e5b; --warn-soft:#3a2415;
    --danger:#f87171; --danger-soft:#3a1a1a;
    --field:#0f1420; --field-border:#2b3348;
    --shadow:0 14px 40px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 100% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
.container{width:min(940px,92vw);margin:36px auto 60px}
.narrow{width:min(680px,92vw)}
header{margin-bottom:20px}
h1{font-size:26px;letter-spacing:-.02em;margin:0 0 2px}
h2{font-size:18px;letter-spacing:-.01em;margin:0 0 12px}
h3{font-size:15px;margin:0 0 8px}
p{margin-top:0}
.brand{display:flex;align-items:center;gap:11px}
.brand .logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:20px;
  background:linear-gradient(140deg,var(--accent),#8b5cf6);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 40%,transparent)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:24px;margin-bottom:18px;box-shadow:var(--shadow)}
.dropzone{border:2px dashed var(--field-border);border-radius:16px;padding:44px 20px;text-align:center;cursor:pointer;transition:.18s ease;background:color-mix(in srgb,var(--accent) 3%,transparent)}
.dropzone:hover{border-color:var(--accent)}
.dropzone.drag{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.005)}
.drop-icon{font-size:40px;line-height:1}
button,.button{font:inherit}
.primary,.button{border:0;border-radius:12px;background:var(--dark);color:#fff;padding:12px 18px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:6px;transition:.15s ease}
.primary:hover,.button:hover{background:var(--dark-press);transform:translateY(-1px)}
.primary:active{transform:translateY(0)}
.primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.primary.accent{background:var(--accent)}
.primary.accent:hover{background:var(--accent-press)}
.wide{width:100%;margin-top:12px}
.divider{text-align:center;color:var(--faint);margin:16px 0;position:relative}
.divider::before,.divider::after{content:"";position:absolute;top:50%;width:42%;height:1px;background:var(--card-border)}
.divider::before{left:0}.divider::after{right:0}
.textpaste{width:100%;min-height:150px;resize:vertical;border:1px solid var(--field-border);border-radius:12px;padding:13px;font:inherit;background:var(--field);color:var(--text)}
.textpaste:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);border-color:var(--accent)}
.hidden{display:none!important}
.row{display:flex;gap:10px;align-items:center}
.between{justify-content:space-between}
.input{flex:1;border:1px solid var(--field-border);border-radius:10px;padding:11px 12px;font:inherit;background:var(--field);color:var(--text)}
.input:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);border-color:var(--accent)}
.progress{height:10px;background:color-mix(in srgb,var(--muted) 22%,transparent);border-radius:999px;overflow:hidden;margin-top:16px}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#8b5cf6);transition:width .2s}
.result-box{background:color-mix(in srgb,var(--accent) 5%,transparent);border:1px solid var(--card-border);border-radius:14px;padding:18px;margin-top:16px}
.result-box code{word-break:break-all;background:color-mix(in srgb,var(--muted) 14%,transparent);padding:2px 6px;border-radius:6px;font-size:12.5px}
.code-inputs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:min(360px,100%);margin:4px auto 0}
.code-inputs input{width:100%;height:66px;text-align:center;font-size:32px;font-weight:800;border:1px solid var(--field-border);border-radius:14px;background:var(--field);color:var(--text)}
.code-inputs input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.sender-history{display:grid;gap:10px;margin-top:10px}
.history-code{font-size:24px;letter-spacing:5px;margin-left:10px}
.history-url{display:flex;gap:10px;align-items:center}
.history-url .input{min-width:0}
.code{font-size:30px;letter-spacing:9px;font-weight:800;color:var(--accent)}
.copy{margin-left:8px}
.history-item{padding:13px 0;border-bottom:1px solid var(--card-border)}
.history-item:last-child{border-bottom:0}
.history-link{color:var(--text);text-decoration:none;font-weight:600}
.history-link:hover{color:var(--accent)}
.meta{font-size:13px;color:var(--muted)}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.danger{color:var(--danger)}
.link{border:0;background:none;color:var(--accent);cursor:pointer;padding:0;font-weight:600}
.link:hover{text-decoration:underline}
.error{color:var(--danger);margin-top:8px;min-height:1em}
.center{text-align:center}
.back{display:inline-block;margin-bottom:16px;color:var(--accent);text-decoration:none;font-weight:600}
.back:hover{text-decoration:underline}
.text-content{white-space:pre-wrap;word-break:break-word;background:var(--field);border:1px solid var(--card-border);border-radius:12px;padding:16px;cursor:pointer;max-height:70vh;overflow:auto;font-size:14px}
/* encrypted download block */
.enc-box{margin-top:20px;border-top:1px solid var(--card-border);padding-top:18px}
.enc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between}
.keyfield{display:flex;gap:8px;align-items:center;margin-top:10px}
.keyfield .input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.note{font-size:13px;color:var(--muted);background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin-top:12px}
.note b{color:var(--text)}
.steps{padding-left:20px;font-size:14px;color:var(--text)}
.steps li{margin:6px 0}
kbd{background:var(--field);border:1px solid var(--field-border);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:12px;font-family:ui-monospace,Consolas,monospace}
/* admin */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.stat{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.stat span{display:block;color:var(--muted);font-size:13px;margin-bottom:4px}
.stat b{font-size:26px;letter-spacing:-.02em}
.codearea{position:relative}
.codearea textarea{height:230px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--field)}
.codearea .primary{position:absolute;top:10px;right:10px;padding:6px 12px;font-size:12px}
hr.sep{border:0;border-top:1px solid var(--card-border);margin:22px 0}
@media(max-width:700px){
  .container{margin:18px auto 40px}
  .card{padding:17px}
  .dropzone{padding:32px 12px}
  .row{flex-wrap:wrap}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .input{min-width:0;width:100%}
  .code{font-size:26px;letter-spacing:7px}
  .code-inputs{gap:9px}
  .code-inputs input{height:60px;font-size:28px}
  .history-url{flex-wrap:wrap}
  .history-url .input{width:100%}
}