/* ============================================================================
   DarkCloud captive portal — "twilight sky"
   Self-contained, mobile-first. No CDN. Brand colour comes from /branding.css
   (--brand, --brand-strong, --brand-rgb); sensible fallbacks below.
   ============================================================================ */

:root {
    --brand: #3F6CB5;
    --brand-strong: #35578F;
    --brand-rgb: 63, 108, 181;

    --ink: #232834;
    --ink-soft: #5b6473;
    --ink-faint: #8a93a3;
    --card: #ffffff;
    --card-edge: #e7ecf3;
    --field: #f4f7fb;
    --field-edge: #d8e0ea;

    --ok: #1f9d6b; --ok-bg: #e7f6ef; --ok-edge: #b9e6d1;
    --warn: #b7791f; --warn-bg: #fbf1dc; --warn-edge: #f0dcae;
    --err: #c6394b; --err-bg: #fdecee; --err-edge: #f4c4cb;

    --radius: 22px;
    --radius-sm: 12px;

    --sans: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --display: 'Nunito', var(--sans);
    --mono: ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
    font-family: var(--sans);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    min-height: 100dvh; /* mobile browser chrome-aware */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    /* Deep night sky — dark, premium, with glowing brand orbs (matches the
       CloudOS / LogServer look). Card stays light for readable voucher entry. */
    background:
        radial-gradient(140% 100% at 50% -10%, #12203c 0%, #0a1122 46%, #060a14 100%);
    background-attachment: fixed;
}

.sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* Faint grid, fading toward the edges. */
.sky::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(125,155,215,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125,155,215,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 78%);
            mask-image: radial-gradient(120% 95% at 50% 0%, #000 38%, transparent 78%);
}
/* Edge vignette for depth. */
.sky::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(125% 85% at 50% 34%, transparent 52%, rgba(2,5,12,.62) 100%);
}
/* Faint stars in the upper sky. */
.sky__stars {
    position: absolute; inset: 0; opacity: .7; background-repeat: no-repeat;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 16%, rgba(255,255,255,.9), transparent),
        radial-gradient(1.2px 1.2px at 28% 9%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 44% 20%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.4px 1.4px at 63% 11%, rgba(255,255,255,.85), transparent),
        radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.2px 1.2px at 88% 8%, rgba(255,255,255,.75), transparent),
        radial-gradient(1px 1px at 53% 6%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 34% 27%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 70% 34%, rgba(255,255,255,.45), transparent),
        radial-gradient(1px 1px at 18% 40%, rgba(255,255,255,.4), transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 72%);
            mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 72%);
    animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .6; } 50% { opacity: .85; } }
/* Glowing orbs — orb-1 follows the brand colour. */
.sky__cloud { position: absolute; border-radius: 50%; filter: blur(60px); }
.sky__cloud--1 { width: 540px; height: 540px; top: -140px; left: -110px; background: radial-gradient(closest-side, rgba(var(--brand-rgb),.55), transparent 70%); opacity: .5; animation: orb 9s ease-in-out infinite; }
.sky__cloud--2 { width: 480px; height: 480px; bottom: -160px; right: -130px; background: radial-gradient(closest-side, rgba(56,150,205,.42), transparent 70%); opacity: .45; animation: orb 12s ease-in-out infinite; animation-delay: -3s; }
.sky__cloud--3 { width: 420px; height: 420px; top: 42%; left: 52%; background: radial-gradient(closest-side, rgba(118,92,205,.3), transparent 70%); opacity: .4; animation: orb 15s ease-in-out infinite; animation-delay: -7s; }
.sky__glow { position: absolute; left: 50%; bottom: -22%; width: 120%; height: 55%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(var(--brand-rgb),.16), transparent 70%); }
@keyframes orb { 0%,100% { transform: scale(1); opacity: .38; } 50% { transform: scale(1.09); opacity: .58; } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(120vw); } }
@media (prefers-reduced-motion: reduce) { .sky__cloud, .sky__stars { animation: none; } }

/* ---------------------------------------------------------------- layout -- */
.portal-wrap {
    position: relative; z-index: 1;
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 28px 18px;
}

