:root { color-scheme: light; --ink:#19332d; --muted:#6c817a; --line:#dbe8e2; --mint:#dff3e9; --brand:#28785f; --paper:#fbfdfb; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC",sans-serif; background:radial-gradient(circle at 10% 10%,#e5f6ef,transparent 34%),linear-gradient(145deg,#f8fcfa,#edf6f2); }
.account-page { display:grid; place-items:center; padding:clamp(18px,4vw,48px); }
.account-shell { width:min(880px,100%); display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; align-items:center; }
.account-shell.compact { width:min(760px,100%); }
.account-brand { display:flex; align-items:center; gap:14px; padding:22px; }
.brand-mark { display:grid; place-items:center; width:58px; height:58px; border-radius:20px; color:white; background:var(--brand); font-size:34px; font-weight:850; box-shadow:0 16px 38px rgba(40,120,95,.24); }
.account-brand strong,.account-brand small { display:block; }
.account-brand strong { font-size:30px; letter-spacing:-1px; }
.account-brand small { color:var(--muted); font-size:10px; letter-spacing:1.2px; }
.account-card { padding:clamp(24px,5vw,46px); border:1px solid rgba(255,255,255,.9); border-radius:30px; background:rgba(255,255,255,.88); box-shadow:0 28px 80px rgba(34,75,63,.12); backdrop-filter:blur(18px); }
.account-kicker { margin:0; color:var(--brand); font-size:11px; font-weight:800; letter-spacing:1.5px; }
h1 { margin:7px 0 8px; font-size:clamp(26px,4vw,38px); line-height:1.14; letter-spacing:-1px; }
.account-card>p:not(.account-kicker) { color:var(--muted); }
form { display:grid; gap:15px; margin-top:26px; }
label { display:grid; gap:7px; font-size:12px; font-weight:750; }
input,button { width:100%; min-height:50px; border-radius:14px; font:inherit; }
input { border:1px solid var(--line); padding:0 14px; background:var(--paper); color:var(--ink); outline:none; }
input:focus { border-color:#7ab49f; box-shadow:0 0 0 4px rgba(80,158,128,.12); }
button { border:0; padding:0 18px; color:white; background:var(--brand); font-weight:800; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.account-status { min-height:24px; margin:18px 0 0; color:#9b493f!important; }
.hidden { display:none!important; }
.brand-site { display:inline-block; margin-top:10px; color:var(--brand); font-size:12px; font-weight:750; text-decoration:none; }
.admin-page { min-height:100vh; padding:20px; }
.admin-shell { width:min(1440px,100%); margin:0 auto; display:grid; gap:18px; }
.admin-top { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.admin-top .account-brand { padding:0; }
.admin-actions { display:flex; gap:10px; align-items:center; }
.button-secondary { color:var(--brand); background:#e5f3ed; }
.button-compact { width:auto; min-height:44px; }
.metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.metric,.admin-panel { border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.9); box-shadow:0 16px 44px rgba(34,75,63,.08); }
.metric { border-radius:20px; padding:18px; }
.metric small,.table-note { display:block; color:var(--muted); }
.metric strong { display:block; margin-top:5px; font-size:25px; letter-spacing:-.5px; }
.metric>span { display:block; min-height:18px; margin-top:3px; color:var(--muted); font-size:10px; }
.admin-grid { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.6fr); gap:16px; align-items:start; }
.admin-panel { min-width:0; border-radius:24px; padding:20px; }
.admin-panel h2 { margin:0; font-size:19px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.admin-form { margin:0; grid-template-columns:1fr 1fr; }
.admin-form button { grid-column:1/-1; }
.table-scroll { overflow:auto; max-height:430px; border:1px solid var(--line); border-radius:16px; }
table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:13px; }
th,td { padding:12px; border-bottom:1px solid #edf3f0; text-align:left; }
th { position:sticky; top:0; z-index:1; color:var(--muted); background:#f7fbf9; font-size:11px; }
tr:last-child td { border-bottom:0; }
.status-pill { padding:4px 8px; border-radius:999px; color:#1b6d52; background:#e2f4ec; font-size:11px; }
.status-pill.disabled { color:#86514b; background:#f7e9e7; }
.row-actions { display:flex; gap:6px; }
.row-actions button { width:auto; min-height:36px; padding:0 10px; border-radius:10px; font-size:12px; }
.admin-status { min-height:20px; margin:0; color:#9b493f; }
.pressure-panel { transition:border-color .2s ease,background .2s ease; }
.pressure-panel[data-status="warning"] { border-color:#e9ca83; background:#fffaf0; }
.pressure-panel[data-status="critical"] { border-color:#e8a6a0; background:#fff5f3; }
.pressure-status { padding:6px 10px; border-radius:999px; color:#286c58; background:#e2f4ec; font-size:11px; font-weight:800; }
.pressure-status.warning { color:#886019; background:#fff0c8; }
.pressure-status.critical { color:#a23e37; background:#ffe0dc; }
.pressure-status.unknown { color:var(--muted); background:#edf2f0; }
.pressure-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.pressure-grid>div { min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:15px; background:rgba(251,253,251,.78); }
.pressure-grid small,.pressure-grid span { display:block; color:var(--muted); }
.pressure-grid strong { display:block; margin:5px 0 2px; overflow:hidden; font-size:21px; text-overflow:ellipsis; white-space:nowrap; }
.pressure-grid span { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.pressure-alerts { margin-bottom:12px; }
.pressure-alerts p { margin:5px 0; padding:10px 12px; border-radius:12px; color:#886019; background:#fff0c8; font-size:12px; }
.pressure-alerts p.critical { color:#a23e37; background:#ffe0dc; }
dialog { width:min(520px,calc(100% - 30px)); border:0; border-radius:24px; padding:26px; color:var(--ink); box-shadow:0 30px 90px rgba(18,47,39,.28); }
dialog::backdrop { background:rgba(24,47,41,.34); backdrop-filter:blur(5px); }
.temporary-password { display:block; margin:18px 0; padding:14px; border-radius:14px; background:#eef7f3; overflow-wrap:anywhere; font:700 17px ui-monospace,monospace; }
@media(max-width:1000px){.metric-grid{grid-template-columns:repeat(3,1fr)}.admin-grid{grid-template-columns:1fr}.pressure-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.admin-page{padding:12px}.admin-top{align-items:flex-start}.metric-grid{grid-template-columns:1fr 1fr}.admin-form{grid-template-columns:1fr}.account-brand small{display:none}}
@media(max-width:720px){ .account-shell{grid-template-columns:1fr;gap:6px}.account-brand{padding:6px 4px}.account-card{border-radius:24px} }
@media(pointer:coarse){ input,button{min-height:56px} }
@media(max-width:640px){.pressure-grid{grid-template-columns:1fr}}