/* ============================================================
   THE SPLIT-CANVAS PANEL — account.php
   Exact 50/50 vertical split. No cards. Zero radius.
   Stark #0A0A0A / #FFFFFF with #E10600 accent.
   Every interactive surface inverts (text <-> background).
   ============================================================ */

body.a91-split-canvas {
  --black: #0A0A0A;
  --white: #FFFFFF;
  --red: #E10600;
  --grey: #555555;
  --grey-line: #D6D6D6;
  --dark-line: rgba(255, 255, 255, 0.28);
  --ease: cubic-bezier(0.2, 0.9, 0.2, 1);
  --axis-pad: 3.5rem;

  background:
    linear-gradient(90deg, var(--black) 0 50%, var(--white) 50% 100%);
  color: var(--black);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip;
}
body.a91-split-canvas ::selection { background: var(--red); color: var(--white); }
body.a91-split-canvas :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- the split ---------- */
.sc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  align-items: stretch;
}
body.a91-has-axis.a91-split-canvas .sc-pane--right {
  padding-right: max(clamp(1.6rem, 4vw, 3.6rem), var(--axis-pad));
}
.sc-pane { min-width: 0; }

.sc-pane--left {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 70% 45% at 0% 0%, rgba(225, 6, 0, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(255, 255, 255, 0.06), transparent 60%),
    var(--black);
  color: var(--white);
  border-right: 3px solid var(--black);
  scrollbar-width: thin;
  scrollbar-color: var(--red) var(--black);
}
.sc-pane--right {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  color: var(--black);
  min-height: 100vh;
}
.sc-left-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3.2vh, 2.6rem);
  min-height: 100%;
  padding: clamp(1.6rem, 4vw, 3.6rem);
}
.sc-right-inner {
  padding: clamp(1.6rem, 4vw, 3.6rem);
}

/* ---------- left : brand manifesto ---------- */
.sc-eyebrow {
  margin: 0 0 0.7rem;
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.sc-eyebrow--dark { color: var(--red); }

.sc-brandmark {
  margin: 0 0 0.7rem;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
.sc-brandline {
  margin: 0;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  line-height: 1.6;
}

.sc-manifesto { list-style: none; margin: 0; padding: 0; }
.sc-manifesto-item {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem 0.85rem;
  border-top: 1px solid var(--dark-line);
  transition: background 0.28s var(--ease), color 0.28s var(--ease);
}
.sc-manifesto-item:last-child { border-bottom: 1px solid var(--dark-line); }
.sc-manifesto-item:hover,
.sc-manifesto-item:focus-within {
  background: var(--white);
  color: var(--black);
}
.sc-manifesto-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 1.15rem;
  color: var(--red);
}
.sc-manifesto-item h2 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.sc-manifesto-item p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.28s var(--ease);
}
.sc-manifesto-item:hover p,
.sc-manifesto-item:focus-within p { color: #333; }

.sc-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sc-benefits li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--dark-line);
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.24s var(--ease), color 0.24s var(--ease);
}
.sc-benefits li:hover { background: var(--red); color: var(--white); }
.sc-benefits li span {
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.8rem;
  color: var(--red);
  transition: color 0.24s var(--ease);
}
.sc-benefits li:hover span { color: var(--white); }

