/* LocalOps shell — Target Shell 2026-09-13 */
:root {
  --paper:#0F1118; --raise:#161922; --well:#1D2029;
  --ink:#E8EAF0; --ink-soft:#A8AEBF; --ink-faint:#79808F;
  --rule:#272B38; --rule-soft:#1D2029;
  --accent:#8E9BF5; --accent-soft:rgba(142,155,245,.14);
  --hard:#E88BA4; --degrade:#D9B968; --ok:#3dd68c; --stop:#E88BA4;
  --rail:56px; --rail-open:156px; --sec:240px;
  --sans:system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:Georgia,"Songti SC","Source Han Serif SC",serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --paper:#FBFBFD; --raise:#FFFFFF; --well:#EDEFF5;
    --ink:#16191F; --ink-soft:#4A5060; --ink-faint:#767D8E;
    --rule:#E2E4EC; --rule-soft:#EDEFF5;
    --accent:#3D4EC7; --accent-soft:rgba(61,78,199,.10);
    --hard:#9B2C4A; --degrade:#7D6318; --ok:#1a7f4e; --stop:#9B2C4A;
  }
}
:root[data-theme="light"] {
  --paper:#FBFBFD; --raise:#FFFFFF; --well:#EDEFF5;
  --ink:#16191F; --ink-soft:#4A5060; --ink-faint:#767D8E;
  --rule:#E2E4EC; --rule-soft:#EDEFF5;
  --accent:#3D4EC7; --accent-soft:rgba(61,78,199,.10);
  --hard:#9B2C4A; --degrade:#7D6318; --ok:#1a7f4e; --stop:#9B2C4A;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { color-scheme: dark light; height:100%; }
body {
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  height:100%; line-height:1.45; font-variant-numeric:tabular-nums;
}
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mono { font-family:var(--mono); font-size:.82em; }
.app { display:flex; height:100vh; overflow:hidden; position:relative; }

/* primary rail */
.rail {
  width:var(--rail); flex-shrink:0; background:var(--raise);
  border-right:1px solid var(--rule); display:flex; flex-direction:column;
  padding:10px 0; gap:2px; transition:width .15s; z-index:6;
}
.rail.open { width:var(--rail-open); }
.rail-item {
  display:flex; align-items:center; gap:10px; margin:0 8px; padding:8px 10px;
  border:1px solid transparent; border-radius:8px; background:transparent;
  color:var(--ink-soft); cursor:pointer; text-decoration:none; font-size:.85rem;
  font-family:var(--sans); width:auto; text-align:left;
}
.rail-item .ico {
  width:20px; height:20px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-faint);
}
.rail-item .ico svg { display:block; }
.rail-item .lbl { display:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail.open .rail-item .lbl { display:inline; }
.rail-item:hover, .rail-item[aria-current="page"] {
  background:var(--accent-soft); color:var(--accent); border-color:var(--rule);
}
.rail-item:hover .ico, .rail-item[aria-current="page"] .ico { color:var(--accent); }
.rail-item[disabled], .rail-item.is-disabled {
  opacity:.42; cursor:not-allowed; pointer-events:auto;
}
.rail-item[disabled]:hover, .rail-item.is-disabled:hover {
  background:transparent; color:var(--ink-soft); border-color:transparent;
}
.rail-item[disabled]:hover .ico, .rail-item.is-disabled:hover .ico { color:var(--ink-faint); }
.rail-spacer { flex:1; }
.rail-sep {
  height:1px; background:var(--rule); margin:6px 14px;
}
.rail-toggle { margin-top:2px; }

/* secondary */
.sec {
  width:var(--sec); flex-shrink:0; background:var(--raise);
  border-right:1px solid var(--rule); display:flex; flex-direction:column; min-width:0;
  position:relative; z-index:5;
}
.sec.collapsed { width:36px; }
.sec.hidden { display:none; }
.sec-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 10px 8px; border-bottom:1px solid var(--rule); font-size:.78rem;
  color:var(--ink-faint); font-family:var(--mono);
}
.sec.collapsed .sec-head span, .sec.collapsed .tree, .sec.collapsed .sec-body { display:none; }
.sec-resizer {
  position:absolute; top:0; right:-3px; width:6px; height:100%; cursor:col-resize; z-index:2;
}
.sec-body, .tree { flex:1; overflow:auto; padding:6px 0 12px; min-height:0; }
.sec-filter {
  padding:8px 10px; border-bottom:1px solid var(--rule);
}
.sec-filter input {
  width:100%; background:var(--well); border:1px solid var(--rule); color:var(--ink);
  border-radius:8px; padding:6px 10px; font-size:.82rem; font-family:var(--sans);
}

