:root {
  --ink: #17211b;
  --muted: #758079;
  --line: #e5eae6;
  --paper: #f5f7f4;
  --white: #ffffff;
  --green: #276a48;
  --green-dark: #194b33;
  --lime: #d7f16a;
  --red: #b93b37;
  --amber: #b8781d;
  --shadow: 0 18px 45px rgba(20, 43, 29, 0.08);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.muted { color: var(--muted); }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; background: var(--green-dark); }
.login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 10vw; color: white; }
.login-brand::after { content: ""; position: absolute; width: 440px; height: 440px; right: -130px; bottom: -140px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018); }
.brand-mark { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; background: var(--lime); margin-bottom: 32px; }
.brand-mark span { display: block; width: 5px; border-radius: 9px; background: var(--green-dark); }
.brand-mark span:nth-child(1) { height: 17px; }.brand-mark span:nth-child(2) { height: 29px; }.brand-mark span:nth-child(3) { height: 21px; }
.brand-mark.small { width: 38px; height: 38px; border-radius: 11px; margin: 0; }.brand-mark.small span { width: 4px; }.brand-mark.small span:nth-child(1) { height: 12px; }.brand-mark.small span:nth-child(2) { height: 21px; }.brand-mark.small span:nth-child(3) { height: 15px; }
.login-brand .eyebrow { color: var(--lime); }
.login-brand h1 { margin: 0; max-width: 650px; font-size: clamp(42px, 5vw, 76px); line-height: 1.04; letter-spacing: -.05em; }
.login-copy { max-width: 520px; margin: 32px 0; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.8; }
.privacy-note { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.72); }
.privacy-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(215,241,106,.15); }
.login-card { display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: clamp(40px, 8vw, 120px); background: var(--white); border-radius: 32px 0 0 32px; }
.login-card h2 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.03em; }
.login-card form { display: grid; gap: 22px; }
label { display: grid; gap: 8px; color: #415048; font-size: 13px; font-weight: 650; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; color: var(--ink); background: #fbfcfb; outline: none; transition: .15s ease; }
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(39,106,72,.1); }
.primary-button { display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 12px; padding: 15px 18px; color: white; background: var(--green); font-weight: 700; }
.primary-button:hover { background: var(--green-dark); }
.form-error { min-height: 18px; margin: -6px 0; color: var(--red); font-size: 13px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px 1fr; }
.sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; width: 244px; display: flex; flex-direction: column; padding: 28px 18px; color: white; background: var(--green-dark); }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 30px; }.sidebar-brand strong,.sidebar-brand small { display:block; }.sidebar-brand strong { font-size: 16px; }.sidebar-brand small { margin-top: 3px; color: rgba(255,255,255,.5); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
nav { display: grid; gap: 7px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 11px; padding: 12px 14px; color: rgba(255,255,255,.65); background: transparent; text-align: left; }
.nav-item span { width: 20px; text-align: center; font-size: 18px; }.nav-item:hover { color: white; background: rgba(255,255,255,.06); }.nav-item.active { color: var(--green-dark); background: var(--lime); font-weight: 750; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 12px; }.privacy-card { display: flex; gap: 11px; align-items: flex-start; padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.04); }.privacy-card .privacy-dot { margin-top: 4px; flex: 0 0 auto; }.privacy-card strong,.privacy-card small { display:block; }.privacy-card strong { font-size: 12px; }.privacy-card small { margin-top: 4px; color: rgba(255,255,255,.48); font-size: 10px; line-height: 1.4; }
.text-button { border: 0; padding: 9px; color: var(--muted); background: transparent; }.sidebar .text-button { color: rgba(255,255,255,.5); text-align:left; }.text-button:hover { color: var(--green); }
.main-column { grid-column: 2; min-width: 0; }
.topbar { min-height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 18px 38px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.86); backdrop-filter: blur(14px); }
.topbar h2 { margin: 0; font-size: 22px; }.topbar .eyebrow { margin-bottom: 4px; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }.status-pill { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #d8e8db; border-radius: 99px; color: var(--green); background: #f2f8f3; font-size: 12px; font-weight: 700; }.status-pill span { width: 7px; height: 7px; border-radius: 50%; background: #3da363; }
.admin-chip { display:flex; align-items:center; gap:10px; }.admin-chip > span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:white; background:var(--green); font-weight:800; }.admin-chip strong,.admin-chip small { display:block; }.admin-chip strong { font-size:12px; }.admin-chip small { margin-top:3px; color:var(--muted); font-size:10px; }
.page-view { display: none; padding: 34px 38px 60px; }.page-view.active-view { display: block; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }.section-heading h3 { margin:0; font-size:24px; letter-spacing:-.025em; }.section-heading p { margin:7px 0 0; font-size:13px; }
.secondary-button { border:1px solid var(--line); border-radius:10px; padding:9px 13px; color:var(--ink); background:white; font-size:12px; font-weight:700; }.secondary-button:hover { border-color:#bcc9c0; }
.stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:16px; }.stat-card { position:relative; overflow:hidden; min-height:145px; padding:22px; border:1px solid var(--line); border-radius:17px; background:white; box-shadow:0 4px 20px rgba(20,43,29,.025); }.stat-card::after { content:""; position:absolute; width:70px; height:70px; right:-25px; bottom:-28px; border-radius:50%; background:#eef4ef; }.stat-card.accent { color:white; background:var(--green); border-color:var(--green); }.stat-card.accent::after { background:rgba(215,241,106,.2); }.stat-label { color:var(--muted); font-size:12px; }.accent .stat-label { color:rgba(255,255,255,.66); }.stat-value { margin-top:18px; font-size:31px; font-weight:800; letter-spacing:-.04em; }.stat-foot { margin-top:7px; color:var(--muted); font-size:10px; }.accent .stat-foot { color:rgba(255,255,255,.58); }
.dashboard-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:16px; }.panel { border:1px solid var(--line); border-radius:17px; padding:22px; background:white; box-shadow:0 4px 20px rgba(20,43,29,.025); }.panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }.panel-heading h3 { margin:0; font-size:16px; }.metric-tag { padding:7px 10px; border-radius:9px; color:var(--green); background:#eef6f0; font-size:12px; font-weight:800; }
.donut-row { display:flex; align-items:center; justify-content:center; min-height:180px; gap:36px; }.donut { --success:0; width:142px; height:142px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--green) calc(var(--success)*1%), #e8ece9 0); }.donut::after { content:""; width:100px; height:100px; border-radius:50%; background:white; }.donut-label { position:absolute; z-index:1; text-align:center; }.donut-label strong,.donut-label small { display:block; }.donut-label strong { font-size:24px; }.donut-label small { color:var(--muted); font-size:10px; }.chart-legend { display:grid; gap:12px; }.legend-row { display:flex; align-items:center; gap:9px; font-size:12px; }.legend-row i { width:9px; height:9px; border-radius:3px; background:var(--green); }.legend-row.failed i { background:#e8ece9; }.legend-row strong { margin-left:auto; }
.credential-list { display:grid; gap:11px; }.credential-item { padding:13px; border:1px solid var(--line); border-radius:12px; }.credential-head { display:flex; justify-content:space-between; gap:10px; font-size:12px; }.credential-head span { color:var(--green); }.credential-meta { display:flex; gap:16px; margin-top:9px; color:var(--muted); font-size:10px; }
.compact-panel { padding:13px; }.toolbar { display:flex; align-items:center; gap:12px; margin-bottom:15px; }.search-box { position:relative; display:block; flex:1; }.search-box span { position:absolute; left:13px; top:11px; color:var(--muted); font-size:20px; }.search-box input { padding-left:39px; }.toolbar select { width:150px; }
.table-panel { padding:0; overflow:hidden; }.table-scroll { overflow:auto; }table { width:100%; border-collapse:collapse; white-space:nowrap; }th { padding:14px 17px; color:var(--muted); background:#fafbfa; font-size:10px; letter-spacing:.06em; text-align:left; text-transform:uppercase; }td { padding:16px 17px; border-top:1px solid var(--line); font-size:12px; }td strong,td small { display:block; }td small { margin-top:4px; color:var(--muted); }.row-action { border:0; padding:6px 9px; border-radius:8px; color:var(--green); background:#eef6f0; font-size:11px; font-weight:700; }.badge { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:99px; color:var(--green); background:#eaf5ed; font-size:10px; font-weight:750; }.badge::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }.badge.disabled { color:var(--red); background:#fbeeed; }.pagination { display:flex; align-items:center; justify-content:flex-end; gap:13px; padding:12px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.bar-chart { min-height:350px; display:flex; align-items:flex-end; gap:10px; padding-top:30px; overflow-x:auto; }.bar-day { min-width:46px; flex:1; display:grid; justify-items:center; gap:9px; }.bars { height:250px; display:flex; align-items:flex-end; gap:4px; }.bar { width:12px; min-height:3px; border-radius:5px 5px 2px 2px; background:var(--green); }.bar.failed { background:#e7a19d; }.bar-day small { color:var(--muted); font-size:9px; }
.drawer-backdrop { position:fixed; z-index:20; inset:0; background:rgba(20,35,27,.28); backdrop-filter:blur(2px); }.drawer { position:fixed; z-index:21; top:0; right:0; bottom:0; width:min(540px,100%); padding:0; background:white; box-shadow:-20px 0 50px rgba(20,43,29,.13); transform:translateX(100%); transition:transform .22s ease; overflow:auto; }.drawer.open { transform:translateX(0); }.drawer-header { position:sticky; z-index:2; top:0; display:flex; align-items:center; justify-content:space-between; padding:24px 26px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.95); }.drawer-header h2 { margin:0; font-size:20px; }.icon-button { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:white; font-size:21px; }.drawer-content { display:grid; gap:16px; padding:22px 26px 40px; }.detail-card { padding:17px; border:1px solid var(--line); border-radius:14px; }.detail-card h3 { margin:0 0 15px; font-size:14px; }.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.detail-label { color:var(--muted); font-size:10px; }.detail-value { margin-top:4px; font-size:12px; font-weight:700; }.action-row { display:flex; flex-wrap:wrap; gap:9px; }.danger-button { border:1px solid #f0c6c3; border-radius:9px; padding:9px 11px; color:var(--red); background:#fff7f6; font-size:11px; font-weight:700; }.quota-form { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.quota-form button { grid-column:1/-1; }.device-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--line); }.device-row:first-of-type { border-top:0; }.device-meta strong,.device-meta small { display:block; }.device-meta strong { font-size:12px; }.device-meta small { margin-top:3px; color:var(--muted); font-size:10px; }.usage-mini { display:grid; gap:8px; }.usage-day { display:grid; grid-template-columns:70px 1fr 55px; align-items:center; gap:9px; color:var(--muted); font-size:10px; }.usage-track { height:7px; overflow:hidden; border-radius:99px; background:#edf0ed; }.usage-track span { display:block; height:100%; border-radius:99px; background:var(--green); }
.toast { position:fixed; z-index:40; right:24px; bottom:24px; max-width:360px; padding:13px 16px; border-radius:11px; color:white; background:var(--green-dark); box-shadow:var(--shadow); font-size:12px; }.toast.error { background:#8b2f2c; }
.empty { padding:40px !important; color:var(--muted); text-align:center; }.mobile-only { display:none; }

@media (max-width: 1050px) { .stat-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:1fr; } }
@media (max-width: 760px) {
  .login-shell { grid-template-columns:1fr; }.login-brand { min-height:38vh; padding:42px 28px; }.login-brand h1 { font-size:40px; }.login-copy { margin:20px 0; }.login-card { border-radius:26px 26px 0 0; padding:38px 28px; }
  .app-shell { display:block; }.sidebar { transform:translateX(-100%); transition:transform .2s; }.sidebar.open { transform:translateX(0); }.main-column { grid-column:auto; }.mobile-only { display:grid; }.topbar { padding:15px 18px; }.topbar > div:nth-child(2) { flex:1; margin-left:12px; }.status-pill,.admin-chip div { display:none; }.page-view { padding:24px 16px 50px; }.stat-grid { grid-template-columns:1fr 1fr; gap:10px; }.stat-card { min-height:125px; padding:17px; }.stat-value { font-size:25px; }.section-heading { align-items:flex-start; }.toolbar { align-items:stretch; flex-direction:column; }.toolbar select { width:100%; }.donut-row { gap:20px; }.drawer-content { padding-inline:18px; }
}