:root { --primary:#2563eb; --ink:#14233b; --muted:#718096; --line:#e5ebf3; --surface:#f4f7fb; --white:#fff; --danger:#d92d20; --shadow:0 18px 50px rgba(37,58,92,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); font-size:16px; font-weight:800; }
.brand--light { color:#fff; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; color:#fff; background:linear-gradient(135deg,#3b82f6,#14b8a6); border-radius:11px; box-shadow:0 8px 22px rgba(59,130,246,.28); }
.button { display:inline-flex; min-height:46px; padding:0 20px; align-items:center; justify-content:center; gap:14px; border:0; border-radius:11px; font-size:13px; font-weight:700; transition:.2s; }
.button:hover { transform:translateY(-1px); }
.button--primary { color:#fff; background:var(--primary); box-shadow:0 11px 24px rgba(37,99,235,.22); }
.button--secondary { color:var(--ink); background:#fff; border:1px solid var(--line); }
.button--ghost { color:var(--ink); background:#f3f6fa; }
.button--danger-text { color:var(--danger); background:transparent; }
.button--wide { width:100%; }
.field { display:grid; gap:8px; }
.field > span { color:#55657b; font-size:11px; font-weight:700; }
.field input,.field textarea,.field select { width:100%; color:var(--ink); background:#fff; border:1px solid #dfe6ef; border-radius:10px; outline:none; transition:.2s; }
.field input,.field select { height:44px; padding:0 13px; }
.field textarea { padding:12px 13px; resize:vertical; line-height:1.6; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.field input::placeholder,.field textarea::placeholder { color:#a9b3c1; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-grid--three { grid-template-columns:repeat(3,1fr); }
.alert { margin-bottom:20px; padding:13px 15px; border-radius:10px; font-size:12px; line-height:1.6; }
.alert--error { color:#b42318; background:#fff1f0; border:1px solid #ffd3cf; }
.alert--success { color:#08745f; background:#e7f9f3; border:1px solid #beeadd; }

/* Installer */
.install-body { min-height:100vh; padding:36px; background:#eaf0f8; }
.install-shell { display:grid; grid-template-columns:.8fr 1.2fr; width:min(1180px,100%); min-height:720px; margin:0 auto; overflow:hidden; background:#fff; border-radius:28px; box-shadow:0 30px 100px rgba(37,55,88,.17); }
.install-intro { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:42px; overflow:hidden; color:#fff; background:linear-gradient(145deg,#0d1e37,#15355e); }
.install-intro::before,.install-intro::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.12); }
.install-intro::before { width:420px; height:420px; right:-210px; top:80px; box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.02); }
.install-intro::after { width:190px; height:190px; left:-100px; bottom:100px; background:rgba(37,99,235,.18); }
.install-intro > * { position:relative; z-index:1; }
.eyebrow { color:#7db3ff; font-size:10px; font-weight:800; letter-spacing:.18em; }
.install-intro h1 { max-width:400px; margin:14px 0 18px; font-size:44px; line-height:1.18; letter-spacing:-.045em; }
.install-intro p { max-width:380px; margin:0; color:#b7c5d9; font-size:14px; line-height:1.8; }
.install-checks { display:grid; gap:12px; color:#cad5e4; font-size:12px; }
.install-checks div { display:flex; align-items:center; gap:10px; }
.check { display:grid; width:22px; height:22px; place-items:center; border-radius:50%; font-weight:800; }
.check--ok { color:#52d6b4; background:rgba(20,184,166,.15); }
.check--bad { color:#ff9c92; background:rgba(239,68,68,.15); }
.install-card { padding:42px 48px; overflow:auto; }
.card-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.card-heading span { font-size:18px; font-weight:800; }
.card-heading strong { color:#95a2b3; font-size:10px; letter-spacing:.12em; }
.install-form { display:grid; gap:25px; }
.install-form fieldset { display:grid; gap:14px; margin:0; padding:0; border:0; }
.install-form legend { margin-bottom:14px; font-size:12px; font-weight:800; }
.form-note { margin:-12px 0 0; color:#94a0af; font-size:9px; text-align:center; }
.success-state { display:flex; min-height:580px; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.success-icon { display:grid; width:78px; height:78px; place-items:center; color:#fff; background:linear-gradient(135deg,#14b8a6,#22c55e); border-radius:26px; box-shadow:0 20px 45px rgba(20,184,166,.25); font-size:32px; }
.success-state h2 { margin:28px 0 10px; font-size:32px; }
.success-state p { color:var(--muted); }
.button-row { display:flex; gap:12px; margin-top:20px; }

/* Login */
.login-body { min-height:100vh; background:#f4f7fb; }
.login-shell { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.login-visual { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:48px 7vw; overflow:hidden; color:#fff; background:linear-gradient(145deg,#0c1c32,#15375f); }
.login-visual::before { content:""; position:absolute; inset:0; opacity:.12; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(to bottom,black,transparent); }
.login-visual > * { position:relative; z-index:1; }
.login-message h1 { margin:18px 0 20px; font-size:clamp(44px,5vw,68px); line-height:1.12; letter-spacing:-.055em; }
.login-message p { max-width:440px; margin:0; color:#afbdd0; line-height:1.8; }
.login-visual > small { color:#778ba6; }
.login-orb { position:absolute; right:-70px; bottom:-80px; width:340px; height:340px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 60px rgba(255,255,255,.025),0 0 0 120px rgba(255,255,255,.018); }
.login-orb strong { position:absolute; left:90px; top:75px; display:grid; width:72px; height:72px; place-items:center; color:#fff; background:#2563eb; border-radius:24px; box-shadow:0 20px 40px rgba(0,0,0,.18); font-size:28px; }
.login-panel { display:grid; place-items:center; padding:40px; }
.login-form { width:min(420px,100%); }
.login-heading { margin-bottom:30px; }
.login-heading > span { color:var(--primary); font-size:11px; font-weight:800; }
.login-heading h2 { margin:8px 0; font-size:34px; letter-spacing:-.04em; }
.login-heading p { margin:0; color:var(--muted); font-size:13px; }
.login-form .field { margin-bottom:17px; }
.login-form .field input { height:50px; background:#fff; }
.back-link { display:block; margin-top:23px; color:#7d8999; font-size:11px; text-align:center; }

/* Admin shell */
.admin-body { min-height:100vh; background:var(--surface); }
.admin-layout { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
.sidebar { position:fixed; z-index:30; inset:0 auto 0 0; display:flex; width:240px; flex-direction:column; padding:27px 19px; color:#afbed1; background:#0d1d33; }
.sidebar .brand { margin:0 9px 38px; color:#fff; }
.admin-nav { display:grid; gap:6px; }
.admin-nav a,.sidebar-bottom a,.sidebar-bottom button { display:flex; width:100%; min-height:45px; align-items:center; gap:13px; padding:0 13px; color:#9eafc4; background:transparent; border:0; border-radius:10px; font-size:12px; font-weight:600; text-align:left; }
.admin-nav a > span,.sidebar-bottom span { width:20px; color:#7188a4; font-size:16px; text-align:center; }
.admin-nav a:hover,.admin-nav a.is-active,.sidebar-bottom a:hover,.sidebar-bottom button:hover { color:#fff; background:rgba(255,255,255,.07); }
.admin-nav a.is-active > span { color:#78aaff; }
.admin-nav i { margin-left:auto; padding:3px 7px; color:#fff; background:#ef5b5b; border-radius:20px; font-size:8px; font-style:normal; }
.sidebar-bottom { display:grid; gap:4px; margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-bottom form { margin:0; }
.admin-main { grid-column:2; min-width:0; }
.admin-topbar { position:sticky; z-index:20; top:0; display:flex; height:76px; align-items:center; justify-content:space-between; padding:0 36px; background:rgba(255,255,255,.9); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.admin-topbar > div:first-of-type { display:grid; gap:2px; }
.admin-topbar > div:first-of-type span { color:#94a0b0; font-size:9px; }
.admin-topbar > div:first-of-type strong { font-size:14px; }
.admin-user { display:flex; align-items:center; gap:9px; }
.admin-user > span { display:grid; width:34px; height:34px; place-items:center; color:#fff; background:linear-gradient(135deg,#2563eb,#14b8a6); border-radius:10px; font-size:12px; font-weight:800; }
.admin-user div { display:grid; gap:2px; }
.admin-user strong { font-size:11px; }
.admin-user small { color:#95a2b3; font-size:8px; }
.sidebar-toggle { display:none; width:38px; height:38px; border:0; border-radius:9px; background:#eef3f9; }
.admin-content { width:min(1260px,100%); margin:0 auto; padding:36px; }
.welcome-row,.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:30px; }
.page-kicker { color:var(--primary); font-size:9px; font-weight:800; letter-spacing:.15em; }
.welcome-row h1,.page-heading h1 { margin:7px 0 7px; font-size:30px; letter-spacing:-.04em; }
.welcome-row p,.page-heading p { margin:0; color:var(--muted); font-size:12px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.stat-card { display:flex; align-items:center; gap:15px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 7px 22px rgba(36,58,88,.04); }
.stat-card > div { display:grid; }
.stat-card small { color:#78869a; font-size:9px; }
.stat-card strong { margin:3px 0 1px; font-size:27px; letter-spacing:-.04em; }
.stat-card em { color:#a2acb9; font-size:8px; font-style:normal; }
.stat-icon { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:12px; font-size:17px; }
.stat-icon--blue { color:#2563eb; background:#eaf1ff; }.stat-icon--green { color:#09977f; background:#e5f9f3; }.stat-icon--purple { color:#805ad5; background:#f0eafe; }.stat-icon--orange { color:#d97706; background:#fff3df; }
.panel { background:#fff; border:1px solid var(--line); border-radius:17px; box-shadow:0 7px 24px rgba(37,56,86,.04); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.panel-heading h2 { margin:0 0 4px; font-size:15px; }
.panel-heading p { margin:0; color:#929dad; font-size:9px; }
.panel-heading > a { color:var(--primary); font-size:10px; font-weight:700; }
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:12px 18px; color:#929dad; background:#fbfcfe; border-bottom:1px solid var(--line); font-size:8px; font-weight:700; text-align:left; text-transform:uppercase; letter-spacing:.07em; }
.data-table td { padding:15px 18px; color:#617086; border-bottom:1px solid #eef2f7; font-size:10px; white-space:nowrap; }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover { background:#fbfdff; }
.data-table td strong { color:var(--ink); font-size:11px; }
.row-link { color:var(--primary); font-weight:700; }
.status { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:20px; font-size:8px; font-weight:700; white-space:nowrap; }
.status::before { content:""; width:5px; height:5px; border-radius:50%; }
.status--new { color:#c15e00; background:#fff3dd; }.status--new::before { background:#f59e0b; }
.status--processed { color:#07816c; background:#e3f8f2; }.status--processed::before { background:#14b8a6; }
.contact-cell { display:grid; gap:3px; }.contact-cell small { color:#a0a9b6; font-size:8px; }
.empty-state { display:flex; min-height:300px; flex-direction:column; align-items:center; justify-content:center; color:#8996a7; text-align:center; }
.empty-state > span { display:grid; width:50px; height:50px; place-items:center; color:var(--primary); background:#eef4ff; border-radius:15px; font-size:20px; }
.empty-state h3 { margin:15px 0 5px; color:var(--ink); font-size:14px; }
.empty-state p { margin:0; font-size:10px; }
.filter-tabs { display:flex; padding:4px; background:#e9eef5; border-radius:10px; }
.filter-tabs a { padding:8px 13px; color:#76859a; border-radius:8px; font-size:9px; font-weight:700; }
.filter-tabs a.is-active { color:var(--ink); background:#fff; box-shadow:0 3px 9px rgba(34,53,83,.08); }
.pagination { display:flex; justify-content:center; gap:5px; padding:18px; border-top:1px solid var(--line); }
.pagination a { display:grid; width:30px; height:30px; place-items:center; color:#718096; border:1px solid var(--line); border-radius:8px; font-size:9px; }
.pagination a.is-active { color:#fff; background:var(--primary); border-color:var(--primary); }

/* Detail */
.page-heading--back { align-items:center; }
.back-link-inline { color:var(--primary); font-size:9px; font-weight:700; }
.detail-grid { display:grid; grid-template-columns:1fr 300px; gap:20px; }
.message-body { min-height:270px; padding:26px; color:#44536a; font-size:13px; line-height:1.9; }
.detail-side { display:grid; align-content:start; gap:16px; }
.contact-profile { padding:25px; text-align:center; }
.profile-avatar { display:grid; width:58px; height:58px; margin:0 auto 13px; place-items:center; color:#fff; background:linear-gradient(135deg,#2563eb,#14b8a6); border-radius:18px; font-weight:800; }
.contact-profile h2 { margin:0; font-size:16px; }.contact-profile > p { margin:5px 0 21px; color:#8b97a7; font-size:9px; }
.contact-profile dl { margin:0; text-align:left; }.contact-profile dl div { padding:11px 0; border-top:1px solid var(--line); }
.contact-profile dt { color:#98a3b2; font-size:8px; }.contact-profile dd { margin:4px 0 0; color:#42526a; overflow-wrap:anywhere; font-size:10px; font-weight:600; }
.action-panel { padding:14px; }.action-panel form { display:grid; gap:5px; }

/* Settings */
.settings-form { display:grid; gap:18px; }
.settings-section { display:grid; grid-template-columns:220px 1fr; overflow:hidden; }
.settings-heading { padding:27px; background:#fbfcfe; border-right:1px solid var(--line); }
.settings-heading > span { display:grid; width:32px; height:32px; margin-bottom:18px; place-items:center; color:var(--primary); background:#eaf1ff; border-radius:9px; font-size:9px; font-weight:800; }
.settings-heading h2 { margin:0 0 6px; font-size:15px; }.settings-heading p { margin:0; color:#8d99a9; font-size:9px; line-height:1.6; }
.settings-fields { display:grid; gap:16px; padding:27px; }
.service-editor-list { display:grid; gap:12px; }
.service-editor { padding:17px; background:#f8fafc; border:1px solid var(--line); border-radius:12px; }
.service-editor-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.service-editor-head strong { font-size:11px; }.service-editor .field { margin-top:12px; }
.field-grid--icon { grid-template-columns:160px 1fr; }
.switch { display:flex; align-items:center; gap:7px; color:#718096; font-size:9px; }
.switch input { position:absolute; opacity:0; pointer-events:none; }.switch span { position:relative; width:30px; height:17px; background:#ccd5e1; border-radius:20px; transition:.2s; }.switch span::after { content:""; position:absolute; width:13px; height:13px; left:2px; top:2px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 4px rgba(0,0,0,.15); }.switch input:checked + span { background:var(--primary); }.switch input:checked + span::after { transform:translateX(13px); }
.metric-editor-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.metric-editor-grid > div { display:grid; gap:11px; padding:14px; background:#f8fafc; border:1px solid var(--line); border-radius:11px; }
.color-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.color-field { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--line); border-radius:11px; }
.color-preview { width:38px; height:38px; flex:0 0 38px; background:var(--preview); border:1px solid rgba(0,0,0,.06); border-radius:10px; }
.color-field div { display:grid; gap:4px; }.color-field strong { font-size:9px; }.color-field input { width:52px; height:18px; padding:0; overflow:hidden; background:none; border:0; }
.sticky-save { position:sticky; z-index:10; bottom:18px; display:flex; align-items:center; justify-content:flex-end; gap:22px; padding:13px 15px; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 38px rgba(34,55,88,.14); backdrop-filter:blur(12px); }
.sticky-save > span { color:#8b97a6; font-size:9px; }
.password-form { display:block; }.password-form .button { margin-top:15px; }
#security { margin-top:18px; }

@media (max-width:1050px) {
    .stat-grid { grid-template-columns:repeat(2,1fr); }
    .settings-section { grid-template-columns:180px 1fr; }
    .color-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:800px) {
    .install-body { padding:15px; }.install-shell { grid-template-columns:1fr; }.install-intro { min-height:390px; }.install-card { padding:30px 22px; }
    .login-shell { grid-template-columns:1fr; }.login-visual { min-height:360px; padding:35px 28px; }.login-orb { display:none; }.login-panel { padding:55px 22px; }
    .admin-layout { display:block; }.sidebar { transform:translateX(-100%); transition:.22s; box-shadow:20px 0 50px rgba(0,0,0,.18); }.sidebar.is-open { transform:translateX(0); }.admin-main { min-width:0; }.sidebar-toggle { display:block; }.admin-topbar { padding:0 18px; }.admin-topbar > div:first-of-type { display:none; }.admin-content { padding:24px 16px; }
    .welcome-row,.page-heading { align-items:flex-start; flex-direction:column; }.stat-grid { grid-template-columns:1fr 1fr; }.detail-grid { grid-template-columns:1fr; }
    .settings-section { grid-template-columns:1fr; }.settings-heading { border-right:0; border-bottom:1px solid var(--line); }.settings-heading > span { margin-bottom:10px; }.field-grid--three,.metric-editor-grid { grid-template-columns:1fr; }
}
@media (max-width:540px) {
    .field-grid,.field-grid--three,.field-grid--icon { grid-template-columns:1fr; }.install-intro h1,.login-message h1 { font-size:38px; }.button-row { flex-direction:column; width:100%; }.button-row .button { width:100%; }
    .stat-grid { grid-template-columns:1fr; }.admin-user div { display:none; }.color-grid { grid-template-columns:1fr; }.settings-fields { padding:20px; }.sticky-save { justify-content:space-between; }.sticky-save > span { display:none; }.sticky-save .button { width:100%; }
}