/* NAN Cloud portal — design system.
   A calm, modern SaaS aesthetic: violet/indigo accent, soft depth, generous
   spacing. Theme-aware (light default, dark via prefers-color-scheme). */

:root {
  --bg: #f4f5fb;
  --bg-soft: #ececf5;
  --surface: #ffffff;
  --surface-2: #f8f9fe;
  --border: #e6e8f0;
  --border-strong: #d5d8e6;
  --text: #171a2b;
  --text-soft: #565b78;
  --text-faint: #8b90a8;
  --accent: #6b4dff;
  --accent-2: #9a6bff;
  --accent-soft: #efeaff;
  --accent-ink: #ffffff;
  --success: #16a34a;
  --success-soft: #e7f7ec;
  --danger: #e5484d;
  --danger-soft: #fdecec;
  --warning: #d98a00;
  --warning-soft: #fbf1dc;
  --ring: rgba(107, 77, 255, 0.25);
  --shadow-sm: 0 1px 2px rgba(20, 22, 45, 0.06);
  --shadow-md: 0 8px 24px rgba(24, 26, 54, 0.10);
  --shadow-lg: 0 24px 64px rgba(24, 26, 54, 0.18);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0d16;
    --bg-soft: #101223;
    --surface: #16182a;
    --surface-2: #1c1f34;
    --border: #262a42;
    --border-strong: #333857;
    --text: #eef0fb;
    --text-soft: #a7abc8;
    --text-faint: #71769a;
    --accent: #8b6bff;
    --accent-2: #b18cff;
    --accent-soft: #241f45;
    --accent-ink: #ffffff;
    --success: #3fce7a;
    --success-soft: #14301f;
    --danger: #ff6b70;
    --danger-soft: #33161a;
    --warning: #f0b429;
    --warning-soft: #322717;
    --ring: rgba(139, 107, 255, 0.35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Auth layout: split brand panel + form card ---------- */

.auth {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .auth { grid-template-columns: 1.05fr 1fr; }
}

.brand-panel {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 60px;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 0% 0%, #7d5bff 0%, #5a37e0 45%, #3d1fb0 100%);
}

@media (min-width: 940px) { .brand-panel { display: flex; } }

.brand-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 90% 15%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(255,255,255,0.14), transparent 60%);
  pointer-events: none;
}

.brand-mark {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 20px; letter-spacing: -0.02em;
  position: relative; z-index: 1;
}
.brand-logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  display: grid; place-items: center; font-size: 20px;
  backdrop-filter: blur(6px);
}

.brand-hero { position: relative; z-index: 1; max-width: 460px; }
.brand-hero h1 {
  font-size: 40px; line-height: 1.1; letter-spacing: -0.03em;
  margin: 0 0 18px; font-weight: 700;
}
.brand-hero p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.86); margin: 0; }

.brand-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.brand-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: rgba(255,255,255,0.92); }
.brand-points .tick {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,0.2); display: grid; place-items: center; font-size: 12px;
}

.brand-foot { position: relative; z-index: 1; font-size: 13px; color: rgba(255,255,255,0.7); }