/* tree */
.trow {
  position:relative; display:flex; align-items:center; gap:6px;
  min-height:30px; padding:4px 10px 4px 0; cursor:pointer; border-radius:8px; margin:1px 6px;
  color:var(--ink); user-select:none;
}
.trow:hover { background:color-mix(in srgb, var(--well) 80%, transparent); }
.trow.selected { background:var(--accent-soft); }
.trow .slot {
  position:relative; width:18px; flex-shrink:0; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
}
.trow .chev {
  position:absolute; inset:0; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-faint);
}
.trow .chev svg { width:12px; height:12px; }
.trow.leaf .chev { visibility:hidden; }
.trow .gico {
  width:16px; height:16px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.trow.leaf .gico { color:var(--ink-faint); }
.trow .name {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem;
}
.trow.group > .name { font-weight:650; }
.trow.subgroup > .name { font-weight:500; }
.trow.leaf > .name { font-weight:400; color:var(--ink-soft); }
.trow .cnt {
  font-family:var(--mono); font-size:.7rem; color:var(--ink-faint);
  background:var(--well); border-radius:999px; padding:1px 7px; flex-shrink:0;
}
.trow[data-depth="1"] { padding-left:16px; }
.trow[data-depth="2"] { padding-left:32px; }
.trow[data-depth="3"] { padding-left:48px; }
.trow[data-depth="1"]::before,
.trow[data-depth="2"]::before,
.trow[data-depth="3"]::before {
  content:''; position:absolute; left:14px; top:0; bottom:50%;
  border-left:1px dashed var(--rule); border-bottom:1px dashed var(--rule); width:10px;
  pointer-events:none;
}
.trow[data-depth="2"]::before { left:30px; }
.trow[data-depth="3"]::before { left:46px; }

/* drag states */
.trow.dragging, .table tr.dragging { opacity:.55; }
.trow.valid-drop, .table tr.valid-drop, .drop-zone.valid-drop {
  outline:1px dashed var(--ok); outline-offset:-1px; background:color-mix(in srgb, var(--ok) 12%, var(--raise));
}
.trow.invalid-drop, .table tr.invalid-drop, .drop-zone.invalid-drop {
  outline:1px dashed var(--stop); outline-offset:-1px; background:color-mix(in srgb, var(--stop) 10%, var(--raise));
}
.trow.dropping, .table tr.dropping { outline:1px solid var(--accent); background:var(--accent-soft); }
.drop-zone {
  margin:4px 10px; padding:8px; border:1px dashed var(--rule); border-radius:8px;
  font-size:.78rem; color:var(--ink-faint); text-align:center;
}
body.is-dragging { cursor:grabbing; }
body.is-dragging .trow, body.is-dragging .table tr { cursor:grabbing; }

/* main */
.main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; border-bottom:1px solid var(--rule); background:var(--raise); flex-shrink:0;
}
.topbar h1 { font-family:var(--serif); font-size:1.05rem; font-weight:600; }
.topbar .sub { color:var(--ink-soft); font-size:.8rem; margin-top:2px; }
.top-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.work { flex:1; overflow:auto; padding:14px 16px 28px; }
.btn {
  appearance:none; border:1px solid var(--rule); background:var(--well); color:var(--ink);
  border-radius:8px; padding:6px 11px; font-size:.82rem; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); line-height:1.2;
}
.btn svg { flex-shrink:0; }
.btn:hover { border-color:var(--ink-faint); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#0b1220; font-weight:650; }
.btn-ok { color:var(--ok); }
.btn-danger { color:var(--stop); }
.btn-ghost { background:transparent; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }
.badge {
  font-family:var(--mono); font-size:.7rem; padding:2px 8px; border-radius:999px;
  background:var(--well); border:1px solid var(--rule); display:inline-flex; align-items:center; gap:5px;
}
.badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--ink-faint); }
.badge.on::before { background:var(--ok); }
.badge.off::before { background:var(--stop); }
.degrade {
  font-size:.78rem; color:var(--degrade); border:1px solid color-mix(in srgb, var(--degrade) 35%, var(--rule));
  background:color-mix(in srgb, var(--degrade) 10%, var(--raise));
  border-radius:8px; padding:8px 10px; margin-bottom:12px; line-height:1.4;
}
.banner {
  background:var(--raise); border:1px solid var(--rule); border-radius:8px;
  padding:10px 12px; margin-bottom:12px; font-size:.85rem;
}
.banner code {
  font-family:var(--mono); background:var(--well); border:1px solid var(--rule);
  border-radius:6px; padding:1px 6px; word-break:break-all;
}
.table { width:100%; border-collapse:collapse; font-size:.88rem; }
.table th {
  text-align:left; font-family:var(--mono); font-size:.72rem; color:var(--ink-faint);
  font-weight:500; padding:8px 10px; border-bottom:1px solid var(--rule);
}
.table td { padding:9px 10px; border-bottom:1px solid var(--rule-soft); vertical-align:middle; height:40px; }
.table tr { cursor:pointer; }
.table tr:hover td { background:color-mix(in srgb, var(--well) 55%, transparent); }
.table tr.selected td { background:var(--accent-soft); }
.table .name { font-weight:500; }
.table .ops { white-space:nowrap; }
.table .ops .btn { padding:4px 8px; font-size:.78rem; }
.cmd-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.cmd-bar input, .cmd-bar select, input, select, textarea {
  background:var(--well); border:1px solid var(--rule); color:var(--ink);
  border-radius:8px; padding:7px 10px; font-size:.9rem; font-family:var(--sans);
}
.cmd-bar input { flex:1; min-width:140px; }
.log {
  background:var(--well); border:1px solid var(--rule); border-radius:8px; padding:12px;
  font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); max-height:320px; overflow:auto; white-space:pre-wrap;
}
.kbd { font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); }
.panel {
  background:var(--raise); border:1px solid var(--rule); border-radius:8px; padding:14px; margin-bottom:12px;
}
.panel h3 { font-size:.92rem; font-weight:650; margin-bottom:8px; }
.panel p, .panel li { color:var(--ink-soft); font-size:.86rem; line-height:1.5; }
.meta-grid { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:.84rem; }
.meta-grid dt { font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); }
.meta-grid dd { color:var(--ink); word-break:break-all; }
.history { list-style:none; margin-top:8px; }
.history li {
  font-family:var(--mono); font-size:.74rem; color:var(--ink-soft);
  padding:6px 0; border-bottom:1px solid var(--rule-soft);
}
.empty { color:var(--ink-faint); font-size:.86rem; padding:24px 8px; text-align:center; }

