/*
FILE CONTRACT
Owner:   Login and Registration screens — account.hyfis.com only.
Scope:   All CSS for index.html (login) and register.html (registration).
         Only includes classes actively used by those two screens.
Must NOT: be loaded by app.hyfis.com or portal.html.
*/

/* ── Base / Shell ── */
:root {
  --text: #FFFFFF;
  --ctrl-border-color: #7189A6;
  --ctrl-border: 1px solid var(--ctrl-border-color);
  --ctrl-color: #FFFFFF;
  --ctrl-hover-border: #BCCCDC;
  --ctrl-focus-border: #BCCCDC;
  --ctrl-focus-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 0 0 5px rgba(255,255,255,0.06);
  --ctrl-active-border: #BCCCDC;
  --ctrl-active-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 0 0 5px rgba(255,255,255,0.06);
  color-scheme: dark;
}

html {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: #080706;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text);
  box-sizing: border-box;
}

*::after {
  box-sizing: border-box;
}

#app {
  width: 100%;
  min-height: 100dvh;
  background: transparent;
}

.stage {
  width: 100%;
  min-height: 100dvh;
  padding: 10px 16px 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}

.panel {
  width: min(720px, 92vw);
  max-width: 720px;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 24px;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.bn-view-dock {
  margin-top: auto;
}

#view {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: 62px;
  padding-bottom: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  text-align: left;
}

#viewContent {
  width: 100%;
}

#viewDock {
  width: 100%;
  flex: 0 0 auto;
}

.topRow {
  width: 100%;
  max-width: min(720px, 92vw);
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  margin: 0 0 10px;
  padding: 8px 2px 0;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: transparent;
  box-sizing: border-box;
  isolation: isolate;
}

.gearBtn {
  position: static;
  flex: 1 1 auto;
  text-align: left;
  z-index: 999;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  color: #FFFFFF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.logo {
  max-width: 130px;
  width: auto;
  height: auto;
  flex: 1 1 auto;
  object-fit: contain;
}

#footer {
  flex: 0 0 auto;
}


/* ── Login Screen Classes (from darknode.css) ── */
*
================================================================================
DARK NODE UI SYSTEM — darknode.css
================================================================================
Owner:  Shared reusable module UI classes for isolated darknode screens.
        Account portal components (account.hyfis.com): .dn-prog, .dn-tier,
        .dn-pay-opt, .dn-soon, .dn-loc-box, .dn-qr-img, .dn-secret-box,
        .dn-step-num, .dn-tiers, .dn-spin, .dn-loading-row, .dn-divider--account.
Scope:  Only applies inside .dn-root trees, .dn-* components, and the
        account portal. Must not bleed into dashboard.css, global layout,
        or other modules.

────────────────────────────────────────────────────────────────────────────────
SCREEN STRUCTURE
────────────────────────────────────────────────────────────────────────────────
Every module screen must follow this exact shell:

  <div class="dn-root dn-root--[module]">
    <div class="dn-title"><strong>Screen Title</strong></div>

    <!-- section labels, fields, lists, copy rows, etc. -->

    <div class="dn-spacer dn-spacer--lg"></div>
    <div class="dn-nav ui-nav">
      <div class="dn-nav__inner">
        <button class="dn-button" type="button">...</button>
        ...
      </div>
    </div>
  </div>

Rules:
- .dn-root is always the outermost wrapper. One per mounted screen. No nesting.
- .dn-root--[module] is a module identifier class (e.g. dn-root--contacts).
  It exists for targeting only — never add layout or style to it directly.
- .dn-root uses display:flex + align-items:center to center all direct children.
  Individual block elements do NOT need max-width or margin:auto — centering
  is inherited from the root.
- .dn-spacer--lg goes immediately before .dn-nav to push nav to the bottom
  of the content flow before the dock hoists it.
- .dn-nav is always full-width (width:100%) — no max-width. It must fill the
  full dock width after applyDock() hoists it.
- .dn-nav__inner owns the 380px constraint and flex layout for buttons.
  All dn-button elements are direct children of dn-nav__inner.
- Buttons divide dn-nav__inner space equally via flex:1 — 2 or 3 buttons
  need no modifier class. dn-nav--two is not used.

────────────────────────────────────────────────────────────────────────────────
NAV / DOCK SYSTEM
────────────────────────────────────────────────────────────────────────────────
Nav bars are hoisted out of #viewContent into #viewDock by applyDock() in
dashboard.js. applyDock() queries .ui-nav — this class is mandatory on every
nav wrapper or it will never be docked.