.form-side {
  position: relative;
  /* Column, so the "download NAN" link can sit under the card instead of
     beside it - it belongs to every auth step, not to the form. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.auth-foot { margin: 18px 0 0; text-align: center; font-size: 14px; }
.auth-foot a { display: inline-flex; align-items: center; gap: 6px; }
.form-card {
  width: 100%; max-width: 440px;
}

/* ---------- Cards, headings ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 32px;
}

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px;
  font-weight: 600; color: var(--accent); margin: 0 0 10px;
}
h2.title { font-size: 25px; letter-spacing: -0.02em; margin: 0 0 6px; font-weight: 700; }
.subtitle { color: var(--text-soft); font-size: 15px; margin: 0 0 24px; line-height: 1.55; }

/* ---------- Stepper ---------- */

.stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.step {
  display: flex; align-items: center; gap: 10px; flex: 1;
}
.step .dot {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: var(--surface-2); color: var(--text-faint);
  border: 1.5px solid var(--border-strong); transition: all .25s;
}
.step .label { font-size: 13px; color: var(--text-faint); font-weight: 500; }
.step.active .dot { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.step.active .label { color: var(--text); }
.step.done .dot { background: var(--success); color: #fff; border-color: var(--success); }
.step.done .label { color: var(--text-soft); }
.step-line { flex: 1; height: 2px; background: var(--border-strong); border-radius: 2px; }
.step-line.done { background: var(--success); }

@media (max-width: 520px) { .step .label { display: none; } }

/* ---------- Forms ---------- */

.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-soft);
  margin-bottom: 7px;
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 460px) { .row { grid-template-columns: 1fr; } }

.input {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
  color: var(--text); background: var(--surface-2);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s, background .15s;
  outline: none;
}
.input::placeholder { color: var(--text-faint); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); background: var(--surface); }
.input:disabled { opacity: 0.6; cursor: not-allowed; }
textarea.input { resize: vertical; min-height: 76px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px 18px; font-size: 15px; font-weight: 600;
  font-family: inherit; border-radius: var(--radius-sm); cursor: pointer;
  border: 1.5px solid transparent; transition: transform .05s, filter .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.btn-ghost { background: transparent; color: var(--text-soft); border-color: var(--border-strong); width: auto; padding: 10px 16px; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-weight: 600; padding: 0; width: auto; }
.btn-link:hover { text-decoration: underline; }
.back-link { display: inline-flex; align-items: center; gap: 5px; }

.form-actions { margin-top: 22px; }
.form-foot { margin-top: 20px; text-align: center; font-size: 14px; color: var(--text-soft); }

/* ---------- OTP code input ---------- */

.otp { display: flex; gap: 10px; justify-content: space-between; }
.otp input {
  width: 100%; aspect-ratio: 1 / 1.15; text-align: center; font-size: 24px;
  font-weight: 600; font-family: var(--mono);
  color: var(--text); background: var(--surface-2);
  border: 1.5px solid var(--border-strong); border-radius: 12px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.otp input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); background: var(--surface); }

/* ---------- Alerts & hints ---------- */

.alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; line-height: 1.5;
}
.alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-info { background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.alert-success { background: var(--success-soft); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.dev-code {
  margin-bottom: 18px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--warning-soft); color: var(--warning); font-size: 13px;
  border: 1px dashed color-mix(in srgb, var(--warning) 40%, transparent);
}
.dev-code b { font-family: var(--mono); letter-spacing: 0.14em; }

/* ---------- 2FA setup ---------- */

.totp-setup { display: grid; gap: 20px; }
.qr-box {
  display: grid; place-items: center; padding: 18px; background: #fff;
  border: 1px solid var(--border); border-radius: 14px; width: fit-content;
  margin: 0 auto; box-shadow: var(--shadow-sm);
}
.qr-box svg, .qr-box canvas { display: block; width: 180px; height: 180px; }
.secret-row {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.08em;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 14px; word-break: break-all;
}
.copy-btn {
  flex: none; background: none; border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 5px 9px; cursor: pointer; color: var(--text-soft);
  font-size: 12px;
}
.copy-btn:hover { background: var(--surface); color: var(--text); }

/* ---------- App shell (dashboard) ---------- */

.shell { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand-mark { color: var(--text); font-size: 17px; }
.topbar .brand-logo {
  background: var(--accent); border: none; color: #fff; width: 34px; height: 34px;
  border-radius: 10px; font-size: 17px;
}
.topbar-right { display: flex; align-items: center; gap: 14px; }
.who { text-align: right; line-height: 1.25; }
.who .name { font-weight: 600; font-size: 14px; }
.who .org { font-size: 12px; color: var(--text-faint); }
.avatar {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px;
}

.content { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 34px 28px 64px; }

.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: 27px; letter-spacing: -0.02em; margin: 0 0 6px; }
.page-head p { margin: 0; color: var(--text-soft); font-size: 15px; }

.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.stat .k { font-size: 13px; color: var(--text-faint); font-weight: 500; margin-bottom: 8px; }
.stat .v { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.stat .v small { font-size: 14px; color: var(--text-faint); font-weight: 500; }

.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.panel-head h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.panel-head p { margin: 3px 0 0; font-size: 13px; color: var(--text-faint); }

.claim-form { display: flex; gap: 10px; flex: 1; min-width: 260px; max-width: 520px; }
.claim-form .input { flex: 1; }
.claim-form .btn { width: auto; padding: 12px 18px; white-space: nowrap; }

/* ---------- System cards ---------- */

.systems { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; padding: 22px; }
.sys-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px;
  background: var(--surface-2); transition: border-color .15s, transform .1s, box-shadow .15s;
}
.sys-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.sys-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sys-id { font-family: var(--mono); font-size: 12.5px; color: var(--text-soft); word-break: break-all; }
.sys-icon {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 18px;
}
.sys-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 6px 0; }
.sys-row .k { color: var(--text-faint); }
.sys-row .val { color: var(--text); font-weight: 500; }
.sys-lic {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-strong);
}

