:root{
  --bg:#f3f5f9; --card:#ffffff; --line:#e3e7ee;
  --txt:#1f2733; --dim:#8a93a3;
  --brand:#f26419; --brand-d:#d95410; --brand-soft:#fff1e8;
  --green:#1f9d57; --green-soft:#e7f7ee;
  --red:#e5484d; --red-soft:#fdebec;
  --blue:#2f7de1; --blue-soft:#eaf2fd;
  --orange:#e07b1f; --orange-soft:#fdf3e3;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:"Microsoft YaHei","Segoe UI",sans-serif;font-size:14px}
.hidden{display:none!important}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{width:380px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:34px 36px 30px;box-shadow:0 8px 30px rgba(31,39,51,.08)}
.brand{font-size:26px;font-weight:bold;text-align:center;color:var(--txt)}
.brand-sub{text-align:center;color:var(--brand);font-weight:bold;margin:4px 0 22px}
.lab{display:block;color:var(--dim);margin:10px 0 5px}
.err{color:var(--red);min-height:22px;font-size:13px;margin-top:8px}

.field{display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:7px;background:#fff;max-width:320px;vertical-align:middle}
.field.wide{width:100%;max-width:100%}
.field:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.field input,.field select,.field textarea{
  border:0;outline:0;padding:8px 10px;background:transparent;
  font:inherit;color:var(--txt);width:100%;min-width:0}
.field textarea{resize:vertical;min-height:92px;font-family:inherit}
.field .x{border:0;background:transparent;color:var(--dim);cursor:pointer;
  font-size:17px;line-height:1;padding:0 10px;align-self:stretch}
.field .x:hover{color:var(--red)}

.btn{border:1px solid var(--line);background:#fff;color:var(--txt);
  border-radius:7px;padding:7px 15px;cursor:pointer;font-size:13px;
  font-family:inherit;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-d);color:#fff}
.btn.danger:hover{border-color:var(--red);color:var(--red)}
.btn.sm{padding:3px 9px;font-size:12px;border-radius:5px}
.btn.block{width:100%;padding:9px;font-size:15px;font-weight:bold;margin-top:6px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.ghost{background:transparent}

.app{display:flex;min-height:100vh}
.side{width:184px;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;flex:none}
.logo{font-size:17px;font-weight:bold;text-align:center;padding:20px 8px;
  color:var(--brand);border-bottom:1px solid var(--line);line-height:1.35}
#nav{padding:10px 0;flex:1}
.nav-item{display:block;padding:12px 22px;cursor:pointer;color:#4a5466;
  border-left:3px solid transparent;font-size:14px}
.nav-item:hover{background:#fafbfd}
.nav-item.active{background:var(--brand-soft);color:var(--brand);
  border-left-color:var(--brand);font-weight:bold}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:58px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;flex:none}
.ptitle{font-size:17px;font-weight:bold}
.me{display:flex;align-items:center;gap:10px;color:#4a5466}
.role-tag{font-size:12px;background:#eef1f6;color:#6a7484;border-radius:10px;padding:2px 9px}
.view{padding:20px 22px;flex:1;overflow:auto}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.card .t{color:var(--dim);font-size:13px;margin-bottom:8px}
.card .n{font-size:30px;font-weight:bold;font-family:Consolas,monospace}
.card .sub{color:var(--dim);font-size:12px;margin-top:6px}
.sign-row{display:flex;justify-content:space-between;align-items:center;
  border-top:1px dashed var(--line);padding:5px 0;font-size:13px}
.sign-row:first-of-type{border-top:0}
.sign-row .v{font-weight:bold;font-family:Consolas,monospace;margin-left:10px}
.sign-row .c{color:var(--dim);font-size:12px;font-family:Consolas,monospace}
.c-orange{color:var(--orange)}.c-red{color:var(--red)}
.c-green{color:var(--green)}.c-blue{color:var(--blue)}

.panel{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;margin-bottom:18px}
.panel h3{margin:0 0 12px;font-size:15px;display:flex;justify-content:space-between;
  align-items:center}
table{width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
th,td{border-bottom:1px solid var(--line);text-align:center;
  height:2em;padding:0 10px;font-size:14px;white-space:nowrap}
th{background:#f7f9fc;color:#525c6e;font-weight:600;height:2.4em}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfd}
.empty{color:var(--dim);padding:18px!important}
.ellipsis{max-width:280px;overflow:hidden;text-overflow:ellipsis}
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.toolbar .grow{flex:1}
.hint{color:var(--dim);font-size:12px}
.row-msg{font-size:13px;margin-left:10px}
.row-msg.ok{color:var(--green)}.row-msg.err{color:var(--red)}

.b{display:inline-block;padding:2px 10px;border-radius:11px;font-size:12px}
.b-orange{background:var(--orange-soft);color:var(--orange)}
.b-green{background:var(--green-soft);color:var(--green)}
.b-red{background:var(--red-soft);color:var(--red)}
.b-blue{background:var(--blue-soft);color:var(--blue)}
.b-gray{background:#eef1f6;color:#6a7484}

.modal-mask{position:fixed;inset:0;background:rgba(31,39,51,.4);
  display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:12px;padding:22px 26px;width:440px;max-height:88vh;overflow:auto}
.modal h3{margin:0 0 16px}
.form-row{margin-bottom:13px}
.form-row label{display:block;color:var(--dim);font-size:13px;margin-bottom:5px}
.form-row .field{max-width:100%;width:100%}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.perm-box{border:1px solid var(--line);border-radius:7px;padding:9px 12px}
.perm-box label{display:inline-block;margin:4px 14px 0 0;color:var(--txt);font-size:13px}

.drawer-mask{position:fixed;inset:0;background:rgba(31,39,51,.35);z-index:40}
.drawer{position:fixed;right:0;top:0;bottom:0;width:520px;background:#fff;z-index:41;
  box-shadow:-4px 0 20px rgba(31,39,51,.12);display:flex;flex-direction:column}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex:none}
.drawer-body{flex:1;overflow:auto;padding:16px 20px}
.kv{display:grid;grid-template-columns:92px 1fr;gap:6px 10px;font-size:13px;margin-bottom:14px}
.kv .k{color:var(--dim);text-align:right}
.msg{margin-bottom:12px}
.msg .meta{font-size:12px;color:var(--dim);margin-bottom:3px}
.msg .bubble{background:#f5f7fa;border-radius:8px;padding:8px 12px;
  font-size:13px;white-space:pre-wrap;word-break:break-all;text-align:left;
  display:inline-block;max-width:100%}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tab{padding:6px 16px;border-radius:7px;border:1px solid var(--line);
  background:#fff;cursor:pointer;font-size:13px}
.tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.toast{position:fixed;top:22px;left:50%;transform:translateX(-50%);
  background:#1f2733;color:#fff;padding:9px 20px;border-radius:8px;z-index:99;font-size:13px}
.toast.err{background:var(--red)}