/* ---------- left : portal index (unique nav) ---------- */
.sc-index {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding-top: 0.75rem;
  background: linear-gradient(180deg, transparent, var(--black) 18%);
}
.sc-index-title {
  margin: 0 0 0.6rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.sc-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--dark-line);
  border-left: 1px solid var(--dark-line);
}
.sc-index li {
  border-right: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
}
.sc-index-link {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.7rem;
  color: var(--white);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.sc-index-code {
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.7rem;
  color: var(--red);
  transition: color 0.2s var(--ease);
}
.sc-index-link:hover,
.sc-index-link:focus-visible {
  background: var(--white);
  color: var(--black);
}
.sc-index-link:hover .sc-index-code,
.sc-index-link:focus-visible .sc-index-code { color: var(--red); }
.sc-index-link.is-here { background: var(--red); color: var(--white); }
.sc-index-link.is-here .sc-index-code { color: var(--white); }
.sc-index-link.is-here:hover { background: var(--white); color: var(--red); }

/* Shared ion ladder replaces the left panel index */
body.a91-has-axis.a91-split-canvas .sc-index {
  display: none !important;
}

.sc-left-foot { border-top: 1px solid var(--dark-line); padding-top: 1rem; margin-top: auto; }
.sc-left-mail {
  display: inline-block;
  color: var(--white);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 2px solid var(--red);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.sc-left-mail:hover { background: var(--red); color: var(--white); }
.sc-left-foot p { margin: 0.4rem 0 0; color: rgba(255, 255, 255, 0.78); font-size: 0.76rem; }
.sc-left-legal { letter-spacing: 0.08em; text-transform: uppercase; }

/* ============================================================
   RIGHT PANE
   ============================================================ */
.notice {
  padding: 0.85rem 1rem;
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1.3rem;
}
.notice.success { background: var(--black); color: var(--white); border-color: var(--black); }
.notice.warning { background: var(--red); color: var(--white); border-color: var(--red); }
.sc-loading { border-color: var(--grey-line); color: var(--grey); font-weight: 500; }

.sc-dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.2rem;
  border-bottom: 3px solid var(--black);
  margin-bottom: 1.4rem;
}
.sc-dash-head h2 {
  margin: 0;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.sc-dash-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- buttons (stamped invert) ---------- */
.sc-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.85rem;
  padding: 0.7rem 1.25rem;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--black);
  overflow: hidden;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.sc-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red);
  transform: translateY(101%);
  transition: transform 0.26s var(--ease);
}
.sc-btn:hover,
.sc-btn:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--black);
  outline: none;
}
.sc-btn:hover::after,
.sc-btn:focus-visible::after {
  transform: none;
}
.sc-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--black);
}
.sc-btn--solid {
  background: var(--black);
  color: var(--white);
}
.sc-btn--solid:hover,
.sc-btn--solid:focus-visible {
  color: var(--white);
  border-color: var(--black);
}
.sc-btn--line {
  background: var(--white);
  color: var(--black);
}
.sc-btn--line:hover,
.sc-btn--line:focus-visible {
  color: var(--white);
  border-color: var(--black);
}
.sc-btn--sm {
  min-height: 2.35rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.72rem;
  box-shadow: 3px 3px 0 var(--black);
}
.sc-btn:disabled,
.sc-btn[disabled] {
  opacity: 1;
  cursor: not-allowed;
  background: #E8E8E8;
  color: #555555;
  border-color: #BDBDBD;
  box-shadow: none;
  transform: none;
}
.sc-btn:disabled::after,
.sc-btn[disabled]::after {
  display: none;
}
.sc-btn--solid:disabled,
.sc-btn--solid[disabled] {
  background: #555555;
  color: #FFFFFF;
  border-color: #555555;
}

/* JS-injected order button */
.btn,
.btn-soft {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.45rem 0.85rem;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--black);
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background 0.18s var(--ease),
    color 0.18s var(--ease);
}
.btn:hover,
.btn:focus-visible,
.btn-soft:hover,
.btn-soft:focus-visible {
  background: var(--black);
  color: var(--white);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--red);
  outline: none;
}

/* ---------- dashboard nav (hard row of blocks) ---------- */
.sc-dash-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--black);
  margin-bottom: 1.4rem;
  box-shadow: 4px 4px 0 rgba(10, 10, 10, 0.12);
}
.dash-nav-link {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 0.7rem;
  border: 0;
  border-right: 2px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.dash-nav-link:last-child { border-right: 0; }
.sc-dash-nav-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.68rem;
  color: var(--red);
  transition: color 0.18s var(--ease);
}
.dash-nav-link:hover,
.dash-nav-link:focus-visible {
  background: var(--black);
  color: var(--white);
  outline: none;
}
.dash-nav-link:hover .sc-dash-nav-num,
.dash-nav-link:focus-visible .sc-dash-nav-num { color: var(--white); }
.dash-nav-link.is-active { background: var(--red); color: var(--white); }
.dash-nav-link.is-active .sc-dash-nav-num { color: var(--white); }
.dash-nav-link.is-active:hover,
.dash-nav-link.is-active:focus-visible { background: var(--black); }

.dash-panel { display: none; }
.dash-panel.is-active { display: block; }

.sc-panel-head { margin-bottom: 1.1rem; }
.sc-panel-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sc-panel-head h2,
.sc-panel-head h3 {
  margin: 0 0 0.25rem;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.sc-panel-head p,
.sc-panel-head .lead {
  margin: 0;
  color: var(--grey);
  font-size: 0.88rem;
  max-width: 46ch;
}

/* ---------- profile grid (JS injected .profile-item) ---------- */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 2px solid var(--black);
  border-left: 2px solid var(--black);
}
.profile-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.profile-item:hover { background: var(--black); color: var(--white); }
.profile-item .k {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}
.profile-item .v { font-size: 0.92rem; font-weight: 600; word-break: break-word; }
.profile-item .v.mono { font-family: ui-monospace, 'Courier New', monospace; font-size: 0.8rem; }

/* ---------- orders (JS injected .order-row) ---------- */
.order-list { border-top: 2px solid var(--black); }
.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 0.2rem;
  border-bottom: 2px solid var(--black);
  transition: background 0.22s var(--ease), color 0.22s var(--ease), padding-left 0.22s var(--ease);
}
.order-row:hover { background: var(--black); color: var(--white); padding-left: 0.8rem; }
.order-row strong { font-family: 'Archivo Black', sans-serif; font-size: 0.95rem; letter-spacing: 0.02em; }
.order-row:hover .btn-soft { background: var(--white); color: var(--black); border-color: var(--white); }
.mini-copy { margin: 0.2rem 0 0; color: var(--grey); font-size: 0.8rem; }
.order-row:hover .mini-copy { color: rgba(255, 255, 255, 0.75); }