.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge-green { background: var(--success-soft); color: var(--success); }
.badge-gray { background: var(--surface); color: var(--text-faint); border: 1px solid var(--border); }
.badge-amber { background: var(--warning-soft); color: var(--warning); }
.badge-red { background: var(--danger-soft); color: var(--danger); }
.badge-violet { background: var(--accent-soft); color: var(--accent); }
.badge-ver { background: var(--surface-2); color: var(--text-faint); border: 1px solid var(--border); font-family: var(--mono); font-size: 11px; padding: 2px 8px; }
.badge-ver::before { display: none; }

.empty {
  padding: 60px 22px; text-align: center; color: var(--text-faint);
}
.empty .ico { font-size: 40px; margin-bottom: 12px; opacity: 0.7; }
.empty h4 { margin: 0 0 6px; color: var(--text-soft); font-size: 16px; }
.empty p { margin: 0; font-size: 14px; }

/* ---------- Misc ---------- */

.spinner {
  width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center-load { min-height: 100%; display: grid; place-items: center; color: var(--text-faint); }
.center-load .spinner { border-color: var(--border-strong); border-top-color: var(--accent); width: 26px; height: 26px; }

.hidden { display: none !important; }
.fade-in { animation: fade .35s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- App shell: topbar + sidebar ---------- */

.app { min-height: 100%; display: flex; flex-direction: column; }

.app-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  /* Wraps rather than overflowing: brand + org picker + user block is a lot to
     fit, and a topbar that pushes the page sideways breaks every view under
     it. A second row is the graceful failure. */
  flex-wrap: wrap;
  padding: 12px 22px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.app-topbar .brand-mark { color: var(--text); font-size: 16px; }
.app-topbar .brand-logo { background: var(--accent); border: none; color: #fff; width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }

.org-switch { display: flex; align-items: center; gap: 8px; }
.org-switch label { font-size: 12px; color: var(--text-faint); font-weight: 500; }
.select {
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--border-strong);
  border-radius: 10px; padding: 8px 12px; cursor: pointer; outline: none; max-width: 260px;
}
.select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }

.topbar-user { display: flex; align-items: center; gap: 12px; }
.topbar-user .who { text-align: right; line-height: 1.2; }
.topbar-user .who .name { font-weight: 600; font-size: 13px; }
.topbar-user .who .mail { font-size: 11px; color: var(--text-faint); }

.app-body { flex: 1; display: flex; align-items: stretch; }
.sidebar {
  width: 232px; flex: none; border-right: 1px solid var(--border); background: var(--surface);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px;
  font-size: 14px; font-weight: 500; color: var(--text-soft); cursor: pointer;
  border: none; background: none; width: 100%; text-align: left; font-family: inherit;
  transition: background .12s, color .12s;
}
.nav-item .ic { width: 20px; text-align: center; font-size: 16px; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-badge {
  margin-left: auto; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
}
.sidebar-foot { margin-top: auto; padding-top: 12px; }

.main { flex: 1; min-width: 0; }
.main .content { max-width: 940px; margin: 0 auto; padding: 32px 28px 64px; }

@media (max-width: 760px) {
  .app-body { flex-direction: column; }
  .sidebar { width: auto; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar-foot { display: none; }
  .nav-item .label { display: none; }
  .org-switch label { display: none; }
}

/* ---------- Section headers, generic panels ---------- */

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.section-head h1 { font-size: 25px; letter-spacing: -0.02em; margin: 0 0 5px; }
.section-head p { margin: 0; color: var(--text-soft); font-size: 14px; }

.card-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-panel + .card-panel { margin-top: 20px; }
.card-panel > .ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-panel > .ph h3 { margin: 0; font-size: 16px; }
.card-panel > .ph p { margin: 2px 0 0; font-size: 12px; color: var(--text-faint); }
.card-panel > .pb { padding: 20px; }

/* ---------- Plan / license bits on system cards ---------- */

.sys-plan { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.sys-actions { display: flex; gap: 8px; margin-top: 14px; }
.sys-actions .btn { width: auto; flex: 1; padding: 9px 12px; font-size: 13px; }
.btn-sm { width: auto; padding: 9px 14px; font-size: 13px; }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.btn-danger:hover { filter: brightness(0.97); }
.price-line { font-size: 13px; color: var(--text-soft); }
.price-line b { color: var(--text); }

/* ---------- Members ---------- */

.member-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: none; }
.member-row .avatar { width: 40px; height: 40px; }
.member-row .info { flex: 1; min-width: 0; }
.member-row .info .n { font-weight: 600; font-size: 14px; }
.member-row .info .e { font-size: 13px; color: var(--text-faint); }
.invite-form { display: flex; gap: 10px; }
.invite-form .input { flex: 1; }
.invite-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px dashed var(--border); font-size: 14px; }
.invite-row:last-child { border-bottom: none; }
.invite-row .e { flex: 1; color: var(--text-soft); }

/* ---------- Organization list ---------- */

.org-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.org-card:last-child { border-bottom: none; }
.org-badge { width: 46px; height: 46px; border-radius: 12px; flex: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.org-card .info { flex: 1; }
.org-card .info .n { font-weight: 600; font-size: 15px; }
.org-card .info .a { font-size: 13px; color: var(--text-faint); }

/* ---------- Account forms ---------- */

.acct-grid { display: grid; gap: 20px; }
.field-inline { display: flex; gap: 10px; align-items: flex-end; }
.field-inline .field { flex: 1; margin-bottom: 0; }

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 11, 22, 0.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 100; padding: 20px; animation: fade .2s ease both;
}
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 18px; }
.modal-x { background: none; border: none; font-size: 22px; color: var(--text-faint); cursor: pointer; line-height: 1; }
.modal-body { padding: 22px 24px; }
.modal-foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
.modal-foot .btn { width: auto; padding: 11px 20px; }

/* ---------- Plan picker ---------- */

.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
@media (max-width: 480px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-opt {
  border: 1.5px solid var(--border-strong); border-radius: 14px; padding: 14px 16px; cursor: pointer;
  transition: border-color .12s, background .12s; position: relative;
}
.plan-opt:hover { border-color: var(--accent-2); }
.plan-opt.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--ring); }
.plan-opt .pn { font-weight: 700; font-size: 15px; }
.plan-opt .pd { font-size: 13px; color: var(--text-soft); margin: 4px 0 8px; }
.plan-opt .pp { font-size: 14px; font-weight: 600; color: var(--accent); }
.plan-opt .pp small { color: var(--text-faint); font-weight: 500; }

