/* Allisto BETA-203.4.23.2 — Dashboard and Studio-login visual alignment.
   Scoped to the account page and #loginView. No hidden/display, auth,
   handlers, routing, sizing of viewports, or application data is changed.
   Theme reference: Allisto near-black/navy with orange → coral → pink → purple.
*/
:root {
  --allisto-align-night: #070e1f;
  --allisto-align-panel: #101c32;
  --allisto-align-deep: #09172a;
  --allisto-align-tile: #192740;
  --allisto-align-line: rgba(164,185,223,.24);
  --allisto-align-ink: #f6f8ff;
  --allisto-align-muted: #b8c8e1;
  --allisto-align-orange: #ffab17;
  --allisto-align-pink: #ff478d;
}

/* Dashboard background. Avoid editing global .account.css or other customer pages. */
body:has(#dashboardSection:not(.hidden)),
body:has(#loginSection:not(.hidden)) {
  background:
    radial-gradient(ellipse 80% 36% at 6% 0%,rgba(255,120,40,.14),transparent 75%),
    radial-gradient(ellipse 72% 48% at 100% 8%,rgba(160,67,250,.17),transparent 76%),
    linear-gradient(158deg,#060d1e 0%,#0c1930 48%,#070e1b 100%) !important;
  color:var(--allisto-align-ink);
}
.account-dashboard-shell .account-header-menu {
  background:linear-gradient(128deg,rgba(13,24,45,.98),rgba(17,27,47,.98)) !important;
  border-color:rgba(170,190,225,.20)!important;
  box-shadow:0 20px 46px rgba(0,0,0,.29)!important;
}
.account-dashboard-shell .account-brand-logo {
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))!important;
}
/* The Dashboard toggle was rendering a slightly asymmetric 3-span X.
   Draw a centered, two-stroke X only while open. Closed 3-line icon unchanged. */
html body .account-dashboard-shell .account-menu-toggle[aria-expanded="true"] > span {
  opacity:0!important;transform:none!important;
}
html body .account-dashboard-shell .account-menu-toggle[aria-expanded="true"]::before,
html body .account-dashboard-shell .account-menu-toggle[aria-expanded="true"]::after {
  content:"";position:absolute;display:block;
  top:50%;left:50%;width:23px;height:2.5px;
  border-radius:999px;background:#f6f8ff;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transform-origin:50% 50%;pointer-events:none;
}
html body .account-dashboard-shell .account-menu-toggle[aria-expanded="true"]::before {
  transform:translate(-50%,-50%) rotate(45deg);
}
html body .account-dashboard-shell .account-menu-toggle[aria-expanded="true"]::after {
  transform:translate(-50%,-50%) rotate(-45deg);
}
/* Ensure open-state lines are always centered in the existing positioned button. */
html body .account-dashboard-shell .account-menu-toggle[aria-expanded="true"] {
  background:#14223a!important;border-color:rgba(255,160,93,.65)!important;
}

/* Dashboard headline and entry cards: change color only, preserve layouts. */
#dashboardSection .dashboard-overview-panel {
  border:1px solid rgba(255,129,78,.34)!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(195,66,231,.22),transparent 34%),
    radial-gradient(circle at 8% 0%,rgba(255,148,45,.17),transparent 37%),
    linear-gradient(135deg,#111d33,#0a1429)!important;
  box-shadow:0 25px 60px rgba(0,0,0,.27)!important;
}
#dashboardSection .dashboard-overview-panel .dashboard-welcome-copy,
#dashboardSection .dashboard-overview-panel .dashboard-welcome-copy::before,
#dashboardSection .dashboard-overview-panel .dashboard-welcome-copy::after {
  background:transparent!important;border-color:transparent!important;
  box-shadow:none!important;
}
#dashboardSection .dashboard-overview-panel h1,
#dashboardSection .dashboard-overview-panel p:not(.account-kicker) {
  color:var(--allisto-align-ink)!important;
}
#dashboardSection .dashboard-overview-panel p:not(.account-kicker) {
  color:var(--allisto-align-muted)!important;
}
#dashboardSection .account-kicker {
  color:#ffb966!important;
}
#dashboardSection .dashboard-overview-panel .account-kicker {
  color:#ffae85!important;
}
#dashboardSection .dashboard-welcome-primary-actions button,
#dashboardSection .dashboard-device-actions .button,
#dashboardSection .add-sign-button {
  border:1px solid rgba(255,163,58,.55)!important;
  background:linear-gradient(110deg,#ffb31e 0%,#ff8b2a 56%,#ff783f 100%)!important;
  box-shadow:0 12px 26px rgba(255,111,32,.17)!important;
  color:#111527!important;
}
#dashboardSection .dashboard-device-actions .dashboard-install-callout,
#dashboardSection .dashboard-device-actions .dashboard-player-callout {
  border:1px solid var(--allisto-align-line)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(143,65,236,.10),transparent 58%),
    linear-gradient(143deg,#12233e,#0b182d)!important;
  color:var(--allisto-align-ink)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.16)!important;
}
#dashboardSection .dashboard-install-copy h2,
#dashboardSection .dashboard-player-copy h2 {color:#f9faff!important;}
#dashboardSection .dashboard-device-actions p:not(.account-kicker),
#dashboardSection .dashboard-player-price {color:var(--allisto-align-muted)!important;}
#dashboardSection .dashboard-install-help,
#dashboardSection .dashboard-player-actions a:not(.button) {color:#ffc185!important;}

