/* ============================================================================
   iDrive — account / billing portal (/account, its return and mock pages)
   The shared design tokens live in /assets/tokens.css (loaded first), the
   phone mockup in /assets/device.css, the header in /assets/site-header.css;
   this file keeps the portal's own reset, components and page-only tokens.

   Design language — matches the native app's blue brand and iOS-style
   "grouped" feel: a cool light ground, white cards that lift on soft,
   blue-tinted shadows, generous radii, a modern humanist sans (Assistant),
   and calm, confident motion. Mobile-first, fully responsive, RTL-first
   (he/ar) with en/ru.
   ============================================================================ */

/* ---------------------------------------------------------- Page tokens -- */
:root {
    --mock-bg: #FFF6D8; --mock-border: #ECD67A; --mock-ink: #6B5514;
    --gauge-track: rgba(10, 124, 216, 0.14);
    --gauge-track-ok: rgba(18, 133, 90, 0.16);
    --gauge-track-warn: rgba(200, 106, 24, 0.18);
}

/* ------------------------------------------------------------------ Base -- */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Assistant', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Rubik', sans-serif;
    color: var(--ink);
    background: var(--bg);
    background-image:
        radial-gradient(1100px 620px at 100% -10%, rgba(10, 124, 216, 0.10), transparent 60%),
        radial-gradient(900px 540px at -10% 8%, rgba(57, 160, 235, 0.08), transparent 55%);
    background-attachment: fixed;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html[lang="ar"] body { font-family: 'Cairo', 'Assistant', system-ui, sans-serif; }

a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(1.75rem, 5vw, 2.4rem); font-weight: 800; }
h2 { font-size: 1.22rem; font-weight: 800; }
h3 { font-size: 1.02rem; font-weight: 700; }

/* The header (logo · language · theme · profile menu) is shared: /assets/site-header.css. */

/* ----------------------------------------------------------------- Layout -- */
.content.account { max-width: 760px; margin: 28px auto 72px; padding: 0 18px; }
.content.account.is-wide { max-width: 1036px; }

/* The portal's card stack and the state screens both ride in ".sheet"; here it
   is just a transparent flow container (the old opaque document card is gone). */
.sheet { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* --------------------------------------------------------- State screens --- */
.state { text-align: center; padding: 28px 8px; }
.state h1 { margin-bottom: 12px; }
.state p { color: var(--ink-soft); max-width: 46ch; margin-inline: auto; }
.state .big-ic {
    width: 84px; height: 84px; border-radius: var(--r-pill); display: grid; place-items: center;
    margin: 0 auto 22px;
}
.state .big-ic svg { width: 40px; height: 40px; }
.ic-ok { background: var(--brand-grad); color: #fff; box-shadow: var(--shadow-brand); }
.ic-warn { background: var(--warn-tint); color: var(--warn); }

.spinner {
    width: 42px; height: 42px; border-radius: var(--r-pill); margin: 0 auto 18px;
    border: 4px solid var(--brand-100); border-top-color: var(--brand); animation: spin 0.8s linear infinite;
}
.spinner.sm { width: 20px; height: 20px; border-width: 3px; margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
    border: 1.5px solid transparent; border-radius: var(--r-pill); padding: 13px 24px;
    transition: transform 0.14s var(--ease), box-shadow 0.22s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
    text-decoration: none; line-height: 1; white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.995); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 14px 30px -6px var(--brand-glow); transform: translateY(-1px); text-decoration: none; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.btn-ghost:hover:not(:disabled) { border-color: var(--brand-400); color: var(--brand-700); text-decoration: none; }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 38%, transparent); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 9%, transparent); border-color: color-mix(in srgb, var(--danger) 52%, transparent); text-decoration: none; }
.btn-block { width: 100%; }
.btn-lg { font-size: 1.05rem; padding: 15px 28px; }