Nav class rules:
- All navs (2 or 3 buttons): class="dn-nav ui-nav"
- Never use bare .dn-nav alone on a nav bar — always include ui-nav.
- Never put .dn-nav inside a nested container. It must be a direct child
  of .dn-root so applyDock() can find and move it correctly.
- Nav buttons must use class="dn-button" and type="button".
- Never use .pillBtn, .actionBtn, or .btnRow inside a dn-root screen.
  Those belong to the dashboard.css system and will conflict.

────────────────────────────────────────────────────────────────────────────────
FIELD & LAYOUT PRIMITIVES
────────────────────────────────────────────────────────────────────────────────
.dn-field       — vertical flex column; wraps one logical input group.
.dn-pair        — 2-column grid (50/50); use for side-by-side inputs (e.g. First / Last).
.dn-trip        — 3-column grid (1.2 / 0.5 / 1.6); use for First / Middle / Last.
.dn-triple      — 3-column grid (1.6 / 0.7 / 1); use for City / ST / Zip.
.dn-foot        — utility row for inline add/delete links beneath a field.
  .dn-foot--between  — space-between (add link left, delete link right).
  .dn-foot--right    — delete link aligned right only.
.dn-block       — generic flex row; use for single-item aligned rows.
  .dn-block--left    — left-aligns content (e.g. a lone "+ add" link).
.dn-section-label — uppercase muted label above a field group.
.dn-copy        — read-only display row with a tappable copy/action value.
.dn-list        — vertical list of .dn-list-row buttons (e.g. contacts list).
.dn-empty       — centered empty-state block with icon, title, and sub text.
.dn-key         — pass key display block; used on save-confirm screens only.
.dn-status      — single-line centered status message (working / warning).
.dn-truecase    — modifier on any dn-* element to suppress text-transform:uppercase.
                  Use on email, URL, and password display values only.
.dn-menu-toggle / .dn-menu / .dn-menu-item — expandable action menu system.
.dn-sheet-overlay / .dn-sheet — fixed bottom sheet overlay (e.g. address picker).

────────────────────────────────────────────────────────────────────────────────
ABSOLUTE RULES — NEVER VIOLATE
────────────────────────────────────────────────────────────────────────────────
1. No global selectors. Never target html, body, *, :root, #view, #viewContent,
   .panel, or any class outside the dn-* namespace from this file.
2. No !important. Every rule in this file must work through normal cascade.
   If a conflict exists, fix specificity — do not force with !important.
3. Do not modify .dn-root's width. .dn-root is always width:100%.
4. Do not add module-specific layout rules here. If a screen needs a unique
   layout, scope it to .dn-root--[module] in a separate module stylesheet.
5. Do not use position: fixed or z-index inside .dn-root except on
   .dn-sheet-overlay, which is a document-level overlay by design.
6. Do not hardcode colors or font stacks outside the existing palette.
   Use the rgba(200,196,186, …) scale for all text and border values.

================================================================================
*/

.dn-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.dn-root,
.dn-root * {
  box-sizing: border-box;
}

