:root { --blue:#2563eb; --ink:#14213d; --muted:#64748b; --line:#dbe3ef; --bg:#f4f7fb; --ok:#138a53; --warn:#a16207; --danger:#c53030; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--bg); font:14px/1.5 "Microsoft YaHei UI","Noto Sans SC",Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button { border:0; border-radius:8px; padding:9px 14px; color:#fff; background:var(--blue); cursor:pointer; font-weight:700; }
button:hover { filter:brightness(.96); }
button.secondary,.secondary { color:#26507d; background:#eaf0f8; }
button.ghost,.ghost { color:#50657c; background:transparent; border:1px solid var(--line); }
input,select,textarea { width:100%; border:1px solid #cbd7e7; border-radius:8px; padding:9px 10px; color:var(--ink); background:#fff; }
textarea { min-height:110px; font-family:Consolas,"Microsoft YaHei UI",monospace; resize:vertical; }
label { display:grid; gap:6px; color:#34465b; font-weight:650; }
h1,h2,p { margin-top:0; } h2 { margin-bottom:7px; font-size:17px; } .muted { color:var(--muted); } .eyebrow { margin-bottom:3px; color:var(--blue); font-size:13px; font-weight:700; }
.auth-card { width:min(430px,calc(100% - 30px)); margin:8vh auto; padding:30px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 55px rgba(28,58,94,.12); }
.brand { display:grid; width:52px; height:52px; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(135deg,#1767dc,#59a4ff); font-size:21px; font-weight:800; }
.auth-card form[hidden] { display:none !important; }
#authView[hidden],#agentView[hidden] { display:none !important; }
.auth-card h1 { margin:16px 0 5px; font-size:25px; }.auth-card>p { color:var(--muted); }.tabs { display:grid; grid-template-columns:1fr 1fr; margin:22px 0 16px; padding:3px; border-radius:10px; background:#edf2f8; }.tabs button { color:#52657b; background:transparent; }.tabs button.active { color:#fff; background:var(--blue); }.form { display:grid; gap:13px; }
.agent-shell { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:100vh; }.sidebar { padding:23px 14px; color:#dbeafe; background:linear-gradient(180deg,#0b3f8c,#135fc9); }.side-brand { display:flex; gap:10px; align-items:center; padding:0 9px 21px; }.side-brand>span { display:grid; width:39px; height:39px; place-items:center; border-radius:11px; background:#fff; color:#1559b6; font-weight:800; }.side-brand strong,.side-brand small { display:block; }.side-brand small { color:#b9d5ff; }.sidebar nav { display:grid; gap:5px; }.sidebar nav button { padding:11px 13px; text-align:left; color:#dbeafe; background:transparent; }.sidebar nav button.active,.sidebar nav button:hover { color:#fff; background:rgba(255,255,255,.18); }.side-footer { margin:25px 9px 0; color:#c5dcff; font-size:12px; }.workspace { min-width:0; padding:28px; }.workspace header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:21px; }.workspace header h1 { margin:0; font-size:26px; }.header-actions { display:flex; gap:8px; }.stats { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:13px; margin-bottom:17px; }.stats article,.panel { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 5px 18px rgba(31,64,110,.04); }.stats article { padding:16px; }.stats span { color:var(--muted); }.stats strong { display:block; margin-top:7px; font-size:25px; }.panel { padding:19px; margin-bottom:17px; }.permissions { display:flex; flex-wrap:wrap; gap:8px; }.permissions span,.chip { display:inline-block; padding:5px 9px; border-radius:999px; color:#36516f; background:#eef3f9; font-size:12px; font-weight:700; }.permissions span.ok,.chip.ok { color:var(--ok); background:#e8f7ee; }.permissions span.no,.chip.no { color:var(--danger); background:#fff0f0; }.license-grid { display:grid; grid-template-columns:minmax(360px,.9fr) minmax(240px,.55fr); gap:17px; }.compact { align-self:start; }.price-hint { min-height:22px; color:#1767dc; font-weight:700; }.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; }table { width:100%; min-width:790px; border-collapse:collapse; }th,td { padding:10px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }th { color:#4b617a; background:#f6f9fd; font-size:12px; }tbody tr:last-child td { border-bottom:0; }tbody tr:hover { background:#fbfdff; }.code { font-family:Consolas,monospace; font-size:12px; font-weight:700; }.status-ok { color:var(--ok); font-weight:700; }.status-warn { color:var(--warn); font-weight:700; }.status-no { color:var(--danger); font-weight:700; }.ops { display:flex; flex-wrap:wrap; gap:6px; }.ops button { padding:6px 8px; font-size:12px; }.list-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.filter { display:flex; min-width:260px; gap:7px; }.filter input { min-width:0; }.pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:14px; color:var(--muted); }.pagination button { padding:6px 9px; }.upload-row { display:grid; grid-template-columns:minmax(250px,.8fr) minmax(280px,1.2fr); gap:14px; }.file-input input { background:#f8fafc; }.toast { position:fixed; right:20px; bottom:20px; z-index:9; padding:11px 15px; border-radius:9px; color:#fff; background:#172033; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.recharge-form { display:grid; grid-template-columns:minmax(180px,260px) minmax(280px,1fr) auto; align-items:end; gap:14px; }.recharge-form>p { grid-column:1 / -1; margin:0; }.field-title { display:block; margin-bottom:6px; color:#34465b; font-weight:650; }.recharge-options { display:flex; flex-wrap:wrap; gap:8px; min-height:39px; align-items:center; }.recharge-channel { color:#31516f; background:#edf3fa; border:1px solid #d9e4f1; }.recharge-channel.active { color:#fff; background:#2563eb; border-color:#2563eb; }.payment-modal[hidden] { display:none !important; }.payment-modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(15,23,42,.46); }.payment-modal-card { position:relative; width:min(360px,100%); padding:26px; text-align:center; background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); }.payment-modal-card h2 { margin-top:18px; }.payment-modal-card img { display:block; width:232px; height:232px; max-width:100%; margin:18px auto; }.modal-close { position:absolute; top:13px; right:13px; padding:5px 9px; font-size:12px; }
@media (max-width:950px) { .agent-shell { display:block; }.sidebar { padding:14px; }.sidebar nav { grid-template-columns:repeat(3,1fr); }.side-footer { display:none; }.workspace { padding:20px 14px; }.stats { grid-template-columns:repeat(2,1fr); }.license-grid,.upload-row,.recharge-form { grid-template-columns:1fr; }.recharge-form>p { grid-column:auto; } }
@media (max-width:560px) { .workspace header,.list-head,.pagination { flex-direction:column; align-items:stretch; }.stats { grid-template-columns:1fr; }.sidebar nav { grid-template-columns:1fr; }.filter { min-width:0; width:100%; }.header-actions { width:100%; }.header-actions button { flex:1; } }