:root {
  --ink: #152537;
  --forest: #07111f;
  --forest-2: #0b1c2e;
  --green: #22d3ee;
  --green-dark: #0e7490;
  --mint: #ecfeff;
  --paper: #f5f7fa;
  --white: #fff;
  --muted: #64748b;
  --line: #e2e8f0;
  --danger: #dc2626;
  --shadow: 0 20px 55px rgba(7, 17, 31, .10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
.hidden, [hidden] { display: none !important; }

.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; font-size: 1.35rem; font-weight: 700; letter-spacing: -.035em; }
.brand-light { color: white; }
.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--forest); background: var(--green); font-size: 1.55rem; font-weight: 800; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy small { margin-top: .42rem; color: #94a3b8; font-size: .53rem; font-weight: 500; letter-spacing: .2em; }

.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 1.05fr) minmax(420px, .95fr); }
.auth-story { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 3rem clamp(2.5rem, 6vw, 6.5rem); color: white; background: radial-gradient(circle at 85% 12%, rgba(34, 211, 238, .22), transparent 30%), linear-gradient(145deg, #07111f, #0b1c2e); }
.auth-story::after { content: ""; position: absolute; right: -14%; bottom: 4%; width: 50%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 44% 56% 65% 35%; transform: rotate(25deg); box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.018); }
.story-copy { position: relative; z-index: 1; max-width: 650px; margin: 10vh 0; }
.eyebrow { display: block; margin-bottom: 1rem; color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow.dark { color: var(--green-dark); }
.story-copy h1 { max-width: 13ch; margin: 0 0 1.5rem; font: 700 clamp(3rem, 5vw, 5.2rem)/1.02 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.055em; }
.story-copy p { max-width: 580px; color: #a6b7c9; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.65; }
.trust-row { position: relative; z-index: 1; display: flex; gap: 3rem; border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.5rem; }
.trust-row span { display: grid; gap: .25rem; }.trust-row small { color: #94a3b8; }

.auth-panel { display: grid; place-items: center; padding: 2rem; background: var(--paper); }
.auth-card { width: min(450px, 100%); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); }
.mobile-brand { display: none; margin-bottom: 2rem; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 2rem; border-radius: 12px; background: var(--paper); }
.tab { padding: .75rem; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 700; }
.tab.active { color: var(--ink); background: white; box-shadow: 0 3px 12px rgba(0,0,0,.07); }
.form-stack { display: grid; gap: 1.1rem; }
.form-stack header { margin-bottom: .35rem; }.form-stack h2 { margin: 0 0 .45rem; font-size: 1.65rem; letter-spacing: -.035em; }.form-stack p { margin: 0; color: var(--muted); line-height: 1.55; }
label { display: grid; gap: .5rem; font-size: .85rem; font-weight: 720; }
input { width: 100%; padding: .85rem .95rem; border: 1px solid #cbd5e1; border-radius: 10px; color: var(--ink); background: white; outline: 0; transition: border-color .15s, box-shadow .15s; }
input:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(34, 211, 238, .16); }
label small { color: var(--muted); font-weight: 500; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .72rem 1rem; border: 1px solid transparent; border-radius: 10px; font-weight: 750; transition: transform .12s, opacity .12s, background .12s; }
.button:hover { transform: translateY(-1px); }.button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.button.primary { color: var(--forest); background: var(--green); }.button.primary:hover { background: #16c6e1; }
.button.secondary { color: var(--ink); border-color: var(--line); background: white; }
.button.danger { color: #b42318; border-color: #fecdca; background: #fff; }
.button.danger:hover { background: #fff1f0; }
.button.light { color: var(--forest); background: var(--green); }
.button.full { width: 100%; margin-top: .3rem; }

.portal { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 2rem 1.25rem 1.25rem; color: white; background: var(--forest); }
.sidebar .brand { padding: 0 .65rem; margin-bottom: 3rem; }
.sidebar nav { display: grid; gap: .35rem; }
.nav-link { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border: 0; border-radius: 10px; color: #94a3b8; background: transparent; text-decoration: none; text-align: left; }
.nav-link.active { color: var(--green); background: #0e2a39; }.nav-link.disabled { opacity: .48; cursor: default; }.nav-link small { margin-left: auto; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.nav-icon { width: 22px; color: var(--green); text-align: center; font-weight: 900; }
.sidebar-note { display: flex; gap: .7rem; margin-top: auto; padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.045); }
.sidebar-note div { display: grid; gap: .3rem; }.sidebar-note b { font-size: .75rem; }.sidebar-note small { color: #94a3b8; font-size: .68rem; line-height: 1.45; }
.signal-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,211,238,.1); }
.logout { margin-top: 1rem; }

.portal-main { min-width: 0; padding: 2.5rem clamp(1.4rem, 4vw, 4rem) 5rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.topbar h1 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }.topbar .eyebrow { margin-bottom: .3rem; }
.account-chip { display: flex; align-items: center; gap: .75rem; min-width: 0; max-width: 50%; }.account-chip > span { width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; color: var(--forest); background: var(--green); font-weight: 800; }.account-chip div { display: grid; min-width: 0; }.account-chip b, .account-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.account-chip small { color: var(--muted); }
.hero-card { position: relative; overflow: hidden; display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: clamp(1.7rem, 4vw, 3.2rem); border-radius: 22px; color: white; background: linear-gradient(120deg, #0b1c2e 0%, #07111f 75%); box-shadow: var(--shadow); }
.hero-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: 8%; top: -65%; border: 1px solid rgba(34,211,238,.3); border-radius: 50%; box-shadow: 0 0 0 35px rgba(34,211,238,.04), 0 0 0 70px rgba(34,211,238,.025); }
.hero-card > * { position: relative; z-index: 1; }.hero-kicker { color: var(--green); font-size: .68rem; font-weight: 850; letter-spacing: .16em; }.hero-card h2 { max-width: 640px; margin: .65rem 0 .7rem; font: 650 clamp(1.8rem, 3vw, 3rem)/1.07 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.035em; }.hero-card p { max-width: 660px; margin: 0; color: #a6b7c9; line-height: 1.55; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 2.6rem 0 1.2rem; }.section-head h2 { margin: 0 0 .3rem; font-size: 1.35rem; }.section-head p { margin: 0; color: var(--muted); }
.icon-button, .close-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; font-size: 1.1rem; }
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1rem; }
.site-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; min-height: 330px; padding: 1.4rem; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 7px 25px rgba(7, 17, 31, .045); }
.site-card header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }.site-symbol { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: end; gap: 4px; padding: 9px; border-radius: 11px; background: var(--mint); }.site-symbol span { width: 6px; border-radius: 2px 2px 0 0; background: var(--green-dark); }.site-symbol span:nth-child(1) { height: 11px; }.site-symbol span:nth-child(2) { height: 22px; }.site-symbol span:nth-child(3) { height: 16px; }
.status-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .55rem; border-radius: 999px; color: var(--muted); background: var(--paper); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #9da8a1; }.status-pill.online { color: #17673b; background: #e6f7ec; }.status-pill.online i { background: #34b969; box-shadow: 0 0 0 3px rgba(52,185,105,.12); }
.site-copy { min-width: 0; overflow-wrap: anywhere; }.site-copy h3 { margin: 0 0 .4rem; font-size: 1.2rem; }.site-copy p { margin: 0; color: var(--muted); font: .72rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.site-card dl { min-width: 0; display: grid; gap: .65rem; margin: 0; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.site-card dl div { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }.site-card dt { color: var(--muted); font-size: .78rem; }.site-card dd { min-width: 0; margin: 0; font-size: .8rem; font-weight: 720; text-align: right; overflow-wrap: anywhere; }
.site-controls { align-self: end; min-width: 0; }.site-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }.site-actions .button { min-width: 0; padding-inline: .6rem; font-size: .88rem; }.site-actions .open-dashboard, .site-actions .disconnect-pi { grid-column: 1 / -1; }.site-note { margin: 0 0 .6rem; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.empty-card { grid-column: 1 / -1; padding: 3rem; border: 1px dashed #b7c4bc; border-radius: 17px; color: var(--muted); text-align: center; background: rgba(255,255,255,.5); }.empty-card h3 { margin: 0 0 .4rem; color: var(--ink); }

.dialog { width: min(520px, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 19px; color: var(--ink); box-shadow: 0 28px 90px rgba(7,17,31,.28); }.dialog::backdrop { background: rgba(7, 17, 31, .68); backdrop-filter: blur(4px); }.dialog form { padding: 1.7rem; }.dialog-head { display: flex; justify-content: space-between; align-items: start; }.dialog-head h2 { margin: 0; }.dialog-head .eyebrow { margin-bottom: .35rem; }.dialog code { padding: .12rem .3rem; border-radius: 4px; background: var(--paper); }.dialog-actions { display: flex; justify-content: end; gap: .7rem; margin-top: .5rem; }.pair-code { font: 750 1.3rem ui-monospace, monospace; text-transform: uppercase; letter-spacing: .15em; text-align: center; }.pair-security { display: flex; gap: .8rem; padding: .85rem; border-radius: 11px; color: var(--green-dark); background: var(--mint); }.pair-security p { display: grid; gap: .2rem; }.pair-security small { font-size: .73rem; }
.toast { position: fixed; z-index: 100; right: 1.2rem; bottom: 1.2rem; max-width: min(390px, calc(100% - 2.4rem)); padding: .85rem 1rem; border-radius: 11px; color: white; background: var(--forest); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s; }.toast.show { opacity: 1; transform: translateY(0); }.toast.error { background: var(--danger); }

.confirmation-help { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.confirmation-error { color: var(--danger) !important; }

.support-intro { padding: 1.7rem 2rem; border-radius: 20px; color: white; background: linear-gradient(120deg, var(--forest-2), var(--forest)); }.support-badge { color: var(--green); font-size: .68rem; font-weight: 800; letter-spacing: .13em; }.support-intro h2 { margin: .65rem 0; font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -.035em; }.support-intro p { max-width: 680px; margin: 0; color: #a6b7c9; line-height: 1.55; }
#support-access-message { margin-top: 1.5rem; }
.support-search { display: flex; align-items: end; gap: .7rem; margin-top: 1.7rem; }.support-search label { flex: 1; min-width: 0; }.support-search input { min-width: 0; }.support-search .button { flex-shrink: 0; }
.support-section-head { margin-top: 1.8rem; }.customer-list { display: grid; gap: 1rem; min-width: 0; }.customer-card { min-width: 0; border: 1px solid var(--line); border-radius: 17px; background: white; overflow: hidden; }.customer-card > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.3rem 1.4rem; cursor: pointer; list-style: none; }.customer-card > summary::-webkit-details-marker { display: none; }.customer-card > summary::after { content: '+'; color: var(--green-dark); font-size: 1.5rem; }.customer-card[open] > summary::after { content: '−'; }.customer-card > summary:hover { background: #fbfdfe; }.customer-card > summary:focus-visible { outline: 3px solid var(--green-dark); outline-offset: -3px; }
.customer-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr); gap: 1rem; min-width: 0; }.customer-identity, .customer-company { min-width: 0; }.customer-identity h3 { margin: 0 0 .25rem; font-size: 1.05rem; overflow-wrap: anywhere; }.customer-email { margin: 0; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }.customer-company p { margin: 0 0 .3rem; color: var(--ink); font-size: .85rem; overflow-wrap: anywhere; }.customer-company small { color: var(--muted); }.email-status { display: inline-block; margin-top: .5rem; color: var(--green-dark); font-size: .7rem; font-weight: 700; }.email-status.pending { color: #946000; }
.customer-body { padding: 0 1.4rem 1.4rem; border-top: 1px solid var(--line); }.customer-meta { margin: 1rem 0; color: var(--muted); font-size: .76rem; }.company-section + .company-section { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid var(--line); }.company-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin: 1.2rem 0 1rem; }.company-header h4 { min-width: 0; margin: 0; font-size: 1rem; overflow-wrap: anywhere; }.role-label { color: var(--muted); font-size: .75rem; text-transform: capitalize; }.customer-body .site-card { background: #fbfdfe; padding: 1.1rem; box-shadow: none; }.customer-body .site-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }.customer-empty { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }.pagination span { color: var(--muted); font-size: .8rem; text-align: center; }.support-audit { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }.support-audit > summary { cursor: pointer; color: var(--muted); font-weight: 700; font-size: .9rem; }.audit-list { margin: 1rem 0 0; padding: 0; list-style: none; }.audit-list li { display: grid; gap: .35rem; padding: .9rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }.audit-list p { margin: 0; font-size: .85rem; }.audit-list small, .audit-message { color: var(--muted); font-size: .75rem; }.audit-list time { display: block; }.support-retry { margin-top: 1rem; }
#site-action-description { overflow-wrap: anywhere; }.dialog-head { gap: .75rem; }.close-button { flex-shrink: 0; }
.support-staff { margin-top: 2rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: 17px; background: white; }.support-staff > summary { cursor: pointer; font-weight: 750; }.owner-label { display: inline-block; margin-left: .4rem; padding: .2rem .45rem; border-radius: 6px; color: var(--green-dark); background: var(--mint); font-size: .68rem; }.staff-help { color: var(--muted); font-size: .85rem; line-height: 1.55; }.staff-grant-form { max-width: 620px; margin: 1.2rem 0 1.5rem; }.staff-grant-form > .button { justify-self: start; }.permission-options { display: grid; gap: .65rem; min-width: 0; margin: 0; padding: .9rem 1rem 1rem; border: 1px solid var(--line); border-radius: 10px; }.permission-options legend { padding: 0 .3rem; color: var(--muted); font-size: .75rem; font-weight: 650; }.permission-options label { display: flex; align-items: start; gap: .6rem; font-size: .8rem; font-weight: 550; line-height: 1.4; }.permission-options input { flex: 0 0 auto; width: 16px; height: 16px; padding: 0; margin: .05rem 0 0; accent-color: var(--green-dark); }.staff-list { display: grid; gap: 1rem; }.staff-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1.2fr); gap: 1rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }.staff-identity { min-width: 0; overflow-wrap: anywhere; }.staff-identity h3 { margin: 0 0 .3rem; font-size: .95rem; }.staff-identity p { margin: 0; color: var(--muted); font-size: .82rem; }.staff-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; }.staff-actions .button { font-size: .8rem; }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }.auth-story { display: none; }.mobile-brand { display: inline-flex; }.auth-panel { min-height: 100vh; }
  .portal { grid-template-columns: 76px minmax(0, 1fr); }.sidebar { padding-inline: .65rem; }.sidebar .brand-copy, .nav-link small, .sidebar-note { display: none; }.sidebar .brand { padding: 0; justify-content: center; }.nav-link { justify-content: center; font-size: 0; }.nav-icon { font-size: 1rem; }.logout { justify-content: center; }
}
@media (max-width: 620px) {
  .portal { display: block; }.sidebar { position: static; width: 100%; height: auto; flex-direction: row; align-items: center; padding: .8rem 1rem; }.sidebar .brand { margin: 0 auto 0 0; }.sidebar nav { display: flex; }.sidebar .nav-link { width: auto; }.logout { width: auto; margin: 0; }
  .portal-main { padding: 1.4rem 1rem 4rem; }.account-chip div { display: none; }.hero-card { align-items: start; flex-direction: column; }.site-grid { grid-template-columns: minmax(0, 1fr); }
  .sidebar .nav-link.disabled { display: none; }.support-intro { padding: 1.5rem; }.support-search { flex-wrap: wrap; }.support-search label { flex-basis: 100%; }.customer-summary { grid-template-columns: minmax(0, 1fr); gap: .65rem; }.customer-card > summary { padding: 1.1rem; }.customer-body { padding-inline: .85rem; }.customer-body .site-card { padding: 1rem; }.pagination { gap: .6rem; }.pagination .button { padding-inline: .7rem; }.empty-card { padding: 2rem 1rem; }.dialog form { padding: 1.3rem; }.dialog-actions { flex-wrap: wrap; }
  .support-staff { padding: 1rem; }.staff-card { grid-template-columns: minmax(0, 1fr); }.staff-actions .button { flex: 1; }.staff-grant-form > .button { justify-self: stretch; }
}