/* drawer */
.drawer-root { position:fixed; inset:0; pointer-events:none; z-index:40; }
.drawer-root.open { pointer-events:auto; }
.drawer-dim { position:absolute; inset:0; background:rgba(0,0,0,.28); opacity:0; transition:opacity .15s; }
.drawer-root.open .drawer-dim { opacity:1; }
.drawer {
  position:absolute; top:0; right:0; height:100%; width:min(420px,92vw);
  background:var(--raise); border-left:1px solid var(--rule);
  transform:translateX(100%); transition:transform .15s; display:flex; flex-direction:column;
}
.drawer-root.open .drawer { transform:none; }
.drawer-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:14px 14px 10px; border-bottom:1px solid var(--rule);
}
.drawer-body { flex:1; overflow:auto; padding:14px; }
.drawer-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.drawer-section { margin-top:16px; }
.drawer-section h4 {
  font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); font-weight:500; margin-bottom:8px;
}
.note {
  display:block; margin-top:10px; font-size:.78rem; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--rule); padding:6px 10px; border-radius:8px;
}

/* auth */
.auth-center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 12px; }
.auth-card { width:min(400px,92vw); background:var(--raise); border:1px solid var(--rule); border-radius:8px; padding:22px; }
.auth-card h1 { font-family:var(--serif); font-size:1.25rem; margin-bottom:6px; text-wrap:balance; }
.auth-card .sub { color:var(--ink-soft); font-size:.9rem; margin-bottom:8px; }
.auth-card label { display:block; font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); margin:12px 0 6px; }
.auth-card input { width:100%; }
.auth-card .btn { width:100%; justify-content:center; margin-top:16px; padding:10px; }
.auth-mark { display:flex; align-items:center; gap:10px; margin-bottom:10px; color:var(--accent); }
.callout-hard {
  margin:12px 0 8px; padding:10px 12px; border-radius:8px; font-size:.875rem; line-height:1.45;
  color:var(--hard); border:1px solid color-mix(in srgb, var(--hard) 40%, var(--rule));
  border-left:3px solid var(--hard); background:color-mix(in srgb, var(--hard) 10%, var(--raise));
}
.err { color:var(--hard); font-size:.875rem; margin-top:10px; min-height:1.2em; }
.hint { margin-top:12px; color:var(--ink-faint); font-size:.8rem; line-height:1.5; }

