:root { --ink:#2c2b42; --muted:#777288; --line:#e6e2f2; --violet:#7661db; --soft:#f4f2ff; --paper:#fff; --font:Inter,"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--ink); background:#fafaff; font-family:var(--font); } button,input { font:inherit; }
.admin-page { display:grid; grid-template-columns:270px minmax(0,1fr); min-height:100vh; }.admin-rail { display:flex; flex-direction:column; min-height:100vh; padding:38px 31px; color:#fff; background:radial-gradient(circle at 92% 8%,rgba(195,236,255,.28),transparent 18%),linear-gradient(155deg,#7963dd,#5b79ed); }.admin-logo { display:grid; width:70px; height:60px; place-items:center; border:1px solid rgba(255,255,255,.45); border-radius:17px; background:rgba(255,255,255,.15); font-size:15px; font-weight:820; line-height:1.25; text-align:center; }.admin-rail-copy { display:grid; gap:8px; margin-top:42px; }.admin-rail-copy span { color:#e1dcff; font-size:11px; font-weight:800; letter-spacing:1.2px; }.admin-rail-copy b { font-size:24px; line-height:1.22; letter-spacing:-1px; }.admin-rail a { display:inline-flex; width:max-content; margin-top:auto; padding:10px 13px; color:#fff; border:1px solid rgba(255,255,255,.26); border-radius:10px; background:rgba(255,255,255,.11); font-size:13px; font-weight:700; text-decoration:none; }
.admin-main { width:min(1210px,100%); padding:54px clamp(28px,5vw,72px) 64px; }.admin-header { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; }.eyebrow,.section-head span { color:#7866da; font-size:11px; font-weight:820; letter-spacing:1.35px; }.admin-header h1 { margin:12px 0 10px; font-size:38px; line-height:1.1; letter-spacing:-2px; }.admin-header p { max-width:560px; margin:0; color:var(--muted); font-size:15px; line-height:1.7; }.admin-user { display:flex; align-items:center; gap:10px; color:#534c6e; font-size:14px; }.admin-user span { display:grid; width:36px; height:36px; place-items:center; color:#6755c6; border-radius:50%; background:#edeaff; font-size:14px; font-weight:800; }
.admin-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:36px 0 16px; }.admin-stats article { min-height:136px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 9px 22px rgba(62,48,130,.05); }.admin-stats span,.admin-stats small { display:block; color:var(--muted); font-size:13px; }.admin-stats b { display:block; margin:12px 0 5px; color:#40385f; font-size:34px; letter-spacing:-1.4px; }
.admin-grid { display:grid; grid-template-columns:340px minmax(0,1fr); gap:16px; }.admin-card { padding:26px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:0 10px 23px rgba(62,48,130,.045); }.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:22px; }.section-head h2 { margin:8px 0 0; font-size:21px; letter-spacing:-.8px; }.section-head small { color:#9590a3; font-size:12px; }
form { display:grid; gap:8px; } label { margin-top:5px; color:#514d62; font-size:12px; font-weight:750; } input { width:100%; padding:11px 12px; color:var(--ink); border:1px solid #e3e0ec; border-radius:10px; outline:none; background:#fff; font-size:13px; transition:.16s ease; } input:focus { border-color:#9a88ed; box-shadow:0 0 0 4px rgba(125,103,225,.11); } form button { display:flex; min-height:45px; align-items:center; justify-content:space-between; margin-top:10px; padding:0 14px; color:#fff; border:0; border-radius:11px; background:linear-gradient(100deg,#7965df,#6b81ed); box-shadow:0 9px 18px rgba(104,82,214,.22); font-size:13px; font-weight:760; }.form-message { min-height:18px; margin:3px 0 0; color:#6e5bca; font-size:12px; line-height:1.45; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; text-align:left; } th { padding:0 12px 11px; color:#9a94aa; border-bottom:1px solid var(--line); font-size:11px; font-weight:750; } td { padding:15px 12px; color:#5f5a70; border-bottom:1px solid #f0eef6; font-size:13px; } td b { color:#413c55; font-weight:740; } td small { display:block; margin-top:3px; color:#9792a6; font-size:11px; }.role { padding:4px 8px; border-radius:999px; font-size:11px; font-weight:720; }.role.admin { color:#6755c7; background:#f0edff; }.role.sales { color:#27836d; background:#e8f8f1; }.empty-cell { padding:34px; color:#9c96aa; text-align:center; }.records-card { margin-top:16px; }.refresh-button { min-height:34px; padding:0 11px; color:#6755c7; border:1px solid #ded9f5; border-radius:9px; background:#fbfaff; font-size:12px; font-weight:700; }
@media (max-width:850px) { .admin-page { grid-template-columns:1fr; }.admin-rail { min-height:0; padding:22px 24px; }.admin-rail-copy { margin-top:18px; }.admin-rail a { margin-top:20px; }.admin-main { padding:35px 22px; }.admin-grid,.admin-stats { grid-template-columns:1fr; }.admin-header { display:grid; }.admin-header h1 { font-size:31px; } }