.dn-screen {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.dn-section-label,
.dn-label,
.dn-copy__label,
.dn-key__label,
.dn-empty__title,
.dn-empty__sub,
.dn-sheet__title {
  text-transform: uppercase;
}

.dn-section-label,
.dn-label {
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 1.5px;
  color: #FFFFFF;
}

.dn-label {
  margin-top: 0;
  margin-bottom: 6px;
  text-align: left;
}

.dn-field {
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.dn-field:has(.cal-am-contact-email-value) {
  margin-bottom: 4px;
}

/* ── Nav outer — always full width, no max-width, fills dock edge-to-edge ── */
.dn-nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.dn-nav.ui-nav {
  margin-top: 28px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Nav inner — owns the 380px constraint and button flex layout ── */
.dn-nav__inner {
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.dn-pair--phone .dn-input:not(.dn-cc-btn) {
  border-radius: 0 10px 10px 0 !important;
  border-left: none !important;
}

.dn-root input:not([type="hidden"]),
.dn-root select,
.dn-root textarea,
.dn-input,
.dn-button,
.dn-copy__value,
.dn-key__value,
.dn-file-button,
.dn-list-row,
.dn-sheet__item,
.dn-sheet__cancel {
  border: 1px solid #243B53;
  background: transparent;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 300;
  letter-spacing: 1px;
  box-shadow: none;
}

.dn-root input:not([type="hidden"]),
.dn-root select,
.dn-root textarea,
.dn-input,
.dn-select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  outline: none;
  text-align: center;
  font-size: 16px;
  line-height: 1.15;
}

.dn-root textarea,
textarea.dn-input,
.dn-input--multi {
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
  text-align: left;
}

div.dn-input {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dn-root input::placeholder,
.dn-root textarea::placeholder,
.dn-input::placeholder,
.dn-select::placeholder {
  color: #FFFFFF;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dn-root select,
.dn-select {
  appearance: none;
}

.dn-root option {
  background: #0b0d10;
  color: #FFFFFF;
}

/* ── Focus ring — matches dashboard.css ctrl-focus tokens exactly ── */
.dn-root input:not([type="hidden"]):focus,
.dn-root input:not([type="hidden"]):focus-visible,
.dn-root select:focus,
.dn-root select:focus-visible,
.dn-root textarea:focus,
.dn-root textarea:focus-visible,
.dn-input:focus,
.dn-input:focus-visible,
.dn-select:focus,
.dn-select:focus-visible,
.dn-button:focus,
.dn-button:focus-visible,
.dn-copy__value:focus,
.dn-copy__value:focus-visible,
.dn-key__value:focus,
.dn-key__value:focus-visible,
.dn-file-button:focus,
.dn-file-button:focus-visible,
.dn-list-row:focus,
.dn-list-row:focus-visible,
.dn-menu-toggle:focus,
.dn-menu-toggle:focus-visible {
  outline: none;
  border-color: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15), 0 0 0 5px rgba(255,255,255,0.06);
}

.dn-button,
.dn-copy__value,
.dn-key__value,
.dn-file-button,
.dn-list-row,
.dn-sheet__item,
.dn-sheet__cancel {
  min-height: 44px;
  border-radius: 10px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.15;
  text-transform: uppercase;
}

.dn-button {
  flex: 1;
}

.dn-link--muted {
  color: #FFFFFF;
}

.dn-status {
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ============================================================
   DARK NODE — dn-* equivalents for dashboard.js screen classes
   Identical rules to their bn-* counterparts — only the name differs.
   ============================================================ */

/* Shell utilities (kept for dn-root awareness) */
.dn-hidden {
  display:none !important;
}

/* dn-subtitle — centered muted subtitle below dn-title */
.dn-subtitle {
  width: 100%;
  max-width: 380px;
  margin: 8px auto 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.dn-title + .dn-subtitle {
  margin-top: 4px;
}

.dn-spacer--20 {
  display: block; width: 100%; height: 20px;
}

.dn-loan-trio__col .dn-input {
  width:100%;max-width:none !important;box-sizing:border-box;
}

/* ─── Seed module replacements for legacy bn-seed-* classes ─────────────── */
.dn-root .dn-seed-phrase {
  width: 100%;
  max-width: 380px;
  margin: 10px auto 0;
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.dn-root .dn-seed-phrase__col {
  flex: 1;
  min-width: 0;
}

.dn-root .dn-seed-phrase__col:first-child {
  padding-right: 10px;
}

.dn-root .dn-seed-word {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.dn-root .dn-seed-word__num {
  width: 14px;
  flex-shrink: 0;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
}

.dn-root .dn-seed-word__val {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid #243B53;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 300;
  color: #FFFFFF;
}

.dn-root .dn-seed-phrase-hidden .dn-seed-word__val {
  color: transparent;
  background: rgba(36,59,83,0.3);
  border-color: #FFFFFF;
  user-select: none;
  -webkit-user-select: none;
  letter-spacing: 0;
}

.dn-root .dn-seed-phrase-hidden .dn-seed-word__num {
  color: #FFFFFF;
}

.dn-root .seed-word-input,
.dn-root .seed-salt-input {
  min-height: 28px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.dn-root .seed-salt-input {
  text-align: center !important;
  max-width: 170px;
}

.dn-root .seed-salt-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dn-root .seed-salt-label {
  text-align: center;
}

.dn-root .dn-seed-conf-note {
  width: 100%;
  max-width: 380px;
  margin: 10px auto 0;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.45;
}

.dn-root .dn-seed-conf-display {
  width: 100%;
  max-width: 380px;
  margin: 14px auto 0;
  background: rgba(0, 120, 60, 0.15);
  border: 1px solid #243B53;
  border-radius: 10px;
  padding: 14px;
  box-sizing: border-box;
  font-size: 12px;
  color: #FFFFFF;
  white-space: pre-wrap;
}

.dn-root .dn-seed-copy-row {
  width: 100%;
  margin-top: 12px;
}

.dn-root .dn-seed-action-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16px;
}

.dn-root .dn-seed-action-btn {
  width: 100%;
  max-width: none;
  min-width: 0;
  display: block;
}

.dn-root .dn-seed-segbtn,
.dn-root .dn-seed-edit-segbtn {
  opacity: 0.45;
}

.dn-root .dn-seed-segbtn--active {
  opacity: 1;
}

/* Number input — remove left radius and left border since button sits left of it */
.dn-phone-field .dn-phone-number,
.dn-phone-field input.dn-phone-number,
.dn-phone-field input.dn-input.dn-phone-number {
  border-radius: 0 10px 10px 0 !important;
  border-left: none !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* ── ACCOUNT PORTAL ─────────────────────────────────────────────────────
   Owner:  account.hyfis.com — account creation flow only.
   Scope:  .dn-prog, .dn-tier, .dn-pay-opt, .dn-soon, .dn-loc-box,
           .dn-qr-img, .dn-secret-box, .dn-step-num — account portal
           specific components. All width constraints match 380px system.
   Must NOT: override any existing .dn-* rules.
────────────────────────────────────────────────────────────────────── */

/* Progress bar */
.dn-prog {
  width: 100%;
  max-width: 380px;
  margin: 0 auto 32px;
  display: flex;
  gap: 5px;
}

/* Step number label */
.dn-step-num {
  width: 100%;
  max-width: 380px;
  margin: 0 auto 12px;
  text-align: center;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* Header — logo + subtitle stacked and centred */
.dn-hdr {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 0 18px;
  gap: 6px;
}

/* Input modifiers */
.dn-input--code {
  text-align: center;
  font-size: 26px;
  letter-spacing: 7px;
  min-height: 56px;
}

/* Account-scoped button sizing */
.dn-account .dn-button {
  font-size: 13px;
  letter-spacing: 2px;
  width: 100%;
  margin-bottom: 8px;
  flex: unset;
}

.dn-account .dn-nav__inner .dn-button {
  width: auto;
  margin-bottom: 0;
  flex: 1;
}

.dn-account .dn-input-row .dn-button {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 18px;
}

.dn-input-row > .dn-input {
  flex: 1; min-width: 0;
}


/* ── Registration Screen Classes (from customer-portal.css) ── */
button,
input {
  font: inherit;
}

.topbar p,
.panel p,
.plan-card p,
.support-card p,
.install-panel p {
  color: #FFFFFF;
  line-height: 1.5;
}

.metric-card,
.panel,
.plan-card,
.billing-card,
.payment-card,
.summary-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.action-button,
.field-card,
.verification-box,
.device-card,
.qr-layout,
.support-card {
  border: 1px solid #243B53;
  border-radius: 10px;
  background: transparent;
}

button,
.primary-button,
.danger-button,
.checkout-button {
  border-radius: 10px;
  border: 1px solid #243B53;
  background: transparent;
  color: #FFFFFF;
  min-height: 42px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.08em;
}

.field-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 20px;
  margin-bottom: 16px;
}

.field-card label {
  display: block;
  margin-bottom: 7px;
  color: #FFFFFF;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.field-card p {
  margin-top: 7px;
  font-size: 13px;
}

.verification-box,
.support-card,
.install.panel-shell {
  text-align: center;
}

.verification-box,
.support-card {
  padding: 36px;
}

.verify-icon,
.install-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  color: #FFFFFF;
  font-size: 28px;
  border-radius: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
}

.verification-box button,
.support-card button {
  margin-top: 24px;
}

.qr-layout {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  padding: 22px;
  align-items: center;
}

.qr-box {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0,0,0,0.3);
}

.key-box {
  margin: 16px 0;
  padding: 14px;
  color: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 13px;
}

.plans-grid,
.payment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.plan-card {
  position: relative;
  padding: 24px;
  cursor: pointer;
}

.plan-card:hover {
  border-color: #FFFFFF;
}

.selected-plan {
  border-color: var(--border-bright);
  background: rgba(255,255,255,0.04);
}

.popular-tag {
  position: absolute;
  top: -10px;
  right: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #243B53;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

.price {
  margin-top: 22px;
  color: var(--text);
  font-size: 26px;
  font-weight: 300;
}

.price span {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 300;
}

.plan-card ul {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  padding: 0;
  color: #FFFFFF;
  list-style: none;
  font-size: 14px;
}

.plan-card li::before {
  content: "—";
  margin-right: 8px;
  color: #FFFFFF;
}

.plan-card button {
  width: 100%;
}

.billing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.billing-card,
.payment-card {
  min-height: 90px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 16px;
  font-weight: 300;
}

.billing-card:hover,
.payment-card:hover {
  border-color: #FFFFFF;
}

.billing-card span,
.payment-card span {
  color: #FFFFFF;
  font-size: 13px;
}

.selected-billing,
.selected-payment {
  border-color: var(--border-bright);
  background: rgba(255,255,255,0.04);
}

.summary-card {
  position: sticky;
  top: 28px;
  padding: 26px;
  align-self: start;
}

.summary-row,
.summary-total {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  color: #FFFFFF;
  font-size: 14px;
}

.summary-row strong,
.summary-total strong {
  color: var(--text);
}

.discount,
.discount strong {
  color: var(--green);
}

.summary-total {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 20px;
  color: var(--text);
}

.discount-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.discount-input input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  box-sizing: border-box;
}

#applyDiscount {
  width: 100%;
  background: #001540;
  border: 1px solid #7189A6;
  color: #BCCCDC;
  border-radius: 12px;
  min-height: 48px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.04em;
}

#applyDiscount:hover {
  background: #0a2a5e;
  border-color: #BCCCDC;
}

.metric-grid,
  .plans-grid,
  .payment-grid,
  .device-grid {
  grid-template-columns: 1fr 1fr;
}

.metric-grid,
  .plans-grid,
  .payment-grid,
  .device-grid,
  .billing-grid,
  .action-grid {
  grid-template-columns: 1fr;
}

.field-card,
  .topbar {
  align-items: stretch;
    flex-direction: column;
}

.form-label {
  display: block;
  color: #FFFFFF;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 3px;
}

input,
select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  color: var(--text);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
}

.full-button {
  width: 100%;
  min-height: 52px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 14px;
}

.auth-link,
.link-button {
  color: #FFFFFF;
  background: transparent;
  border: 0;
  text-decoration: none;
  font-size: 13px;
}

.error-pill,
.success-pill,
.loading-line {
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
}

.error-pill {
  color: var(--danger);
  background: rgba(200, 100, 100, 0.06);
  border: 1px solid rgba(200,100,100,0.4);
}

.loading-line {
  color: #FFFFFF;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border);
}

.hidden-block {
  display: none !important;
}

.reg-progress {
  display: flex;
  gap: 6px;
  margin: 28px 0;
}

.reg-seg {
  flex: 1;
  height: 1.5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
}

.reg-seg.done {
  background: #FFFFFF;
}

.reg-seg.active {
  background: #FFFFFF;
}

.step-count {
  color: #FFFFFF;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.reg-step {
  display: none;
  margin-top: 20px;
}

.reg-step-active {
  display: grid;
  gap: 16px;
}

.reg-step h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reg-step p {
  color: #FFFFFF;
  font-size: 14px;
}

.compact-card {
  margin: 0;
}

.strength-bar {
  display: flex; gap: 6px; margin-top: 10px; margin-bottom: 10px;
}

.strength-bar span {
  flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.15); transition: background 0.2s;
}

.strength-bar span.weak {
  background: rgba(220, 50, 50, 0.9);
}

.strength-bar span.medium {
  background: rgba(200, 160, 48, 0.9);
}

.strength-bar span.strong {
  background: #FFFFFF;
}

.reg-payment-grid {
  grid-template-columns: repeat(3, 1fr);
}

#reg-root .qr-layout > * {
  min-width: 0;
}

#reg-root .reg-qr-layout {
  overflow: hidden;
}

#reg-root .key-box {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.reg-qr-layout {
  margin-top: 0;
  border: 1px solid #243B53;
  border-radius: 12px;
  padding: 22px;
}

.qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reg-plans {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reg-plan {
  color: var(--text);
  text-align: left;
}

.reg-billing {
  margin-top: 0;
}

.compact-summary {
  position: relative;
  top: auto;
}

.reg-plans,
  .reg-billing {
  grid-template-columns: 1fr;
}

/* DarkNode Registration Overrides */

/* Card: no border, no background */
main.auth-page .panel.reg-card,
main.auth-page .reg-card {
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Action buttons: transparent — excludes card buttons */
main.auth-page button:not(.plan-card):not(.billing-card):not(.payment-card) {
  background: transparent;
  border: 1px solid #243B53;
  box-shadow: none;
}

main.auth-page button:not(.plan-card):not(.billing-card):not(.payment-card):hover {
  background: rgba(255,255,255,0.06);
  border-color: #FFFFFF;
}

/* Link buttons */
main.auth-page .link-button,
main.auth-page .link-button:hover {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Utility */
.dn-mt-16 {
  margin-top: 16px;
}

.portal-nav__inner .full-button,
.portal-nav__inner button {
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN + REGISTRATION FLOW — dn-* structural classes
   Scope: login.html and register.html only.
   Source: darknode.css structural blocks, adapted for portal context.
   Do NOT use these classes in customer-portal.html.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Shell ── */
.dn-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: #FFFFFF;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.dn-root, .dn-root * {
  box-sizing: border-box;
}

/* ── Inputs ── */
.dn-root input:not([type="hidden"]),
.dn-root select,
.dn-root textarea,
.dn-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  outline: none;
  text-align: center;
  font-size: 16px;
  line-height: 1.15;
  border: 1px solid #243B53;
  background: transparent;
   font-family: inherit;
  font-weight: 300;
  letter-spacing: 1px;
  box-shadow: none;
}

.dn-root input::placeholder,
.dn-input::placeholder {
  color: #FFFFFF;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dn-root input:focus,
.dn-input:focus {
  outline: none;
  border-color: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2), 0 0 0 5px rgba(255,255,255,0.08);
}

/* ── Nav ── */
.dn-nav {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.dn-nav__inner {
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN SHELL — app shell classes for login.html
   Source: darknode.css + darknode_shell.css exact values
═══════════════════════════════════════════════════════════════════════════ */

/* ── App shell ── */
#login-root #app.dn-root {
  width: 100%;
}

#login-root .stage {
  width: 100%;
  padding: 10px 16px 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#login-root .panel {
  width: min(520px, 92vw);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 24px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
}

#login-root #view {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#login-root #view::-webkit-scrollbar {
  display: none;
}

#login-root #viewContent {
  width: 100%;
}

