*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,sans-serif;font-size:14px;background:#f5f6fa;color:#222}
a{color:#4f6ef7;text-decoration:none}
a:hover{text-decoration:underline}

/* nav */
.nav{display:flex;align-items:center;gap:16px;padding:0 24px;height:52px;background:#fff;border-bottom:1px solid #e8eaf0;position:sticky;top:0;z-index:100}
.nav-brand{font-weight:700;font-size:16px;margin-right:auto}
.nav-user{color:#666;font-size:13px}

/* main */
.main{padding:24px;max-width:1100px;margin:0 auto}

/* flash */
.flash{padding:10px 16px;border-radius:6px;margin-bottom:16px;font-size:13px}
.flash-ok{background:#e6f9f0;color:#1a7a4a;border:1px solid #b3e6d0}
.flash-err{background:#fef0f0;color:#c62828;border:1px solid #f5b7b1}

/* card */
.card{background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.07);padding:20px 24px;margin-bottom:20px}
.card-title{font-size:16px;font-weight:600;margin-bottom:16px;color:#1a1a2e}

/* table */
table{width:100%;border-collapse:collapse}
thead th{background:#f0f2f8;padding:8px 12px;text-align:left;font-weight:600;font-size:13px;color:#555}
tbody td{padding:9px 12px;border-bottom:1px solid #eef0f7;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbff}

/* badge */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:600}
.badge-ok{background:#e6f9f0;color:#1a7a4a}
.badge-warn{background:#fff7e0;color:#8a6900}
.badge-off{background:#f5f5f5;color:#888}
.badge-blue{background:#eef2ff;color:#4f6ef7}

/* form */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.form-group{display:flex;flex-direction:column;gap:4px}
label{font-size:13px;color:#555;font-weight:500}
input,select,textarea{padding:8px 10px;border:1px solid #d4d8e8;border-radius:6px;font-size:14px;outline:none;width:100%;background:#fff}
input:focus,select:focus,textarea:focus{border-color:#4f6ef7;box-shadow:0 0 0 2px rgba(79,110,247,.15)}

/* btn */
.btn{display:inline-block;padding:7px 18px;border-radius:6px;border:none;cursor:pointer;font-size:14px;font-weight:500;transition:.15s}
.btn-primary{background:#4f6ef7;color:#fff}
.btn-primary:hover{background:#3a5ae0}
.btn-danger{background:#f44336;color:#fff}
.btn-danger:hover{background:#d32f2f}
.btn-sm{padding:4px 12px;font-size:12px}
.btn-ghost{background:transparent;border:1px solid #d4d8e8;color:#555}
.btn-ghost:hover{background:#f5f6fa}

/* stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat-box{background:#fff;border-radius:10px;padding:16px 20px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.stat-label{font-size:12px;color:#888;margin-bottom:6px}
.stat-value{font-size:26px;font-weight:700;color:#1a1a2e}
.stat-sub{font-size:12px;color:#888;margin-top:4px}

/* ── Platform admin ───────────────────────────────────────────── */
.main-plat{max-width:1200px}
.plat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.plat-head h1{margin:0;font-size:22px;font-weight:700;color:#12131a;letter-spacing:-.02em}
.plat-head p{margin:6px 0 0;font-size:13px;color:#6b7280}
.plat-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
@media(max-width:900px){.plat-stats{grid-template-columns:repeat(2,1fr)}}
.plat-stat{background:#fff;border:1px solid #e8eaf2;border-radius:12px;padding:14px 18px}
.plat-stat .k{font-size:12px;color:#6b7280;margin-bottom:6px}
.plat-stat .v{font-size:24px;font-weight:700;color:#12131a;font-variant-numeric:tabular-nums}
.plat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.plat-search{display:flex;align-items:center;gap:8px;flex:1;min-width:200px;max-width:360px}
.plat-search input{margin:0}
.plat-table-wrap{overflow-x:auto}
.plat-table{width:100%;border-collapse:separate;border-spacing:0}
.plat-table thead th{background:#f7f8fc;padding:10px 14px;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid #e8eaf2;white-space:nowrap}
.plat-table tbody td{padding:14px;border-bottom:1px solid #eef0f7;vertical-align:middle;background:#fff}
.plat-table tbody tr.plat-row:hover td{background:#fafbff}
.plat-table tbody tr.plat-cfg td{background:#f7f8fc;border-bottom:1px solid #e8eaf2;padding:0}
.plat-name{font-weight:600;color:#12131a}
.plat-id{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#9aa0b4}
.plat-id button{border:none;background:#eef0f7;color:#555;border-radius:4px;padding:1px 6px;font-size:11px;cursor:pointer}
.plat-id button:hover{background:#e2e5f0}
.plat-caps{display:flex;flex-wrap:wrap;gap:6px}
.plat-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.plat-cfg-panel{padding:16px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.plat-cfg-item{background:#fff;border:1px solid #e4e7f1;border-radius:10px;padding:12px 14px}
.plat-cfg-item h4{margin:0 0 4px;font-size:13px;color:#12131a}
.plat-cfg-item p{margin:0 0 10px;font-size:12px;color:#6b7280;line-height:1.45}
.plat-cfg-item .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plat-cfg-item input[type=number]{width:88px}
.plat-empty{text-align:center;color:#9aa0b4;padding:40px 16px}
.plat-modal{display:none;position:fixed;inset:0;background:rgba(15,18,30,.45);z-index:999;align-items:center;justify-content:center;padding:16px}
.plat-modal.open{display:flex}
.plat-modal-box{background:#fff;border-radius:14px;padding:24px 28px;width:440px;max-width:100%;box-shadow:0 16px 48px rgba(0,0,0,.18)}
.plat-modal-box h3{margin:0 0 6px;font-size:17px;color:#12131a}
.plat-modal-box .sub{margin:0 0 18px;font-size:13px;color:#6b7280}
.plat-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.plat-switch{display:inline-flex;align-items:center;gap:8px}
.btn-linkish{background:none;border:none;color:#4f6ef7;cursor:pointer;font-size:13px;padding:0}
.btn-linkish:hover{text-decoration:underline}
.plat-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#eef1f8 0%,#f7f8fc 45%,#e8eefc 100%);padding:24px}
.plat-login-card{background:#fff;width:380px;max-width:100%;border-radius:16px;padding:36px 36px 32px;box-shadow:0 12px 40px rgba(30,40,80,.10);border:1px solid #e8eaf2}
.plat-login-card h2{margin:0;font-size:22px;color:#12131a;text-align:center}
.plat-login-card .sub{margin:8px 0 24px;text-align:center;font-size:13px;color:#6b7280}
.btn-block{width:100%}
.plat-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:#6b7280;margin-top:4px}
.plat-meta strong{color:#12131a;font-weight:600}