:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei", sans-serif; background: #101313; color: #f5f8f8; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 72% 12%, rgba(0, 200, 210, .08), transparent 32%), #101313; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(110px); opacity: .13; pointer-events: none; }
.ambient-a { background: #09c8d6; top: -180px; right: 10%; }.ambient-b { background: #7657ff; bottom: -240px; left: 14%; }
.auth-view { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.auth-card { width: min(430px, 100%); padding: 40px; border: 1px solid #3b4545; border-radius: 24px; background: linear-gradient(145deg, rgba(35, 43, 43, .98), rgba(20, 23, 23, .98)); box-shadow: 0 28px 80px #0008; }
.logo { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: #117e84; font-size: 28px; margin-bottom: 24px; }
.eyebrow { color: #16cbd5; font-weight: 800; font-size: 12px; letter-spacing: .18em; margin: 0 0 10px; }
h1, h2 { margin: 0; } h1 { font-size: 30px; } h2 { font-size: 18px; }
.muted { color: #97a2a3; line-height: 1.6; }
label { display: grid; gap: 8px; color: #aeb8b9; font-size: 13px; }
.auth-card form { display: grid; gap: 16px; margin-top: 28px; }
input, select, textarea { width: 100%; border: 1px solid #3d4748; border-radius: 11px; background: #151919; color: #f3f8f8; padding: 12px 14px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: #16cbd5; box-shadow: 0 0 0 3px #16cbd51c; }
input:disabled { color: #8e999a; background: #1a1f1f; }
.primary { border: 0; border-radius: 11px; background: linear-gradient(100deg, #129aa1, #19c4d0); color: #071011; font-weight: 800; padding: 13px 18px; }
.ghost, .actions button, #logout { border: 1px solid #3d4748; border-radius: 9px; background: #1a1f1f; color: #cfd8d8; padding: 9px 13px; }
.ghost:disabled, .actions button:disabled { cursor: default; opacity: .45; }
.error { min-height: 18px; color: #ff626f; margin: 0; font-size: 13px; }
.dashboard { min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
aside { position: sticky; top: 0; height: 100vh; padding: 26px 18px; border-right: 1px solid #303737; background: #121515dd; display: flex; flex-direction: column; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 28px; }.brand > span { color: #19cbd4; font-size: 28px; }.brand small { display: block; color: #788384; margin-top: 4px; }
nav { display: grid; gap: 8px; } nav button { border: 0; border-radius: 11px; background: transparent; color: #8f9a9b; text-align: left; padding: 13px 14px; transition: color .16s, background .16s; } nav button:hover { color: #dce7e7; background: #192323; } nav button.active { color: #eaffff; background: #14383a; }
.admin { margin-top: auto; display: grid; gap: 10px; color: #aab4b5; }
.workspace { padding: 44px clamp(24px, 4vw, 64px); max-width: 1500px; width: 100%; margin: 0 auto; }.page-view { min-width: 0; }
header, .panel-head { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.header-actions { display: flex; align-items: center; gap: 12px; }.refresh-state { color: #718081; white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0 18px; }.stats article, .panel { border: 1px solid #343d3d; background: #191d1ddd; border-radius: 16px; box-shadow: 0 16px 42px #0003; }.stats article { padding: 20px; }.stats span { color: #879294; font-size: 13px; }.stats b { display: block; font-size: 28px; margin-top: 8px; }
.panel { padding: 22px; margin-top: 18px; }.create-panel { display: grid; grid-template-columns: minmax(220px, .65fr) 1.35fr; gap: 28px; }.generate-form { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; }.generate-form .primary { grid-column: 1 / -1; }
textarea { min-height: 140px; resize: vertical; margin-top: 18px; font-family: ui-monospace, Consolas, monospace; }
.table-wrap { overflow: auto; margin-top: 18px; } table { width: 100%; border-collapse: collapse; min-width: 900px; } th, td { padding: 14px 12px; border-bottom: 1px solid #303737; text-align: left; font-size: 13px; } th { color: #7f8b8c; font-weight: 600; }.actions { display: flex; gap: 6px; }.actions button { padding: 7px 9px; }
.badge { display: inline-flex; border-radius: 999px; padding: 5px 9px; background: #2b3333; color: #aab4b5; }.badge.active { background: #103c34; color: #26e1b1; }.badge.unused { background: #27363a; color: #48d9e5; }.badge.unbound { background: #36342a; color: #e8cf74; }.badge.disabled, .badge.expired { background: #3a2529; color: #ff7e89; }
.device-stats { grid-template-columns: repeat(3, 1fr); }.cell-note { display: block; margin-top: 5px; color: #748082; }.device-id, td code { color: #68d9df; font-family: ui-monospace, Consolas, monospace; }.count-chip, .audit-action { display: inline-flex; border: 1px solid #3d4748; border-radius: 999px; padding: 6px 10px; color: #aab5b6; font-size: 12px; }.audit-panel table { min-width: 1100px; }.audit-details { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #929d9e; }
.full-card-cell { min-width: 300px; }.full-card-cell code { color: #f3f8f8; font-weight: 800; letter-spacing: .03em; }.full-card-cell small { display: block; margin-top: 6px; color: #879294; }.copy-key { margin-left: 10px; border: 1px solid #3d4748; border-radius: 7px; background: #182222; color: #62dce3; padding: 5px 8px; }
.remaining { color: #54dfb5; white-space: nowrap; }.remaining.warning { color: #ffd170; }.remaining.expired { color: #ff7e89; }.remaining.pending { color: #7d898a; font-weight: 500; }
.empty { text-align: center; padding: 38px; color: #738082; }.toast { position: fixed; right: 28px; bottom: 28px; transform: translateY(20px); opacity: 0; background: #eaffff; color: #071011; border-radius: 10px; padding: 12px 18px; font-weight: 700; transition: .2s; pointer-events: none; }.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 1000px) { .dashboard { grid-template-columns: 140px 1fr; } aside { padding-inline: 10px; }.brand div, .admin span { display: none; }.stats, .device-stats { grid-template-columns: repeat(2, 1fr); }.create-panel { grid-template-columns: 1fr; }.generate-form { grid-template-columns: repeat(2, 1fr); } }