#login-root #viewDock {
  width: 100%; flex: 0 0 auto;
}

#login-root .bn-view-dock {
  margin-top: auto;
}

/* ── Logo header ── */
.dn-hdr {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 0 18px;
  gap: 6px;
}

/* ── Subtitle ── */
.dn-subtitle {
  width: 100%;
  max-width: 420px;
  margin: 8px auto 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* ── Login shell panel — no background, transparent like app shell ── */
#login-root .panel {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* ── Login shell — header/subtitle span full panel width for centering ── */
#login-root .dn-hdr,
#login-root .dn-subtitle {
  max-width: 100%;
}

/* ── Registration nav — hide in-step nav blocks, only show when docked ── */
#reg-root .reg-step .ui-nav {
  display: none;
}

#reg-viewDock .ui-nav {
  display: flex;
}

/* ── Registration shell — mirrors login-root structure exactly ── */
#reg-root #app.dn-root {
  width: 100%;
}

#reg-root .stage {
  width: 100%;
  height: 100dvh;
  padding: 10px 16px 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}

#reg-root .panel {
  width: min(520px, 92vw);
  max-width: 520px;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 24px;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

#reg-root #view {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#reg-root #view::-webkit-scrollbar {
  display: none;
}

#reg-root #viewContent {
  width: 100%;
}