.card {
    position: relative;
    width: 100%; max-width: 440px;
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius);
    box-shadow:
        0 1px 2px rgba(16,24,55,.06),
        0 8px 24px -12px rgba(16,24,55,.28),
        0 44px 90px -30px rgba(16, 24, 55, 0.62);
    padding: 36px 30px 28px;
    animation: card-in .38s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }
@media (max-width: 380px) { .card { padding: 28px 20px 22px; } }
/* Thin brand accent + top highlight for a crafted, premium edge. */
.card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(90deg, transparent, var(--brand), transparent);
}

/* ------------------------------------------------------------- brand mark -- */
.brand { text-align: center; margin-bottom: 20px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 13px; }
.brand-lockup__mark { width: 52px; height: 52px; }
.brand-lockup__word {
    font-family: var(--display);
    font-weight: 800; font-size: 1.95rem; letter-spacing: -0.01em; line-height: 1;
}
.brand-lockup__word .is-dark { color: #5C6470; }
.brand-lockup__word .is-cloud { color: var(--brand); }

/* ----------------------------------------------------------------- copy --- */
.headline {
    font-family: var(--display);
    text-align: center; font-size: 1.6rem; font-weight: 800;
    letter-spacing: -0.01em; margin: 6px 0 6px; color: var(--ink);
}
/* Logo sizing (overridable per-install from the Branding page). */
.brand-logo-img { height: var(--logo-height, 72px); width: auto; max-width: 260px; }
.subhead { text-align: center; color: var(--ink-soft); font-size: 0.99rem; line-height: 1.55; margin: 0 0 24px; }

/* ---------------------------------------------------------------- form ---- */
.field { margin-bottom: 16px; }
.field label {
    display: block; font-family: var(--sans);
    font-size: 0.78rem; font-weight: 700; color: var(--ink-faint); margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.voucher-input {
    width: 100%; font-family: var(--mono);
    font-size: 1.5rem; font-weight: 700; letter-spacing: 0.18em;
    text-align: center; text-transform: uppercase;
    padding: 18px 14px; color: var(--ink);
    background: var(--field);
    border: 1.5px solid var(--field-edge);
    border-radius: var(--radius-sm);
    outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
    box-shadow: inset 0 1px 2px rgba(16,24,55,.05);
}
.voucher-input::placeholder { color: #aeb8c8; letter-spacing: 0.16em; }
.voucher-input { caret-color: var(--brand); touch-action: manipulation; }
.voucher-input:focus {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.16), inset 0 1px 2px rgba(16,24,55,.05);
}
.voucher-input.is-invalid { border-color: var(--err); background: #fffafb; }
.voucher-input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(198,57,75,.14), inset 0 1px 2px rgba(16,24,55,.05); }
.field__error {
    display: flex; align-items: center; gap: 6px;
    color: var(--err); font-size: .84rem; font-weight: 600; margin-top: 8px;
}
.field__error svg { width: 14px; height: 14px; flex: none; }

/* Subtle trust cues under the button — inline icons, no emoji. */
.trust-row {
    list-style: none; margin: 18px 0 2px; padding: 0;
    display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.trust-row li { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-faint); font-size: .8rem; font-weight: 600; }
.trust-row svg { width: 15px; height: 15px; color: var(--brand); opacity: .9; }

.btn {
    width: 100%; border: 0; cursor: pointer;
    font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em;
    padding: 16px; border-radius: var(--radius-sm); color: #fff;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
    box-shadow: 0 10px 24px -10px rgba(var(--brand-rgb), 0.7);
    transition: transform .05s, filter .15s, box-shadow .15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.btn { touch-action: manipulation; min-height: 52px; }
.btn:hover { filter: brightness(1.06); box-shadow: 0 14px 30px -10px rgba(var(--brand-rgb), 0.75); }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 3px solid rgba(var(--brand-rgb), .5); outline-offset: 2px; }
.btn[disabled] { opacity: .75; cursor: progress; }
a.btn { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

.btn__spinner {
    display: none; width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff;
    border-radius: 50%; animation: spin .7s linear infinite;
}
.btn.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- alerts --- */
.alert {
    display: flex; gap: 11px; align-items: flex-start;
    border-radius: var(--radius-sm); padding: 13px 15px; margin-bottom: 16px;
    font-size: .92rem; border: 1px solid transparent;
    animation: alert-in .28s ease-out both;
}
@keyframes alert-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .alert { animation: none; } }
.alert__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.alert__body { min-width: 0; }
.alert__title { font-family: var(--display); font-weight: 700; margin: 0 0 2px; }
.alert__text { margin: 0; line-height: 1.5; }
.alert--error { background: var(--err-bg); border-color: var(--err-edge); color: #8f2130; }
.alert--warn  { background: var(--warn-bg); border-color: var(--warn-edge); color: #7a5312; }
.alert--ok    { background: var(--ok-bg); border-color: var(--ok-edge); color: #14603f; }

/* ---------------------------------------------------------------- links --- */
.legal-links { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.legal-links a { color: var(--ink-faint); text-decoration: none; font-size: .82rem; padding: 9px 10px; border-radius: 8px; }
.legal-links a:hover { color: var(--brand); text-decoration: underline; }
.legal-links a:focus-visible, .switch-link:focus-visible {
    outline: 2px solid rgba(var(--brand-rgb), .55); outline-offset: 2px; border-radius: 8px;
}

/* -------------------------------------------------------- connected page -- */
.success-icon { width: 82px; height: 82px; margin: 2px auto 14px; display: block; }
.success-icon .draw {
    stroke-dasharray: 60; stroke-dashoffset: 60;
    animation: check-draw .5s ease-out .15s forwards;
}
@keyframes check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .success-icon .draw { animation: none; stroke-dashoffset: 0; } }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 22px 0 6px; }
.detail { background: var(--field); border: 1px solid var(--field-edge); border-radius: var(--radius-sm); padding: 13px 15px; }
.detail__label { font-family: var(--sans); font-weight: 700; font-size: .68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.detail__value { font-family: var(--display); font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.countdown { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }
.redirect-note { text-align: center; color: var(--ink-soft); font-size: .86rem; margin-top: 16px; }
.redirect-note a { color: var(--brand); text-decoration: none; font-weight: 600; }

.legal-body { color: var(--ink-soft); font-size: .95rem; white-space: pre-wrap; line-height: 1.7; }
.back-link { display: inline-block; margin-top: 18px; color: var(--brand); text-decoration: none; font-weight: 600; }

/* -------------------------------------------------------- footer credit --- */
.site-credit {
    position: relative; z-index: 1; text-align: center;
    padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px)); margin-top: auto;
    text-shadow: 0 1px 3px rgba(14,20,42,.5);
}
.site-credit__by { margin: 0; font-size: .82rem; color: rgba(255,255,255,.88); }
.site-credit__name { font-weight: 800; color: #fff; }
.site-credit__meta { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 7px 0 0; font-size: .76rem; color: rgba(255,255,255,.82); }
.site-credit__status { display: inline-flex; align-items: center; gap: 7px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; animation: dot-live 1.7s ease-in-out infinite; }
.site-credit__sep { color: rgba(255,255,255,.4); }
.site-credit__ver { font-family: var(--mono); letter-spacing: .02em; }
.site-credit__copy { margin: 8px 0 0; font-size: .7rem; color: rgba(255,255,255,.58); }
@keyframes dot-live {
    0%,100% { box-shadow: 0 0 5px 1px rgba(52,211,153,.85), 0 0 11px 3px rgba(52,211,153,.4); opacity: 1; }
    50%     { box-shadow: 0 0 9px 2px rgba(52,211,153,1), 0 0 20px 6px rgba(52,211,153,.6); opacity: .82; }
}
@media (prefers-reduced-motion: reduce) { .status-dot { animation: none; box-shadow: 0 0 7px 2px rgba(52,211,153,.7); } }

/* ---------------------------------------------------- device-memory status - */
.status-badge {
    position: relative;
    width: 62px; height: 62px; margin: 2px auto 14px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(var(--brand-rgb), .12); color: var(--brand);
}
.status-badge::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(var(--brand-rgb), .28);
    animation: badge-ring 2.4s ease-out infinite;
}
@keyframes badge-ring {
    0%   { transform: scale(.82); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: scale(1.12); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .status-badge::after { animation: none; opacity: .5; } }
.status-badge svg { width: 32px; height: 32px; }
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 14px; }
.balance__cell {
    background: var(--field); border: 1px solid var(--field-edge);
    border-radius: var(--radius-sm); padding: 15px 12px 14px; text-align: center;
}
.balance__icon { width: 20px; height: 20px; color: var(--brand); opacity: .85; margin: 0 auto 7px; display: block; }
.balance__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint); }
.balance__value { font-family: var(--display); font-size: 1.7rem; font-weight: 800; color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.usage { margin: 0 0 20px; }
.usage__track { height: 10px; background: var(--field); border: 1px solid var(--field-edge); border-radius: 999px; overflow: hidden; }
.usage__fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-strong), var(--brand));
    transform-origin: left center;
    animation: fill-in .7s cubic-bezier(.25,.8,.35,1) both;
}
[dir="rtl"] .usage__fill { transform-origin: right center; }
@keyframes fill-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .usage__fill { animation: none; } }
/* Colour tracks remaining balance — green plenty, amber low, red critical. */
.usage--warn .usage__fill { background: linear-gradient(90deg, #9a6516, var(--warn)); }
.usage--crit .usage__fill { background: linear-gradient(90deg, #a32c3d, var(--err)); }
.usage__meta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--ink-soft); margin-top: 6px; }
.status-info { margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.status-info > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--field-edge); }
.status-info > div:last-child { border-bottom: 0; }
.status-info dt { margin: 0; color: var(--ink-faint); font-size: .86rem; font-weight: 600; }
.status-info dd { margin: 0; color: var(--ink); font-weight: 700; font-size: .9rem; text-align: right; }
.status-info .mono { font-family: var(--mono); letter-spacing: .04em; }
.switch-link { display: block; text-align: center; margin-top: 8px; padding: 10px 8px; color: var(--ink-soft); font-size: .88rem; font-weight: 600; text-decoration: none; border-radius: 8px; }
.switch-link:hover { color: var(--brand); text-decoration: underline; }

/* ------------------------------------------------------------ language --- */
/* Quiet single-link language switch: shows only the OTHER language. */
.lang-switch { display: flex; justify-content: center; margin-top: 6px; }
.lang-switch a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 14px; min-height: 44px;
    color: var(--ink-faint); font-size: .88rem; font-weight: 600; text-decoration: none;
    border-radius: 10px; transition: color .15s, background .15s;
}
.lang-switch svg { width: 16px; height: 16px; opacity: .8; }
.lang-switch a:hover { color: var(--brand); background: var(--field); }
.lang-switch a:focus-visible { outline: 2px solid rgba(var(--brand-rgb), .55); outline-offset: 2px; }

/* Urdu rendering: readable Arabic-script system fonts, slightly larger line
   height, and RTL flow. Codes/numbers stay LTR via .mono and dir on inputs. */
[lang="ur"] body,
html[lang="ur"] { font-family: "Geeza Pro", "Noto Naskh Arabic", "Noto Nastaliq Urdu", Tahoma, sans-serif; }
html[lang="ur"] .headline, html[lang="ur"] .subhead, html[lang="ur"] .alert,
html[lang="ur"] .balance__label, html[lang="ur"] .detail__label,
html[lang="ur"] .status-info dt, html[lang="ur"] .btn, html[lang="ur"] .switch-link,
html[lang="ur"] .legal-links a, html[lang="ur"] .trust-row li {
    font-family: "Geeza Pro", "Noto Naskh Arabic", "Noto Nastaliq Urdu", Tahoma, sans-serif;
    line-height: 1.75;
}
[dir="rtl"] .status-info div { flex-direction: row-reverse; }
[dir="rtl"] .usage__meta { flex-direction: row-reverse; }
[dir="rtl"] .alert { text-align: right; }
[dir="rtl"] .voucher-input { direction: ltr; text-align: center; }
[dir="rtl"] .mono { direction: ltr; unicode-bidi: embed; }