/* LEKANDO design system — single source of tokens. Logical properties for RTL/LTR. */
:root {
  --bg: #FFFFFF; --surface: #F4F7F8; --surface-2: #EAF0F1; --text: #10272C; --muted: #4A5F64;
  --primary: #0C3B40; --primary-hover: #082C30; --on-primary: #FFFFFF;
  --accent: #087F86; --accent-text: #066970; --gold: #B78A44; --gold-text: #7C5A22;
  --border: #D9E2E5; --focus: #087F86;
  --ok: #1B6E3A; --ok-bg: #E4F4EA; --warn: #7A4B00; --warn-bg: #FFF1D6; --err: #A12626; --err-bg: #FDE8E8; --info-bg: #E3F2F3;
  --radius: 16px; --radius-sm: 10px; --shadow: 0 2px 8px rgba(12, 59, 64, .08);
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --maxw: 1180px; --gutter: clamp(16px, 4vw, 32px);
  --t-fast: 150ms; --t-med: 210ms;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #09171C; --surface: #10262D; --surface-2: #163239; --text: #EDF5F5; --muted: #A9BFC2;
  --primary: #3FC1C8; --primary-hover: #66D3D8; --on-primary: #06181C;
  --accent: #3FC1C8; --accent-text: #6FD6DB; --gold: #D6B06F; --gold-text: #E2C48F;
  --border: #25444B; --focus: #6FD6DB;
  --ok: #7BD89A; --ok-bg: #12301F; --warn: #F2C46B; --warn-bg: #332709; --err: #F59C9C; --err-bg: #3A1515; --info-bg: #123036;
  --shadow: 0 2px 10px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09171C; --surface: #10262D; --surface-2: #163239; --text: #EDF5F5; --muted: #A9BFC2;
    --primary: #3FC1C8; --primary-hover: #66D3D8; --on-primary: #06181C;
    --accent: #3FC1C8; --accent-text: #6FD6DB; --gold: #D6B06F; --gold-text: #E2C48F;
    --border: #25444B; --focus: #6FD6DB;
    --ok: #7BD89A; --ok-bg: #12301F; --warn: #F2C46B; --warn-bg: #332709; --err: #F59C9C; --err-bg: #3A1515; --info-bg: #123036;
    --shadow: 0 2px 10px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font); overflow-wrap: anywhere; }
img, svg, canvas, video { max-width: 100%; height: auto; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--primary); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--primary); color: var(--on-primary); padding: 10px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 8px; }
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.stack > * + * { margin-top: 1rem; }
[hidden] { display: none !important; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.hdr { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex-shrink: 1; min-width: 0; }
.brand img { height: 34px; width: auto; flex-shrink: 0; }
.brand .brand-name { font-weight: 700; letter-spacing: .02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { display: flex; gap: 4px; margin-inline-start: 12px; }
.nav a { padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--text); transition: background var(--t-fast); }
.nav a:hover, .nav a[aria-current="page"] { background: var(--surface); }
.hdr-tools { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-shrink: 0; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 12px; cursor: pointer; text-decoration: none; font: inherit; }
.icon-btn:hover { background: var(--surface); }
.menu-btn { display: none; }
@media (max-width: 860px) {
  .nav { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px var(--gutter) 16px; margin: 0; }
  .nav.open { display: flex; }
  .nav a { padding: 12px; }
  .menu-btn { display: inline-flex; }
  .hdr-tools .hide-sm { display: none; }
}
.ticker { background: var(--primary); color: var(--on-primary); font-size: .9rem; overflow: hidden; white-space: nowrap; }
.ticker a { color: inherit; }
.ticker-track { display: inline-block; padding: 6px 0; animation: ticker 40s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-track span { margin-inline: 24px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .ticker-track { animation-name: ticker-rtl; }
@keyframes ticker-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 14px; border: 1px solid transparent; font: 600 1rem/1.2 var(--font); cursor: pointer; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-secondary { background: var(--bg); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--text); }
.btn-danger { background: var(--err); color: #fff; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: .9rem; border-radius: 10px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.btn .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(40px, 7vw, 88px) clamp(28px, 5vw, 56px); background:
  radial-gradient(1200px 400px at 85% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
  linear-gradient(180deg, var(--surface), var(--bg)); }
.hero-bg { position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image:
  linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%); }
.hero .container { position: relative; }
.hero h1 { max-width: 18ch; }
.hero p.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }
.hero-mark { width: 72px; height: 72px; margin-bottom: 16px; }
.hero-mark.shine { animation: shine 1.2s ease-out 1; }
@keyframes shine { from { filter: drop-shadow(0 0 0 transparent); opacity: .6; } 50% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gold) 70%, transparent)); } to { filter: none; opacity: 1; } }

/* Choice hub: 6 options around a center on desktop, 2x3 grid on mobile */
.hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.hub a { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: transform var(--t-med), border-color var(--t-med); }
.hub a:hover { transform: translateY(-2px); border-color: var(--accent); }
.hub .hub-ico { width: 36px; height: 36px; color: var(--accent-text); }
.hub strong { font-size: 1.05rem; }
@media (max-width: 720px) { .hub { grid-template-columns: repeat(2, 1fr); } .hub a { padding: 14px; } }

/* Sections, cards, grids */
.section { padding-block: clamp(32px, 5vw, 64px); }
.section-alt { background: var(--surface); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.card h3 { margin: 0; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card.linked { position: relative; transition: border-color var(--t-med), transform var(--t-med); }
.card.linked:hover { border-color: var(--accent); transform: translateY(-2px); }
.card .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }
.price { font-weight: 700; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.err { background: var(--err-bg); color: var(--err); border-color: transparent; }
.badge.info { background: var(--info-bg); color: var(--accent-text); border-color: transparent; }
.badge.gold { color: var(--gold-text); border-color: var(--gold); background: transparent; }
.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps li { counter-increment: s; padding: 16px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); }
.steps li::before { content: counter(s); display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); font-weight: 700; margin-inline-end: 8px; }
.breadcrumbs { font-size: .9rem; margin-block: 16px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--muted); }
.page-head { padding-block: 24px 8px; }
.notice { border-radius: var(--radius-sm); padding: 12px 14px; border: 1px solid var(--border); background: var(--surface); margin-block: 12px; }
.notice.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.notice.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.notice.err { background: var(--err-bg); color: var(--err); border-color: transparent; }
.notice.info { background: var(--info-bg); border-color: transparent; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
details.faq { border-bottom: 1px solid var(--border); padding-block: 10px; }
details.faq summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.prose { max-width: 72ch; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.two-col { display: grid; gap: 32px; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.sticky-aside { position: sticky; top: 84px; }
@media (max-width: 900px) { .sticky-aside { position: static; } }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
label, .label { font-weight: 600; }
.hint { font-size: .875rem; color: var(--muted); }
input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="search"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); outline-offset: 0; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--err); }
.field-error { color: var(--err); font-size: .9rem; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: 22px; height: 22px; margin-top: 2px; flex-shrink: 0; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 16px; }
legend { font-weight: 700; padding-inline: 6px; }
.dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; background: var(--surface); }
.dropzone.drag { border-color: var(--accent); background: var(--info-bg); }
.progress { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); width: 0; transition: width var(--t-med); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--surface); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }

/* Footer */
.site-footer { margin-top: 48px; border-top: 1px solid var(--border); background: var(--surface); padding-block: 36px 24px; font-size: .95rem; }
.footer-cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer-cols a { color: var(--text); text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: center; text-align: center; color: var(--muted); }

/* Consent banner */
.consent { position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; max-width: 560px; margin-inline: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); padding: 16px; }