.cadence-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cadence-opt {
  border: 1.5px solid var(--border-strong); border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-soft); background: var(--surface-2); transition: all .12s;
}
.cadence-opt.sel { border-color: var(--accent); background: var(--accent); color: #fff; }
.billing-preview {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 14px;
}
.billing-preview .row { display: flex; justify-content: space-between; padding: 4px 0; }
.billing-preview .row .k { color: var(--text-soft); }
.billing-preview .row .v { font-weight: 600; }
.billing-preview .tot { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 15px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--surface); padding: 12px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 200; animation: fade .2s ease both;
}
.toast.err { background: var(--danger); color: #fff; }

/* ---------- SVG icons ---------- */

.ico-svg { display: block; flex: none; }
.nav-item .ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; }
.alert > span:first-child { display: inline-flex; }
.brand-points .tick { display: inline-flex; align-items: center; justify-content: center; }
.step .dot .ico-svg { stroke-width: 3; }

/* ---------- Appliance cost line + breakdown ---------- */

.cost-line {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px;
  padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 11px;
  background: var(--surface); cursor: pointer; font: inherit; color: var(--text);
  text-align: left; transition: background .12s, border-color .12s;
}
.cost-line:hover { background: var(--surface-2); border-color: var(--accent-2); }
.cost-line .di { color: var(--accent); }
.cost-line .lbl { color: var(--text-faint); font-size: 12px; }
.cost-line b { font-size: 14px; }
.cost-line .sub { color: var(--text-faint); font-size: 12px; }
.cost-line .chev { margin-left: auto; color: var(--text-faint); }