/* Main dashboard cards, generated sign cards and their immediate details. */
#dashboardSection .account-dashboard-card,
#dashboardSection .account-side-card {
  color:var(--allisto-align-ink)!important;
  background:linear-gradient(160deg,#142138,#0b182e)!important;
  border:1px solid var(--allisto-align-line)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.18)!important;
}
#dashboardSection .account-card::before {display:none!important;}
#dashboardSection .account-card h1,
#dashboardSection .account-card h2,
#dashboardSection .account-card h3,
#dashboardSection .dashboard-section-head h2,
#dashboardSection .dashboard-head h2,
#dashboardSection .sign-card h3 {color:var(--allisto-align-ink)!important;}
#dashboardSection .account-dashboard-card .account-intro,
#dashboardSection .setup-summary,
#dashboardSection .small-note,
#dashboardSection .sign-card p,
#dashboardSection .sign-card small,
#dashboardSection .account-overview strong,
#dashboardSection .account-overview span {color:var(--allisto-align-muted)!important;}
#dashboardSection .account-email {
  background:#20324f!important;border:1px solid var(--allisto-align-line)!important;
  color:#f9faff!important;
}
/* The sign-card interiors carry many status/billing controls with deliberately
   dark text. Keep those legible on a light blue-white surface rather than
   forcing an unreadable dark-card conversion during this visual-only release. */
#dashboardSection .sign-card,
#dashboardSection .account-overview,
#dashboardSection .subscription-spotlight {
  background:linear-gradient(145deg,#f8fbff,#eaf0fa)!important;
  border:1px solid rgba(111,139,182,.36)!important;
  color:#17263e!important;
}
#dashboardSection .sign-card h3,
#dashboardSection .sign-card h4,
#dashboardSection .account-overview strong,
#dashboardSection .subscription-spotlight strong {color:#17263e!important;}
#dashboardSection .sign-card p,
#dashboardSection .sign-card small,
#dashboardSection .account-overview span {color:#54657c!important;}
#dashboardSection .sign-more-details,
#dashboardSection .sign-setup-checklist,
#dashboardSection .sign-promo-card,
#dashboardSection .account-security-details {
  background:#f3f7ff!important;
  border:1px solid rgba(111,139,182,.30)!important;
  color:#17263e!important;
}
#dashboardSection .sign-card-preview-column > .sign-display-link,
#dashboardSection .sign-more-details .sign-display-link,
#dashboardSection .sign-display-connected {
  background:#e9f0fb!important;border-color:rgba(111,139,182,.30)!important;
}
#dashboardSection .sign-more-details summary,
#dashboardSection .sign-more-details summary strong,
#dashboardSection .sign-billing-details summary strong,
#dashboardSection .sign-setup-checklist h4 {color:#192940!important;}
#dashboardSection .sign-more-details summary small,
#dashboardSection .sign-display-link small {color:#52647d!important;}
#dashboardSection .divider {background:var(--allisto-align-line)!important;}
#dashboardSection .dashboard-status-pill,
#dashboardSection .sign-connection-status {
  color:inherit;
}
/* Do not recolor the sign preview or billing/action modals: their graphic,
   state colors and controls are intentionally preserved. */