#reg-root #viewDock {
  width: 100%; flex: 0 0 auto;
}

#reg-root .bn-view-dock {
  margin-top: auto;
}

#reg-root .dn-hdr,
#reg-root .dn-subtitle {
  max-width: 100%;
}

/* ── Registration nav width ── */
#reg-root .dn-nav__inner {
  max-width: 518px;
}

/* ── Registration buttons — remove browser default background ── */
#reg-root button {
  background: transparent;
  border: 1px solid #243B53;
  color: #FFFFFF;
  border-radius: 10px;
}

#reg-root .full-button {
  border: 1px solid #243B53;
  background: transparent;
  color: #FFFFFF;
}

#reg-root .link-button {
  border: none;
  background: transparent;
  color: #FFFFFF;
  font-size: 11px;
  letter-spacing: 1.2px;
}

#emailOtpBlock .full-button {
  margin-top: 10px;
}

/* ── Verify button — green border on verified state (specificity fix) ── */
#reg-root #verifyEmailCode:disabled,
#reg-root #verifyMfa:disabled {
  border-color: #7189A6;
  color: #FFFFFF;
  opacity: 1;
}

/* ── Registration label and strength bar spacing (specificity fix) ── */
#reg-root .form-label,
#reg-root label.form-label {
  margin-top: 12px;
  margin-bottom: 4px;
  display: block;
}

#reg-root .form-group:first-child .form-label,
#reg-root .form-group--half .form-label {
  margin-top: 12px;
}

#reg-root .strength-bar {
  margin-top: 8px;
}

/* ── Registration form-group spacing ── */
#reg-root .form-group {
  margin-bottom: 14px;
}

#reg-root input,
#reg-root select {
  margin-top: 4px;
}

/* ── verifyMfa verified state ── */
#reg-root #verifyMfa:disabled {
  border-color: #7189A6;
  color: #FFFFFF;
  opacity: 1;
}