.sc-dash-jump {
  display: flex;
  gap: 0;
  margin-top: 1.6rem;
  border: 2px solid var(--black);
  flex-wrap: wrap;
}
.sc-dash-jump a {
  flex: 1 1 8rem;
  padding: 0.7rem 0.8rem;
  border-right: 2px solid var(--black);
  color: var(--black);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.sc-dash-jump a:last-child { border-right: 0; }
.sc-dash-jump a:hover,
.sc-dash-jump a:focus-visible {
  background: var(--red);
  color: var(--white);
  outline: none;
}

/* ---------- gate (sign in / register) ---------- */
.sc-gate {
  border: 3px solid var(--black);
  box-shadow: 6px 6px 0 rgba(10, 10, 10, 0.14);
}
.sc-gate-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.auth-split-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  border: 0;
  border-bottom: 3px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.14s ease;
}
.auth-split-tab:first-child { border-right: 3px solid var(--black); }
.sc-tab-num { font-size: 0.7rem; color: var(--red); transition: color 0.18s var(--ease); }
.auth-split-tab:hover,
.auth-split-tab:focus-visible {
  background: var(--black);
  color: var(--white);
  outline: none;
}
.auth-split-tab:hover .sc-tab-num,
.auth-split-tab:focus-visible .sc-tab-num { color: var(--white); }
.auth-split-tab.is-active { background: var(--red); color: var(--white); }
.auth-split-tab.is-active .sc-tab-num { color: var(--white); }
.auth-split-tab.is-active:hover,
.auth-split-tab.is-active:focus-visible { background: var(--black); color: var(--white); }

.auth-split-panel { display: none; padding: clamp(1.2rem, 2.6vw, 2rem); }
.auth-split-panel.is-active { display: block; }

/* ---------- forms ---------- */
.sc-form { display: grid; gap: 0.95rem; max-width: 30rem; }
.sc-field { display: grid; gap: 0.35rem; }
.sc-field > span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black);
}
.sc-field input {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  box-shadow: 3px 3px 0 transparent;
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.sc-field input::placeholder { color: #555555; }
.sc-field input:hover { border-color: var(--red); }
.sc-field input:focus {
  outline: none;
  background: var(--black);
  color: var(--white);
  border-color: var(--red);
  box-shadow: 3px 3px 0 var(--red);
}
.sc-field input:focus::placeholder { color: rgba(255, 255, 255, 0.72); }
.sc-form .sc-btn { justify-self: start; min-width: 11rem; }

.sc-forgot { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 2px solid var(--black); }
.form-subhead {
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
}
.sc-reset { margin-top: 1.4rem; padding: 1rem; border: 2px solid var(--red); }

/* ---------- toast ---------- */
body.a91-split-canvas .toast {
  right: max(1rem, 3.75rem);
  bottom: 1.25rem;
  border-radius: 0;
  border: 3px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-weight: 700;
  box-shadow: 4px 4px 0 rgba(10, 10, 10, 0.2);
}
body.a91-split-canvas .toast.error { background: var(--red); color: var(--white); border-color: var(--red); }
body.a91-split-canvas .toast.success { background: var(--black); color: var(--white); border-color: var(--black); }
body.a91-split-canvas .toast.warning { background: var(--white); color: var(--red); border-color: var(--red); }

/* Portal footer sits under the split */
body.a91-split-canvas .a91-portal-footer {
  margin-top: 0;
}

/* ============================================================
   RESPONSIVE — split stacks, halves remain full-bleed
   ============================================================ */
@media (max-width: 900px) {
  body.a91-split-canvas {
    background: var(--white);
  }
  .sc-split { grid-template-columns: 1fr; }
  body.a91-has-axis.a91-split-canvas .sc-pane--right {
    padding-right: max(1rem, 3.25rem);
  }
  .sc-pane--left {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 3px solid var(--red);
  }
  .sc-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-dash-nav { grid-template-columns: 1fr; }
  .dash-nav-link { border-right: 0; border-bottom: 2px solid var(--black); }
  .dash-nav-link:last-child { border-bottom: 0; }
  .sc-gate-tabs { grid-template-columns: 1fr; }
  .auth-split-tab:first-child { border-right: 0; border-bottom: 3px solid var(--black); }
  .sc-form .sc-btn,
  .sc-dash-head-actions .sc-btn {
    width: 100%;
  }
  .sc-dash-head-actions { width: 100%; }
  .sc-dash-head-actions .sc-btn { flex: 1 1 auto; }
}

@media (max-width: 520px) {
  body.a91-has-axis.a91-split-canvas .sc-pane--right {
    padding-right: 1rem;
  }
  .sc-index ul { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .sc-dash-jump a { flex: 1 1 100%; border-right: 0; border-bottom: 2px solid var(--black); }
  .sc-dash-jump a:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.a91-split-canvas *,
  body.a91-split-canvas *::before,
  body.a91-split-canvas *::after { transition-duration: 0.001ms !important; }
}