:root {
    color-scheme: light;
    --bg: #f4f6f7;
    --surface: #ffffff;
    --surface-muted: #f8f9f9;
    --text: #18201d;
    --muted: #65716c;
    --border: #dce2df;
    --border-strong: #c6cfcb;
    --accent: #147a52;
    --accent-hover: #0f6443;
    --danger: #b42318;
    --shadow: 0 14px 36px rgba(24, 32, 29, 0.14);
    font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    letter-spacing: 0;
}

button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
[hidden] { display:none !important; }
.admin-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin:20px 0}.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:18px}.tool-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.tool-head h2{margin:0;font-size:18px}.inline-form,.mail-form{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.mail-form{display:grid;grid-template-columns:1fr 1fr}.mail-form textarea,.mail-form input:last-of-type{grid-column:1/-1}.inline-form input,.mail-form input,.mail-form textarea{padding:9px;border:1px solid var(--border);border-radius:5px;min-width:0}.mail-form textarea{min-height:60px}.button.danger{background:var(--danger);color:#fff}
[hidden] { display: none !important; }

.sr-only {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.login-view {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #19231f;
}

.login-panel {
    width: min(100%, 380px);
    padding: 32px;
    border: 1px solid #d5dcd9;
    border-radius: 6px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 28px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-weight: 750;
}

.login-panel h1 { margin: 0 0 28px; font-size: 24px; }
.login-panel label { display: block; margin-bottom: 8px; color: var(--muted); font-weight: 600; }
.login-panel input { width: 100%; margin-bottom: 6px; }
.login-panel .button { width: 100%; margin-top: 14px; }

input, select, textarea {
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    outline: none;
}

input, select { height: 38px; padding: 0 11px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20, 122, 82, 0.12); }

.button {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font-weight: 650;
}

.button:hover:not(:disabled) { background: var(--surface-muted); }
.button:disabled { cursor: not-allowed; opacity: 0.46; }
.button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.button.primary:hover:not(:disabled) { background: var(--accent-hover); }
.button.quiet { border-color: transparent; background: transparent; color: var(--muted); }
.button.compact { min-height: 30px; padding: 0 10px; font-size: 12px; }

.dashboard { min-height: 100vh; }

.topbar {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.topbar h1 { margin: 2px 0 0; font-size: 20px; }
.product-kicker { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.service-state { margin-right: 10px; color: var(--accent); font-size: 12px; font-weight: 700; }
.service-state::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); }

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.metric { min-width: 0; padding: 20px 28px; border-right: 1px solid var(--border); }
.metric:last-child { border-right: 0; }
.metric span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.metric strong { display: block; overflow: hidden; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.metric:last-child strong { font-size: 15px; line-height: 27px; }

.workspace { padding: 24px 28px 32px; }
.page-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:4px 0 20px}.page-intro h2{margin:4px 0 6px;font-size:26px;letter-spacing:-.02em}.page-intro p{margin:0;color:var(--muted)}.eyebrow{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.14em}.search-hint{padding:10px 13px;border:1px solid #d9e9df;border-radius:8px;background:#f5fbf7;color:var(--accent);font-size:12px}.muted-text{color:var(--muted);font-size:12px}
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.search-field { flex: 1; max-width: 440px; }
.search-field input { width: 100%; }
.toolbar select { min-width: 190px; }
.result-count { margin-left: auto; color: var(--muted); font-size: 12px; }

.table-wrap { min-height: 420px; overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { height: 50px; padding: 0 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
th { height: 42px; background: var(--surface-muted); color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
th:nth-child(1) { width: 16%; }
th:nth-child(2) { width: 39%; }
th:nth-child(3) { width: 9%; }
th:nth-child(4) { width: 10%; }
th:nth-child(5) { width: 19%; }
th:nth-child(6) { width: 7%; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbf9; }
.cell-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.row-action { border: 0; background: transparent; color: var(--accent); font-weight: 700; }
.row-action:hover { text-decoration: underline; }
.empty-state { display: grid; min-height: 376px; place-items: center; color: var(--muted); }

.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 14px; color: var(--muted); font-size: 12px; }

.drawer {
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    width: min(680px, 92vw);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow-y: auto;
}
.module-area{padding:18px 22px 2px;border-top:1px solid var(--border);background:#fbfcfb}.module-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.module-heading h3{margin:4px 0 0;font-size:16px}.module-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px}.module-tab{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--muted);white-space:nowrap;font-size:12px;font-weight:700}.module-tab:hover{border-color:#99c6ad;color:var(--accent)}.module-tab.active{border-color:var(--accent);background:#eaf6ef;color:var(--accent)}.module-panel{margin:2px 0 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden}.module-panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface-muted)}.module-panel-head strong{display:block;font-size:14px}.module-panel-head span{display:block;margin-top:3px;color:var(--muted);font-size:11px}.module-panel-head em{font-style:normal;color:var(--accent);font-size:11px}.module-json{max-height:180px;margin:0;padding:14px;overflow:auto;color:#33443b;font:11px/1.55 "Cascadia Mono",Consolas,monospace;white-space:pre-wrap}

.drawer-backdrop { position: fixed; z-index: 10; inset: 0; background: rgba(15, 22, 19, 0.32); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.drawer-header h2 { margin: 3px 0 0; font-size: 18px; }
.icon-button { width: 36px; height: 36px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; }
.icon-button:hover { background: var(--surface-muted); color: var(--text); }

.save-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-bottom: 1px solid var(--border); }
.save-meta div { min-width: 0; padding: 13px 22px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.save-meta div:nth-child(2n) { border-right: 0; }
.save-meta div:nth-last-child(-n+2) { border-bottom: 0; }
.save-meta dt { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.save-meta dd { margin: 0; overflow-wrap: anywhere; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }

.editor-field { min-height: 0; display: flex; flex: 1; flex-direction: column; padding: 18px 22px 0; }
.editor-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-weight: 700; }
#jsonEditor { width: 100%; min-height: 260px; flex: 1; resize: none; padding: 14px; line-height: 1.55; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; tab-size: 2; }
.editor-tools{display:flex;gap:8px}.json-visualizer{margin-top:12px;border:1px solid var(--border);border-radius:6px;background:var(--surface-muted);max-height:42vh;overflow:auto}.visualizer-head{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--muted);font-size:12px}.json-tree{padding:8px 0}.json-node-row{display:flex;align-items:center;gap:8px;min-height:30px;padding:3px 10px 3px calc(10px + var(--depth) * 18px);white-space:nowrap}.json-node-row:hover{background:#eef7f1}.json-toggle{width:18px;border:0;background:transparent;color:var(--accent);font-weight:700;padding:0}.json-toggle:disabled{color:var(--border-strong)}.json-node-key{font-family:"Cascadia Mono",Consolas,monospace;font-weight:650}.json-node-type{font-size:10px;padding:2px 5px;border-radius:4px;background:#e5ece8;color:var(--muted)}.json-node-value{max-width:180px;overflow:hidden;text-overflow:ellipsis;color:#8b4d12;font-family:"Cascadia Mono",Consolas,monospace}.json-node-help{margin-left:auto;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:11px}.json-node-children{display:block}
.drawer-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 22px 20px; border-top: 1px solid var(--border); }
.form-error { min-height: 18px; margin: 6px 0 0; color: var(--danger); font-size: 12px; }

.toast { position: fixed; z-index: 40; right: 24px; bottom: 24px; max-width: min(380px, calc(100vw - 48px)); padding: 12px 15px; border-radius: 5px; background: #18201d; color: #fff; box-shadow: var(--shadow); }

@media (max-width: 760px) {
    .page-intro{align-items:flex-start;flex-direction:column}.search-hint{width:100%}
    .topbar { align-items: flex-start; padding: 14px 16px; }
    .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
    .service-state { width: 100%; margin: 0; text-align: right; }
    .metrics { grid-template-columns: 1fr 1fr; }
    .metric { padding: 16px; }
    .metric:nth-child(2) { border-right: 0; }
    .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .workspace { padding: 16px; }
    .toolbar { align-items: stretch; flex-wrap: wrap; }
    .search-field { max-width: none; flex-basis: 100%; }
    .toolbar select { min-width: 0; flex: 1; }
    .table-wrap { min-height: 390px; }
    table { min-width: 820px; }
    .drawer { width: 100vw; }
    .save-meta { grid-template-columns: 1fr; }
    .save-meta div, .save-meta div:nth-child(2n), .save-meta div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--border); }
    .save-meta div:last-child { border-bottom: 0; }
}

/* shadcn-dashboard inspired layer: neutral canvas, 8px cards, compact Geist-like type */
:root{--bg:#f6f7f9;--surface:#fff;--surface-muted:#f8fafc;--text:#17202b;--muted:#64748b;--border:#e5e7eb;--border-strong:#cbd5e1;--accent:#2563eb;--accent-hover:#1d4ed8;--shadow:0 10px 30px rgba(15,23,42,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
.topbar{background:#111827;color:#f8fafc;border:0;padding:16px 30px}.topbar h1{font-weight:650}.topbar .product-kicker,.topbar .service-state{color:#94a3b8}.topbar .service-state::before{background:#22c55e}.topbar .button{border-color:#374151;background:#1f2937;color:#e5e7eb}.topbar .button.quiet{color:#94a3b8}.metric{background:#fff;padding:22px 30px}.metric strong{font-weight:700;letter-spacing:-.02em}.workspace{max-width:1440px;margin:0 auto}.admin-tools{max-width:1440px;margin:20px auto}.tool-card,.table-wrap,.module-panel{border-radius:10px;box-shadow:0 1px 2px rgba(15,23,42,.03)}.tool-card{padding:20px}.button{border-radius:7px;transition:background .15s,border-color .15s,transform .15s}.button.primary{background:#2563eb;border-color:#2563eb}.button.primary:hover:not(:disabled){background:#1d4ed8}.button.danger{background:#dc2626}.search-field input{height:42px;border-radius:8px}.toolbar select{height:42px;border-radius:8px}.table-wrap{overflow:hidden}.table-wrap table{background:#fff}th{background:#f8fafc;color:#64748b;letter-spacing:.04em}tbody tr:hover{background:#f8fafc}.row-action{color:#2563eb}.drawer{border-left:1px solid #e5e7eb}.drawer-header{padding:22px 24px}.drawer-header h2{font-weight:700}.module-tab{border-radius:7px}.module-tab.active{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}.module-area{background:#f8fafc}.json-visualizer{border-radius:8px}.toast{border-radius:8px}