/* Consistent account login (same page as the customer Dashboard). */
#loginSection > .account-card {
  background:linear-gradient(150deg,#16243f,#0c192e)!important;
  color:#f7f9ff!important;
  border:1px solid rgba(169,184,223,.30)!important;
  box-shadow:0 24px 64px rgba(0,0,0,.28)!important;
}
#loginSection > .account-card::before {display:none!important;}
#loginSection .account-kicker {color:#ffb066!important;}
#loginSection h1 {color:#fff!important;}
#loginSection .account-intro,
#loginSection .check-row {color:#c3d0e7!important;}
#loginSection .field label {color:#e6edfa!important;}
#loginSection .field input {
  color:#f5f8ff!important;background:#0b1629!important;
  border:1px solid rgba(157,182,230,.35)!important;
}
#loginSection .field input::placeholder {color:#93a4bf!important;}
#loginSection .field input:focus {border-color:#f99a58!important;box-shadow:0 0 0 3px rgba(245,122,91,.17)!important;}
#loginSection .button:not(.ghost) {
  background:linear-gradient(105deg,#ffb518,#ff803c)!important;color:#111527!important;
}
#loginSection .button.ghost {
  background:#1b2a45!important;color:#f4f8ff!important;border:1px solid var(--allisto-align-line)!important;
}
#loginSection .account-links a {color:#ffbd8e!important;}

/* Studio LOGIN view ONLY. Studio editor (#appView) remains pixel-identical. */
#loginView.login-wrap {
  background:
    radial-gradient(ellipse 75% 34% at 7% 2%,rgba(255,141,50,.14),transparent 73%),
    radial-gradient(ellipse 67% 45% at 100% 9%,rgba(155,67,247,.18),transparent 76%),
    linear-gradient(155deg,#070d1b,#0d1c33 51%,#070f20)!important;
}
#loginView .login-card {
  background:
    radial-gradient(circle at 85% 3%,rgba(192,76,217,.12),transparent 42%),
    linear-gradient(155deg,#12223a,#0c1629)!important;
  border:1px solid rgba(178,193,226,.27)!important;
  color:#f7f9ff!important;
  box-shadow:0 26px 66px rgba(0,0,0,.33)!important;
}
#loginView .login-card::before {
  background:linear-gradient(130deg,rgba(255,162,69,.07),transparent 45%,rgba(142,93,235,.045))!important;
  opacity:1!important;
}
#loginView .login-card::after {display:none!important;}
#loginView .allisto-login-brand {
  border-color:rgba(255,160,86,.36)!important;
  background:linear-gradient(135deg,#15243b,#080e1b)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
}
#loginView .studio-login-intro {color:#bdcce5!important;}
#loginView .studio-language-control-login,
#loginView .login-card .allisto-account-login-fields,
#loginView .remember-row {
  background:#172740!important;
  border:1px solid rgba(159,178,211,.25)!important;
  color:#eaf1ff!important;
}
#loginView .studio-language-control-login > span,
#loginView .login-card .field > label,
#loginView .remember-row span {color:#dce7f9!important;}
#loginView .studio-language-control-login select {
  background:#0b182c!important;color:#f6f8ff!important;
  border:1px solid rgba(167,185,222,.38)!important;
}
#loginView #loginEmail,
#loginView #loginPassword {
  background:#0b172b!important;color:#f8faff!important;
  border:1.5px solid rgba(158,182,223,.37)!important;
  -webkit-text-fill-color:#f8faff;
}
#loginView #loginEmail::placeholder,
#loginView #loginPassword::placeholder {color:#90a1ba!important;-webkit-text-fill-color:#90a1ba;}
#loginView #loginEmail:focus,
#loginView #loginPassword:focus {
  border-color:#ff9a5d!important;box-shadow:0 0 0 3px rgba(250,128,87,.16)!important;
}
#loginView #loginSubmitButton {
  background:linear-gradient(108deg,#ffb619 0%,#ff8a25 58%,#ff763e 100%)!important;
  color:#101827!important;border:1px solid rgba(255,175,64,.60)!important;
  box-shadow:0 12px 25px rgba(255,108,49,.17)!important;
}
#loginView .allisto-create-account-link {
  color:#f5f8ff!important;background:#1e3050!important;
  border:1px solid rgba(166,185,219,.32)!important;
}
#loginView .allisto-account-recovery-links a {color:#ffc08c!important;}
#loginView .allisto-login-support {color:#9fb1cd!important;}
#loginView .status.error {background:#4b2033!important;color:#ffd5dd!important;}
#loginView .status.success {background:#173d37!important;color:#c9ffe7!important;}
@media (prefers-reduced-motion:reduce){
  #loginView .login-card,#dashboardSection .account-card{transition:none!important;}
}