:root {
    --panel: rgba(70, 84, 112, 0.62);
    --panel-border: rgba(255, 255, 255, 0.22);
    --text: #f7f9ff;
    --muted: rgba(247, 249, 255, 0.7);
    --focus-ring: #46adff;
    --col-w: 42.4vw;            /* width shared by title, fields and button */
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
    font-family: Roboto, "Segoe UI", Arial, Helvetica, sans-serif;
    background: #020d20;
    color: var(--text);
}

button { font-family: inherit; }

/* ---------- Background (bokeh glows like the reference) ---------- */
.tv-shell {
    width: 100vw; height: 100vh; position: relative; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(ellipse 20% 26% at 12% 38%, rgba(0, 200, 235, .34), transparent 72%),
        radial-gradient(ellipse 18% 24% at 27% 46%, rgba(205, 0, 230, .24), transparent 72%),
        radial-gradient(ellipse 18% 26% at 72% 40%, rgba(255, 0, 150, .22), transparent 72%),
        radial-gradient(ellipse 16% 24% at 88% 30%, rgba(0, 200, 235, .30), transparent 72%),
        radial-gradient(ellipse 14% 20% at 72% 14%, rgba(0, 190, 220, .18), transparent 72%),
        linear-gradient(116deg, #03142f 0%, #061a3a 48%, #020c20 100%);
}

/* ---------- Centered column ---------- */
.login-card {
    position: absolute;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: var(--col-w);
    text-align: center;
}

.brand {
    height: 14vh;
    display: grid;
    place-items: center;
    margin-bottom: 3.5vh;      /* clear gap so logo never touches the title */
}
.pixcloudo-logo { height: 100%; width: auto; max-width: 78%; object-fit: contain; }
.brand-fallback { font-size: 3.2vw; font-weight: 700; }

h1 {
    margin: 0 0 5.5vh;
    font-size: 2.5vw;
    line-height: 1.15;
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 0 3px 15px rgba(0,0,0,.4);
}

#loginForm { display: flex; flex-direction: column; }

.field-wrap { position: relative; width: 100%; margin-bottom: 3.2vh; }

/* ---------- Fields ---------- */
.tv-field {
    width: 100%;
    height: 12.4vh;
    display: flex;
    align-items: center;
    gap: 1.3vw;
    padding: 0 1.4vw;
    border-radius: 12px;
    border: 2px solid var(--panel-border);
    background: var(--panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 30px rgba(0,0,0,.18);
    transition: border-color .15s, box-shadow .15s, transform .15s;
    cursor: text;
}
.tv-field.focused {
    border-color: var(--focus-ring);
    box-shadow: 0 0 0 4px rgba(55,164,255,.22), 0 0 26px rgba(55,164,255,.35),
                inset 0 1px 0 rgba(255,255,255,.14);
    transform: scale(1.012);
}

.field-icon { width: 2.4vw; height: 2.4vw; flex: none; color: rgba(239,244,255,.92); }
.field-icon svg { width: 100%; height: 100%; display: block; }

.field-content { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; }
.field-label { font-size: 1.9vw; line-height: 1.1; margin-bottom: .5vh; }

.tv-field input {
    width: 100%; border: 0; outline: 0; padding: 0; background: transparent;
    color: var(--text); font: inherit; font-size: 1.55vw; line-height: 1.2;
}
.tv-field input::placeholder { color: var(--muted); }

.password-toggle {
    width: 3vw; height: 3vw; flex: none; padding: .3vw;
    border: 2px solid transparent; border-radius: 10px; outline: 0;
    background: transparent; color: rgba(240,244,255,.8);
}
.password-toggle.focused { border-color: var(--focus-ring); box-shadow: 0 0 16px rgba(55,164,255,.4); }
.eye-icon { width: 100%; height: 100%; }
.password-toggle.shown .eye-slash { display: none; }

/* ---------- Remote D-pad hints ---------- */

.remote-dpad {
    position: absolute;
    top: 50%;
    width: 4.3vw;
    height: 4.3vw;
    transform: translateY(-50%);
    z-index: 5;
    pointer-events: none;

    filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
}

/* Left side D-pad */
.remote-dpad.dpad-left {
    right: 100%;
    margin-right: 1.2vw;
    color: rgba(165,173,195,.85);
}

/* Right side D-pad */
.remote-dpad.dpad-right {
    left: 100%;
    margin-left: 1.2vw;
    color: #62d7ff;

    filter:
        drop-shadow(0 0 8px rgba(98,215,255,.8))
        drop-shadow(0 3px 6px rgba(0,0,0,.3));
}

/* ---------- Button ---------- */
.login-button {
    width: 100%; height: 10.4vh; margin-top: 1.8vh;
    border: 0; border-radius: 10px; outline: 0;
    color: #fff; font-size: 1.9vw; font-weight: 700;
    background: linear-gradient(100deg, #e000dc 0%, #ad00ef 52%, #6f22ec 100%);
    box-shadow: 0 10px 28px rgba(126,0,226,.32), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .15s, box-shadow .15s;
}
.login-button.focused {
    box-shadow: 0 0 0 4px rgba(72,173,255,.55), 0 0 30px rgba(72,173,255,.4),
                0 10px 28px rgba(126,0,226,.32);
    transform: scale(1.012);
}

/* ---------- Secondary links ---------- */
.links { display: flex; justify-content: center; gap: 3vw; margin-top: 3.4vh; }
.link-btn {
    padding: .8vh 1.1vw; border: 2px solid transparent; border-radius: 8px; outline: 0;
    background: transparent; color: rgba(255,255,255,.82); font-size: 1.5vw;
    transition: border-color .15s, background .15s;
}
.link-btn.focused { border-color: var(--focus-ring); background: rgba(70,173,255,.14); color: #fff; }

/* ---------- Thooval branding (bottom-right) ---------- */
.powered {
    position: fixed; right: 2.4vw; bottom: 4vh; z-index: 10;
    display: flex; flex-direction: column; align-items: flex-end; gap: .4vh;
    font-size: 1.1vw; color: rgba(255,255,255,.85);
}
.powered img { width: 19vw; max-height: 14vh; object-fit: contain; }
.powered-fallback { font-size: 1.8vw; font-weight: 700; line-height: .95; text-align: right; }
.powered-fallback small { font-size: .45em; letter-spacing: .7px; }

/* ---------- Status toast ---------- */
.status {
    position: fixed; left: 50%; bottom: 4vh; transform: translateX(-50%);
    max-width: 60vw; padding: 1.4vh 1.8vw; border-radius: 12px;
    background: rgba(0,0,0,.75); color: #fff; font-size: 1.4vw;
    opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20;
}
.status.visible { opacity: 1; }

/* Narrow desktop windows (development only) */
@media (max-aspect-ratio: 4/3) {
    :root { --col-w: 70vw; }
    .dpad { display: none; }
    h1 { font-size: 4vw; white-space: normal; }
    .field-label, .tv-field input, .link-btn { font-size: 3vw; }
    .login-button { font-size: 3.4vw; }
    .field-icon { width: 5vw; height: 5vw; }
    .powered { font-size: 2vw; } .powered img { width: 30vw; }
}
/* =========================================================
   Android TV Remote D-Pad
   ========================================================= */

.remote-dpad {
    position: absolute;
    top: 50%;

    width: 4.3vw;
    height: 4.3vw;

    transform: translateY(-50%);

    z-index: 5;
    pointer-events: none;

    color: #aeb9cc;

    filter: drop-shadow(0 3px 6px rgba(0,0,0,.3));
}


/* ---------------------------------------------------------
   Left / Right placement
   --------------------------------------------------------- */

.remote-dpad.dpad-left {
    right: 100%;
    margin-right: 1.2vw;

    color: rgba(165,173,195,.85);
}

.remote-dpad.dpad-right {
    left: 100%;
    margin-left: 1.2vw;

    color: #62d7ff;

    filter:
        drop-shadow(0 0 8px rgba(98,215,255,.8))
        drop-shadow(0 3px 6px rgba(0,0,0,.3));
}


/* ---------------------------------------------------------
   Individual direction buttons
   --------------------------------------------------------- */

.remote-dpad .dpad-btn {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.55vw;
    height: 1.55vw;

    border: 1px solid rgba(255,255,255,.38);

    background: rgba(60,74,100,.72);

    border-radius: .42vw;

    font-size: .65vw;
    line-height: 1;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.12),
        0 2px 5px rgba(0,0,0,.28);

    text-shadow:
        0 1px 2px rgba(0,0,0,.6);
}


/* ---------------------------------------------------------
   Up
   --------------------------------------------------------- */

.remote-dpad .dpad-up {
    top: 0;
    left: 1.38vw;
}


/* ---------------------------------------------------------
   Left
   --------------------------------------------------------- */

.remote-dpad .dpad-left-arrow {
    top: 1.38vw;
    left: 0;
}


/* ---------------------------------------------------------
   Right
   --------------------------------------------------------- */

.remote-dpad .dpad-right-arrow {
    top: 1.38vw;
    right: 0;
}


/* ---------------------------------------------------------
   Down
   --------------------------------------------------------- */

.remote-dpad .dpad-down {
    bottom: 0;
    left: 1.38vw;
}


/* ---------------------------------------------------------
   Center OK button
   --------------------------------------------------------- */

.remote-dpad .dpad-ok {
    position: absolute;

    top: 1.30vw;
    left: 1.30vw;

    width: 1.70vw;
    height: 1.70vw;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(91,105,132,.95);

    border: 1px solid rgba(255,255,255,.45);

    color: #e8edf5;

    font-size: .52vw;
    font-weight: 700;

    letter-spacing: .02vw;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.18),
        0 2px 6px rgba(0,0,0,.35);
}


/* ---------------------------------------------------------
   Active / right-side D-pad
   --------------------------------------------------------- */

.remote-dpad.dpad-right .dpad-btn {
    background: rgba(75,190,235,.88);

    border-color: rgba(125,225,255,.95);

    box-shadow:
        0 0 8px rgba(48,190,255,.45),
        inset 0 1px 2px rgba(255,255,255,.25);
}


.remote-dpad.dpad-right .dpad-ok {
    background: rgba(86,202,239,.95);

    border-color: rgba(150,235,255,.95);

    box-shadow:
        0 0 9px rgba(48,190,255,.5),
        inset 0 1px 2px rgba(255,255,255,.3);
}


/* ---------------------------------------------------------
   Development browser: hide remote hints on narrow screens
   --------------------------------------------------------- */

@media (max-aspect-ratio: 4/3) {
    .remote-dpad {
        display: none;
    }
}