/* ── Registration subscription — green selected borders ── */
#reg-root .selected-plan,
#reg-root .selected-billing,
#reg-root .selected-payment {
  border-color: #7189A6 !important;
  background: rgba(36,59,83,0.2) !important;
  color: #FFFFFF;
}

/* ── Registration viewDock bottom padding ── */
#reg-root #viewDock {
  padding: 12px 0 24px;
}

/* ── Location card green border — only when detected ── */
#reg-root #locationDisplay.location-detected {
  border-color: #243B53;
}

/* ── Authenticator Setup card green border after QR loads ── */
#reg-root .reg-qr-layout.qr-loaded {
  border-color: #7189A6;
}

/* ── Ensure border-box on all reg-root elements to prevent blink overflow ── */
#reg-root *,
#reg-root *::before,
#reg-root *::after {
  box-sizing: border-box;
}

/* ── Cap all reg-root inputs and buttons at 86% width, left-aligned ── */
#reg-root input,
#reg-root select,
#reg-root textarea,
#reg-root .full-button,
#reg-root button:not(.link-button):not(#backBtn):not(#continueBtn) {
  width: 98%;
  max-width: 98%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  display: block;
}


/* ── Animations / Keyframes ── */
@keyframes dn-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dn-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes dn-tile-wiggle {
  0%   { transform: rotate(-1.5deg); }
  50%  { transform: rotate(1.5deg);  }
  100% { transform: rotate(-1.5deg); }
}

@keyframes dn-spin { to { transform: rotate(360deg); } }

@keyframes reg-processing-blink {
  0%, 100% { border-color: rgba(200, 160, 48, 0.3); color: rgba(200, 160, 48, 0.4); }
  50%       { border-color: rgba(200, 160, 48, 0.9); color: rgba(200, 160, 48, 0.95); }
}

@keyframes reg-confirm-blink {
  0%, 100% { border-color: #FFFFFF; color: #FFFFFF; }
  50%       { border-color: rgba(255,255,255,0.7); color: #FFFFFF; }
}

@keyframes reg-continue-blink {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.2); color: #FFFFFF; }
  50%       { box-shadow: 0 0 0 1px rgba(255,255,255,0.9); color: rgba(255,255,255,1); }
}

@keyframes reg-blink {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.2); color: #FFFFFF; }
  50%       { box-shadow: 0 0 0 1px rgba(255,255,255,0.9); color: rgba(255,255,255,1); }
}

@keyframes reg-input-blink {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.2); }
  50%       { box-shadow: 0 0 0 1px rgba(255,255,255,0.9); }
}

