[hidden] { display: none !important; }
.mi-auth-pending { min-height: 100vh; background: #06111f; }
.auth-gate { min-height: 100vh; display: grid; place-items: center; padding: 26px 16px; color: #edf6ff; background: radial-gradient(ellipse at 50% 0, #11365a 0, #071524 48%, #040b14 100%); }
.auth-card { width: min(100%, 470px); padding: clamp(24px, 5vw, 38px); border: 1px solid #1c4564; border-radius: 22px; background: linear-gradient(155deg, #0c1d30f5, #071321f7); box-shadow: 0 28px 90px #0009, inset 0 1px #7bdcff12; }
.auth-brand { display: inline-flex; align-items: center; gap: 9px; color: #f2f8ff; text-decoration: none; font-weight: 800; letter-spacing: .05em; }
.auth-brand span { font-size: 28px; color: #36d7f4; }
.auth-eyebrow { margin-top: 26px; color: #53dff4; font: 700 10px/1.4 Inter, system-ui, sans-serif; letter-spacing: .17em; }
.auth-card h1, .session-card h1 { margin: 8px 0 9px; color: #eff7ff; font: 750 clamp(25px, 5vw, 31px)/1.16 Inter, system-ui, sans-serif; letter-spacing: -.03em; }
.auth-subtitle, .session-card > p { margin: 0; color: #9fb5ca; font: 14px/1.6 Inter, system-ui, sans-serif; }
.auth-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 24px 0 17px; padding: 5px; border: 1px solid #18364d; border-radius: 13px; background: #06111d; }
.auth-mode button { min-height: 42px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9fb5ca; font: 650 14px Inter, system-ui, sans-serif; cursor: pointer; }
.auth-mode button.selected { border-color: #167eae; background: #0d2a40; color: #55daf4; box-shadow: inset 0 0 18px #16a6d214; }
.auth-form { display: grid; gap: 13px; }
.auth-form label { display: grid; gap: 7px; color: #c8d8e8; font: 600 12px Inter, system-ui, sans-serif; }
.auth-form input:not([type=checkbox]) { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid #24425c; border-radius: 10px; outline: 0; background: #06111d; color: #eef7ff; font: 14px Inter, system-ui, sans-serif; transition: border-color .16s, box-shadow .16s; }
.auth-form input:focus { border-color: #25b9de; box-shadow: 0 0 0 3px #19b9df22; }
.auth-primary, .auth-secondary { width: 100%; min-height: 46px; border: 1px solid #168db5; border-radius: 11px; font: 700 14px Inter, system-ui, sans-serif; cursor: pointer; transition: transform .14s, opacity .14s, background .14s; }
.auth-primary { margin-top: 4px; background: linear-gradient(100deg, #0877a7, #0db8ca); color: #f2fcff; box-shadow: 0 8px 24px #00afd122; }
.auth-secondary { border-color: #23415b; background: #0a1928; color: #c5d5e4; }
.auth-primary:hover:not(:disabled), .auth-secondary:hover:not(:disabled) { transform: translateY(-1px); }
.auth-primary:disabled, .auth-secondary:disabled { cursor: wait; opacity: .55; }
.google-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; border-radius: 50%; background: #f4f8fb; color: #4285f4; font-weight: 800; }
.terms-checks { display: grid; gap: 10px; padding: 11px 12px; border: 1px solid #19374e; border-radius: 10px; background: #071421; }
.terms-checks label { display: flex; grid-template-columns: none; align-items: flex-start; gap: 9px; color: #aabed0; font-size: 11px; line-height: 1.5; }
.terms-checks input { flex: 0 0 auto; margin: 2px 0 0; accent-color: #12bfd8; }
.terms-checks a { color: #65d5ef; text-underline-offset: 3px; }
.auth-state { padding-top: 26px; text-align: center; }
.auth-state h2 { margin: 9px 0; color: #eff7ff; font: 700 21px Inter, system-ui, sans-serif; }
.auth-state p { color: #a5b9cb; font: 13px/1.55 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.auth-state-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: auto; border: 1px solid #1481a2; border-radius: 16px; background: #0b3444; color: #58e3f3; font-size: 24px; }
.auth-state-icon.error { border-color: #79364b; background: #351827; color: #ff8196; }
.auth-state .auth-secondary { margin-top: 9px; }
.auth-state .auth-primary { margin: 11px 0 0; }
.auth-message, .session-message { margin: 13px 0 0; color: #ffb2bf; font: 12px/1.5 Inter, system-ui, sans-serif; }
.auth-message.success, .session-message.success { color: #6ee5b8; }
.auth-footnote { margin: 22px 0 0; color: #637d95; font: 10px/1.5 Inter, system-ui, sans-serif; text-align: center; }
.auth-state:not([hidden]) ~ .auth-footnote { margin-top: 17px; }
.auth-spinner { display: inline-block; width: 17px; height: 17px; margin-right: 8px; border: 2px solid #34536d; border-top-color: #46d8ef; border-radius: 50%; vertical-align: -4px; animation: mi-spin .8s linear infinite; }
@keyframes mi-spin { to { transform: rotate(360deg); } }

.account-control { position: relative; flex: 0 0 auto; }
.account-toggle { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 330px; padding: 7px 9px; border: 1px solid #17334a; border-radius: 12px; background: #071726; color: #d7e8f7; font: 600 10px Inter, system-ui, sans-serif; cursor: pointer; }
.account-toggle > span:first-child { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-toggle b { color: #66dafa; font-size: 9px; }
.account-toggle #accountCredits { color: #9bb2c6; white-space: nowrap; }
.account-timer { padding-left: 5px; color: #63e6ba; white-space: nowrap; }
.account-timer.warning { color: #ffc66d; }
.account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 130; display: grid; gap: 8px; min-width: 150px; padding: 11px; border: 1px solid #25435c; border-radius: 12px; background: #0a1a2a; box-shadow: 0 15px 38px #0009; color: #b8cadd; font: 11px Inter, system-ui, sans-serif; }
.account-menu button { padding: 8px; border: 1px solid #31506b; border-radius: 8px; background: #10263a; color: #eef7ff; cursor: pointer; }
.expiry-warning { position: fixed; top: 61px; left: 50%; z-index: 105; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 8px 14px; border: 1px solid #a76c2f; border-radius: 10px; background: #392710f2; color: #ffd08b; box-shadow: 0 8px 24px #0007; font: 650 12px Inter, system-ui, sans-serif; text-align: center; }
.session-gate { position: fixed; inset: 57px 0 0; z-index: 90; display: grid; place-items: center; overflow: auto; padding: 20px; background: #020914c9; backdrop-filter: blur(5px); }
.mi-session-locked .terminal > .grid { filter: blur(6px) brightness(.18); pointer-events: none; user-select: none; }
.session-card { width: min(100%, 480px); padding: clamp(22px, 4vw, 31px); border: 1px solid #176487; border-radius: 20px; background: linear-gradient(155deg, #0d2034, #06111e); color: #e9f4ff; box-shadow: 0 25px 90px #000c, 0 0 45px #00c8ea12; }
.session-card .auth-eyebrow { margin-top: 12px; }
.session-mark { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #1486a8; border-radius: 13px; background: #0a303e; color: #4de2ed; font-size: 23px; }
.session-symbol { margin: 0 0 12px !important; color: #54d8ef !important; font-weight: 700 !important; }
.session-card ul { display: grid; gap: 8px; margin: 17px 0; padding-left: 19px; color: #bdcddd; font: 12px/1.45 Inter, system-ui, sans-serif; }
.session-card li::marker { color: #39d6b2; }
.session-price, .session-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid #1a354a; border-radius: 10px; background: #071521; color: #9fb5c8; font: 12px Inter, system-ui, sans-serif; }
.session-price { margin-top: 12px; }
.session-price strong { color: #f4d47e; font-size: 15px; }
.session-balance { margin-top: 7px; }
.session-balance strong { color: #55e2b5; font: 700 13px "DM Mono", monospace; }
.insufficient-note { margin-top: 8px; color: #ff9cac; font: 12px/1.45 Inter, system-ui, sans-serif; }
.session-card .auth-primary { margin-top: 13px; }
.session-card > small { display: block; margin-top: 13px; color: #718aa0; font: 10px/1.5 Inter, system-ui, sans-serif; text-align: center; }
.session-card .session-message { text-align: center; }
@media (max-width: 900px) {
  .account-toggle { gap: 5px; max-width: 190px; }
  .account-toggle #accountPlan { display: none; }
  .account-timer { display: none; }
}
@media (max-width: 650px) {
  .auth-gate { padding: 12px; align-items: start; }
  .auth-card { margin: auto 0; padding: 23px 18px; border-radius: 17px; }
  .account-toggle { max-width: 125px; padding: 6px; }
  .account-toggle > span:first-child { max-width: 54px; }
  .account-toggle #accountCredits { display: none; }
  .session-gate { inset: 54px 0 0; padding: 10px; }
}