:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #070b08; color: #f7f7ed; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0, rgba(242,138,23,.16), transparent 34%), linear-gradient(135deg, #070b08, #101712); }
button, input { font: inherit; }
.hidden { display: none !important; }
.connect-header { width: min(1180px, calc(100% - 32px)); margin: auto; min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.connect-brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.connect-brand img { width: 52px; height: 52px; object-fit: contain; border-radius: 14px; }
.connect-brand strong, .connect-brand small { display: block; }
.connect-brand small { margin-top: 2px; color: #9eaa9f; }
main { width: min(1180px, calc(100% - 32px)); margin: auto; padding: 40px 0 80px; }
.auth-layout { min-height: calc(100vh - 170px); display: grid; grid-template-columns: 1.2fr minmax(300px, 440px); align-items: center; gap: clamp(36px, 8vw, 110px); }
.intro h1, .dashboard-title h1 { margin: 10px 0 18px; max-width: 760px; font-size: clamp(2.5rem, 6vw, 5.6rem); line-height: .96; letter-spacing: -.045em; }
.intro p, .dashboard-title p { color: #aeb9b0; font-size: 1.1rem; line-height: 1.65; }
.eyebrow { color: #f6bd31; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; font-size: .76rem; }
.panel { border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: rgba(20,29,22,.82); box-shadow: 0 24px 70px rgba(0,0,0,.3); padding: clamp(22px, 4vw, 34px); }
.panel h2 { margin: 7px 0 24px; }
label { display: grid; gap: 8px; margin: 0 0 17px; color: #d5ddd6; font-size: .9rem; font-weight: 750; }
input { width: 100%; min-height: 52px; border: 1px solid #415046; border-radius: 13px; background: #ebe3cf; color: #172018; padding: 0 15px; outline: none; }
input:focus { border-color: #f28a17; box-shadow: 0 0 0 3px rgba(242,138,23,.17); }
button { min-height: 48px; border: 0; border-radius: 13px; background: linear-gradient(135deg, #fde047, #fb923c); color: #111713; padding: 0 20px; font-weight: 900; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
button.secondary { border: 1px solid rgba(255,255,255,.15); background: #18221a; color: #f3f5ed; }
.status { min-height: 24px; margin: 14px 0 0; color: #bdc8be; line-height: 1.45; }
.status.error { color: #ffb4ab; }
.dashboard-title { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.dashboard-title h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.metrics article { min-height: 138px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(255,255,255,.055); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.metrics span { color: #aeb9b0; font-weight: 750; }
.metrics strong { color: #fde047; font-size: 2.45rem; }
.metrics .metric-label { font-size: 1rem; color: #e7ece7; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 18px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; }
.organization-list { display: grid; gap: 12px; }
.organization-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.035); padding: 16px; }
.organization-card strong, .organization-card small { display: block; }
.organization-card small { margin-top: 5px; color: #9eaa9f; }
.badge { align-self: start; border-radius: 999px; background: #173c25; color: #a6f2ba; padding: 7px 10px; font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.badge.suspended { background: #422420; color: #ffc1b8; }
.badge.requested, .badge.in_review, .badge.configuring, .badge.testing, .badge.pending_approval { background: #413613; color: #ffe58a; }
.badge.revoked { background: #302f31; color: #c9c5cb; }
.organization-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.organization-actions button { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: .78rem; }
.organization-actions button.danger { background: #422420; color: #ffc1b8; }
.empty { color: #aeb9b0; padding: 26px 0; line-height: 1.6; }
@media (max-width: 1000px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 850px) { .auth-layout, .content-grid { grid-template-columns: 1fr; } .metrics { grid-template-columns: repeat(2, 1fr); } .dashboard-title { align-items: start; flex-direction: column; } }
@media (max-width: 480px) { main { padding-top: 24px; } .metrics { grid-template-columns: 1fr 1fr; } .metrics article { min-height: 112px; padding: 16px; } .organization-card { grid-template-columns: 1fr; } }