:root { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; color: #18382e; background: #f4f1e8; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-size: 13px; }
.topbar { min-height: 48px; padding: 6px clamp(12px,3vw,32px); display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; background: #173f33; }
.brand,.top-actions,.hero,.section-head,.search-row { display: flex; align-items: center; }
.brand { gap: 0; }.brand small { width: fit-content; padding: 4px 6px 4px 8px; display: block; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; color: #fff; background: #236b52; font-size: 13px; font-weight: 900; letter-spacing: .16em; line-height: 1; }.eyebrow { font-size: 9px; font-weight: 800; letter-spacing: .13em; }.brand h1 { margin: 3px 0 0; font-size: 15px; }.top-actions { gap: 8px; }
.admin-badge,.status { padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; }.admin-badge { background: rgba(255,255,255,.14); }
main { width: min(1440px, calc(100% - 20px)); margin: 0 auto; padding: 6px 0; }
.gate { min-height: 55vh; display: grid; place-items: center; }.gate-card { width: min(420px,100%); padding: 22px; border-radius: 13px; background: #fff; box-shadow: 0 12px 34px rgba(23,63,51,.12); text-align: center; }
.hero { justify-content: space-between; gap: 10px; padding: 9px 13px; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#1f604b,#173f33); }.hero h2,.section-head h2 { margin: 1px 0 2px; }.hero h2 { font-size: 16px; }.hero p { margin: 0; font-size: 10px; }.eyebrow { margin: 0; color: #ca714b; }.hero .eyebrow { color: #f1b394; }
.hero-actions { display: flex; align-items: center; gap: 8px; }
.guidance-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; cursor: pointer; }
.guidance-switch input { position: absolute; opacity: 0; pointer-events: none; }
.guidance-switch i { position: relative; width: 34px; height: 19px; border-radius: 999px; background: rgba(255,255,255,.28); transition: .2s ease; }
.guidance-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: .2s ease; }
.guidance-switch input:checked + i { background: #e3936f; }
.guidance-switch input:checked + i::after { transform: translateX(15px); }
.guidance-switch input:focus-visible + i { outline: 3px solid rgba(255,255,255,.32); outline-offset: 2px; }
.admin-tip { grid-column: 1 / -1; margin: 0; padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #dfc99f; border-radius: 8px; color: #60451e; background: #fff8e8; }
.admin-tip strong { font-size: 10px; }.admin-tip p { display: inline; margin: 0 0 0 7px; color: #786b50; font-size: 9px; }.admin-tip button { border: 0; color: #786b50; background: transparent; font-size: 17px; cursor: pointer; }
section { margin-top: 14px; }.section-head { justify-content: space-between; gap: 8px; margin-bottom: 5px; }.section-head h2 { font-size: 15px; }.note { color: #687871; font-size: 9px; }
#dashboard { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,4fr); gap: 6px; align-items: start; }
#dashboard > section { margin-top: 0; }
#dashboard > .hero,#dashboard > [aria-labelledby="users-title"],#dashboard > [aria-labelledby="billing-title"] { grid-column: 1 / -1; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }.metric { min-height: 57px; padding: 6px 8px; border: 1px solid #e0dacb; border-radius: 8px; background: #fff; }.metric small { color: #697870; font-size: 9px; }.metric strong { display: block; margin-top: 2px; font-size: 17px; line-height: 1.05; }.metric em { display: block; margin-top: 1px; overflow: hidden; color: #829088; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 5px; }.panel,.billing-panel { padding: 7px 8px; border: 1px solid #e0dacb; border-radius: 8px; background: #fff; }.panel h3,.billing-panel h3 { margin: 0 0 1px; font-size: 11px; }.panel>p,.billing-panel p { margin: 0 0 3px; color: #687871; font-size: 8px; }
.bar-row { display: grid; grid-template-columns: 76px 1fr 24px; gap: 5px; align-items: center; margin: 3px 0; font-size: 8px; }.bar-track { height: 4px; overflow: hidden; border-radius: 999px; background: #eeeae0; }.bar-fill { height: 100%; border-radius: inherit; background: #d17a50; }
.search-row { gap: 6px; margin-bottom: 8px; }.search-row input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #cfc8b8; border-radius: 7px; font: inherit; }
.table-wrap { max-height: 100px; overflow: auto; border: 1px solid #e0dacb; border-radius: 8px; background: #fff; }table { width: 100%; border-collapse: collapse; min-width: 980px; }th,td { padding: 5px 7px; border-bottom: 1px solid #eeeae0; text-align: left; font-size: 10px; white-space: nowrap; }th { position: sticky; top: 0; z-index: 1; color: #687871; background: #fff; font-size: 8px; }.user-cell strong,.user-cell small { display: block; }.user-cell small { margin-top: 1px; color: #718078; font-size: 8px; }.status.active { color: #176044; background: #e6f4ed; }.status.suspended,.status.reached { color: #993e35; background: #fde9e5; }.status.preparing { color: #8a5a18; background: #f8edd8; }.usage-cell strong,.usage-cell small { display:block; }.usage-cell small { margin-top:1px; color:#718078; font-size:8px; }
.billing-panel { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.dead-links { display: flex; flex-wrap: wrap; gap: 4px; }.dead-links button { padding: 5px 7px; border: 1px dashed #bdb5a5; border-radius: 6px; color: #8d897f; background: #f7f5ef; font-size: 8px; }
.billing-panel p { display: none; }
.billing-panel #stripe-test-message { display: block; margin: 1px 0 0; max-width: 620px; font-size: 8px; line-height: 1.25; }
.dead-links button:not(:disabled) { cursor: pointer; color: #173f33; border-style: solid; border-color: #9fb5ab; background: #fff; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border: 0; border-radius: 7px; font: inherit; font-size: 11px; font-weight: 800; text-decoration: none; cursor: pointer; }.primary { color:#fff;background:#c66c47; }.secondary { color:#173f33;background:#fff; }.small { padding: 5px 7px; font-size: 9px; }.danger { color:#9a3d34;background:#fff0ed; }
.error { color: #9a3d34; }.empty { padding: 24px; color: #718078; text-align: center; }
@media (max-width:1100px){#dashboard{display:block}#dashboard>section{margin-top:14px}.metric-grid{grid-template-columns:repeat(4,1fr)}.chart-grid{grid-template-columns:1fr 1fr}.billing-panel{align-items:flex-start;flex-direction:column}.billing-panel p{display:block}.admin-badge{display:none}.table-wrap{max-height:none}}
@media (max-width:850px){.metric-grid{grid-template-columns:repeat(2,1fr)}.chart-grid{grid-template-columns:1fr}}
@media (max-width:520px){body{font-size:12px}main{width:min(100% - 14px,1320px);padding-top:10px}.topbar{padding:7px 9px}.brand h1{font-size:13px}.metric-grid{grid-template-columns:1fr 1fr}.metric{min-height:78px;padding:10px}.metric strong{font-size:20px}.hero{padding:10px}.hero-actions{align-items:flex-end;flex-direction:column}.guidance-switch span{display:none}.admin-tip p{display:block;margin:2px 0 0}.bar-row{grid-template-columns:82px 1fr 30px}}