:root{
  --paper:#F4F6F8; --card:#FFFFFF; --ink:#0F172A; --muted:#64748B;
  --green:#0E7C4D; --leaf:#E7F5EE; --amber:#B45309; --amberwash:#FEF3C7;
  --red:#DC2626; --hairline:#E2E8F0; --grey:#94A3B8;
  --radius:8px; --radius-lg:12px; --tnum:font-feature-settings "tnum";
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);font-size:14px}
.app{min-height:100vh}
.topbar{position:sticky;top:0;z-index:20;height:48px;background:var(--card);border-bottom:1px solid var(--hairline);display:flex;align-items:center;padding:0 24px;gap:24px}
.brand{font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--ink);text-decoration:none}
.nav{display:flex;gap:4px}
.nav a{padding:6px 10px;border-radius:var(--radius);color:var(--muted);text-decoration:none;font-size:13px}
.nav a:hover{background:var(--leaf);color:var(--ink)}
.nav a.on{color:var(--green);font-weight:600;background:var(--leaf)}
.menu{margin-left:auto;display:flex;align-items:center;gap:12px}
.content{padding:24px;max-width:1920px;margin:0 auto}
h1{font-size:22px;letter-spacing:-0.01em;margin:0 0 16px}
.muted{color:var(--muted)}
.row{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:16px;box-shadow:none}
.card .k{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.card .v{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:4px}
.btn{height:34px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--hairline);background:var(--card);color:var(--muted);font-size:13px;cursor:pointer;font-family:inherit}
.btn:hover{border-color:var(--grey);color:var(--ink)}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.btn-primary:hover{background:#0A6A41;border-color:#0A6A41;color:#fff}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-ghost{border-color:transparent;background:transparent;color:var(--muted)}
.chip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600}
.chip-green{background:var(--leaf);color:var(--green)}
.chip-amber{background:var(--amberwash);color:var(--amber)}
.chip-grey{background:#F1F5F9;color:var(--muted)}
.chip-red{background:#FEE2E2;color:var(--red)}
.role-chip{padding:4px 8px;border-radius:999px;font-size:11px;font-weight:600;text-transform:capitalize}
.role-admin{background:var(--leaf);color:var(--green)}
.role-editor{background:#F1F5F9;color:var(--muted)}
.role-viewer{background:#F1F5F9;color:var(--grey)}
.toast{position:fixed;top:60px;right:24px;z-index:50;background:var(--card);border:1px solid var(--hairline);border-left:3px solid var(--green);border-radius:var(--radius);padding:10px 14px;box-shadow:none}
.toast-error{border-left-color:var(--red)}
.toast-warn{border-left-color:var(--amber)}
.inline{display:inline}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
input,select,textarea{width:100%;height:34px;border:1px solid var(--hairline);border-radius:var(--radius);padding:0 10px;font-size:13px;font-family:inherit;background:var(--card);color:var(--ink)}
textarea{height:auto;padding:8px 10px;min-height:70px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--leaf);border-color:var(--green)}
.num{font-variant-numeric:tabular-nums}
.pill{display:inline-block;width:10px;height:10px;border-radius:50%}
.login-card{max-width:360px;margin:80px auto;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:14px}
.login-card h1{margin:0}
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);font-size:13px}
.tbl thead th{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--hairline);position:sticky;top:48px;background:var(--card);z-index:5}
.tbl thead th a{color:var(--muted);text-decoration:none}
.tbl thead th a:hover{color:var(--ink)}
.tbl td{padding:6px 10px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.tbl tbody tr:hover{background:var(--leaf)}
.filters{width:100%;border-collapse:collapse;margin-bottom:12px}
.filters th{background:var(--paper)}
.filter-cell{padding:0 6px 0 0;min-width:120px}
.filter-cell input,.filter-cell select{height:30px;font-size:12px}
.pager{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.pager a{color:var(--green);text-decoration:none;padding:4px 8px;border-radius:var(--radius)}
.pager a.on{background:var(--leaf);font-weight:700}
.editor .two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{margin-bottom:10px}
.meta{font-size:12px;color:var(--muted)}
.sticky-save{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--hairline);padding:12px 0;margin-top:14px;display:flex;gap:10px;align-items:center}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(720px,94vw);background:var(--card);border-left:1px solid var(--hairline);z-index:40;overflow-y:auto;padding:24px;box-shadow:none;transform:translateX(100%);transition:transform .18s ease}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.18);z-index:30;opacity:0;pointer-events:none;transition:opacity .18s}
.scrim.open{opacity:1;pointer-events:auto}
.paste-mask{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:60;display:none;align-items:center;justify-content:center}
.paste-mask.open{display:flex}
.paste-box{background:var(--card);border-radius:var(--radius-lg);padding:24px;width:min(880px,94vw);max-height:88vh;overflow:auto}.brand-tree ul{list-style:none;margin:0;padding-left:18px}
.brand-tree>ul{padding-left:0}
.brand-node{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:6px}
.brand-node:hover{background:var(--leaf)}
.brand-node .twist{width:18px;height:18px;border:none;background:none;cursor:pointer;color:var(--muted);font-size:12px}
.brand-node .count{font-size:11px}
.brand-node .brand-actions{display:none;gap:6px;margin-left:auto;font-size:12px}
.brand-node:hover .brand-actions{display:inline-flex}
.brand-node .brand-actions a{color:var(--muted);text-decoration:none}
.child-form.hidden{display:none}
.role-admin{background:var(--amberwash)}
.role-editor{background:var(--leaf)}
.role-viewer{background:#F1F5F9}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.row-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}