.cost-rows { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.crow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.crow:last-child { border-bottom: none; }
.crow .l { display: flex; align-items: center; gap: 10px; color: var(--text); }
.crow .l .di { color: var(--accent); }
.crow .v { font-weight: 600; white-space: nowrap; }
.crow.total { background: var(--surface-2); font-size: 15px; border-radius: 12px; border: 1px solid var(--border); }
.crow.total .v { color: var(--accent); }

/* Release note under a driver row in the device-cost modal. */
.patchnote { padding: 0 14px 12px 42px; border-bottom: 1px solid var(--border); margin-top: -6px; }
.patchnote-h { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.patchnote-b { font-size: 13px; line-height: 1.5; color: var(--text-faint); white-space: normal; }
.muted { color: var(--text-faint); font-weight: 500; }

/* ---------- Language switcher + flags ---------- */

.lang-switch { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2);
  border: 1.5px solid var(--border-strong); border-radius: 10px; padding: 7px 10px;
  cursor: pointer; font: inherit; color: var(--text); font-size: 13px; font-weight: 500;
}
.lang-btn:hover { border-color: var(--accent-2); }
.flag { width: 21px; height: 15px; border-radius: 2px; display: block; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.10); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md);
  padding: 6px; min-width: 180px; z-index: 60;
}
.lang-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: none; background: none; border-radius: 8px; cursor: pointer; font: inherit;
  font-size: 14px; color: var(--text); text-align: left;
}
.lang-opt:hover { background: var(--surface-2); }
.lang-opt.sel { color: var(--accent); font-weight: 600; }
.lang-auth { position: absolute; top: 18px; right: 20px; z-index: 5; }

/* ---------- Billing panel ---------- */

.pay-method { display: flex; align-items: center; gap: 14px; padding: 6px 2px; }
.pay-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.pay-info { flex: 1; }
.pay-info .t { font-weight: 600; font-size: 15px; }
.pay-info .s { font-size: 13px; color: var(--text-faint); }
.pay-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pay-actions .btn { width: auto; }

/* ---------- Invoices panel ---------- */

.invoice-group { margin-bottom: 20px; }
.invoice-group .gh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.invoice-group .gh .sid { font-family: var(--mono); font-size: 13px; color: var(--text-soft); word-break: break-all; }
.invoice-card { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.invoice-card .ih { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.invoice-card .ih .p { font-weight: 600; }
.invoice-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
.invoice-line .l { display: flex; align-items: center; gap: 9px; color: var(--text-soft); }
.invoice-line .l .di { color: var(--accent); }
.invoice-total { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 700; }
.invoice-total .v { color: var(--accent); }

/* --------------------------------------------------------------------------
   Driver store modal
   --------------------------------------------------------------------------
   Wider than the cost modal: each row carries a name, a description and, when
   the driver cannot be taken, the reason - which is the whole point. A row that
   is merely greyed out sends the customer to support instead of telling them
   they need a bigger plan.
   -------------------------------------------------------------------------- */
.modal.modal-wide { max-width: 720px; }

.ds-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-faint);
}
.ds-why {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--warning);
}

/* --------------------------------------------------------------------------
   Download page
   --------------------------------------------------------------------------
   Two pickers and a list: a channel (LTS / preview), a platform, then every
   version published for that pair, newest first. Reachable signed out, so it
   also renders inside publicShell() - nothing here assumes the app sidebar.
   -------------------------------------------------------------------------- */

.dl-plats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(158px, 100%), 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}
.dl-plat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 16px; border: 1.5px solid var(--border-strong);
  border-radius: 14px; background: var(--surface); cursor: pointer;
  font: inherit; color: var(--text); text-align: left;
  transition: border-color .12s, background .12s;
}
.dl-plat:hover { border-color: var(--accent-2); }
.dl-plat.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--ring); }
.dl-plat .pi { display: inline-flex; color: var(--accent); }
.dl-plat .pn { font-weight: 600; font-size: 15px; }
.dl-plat .ps { font-size: 12px; color: var(--text-faint); font-family: var(--mono); }

.dl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.dl-row .l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.dl-row .v { display: flex; align-items: center; gap: 14px; flex: none; }
.dl-row .btn { width: auto; }
.dl-v { font-family: var(--mono); font-weight: 600; overflow-wrap: anywhere; }
.dl-meta { color: var(--text-faint); font-size: 12.5px; }
.dl-sum { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dl-sha { padding: 0 20px 12px; border-bottom: 1px solid var(--border); }
.dl-sha code { font-family: var(--mono); font-size: 12px; color: var(--text-soft); overflow-wrap: anywhere; }
.dl-rows > :last-child { border-bottom: none; }
.dl-more { padding: 14px 20px; }
.dl-note { margin-top: 14px; color: var(--text-faint); }

a.brand-mark:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------
   The layout above is written for a desktop console; these blocks fold it down
   to a phone. The rule everywhere is the same: nothing may scroll the PAGE
   sideways. Rows that cannot shrink wrap, side-by-side forms stack, and the
   only horizontal scroll allowed is inside a container that owns it (the nav).
   Ordered widest-first so each block only overrides what the previous left.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .content { padding: 28px 20px 56px; }
  .main .content { padding: 28px 20px 56px; }
  .app-topbar { padding: 12px 18px; }
  /* Name and email are the first thing to go: the avatar already identifies
     the session, and the account page carries both in full. Below this width
     the topbar has to choose between them and the organization picker, and the
     picker is the one that does something. */
  .topbar-user .who { display: none; }
  .org-switch .select { max-width: 200px; }
}