/* tip */
#tip {
  position:fixed; z-index:90; pointer-events:none; max-width:260px;
  background:var(--raise); color:var(--ink); border:1px solid var(--rule);
  border-radius:8px; padding:7px 10px; font-size:.78rem; line-height:1.35;
  box-shadow:none; opacity:0; transform:translateY(2px); transition:opacity .08s;
}
#tip.show { opacity:1; transform:none; }
#tip .arrow {
  position:absolute; width:8px; height:8px; background:var(--raise); border-left:1px solid var(--rule);
  border-top:1px solid var(--rule); transform:rotate(45deg);
}
.toast {
  position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:95;
  background:var(--raise); border:1px solid var(--rule); padding:8px 14px; border-radius:8px;
  font-size:.85rem; opacity:0; transition:opacity .15s; max-width:min(520px,92vw); text-align:center;
}
.toast.show { opacity:1; }
.toast.err { border-color:color-mix(in srgb, var(--stop) 45%, var(--rule)); color:var(--stop); }

/* confirm dialog */
.confirm-root {
  position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35);
}
.confirm-root.open { display:flex; }
.confirm-card {
  width:min(380px,92vw); background:var(--raise); border:1px solid var(--rule);
  border-radius:8px; padding:18px;
}
.confirm-card h3 { font-size:1rem; margin-bottom:8px; font-family:var(--serif); }
.confirm-card p { color:var(--ink-soft); font-size:.88rem; margin-bottom:14px; }
.confirm-actions { display:flex; gap:8px; justify-content:flex-end; }

/* mobile sheet */
.sheet-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:30;
}
.sheet-backdrop.open { display:block; }
.btn-nav { display:none; }

@media (prefers-reduced-motion: reduce) {
  *, .drawer, .drawer-dim, .rail, #tip { transition:none !important; }
}
@media (max-width:820px) {
  .btn-nav { display:inline-flex; }
  .rail, .sec {
    position:fixed; top:0; bottom:0; left:0; z-index:35;
    transform:translateX(-110%); transition:transform .15s;
  }
  .rail.sheet-open, .sec.sheet-open { transform:none; }
  .sec { left:var(--rail); max-width:min(280px,70vw); }
  .sec.collapsed { width:var(--sec); }
  .drawer { width:100vw; }
}

/* 2026-10-28f: service detail card + table links */
#work > .table + .panel, #work > .banner + .panel { margin-top:14px; }
.table td a, .meta-grid dd a { color:var(--accent); text-decoration:none; }
.table td a:hover, .meta-grid dd a:hover { text-decoration:underline; }
.meta-grid dd code { font-family:var(--mono); font-size:.78rem; }

/* 2026-10-28h: 用户体系 */
[hidden] { display:none !important; }
.user-menu { position:relative; }
.user-btn .uname { max-width:9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge.role-admin { color:var(--accent); }
.badge.role-operator { color:var(--degrade); }
.table-wrap { overflow-x:auto; }
.users-table tr { cursor:default; }
.users-table .ops { display:flex; gap:6px; flex-wrap:wrap; }
.table td.wrap { max-width:46ch; word-break:break-all; }
.hint { color:var(--ink-faint); font-size:.8rem; line-height:1.45; }
/* 账户面板入口（侧栏 / 顶栏）展开态 */
.rail-item[data-panel].panel-open, .user-btn[aria-expanded="true"] { background:var(--accent-soft); color:var(--accent); }
.rail-item[data-panel].panel-open .ico { color:var(--accent); }
@media (max-width:820px) { .user-btn .uname { display:none; } .topbar .sub { display:none; } }