:root{
  --bg:#f4f6fb;
  --bg-2:#eef2f8;
  --panel:#ffffff;
  --panel-2:#ffffff;
  --line:#d9e1ee;
  --line-soft:#cdd7e6;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#2563eb;
  --brand-2:#1d4ed8;
  --ok:#15803d;
  --err:#b91c1c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  color:var(--text);
  margin:0;
}
.wrap{max-width:1120px;margin:24px auto;padding:16px}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}
a{color:var(--brand-2)}
button,.btn{
  padding:9px 12px;
  border-radius:10px;
  border:1px solid #c7d3e6;
  background:#f8fafc;
  color:#1f2937;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:all .14s ease;
}
button:hover,.btn:hover{background:#eef2f7}
.btn-primary{background:#2563eb;border-color:#2563eb;color:#fff}
.btn-primary:hover{background:#1d4ed8}
.btn-secondary{background:#eef2f7;border-color:#cbd5e1}
.btn-danger{background:#fee2e2;border-color:#fecaca;color:#7f1d1d}
.btn-danger:hover{background:#fecaca}
.muted{color:var(--muted)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #d4deec;font-size:12px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.menu-toggle{display:inline-block}
.menu-links{display:none;gap:8px;align-items:center;flex-wrap:wrap}
.menu-links.open{display:flex}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
input,select,textarea{
  padding:9px;
  border-radius:10px;
  border:1px solid var(--line-soft);
  background:#fff;
  color:var(--text);
  max-width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:#93c5fd;box-shadow:0 0 0 2px rgba(147,197,253,.35)}
textarea{min-height:90px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
pre,.out{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  margin-top:10px;
  max-width:100%;
  overflow:auto;
}
.toast{position:fixed;right:16px;bottom:16px;max-width:320px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:9999;display:none}
.toast.show{display:block}
.toast.ok{border-color:#86efac}
.toast.err{border-color:#fca5a5}

:root[data-theme="dark"]{
  --bg:#060912;
  --bg-2:#0a1224;
  --panel:#0e172b;
  --panel-2:#121f38;
  --line:#2a3f68;
  --line-soft:#41577e;
  --text:#e8f0ff;
  --muted:#9eb2d6;
  --brand:#68a8ff;
  --brand-2:#8fc2ff;
  --ok:#37c38b;
  --err:#ff7e91;
}

:root[data-theme="dark"] .card{box-shadow:0 14px 40px rgba(0,0,0,.35)}
:root[data-theme="dark"] button,
:root[data-theme="dark"] .btn{background:#1a3465;border-color:#4368a8;color:#eef5ff}
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .btn:hover{background:#23427d}
:root[data-theme="dark"] .btn-primary{background:#2557a6;border-color:#6ea2ea;color:#fff}
:root[data-theme="dark"] .btn-primary:hover{background:#3067bd}
:root[data-theme="dark"] .btn-secondary{background:#162d57;border-color:#3f67a5;color:#eef5ff}
:root[data-theme="dark"] .btn-danger{background:#5f2130;border-color:#a64b5d;color:#ffd9df}
:root[data-theme="dark"] .btn-danger:hover{background:#7a2a3d}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{background:#0b1630;color:var(--text);border-color:var(--line-soft)}
:root[data-theme="dark"] pre,
:root[data-theme="dark"] .out{background:#0a1530}
:root[data-theme="dark"] .toast{background:#0d1b3a;color:var(--text);border-color:var(--line)}

.theme-toggle-btn{
  position:fixed;
  right:16px;
  top:16px;
  z-index:10000;
}

.mobile-tabbar{display:none}

@media (max-width:760px){
  body{padding-bottom:78px}
  .mobile-tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:4px;justify-content:space-around;align-items:center;background:var(--panel);border-top:1px solid var(--line);padding:8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));z-index:9998}
  .mobile-tab{color:var(--muted);text-decoration:none;font-size:12px;padding:6px 8px;border-radius:8px}
  .mobile-tab.active{color:var(--brand-2);background:rgba(37,99,235,.12)}
}

@media (max-width:640px){
  .wrap{padding:12px;margin:14px auto}
  h1{font-size:1.35rem}
  h2{font-size:1.2rem}
  h3{font-size:1.02rem}
  button,.btn{padding:8px 10px}
  .menu-toggle{display:inline-block}
  .menu-links{display:none;width:100%;flex-direction:column;align-items:stretch}
  .menu-links.open{display:flex}
  .theme-toggle-btn{top:auto;bottom:16px}
}