@media (max-width: 760px) {
  .app-topbar { gap: 10px; padding: 12px 16px; }
  .topbar-user { gap: 10px; }
  .org-switch { order: 3; width: 100%; }
  .org-switch .select { flex: 1; max-width: none; width: 100%; }

  /* The sidebar becomes a tab bar: icon over label, tabs of equal width that
     WRAP onto a second row rather than scrolling sideways. A horizontal
     scroller would hide the last tabs behind a gesture nobody is told about;
     wrapping costs one row of height and keeps every view in sight. */
  .sidebar { padding: 8px 6px; gap: 2px; flex-wrap: wrap; }
  .nav-item {
    position: relative; flex-direction: column; gap: 4px;
    padding: 8px 6px; width: auto; flex: 1 1 84px; min-width: 0;
    /* Caps how far a tab left alone on the last row may stretch: without it a
       single trailing tab spans the whole width and stops reading as a tab. */
    max-width: 33.34%;
  }
  .nav-item .label {
    display: block; font-size: 10.5px; line-height: 1.2; text-align: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-badge { position: absolute; top: 4px; right: 8px; margin: 0; }

  .main .content, .content { padding: 20px 14px 44px; }
  .section-head { align-items: flex-start; gap: 12px; }
  .section-head h1 { font-size: 23px; }
  .grid-stats { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px; }
  .card-panel > .ph { padding: 16px; }
  .card-panel > .pb { padding: 16px; }
  .panel-head { padding: 16px; }
  .systems { padding: 14px; gap: 12px; }
  /* flex-basis, not width: these sit next to a panel heading in a wrapping
     flex row, and `flex: 1` alone would let them collapse to their content's
     minimum on the heading's line instead of taking a line of their own. */
  .claim-form, .invite-form { flex: 1 1 100%; min-width: 0; max-width: none; }
  .member-row, .invite-row, .org-card { padding-left: 16px; padding-right: 16px; }
  .crow, .invoice-line, .dl-row, .dl-sha, .dl-more { padding-left: 16px; padding-right: 16px; }
  .patchnote { padding-left: 16px; }
}

@media (max-width: 560px) {
  .card { padding: 24px 20px; }
  .form-side { padding: 28px 16px; }
  .modal-backdrop { padding: 12px; }
  .modal-head, .modal-body, .modal-foot { padding-left: 18px; padding-right: 18px; }
  .otp { gap: 7px; }
  .otp input { font-size: 21px; }

  /* Anything that put a label on the left and a value/button on the right now
     stacks: 320px is not enough for both, and squeezing them makes the button
     too small to hit. */
  .crow, .dl-row, .invoice-line, .member-row, .invite-row, .org-card { flex-wrap: wrap; }
  .crow .v, .dl-row .v { width: 100%; justify-content: space-between; }
  .dl-row .v .btn { flex: 1; max-width: 220px; }
  .invite-form, .claim-form, .field-inline { flex-direction: column; align-items: stretch; }
  .invite-form .btn, .claim-form .btn, .field-inline .btn { width: 100%; }
  .sys-actions { flex-wrap: wrap; }
  .sys-actions .btn { flex: 1 1 45%; }
  .pay-actions .btn { width: 100%; }
  .section-head h1 { font-size: 21px; }
  .stat { padding: 16px; }
  .stat .v { font-size: 24px; }
  .cost-line { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  /* The flag alone still says which language is active, and the topbar has run
     out of room for the word next to it. */
  .lang-btn span { display: none; }
  .dl-plats { grid-template-columns: 1fr 1fr; }
  .dl-plat { padding: 12px; }
  .grid-stats { grid-template-columns: 1fr 1fr; }
  .otp input { font-size: 18px; }
  .qr-box svg, .qr-box canvas { width: 150px; height: 150px; }
}