/* App shells (admin / account / studio / family) */
.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.app-side { background: var(--surface); border-inline-end: 1px solid var(--border); padding: 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.app-side nav a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; }
.app-side nav a:hover, .app-side nav a[aria-current="page"] { background: var(--surface-2); }
.app-side .group { margin-top: 14px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-inline: 12px; }
.app-main { padding: 20px var(--gutter) 48px; min-width: 0; }
.app-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .app-side { position: static; height: auto; border-inline-end: 0; border-bottom: 1px solid var(--border); }
  .app-side nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .app-side .group { width: 100%; }
}
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.stat .v { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: .85rem; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--text); border-bottom: 3px solid transparent; }
.tabs a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 700; }
.timeline { list-style: none; padding: 0; margin: 0; border-inline-start: 2px solid var(--border); }
.timeline li { padding: 4px 0 12px 0; padding-inline-start: 14px; position: relative; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -7px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

/* DJ theme */
/* DJ theme */
.theme-dj { --primary: #1D1240; --primary-hover: #120A2B; --accent: #8A5CF6; --accent-text: #5B34C9; --gold: #C79A3F; }
:root[data-theme="dark"] .theme-dj { --primary: #B69CFF; --on-primary: #120A2B; --accent-text: #C8B4FF; }
.dj-hero { background: radial-gradient(600px 240px at 20% 0%, rgba(138, 92, 246, .25), transparent 70%), radial-gradient(500px 200px at 90% 20%, rgba(199, 154, 63, .18), transparent 70%), linear-gradient(180deg, #120A2B, #1D1240); color: #fff; padding-block: 48px 40px; }
.dj-hero h1, .dj-hero p { color: #fff; }
.dj-hero a:not(.btn) { color: #F2D08E; text-decoration: underline; }
.dj-hero .eq { display: flex; gap: 4px; align-items: flex-end; height: 28px; margin-bottom: 14px; }
.dj-hero .eq span { width: 6px; background: #C79A3F; border-radius: 3px; animation: eq 1.4s ease-in-out infinite; }
.dj-hero .eq span:nth-child(2) { animation-delay: .2s; } .dj-hero .eq span:nth-child(3) { animation-delay: .4s; } .dj-hero .eq span:nth-child(4) { animation-delay: .6s; } .dj-hero .eq span:nth-child(5) { animation-delay: .8s; }
@keyframes eq { 0%, 100% { height: 8px; } 50% { height: 26px; } }
.btn-call { background: #1B6E3A; color: #fff; } .btn-call:hover { background: #145a2f; color: #fff; }
.btn-wa { background: #0B6B3E; color: #fff; } .btn-wa:hover { background: #075231; color: #fff; }
.contact-bar { display: none; }
@media (max-width: 720px) {
  .contact-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; inset-inline: 0; bottom: 0; z-index: 50; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--border); }
  .contact-bar .btn { min-height: 52px; }
  body.has-contact-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Soso theme: cheerful, calm, big targets */
.theme-soso { --primary: #6A2C91; --primary-hover: #52206F; --accent: #D0457C; --accent-text: #A8285C; --surface: #FFF6FB; --border: #F1D5E5; }
:root[data-theme="dark"] .theme-soso { --primary: #E4B3FF; --on-primary: #2A0E3A; --accent-text: #FF9CC4; --surface: #2A1830; --border: #4A2C52; }
.theme-soso .btn { min-height: 56px; font-size: 1.1rem; border-radius: 18px; }
.theme-soso body, .theme-soso { font-size: 18px; }

/* Islam reading */
.theme-calm { --accent: #2F6F5E; --accent-text: #245A4C; }
.quran { font-family: "Amiri Quran", "KFGQPC Uthmanic Script HAFS", "Scheherazade New", "Traditional Arabic", serif; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 2.3; text-align: justify; }
.ayah-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8em; height: 1.8em; margin-inline: .2em; border: 1px solid var(--gold); border-radius: 50%; font: 600 .55em/1 var(--font); color: var(--gold-text); vertical-align: middle; }
.dhikr { font-size: 1.3rem; line-height: 2.1; }
.counter-btn { min-width: 120px; min-height: 56px; font-size: 1.2rem; }

/* Tools */
.tool-area { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--bg); }
.file-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.file-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.file-list li .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-canvas { background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--bg) 0 50%) 0 0 / 16px 16px; border: 1px solid var(--border); border-radius: 10px; max-height: 60vh; }
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; }
pre { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; overflow-x: auto; white-space: pre-wrap; }
.invoice { background: #fff; color: #10272C; max-width: 820px; margin: 0 auto; padding: 32px; border: 1px solid #D9E2E5; font-family: Arial, sans-serif; }
.invoice table th { background: #F4F7F8; }
.qr { width: 132px; height: 132px; }
@media print {
  .site-header, .site-footer, .no-print, .consent, .contact-bar { display: none !important; }
  body { background: #fff; color: #000; }
  .invoice { border: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ticker-track { animation: none !important; white-space: normal; }
}

/* Theme-aware brand images */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: inline; }
}
.icon-btn { white-space: nowrap; }
@media (max-width: 480px) {
  .brand img { height: 28px; }
  .hdr { gap: 6px; }
  .hdr-tools { gap: 4px; }
  .icon-btn { min-width: 40px; padding: 0 8px; }
}
.narrow { max-width: 640px; }
.grow { flex: 1; min-width: 220px; }
.demo-frame { border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.qibla-dial { width: 180px; height: 180px; margin: 12px auto; border-radius: 50%; border: 3px solid var(--border); position: relative; background: var(--surface); }
.qibla-dial .needle { position: absolute; left: 50%; top: 10px; width: 6px; height: 80px; margin-left: -3px; background: var(--gold); border-radius: 3px; transform-origin: 50% 80px; transition: transform var(--t-fast); }
li.done { opacity: .7; }
li.done .counter-btn { background: var(--ok); }

/* ---------- Soso components ---------- */
.soso-hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
.soso-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s3, 12px); margin-block: var(--s4, 16px); }
.soso-tiles.small-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.soso-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 20px; background: var(--surface); border: 2px solid var(--border); color: var(--text); text-decoration: none; min-height: 56px; }
.soso-tile:hover, .soso-tile:focus-visible { border-color: var(--primary); }
.soso-ico { font-size: 2.2rem; line-height: 1; }
.soso-list li { padding-block: 4px; }
.soso-score { font-weight: 700; font-size: 1.2rem; }
.flash { display: grid; gap: 12px; justify-items: center; }
.flash-card { margin: 0; width: min(100%, 420px); aspect-ratio: 4 / 3; display: grid; place-content: center; text-align: center; border-radius: 28px; background: var(--surface); border: 3px solid var(--border); }
.flash-big { font-size: clamp(3rem, 16vw, 7rem); font-weight: 800; line-height: 1.1; color: var(--primary); margin: 0; text-align: center; }
.flash-emoji { font-size: 1.6rem; }
.flash-count { font-weight: 700; min-width: 5ch; text-align: center; }
.quiz-q .btn.is-right { background: var(--ok-bg, #E6F4EA); border-color: var(--ok, #1E7A3C); color: var(--ok, #1E7A3C); }
.quiz-q .btn.is-wrong { background: var(--err-bg, #FDECEC); border-color: var(--err, #B3261E); color: var(--err, #B3261E); }
.hifz { list-style: none; padding: 0; display: grid; gap: 12px; }
.hifz-ayah.is-done { border-color: var(--ok, #1E7A3C); }
.quran-line { font-family: "Amiri Quran", "KFGQPC Uthmanic Script HAFS", "Scheherazade New", "Traditional Arabic", serif; font-size: 1.7rem; line-height: 2.2; margin: 0; }
.hide-text .hifz-ayah [data-text] { filter: blur(8px); user-select: none; }
.hide-text .hifz-ayah.peek [data-text] { filter: none; }
.hifz-bar { height: 12px; border-radius: 99px; background: var(--border); overflow: hidden; }
.hifz-bar span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s; }
.pulse { animation: soso-pulse .5s; }
@keyframes soso-pulse { 50% { transform: scale(1.02); } }
.memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 360px; margin-block: 12px; }
.mem-card { aspect-ratio: 1; font-size: 2rem; border-radius: 14px; border: 2px solid var(--border); background: var(--primary); color: var(--on-primary, #fff); cursor: pointer; }
.mem-card.open, .mem-card:disabled { background: var(--surface); color: inherit; }
.ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 300px; margin-block: 12px; }
.ttt-cell { aspect-ratio: 1; font-size: 2.2rem; border-radius: 14px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; }
.ttt-cell.win { border-color: var(--accent); background: var(--accent); }
.soso-counter { font-size: 3rem; min-width: 160px; min-height: 120px; }
.uae-flag { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: repeat(3, 1fr); width: min(100%, 300px); aspect-ratio: 2 / 1; border: 1px solid var(--border); margin-block: 8px; }
.uae-flag .r { grid-row: 1 / 4; background: #EF3340; }
.uae-flag .g { background: #009739; } .uae-flag .w { background: #FFFFFF; } .uae-flag .b { background: #000000; }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } .hifz-bar span { transition: none; } }

/* ---------- Brand motion: animated mark ---------- */
.lk-mark { flex-shrink: 0; display: block; border-radius: 24%; }
.brand .wordmark { font-weight: 800; letter-spacing: .2em; font-size: 1.05rem; color: var(--text); }
.brand-www .wordmark { font-size: 1.15rem; }
.lk-mark .m-s { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .mark-anim .m-l { animation: lk-l .7s cubic-bezier(.2,.8,.2,1) both; }
  .mark-anim .m-s { animation: lk-s .8s .35s cubic-bezier(.2,.8,.2,1) both, lk-breathe 4s 1.6s ease-in-out infinite; }
  .brand:hover .mark-anim .m-s, .brand:focus-visible .mark-anim .m-s { animation: lk-spin .9s cubic-bezier(.2,.8,.2,1); }
  .hero-mark-anim { animation: hero-float 7s ease-in-out 1.6s infinite; }
}
@keyframes lk-l { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lk-s { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
@keyframes lk-breathe { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.08); filter: drop-shadow(0 0 2px rgba(242,208,142,.8)); } }
@keyframes lk-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Platform accents (no inline styles; CSP-safe) ---------- */
.acc-www { --acc: #0C3B40; } .acc-tools { --acc: #087F86; } .acc-office { --acc: #1F5FA8; } .acc-pic { --acc: #8A3FA0; }
.acc-islam { --acc: #1B6E3A; } .acc-prompt { --acc: #9A6F2C; } .acc-uae { --acc: #A12626; } .acc-soso { --acc: #6A2C91; }
.acc-dj { --acc: #3A1E6E; } .acc-account, .acc-family, .acc-studio, .acc-admin { --acc: #0C3B40; }
:root[data-theme="dark"] [class*="acc-"] { --acc: var(--primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [class*="acc-"] { --acc: var(--primary); } }

/* ---------- Platform bar ---------- */
.pbar { background: var(--acc, var(--primary)); color: #fff; font-size: .9rem; }
.pbar-in { display: flex; align-items: center; gap: 10px; min-height: 38px; flex-wrap: wrap; padding-block: 4px; }
.pbar a { color: #fff; text-decoration: none; }
.pbar-home { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pbar-home .lk-mark { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.pbar-sep { opacity: .7; }
.pbar-cur { flex: 1 1 auto; min-width: 0; }
.pbar-back { border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 2px 12px; white-space: nowrap; }
.pbar-back:hover, .pbar-back:focus-visible { background: rgba(255,255,255,.15); }
:root[data-theme="dark"] .pbar, :root[data-theme="dark"] .pbar a, :root[data-theme="dark"] .pbar-home .mark-mini { color: var(--on-primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pbar, :root:not([data-theme="light"]) .pbar a, :root:not([data-theme="light"]) .pbar-home .mark-mini { color: var(--on-primary); } }
.site-header[class*="acc-"] { border-top: 3px solid var(--acc); }
@media (max-width: 520px) { .pbar-cur { font-size: .82rem; } }

/* ---------- App switcher ---------- */
.apps { position: relative; }
.apps > summary { list-style: none; cursor: pointer; }
.apps > summary::-webkit-details-marker { display: none; }
.apps-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: min(92vw, 360px); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 14px; z-index: 60; }
.apps-title { margin: 0 0 10px; font-weight: 700; }
.apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.app-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; text-decoration: none; color: var(--text); text-align: center; font-size: .82rem; border: 1px solid transparent; }
.app-tile:hover, .app-tile:focus-visible { background: var(--surface); border-color: var(--border); }
.app-tile.is-current { border-color: var(--acc); background: var(--surface); }
.app-ico { font-size: 1.6rem; line-height: 1; }

/* ---------- Arrival notice ---------- */
.arrive { background: var(--surface); border-bottom: 1px solid var(--border); border-inline-start: 5px solid var(--acc); }
.arrive-in { display: flex; align-items: center; gap: 12px; padding-block: 10px; flex-wrap: wrap; }
.arrive-in > span:nth-child(2) { flex: 1 1 260px; }
.arrive-ico { font-size: 1.5rem; }
.arrive.is-hidden { display: none; }
@media (prefers-reduced-motion: no-preference) { .arrive { animation: arrive-in .45s ease-out both; } @keyframes arrive-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } } }

/* ---------- Platform hero (each platform home) ---------- */
.phero { background: linear-gradient(135deg, var(--acc, var(--primary)) 0%, color-mix(in srgb, var(--acc, var(--primary)) 70%, #000) 100%); color: #fff; padding-block: clamp(28px, 6vw, 56px); }
.phero a:not(.btn) { color: #fff; }
.phero .kicker { display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.14); border-radius: 999px; padding: 4px 12px; font-size: .85rem; }
.phero h1 { color: #fff; margin: 12px 0 8px; }
.phero p.lead { color: rgba(255,255,255,.92); max-width: 60ch; }
.phero .btn-secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.45); }
.phero .btn-primary { background: #fff; color: var(--acc, var(--primary)); border-color: #fff; }
.footer-brand .brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

/* ---------- Home page ---------- */
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { display: none; } }
.hero-art { display: grid; place-items: center; }
.hero-mark-anim { width: min(100%, 220px); height: auto; filter: drop-shadow(0 24px 48px rgba(12,59,64,.28)); }
.kicker-home { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent-text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px; margin: 0 0 10px; }
.kicker-home .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.trust-row { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: .92rem; }
.trust-row li { display: inline-flex; align-items: center; gap: 6px; }
.trust-row svg { color: var(--ok); width: 18px; height: 18px; }
.section-head { max-width: 70ch; margin-bottom: 20px; }
.section-head h2 { margin-bottom: 6px; }
.plat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.plat-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--text); text-decoration: none; overflow: hidden; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.plat-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--acc); }
.plat-card:hover, .plat-card:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.10); border-color: var(--acc); }
.plat-ico { font-size: 2rem; line-height: 1; }
.plat-go { margin-top: auto; font-weight: 700; color: var(--acc); font-size: .92rem; }
:root[data-theme="dark"] .plat-go { color: var(--primary); }
.plat-host { font-size: .75rem; color: var(--muted); }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.area-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.area-card:hover, .area-card:focus-visible { border-color: var(--accent); }
.area-card .hub-ico { color: var(--accent); width: 28px; height: 28px; }
.area-card .plat-go { color: var(--accent-text); }
.how-grid { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; counter-reset: none; }
.how-grid li { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--surface); }
.how-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); font-weight: 800; }
.cta-band { background: var(--primary); color: var(--on-primary); }
.cta-band h2, .cta-band p { color: var(--on-primary); }
.cta-in { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.cta-band .btn-primary { background: var(--on-primary); color: var(--primary); border-color: var(--on-primary); }
.cta-band .btn-secondary { background: transparent; color: var(--on-primary); border-color: currentColor; }

/* ---------- Islam: prayer widget, calendar, occasions ---------- */
.next-prayer { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 1.05rem; background: var(--surface); padding: 10px 14px; border-radius: var(--radius-sm); }
.next-prayer strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.ptimes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-block: 12px; }
.pt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pt strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.pt.is-next { border-color: var(--accent); background: var(--info-bg); }
.ptable .is-today td { background: var(--info-bg); font-weight: 700; }
.occ-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.occ-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.occ-list li .small { grid-column: 1; }
.occ-list li .badge { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-weight: 700; font-size: .85rem; padding: 6px 0; color: var(--muted); }
.cal-cell { min-height: 74px; border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--bg); }
.cal-cell.is-empty { border: 0; background: transparent; }
.cal-cell .g { font-weight: 800; font-size: 1.05rem; }
.cal-cell .h { font-size: .8rem; color: var(--accent-text); }
.cal-cell .o { font-size: .7rem; line-height: 1.2; color: var(--text); }
.cal-cell.is-today { outline: 2px solid var(--accent); }
.cal-cell.is-fri { background: var(--surface); }
.cal-cell.is-occ { border-color: var(--gold); }
.cal-cell.is-holiday { border-color: var(--ok); background: var(--ok-bg); }
@media (max-width: 560px) { .cal-cell { min-height: 58px; padding: 4px; } .cal-cell .o { display: none; } .cal-cell.is-occ::after, .cal-cell.is-holiday::after { content: "•"; color: var(--gold); } }
.occ-cards { list-style: none; padding: 0; display: grid; gap: 12px; }
.occ-cards li { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.occ-cards li.is-holiday { border-inline-start: 4px solid var(--ok); }
.occ-count { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface); border-radius: 12px; padding: 10px 4px; }
.occ-count strong { font-size: 1.6rem; color: var(--accent-text); }
tr.is-past td { color: var(--muted); }

/* ---------- Quick tools ---------- */
.qt-search input { width: 100%; font-size: 1.1rem; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg); color: var(--text); }
.qt-search input:focus { border-color: var(--accent); }
.qt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-block: 16px 8px; }
.qt-stats div { background: var(--surface); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; }
.qt-stats strong { font-size: 1.5rem; color: var(--accent-text); }
.qt-cat { margin-top: 28px; }
.qt-cat h2 a { color: var(--text); text-decoration: none; }
.qt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.qt-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--text); background: var(--bg); transition: border-color var(--t-fast), transform var(--t-fast); }
.qt-card:hover, .qt-card:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.qt-out:empty { display: none; }
.kv-table { width: 100%; border-collapse: collapse; }
.kv-table th, .kv-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }
.kv-table th { width: 42%; color: var(--muted); font-weight: 600; }
.kv-table td { font-weight: 700; word-break: break-word; }
.qt-text pre { white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow: auto; background: var(--surface); padding: 12px; border-radius: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 10px; }
.swatch { width: 96px; height: 72px; border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: flex-end; justify-content: center; cursor: pointer; }
.swatch span { background: rgba(255,255,255,.85); color: #111; font-size: .75rem; padding: 1px 6px; border-radius: 6px; margin-bottom: 6px; }
.grad-preview { height: 140px; border-radius: 12px; margin-block: 10px; border: 1px solid var(--border); }
.qr-box svg, .svg-out svg { max-width: 280px; height: auto; background: #fff; padding: 8px; border-radius: 10px; }
.conv-row { display: grid; grid-template-columns: 1fr 1.4fr auto 1.4fr; gap: 10px; align-items: end; }
@media (max-width: 720px) { .conv-row { grid-template-columns: 1fr; } }
.conv-out { font-size: 1.8rem; font-weight: 800; color: var(--accent-text); margin: 6px 0 0; word-break: break-word; }
.pair-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 6px 14px; font-size: .92rem; }
.chip { display: inline-block; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; margin: 2px; text-decoration: none; color: var(--text); font-size: .85rem; }
.clock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.clock-card { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--text); background: var(--bg); }
.clock-card strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.tz-now { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 20px; }
.tz-diff { text-align: center; color: var(--accent-text); }
@media (max-width: 620px) { .tz-now { grid-template-columns: 1fr; } }
tr.is-overlap td { background: var(--ok-bg); }
.short-url { font-size: 1.3rem; font-weight: 800; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.go-host { font-size: 1.6rem; }
.go-url { word-break: break-all; color: var(--muted); }
.plat-feat { list-style: none; padding: 0; margin: 6px 0 8px; display: grid; gap: 4px; font-size: .88rem; }
.plat-feat li { position: relative; padding-inline-start: 18px; }
.plat-feat li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--acc); transform: rotate(45deg); }
.plat-card { padding-top: 22px; }
.plat-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }

/* ---------- Auth card (console sign-in, password change, two-step enrolment) ---------- */
.auth-wrap { min-height: calc(100vh - 12rem); display: grid; place-items: center; padding: 2rem 1rem; }
.auth-card { width: min(100%, 26rem); padding: 1.75rem; }
.auth-head { display: flex; gap: .85rem; align-items: center; margin-block-end: 1.25rem; }
.auth-head h1 { margin: 0; }
.auth-head p { margin: .2rem 0 0; }
.btn-block { width: 100%; justify-content: center; }
.auth-steps { padding-inline-start: 1.2rem; margin: 0 0 1rem; font-size: .92rem; }
.auth-qr { display: grid; justify-items: center; gap: .5rem; margin-block-end: 1rem; }
.auth-qr .qr { background: #fff; padding: .5rem; border-radius: 12px; }
.auth-key { font-size: .95rem; letter-spacing: .06em; word-break: break-all; text-align: center; }
.auth-alt { margin: 1rem 0 0; text-align: center; }

/* ---------- Footer signature ---------- */
.footer-bottom { display: grid; justify-items: center; gap: .35rem; text-align: center; padding-block: 1.5rem 1rem; }
.footer-bottom p { margin: 0; }
.footer-sig { font-family: var(--font-display, inherit); font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: -.01em;
  background: linear-gradient(100deg, var(--c-ink, #0C3B40) 0%, #11606A 45%, #B78A44 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-sig i { font-style: normal; color: #B78A44; -webkit-text-fill-color: #B78A44; }
:root[data-theme="dark"] .footer-sig { background-image: linear-gradient(100deg, #E9F4F4 0%, #7FD1D6 50%, #F2D08E 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer-sig { background-image: linear-gradient(100deg, #E9F4F4 0%, #7FD1D6 50%, #F2D08E 100%); } }

/* ---------- About ---------- */
.about-hero { padding-block: clamp(3rem, 8vw, 6rem) 2rem; background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, #B78A44 14%, transparent), transparent 60%), radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, #11606A 16%, transparent), transparent 60%); }
.about-hero .display { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.12; max-width: 22ch; margin: .3rem 0 1rem; }
.about-hero .lead { max-width: 60ch; font-size: 1.15rem; }
.about-pillars { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.about-pillar { transition: transform .25s ease, box-shadow .25s ease; }
.about-pillar:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgb(0 0 0 / .08); }
.about-ico { font-size: 1.8rem; display: inline-block; margin-block-end: .4rem; }
.founder { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 4vw, 2.5rem); align-items: center; padding: clamp(1.25rem, 4vw, 2.5rem);
  border-inline-start: 4px solid #B78A44; }
.founder .h2 { margin: .1rem 0; }
.founder-role { color: #B78A44; font-weight: 700; margin: 0 0 1rem; }
.founder-quote { margin: 0; font-size: 1.1rem; line-height: 1.8; }
@media (max-width: 640px) { .founder { grid-template-columns: 1fr; justify-items: start; } }

/* ================= Admin console — "command centre" theme ================= */
body.console {
  --bg: #04090A; --surface: #07120F; --surface-2: #0C1D19; --text: #D6F5E6; --muted: #7FA696;
  --primary: #39FF9C; --primary-hover: #7CFFBE; --on-primary: #02130B;
  --accent: #39FF9C; --accent-text: #5CFFB0; --gold: #F5C45B; --gold-text: #F5C45B;
  --border: #15352B; --focus: #39FF9C;
  --ok: #39FF9C; --ok-bg: #062A18; --warn: #FFC34D; --warn-bg: #2B2006; --err: #FF4D6A; --err-bg: #2E0911; --info-bg: #06232A;
  --mono: Arial, "Helvetica Neue", Helvetica, sans-serif; /* Arial everywhere (owner decision); terminal block keeps a code face */
  --neon: 0 0 12px rgb(57 255 156 / .35);
  color-scheme: dark; background: var(--bg); color: var(--text);
  background-image: radial-gradient(90% 60% at 100% 0%, rgb(57 255 156 / .07), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgb(0 200 255 / .06), transparent 60%);
  background-attachment: fixed;
}
body.console::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
body.console h1, body.console h2, body.console .h3, body.console .kpi-v, body.console .brand-name, body.console table { font-family: var(--mono); }
body.console h1 { color: var(--primary); text-shadow: var(--neon); letter-spacing: .02em; font-size: 1.35rem; }
body.console h1::before { content: "> "; opacity: .6; }
body.console .app-side { background: rgb(4 12 10 / .92); border-color: var(--border); backdrop-filter: blur(6px); }
body.console .app-side nav a { font-family: var(--mono); font-size: .88rem; color: var(--muted); border-radius: 6px; border-inline-start: 2px solid transparent; }
body.console .app-side nav a:hover { color: var(--text); background: var(--surface-2); }
body.console .app-side nav a[aria-current="page"] { color: var(--primary); background: rgb(57 255 156 / .08); border-inline-start-color: var(--primary); text-shadow: var(--neon); }
body.console .brand-name { color: var(--primary); font-weight: 800; letter-spacing: .08em; text-shadow: var(--neon); }
body.console .brand-name small { display: block; font-size: .65rem; color: var(--muted); letter-spacing: .12em; text-shadow: none; }
body.console .card, body.console .panel, body.console .stat, body.console table { background: rgb(7 18 15 / .85); border-color: var(--border); }
body.console .btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--neon); }
body.console .btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
body.console input, body.console select, body.console textarea { background: #020705; color: var(--text); border-color: var(--border); font-family: var(--mono); }
body.console a { color: var(--accent-text); }
body.console th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; }
body.console .app-top { border-bottom: 1px dashed var(--border); padding-bottom: 10px; }

.cmd-open { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 8px; padding: 8px 10px;
  background: #020705; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-family: var(--mono, inherit); font-size: .8rem; cursor: pointer; }
.cmd-open:hover { border-color: var(--primary); color: var(--text); }
kbd { font-family: var(--mono, monospace); font-size: .75em; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); color: var(--text); white-space: nowrap; }

.term { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #010604; box-shadow: 0 0 0 1px rgb(57 255 156 / .05), 0 18px 50px rgb(0 0 0 / .5); margin-bottom: 14px; }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #0A1714; border-bottom: 1px solid var(--border); font: .75rem var(--mono, monospace); color: var(--muted); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF4D6A; } .term-bar i:nth-child(2) { background: #FFC34D; } .term-bar i:nth-child(3) { background: #39FF9C; }
.term-bar span { margin-inline-start: 8px; }
.term-body { margin: 0; padding: 12px 14px; font: .82rem/1.7 var(--mono, monospace); color: #B9F5D6; white-space: pre-wrap; overflow-x: auto; }
.term-body .p { color: var(--primary); } .term-body .ok { color: #39FF9C; } .term-body .warn { color: #FFC34D; } .term-body b { color: #fff; font-weight: 600; }
.cursor { animation: blink 1s steps(1) infinite; color: var(--primary); }
@keyframes blink { 50% { opacity: 0; } }

.alerts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.alert { padding: 6px 12px; border: 1px solid var(--err); background: var(--err-bg); color: var(--err) !important; border-radius: 6px; font: .85rem var(--mono, monospace); text-decoration: none; animation: alertPulse 2.4s ease-in-out infinite; }
@keyframes alertPulse { 50% { box-shadow: 0 0 16px rgb(255 77 106 / .35); } }

.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.kpi { position: relative; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(180deg, rgb(255 255 255 / .02), transparent); overflow: hidden; }
.kpi::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; background: var(--kc, var(--primary)); box-shadow: 0 0 12px var(--kc, var(--primary)); }
.kpi-green { --kc: #39FF9C; } .kpi-cyan { --kc: #29D8FF; } .kpi-gold { --kc: #F5C45B; } .kpi-amber { --kc: #FFC34D; } .kpi-red { --kc: #FF4D6A; }
.kpi-l { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.kpi-v { font-size: 1.7rem; font-weight: 800; color: var(--kc); font-variant-numeric: tabular-nums; text-shadow: 0 0 14px color-mix(in srgb, var(--kc) 45%, transparent); }
.kpi-s { font-size: .75rem; color: var(--muted); }
.kpi-v.flash { animation: kflash .9s ease; }
@keyframes kflash { 0% { transform: scale(1.12); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
.live-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 22px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #39FF9C; box-shadow: 0 0 0 0 rgb(57 255 156 / .7); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgb(57 255 156 / 0); } 100% { box-shadow: 0 0 0 0 rgb(57 255 156 / 0); } }
.sect { margin-top: 8px; }

.subgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 20px; }
.sub { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: rgb(7 18 15 / .7); transition: border-color .2s, transform .2s; }
.sub:hover { border-color: var(--primary); transform: translateY(-2px); }
.sub header { display: flex; align-items: center; gap: 8px; }
.sub-name { font-weight: 700; color: var(--text) !important; text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-host { font: .72rem var(--mono, monospace); color: var(--muted); margin: 2px 0 8px; }
.sub-nums { display: flex; gap: 12px; flex-wrap: wrap; font-size: .75rem; color: var(--muted); }
.sub-nums b { color: var(--text); font: 700 .95rem var(--mono, monospace); }
.sub footer { display: flex; gap: 12px; font-size: .78rem; margin-top: 6px; }
.spark { display: block; width: 100%; height: 30px; margin-top: 6px; }
.spark-line { fill: none; stroke: var(--primary, #087F86); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark-fill { fill: color-mix(in srgb, var(--primary, #087F86) 14%, transparent); stroke: none; }

.cols-2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 12px; }
.panel { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.panel .h3 { margin-top: 0; font-size: .95rem; }
.toplist { list-style: none; margin: 0; padding: 0; font: .82rem var(--mono, monospace); }
.toplist li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.toplist em { color: var(--primary); font-style: normal; margin-inline-end: 6px; }
.toplist span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keys { list-style: none; padding: 0; margin: 0 0 12px; font-size: .88rem; display: grid; gap: 6px; }
.feed { list-style: none; margin: 0; padding: 0; font: .8rem var(--mono, monospace); }
.feed li { display: grid; grid-template-columns: 11rem 1fr auto; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.feed time { color: var(--muted); } .feed span { color: var(--primary); } .feed em { color: var(--muted); font-style: normal; }
@media (max-width: 640px) { .feed li { grid-template-columns: 1fr; gap: 0; } }

dialog.cmdk { padding: 0; border: 1px solid var(--primary, #087F86); border-radius: 12px; width: min(640px, calc(100vw - 32px)); background: #020806; color: #D6F5E6; box-shadow: 0 0 40px rgb(57 255 156 / .2); margin-top: 12vh; }
dialog.cmdk::backdrop { background: rgb(0 0 0 / .65); backdrop-filter: blur(3px); }
.cmdk-in input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid #15352B; background: transparent; color: inherit; font: 1rem var(--mono, monospace); outline: none; }
.cmdk-in ul { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.cmdk-in li { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.cmdk-in li[aria-selected="true"] { background: rgb(57 255 156 / .12); color: #fff; }
.cmdk-in li em { font: .68rem var(--mono, monospace); text-transform: uppercase; color: #39FF9C; min-width: 4.5rem; font-style: normal; opacity: .8; }
.cmdk-hint { margin: 0; padding: 8px 14px; border-top: 1px solid #15352B; font: .72rem var(--mono, monospace); color: #7FA696; }
.keys-help { padding: 16px 20px; } .keys-help h2 { margin-top: 0; font-size: 1rem; } .keys-help ul { list-style: none; padding: 0; display: grid; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .cursor, .alert, .pulse, .kpi-v.flash { animation: none; } body.console::before { display: none; } .sub:hover { transform: none; } }
.kpi-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-gold .kpi-v { font-size: 1.3rem; }
.blocked-list { margin-bottom: 14px; } .blocked-list summary { cursor: pointer; font-family: var(--mono, monospace); color: var(--muted); }
.blocked-list ul { margin: 10px 0 0; padding-inline-start: 1.2rem; display: grid; gap: 4px; font-size: .88rem; }

/* ================= Venues directory ================= */
.vstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.vstats > div { background: linear-gradient(135deg, color-mix(in srgb, #B78A44 12%, var(--surface)), var(--surface)); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.vstats b { display: block; font-size: 1.5rem; color: var(--gold-text); }
.vstats span { font-size: .82rem; color: var(--muted); }
.vtabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.vtabs a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.vtabs a[aria-current="page"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.vlayout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.vfilters { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.vfilters .field { margin-bottom: 10px; }
.vfilters fieldset { border: 0; padding: 0; margin: 0 0 10px; }
.chk { display: flex; gap: 8px; align-items: center; font-size: .9rem; padding: 3px 0; cursor: pointer; }
.vbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.vbar a.is-on { font-weight: 700; text-decoration: underline; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.vcard { border: 1px solid var(--border); border-radius: 16px; padding: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.vcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(0 0 0 / .08); border-color: color-mix(in srgb, #B78A44 50%, var(--border)); }
.vcard.is-sponsored { border-color: #B78A44; background: linear-gradient(180deg, color-mix(in srgb, #B78A44 8%, var(--bg)), var(--bg)); }
.vcard h3 { margin: 0; } .vcard h3 a { color: var(--text); text-decoration: none; }
.vcard-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.vkind { font-size: .8rem; color: var(--muted); }
.vfacts { list-style: none; padding: 0; margin: 0; font-size: .85rem; display: grid; gap: 2px; }
.vcard-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.vsponsored { margin-bottom: 16px; }
.vmap { width: 100%; height: auto; margin-bottom: 14px; border-radius: 18px; }
.vmap-sea { fill: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.vmap-city circle { fill: var(--muted); } .vmap-city text { font-size: 12px; fill: var(--muted); }
.vmap-dot { fill: var(--muted); stroke: var(--bg); stroke-width: 1.5; opacity: .75; }
.vmap-dot.is-verified { fill: #B78A44; opacity: 1; }
.vplace-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 14px; }
.vplace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; margin-bottom: 24px; }
.vplace-grid .card { margin-bottom: 14px; }
.vlead { position: sticky; top: 12px; border-top: 4px solid #B78A44; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 10px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pager { display: flex; justify-content: center; gap: 10px; align-items: center; margin-top: 16px; }
.empty { text-align: center; padding: 28px; }
@media (max-width: 860px) {
  .vlayout, .vplace-grid { grid-template-columns: 1fr; }
  .vfilters, .vlead { position: static; max-height: none; }
  .field-row { grid-template-columns: 1fr; }
}

/* Money flow */
.flow { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: none; }
.flow-step { display: flex; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; position: relative; background: linear-gradient(180deg, rgb(255 255 255 / .02), transparent); }
.flow-step h2 { margin: 0 0 4px; font-size: .98rem; }
.flow-step p { margin: 0 0 6px; }
.flow-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--primary); color: var(--on-primary); box-shadow: var(--neon, none); }
.flow-live { display: flex; gap: 6px; align-items: center; font-family: var(--mono, inherit); font-size: .85rem; color: var(--accent-text); }
.row-alert td { background: color-mix(in srgb, var(--err) 12%, transparent); }
form.inline { display: inline; }

/* Ad slots — labelled, beside content, never sticky/overlay */
.ad-slot { margin: 18px 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; position: relative; min-height: 64px; }
.ad-label { position: absolute; inset-block-start: -9px; inset-inline-start: 12px; background: var(--bg); padding: 0 6px; font-size: .7rem; color: var(--muted); letter-spacing: .04em; }
.ad-house a { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); }
.ad-ico { font-size: 1.8rem; }
.ad-slot ins.adsbygoogle { display: block; }

/* ================= Play (games) ================= */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.game-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(160deg, color-mix(in srgb, #5B3FD0 10%, var(--bg)), var(--bg)); text-decoration: none; color: var(--text); transition: transform .2s, box-shadow .2s; }
.game-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 16px 34px rgb(91 63 208 / .18); }
.game-ico { font-size: 2.4rem; }
.small-cards .game-card { padding: 12px; flex-direction: row; align-items: center; }
.small-cards .game-ico { font-size: 1.6rem; }
.game-stage { display: grid; justify-items: center; gap: 12px; padding: 18px; }
.g-hud { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.g-stat { background: var(--surface); border-radius: 10px; padding: 6px 14px; text-align: center; min-width: 80px; }
.g-stat span { display: block; font-size: .72rem; color: var(--muted); } .g-stat b { font-size: 1.3rem; }
.g-msg { min-height: 1.5em; font-weight: 700; text-align: center; }
.g-canvas { width: min(400px, 90vw); height: auto; border-radius: 14px; touch-action: none; }
.g2048 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(360px, 88vw); aspect-ratio: 1; background: #bbada0; padding: 8px; border-radius: 12px; touch-action: none; outline: none; direction: ltr; }
.g2048 .c { display: grid; place-items: center; border-radius: 8px; background: #cdc1b4; font-weight: 800; font-size: clamp(1rem, 5vw, 1.8rem); color: #776e65; transition: transform .1s; }
.g2048 .c2 { background: #eee4da; } .g2048 .c4 { background: #ede0c8; } .g2048 .c8 { background: #f2b179; color: #fff; } .g2048 .c16 { background: #f59563; color: #fff; }
.g2048 .c32 { background: #f67c5f; color: #fff; } .g2048 .c64 { background: #f65e3b; color: #fff; } .g2048 .c128, .g2048 .c256, .g2048 .c512 { background: #edcf72; color: #fff; }
.g2048 .c1024, .g2048 .c2048, .g2048 .c4096 { background: #B78A44; color: #fff; box-shadow: 0 0 18px #F2D08E; }
.gmem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(380px, 90vw); }
.gmem .mc { aspect-ratio: 1; font-size: 2rem; border-radius: 12px; border: 0; background: linear-gradient(135deg, #0C3B40, #11606A); color: #fff; cursor: pointer; transition: transform .25s; }
.gmem .mc.up { background: var(--surface); transform: rotateY(180deg) scaleX(-1); } .gmem .mc.ok { background: color-mix(in srgb, var(--ok) 25%, var(--surface)); }
.gttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(300px, 80vw); direction: ltr; }
.gttt .tc { aspect-ratio: 1; font-size: 2.4rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); }
.gttt .tc.X { color: #11606A; } .gttt .tc.O { color: #B78A44; }
.gmine { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; width: min(360px, 92vw); direction: ltr; }
.gmine .mcell { aspect-ratio: 1; border: 0; border-radius: 5px; background: #6d8f94; color: #fff; font-weight: 800; cursor: pointer; padding: 0; font-size: .95rem; }
.gmine .mcell.o { background: var(--surface); color: var(--text); } .gmine .mcell.m { background: #f59c9c; }
.gmine .n1 { color: #1f5fa8; } .gmine .n2 { color: #1b6e3a; } .gmine .n3 { color: #a12626; } .gmine .n4 { color: #6a2c91; }
.gsudoku { display: grid; grid-template-columns: repeat(9, 1fr); width: min(400px, 94vw); border: 2px solid var(--text); direction: ltr; }
.gsudoku .sc { aspect-ratio: 1; width: 100%; text-align: center; font-size: 1.1rem; border: 1px solid var(--border); background: var(--bg); color: var(--accent-text); padding: 0; border-radius: 0; }
.gsudoku .sc.given { color: var(--text); font-weight: 800; background: var(--surface); } .gsudoku .sc.bad { color: var(--err); background: var(--err-bg); }
.gsudoku .sc.bb { border-bottom: 2px solid var(--text); } .gsudoku .sc.br { border-inline-end: 2px solid var(--text); }
.gmath-q, .gword { font-size: clamp(1.8rem, 7vw, 2.8rem); font-weight: 800; letter-spacing: .08em; }
.gmath-a { font-size: 1.6rem; text-align: center; max-width: 260px; }
.vfilters-wrap > summary { display: none; list-style: none; margin-bottom: 10px; }
.vfilters-wrap > summary::-webkit-details-marker { display: none; }
@media (max-width: 860px) { .vfilters-wrap > summary { display: inline-flex; } }

/* Family tools */
.ftools { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.rem-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.rem-list li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.flist { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.flist ul { list-style: none; padding: 0; margin: 0 0 8px; }
.chkbtn { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--text); cursor: pointer; text-align: start; }
.chkbtn.is-done { color: var(--muted); text-decoration: line-through; }
.fbudget-total { font-size: 1.8rem; font-weight: 800; color: var(--gold-text); margin: 6px 0; }
.bars { display: grid; gap: 6px; margin-bottom: 12px; }
.bar-row { display: grid; grid-template-columns: 8rem 1fr auto; gap: 8px; align-items: center; font-size: .88rem; }
.bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #11606A, #B78A44); border-radius: 999px; }
.bar i.w0 { width: 3%; }
.bar i.w10 { width: 10%; }
.bar i.w20 { width: 20%; }
.bar i.w30 { width: 30%; }
.bar i.w40 { width: 40%; }
.bar i.w50 { width: 50%; }
.bar i.w60 { width: 60%; }
.bar i.w70 { width: 70%; }
.bar i.w80 { width: 80%; }
.bar i.w90 { width: 90%; }
.bar i.w100 { width: 100%; }

/* Document builders */
.builder-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.b-rows { display: grid; gap: 8px; margin-bottom: 8px; }
.b-row { display: grid; grid-template-columns: 1fr 70px 100px auto; gap: 6px; }
.b-row.cv-row { grid-template-columns: 1fr 1fr; } .b-row.cv-row textarea { grid-column: 1 / -1; } .b-row.cv-row [data-del] { justify-self: end; grid-column: 2; }
.builder-preview { position: sticky; top: 12px; }
.doc { background: #fff; color: #10272C; border-radius: 14px; padding: 32px; box-shadow: 0 20px 50px rgb(0 0 0 / .12); font-size: .92rem; min-height: 520px; }
.doc h1 { font-size: 1.5rem; margin: 0 0 4px; color: #0C3B40; } .doc h2 { font-size: 1.1rem; margin: 0; }
.doc-head { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid #B78A44; padding-bottom: 14px; margin-bottom: 14px; }
.doc-logo { max-height: 64px; max-width: 140px; object-fit: contain; }
.doc-meta { text-align: end; } .doc-meta p, .doc-head p { margin: 2px 0; }
.doc-to { margin-bottom: 14px; }
.doc-table, .doc-totals { width: 100%; border-collapse: collapse; }
.doc-table th { background: #0C3B40; color: #fff; padding: 8px; text-align: start; } .doc-table td { padding: 8px; border-bottom: 1px solid #e3e9ea; }
.doc .n { text-align: end; white-space: nowrap; }
.doc-totals { width: auto; margin-inline-start: auto; margin-top: 12px; } .doc-totals td { padding: 4px 10px; } .doc-totals .grand td { font-weight: 800; font-size: 1.1rem; border-top: 2px solid #0C3B40; }
.doc-notes { margin-top: 18px; color: #4A5F64; }
.cv-head { display: flex; gap: 18px; align-items: center; border-bottom: 3px solid #B78A44; padding-bottom: 14px; margin-bottom: 12px; }
.cv-photo { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; }
.cv-role { color: #087F86; font-weight: 700; margin: 2px 0; } .cv-contact { color: #4A5F64; margin: 0; font-size: .85rem; }
.cv h2 { color: #0C3B40; border-bottom: 1px solid #e3e9ea; padding-bottom: 4px; margin: 14px 0 6px; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.cv-item h3 { margin: 10px 0 0; font-size: 1rem; display: flex; justify-content: space-between; gap: 8px; } .cv-when { color: #4A5F64; font-weight: 400; font-size: .85rem; }
.cv-org { margin: 0; color: #087F86; font-weight: 600; } .cv-skills span { display: inline-block; background: #EAF0F1; border-radius: 999px; padding: 2px 10px; margin: 2px; }
@media (max-width: 900px) { .builder-grid { grid-template-columns: 1fr; } .builder-preview { position: static; } }
@media print {
  body * { visibility: hidden; }
  .builder-preview, .builder-preview * { visibility: visible; }
  .builder-preview { position: absolute; inset: 0; }
  .doc { box-shadow: none; border-radius: 0; padding: 0; }
}

/* Admin on phones: drawer + bottom quick bar */
.side-toggle, .mbar, .side-scrim { display: none; }
@media (max-width: 900px) {
  body.console .app { grid-template-columns: 1fr; }
  body.console .app-side { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(84vw, 320px); height: 100vh; z-index: 70; transform: translateX(-105%); transition: transform .25s ease; border-inline-end: 1px solid var(--border); border-bottom: 0; }
  [dir="rtl"] body.console .app-side { transform: translateX(105%); }
  body.console.side-open .app-side { transform: none; box-shadow: 0 0 60px rgb(0 0 0 / .6); }
  body.console .app-side nav { display: block; }
  body.console.side-open .side-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgb(0 0 0 / .5); }
  body.console .side-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.2rem; }
  body.console .app-top h1 { flex: 1; font-size: 1.1rem; }
  body.console .app-top .btn-row { width: 100%; justify-content: flex-start; }
  body.console .app-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.console .mbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: rgb(3 9 8 / .96); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); backdrop-filter: blur(8px); }
  body.console .mbar a, body.console .mbar button { display: grid; justify-items: center; gap: 2px; font: .68rem var(--mono, monospace); color: var(--muted); background: none; border: 0; text-decoration: none; padding: 4px 0; }
  body.console .mbar span { font-size: 1.15rem; }
  body.console .mbar [aria-current="page"] { color: var(--primary); text-shadow: var(--neon); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-v { font-size: 1.35rem; }
  .subgrid { grid-template-columns: 1fr; }
  .term-body { font-size: .72rem; }
}

/* ================= Premium layer (public site) ================= */
body:not(.console) h1, body:not(.console) h2, body:not(.console) .display { font-family: var(--font-display); letter-spacing: -.015em; }
body:not(.console) h1 { font-weight: 800; }
body:not(.console) .btn { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }
body:not(.console) .btn-sm { border-radius: 999px; }
body:not(.console) .btn-primary { background: linear-gradient(135deg, #11606A 0%, #0C3B40 60%, #082C30 100%); box-shadow: 0 6px 18px rgb(12 59 64 / .22), inset 0 1px 0 rgb(255 255 255 / .12); }
body:not(.console) .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgb(12 59 64 / .28), inset 0 1px 0 rgb(255 255 255 / .16); }
body:not(.console) .btn-secondary:hover { border-color: #B78A44; transform: translateY(-1px); }
:root[data-theme="dark"] body:not(.console) .btn-primary { background: linear-gradient(135deg, #66D3D8, #3FC1C8); color: #06181C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body:not(.console) .btn-primary { background: linear-gradient(135deg, #66D3D8, #3FC1C8); color: #06181C; } }
body:not(.console) .card { border-radius: 20px; box-shadow: 0 1px 2px rgb(12 59 64 / .04), 0 8px 28px rgb(12 59 64 / .06); }
body:not(.console) .phero { background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, #B78A44 16%, transparent), transparent 55%), radial-gradient(100% 90% at 0% 100%, color-mix(in srgb, #11606A 18%, transparent), transparent 60%); }
/* Light premium hero → dark readable text; buttons keep their own contrast (fixes white-on-white). */
body:not(.console) .phero { color: var(--text); }
body:not(.console) .phero h1 { color: var(--text); }
body:not(.console) .phero p.lead { color: var(--muted); }
body:not(.console) .phero a:not(.btn) { color: var(--accent-text); }
body:not(.console) .phero .btn-primary { color: #fff; border-color: transparent; }
body:not(.console) .phero .btn-secondary { background: var(--bg); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] body:not(.console) .phero .btn-primary { color: #06181C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body:not(.console) .phero .btn-primary { color: #06181C; } }
body:not(.console) .kicker { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, #B78A44 14%, transparent); color: var(--gold-text); font-weight: 700; font-size: .82rem; }
::selection { background: color-mix(in srgb, #B78A44 35%, transparent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 70%, transparent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { body:not(.console) .btn:hover { transform: none; } }

.term-body, .term-bar { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Platform home blocks (admin-editable) */
.pnotice { margin-top: 12px; }
.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 28px; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--bg)), var(--bg)); color: var(--text); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
a.pcard:hover { transform: translateY(-3px); border-color: #B78A44; box-shadow: 0 14px 30px rgb(12 59 64 / .1); }
.pcard-ico { font-size: 1.9rem; }
.pcard-go { position: absolute; inset-inline-end: 16px; inset-block-start: 16px; color: var(--gold-text); font-weight: 800; transition: transform .2s; }
a.pcard:hover .pcard-go { transform: translateX(4px); } [dir="rtl"] a.pcard:hover .pcard-go { transform: translateX(-4px); }
.parts { margin-bottom: 28px; }
.parts-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.part { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); color: var(--text); text-decoration: none; background: var(--bg); }
.part:hover { border-color: var(--accent); }
.part-ico { font-size: 1.5rem; }
.pfaq details { border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; margin-bottom: 8px; background: var(--bg); }
.pfaq summary { cursor: pointer; font-weight: 700; }
.pfaq summary::marker { color: var(--gold-text); }
.article .toc { margin: 16px 0 24px; } .article .toc ol { margin: 8px 0 0; }
.arrow-list { list-style: none; padding-inline-start: 0; }
.arrow-list li { position: relative; padding-inline-start: 1.6em; margin: 6px 0; }
.arrow-list li::before { content: "➜"; position: absolute; inset-inline-start: 0; color: var(--gold-text); }
[dir="rtl"] .arrow-list li::before { content: "⬅"; }

/* Extra platforms */
.center { text-align: center; justify-content: center; }
.pomo { text-align: center; padding: 28px; }
.pomo-mode { font-weight: 800; color: var(--gold-text); }
.pomo-time { font-size: clamp(3.5rem, 16vw, 6rem); font-weight: 800; letter-spacing: .04em; margin: 8px 0 16px; font-variant-numeric: tabular-nums; }
.rec { text-align: center; } .rec-video { width: 100%; max-height: 360px; background: #000; border-radius: 14px; }
.rec-status { font-weight: 700; } .rec-time { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0 12px; }
.checks-i { list-style: none; padding: 0; } .checks-i li { padding: 6px 0; border-bottom: 1px dashed var(--border); } .checks-i input { margin-inline-end: 8px; transform: scale(1.2); }
@media print { .no-print, .site-header, .site-footer, .pbar, .consent, .breadcrumbs, .ad-slot { display: none !important; } }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 8px 18px; }
.chip.is-on, .chip:hover { border-color: var(--brand, #c9a227); background: color-mix(in srgb, var(--brand, #c9a227) 12%, transparent); }
/* Venue event-services desk */
.vdesk { border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 10%, var(--bg)), var(--bg)); }
.vdesk-tag { display: inline-block; margin: 0 0 6px; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-text); font-weight: 800; font-size: .85rem; }
.vdesk-list { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.vdesk-list li { padding: 6px 10px; border-radius: 12px; background: var(--surface); color: var(--text); font-weight: 600; }
.vdesk-note { margin-top: 10px; }
.btn-ghost { background: transparent; color: var(--accent-text); border: 1px dashed color-mix(in srgb, var(--gold) 60%, var(--border)); }
.btn-ghost:hover { color: var(--text); border-style: solid; }
body:not(.console) .btn-wa { background: #0B6B3E; color: #fff; }
/* New games */
.gc4 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 100%; max-width: 420px; box-sizing: border-box; margin: 12px auto; padding: 10px; border-radius: 16px; background: #0C3B40; direction: ltr; }
.gc4 .c4 { aspect-ratio: 1; width: 100%; min-width: 0; padding: 0; border-radius: 50%; border: 0; background: #E9F1F2; cursor: pointer; }
.gc4 .c4.p1 { background: #E4572E; } .gc4 .c4.p2 { background: #FFC107; }
.gsimon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 280px; margin: 16px auto; direction: ltr; }
.gsimon .sp { aspect-ratio: 1; width: 100%; padding: 0; border: 0; border-radius: 22px; background: var(--c); opacity: .45; cursor: pointer; transition: opacity .12s, transform .12s; }
.gsimon .sp.on { opacity: 1; transform: scale(1.05); box-shadow: 0 0 24px var(--c); }
.greact { display: block; width: 100%; min-height: 220px; border: 0; border-radius: 20px; font-size: 1.4rem; font-weight: 800; color: #fff; cursor: pointer; }
.greact.wait { background: #B3261E; } .greact.go { background: #1E8E3E; } .greact.early { background: #7C5A22; } .greact.done { background: #0C3B40; }
.gtype-q { font-size: 1.15rem; padding: 12px 14px; border-radius: 14px; background: var(--surface); color: var(--text); }
.gtype-a { width: 100%; font-size: 1.1rem; }
.g-msg { text-align: center; font-weight: 700; }
.flash-card { min-height: 160px; display: grid; place-items: center; padding: 20px; margin: 10px 0; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 8%, var(--bg)), var(--bg)); }
.flash-q { font-size: 1.4rem; font-weight: 800; margin: 0; } .flash-a { font-size: 1.2rem; color: var(--accent-text); font-weight: 700; margin: 8px 0 0; }

/* ================= DJ Lekando — dedicated identity (dj.lekando.com only) ================= */
.dj-site { --djbg: #07030F; --djink: #F4ECFF; --djmute: #B9A8D6; --djgold: #E7C27A; --djpink: #FF4FA3; --djcyan: #3FE0E8; --djviolet: #8A5CF6; --djcard: rgba(255,255,255,.05); --djline: rgba(231,194,122,.22);
  background: radial-gradient(900px 500px at 85% -10%, rgba(138,92,246,.22), transparent 60%), radial-gradient(800px 460px at 0% 10%, rgba(255,79,163,.14), transparent 60%), var(--djbg); color: var(--djink); }
.dj-site a { color: var(--djgold); }
.dj-site h1, .dj-site h2, .dj-site h3 { color: #fff; }
.dj-site .muted, .dj-site .small.muted { color: var(--djmute); }
.dj-site .card, .dj-site .part, .dj-site details.faq { background: var(--djcard); border: 1px solid var(--djline); color: var(--djink); border-radius: 18px; backdrop-filter: blur(6px); }
.dj-site .part b { color: #fff; } .dj-site .part:hover, .dj-site .card.linked:hover { border-color: var(--djgold); box-shadow: 0 0 0 1px var(--djgold), 0 12px 40px rgba(138,92,246,.25); }
.dj-site .chip { border-color: var(--djline); color: var(--djink); background: rgba(255,255,255,.04); }
.dj-site .chip:hover { border-color: var(--djpink); color: #fff; }
.dj-site .arrow-list li::before { color: var(--djpink); }
.dj-site .breadcrumbs, .dj-site .breadcrumbs a { color: var(--djmute); }
.dj-site .btn-secondary { background: transparent; color: #fff; border-color: var(--djline); }
.dj-site .btn-call { background: linear-gradient(135deg, #E7C27A, #C9973F); color: #1a0f05; font-weight: 800; }
.dj-site .btn-wa { background: linear-gradient(135deg, #25D366, #128C4A); color: #fff; font-weight: 800; }
.dj-site .btn-call, .dj-site .btn-wa { min-height: 52px; padding-inline: 22px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.dj-site .btn-call { animation: djGlow 2.4s ease-in-out infinite; }
.dj-site .contact-bar { background: rgba(7,3,15,.92); border-top-color: var(--djline); backdrop-filter: blur(10px); }
/* header */
.djh { position: sticky; top: 0; z-index: 40; background: rgba(7,3,15,.72); backdrop-filter: blur(12px); border-bottom: 1px solid var(--djline); }
.djh-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.djh-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff !important; letter-spacing: .18em; font-weight: 900; }
.djh-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.djh-eq i { width: 4px; border-radius: 2px; background: linear-gradient(var(--djpink), var(--djgold)); animation: djEq 1.1s ease-in-out infinite; }
.djh-eq i:nth-child(2) { animation-delay: .15s } .djh-eq i:nth-child(3) { animation-delay: .3s } .djh-eq i:nth-child(4) { animation-delay: .45s }
.djh-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.djh-nav a { color: var(--djink) !important; text-decoration: none; padding: 8px 10px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.djh-nav a:hover { background: rgba(255,255,255,.08); }
.djh-lang { border: 1px solid var(--djline); }
.djh-logo b { white-space: nowrap; }
@media (max-width: 640px) {
  .djh-in { flex-wrap: nowrap; min-height: 56px; }
  .djh-logo { letter-spacing: .1em; font-size: .92rem; gap: 6px; }
  .djh-nav { flex-wrap: nowrap; gap: 0; }
  .djh-nav a { padding: 6px 8px; font-size: .88rem; }
  .djh-nav a:not(.djh-lang):nth-child(n+3) { display: none; }
}
/* stage */
.dj-stage { position: relative; overflow: hidden; min-height: min(88vh, 720px); display: grid; align-items: start; padding-block: 56px 0; }
.dj-stage-svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 78%; }
.dj-stage-copy { position: relative; z-index: 2; text-align: center; }
.dj-stage h1 { font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.15; margin: 8px auto 12px; max-width: 18ch; background: linear-gradient(90deg, #fff, var(--djgold), #fff, var(--djpink), #fff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: djShine 6s linear infinite; }
.dj-kicker { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--djline); color: var(--djgold); font-weight: 800; letter-spacing: .06em; }
.dj-lead { font-size: 1.2rem; color: var(--djink); margin: 0 auto 18px; }
.dj-stage .btn-row { justify-content: center; }
.dj-stage .beam { transform-box: fill-box; transform-origin: 50% 0; mix-blend-mode: screen; animation: djBeam 5s ease-in-out infinite alternate; }
.dj-stage .b2 { animation-duration: 6.5s; animation-delay: -2s } .dj-stage .b3 { animation-duration: 4.2s; animation-delay: -1s } .dj-stage .b4 { animation-duration: 7s; animation-delay: -3s }
.dj-stage .tile { fill: var(--djviolet); opacity: .18; animation: djTile 2.4s ease-in-out infinite; }
.dj-stage .t1 { fill: var(--djpink); animation-delay: .4s } .dj-stage .t2 { fill: var(--djcyan); animation-delay: .8s } .dj-stage .t3 { fill: var(--djgold); animation-delay: 1.2s } .dj-stage .t4 { animation-delay: 1.6s } .dj-stage .t5 { fill: var(--djpink); animation-delay: 2s }
.dj-stage .wave path { fill: none; stroke-width: 3; stroke-linecap: round; animation: djWave 4s linear infinite; }
.dj-stage .w1 { stroke: var(--djpink); opacity: .75 } .dj-stage .w2 { stroke: var(--djcyan); opacity: .55; animation-duration: 6s; animation-direction: reverse }
.dj-stage .cone { transform-box: fill-box; transform-origin: center; animation: djThump .48s ease-in-out infinite; }
.dj-stage .tweeter { animation: djTweet .96s ease-in-out infinite; }
.dj-stage .jog { transform-box: fill-box; transform-origin: center; animation: djSpin 2.2s linear infinite; }
.dj-stage .jog-r { animation-duration: 1.7s; animation-direction: reverse; }
.dj-stage .pad { fill: #241838; animation: djPad 1.9s steps(1) infinite; }
.dj-stage .p1 { animation-delay: .48s } .dj-stage .p2 { animation-delay: .96s } .dj-stage .p3 { animation-delay: 1.44s }
.dj-stage .fader { animation: djFader 3.2s ease-in-out infinite alternate; }
.dj-stage .bar { fill: url(#djBeamC); fill: var(--djgold); opacity: .8; transform-box: fill-box; transform-origin: 50% 100%; animation: djBar .9s ease-in-out infinite; }
.dj-stage .r1 { animation-delay: .1s; fill: var(--djpink) } .dj-stage .r2 { animation-delay: .25s } .dj-stage .r3 { animation-delay: .4s; fill: var(--djcyan) } .dj-stage .r4 { animation-delay: .55s } .dj-stage .r5 { animation-delay: .7s; fill: var(--djpink) } .dj-stage .r6 { animation-delay: .85s }
.dj-stage .petal { fill: #E0306E; opacity: .85; animation: djPetal 9s linear infinite; }
.dj-stage .pt1 { fill: #FF7AA8; animation-delay: -1.2s; animation-duration: 11s } .dj-stage .pt2 { fill: #C2185B; animation-delay: -3s } .dj-stage .pt3 { fill: #FFB3C7; animation-delay: -4.5s; animation-duration: 12s } .dj-stage .pt4 { animation-delay: -6s } .dj-stage .pt5 { fill: #FF7AA8; animation-delay: -7.5s; animation-duration: 10s } .dj-stage .pt6 { fill: #E7C27A; animation-delay: -2.2s }
@keyframes djBeam { from { transform: rotate(-14deg); opacity: .55 } to { transform: rotate(14deg); opacity: 1 } }
@keyframes djTile { 0%, 100% { opacity: .12 } 50% { opacity: .75 } }
@keyframes djWave { from { transform: translateX(0) } to { transform: translateX(-300px) } }
@keyframes djThump { 0%, 100% { transform: scale(1) } 40% { transform: scale(1.08) } }
@keyframes djTweet { 0%, 100% { stroke-width: 3 } 50% { stroke-width: 6 } }
@keyframes djSpin { to { transform: rotate(360deg) } }
@keyframes djPad { 0% { fill: #241838 } 25% { fill: #FF4FA3 } 50% { fill: #3FE0E8 } 75% { fill: #E7C27A } }
@keyframes djFader { from { transform: translateX(-56px) } to { transform: translateX(56px) } }
@keyframes djBar { 0%, 100% { transform: scaleY(.3) } 50% { transform: scaleY(2.4) } }
@keyframes djPetal { 0% { transform: translate(0, 0) rotate(0) } 50% { transform: translate(40px, 300px) rotate(180deg) } 100% { transform: translate(-20px, 620px) rotate(360deg); opacity: 0 } }
@keyframes djEq { 0%, 100% { height: 6px } 50% { height: 22px } }
@keyframes djShine { to { background-position: 300% 0 } }
@keyframes djGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(231,194,122,.55), 0 10px 30px rgba(0,0,0,.35) } 50% { box-shadow: 0 0 0 12px rgba(231,194,122,0), 0 10px 30px rgba(0,0,0,.35) } }
/* home sections */
.dj-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.dj-group { position: relative; padding: 22px; border-radius: 22px; border: 1px solid var(--djline); background: linear-gradient(160deg, rgba(138,92,246,.14), rgba(255,79,163,.06)); text-decoration: none; color: var(--djink) !important; overflow: hidden; transition: transform .25s, border-color .25s; }
.dj-group:hover { transform: translateY(-4px); border-color: var(--djgold); }
.dj-group .ico { font-size: 2.2rem; display: block; animation: djFloat 3s ease-in-out infinite; }
.dj-group b { display: block; color: #fff; font-size: 1.15rem; margin-top: 8px; }
@keyframes djFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.djf { margin-top: 48px; border-top: 1px solid var(--djline); background: rgba(0,0,0,.35); padding-block: 32px calc(90px + env(safe-area-inset-bottom)); }
.djf-cta { text-align: center; } .djf-cta p { font-size: 1.3rem; font-weight: 800; color: #fff; } .djf-cta .btn-row { justify-content: center; }
.djf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 28px; }
.djf-grid b { color: #fff; } .djf-grid ul { list-style: none; padding: 0; margin: 8px 0 0; } .djf-grid li { margin: 6px 0; }
.djf-copy { text-align: center; color: var(--djmute); margin-top: 24px; }
.dj-tracks { counter-reset: tr; list-style: none; padding: 0; }
.dj-tracks li { counter-increment: tr; display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--djline); }
.dj-tracks li::before { content: counter(tr); color: var(--djgold); font-weight: 800; min-width: 1.6em; }
.dj-tracks .ar-artist { color: var(--djmute); font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .dj-site *, .dj-site *::before { animation: none !important; transition: none !important; } }
/* Visitor memory strip */
.recent-box { margin-block: 12px 18px; padding: 14px 16px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--border)); background: color-mix(in srgb, var(--gold) 6%, var(--bg)); animation: recentIn .4s ease-out; }
.recent-h { margin: 4px 0 2px; font-weight: 800; color: var(--gold-text); }
.fav-btn { margin-block: -4px 10px; }
@keyframes recentIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ===== Brand v2 hero mark: assemble → neon edge → electric bolt; glass card; Pharaonic accents ===== */
.lk-hero { overflow: visible; filter: drop-shadow(0 24px 48px rgba(12,59,64,.28)); }
.lk-hero .h-glass { backdrop-filter: blur(8px); }
.lk-hero .h-a { animation: lkInL 1s cubic-bezier(.2,.8,.2,1) both; }
.lk-hero .h-l { animation: lkInR 1s cubic-bezier(.2,.8,.2,1) .15s both; }
.lk-hero .h-g1, .lk-hero .h-g2, .lk-hero .h-g3 { transform-box: fill-box; transform-origin: center; animation: lkGold .7s ease-out both; }
.lk-hero .h-g1 { animation-delay: .8s } .lk-hero .h-g2 { animation-delay: .95s } .lk-hero .h-g3 { animation-delay: 1.1s }
.lk-hero .h-edge { stroke-dasharray: 260; stroke-dashoffset: 260; animation: lkEdge 1.2s ease-out 1.2s forwards, lkGlow 3s ease-in-out 2.4s infinite; }
.lk-hero .h-bolt { stroke-dasharray: 320; stroke-dashoffset: 320; opacity: 0; animation: lkBolt 5s linear 2.6s infinite; }
.lk-hero .h-egypt { animation: lkFloat 6s ease-in-out infinite; }
.lk-hero .h-lotus { animation: lkFloat 7s ease-in-out -2s infinite; }
.lk-hero .h-cart { animation: lkFade 1s ease-out 1.6s both; }
@keyframes lkInL { from { opacity: 0; transform: translate(-28px, 18px) } to { opacity: 1; transform: none } }
@keyframes lkInR { from { opacity: 0; transform: translate(28px, -22px) } to { opacity: 1; transform: none } }
@keyframes lkGold { from { opacity: 0; transform: scale(.2) } to { opacity: 1; transform: none } }
@keyframes lkEdge { to { stroke-dashoffset: 0 } }
@keyframes lkGlow { 0%, 100% { opacity: .75 } 50% { opacity: 1; stroke-width: 3 } }
@keyframes lkBolt { 0%, 86% { opacity: 0; stroke-dashoffset: 320 } 88% { opacity: 1 } 92% { opacity: .2; stroke-dashoffset: 0 } 94% { opacity: 1 } 100% { opacity: 0; stroke-dashoffset: -320 } }
@keyframes lkFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes lkFade { from { opacity: 0 } to { opacity: 1 } }
.lk-mark.mark-anim { transition: transform .3s; } .brand:hover .lk-mark { transform: rotate(-6deg) scale(1.05); }
/* glass theme touches */
.site-header { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.hero-art { position: relative; }
.hero-art::before { content: ""; position: absolute; inset: 8% 10%; border-radius: 40px; background: radial-gradient(closest-side, rgba(94,231,238,.18), transparent); filter: blur(20px); z-index: -1; }
@media (prefers-reduced-motion: reduce) { .lk-hero * { animation: none !important; stroke-dashoffset: 0 !important; } .lk-hero .h-bolt { opacity: 0 !important; } }
.tip-box { border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 9%, var(--bg)), var(--bg)); }
.tip-h { font-weight: 800; color: var(--gold-text); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sp-label { position: static; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }