/* Lunar Looters — hand-written custom CSS.
   Split out of index.html on 2026-09-03 as the first step of a "give this game
   room to grow" pass (see the Claude Project's README.md Technology Plan): the
   compiled Tailwind utility classes already lived in their own file
   (tailwind.css); this is the small amount of genuinely custom CSS that used
   to sit in a <style> block at the top of index.html. Purely a file-
   organization move — no rule below changed, only where it lives. */

/* overflow-x on both html and body (not just body's shorthand overflow:hidden):
   iOS Safari can still expand its layout viewport to fit horizontally-overflowing
   content even with a device-width meta viewport, which shrinks/shifts everything
   on screen and was a likely contributor to top UI buttons landing off-screen on
   iPad. Belt-and-suspenders alongside the flex-wrap fix on the top HUD row. */
html { overflow-x: hidden; max-width: 100vw; }
body { margin: 0; overflow: hidden; overflow-x: hidden; max-width: 100vw; background-color: #050505; touch-action: none; user-select: none; -webkit-user-select: none; }
canvas { display: block; }

/* A full-screen page is open: hide the 3D driving view behind it (js/page-manager.js). */
body.ll-page-open #gameCanvas { visibility: hidden; }

/* Mission Control on a touchscreen held upright (2026-10-24): no lunar window (and so no
   Go-to search or map layers); the left and right button columns stack into one full-width
   column. Landscape and desktop are untouched. The grid uses inline styles, hence !important. */
@media (orientation: portrait) and (pointer: coarse) {
    .mc-grid { grid-template-columns: minmax(0,1fr) auto !important; }
    .mc-grid > .mc-sep { display: none !important; }
    .mc-grid > .mc-title { grid-column: 1 !important; grid-row: 1 !important; }
    .mc-grid > .mc-clock { grid-column: 1 / -1 !important; grid-row: 2 !important; justify-self: stretch !important; }
    .mc-grid > .mc-center { display: none !important; }
    .mc-grid > .mc-left { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; }
    .mc-grid > .mc-right { grid-column: 1 / -1 !important; grid-row: 4 !important; width: 100% !important; }
    .mc-left > *, .mc-right > *, .mc-left > * > *:not(button):not(input):not(span) { width: 100% !important; max-width: none !important; }
}

/* Custom scrollbar for panels */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

/* 2026-09-21: kill Chrome/Safari's native autofill styling on form inputs. Every
   text input in this app already sets text-white via Tailwind (see index.html's
   #authFirstName/#authLastName/etc. and the rest of the New Account form), but
   the New Account form's address-style fields carry standard autocomplete
   tokens (given-name, family-name, address-line1, address-level2, postal-code,
   country-name, ...) so the browser's own address-autofill can kick in on them -
   and WebKit/Blink autofill overrides text/background color with its own
   near-black-on-pale-yellow styling via -webkit-text-fill-color, at a
   specificity plain `color`/`background-color` rules can't beat. That's why
   those fields could look dark-on-light instead of the white-on-dark every
   other field (like #authEmail, which has no matching autocomplete token and
   so never triggers this) already had. -webkit-box-shadow's inset trick below
   repaints the autofilled background back to roughly the same bg-black/40 the
   field already uses instead of the browser's yellow, and the huge transition
   delay stops Chrome's own background flash from ever becoming visible. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4) inset;
    caret-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
}

/* Mods (js/mods.js) - HUD widget strip. Hand-written rather than Tailwind so mod-rendered
   text never depends on a Tailwind rebuild. Widgets are host-rendered via textContent only. */
#modHudWidgets {
    position: fixed;
    left: 50%;
    bottom: 0.75rem;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    max-width: 90vw;
    pointer-events: none;
}
#modHudWidgets.hidden { display: none; }
.mod-hud-widget {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    background: rgba(2, 6, 23, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.25);
    font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #e2e8f0;
    white-space: nowrap;
}
.mod-hud-credit { font-size: 9px; font-weight: 400; opacity: 0.55; }

/* Mods tutorial (#modsTutorialPage): tabs, copyable code blocks and cheat-sheet tables.
   Kept here as plain CSS (not Tailwind utilities) so a tab's state is driven purely by aria-selected. */
.mods-tut-tab { background: rgba(31, 41, 55, 0.4); color: #9ca3af; border-color: #374151; }
.mods-tut-tab:hover { background: rgba(31, 41, 55, 0.9); color: #fff; }
.mods-tut-tab[aria-selected="true"] { background: rgba(217, 70, 239, 0.22); color: #f5d0fe; border-color: rgba(217, 70, 239, 0.55); }
.mods-tut-tab:focus-visible, .mods-tut-copy:focus-visible, .mods-tut-code pre:focus-visible, #modsTutorialPage [role="tabpanel"]:focus-visible { outline: 2px solid #e879f9; outline-offset: 2px; }
.mods-tut-code { border: 1px solid #374151; border-radius: 0.5rem; background: rgba(0, 0, 0, 0.45); overflow: hidden; min-width: 0; }
.mods-tut-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.75rem; background: rgba(31, 41, 55, 0.7); border-bottom: 1px solid #374151; }
.mods-tut-code pre { margin: 0; padding: 0.75rem; overflow-x: auto; white-space: pre; tab-size: 2; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; color: #e5e7eb; max-width: 100%; }
.mods-tut-copy { font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 0.375rem; color: #f5d0fe; background: rgba(217, 70, 239, 0.2); border: 1px solid rgba(217, 70, 239, 0.45); min-width: 4.5rem; }
.mods-tut-copy:hover { background: rgba(217, 70, 239, 0.4); }
.mods-tut-table-wrap { overflow-x: auto; border: 1px solid #374151; border-radius: 0.5rem; }
.mods-tut-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
.mods-tut-table th { padding: 0.4rem 0.6rem; background: rgba(31, 41, 55, 0.7); color: #f0abfc; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.mods-tut-table td { padding: 0.4rem 0.6rem; border-top: 1px solid #1f2937; vertical-align: top; }
.mods-tut-table td:first-child { font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #e5e7eb; }
.mods-tut-table td:first-child { white-space: nowrap; }
.mods-tut-needs td:first-child { white-space: normal; overflow-wrap: break-word; min-width: 11rem; }
.mods-tut-needs td:last-child { white-space: nowrap; color: #d1d5db; }
.mods-tut-needs td:nth-child(2) { min-width: 14rem; }

/* Profile pictures (js/avatar.js, js/avatar-crop.js, js/avatar-report.js, js/my-profile.js).
   Plain CSS (not Tailwind utilities) so no Tailwind rebuild is needed. Sizes are explicit so
   a slow or failed image never shifts a row; a failed image is swapped for the emblem. */
.ll-avatar { display: inline-block; flex: none; border-radius: 9999px; object-fit: cover; background: #1e293b; border: 1px solid rgba(148, 163, 184, 0.35); }
.ll-avatar-xs { width: 16px; height: 16px; }
.ll-avatar-sm { width: 24px; height: 24px; }
.ll-avatar-md { width: 28px; height: 28px; }
.ll-avatar-lg { width: 40px; height: 40px; }
.ll-avatar-xl { width: 96px; height: 96px; }
.ll-avatar-seller { width: 28px; height: 28px; }
@media (min-width: 1024px) { .ll-avatar-seller { width: 40px; height: 40px; } }
.ll-avatar-initial { display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 40px; color: #94a3b8; }

.ll-avatar-section { border: 1px solid rgba(16, 185, 129, 0.25); background: rgba(0, 0, 0, 0.25); border-radius: 0.75rem; padding: 0.75rem; }
.ll-avatar-row { display: flex; align-items: center; gap: 1rem; }
.ll-avatar-preview { width: 96px; height: 96px; flex: none; display: flex; align-items: center; justify-content: center; }
.ll-avatar-actions { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; flex: 1; }
.ll-avatar-state { margin-top: 0.6rem; font-size: 11px; line-height: 1.45; color: #cbd5e1; overflow-wrap: anywhere; }
.ll-avatar-msg { margin-top: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 0.5rem; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; border: 1px solid rgba(148, 163, 184, 0.3); color: #cbd5e1; }
.ll-avatar-msg[data-kind="error"] { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }
.ll-avatar-msg[data-kind="success"] { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.4); color: #6ee7b7; }
.ll-avatar-rules { margin-top: 0.6rem; font-size: 10px; line-height: 1.45; color: #94a3b8; overflow-wrap: anywhere; }
/* Mailing-address notes (sign-up "optional" line, and the My Profile note for the 13 to 17 group). */
.ll-address-note { margin: 0.25rem 0 0.75rem; font-size: 10px; line-height: 1.45; color: #94a3b8; overflow-wrap: anywhere; }
.ll-address-note.hidden { display: none; }

.ll-btn { font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.55rem 0.75rem; border-radius: 0.5rem; color: #e2e8f0; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(148, 163, 184, 0.4); cursor: pointer; }
.ll-btn:hover:not(:disabled) { border-color: #e2e8f0; }
.ll-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ll-btn:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; }
.ll-btn-primary { color: #a7f3d0; background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.5); }
.ll-btn-primary:hover:not(:disabled) { background: rgba(16, 185, 129, 0.35); border-color: #34d399; }
.ll-btn-danger { color: #fca5a5; border-color: rgba(239, 68, 68, 0.45); }

.ll-crop.hidden { display: none; }
.ll-crop { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; }
.ll-crop > div:first-child { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.ll-crop-viewport { position: relative; width: min(100%, 256px); aspect-ratio: 1 / 1; border-radius: 0.5rem; overflow: hidden; background: #0f172a; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: 2px; }
.ll-crop-viewport:focus-visible { outline: 2px solid #34d399; }
.ll-crop-dragging { cursor: grabbing; }
.ll-crop-canvas { display: block; width: 100%; height: 100%; }
.ll-crop-mask { position: absolute; inset: 0; border-radius: 9999px; box-shadow: 0 0 0 999px rgba(2, 6, 23, 0.6); border: 2px solid rgba(52, 211, 153, 0.9); pointer-events: none; }
.ll-crop-zoomrow { display: flex; align-items: center; gap: 0.6rem; width: min(100%, 256px); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.ll-crop-zoom { flex: 1; min-width: 0; accent-color: #34d399; }
.ll-crop-buttons { display: flex; gap: 0.5rem; width: 100%; justify-content: flex-end; }

/* Name + picture cells in lists (leaderboard, players online, chat). */
.ll-chat-avatar { vertical-align: -4px; margin-right: 4px; }

/* Report picture: link-style control next to another player's picture, and its dialog. */
.ll-report-link { font-size: 10px; font-weight: 700; color: #94a3b8; background: transparent; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 0.375rem; padding: 0.15rem 0.45rem; cursor: pointer; pointer-events: auto; }
.ll-report-link:hover { color: #fca5a5; border-color: rgba(239, 68, 68, 0.5); }
.ll-report-link:focus-visible { outline: 2px solid #34d399; outline-offset: 1px; }
.ll-report-link-compact { min-width: 24px; min-height: 24px; padding: 0 0.3rem; line-height: 1; }
.ll-report-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.85); pointer-events: auto; }
.ll-report-overlay.hidden { display: none; }
.ll-report-box { width: 100%; max-width: 24rem; max-height: 95vh; overflow-y: auto; background: #0f172a; border: 2px solid rgba(239, 68, 68, 0.45); border-radius: 1rem; padding: 1.25rem; color: #e2e8f0; display: flex; flex-direction: column; gap: 0.75rem; }
.ll-report-title { margin: 0; font-size: 15px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #fca5a5; }
.ll-report-intro { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.ll-report-reasons { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ll-report-legend { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.25rem; padding: 0; }
.ll-report-reason { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 12px; line-height: 1.35; cursor: pointer; }
.ll-report-reason input { margin-top: 2px; accent-color: #ef4444; }
.ll-report-note { margin: 0; font-size: 10px; line-height: 1.4; color: #94a3b8; }
.ll-report-result { margin: 0; padding: 0.45rem 0.6rem; border-radius: 0.5rem; font-size: 12px; line-height: 1.4; border: 1px solid rgba(148, 163, 184, 0.3); }
.ll-report-result.hidden { display: none; }
.ll-report-result[data-kind="error"] { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }
.ll-report-result[data-kind="success"] { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.4); color: #6ee7b7; }
.ll-report-buttons { display: flex; gap: 0.5rem; justify-content: flex-end; }
.ll-report-btn { font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.9rem; border-radius: 0.5rem; color: #e2e8f0; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(148, 163, 184, 0.4); cursor: pointer; }
.ll-report-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ll-report-btn:focus-visible { outline: 2px solid #34d399; outline-offset: 2px; }
.ll-report-btn.hidden { display: none; }
.ll-report-send { color: #fecaca; background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.55); }

/* Legal / compliance (2026-10-07): age + Terms consent checkbox, the profile Terms gate, links to the static
   legal pages (terms.html, privacy.html, legal.html) and the extra report reasons. Plain CSS so no Tailwind
   rebuild is needed. The static pages themselves use legal.css. */
.ll-consent { display: flex; flex-direction: column; gap: 0.35rem; }
.ll-consent-label { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 12px; line-height: 1.45; color: #cbd5e1; cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 400; }
.ll-consent-label input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: #22d3ee; cursor: pointer; }
.ll-consent-label input[type="checkbox"]:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.ll-consent-label input[type="checkbox"][aria-invalid="true"] { outline: 2px solid #f87171; outline-offset: 2px; }
.ll-consent-label a, .ll-avatar-rules a, .ll-report-legal a, .ll-legal-links a { color: #67e8f9; text-decoration: underline; text-underline-offset: 2px; pointer-events: auto; }
.ll-consent-label a:hover, .ll-avatar-rules a:hover, .ll-report-legal a:hover, .ll-legal-links a:hover { color: #a5f3fc; }
.ll-consent-label a:focus-visible, .ll-avatar-rules a:focus-visible, .ll-report-legal a:focus-visible, .ll-legal-links a:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; border-radius: 2px; }
.ll-consent-error { margin: 0; padding: 0.4rem 0.6rem; border-radius: 0.5rem; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.4); color: #fca5a5; }
.ll-consent-error.hidden { display: none; }
.ll-legal-links { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1rem; font-size: 11px; line-height: 1.4; }
.ll-legal-links-page { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(31, 41, 55, 0.9); justify-content: flex-start; }
.ll-terms-block { margin-top: 0.75rem; padding: 0.7rem; border-radius: 0.6rem; border: 1px solid rgba(34, 211, 238, 0.4); background: rgba(6, 182, 212, 0.08); display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.ll-terms-block.hidden { display: none; }
.ll-terms-title { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 0.04em; color: #a5f3fc; }
.ll-terms-block .ll-consent-error { align-self: stretch; }
.ll-terms-block .ll-consent, .ll-terms-block .ll-age { align-self: stretch; }
.ll-consent.hidden, .ll-age.hidden, .ll-consent-label.hidden { display: none; }

/* Neutral age screen (js/age-gate.js; sign-up in #authModal, existing accounts in the profile terms gate). */
.ll-age { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.85rem; border-radius: 0.75rem; border: 1px solid rgba(34, 211, 238, 0.35); background: rgba(6, 182, 212, 0.07); }
.ll-age-title { margin: 0; font-size: 14px; font-weight: 900; letter-spacing: 0.04em; color: #a5f3fc; }
.ll-age-help { margin: 0; font-size: 12px; line-height: 1.5; color: #cbd5e1; overflow-wrap: anywhere; }
.ll-age-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; }
.ll-age-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ll-age-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.ll-age-select { width: 100%; min-width: 0; padding: 0.5rem 0.6rem; font-size: 14px; color: #fff; background: rgba(0, 0, 0, 0.45); border: 1px solid #1f2937; border-radius: 0.5rem; }
.ll-age-select:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; border-color: #06b6d4; }
.ll-age-select:invalid, .ll-age-select option[value=""] { color: #94a3b8; }
.ll-age-select option { color: #fff; background: #0f172a; }
.ll-age-compact { padding: 0.6rem; background: rgba(0, 0, 0, 0.2); }
.ll-age-compact .ll-age-help { font-size: 11px; }
.ll-age-blocked { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.08); }
.ll-age-blocked-text { margin: 0; font-size: 14px; line-height: 1.5; color: #fde68a; text-align: center; overflow-wrap: anywhere; }
.ll-age-notice { margin: 0; padding: 0.5rem 0.65rem; border-radius: 0.5rem; font-size: 11px; line-height: 1.45; color: #fde68a; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.4); overflow-wrap: anywhere; }
.ll-avatar-tip { margin-top: 0.6rem; padding: 0.45rem 0.6rem; font-size: 11px; line-height: 1.45; color: #fde68a; background: rgba(251, 191, 36, 0.08); border-left: 3px solid #fbbf24; border-radius: 0.25rem; overflow-wrap: anywhere; }
.ll-avatar-tip.hidden { display: none; }
.ll-report-reason-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ll-report-help { font-size: 10px; line-height: 1.4; color: #94a3b8; overflow-wrap: anywhere; }
.ll-report-legal { margin: 0; font-size: 11px; }
.ll-report-legal.hidden { display: none; }

/* My Profile > Email (2026-10-28, js/email-settings.js) */
.ll-email { border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 0.75rem; padding: 0.75rem; background: rgba(0, 0, 0, 0.25); }
.ll-email-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ll-email-address { color: #f1f5f9; font-size: 0.875rem; overflow-wrap: anywhere; }
.ll-email-chip { font-size: 10px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; }
.ll-email-chip[data-state="ok"] { color: #a7f3d0; background: rgba(16, 185, 129, 0.18); border: 1px solid rgba(16, 185, 129, 0.45); }
.ll-email-chip[data-state="warn"] { color: #fde68a; background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.45); }
.ll-email-verify { margin-top: 0.6rem; font-size: 0.8rem; color: #cbd5e1; }
.ll-email-verify p { margin: 0 0 0.5rem; }
.ll-email-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ll-email-switches { margin-top: 0.7rem; display: grid; gap: 0.45rem; }
.ll-email-switches.ll-email-dim { opacity: 0.6; }
.ll-email-switch { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.8rem; color: #94a3b8; cursor: pointer; }
.ll-email-switch input { margin-top: 0.15rem; width: 1rem; height: 1rem; accent-color: #10b981; flex-shrink: 0; }
.ll-email-switch strong { display: block; color: #e2e8f0; font-size: 0.85rem; }
.ll-email-msg { margin: 0.6rem 0 0; font-size: 0.78rem; color: #a7f3d0; }
.ll-email-msg[data-kind="error"] { color: #fca5a5; }

/* Sign-up email verification (2026-10-29, js/signup-verify.js) */
.ll-verify { text-align: center; padding: 0.5rem 0 0.25rem; }
.ll-verify-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 0.5rem; }
.ll-verify-title { font-size: 1.1rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #22d3ee; margin: 0 0 0.6rem; }
.ll-verify-text { font-size: 0.85rem; color: #cbd5e1; margin: 0 0 1rem; overflow-wrap: anywhere; }
.ll-verify-text strong { color: #f1f5f9; }
.ll-verify-main { width: 100%; padding: 0.75rem; font-size: 12px; }
.ll-verify-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.ll-verify-row .ll-btn { flex: 1; }
.ll-verify-msg { margin: 0.8rem 0 0; font-size: 0.8rem; color: #a7f3d0; }
.ll-verify-msg[data-kind="error"] { color: #fca5a5; }
.ll-verify-msg[data-kind="info"] { color: #fde68a; }
.ll-verify-hint { margin: 0.9rem 0 0; font-size: 0.7rem; color: #64748b; }