@keyframes reg-msg-blink {
  0%, 100% { color: #FFFFFF; }
  50%       { color: #FFFFFF; }
}

@keyframes pulse-green-node {
  0%,100% { filter: drop-shadow(0 0 1px rgba(10,144,64,0.0)); }
  50%      { filter: drop-shadow(0 0 5px rgba(10,144,64,0.55)); }
}

@keyframes pulse-black-node {
  0%,100% { filter: drop-shadow(0 0 1px rgba(255,255,255,0.0)); }
  50%      { filter: drop-shadow(0 0 5px rgba(255,255,255,0.4)); }
}

@keyframes pulse-blue-node {
  0%,100% { filter: drop-shadow(0 0 1px rgba(26,126,200,0.0)); }
  50%      { filter: drop-shadow(0 0 5px rgba(26,126,200,0.55)); }
}

@keyframes pulse-amber-node {
  0%,100% { filter: drop-shadow(0 0 1px rgba(200,160,48,0.0)); }
  50%      { filter: drop-shadow(0 0 5px rgba(200,160,48,0.55)); }
}

@keyframes pulse-purple-node {
  0%,100% { filter: drop-shadow(0 0 1px rgba(127,119,221,0.0)); }
  50%      { filter: drop-shadow(0 0 5px rgba(127,119,221,0.55)); }
}

@keyframes drift1  { 0%{transform:translate(0px,0px)}   25%{transform:translate(18px,-12px)}  50%{transform:translate(26px,9px)}    75%{transform:translate(-9px,20px)}  100%{transform:translate(0px,0px)} }

@keyframes drift2  { 0%{transform:translate(0px,0px)}   25%{transform:translate(-20px,15px)}  50%{transform:translate(-12px,-18px)} 75%{transform:translate(15px,-9px)}  100%{transform:translate(0px,0px)} }

@keyframes drift3  { 0%{transform:translate(0px,0px)}   25%{transform:translate(12px,20px)}   50%{transform:translate(-15px,12px)}  75%{transform:translate(9px,-18px)}  100%{transform:translate(0px,0px)} }

@keyframes drift4  { 0%{transform:translate(0px,0px)}   25%{transform:translate(-15px,-20px)} 50%{transform:translate(20px,-9px)}   75%{transform:translate(-12px,15px)} 100%{transform:translate(0px,0px)} }

@keyframes drift5  { 0%{transform:translate(0px,0px)}   25%{transform:translate(24px,9px)}    50%{transform:translate(6px,-20px)}   75%{transform:translate(-18px,6px)}  100%{transform:translate(0px,0px)} }

@keyframes drift6  { 0%{transform:translate(0px,0px)}   25%{transform:translate(-9px,24px)}   50%{transform:translate(18px,15px)}   75%{transform:translate(12px,-15px)} 100%{transform:translate(0px,0px)} }

@keyframes drift7  { 0%{transform:translate(0px,0px)}   25%{transform:translate(15px,-24px)}  50%{transform:translate(-20px,-6px)}  75%{transform:translate(6px,18px)}   100%{transform:translate(0px,0px)} }

@keyframes drift8  { 0%{transform:translate(0px,0px)}   25%{transform:translate(-24px,6px)}   50%{transform:translate(-6px,24px)}   75%{transform:translate(20px,-12px)} 100%{transform:translate(0px,0px)} }

@keyframes drift9  { 0%{transform:translate(0px,0px)}   25%{transform:translate(9px,18px)}    50%{transform:translate(-18px,-9px)}  75%{transform:translate(-6px,-20px)} 100%{transform:translate(0px,0px)} }

@keyframes drift10 { 0%{transform:translate(0px,0px)}   25%{transform:translate(-12px,-15px)} 50%{transform:translate(15px,20px)}   75%{transform:translate(18px,-6px)}  100%{transform:translate(0px,0px)} }

@keyframes drift11 { 0%{transform:translate(0px,0px)}   25%{transform:translate(20px,12px)}   50%{transform:translate(-9px,18px)}   75%{transform:translate(-20px,-9px)} 100%{transform:translate(0px,0px)} }

@keyframes drift12 { 0%{transform:translate(0px,0px)}   25%{transform:translate(-18px,-9px)}  50%{transform:translate(12px,-20px)}  75%{transform:translate(9px,12px)}   100%{transform:translate(0px,0px)} }

@keyframes dn-comm-pulse-on {
  0%,100% { stroke-opacity: 0.4; filter: drop-shadow(0 0 2px rgba(26,126,200,0.3)); }
  50%      { stroke-opacity: 0.9; filter: drop-shadow(0 0 6px rgba(26,126,200,0.8)); }
}

@keyframes dn-comm-pulse-off {
  0%,100% { stroke-opacity: 0.4; filter: drop-shadow(0 0 2px rgba(200,50,50,0.3)); }
  50%      { stroke-opacity: 0.9; filter: drop-shadow(0 0 6px rgba(200,50,50,0.8)); }
}


/* ── Responsive ── */

/* ── Blinking class assignments (missing from extraction) ── */
.reg-confirm-blink {
  animation: reg-confirm-blink 1.2s ease-in-out infinite;
}

.reg-continue-blink {
  animation: reg-continue-blink 1.2s ease-in-out infinite;
}

.reg-blink {
  animation: reg-blink 1.2s ease-in-out infinite;
}

.reg-input-blink {
  animation: reg-input-blink 1.2s ease-in-out infinite;
}

.reg-msg-blink {
  animation: reg-msg-blink 1.2s ease-in-out infinite;
}

/* ── Processing loading pill ── */
#regLoading {
  border-radius: 10px;
  border: 1px solid rgba(200, 160, 48, 0.6);
  color: rgba(200, 160, 48, 0.85);
  padding: 12px 14px;
  text-align: center;
  margin-top: 10px;
  animation: reg-processing-blink 1.4s ease-in-out infinite;
}

/* ── Password match error ── */
#passwordMatchMsg {
  border-radius: 10px;
  border: 1px solid rgba(220, 50, 50, 0.6);
  color: rgba(220, 50, 50, 0.9);
  padding: 10px 14px;
  text-align: center;
  margin-top: 8px;
}

/* ── Location detected — dynamic border change ── */
#reg-root #locationDisplay.location-detected {
  border-color: #243B53;
}

/* ── QR loaded — dynamic border change ── */
#reg-root .reg-qr-layout.qr-loaded {
  border-color: #7189A6;
}

/* ── Override browser autofill background ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #080706 inset !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #FFFFFF;
}