:root{
--bg:#f3f4f6;
--card:rgba(255,255,255,.65);
--stroke:rgba(0,0,0,.08);
--text:#111827;
--muted:rgba(17,24,39,.65);
--primary:#111827;
--secondary:#374151;
--danger:#ef4444;
--radius:18px;
--shadow:0 18px 60px rgba(0,0,0,.12);
}
*{box-sizing:border-box;font-family:"PingFang SC","Helvetica Neue",Arial,"Microsoft Yahei",sans-serif;}
html,body{height:100%;margin:0;color:var(--text);}
body{
background:radial-gradient(1200px 800px at 20% 10%,rgba(59,130,246,.18),transparent 55%),
radial-gradient(1200px 800px at 85% 20%,rgba(168,85,247,.14),transparent 55%),
linear-gradient(180deg,#f7f7fb,var(--bg));
}
a{color:inherit;text-decoration:none;}
.container{min-height:100%;display:flex;align-items:center;justify-content:center;padding:18px;}
.card{width:100%;max-width:560px;background:var(--card);
backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.card-h{padding:18px;border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.55);}
.h1{margin:0;font-size:18px;font-weight:800;letter-spacing:.2px;}
.sub{margin:6px 0 0;color:var(--muted);font-size:12px;}
.card-b{padding:16px;}
.field{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
label{font-size:12px;color:var(--muted);}
input{padding:12px 12px;border-radius:14px;border:1px solid var(--stroke);
background:rgba(255,255,255,.75);outline:none;color:var(--text);}
input:focus{border-color:rgba(59,130,246,.35);box-shadow:0 0 0 4px rgba(59,130,246,.14);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.06);
background:rgba(17,24,39,.92);color:#fff;font-weight:700;cursor:pointer;}
.btn{transition:transform .12s ease, box-shadow .12s ease, filter .12s ease, border-color .12s ease;}
.btn:hover{filter:brightness(1.02);box-shadow:0 10px 24px rgba(2,6,23,.08);border-color:rgba(0,0,0,.10);}
.btn:active{transform:translateY(1px);}
.btn.secondary{background:rgba(255,255,255,.75);color:var(--text);}
.btn.danger{background:rgba(239,68,68,.92);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:520px){.grid2{grid-template-columns:1fr;}}
.small{font-size:12px;color:var(--muted);line-height:1.5;}
.footer{padding:14px 18px;color:var(--muted);font-size:12px;border-top:1px solid var(--stroke);background:rgba(255,255,255,.45);}
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:rgba(17,24,39,.92);
color:#fff;padding:10px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:.2s;}
.toast.show{opacity:1;top:18px;}
.preview{margin-top:14px;padding:14px;border-radius:14px;border:1px solid var(--stroke);
background:rgba(255,255,255,.55);}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 10px;border-radius:999px;
background:rgba(17,24,39,.08);color:var(--text);}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.link{color:rgba(17,24,39,.9);text-decoration:underline;text-underline-offset:3px;}

table th,table td{padding:8px;font-size:13px;white-space:nowrap;}
table{font-size:13px;}
.card{max-width:1000px;}



:root {
  color-scheme: light;
}

html, body {
  background: #f7f7fb !important;
}

.card {
  background: rgba(255,255,255,0.85) !important;
}

.card-h,
.footer,
.preview {
  background: rgba(255,255,255,0.7) !important;
}

input,
table,
th,
td {
  background: rgba(255,255,255,0.9) !important;
}