/* A1x sign-in: same look as the Android app login card */
.a1x-screen { background: radial-gradient(ellipse at 50% 120%, rgba(255,122,0,.28), transparent 55%), radial-gradient(ellipse at 10% 0%, rgba(255,122,0,.12), transparent 45%), #050505 !important; }
.a1x-screen::before { content: ""; position: absolute; inset: 0; background: url(icons/login-bg.jpg) center/cover no-repeat; opacity: .35; pointer-events: none; }
.a1x-screen::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); pointer-events: none; }
.a1x-card { position: relative; z-index: 1; flex: 0 0 auto !important; flex-direction: column !important; width: min(440px, 92vw) !important; max-width: none !important; padding: 26px 30px 22px !important; margin: auto; border-radius: 14px; background: rgba(16,16,16,.95) !important; border: 1px solid #c2601c; box-shadow: 0 0 0 1px rgba(255,122,0,.08), 0 30px 80px rgba(0,0,0,.8), 0 0 60px rgba(255,122,0,.12); }
.a1x-logo-col { width: 100% !important; max-width: none !important; align-items: center !important; margin: 0 0 10px !important; }
.a1x-logo-col > div:first-child { width: 220px !important; height: 130px !important; }
.a1x-form-col { width: 100% !important; max-width: none !important; align-items: stretch !important; }
.a1x-form-col > div { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.a1x-hide { display: none !important; }
.a1x-portal-holder { width: 100%; margin: 0 0 12px; }
.a1x-portal { -webkit-appearance: none; appearance: none; width: 100%; height: 46px; border-radius: 40px; background: #000 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ff7a00' d='M7 10l5 5 5-5z'/></svg>") no-repeat right 14px center/22px; border: 1.5px solid #ff7a00; color: #fff; font: 600 15px Roboto, system-ui, sans-serif; text-align: center; text-align-last: center; padding: 0 44px 0 24px; outline: none; cursor: pointer; }
.a1x-portal:focus { border: 2px solid #ff9a30; box-shadow: 0 0 0 3px rgba(255,122,0,.2); }
.a1x-portal option { background: #2b2b2b; color: #ff8a1f; font-size: 15px; }
.a1x-card input[type=email], .a1x-card input[type=password], .a1x-card input[type=text] { height: 46px !important; border-radius: 40px !important; background: #4a4a4a !important; border: 1px solid #5e5e5e !important; color: #fff !important; text-align: center; font-weight: 500 !important; padding: 0 44px !important; box-shadow: none !important; transition: border-color .15s, background-color .15s; }
.a1x-card input::placeholder { color: #d0d0d0 !important; }
.a1x-card input:focus { background: #555 !important; border: 2px solid #ff7a00 !important; outline: none !important; }
.a1x-pass-wrap { position: relative; }
.a1x-eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 15px; background: transparent; color: #cfcfcf; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.a1x-eye:hover, .a1x-eye.on { color: #ff7a00; }
.a1x-eye:focus-visible { outline: 2px solid #ff7a00; }
/* SIGN IN: the orange pill */
.a1x-form-col [role=button], .a1x-form-col div[tabindex="0"]:not(:has(input)) { width: 100% !important; height: 48px !important; border-radius: 40px !important; background: linear-gradient(90deg, #ff8a1f, #ff6a00) !important; justify-content: center !important; align-items: center !important; box-shadow: 0 8px 24px rgba(255,106,0,.35); transition: transform .12s, box-shadow .12s, filter .12s; }
.a1x-form-col [role=button]:hover { filter: brightness(1.08); transform: translateY(-1px); }
.a1x-form-col [role=button]:focus-visible, .a1x-form-col [role=button]:focus { outline: 2px solid #fff !important; outline-offset: -2px; }
.a1x-form-col [role=button] div { color: #fff !important; font-weight: 800 !important; letter-spacing: .2em !important; font-size: 15px !important; }
/* footer lines: reseller note + version, dimmed like the app */
.a1x-logo-col > div:not(:first-child) div { color: #d0d0d0 !important; }
@media (max-width: 480px) { .a1x-card { padding: 20px 18px 18px !important; } .a1x-logo-col > div:first-child { width: 180px !important; height: 106px !important; } }
/* copy / paste must work in the fields (body disables selection for the TV-style UI) */
.a1x-card input, .a1x-card select { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; touch-action: auto !important; }

/* --- v4: app-style mode toggle, code login, no reseller/version lines --- */
.a1x-logo-col > div:not(:first-child) { display: none !important; }
.a1x-mode-row { display: flex; width: 100%; height: 34px; padding: 3px; margin: 2px 0 14px; border-radius: 17px; background: rgba(255,255,255,.2); gap: 2px; }
.a1x-tab { flex: 1; border: 0; border-radius: 14px; background: transparent; color: #e6e6e6; font: 800 11px Roboto, system-ui, sans-serif; letter-spacing: .08em; cursor: pointer; transition: background-color .15s, color .15s; }
.a1x-tab.on { background: #ff7a00; color: #fff; }
.a1x-tab:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.a1x-err { min-height: 0; color: #ff6b6b; font: 500 13px Roboto, system-ui, sans-serif; text-align: center; margin: -4px 0 8px; }
.a1x-err:empty { display: none; }
.a1x-busy .a1x-form-col [role=button] { opacity: .6; pointer-events: none; }

/* --- v5: native fields with paste button --- */
.a1x-field { position: relative; width: 100%; margin: 0 0 12px; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; touch-action: auto; }
.a1x-card .a1x-in { display: block; width: 100%; height: 46px; border-radius: 40px; background: #4a4a4a; border: 1px solid #5e5e5e; color: #fff; text-align: center; font: 500 16px Roboto, system-ui, sans-serif; padding: 0 44px; outline: none; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; -webkit-appearance: none; appearance: none; transition: border-color .15s, background-color .15s; }
.a1x-card .a1x-in::placeholder { color: #d0d0d0; }
.a1x-card .a1x-in:focus { background: #555; border: 2px solid #ff7a00; }
.a1x-paste { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 15px; background: transparent; color: #cfcfcf; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.a1x-paste:hover, .a1x-paste:active { color: #ff7a00; }
.a1x-paste:focus-visible, .a1x-eye:focus-visible { outline: 2px solid #ff7a00; }
.a1x-field .a1x-eye { right: 10px; }
.a1x-err { margin: -4px 0 10px; }

.a1x-card .a1x-in, .a1x-field, .a1x-portal, .a1x-mode-row { box-sizing: border-box !important; max-width: 100%; }
.a1x-card { overflow: hidden; }

/* stacked columns must size to content (app inline flex:1 1 0% split the height 50/50 and clipped SIGN IN) */
.a1x-logo-col, .a1x-form-col { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; margin-left: 0 !important; }
.a1x-card { height: auto !important; overflow: visible; }

/* short screens (phone landscape): compact logo, scrollable screen */
.a1x-screen { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.a1x-card { margin: 12px auto; }
@media (max-height: 520px) { .a1x-logo-col > div:first-child { width: 120px !important; height: 70px !important; } .a1x-card { padding: 12px 22px 12px !important; } .a1x-logo-col { margin-bottom: 4px !important; } .a1x-mode-row { margin-bottom: 8px; } .a1x-portal-holder, .a1x-field { margin-bottom: 8px; } .a1x-card .a1x-in, .a1x-portal { height: 40px; } }

.a1x-card { margin: auto !important; }
.a1x-screen { padding: 12px 0; box-sizing: border-box; }