/* ===== 半亩塘 · 后台 UI 基座（配色与画布节点一致） ===== */
:root{
  --bg:#101012; --bg0:#0b0b0d; --bg2:#151517;
  --canvas-bg:#0f1012; --dot:#1f2023;
  --panel:#1b1c1f; --panel2:#242528; --panel3:#2b2c31; --panel4:#34353b;
  --line:#2a2b2f; --line2:#3a3b40;
  --txt:#e8e8ea; --txt2:#c2c4cc; --dim:#9a9ba1; --dim2:#5f6066;
  --acc:#f2f3f5; --acc2:#c9cbd2; --acc-ink:#141416;
  --acc-soft:rgba(255,255,255,.10); --acc-line:rgba(255,255,255,.30);
  --grad:linear-gradient(135deg,#f4f5f7,#c2c4cc);
  --ok:#35c98a; --warn:#ffb020; --err:#ff7a6b;
  --c-text:#e8e9ec; --c-image:#c6c8cf; --c-video:#a2a4ab; --c-audio:#82848b;
  --r:10px; --r2:14px;
  --fs:14px;
  --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}
html[data-theme="ocean"]{
  --acc:#4ea8ff; --acc2:#8ccbff; --acc-ink:#03131f;
  --acc-soft:rgba(78,168,255,.16); --acc-line:rgba(78,168,255,.55);
  --grad:linear-gradient(135deg,#5fb6ff,#2b7cf0);
  --panel:#151a22; --panel2:#1c222c; --panel3:#232b36; --panel4:#2c3542;
  --line:#222a35; --line2:#33404f;
  --txt:#eaf1f9; --txt2:#c2cee0; --dim:#94a3b8; --dim2:#5d6b7e;
  --warn:#ffd479;
}
html[data-theme="amber"]{
  --acc:#ffb020; --acc2:#ffd166; --acc-ink:#1a1204;
  --acc-soft:rgba(255,176,32,.16); --acc-line:rgba(255,176,32,.5);
  --grad:linear-gradient(135deg,#ffc247,#ff8a00);
  --panel:#1a1814; --panel2:#221f19; --panel3:#2b2721; --panel4:#35302a;
  --line:#2a2620; --line2:#3d372e;
  --txt:#f6efe3; --txt2:#d8ccb8; --dim:#a2957f; --dim2:#6b6255;
  --warn:#ffd166;
}
html[data-theme="mint"]{
  --acc:#35c98a; --acc2:#7fe7b8; --acc-ink:#04150d;
  --acc-soft:rgba(53,201,138,.16); --acc-line:rgba(53,201,138,.5);
  --grad:linear-gradient(135deg,#4ee0a0,#12a86e);
  --panel:#141a18; --panel2:#1a2320; --panel3:#212c28; --panel4:#2a3733;
  --line:#1f2a26; --line2:#2f3d37;
  --txt:#e8f5ef; --txt2:#c2d8cf; --dim:#8fa79e; --dim2:#5b6d66;
  --warn:#ffd479;
}
html[data-theme="gold"]{
  --acc:#e8c069; --acc2:#f6e3ad; --acc-ink:#1a1405;
  --acc-soft:rgba(232,192,105,.16); --acc-line:rgba(232,192,105,.5);
  --grad:linear-gradient(135deg,#f6e3ad,#c39a3c);
  --panel:#1a1916; --panel2:#22211c; --panel3:#2b2a23; --panel4:#35332b;
  --line:#2a2823; --line2:#3d3a31;
  --txt:#f5efe2; --txt2:#d6cdb6; --dim:#a29882; --dim2:#6a6455;
  --warn:#ffd479;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);
  font-size:var(--fs);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
::selection{background:var(--acc-soft);color:var(--txt)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--panel4);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line2)}

/* ===== 通用元件 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 16px;border-radius:9px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--txt);font-size:13.5px;font-weight:500;
  transition:.16s ease;white-space:nowrap;user-select:none;
}
.btn:hover{background:var(--panel3);border-color:var(--panel4);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primary{background:var(--grad);color:var(--acc-ink);border-color:transparent;font-weight:650}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--panel2)}
.btn.sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:7px}
.btn.danger{color:var(--err);border-color:rgba(255,122,107,.35)}
.btn.danger:hover{background:rgba(255,122,107,.1)}
.btn.block{width:100%}

.input,.select,.textarea{
  width:100%;height:40px;padding:0 12px;border-radius:9px;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  outline:none;transition:.15s;
}
.textarea{height:auto;padding:10px 12px;resize:vertical;min-height:76px;line-height:1.6}
.input::placeholder,.textarea::placeholder{color:var(--dim2)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--acc-line);background:var(--bg0)}
.input.err{border-color:rgba(255,122,107,.6)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2 6 8.2l4-4' fill='none' stroke='%239a9ba1' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.field > label{font-size:12.5px;color:var(--dim);letter-spacing:.02em}
.hint{font-size:11.5px;color:var(--dim2);line-height:1.5}
.hint.bad{color:var(--err)}
.hint.good{color:var(--ok)}

.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--dim)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.badge{
  display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 8px;
  border-radius:6px;font-size:11.5px;background:var(--panel3);color:var(--txt2);
  border:1px solid var(--line);white-space:nowrap;
}
.badge.ok{color:var(--ok);border-color:rgba(53,201,138,.35);background:rgba(53,201,138,.1)}
.badge.warn{color:var(--warn);border-color:rgba(255,176,32,.35);background:rgba(255,176,32,.1)}
.badge.err{color:var(--err);border-color:rgba(255,122,107,.35);background:rgba(255,122,107,.1)}
.badge.acc{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft)}

.card{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r2);
}

/* 点阵画布底 */
.dotbg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:var(--canvas-bg);
  background-image:radial-gradient(circle,var(--dot) 1px,transparent 1px);
  background-size:24px 24px;
}
.dotbg::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,transparent 40%,var(--bg0) 100%);
}

/* toast */
#toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);
  background:var(--panel3);border:1px solid var(--line2);color:var(--txt);
  padding:10px 18px;border-radius:10px;font-size:13px;z-index:9999;
  opacity:0;pointer-events:none;transition:.24s ease;
  box-shadow:0 12px 40px rgba(0,0,0,.55);max-width:82vw;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.err{border-color:rgba(255,122,107,.5);color:#ffb3a8}
#toast.ok{border-color:rgba(53,201,138,.5);color:#8fe6c1}

/* modal */
.overlay{
  position:fixed;inset:0;background:rgba(6,6,8,.72);backdrop-filter:blur(7px);
  z-index:900;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:.2s;
}
.overlay.show{opacity:1;pointer-events:auto}
.modal{
  width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line2);
  border-radius:16px;padding:26px 24px;position:relative;
  transform:translateY(10px) scale(.985);transition:.24s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 30px 90px rgba(0,0,0,.6);max-height:92vh;overflow:auto;
}
.overlay.show .modal{transform:none}
.modal h2{margin:0 0 4px;font-size:19px;font-weight:650;letter-spacing:-.01em}
.modal .sub{margin:0 0 20px;font-size:12.5px;color:var(--dim)}
.modal .x{
  position:absolute;right:14px;top:14px;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:18px;
}
.modal .x:hover{background:var(--panel3);color:var(--txt)}

.tabs{display:flex;gap:4px;background:var(--bg2);padding:4px;border-radius:10px;margin-bottom:20px;border:1px solid var(--line)}
.tabs button{flex:1;height:32px;border-radius:7px;font-size:13px;color:var(--dim);transition:.15s}
.tabs button.on{background:var(--panel3);color:var(--txt);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tabs button:hover:not(.on){color:var(--txt2)}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  text-align:left;font-weight:500;color:var(--dim);font-size:12px;
  padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;background:var(--panel);z-index:1;
}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:hover{background:var(--panel2)}
.tbl tbody tr:last-child td{border-bottom:0}
.empty{padding:44px 16px;text-align:center;color:var(--dim2);font-size:13px}

.skel{background:linear-gradient(90deg,var(--panel2),var(--panel3),var(--panel2));background-size:200% 100%;animation:sh 1.4s infinite;border-radius:6px;height:14px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}