/* --------------------------------------------------------------- Banners --- */
.biz-warn {
    background: var(--warn-tint); border: 1px solid var(--warn-line);
    border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 18px;
    color: var(--warn-ink); font-size: 0.93rem; font-weight: 500;
    display: flex; gap: 10px; align-items: flex-start;
}
.biz-warn::before {
    content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px;
    background: currentColor; opacity: 0.85;
    -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
    mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- Cards --- */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
    padding: 22px 22px; margin-bottom: 16px;
    animation: card-in 0.4s var(--ease-out) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.card > h2 { margin-bottom: 16px; }
.card > h2.with-sub { margin-bottom: 4px; }

/* --------------------------------------------------------------- Badges ---- */
.badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.82rem; font-weight: 700; padding: 6px 13px; border-radius: var(--r-pill);
    line-height: 1;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.badge.trial { background: var(--brand-050); color: var(--brand-700); }
.badge.active { background: var(--ok-tint); color: var(--ok); }
.badge.past_due { background: var(--warn-tint); color: var(--warn); }
.badge.cancelled, .badge.none { background: var(--neutral-chip); color: var(--ink-soft); }

/* -------------------------------------------------------- Billing head --- */
/* Account & billing opens with its own title (account.js renderBillingHead), start-aligned under the
   way back — never the home's centred welcome and status hero. */
.page-head { margin: 4px 0 20px; }
.page-head:empty { display: none; }
.page-head .link-back { font-size: 0.92rem; margin-bottom: 10px; }
.page-head .link-back svg { width: 17px; height: 17px; flex: none; transition: transform 0.2s var(--ease); }
.page-head .link-back:hover svg { transform: translateX(calc(-3px * var(--icon-flip, 1))) scaleX(var(--icon-flip, 1)); }
.page-head h1 { margin-bottom: 6px; }
.page-head p { color: var(--ink-soft); font-size: 1rem; max-width: 56ch; }

/* ------------------------------------------- Billing's subscription summary -- */
/* Compact (account.js statusCard): title + badge, a small day-count / status tile beside the status line,
   then the facts side by side — the home's ring is not repeated here. */
.status-summary { padding: 18px 20px; }
.ss-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ss-top h2 { font-size: 1rem; color: var(--ink-soft); font-weight: 700; letter-spacing: 0; }
.ss-main { display: flex; align-items: center; gap: 14px; }
.ss-text { min-width: 0; flex: 1; }
.ss-headline { font-size: 1.1rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.ss-sub { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.45; margin-top: 3px; text-wrap: pretty; }
.ss-tile {
    flex: none; width: 58px; height: 58px; border-radius: var(--r-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background: var(--brand-050); border: 1px solid var(--brand-100); color: var(--brand-700);
}
.ss-tile .gauge-num { font-size: 1.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: inherit; }
.ss-tile .gauge-cap { font-size: 0.68rem; font-weight: 600; line-height: 1.1; color: var(--ink-soft); }
.ss-tile svg { width: 26px; height: 26px; }
.ss-tile[data-status="active"] { background: var(--ok-tint); border-color: var(--ok-line); color: var(--ok); }
.ss-tile[data-status="past_due"] { background: var(--warn-tint); border-color: var(--warn-line); color: var(--warn); }
.facts.ss-facts {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px 18px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.ss-facts .fact { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 0; }
.ss-facts .fact + .fact { border-top: 0; }
.ss-facts .fact .fact-label { font-size: 0.8rem; }
.ss-facts .fact .fact-value { font-size: 0.98rem; text-align: start; }

/* ---------------------------------------------------- Status hero + gauge -- */
.status-hero {
    display: flex; align-items: center; gap: 22px;
    background: var(--brand-grad-soft);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 18px;
}
.status-hero .sh-main { min-width: 0; flex: 1; }
.status-hero .sh-main .badge { margin-bottom: 12px; }
.status-hero .sh-headline { font-size: 1.28rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.status-hero .sh-sub { color: var(--ink-soft); font-size: 0.95rem; margin-top: 6px; }

/* Circular gauge (Opal-style) */
.gauge { position: relative; width: 128px; height: 128px; flex: none; }
.gauge > svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.gauge .gauge-track { fill: none; stroke: var(--gauge-track); stroke-width: 11; }
.gauge .gauge-fill {
    fill: none; stroke-width: 11; stroke-linecap: round;
    stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ);
    animation: gauge-fill 1.1s var(--ease-out) forwards;
}
@keyframes gauge-fill { to { stroke-dashoffset: var(--dashoff); } }
.gauge .gauge-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; gap: 1px;
}
.gauge .gauge-num { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.gauge .gauge-cap { font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); }
.gauge .gauge-emoji { width: 44px; height: 44px; }
.gauge[data-status="trial"] .gauge-fill { stroke: url(#gaugeBrand); }
.gauge[data-status="active"] .gauge-fill { stroke: var(--ok); }
.gauge[data-status="active"] .gauge-track { stroke: var(--gauge-track-ok); }
.gauge[data-status="past_due"] .gauge-fill { stroke: var(--warn); }
.gauge[data-status="past_due"] .gauge-track { stroke: var(--gauge-track-warn); }
.gauge[data-status="active"] .gauge-center svg,
.gauge[data-status="past_due"] .gauge-center svg { width: 40px; height: 40px; }
.gauge[data-status="active"] .gauge-center svg { color: var(--ok); }
.gauge[data-status="past_due"] .gauge-center svg { color: var(--warn); }

/* ------------------------------------------------------- Facts / stat rows -- */
.facts { display: grid; grid-template-columns: 1fr; gap: 2px; }
.fact {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 13px 2px;
}
.fact + .fact { border-top: 1px solid var(--line); }
.fact .fact-label { font-size: 0.92rem; color: var(--ink-soft); font-weight: 500; }
.fact .fact-value { font-size: 1.02rem; font-weight: 700; color: var(--ink); text-align: end; }
.fact .fact-value.muted { font-weight: 500; color: var(--ink-soft); }

/* ----------------------------------------------------------- Plan picker --- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 20px; }
.plan {
    position: relative; display: block; text-align: start; cursor: pointer;
    background: var(--surface); border: 2px solid var(--line-strong);
    border-radius: var(--r-md); padding: 20px 18px 54px;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease), background 0.18s;
}
.plan:hover { border-color: var(--brand-400); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.plan.sel { border-color: var(--brand); background: var(--brand-050); box-shadow: 0 0 0 4px var(--brand-glow); }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan .plan-name { font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; font-size: 0.98rem; }
.plan .plan-price { font-size: 1.85rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.plan .plan-period { display: block; font-size: 0.88rem; color: var(--ink-soft); font-weight: 500; margin-top: 2px; }
.plan .plan-note { margin-top: 8px; font-size: 0.85rem; color: var(--ink-soft); }
.plan .save-pill {
    position: absolute; inset-inline-end: 12px; top: -12px;
    background: var(--accent); color: #fff; font-size: 0.74rem; font-weight: 800;
    padding: 5px 12px; border-radius: var(--r-pill); box-shadow: 0 6px 14px -4px rgba(255, 122, 80, 0.6);
}
.plan .plan-check {
    position: absolute; inset-inline-start: 18px; bottom: 16px; width: 24px; height: 24px;
    border-radius: var(--r-pill); border: 2px solid var(--line-strong); display: grid; place-items: center;
    transition: background 0.18s, border-color 0.18s;
}
.plan.sel .plan-check { background: var(--brand); border-color: var(--brand); }
.plan .plan-check svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity 0.18s; }
.plan.sel .plan-check svg { opacity: 1; }

/* -------------------------------------------------------- Tranzila iframe -- */
.pay-wrap { margin-top: 10px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.trust-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-pill); padding: 7px 13px;
    font-size: 0.82rem; font-weight: 600; color: var(--ink-soft);
}
.trust-chip svg { width: 15px; height: 15px; color: var(--ok); flex: none; }
.secure-note {
    display: flex; align-items: center; gap: 10px;
    background: var(--brand-050); border: 1px solid var(--brand-100);
    border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 12px;
    color: var(--brand-700); font-size: 0.9rem; font-weight: 500;
}
.secure-note svg { width: 20px; height: 20px; flex: none; }
.iframe-shell {
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    overflow: hidden; background: var(--surface); min-height: 520px; box-shadow: var(--shadow-sm);
}
.iframe-shell iframe { width: 100%; height: 560px; border: 0; display: block; }
.pay-poll {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    color: var(--ink-soft); font-weight: 600; padding: 16px; margin-top: 12px;
    background: var(--surface-2); border-radius: var(--r-md);
}

/* --------------------------------------------------------- Billing history -- */
.history-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.history-table th, .history-table td { text-align: start; padding: 13px 10px; border-bottom: 1px solid var(--line); }
.history-table thead th { color: var(--ink-faint); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.history-table tbody tr:last-child td { border-bottom: 0; }
.history-table td { color: var(--ink-soft); }
.history-table td.amt { font-weight: 700; color: var(--ink); white-space: nowrap; }
.history-empty {
    color: var(--ink-faint); padding: 26px 2px; text-align: center; font-size: 0.95rem;
    background: var(--surface-2); border-radius: var(--r-md);
}
.pager { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.pager .btn { padding: 10px 20px; font-size: 0.92rem; }

/* -------------------------------------------------------- Danger / links --- */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.row-note { color: var(--ink-soft); font-size: 0.92rem; }
.state .row-actions { justify-content: center; margin-top: 24px; }
.checkout-note { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 12px; }
/* The login hero's quiet lines (the intent, "new to iDrive?"). */
.hero-new { font-size: 0.92rem; color: var(--ink-faint); margin-bottom: 14px; }
.subtle-link { color: var(--brand-700); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.subtle-link:hover { color: var(--brand); }

/* Links / buttons that end in a direction arrow (.icon-dir, mirrored in RTL — site-header.css). The
   arrow nudges toward the reading direction on hover. */
.link-arrow svg, .btn-arrow svg { width: 17px; height: 17px; flex: none; transition: transform 0.2s var(--ease); }
.link-arrow:hover svg, .btn-arrow:hover svg { transform: translateX(calc(3px * var(--icon-flip, 1))) scaleX(var(--icon-flip, 1)); }
.btn svg.icon-dir { width: 17px; height: 17px; }

.inline-err {
    background: var(--warn-tint); border: 1px solid var(--warn-line);
    border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 16px; color: var(--warn-ink); font-size: 0.92rem; font-weight: 500;
}

.mock-banner {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--mock-bg); border: 1px solid var(--mock-border); color: var(--mock-ink);
    border-radius: var(--r-md); padding: 10px 16px; margin-bottom: 16px;
    font-size: 0.86rem; font-weight: 700; text-align: center;
}

/* =========================================================== Login hero ===
   Copy + the phone, standing on the page itself (no card behind them) — the
   same open composition as the landing hero. */
.hero {
    display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 32px;
    padding: 24px 0 8px; position: relative;
}
.hero-copy { position: relative; z-index: 1; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 700; color: var(--brand-700);
    background: var(--brand-050); border: 1px solid var(--brand-100);
    padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: 18px;
}
.hero-eyebrow svg { width: 15px; height: 15px; }
.hero-copy h1 { margin-bottom: 12px; font-size: clamp(2rem, 5.4vw, 2.75rem); }
.hero-copy p { color: var(--ink-soft); font-size: 1.08rem; max-width: 42ch; text-wrap: pretty; }
.hero-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-copy .hero-new { margin-top: 12px; font-size: 0.9rem; color: var(--ink-faint); }
.hero-trust {
    margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px 20px;
    color: var(--ink-soft); font-size: 0.86rem; font-weight: 600;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 16px; height: 16px; color: var(--ok); }

/* The phone is the shared component (/assets/device.css). account.js nudges .device-scroll with the
   SCROLL position only — never the pointer. --dir leans it with the layout (RTL flips it). */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 540px; perspective: 1150px; z-index: 1; --dir: -1; }
html[dir="rtl"] .hero-visual { --dir: 1; }
.hero-visual .halo {
    position: absolute; width: min(360px, 100%); aspect-ratio: 1; border-radius: var(--r-pill);
    background: radial-gradient(circle, var(--halo, rgba(10, 124, 216, 0.24)), transparent 68%);
    filter: blur(12px);
}
.hero-visual .device { --device-w: 232px; }

/* ====================================================== Welcome hub ===
   The signed-in home (and, after a sign-up, its welcome variant): a headline
   and three equal cards (web app · mobile app · account & billing), each with
   a small illustrative visual drawn in CSS (no images but the app screenshot
   inside the phone). The visuals stand on the card itself — no inner box —
   over a soft glow; the browser and the phone rise from the bottom edge and
   fade out into the card. */
.welcome { padding: 18px 0 8px; }
.wl-head { text-align: center; max-width: 600px; margin: 0 auto 34px; }
.wl-head h1 { margin: 2px 0 12px; font-size: clamp(2rem, 5.4vw, 2.75rem); }
.wl-head p { color: var(--ink-soft); font-size: 1.08rem; max-width: 58ch; margin-inline: auto; text-wrap: balance; }
.wl-head .hero-eyebrow { margin-bottom: 14px; }
.wl-seal {
    position: relative; width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; background: var(--brand-grad); box-shadow: var(--shadow-brand);
    animation: seal-in 0.7s var(--ease-out) both;
}
.wl-seal svg { width: 34px; height: 34px; stroke-dasharray: 30; stroke-dashoffset: 30; animation: seal-check 0.5s 0.35s var(--ease-out) forwards; }
.wl-seal::before, .wl-seal::after {
    content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--brand-400);
    opacity: 0; animation: seal-ring 1.6s 0.3s var(--ease-out) both;
}
.wl-seal::after { inset: -22px; border-width: 1.5px; animation-delay: 0.5s; }
@keyframes seal-in { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes seal-check { to { stroke-dashoffset: 0; } }
@keyframes seal-ring { 0% { opacity: 0.55; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.15); } }

/* The home's subscription summary (account.js homeStatus): ONE panel — badge, headline and the next
   step on one side, the gauge on the other — not the status hero boxed inside a card. */
.home-status {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main gauge" "act gauge";
    align-items: center; column-gap: 32px; row-gap: 18px;
    background: var(--brand-grad-soft); border-color: var(--brand-100);
    padding: 26px 30px; margin-bottom: 22px;
}
.home-status .status-hero { display: contents; }
.home-status .sh-main { grid-area: main; }
.home-status .sh-headline { font-size: 1.4rem; }
.home-status .gauge { grid-area: gauge; }
.home-status .row-actions { grid-area: act; margin-top: 0; }
.home-status .pay-poll { grid-column: 1 / -1; margin: 0; background: transparent; }

.wl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wl-card {
    display: flex; flex-direction: column; gap: 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); padding: 12px 12px 18px;
    animation: card-in 0.5s var(--ease-out) both;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wl-card:nth-child(2) { animation-delay: 0.08s; }
.wl-card:nth-child(3) { animation-delay: 0.16s; }
.wl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.wl-body { padding: 0 8px; flex: 1; }
.wl-body h2 { margin-bottom: 6px; }
.wl-body p { color: var(--ink-soft); font-size: 0.95rem; }
.wl-card > .btn, .wl-stores { margin: 0 8px; width: calc(100% - 16px); }
.wl-stores { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wl-stores { flex-wrap: nowrap; }
.wl-stores .sh-store { flex: 1 1 0; min-width: 0; justify-content: center; height: 44px; padding: 0 8px; gap: 7px; }
.wl-stores .sh-store svg { width: 21px; height: 21px; }
.wl-stores .sh-store-txt b { font-size: 1rem; }

.wl-visual {
    position: relative; height: 176px; overflow: hidden;
    perspective: 900px;
}
.wl-visual::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(220px 130px at 50% 62%, var(--halo), transparent 72%);
}
.wl-visual-web, .wl-visual-phone {
    -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
}

/* Web app: a browser window drawing the app's layout. */
.wl-browser {
    position: absolute; left: 50%; top: 30px; width: 82%; height: 180px; margin-left: -41%;
    background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-md);
    border: 1px solid var(--line); overflow: hidden;
    transform: rotateX(14deg) rotateY(calc(var(--icon-flip, 1) * -8deg)); transform-origin: 50% 100%;
}
.wl-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; background: var(--surface-2); border-bottom: 1px solid var(--line); direction: ltr; }
.wl-bar i { width: 7px; height: 7px; border-radius: 50%; background: #FF5F57; }
.wl-bar i:nth-child(2) { background: #FEBC2E; }
.wl-bar i:nth-child(3) { background: #28C840; }
.wl-url { margin: 0 auto; font-size: 0.62rem; font-weight: 600; color: var(--ink-faint); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 12px; }
.wl-app { display: flex; height: 100%; }
.wl-side { width: 26%; padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; border-inline-end: 1px solid var(--line); }
.wl-side b { height: 9px; width: 70%; border-radius: 4px; background: var(--brand); opacity: 0.9; margin-bottom: 4px; }
.wl-side span { height: 6px; border-radius: 3px; background: var(--neutral-chip); }
.wl-side span:nth-child(2) { background: var(--brand-100); }
.wl-main { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.wl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.wl-tiles span { height: 34px; border-radius: 7px; background: var(--brand-050); border: 1px solid var(--brand-100); }
.wl-tiles span:nth-child(2) { background: var(--ok-tint); border-color: var(--ok-line); }
.wl-tiles span:nth-child(3) { background: color-mix(in srgb, #8b6cf0 14%, transparent); border-color: color-mix(in srgb, #8b6cf0 26%, transparent); }
.wl-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wl-cal span { height: 30px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); }
.wl-cal span:nth-child(2), .wl-cal span:nth-child(5) { background: var(--brand-050); border-color: var(--brand-100); }
.wl-cal span:nth-child(2)::after, .wl-cal span:nth-child(5)::after { content: ""; display: block; margin: 5px 3px 0; height: 8px; border-radius: 3px; background: var(--brand); opacity: 0.75; }

/* Mobile app: the shared phone (/assets/device.css), smaller, rising from the card's base. */
.wl-phone-stage { position: absolute; inset: 0; display: flex; justify-content: center; perspective: 900px; --dir: -1; }
html[dir="rtl"] .wl-phone-stage { --dir: 1; }
.wl-device { --device-w: 132px; margin-top: 16px; }

/* Account & billing: a payment card behind a paid receipt. A physical object, so not mirrored in RTL. */
.wl-billing { position: absolute; inset: 0; direction: ltr; }
.wl-paycard {
    position: absolute; width: 150px; height: 94px; top: 34px; inset-inline-start: 50%;
    margin-inline-start: -112px; border-radius: 12px; background: var(--brand-grad);
    box-shadow: var(--shadow-brand); transform: rotate(-8deg);
    overflow: hidden;
}
.wl-paycard::after { content: ""; position: absolute; inset: 0; background: radial-gradient(160px 80px at 100% 0%, rgba(255, 255, 255, 0.28), transparent 60%); }
.wl-chip { position: absolute; top: 18px; inset-inline-start: 16px; width: 24px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, #f3d77a, #c9a645); }
.wl-digits { position: absolute; bottom: 14px; left: 16px; color: rgba(255, 255, 255, 0.92); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; }
.wl-receipt {
    position: absolute; width: 112px; top: 22px; inset-inline-start: 50%; margin-inline-start: -6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-md); padding: 26px 12px 12px;
    display: flex; flex-direction: column; gap: 7px; transform: rotate(5deg);
}
.wl-receipt > span { height: 6px; border-radius: 3px; background: var(--neutral-chip); }
.wl-receipt > span.short { width: 60%; }
.wl-receipt-ok {
    position: absolute; top: -12px; inset-inline-end: 12px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; background: var(--ok); color: #fff; box-shadow: 0 6px 14px -6px var(--ok);
}
.wl-receipt-ok svg { width: 16px; height: 16px; }
.wl-receipt-total { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 9px; border-top: 1px dashed var(--line-strong); }
.wl-receipt-total span { width: 36%; height: 6px; border-radius: 3px; background: var(--neutral-chip); }
.wl-receipt-total b { width: 32%; height: 9px; border-radius: 4px; background: var(--ink); opacity: 0.8; }

@media (max-width: 900px) {
    .wl-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

/* ===================================================== User management ===
   /account/#admin (account-admin.js), iDrive admins only: a search card and
   the results on one side, the selected user's panel (account, access, the
   grant form, the grant history) on the other. Below 960px the panel takes
   the screen and the list waits behind "Back to results". */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.badge.granted, .badge.admin { background: var(--ok-tint); color: var(--ok); }

.admin-view { padding: 10px 0 8px; }
.admin-head { margin-bottom: 22px; }
.admin-head h1 { margin: 2px 0 8px; }
.admin-head p { color: var(--ink-soft); max-width: 60ch; }
.admin-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-layout.has-panel .admin-list { display: none; }
@media (min-width: 960px) {
    .admin-layout.has-panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    .admin-layout.has-panel .admin-list { display: block; }
    .admin-panel { position: sticky; top: calc(var(--site-header-h) + 16px); }
    .admin-layout.has-panel .admin-back { display: none; }
}

.admin-search { display: flex; gap: 10px; align-items: center; padding: 12px; }
.search-field {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    background: var(--surface-2); border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
    padding: 0 16px; transition: border-color 0.18s, box-shadow 0.18s;
}
.search-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
.search-field svg { width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.search-field input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink);
    font: inherit; font-size: 1rem; padding: 12px 0;
}
.search-field input::placeholder { color: var(--ink-faint); }
.admin-count { color: var(--ink-faint); font-size: 0.86rem; font-weight: 600; margin: 4px 4px 10px; }

.au-list { list-style: none; display: grid; gap: 10px; }
.au-row {
    width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "avatar main" "avatar tags";
    column-gap: 14px; row-gap: 8px; align-items: center; text-align: start; cursor: pointer;
    font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-xs); padding: 14px 16px;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.au-row:hover { border-color: var(--brand-400); box-shadow: var(--shadow-sm); }
.au-row:focus-visible { outline: 3px solid var(--brand-glow); outline-offset: 2px; }
.au-row.is-sel { border-color: var(--brand); background: var(--brand-050); }
.au-avatar {
    grid-area: avatar; width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center;
    background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 1rem; flex: none;
}
.au-avatar-lg { width: 52px; height: 52px; font-size: 1.25rem; }
.au-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.au-main b { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.au-main small { color: var(--ink-soft); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 6px; }
/* The list on its own (no panel beside it): the tags move up beside the name. */
@media (min-width: 600px) {
    .admin-layout:not(.has-panel) .au-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "avatar main tags"; }
    .admin-layout:not(.has-panel) .au-tags { justify-content: flex-end; max-width: 50%; }
}

.tag {
    display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
    font-size: 0.76rem; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--neutral-chip); color: var(--ink-soft); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.tag-lg { font-size: 0.86rem; padding: 6px 13px; }
.tag-subscription, .tag-g-active { background: var(--ok-tint); color: var(--ok); }
.tag-grant, .tag-admin, .tag-g-scheduled { background: var(--brand-050); color: var(--brand-700); }
.tag-read_only { background: var(--warn-tint); color: var(--warn-ink); }
.tag-admin-role { background: var(--ink); color: var(--surface); font-size: 0.7rem; padding: 3px 8px; }

.admin-back { background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.95rem; padding: 4px 2px 14px; }
.admin-back svg { width: 17px; height: 17px; }
.ok-note {
    background: var(--ok-tint); border: 1px solid var(--ok-line); color: var(--ok);
    border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 16px; font-weight: 600; font-size: 0.93rem;
}
.au-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.au-who { min-width: 0; flex: 1; }
.au-who h2 { margin: 0 0 2px; overflow-wrap: anywhere; }
.au-who span { color: var(--ink-soft); font-size: 0.92rem; overflow-wrap: anywhere; }
.au-access { margin-bottom: 6px; }
.card-sub { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 16px; }

.grant-form { display: grid; gap: 16px; }
.chips { border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
    display: inline-flex; align-items: center; padding: 9px 15px; border-radius: var(--r-pill);
    border: 1.5px solid var(--line-strong); background: var(--surface); font-weight: 700; font-size: 0.9rem;
    transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.chip:hover span { border-color: var(--brand-400); }
.chip.sel span { border-color: var(--brand); background: var(--brand-050); color: var(--brand-700); }
.chip input:focus-visible + span { outline: 3px solid var(--brand-glow); outline-offset: 2px; }
.grant-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); }
.field input, .field textarea {
    width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface-2);
    border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); padding: 11px 14px;
    transition: border-color 0.18s, box-shadow 0.18s; color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field input { color-scheme: dark; } }
:root[data-theme="dark"] .field input { color-scheme: dark; }
.field textarea { resize: vertical; min-height: 64px; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
html[dir="rtl"] .field input[type="date"] { text-align: end; }
.grant-form .checkout-note { margin: 0; }
.grant-form .btn { justify-self: start; }

.gh-list { list-style: none; display: grid; gap: 10px; }
.gh-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 4px; }
.gh-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gh-period { font-weight: 700; flex: 1; min-width: 0; }
.gh-reason { color: var(--ink); font-size: 0.93rem; overflow-wrap: anywhere; }
.gh-item small { color: var(--ink-faint); font-size: 0.8rem; overflow-wrap: anywhere; }
.btn-sm { padding: 8px 14px; font-size: 0.86rem; }

/* ------------------------------------------------------------ Responsive --- */
@media (max-width: 760px) {
    .hero { grid-template-columns: 1fr; gap: 8px; padding: 16px 0 8px; text-align: center; }
    .hero-copy p { margin-inline: auto; }
    .hero-eyebrow, .hero-trust, .hero-cta { justify-content: center; }
    .hero-visual { min-height: 470px; }
    .hero-visual .device { --device-w: 206px; }
    /* The home's hero on a phone: the ring beside the text, not above it, so the cards below show. */
    .home-status { grid-template-areas: "main gauge" "act act"; column-gap: 16px; row-gap: 16px; padding: 20px 18px; }
    .home-status .gauge { width: 96px; height: 96px; align-self: start; }
    .home-status .gauge-num { font-size: 1.65rem; }
    .home-status .gauge .gauge-center svg { width: 32px; height: 32px; }
    .home-status .sh-headline { font-size: 1.2rem; }
    .home-status .sh-sub { font-size: 0.92rem; }
    .home-status .row-actions .btn { width: 100%; }
}
@media (max-width: 600px) {
    .content.account { margin-top: 18px; }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; }
    .wl-visual { height: 164px; }
    .plans { grid-template-columns: 1fr; }
    .plan { padding-bottom: 20px; }
    .plan .plan-check { position: static; margin-top: 14px; }
    .card { padding: 20px 18px; }

    /* Billing history → stacked cards (no cramped 4-col table) */
    .history-table, .history-table tbody, .history-table tr, .history-table td { display: block; width: 100%; }
    .history-table thead { display: none; }
    .history-table tr {
        background: var(--surface-2); border: 1px solid var(--line);
        border-radius: var(--r-md); padding: 6px 14px; margin-bottom: 10px;
    }
    .history-table td { border: 0 !important; padding: 9px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    .history-table td + td { border-top: 1px solid var(--line) !important; }
    .history-table td::before {
        content: attr(data-label); color: var(--ink-faint); font-weight: 600;
        font-size: 0.82rem; flex: none;
    }
    .history-table td.amt { font-size: 1.05rem; }
}
@media (max-width: 380px) {
    .content.account { padding-inline: 14px; }
    .home-status .gauge { width: 84px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    .gauge .gauge-fill { stroke-dashoffset: var(--dashoff); }
}

/* ============================================================== Dark mode ===
   The shared token swap is in tokens.css; only the portal's own tokens here.
   Two guards: the OS setting applies unless the user chose light; an explicit
   data-theme="dark" always wins. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gauge-track: rgba(142, 206, 255, 0.16); --gauge-track-ok: rgba(67, 200, 146, 0.18); --gauge-track-warn: rgba(231, 164, 80, 0.2);
        --mock-bg: rgba(236, 214, 122, 0.14); --mock-border: rgba(236, 214, 122, 0.3); --mock-ink: #E7CE7A;
    }
}
:root[data-theme="dark"] {
    --gauge-track: rgba(142, 206, 255, 0.16); --gauge-track-ok: rgba(67, 200, 146, 0.18); --gauge-track-warn: rgba(231, 164, 80, 0.2);
    --mock-bg: rgba(236, 214, 122, 0.14); --mock-border: rgba(236, 214, 122, 0.3); --mock-ink: #E7CE7A;
}

/* ------------------------------------------------- Dialog (uiDialog) ---- */
.ui-dialog {
    margin: auto; border: 1px solid var(--line); border-radius: var(--r-lg, 20px); padding: 24px 24px 18px;
    width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow-lg, 0 24px 60px -12px rgba(0, 0, 0, 0.35));
}
.ui-dialog::backdrop { background: rgba(8, 16, 28, 0.5); backdrop-filter: blur(2px); }
.ui-dialog h2 { font-size: 1.2rem; margin: 0 0 8px; }
.ui-dialog p { color: var(--ink-soft); line-height: 1.55; margin: 0 0 20px; }
.ui-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 480px) {
    .ui-dialog-actions { flex-direction: column-reverse; }
    .ui-dialog-actions .btn { width: 100%; }
}
.btn-danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger-solid:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, #000); text-decoration: none; }

/* -------------------------------------------------------- Danger zone ---- */
.card.danger-zone { border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); box-shadow: none; }
.danger-eyebrow {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px;
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--danger);
}
.danger-eyebrow svg { width: 16px; height: 16px; }