/* فكرة | المرحلة الأولى - تصميم متجاوب يبدأ من الجوال */
:root {
  color-scheme: light;
  --page: #fbfdff;
  --page-glow: #f6faff;
  --text: #213451;
  --muted: #6b7d97;
  --brand: #234a90;
  --line: rgba(92, 123, 165, .14);
  --glass: rgba(255, 255, 255, .70);
  --panel: #ffffff;
  --pill: #f0f6ff;
  --accent: #2e95d3;
  --shadow: 0 16px 55px rgba(43, 88, 150, .10);
}
html[data-theme="night"] {
  color-scheme: dark;
  --page: #111b34;
  --page-glow: #151f3b;
  --text: #f1f5ff;
  --muted: #b0c1dc;
  --brand: #d5e6ff;
  --line: rgba(215, 231, 255, .14);
  --glass: rgba(25, 41, 75, .77);
  --panel: #1e2c4b;
  --pill: #223552;
  --accent: #81c9f0;
  --shadow: 0 18px 56px rgba(1, 5, 26, .22);
}
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  font-family: 'Tajawal', 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  color: var(--text);
  background: var(--page);
  transition: background-color .35s, color .35s;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; height: 22px; width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-icons { position: absolute; width: 0; height: 0; overflow: hidden; }
button:focus-visible, a:focus-visible { outline: 3px solid #279ddd; outline-offset: 5px; }
[hidden] { display: none !important; }
.page-atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1;
  background:
  radial-gradient(ellipse at 50% 28%, rgba(236,246,255,.76), transparent 52%),
  radial-gradient(ellipse at 14% 56%, rgba(255,222,227,.26), transparent 39%),
  radial-gradient(ellipse at 86% 71%, rgba(198,228,255,.24), transparent 37%),
  linear-gradient(180deg, rgba(251,253,255,.98), rgba(247,250,255,.94)); }
.page-atmosphere::before,
.page-atmosphere::after { content: ''; position: absolute; inset: 0; }
.page-atmosphere::before {
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.95) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 16% 34%, rgba(133,170,232,.42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 24% 12%, rgba(255,255,255,.82) 0 1px, transparent 1.7px),
    radial-gradient(circle at 32% 27%, rgba(255,255,255,.95) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 41% 15%, rgba(176,149,244,.48) 0 1px, transparent 1.7px),
    radial-gradient(circle at 52% 21%, rgba(255,255,255,.88) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 63% 10%, rgba(255,255,255,.96) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 72% 28%, rgba(127,208,219,.42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 14%, rgba(255,255,255,.92) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 92% 24%, rgba(255,255,255,.82) 0 1px, transparent 1.7px),
    radial-gradient(circle at 12% 70%, rgba(255,255,255,.86) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 22% 84%, rgba(255,255,255,.92) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 38% 76%, rgba(255,206,136,.34) 0 1px, transparent 1.6px),
    radial-gradient(circle at 47% 88%, rgba(255,255,255,.88) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 59% 73%, rgba(255,255,255,.94) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 68% 91%, rgba(255,255,255,.82) 0 1px, transparent 1.7px),
    radial-gradient(circle at 79% 79%, rgba(190,166,248,.36) 0 1px, transparent 1.7px),
    radial-gradient(circle at 88% 68%, rgba(255,255,255,.92) 0 1.4px, transparent 1.9px);
  opacity: .8;
}
.page-atmosphere::after {
  background:
    radial-gradient(ellipse at 22% 19%, rgba(122,197,255,.12), transparent 31%),
    radial-gradient(ellipse at 81% 17%, rgba(212,160,246,.14), transparent 29%),
    radial-gradient(ellipse at 76% 74%, rgba(255,207,121,.10), transparent 23%),
    radial-gradient(ellipse at 18% 78%, rgba(122,225,208,.10), transparent 24%);
  filter: blur(8px);
  opacity: .95;
}
.page-atmosphere span { position: absolute; width: 340px; height: 340px; border-radius: 50%; filter: blur(72px); opacity: .42; }
.page-atmosphere span:nth-child(1) { top: 24%; right: -170px; background: #f5c8fb; }
.page-atmosphere span:nth-child(2) { top: 45%; left: -170px; background: #bce8ff; }
.page-atmosphere span:nth-child(3) { bottom: -220px; left: 25%; background: #fceac3; }
html[data-theme="night"] .page-atmosphere { background:
  radial-gradient(ellipse at 48% 24%, rgba(50,75,129,.50), transparent 44%),
  radial-gradient(ellipse at 20% 64%, rgba(115,80,165,.16), transparent 32%),
  radial-gradient(ellipse at 82% 70%, rgba(36,116,158,.18), transparent 28%),
  linear-gradient(180deg, #10192f, #121d39 48%, #111a33); }
html[data-theme="night"] .page-atmosphere::before { opacity: .9; filter: drop-shadow(0 0 3px rgba(255,255,255,.07)); }
html[data-theme="night"] .page-atmosphere::after { opacity: .78; }
html[data-theme="night"] .page-atmosphere span { opacity: .18; }
.site-shell { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; position: relative; }
.topbar { width: min(100% - 32px, 1160px); margin-inline: auto; height: 78px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 3; }
.brand { display: inline-flex; align-items: center; gap: 1px; min-height: 64px; font-weight: 900; white-space: nowrap; }
.brand img { width: 46px; height: 53px; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(80, 107, 155, .08)); }
.brand-name { font-size: 29px; color: var(--brand); letter-spacing: -1.4px; line-height: 1; }
.brand-period { color: #eea328; font-size: 26px; margin-inline-start: 1px; }
.toolbar { direction: ltr; display: flex; flex-direction: row; align-items: center; gap: 7px; }
.icon-button { width: 41px; height: 41px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--glass); color: var(--text); border-radius: 13px; transition: transform .2s, background .2s, border .2s, box-shadow .2s; }
.icon-button:hover { transform: translateY(-2px); border-color: rgba(84, 148, 203, .36); box-shadow: 0 5px 15px rgba(43, 88, 150, .09); }
.icon-button:active { transform: scale(.96); }
.icon-button svg { width: 19px; height: 19px; }
.sun-icon { display: none; }
html[data-theme="night"] .moon-icon { display: none; }
html[data-theme="night"] .sun-icon { display: block; }
.home-main { width: 100%; flex: 1; }
.intro { padding: 12px 16px 0; text-align: center; position: relative; z-index: 1; }
.intro__eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 5px; border: 1px solid rgba(103,165,216,.17); background: rgba(241,249,255,.8); border-radius: 99px; color: #5285ae; font-size: 12px; font-weight: 800; }
html[data-theme="night"] .intro__eyebrow { background: rgba(100,140,200,.14); color: #b2d6ed; }
.intro__eyebrow svg { width: 15px; height: 15px; stroke-width: 1.7; }
.intro h1 { font-size: clamp(29px, 7.2vw, 47px); font-weight: 900; line-height: 1.35; letter-spacing: -.8px; margin: 12px 0 5px; }
.intro h1 span { background: linear-gradient(110deg,#15aed0 5%,#5366df 56%,#bb6adb 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro p { margin: 0; color: var(--muted); font-weight: 600; font-size: clamp(13px,3.6vw,16px); }
.scene-chip { margin: 12px auto 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 5px; border-radius: 999px; background: rgba(255,255,255,.68); border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 700; }
.scene-chip strong { color: var(--brand); font-weight: 900; }
.scene-art { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.scene-art__piece { position: absolute; opacity: 0; transition: opacity .35s, transform .45s, background .35s, border-color .35s; }
.style-dialog { width: min(calc(100% - 36px), 760px); padding-bottom: 22px; }
.style-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 18px 0 18px; }
.style-card { text-align: right; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(244,248,255,.88)); border-radius: 18px; padding: 12px; min-height: 118px; display: flex; flex-direction: column; gap: 6px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.style-card:hover { transform: translateY(-2px); box-shadow: 0 14px 25px rgba(43,88,150,.10); }
.style-card.is-active { border-color: rgba(72,116,209,.42); box-shadow: 0 0 0 3px rgba(98,142,230,.10); }
.style-card strong { font-size: 15px; color: var(--text); }
.style-card small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.style-card--ghost { opacity: .88; cursor: default; }
.style-card--ghost:disabled { color: inherit; }
.style-card--ghost small::after { content: " • قريبًا"; color: #cf8d39; font-weight: 800; }
.interactive-dialog .dialog-decor { color: #f1a82f; }
.style-card__mini { display: block; height: 38px; border-radius: 13px; position: relative; overflow: hidden; background: rgba(244,248,255,.95); border: 1px solid rgba(92,123,165,.12); }
.style-card__mini::before, .style-card__mini::after { content: ''; position: absolute; }
.style-card__mini--crystals::before { inset: 8px auto auto 10px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.95), rgba(89,193,241,.18) 40%, rgba(89,193,241,.58)); box-shadow: 24px 3px 0 0 rgba(174,134,240,.62), 48px 1px 0 6px rgba(240,190,97,.55), 76px 3px 0 2px rgba(103,207,175,.52); }
.style-card__mini--tree::before { left: 50%; bottom: 4px; width: 10px; height: 18px; translate: -50% 0; border-radius: 8px; background: #8d6540; }
.style-card__mini--tree::after { inset: 6px 14px auto 14px; height: 20px; border-radius: 60% 40% 60% 40%/ 60% 40% 60% 40%; background: #bde5aa; box-shadow: 26px 0 0 0 #9ad8c5, 52px 3px 0 0 #d0bbf4, -24px 4px 0 0 #ffd3ab; }
.style-card__mini--palm::before { left: 50%; bottom: 4px; width: 8px; height: 18px; translate: -50% 0; border-radius: 8px; background: #9b7149; }
.style-card__mini--palm::after { left: 50%; top: 7px; width: 50px; height: 16px; translate: -50% 0; border-radius: 50% 50% 12px 12px; background: transparent; box-shadow: -24px 0 0 -2px #88c57d, -12px -2px 0 -2px #7ec06f, 0 -3px 0 -2px #6cb86d, 12px -2px 0 -2px #87cb85, 24px 0 0 -2px #a3d890; }
.style-card__mini--rain::before { left: 50%; top: 6px; width: 62px; height: 17px; translate: -50% 0; border-radius: 999px; background: #e8f2ff; box-shadow: -18px 4px 0 0 #e8f2ff, 18px 4px 0 0 #e8f2ff; }
.style-card__mini--rain::after { left: 50%; bottom: 5px; width: 6px; height: 12px; translate: -50% 0; background: #8ec5ff; border-radius: 6px 6px 10px 10px; box-shadow: -28px 0 0 0 #f0c17a, -14px 2px 0 0 #8fd3c5, 14px 0 0 0 #c49cff, 28px 2px 0 0 #6ea7ff; }
.style-card__mini--clouds::before { inset: 12px auto auto 12px; width: 26px; height: 12px; border-radius: 999px; background: #edf4ff; box-shadow: 34px -1px 0 0 #f6edff, 68px 0 0 0 #edf9f4; }
.style-card__mini--clouds::after { inset: 6px auto auto 18px; width: 10px; height: 10px; border-radius: 50%; background: #edf4ff; box-shadow: 10px 0 0 0 #edf4ff, 34px 0 0 0 #f6edff, 44px 0 0 0 #f6edff, 68px 0 0 0 #edf9f4, 78px 0 0 0 #edf9f4; }
.style-card__mini--network::before { inset: 18px auto auto 18px; width: 9px; height: 9px; border-radius: 50%; background: #6e9bf5; box-shadow: 28px -7px 0 0 #f0ba6b, 58px 4px 0 0 #a88fe9, 84px -8px 0 0 #82d4be, 17px 10px 0 2px rgba(110,155,245,.25); }
.style-card__mini--network::after { left: 22px; top: 22px; width: 72px; height: 1px; background: rgba(88,119,179,.3); transform: rotate(-6deg); box-shadow: 24px -6px 0 0 rgba(88,119,179,.3), 12px 8px 0 0 rgba(88,119,179,.3); }
@media (max-width: 640px) { .style-grid { grid-template-columns: 1fr; } }
.orbs-section { max-width: 1060px; padding: 0 3px; margin: 0 auto; position: relative; isolation: isolate; }
.ambient-ring { position: absolute; inset-inline-start: 50%; top: 42%; translate: -50% -50%; width: min(75vw, 630px); aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(133, 168, 217, .18); z-index: -1; pointer-events: none; }
.ambient-ring--two { width: min(54vw, 390px); border-color: rgba(167, 179, 218, .13); }
.orb-stage { width: min(100%, 510px); height: clamp(462px, 126vw, 620px); position: relative; margin: -3px auto 0; }
.orb { display: block; position: absolute; left: var(--x); top: var(--y); width: var(--diam); height: var(--diam); transform: translate(-50%, -50%); z-index: 1; border-radius: 50%; isolation: isolate; outline-offset: 4px; }
.orb:hover, .orb:focus-visible { z-index: 10; }
.orb__entrance, .orb__float, .orb__glass { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; }
.orb__entrance { animation: orb-appear 850ms cubic-bezier(.16, .9, .23, 1.12) both; animation-delay: calc(80ms + var(--order) * 95ms); }
.orb__float { animation: orb-float var(--float-speed, 9s) ease-in-out infinite alternate; animation-delay: calc(1s + var(--order) * 95ms); }
.orb__glass { position: relative; flex-direction: column; overflow: hidden; gap: 4px; border: 1.5px solid rgba(255,255,255,.92); color: var(--ink);
  background:
    radial-gradient(ellipse 56% 34% at 30% 13%, rgba(255,255,255,.95), rgba(255,255,255,.06) 92%, transparent),
    radial-gradient(circle at 83% 85%, rgba(var(--rgb), .55), transparent 44%),
    radial-gradient(circle at 8% 78%, rgba(var(--rgb), .22), transparent 47%),
    linear-gradient(145deg, rgba(255,255,255,.84) 2%, rgba(var(--rgb), .24) 46%, rgba(var(--rgb), .55) 100%);
  backdrop-filter: blur(6px) saturate(1.38);
  -webkit-backdrop-filter: blur(6px) saturate(1.38);
  box-shadow: 0 18px 30px -13px rgba(var(--rgb), .30), 0 7px 19px -12px rgba(20,47,94,.18), inset 0 5px 13px rgba(255,255,255,.86), inset 1px -8px 20px rgba(var(--rgb),.13);
  transition: transform .35s cubic-bezier(.2,.85,.3,1.3), box-shadow .35s;
}
.orb__glass::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; pointer-events: none; border: 1px solid rgba(255,255,255,.48); box-shadow: inset 0 3px 8px rgba(255,255,255,.58); }
.orb__glass::after { content: ''; position: absolute; inset-inline-end: 8%; top: 26%; width: 6px; height: 17px; border-radius: 50%; transform: rotate(-24deg); background: rgba(255,255,255,.85); filter: blur(2px); opacity: .9; }
.orb__glint { position: absolute; top: 17%; left: 21%; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 5px rgba(255,255,255,.55); opacity: .92; }
.orb__icon { position: relative; z-index: 1; width: 32px; height: 32px; margin-top: 3px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.orb__icon svg { width: 100%; height: 100%; stroke-width: 1.8; }
.orb__label { position: relative; z-index: 1; color: var(--ink); font-size: 17px; font-weight: 900; white-space: nowrap; letter-spacing: -.6px; line-height: 1.25; text-shadow: 0 1px 1px rgba(255,255,255,.75); }
.orb:hover .orb__glass, .orb:focus-visible .orb__glass { transform: scale(1.075); box-shadow: 0 24px 39px -11px rgba(var(--rgb), .41),0 8px 25px -12px rgba(20,47,94,.18),inset 0 5px 13px rgba(255,255,255,.9); }
.orb:active .orb__glass { transform: scale(1.025); }
.orb--family  { --rgb: 250,170,94;  --ink: #9a501d; --x:50%; --y:12%; --diam:108px; --float-speed:10s; }
.orb--kids    { --rgb: 89,193,241;  --ink: #11618c; --x:18%; --y:31%; --diam:102px; --float-speed:8.6s; }
.orb--teens   { --rgb: 174,134,240; --ink: #6435a6; --x:82%; --y:30%; --diam:108px; --float-speed:9.8s; }
.orb--youth   { --rgb: 94,144,239;  --ink: #254b9d; --x:50%; --y:51%; --diam:126px; --float-speed:11s; }
.orb--women   { --rgb: 248,142,188; --ink: #a1396c; --x:18%; --y:71%; --diam:105px; --float-speed:10.6s; }
.orb--seniors { --rgb: 103,207,175; --ink: #166d5b; --x:82%; --y:71%; --diam:110px; --float-speed:8.9s; }
.orb--adults  { --rgb: 240,190,97;  --ink: #875715; --x:50%; --y:90%; --diam:105px; --float-speed:10.3s; }

/* المشهد الافتراضي: البلورات */
html[data-scene="crystals"] .orb-stage { filter: none; }

/* الشجرة */
html[data-scene="tree"] .scene-art__piece { opacity: 1; }
html[data-scene="tree"] .scene-art__piece--1 { left: 50%; bottom: 5%; translate: -50% 0; width: 34px; height: 58%; border-radius: 22px; background: linear-gradient(180deg,#9d724c,#7f5737); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
html[data-scene="tree"] .scene-art__piece--2 { left: 50%; top: 18%; width: 2px; height: 56%; translate: -50% 0; background: rgba(131,92,64,.35); box-shadow: -104px 118px 0 0 rgba(131,92,64,.25), 104px 118px 0 0 rgba(131,92,64,.25), -98px 38px 0 0 rgba(131,92,64,.22), 98px 38px 0 0 rgba(131,92,64,.22); }
html[data-scene="tree"] .scene-art__piece--3, html[data-scene="tree"] .scene-art__piece--4, html[data-scene="tree"] .scene-art__piece--5, html[data-scene="tree"] .scene-art__piece--6 { display:none; }
html[data-scene="tree"] .orb__glass { border-radius: 70% 12% 70% 12% / 70% 12% 70% 12%; transform: rotate(var(--twist, 0deg)); background: radial-gradient(circle at 28% 16%, rgba(255,255,255,.92), rgba(255,255,255,.06) 48%, transparent), linear-gradient(145deg, rgba(255,255,255,.8), rgba(var(--rgb), .18) 44%, rgba(var(--rgb), .72)); }
html[data-scene="tree"] .orb__glass::before { border-radius: inherit; }
html[data-scene="tree"] .orb__glint { top: 22%; left: 20%; }
html[data-scene="tree"] .orb--family { --twist: 0deg; }
html[data-scene="tree"] .orb--kids { --twist: -24deg; }
html[data-scene="tree"] .orb--teens { --twist: 24deg; }
html[data-scene="tree"] .orb--youth { --twist: 0deg; }
html[data-scene="tree"] .orb--women { --twist: -18deg; }
html[data-scene="tree"] .orb--seniors { --twist: 18deg; }
html[data-scene="tree"] .orb--adults { --twist: 0deg; }

/* النخلة */
html[data-scene="palm"] .scene-art__piece { opacity: 1; }
html[data-scene="palm"] .scene-art__piece--1 { left: 50%; bottom: 8%; translate: -50% 0; width: 20px; height: 52%; border-radius: 14px; background: linear-gradient(180deg,#b2855c,#8b633f); }
html[data-scene="palm"] .scene-art__piece--2, html[data-scene="palm"] .scene-art__piece--3, html[data-scene="palm"] .scene-art__piece--4, html[data-scene="palm"] .scene-art__piece--5, html[data-scene="palm"] .scene-art__piece--6 { left: 50%; top: 23%; width: 120px; height: 3px; translate: -50% 0; background: rgba(108,164,104,.28); transform-origin: center; border-radius: 10px; opacity: .7; }
html[data-scene="palm"] .scene-art__piece--2 { transform: rotate(-55deg); }
html[data-scene="palm"] .scene-art__piece--3 { transform: rotate(-28deg); }
html[data-scene="palm"] .scene-art__piece--4 { transform: rotate(0deg); }
html[data-scene="palm"] .scene-art__piece--5 { transform: rotate(28deg); }
html[data-scene="palm"] .scene-art__piece--6 { transform: rotate(55deg); }
html[data-scene="palm"] .orb__glass { border-radius: 96% 14% 96% 14% / 90% 10% 90% 10%; transform: rotate(var(--twist,0deg)) scale(.78,1.24); background: radial-gradient(circle at 28% 14%, rgba(255,255,255,.9), rgba(255,255,255,.06) 46%, transparent), linear-gradient(155deg, rgba(255,255,255,.82), rgba(var(--rgb), .18) 43%, rgba(var(--rgb), .76)); }
html[data-scene="palm"] .orb__icon, html[data-scene="palm"] .orb__label { transform: scale(.88) translateY(-2px); }
html[data-scene="palm"] .orb--kids { --twist: -52deg; }
html[data-scene="palm"] .orb--teens { --twist: 52deg; }
html[data-scene="palm"] .orb--family { --twist: 0deg; }
html[data-scene="palm"] .orb--youth { --twist: 0deg; }
html[data-scene="palm"] .orb--women { --twist: -25deg; }
html[data-scene="palm"] .orb--seniors { --twist: 25deg; }
html[data-scene="palm"] .orb--adults { --twist: 0deg; }

/* الغيمة والقطرات */
html[data-scene="rain"] .scene-art__piece { opacity: 1; }
html[data-scene="rain"] .scene-art__piece--1 { left: 50%; top: 9%; translate: -50% 0; width: 170px; height: 44px; border-radius: 999px; background: rgba(243,248,255,.95); box-shadow: -48px 14px 0 0 rgba(243,248,255,.95), 48px 14px 0 0 rgba(243,248,255,.95), 0 20px 36px rgba(147,174,214,.15); }
html[data-scene="rain"] .scene-art__piece--2, html[data-scene="rain"] .scene-art__piece--3, html[data-scene="rain"] .scene-art__piece--4, html[data-scene="rain"] .scene-art__piece--5, html[data-scene="rain"] .scene-art__piece--6 { top: 18%; width: 2px; height: 46px; background: linear-gradient(180deg, rgba(159,197,255,.05), rgba(159,197,255,.25)); border-radius: 10px; }
html[data-scene="rain"] .scene-art__piece--2 { left: 25%; }
html[data-scene="rain"] .scene-art__piece--3 { left: 39%; }
html[data-scene="rain"] .scene-art__piece--4 { left: 50%; }
html[data-scene="rain"] .scene-art__piece--5 { left: 62%; }
html[data-scene="rain"] .scene-art__piece--6 { left: 76%; }
html[data-scene="rain"] .orb__glass { border-radius: 54% 54% 64% 64% / 40% 40% 82% 82%; background: radial-gradient(circle at 33% 12%, rgba(255,255,255,.95), rgba(255,255,255,.05) 38%, transparent), linear-gradient(180deg, rgba(255,255,255,.76), rgba(var(--rgb), .26) 38%, rgba(var(--rgb), .72)); }
html[data-scene="rain"] .orb__glass::before { inset: 10px 24px auto 24px; height: 18px; border-radius: 100% 100% 55% 55%; border: 0; background: rgba(255,255,255,.28); box-shadow: none; }
html[data-scene="rain"] .orb__glass::after { display:none; }

/* الغيوم */
html[data-scene="clouds"] .orb__glass { width: 118%; height: 72%; margin: auto -9%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(var(--rgb), .28) 65%, rgba(var(--rgb), .46)); box-shadow: 0 18px 30px -13px rgba(var(--rgb), .26), 0 7px 19px -12px rgba(20,47,94,.12), inset 0 5px 13px rgba(255,255,255,.86); }
html[data-scene="clouds"] .orb__glass::before { inset: auto; left: 16%; top: -16%; width: 28%; height: 52%; border-radius: 50%; border: 0; background: inherit; box-shadow: 28px 0 0 0 rgba(255,255,255,.93), 56px 10px 0 -2px rgba(255,255,255,.88); }
html[data-scene="clouds"] .orb__glass::after { display:none; }
html[data-scene="clouds"] .orb__glint { top: 10%; }
html[data-scene="clouds"] .scene-art__piece { opacity: .18; border-radius: 999px; background: #eef4ff; }
html[data-scene="clouds"] .scene-art__piece--1 { left: 10%; top: 16%; width: 80px; height: 24px; }
html[data-scene="clouds"] .scene-art__piece--2 { right: 8%; top: 12%; width: 100px; height: 28px; }
html[data-scene="clouds"] .scene-art__piece--3 { left: 12%; bottom: 15%; width: 94px; height: 26px; }
html[data-scene="clouds"] .scene-art__piece--4 { right: 11%; bottom: 18%; width: 86px; height: 22px; }
html[data-scene="clouds"] .scene-art__piece--5, html[data-scene="clouds"] .scene-art__piece--6 { display:none; }

/* الشبكة */
html[data-scene="network"] .ambient-ring { display:none; }
html[data-scene="network"] .scene-art__piece { opacity: 1; height: 2px; background: linear-gradient(90deg, rgba(107,138,196,.18), rgba(107,138,196,.42), rgba(107,138,196,.18)); transform-origin: left center; }
html[data-scene="network"] .scene-art__piece--1 { left: 21%; top: 33%; width: 28%; transform: rotate(-15deg); }
html[data-scene="network"] .scene-art__piece--2 { left: 49%; top: 31%; width: 24%; transform: rotate(17deg); }
html[data-scene="network"] .scene-art__piece--3 { left: 24%; top: 70%; width: 28%; transform: rotate(18deg); }
html[data-scene="network"] .scene-art__piece--4 { left: 48%; top: 69%; width: 26%; transform: rotate(-16deg); }
html[data-scene="network"] .scene-art__piece--5 { left: 35%; top: 49%; width: 15%; transform: rotate(89deg); }
html[data-scene="network"] .scene-art__piece--6 { left: 51%; top: 48%; width: 15%; transform: rotate(90deg); }
html[data-scene="network"] .orb__glass { border: 2px solid rgba(var(--rgb),.28); background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.94), rgba(255,255,255,.06) 36%, transparent), radial-gradient(circle at center, rgba(var(--rgb), .18), rgba(var(--rgb), .05)); box-shadow: 0 0 0 10px rgba(var(--rgb), .05), 0 0 0 1px rgba(var(--rgb), .18), 0 16px 28px -18px rgba(var(--rgb), .35); }
html[data-scene="network"] .orb__glint { width: 9px; height: 9px; box-shadow: 0 0 0 7px rgba(var(--rgb), .12), 0 0 16px 6px rgba(var(--rgb), .15); background: rgba(var(--rgb), .92); top: 16%; left: 17%; }
html[data-scene="network"] .orb:hover .orb__glass, html[data-scene="network"] .orb:focus-visible .orb__glass { box-shadow: 0 0 0 12px rgba(var(--rgb), .08), 0 0 0 1px rgba(var(--rgb), .28), 0 18px 30px -18px rgba(var(--rgb), .46); }
.orbs-hint { margin: 1px 0 20px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; }
.orbs-hint span { font-size: 10px; padding: 0 8px; color: #d3a8d9; }
.site-footer { width: min(100% - 32px, 1160px); margin: auto auto 0; padding: 13px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 600; }
.site-footer span span { color: #e7a83d; }
.idea-fab { position: fixed; z-index: 12; bottom: max(18px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); display: inline-flex; align-items: center; gap: 7px; overflow: hidden; padding: 6px 7px 6px 17px; min-height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); background: linear-gradient(110deg,#3359a9,#487cdb 67%,#619be8); color: #fff; box-shadow: 0 10px 25px rgba(54,107,183,.28), inset 0 2px 4px rgba(255,255,255,.27); transition: transform .25s, box-shadow .25s; }
.idea-fab:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(54,107,183,.34); }
.idea-fab__icon { background: rgba(255,255,255,.20); width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; }
.idea-fab__icon svg { width: 23px; height: 23px; stroke-width: 2; }
.idea-fab__label { font-size: 15px; font-weight: 800; padding-top: 3px; white-space: nowrap; }
.idea-fab__shine { pointer-events: none; position: absolute; inset: -20px auto auto -37px; width: 20px; height: 100px; background: rgba(255,255,255,.16); transform: rotate(25deg); }
/* V1.15.5: Show only the lightbulb on activity results pages; keep the full CTA inside the page. */
.idea-fab--icon-only { width: 58px; height: 58px; min-height: 58px; padding: 6px; gap: 0; justify-content: center; border-radius: 50%; }
.idea-fab--icon-only .idea-fab__icon { width: 44px; height: 44px; flex: 0 0 44px; }
.idea-fab--icon-only .idea-fab__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Off-canvas navigation */
.nav-scrim { position: fixed; inset: 0; z-index: 18; background: rgba(13,31,55,.36); backdrop-filter: blur(3px); }
.navigation-panel { position: fixed; inset-block: 0; right: 0; z-index: 19; background: var(--panel); color: var(--text); width: min(86vw,360px); padding: 24px 23px; overflow-y: auto; box-shadow: -16px 0 38px rgba(20,43,80,.16); transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility .28s; }
.navigation-panel.is-open { transform: translateX(0); visibility: visible; }
.navigation-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.navigation-title { font-size: 24px; font-weight: 900; color: var(--brand); }
.navigation-title span { color: #eaa43f; }
.navigation-caption { font-size: 14px; color: var(--muted); margin: 9px 0 17px; }
.navigation-links { display: grid; gap: 4px; }
.navigation-link { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 6px 12px; border-radius: 12px; font-size: 15px; font-weight: 700; transition: background .2s; }
.navigation-link:hover, .navigation-link:focus-visible { background: var(--pill); }
.navigation-link svg { width: 16px; height: 16px; opacity: .45; }
.navigation-bottom { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
body.menu-open { overflow: hidden; }
/* Lightweight informational dialogs: forms not yet approved */
.info-dialog { position: fixed; inset: 0; margin: auto; border: 1px solid var(--line); border-radius: 25px; background: var(--panel); color: var(--text); width: min(calc(100% - 36px), 410px); padding: 32px 25px 25px; text-align: center; box-shadow: 0 25px 70px rgba(17,43,88,.2); }
.info-dialog::backdrop { background: rgba(10,25,53,.48); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; top: 12px; left: 12px; }
.dialog-decor { background: var(--pill); color: #3a83c5; width: 68px; height: 68px; margin: 0 auto 12px; border-radius: 23px; display: grid; place-items: center; }
.dialog-decor svg { width: 31px; height: 31px; }
.dialog-decor--idea { color: #f1a82f; }
.info-dialog h2 { font-size: 23px; margin: 9px 0; font-weight: 900; }
.info-dialog p { color: var(--muted); font-size: 15px; line-height: 1.9; margin: 0 auto 21px; max-width: 32ch; }
.dialog-done { background: #345fae; color: white; border: 0; border-radius: 13px; min-height: 42px; min-width: 124px; font-weight: 800; padding: 7px 22px; }
/* Destination pages: no invented content */
.category-main { flex: 1; width: min(100% - 34px, 1000px); margin-inline: auto; position: relative; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 14px; color: var(--muted); font-weight: 700; }
.back-link svg { width: 17px; height: 17px; transform: scaleX(-1); }
.category-display { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 30px; }
.category-kicker { font-size: 13px; color: var(--muted); font-weight: 800; margin-bottom: 15px; }
.category-bubble { position: relative; width: 155px; height: 155px; margin: 0 auto 17px; }
.category-bubble .orb__glass { gap: 10px; }
.category-bubble .orb__icon { width: 46px; height: 46px; }
.category-bubble .orb__label { font-size: 22px; }
.category-display h1 { font-size: clamp(27px,7vw,40px); margin: 3px 0 0; }
.category-display > p { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 450px; margin: 7px 0 25px; }
.coming-soon { border: 1px solid var(--line); background: var(--glass); box-shadow: var(--shadow); border-radius: 18px; color: var(--muted); max-width: 490px; padding: 17px 20px; font-size: 14px; line-height: 1.8; display: flex; align-items: center; gap: 12px; text-align: right; }
.coming-soon svg { color: #bc90cd; width: 28px; height: 28px; flex-shrink: 0; }
@keyframes orb-appear { from { opacity: 0; transform: scale(.56); filter: blur(4px); } 62% { opacity: 1; } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes orb-float { 0% { transform: translate3d(0,2px,0) rotate(-1.1deg); } 50% { transform: translate3d(2px,-5px,0) rotate(.6deg); } 100% { transform: translate3d(-2px,4px,0) rotate(1.3deg); } }
@media (min-width: 560px) {
  .topbar { height: 88px; }
  .intro { padding-top: 16px; }
  .intro h1 br { display: none; }
  .orb-stage { width: min(100%,750px); height: 565px; }
  .orb--family { --diam: 140px; --y: 14%; }
  .orb--kids { --diam: 135px; --x: 25%; --y: 32%; }
  .orb--teens { --diam: 142px; --x: 77%; --y: 31%; }
  .orb--youth { --diam: 159px; --y: 52%; }
  .orb--women { --diam: 138px; --x: 25%; --y: 76%; }
  .orb--seniors { --diam: 142px; --x: 76%; --y: 75%; }
  .orb--adults { --diam: 138px; --y: 91%; }
  .orb__label { font-size: 19px; }
  .orb__icon { height: 40px; width: 40px; }
}
@media (min-width: 900px) {
  .topbar { height: 94px; }
  .brand img { width: 60px; height: 69px; }
  .brand-name { font-size: 34px; }
  .toolbar { gap: 11px; }
  .icon-button { width: 45px; height: 45px; }
  .intro { padding-top: 4px; }
  .intro h1 { margin-top: 10px; }
  .orb-stage { height: 590px; width: 875px; margin-top: 0; }
  .orb--family { --diam: 159px; --y: 15%; }
  .orb--kids { --diam: 149px; --x: 24%; --y: 32%; }
  .orb--teens { --diam: 155px; --x: 75%; --y: 31%; }
  .orb--youth { --diam: 178px; --y: 52%; }
  .orb--women { --diam: 159px; --x: 23%; --y: 76%; }
  .orb--seniors { --diam: 160px; --x: 76%; --y: 75%; }
  .orb--adults { --diam: 153px; --y: 91%; }
  .idea-fab { right: max(32px, calc((100vw - 1170px) / 2)); bottom: 25px; }
}
@media (max-width: 360px) {
  .topbar { width: min(100% - 22px, 1160px); height: 72px; }
  .toolbar { gap: 4px; }
  .icon-button { width: 37px; height: 37px; }
  .brand img { width: 40px; height: 49px; }
  .brand-name { font-size: 26px; }
  .orb--family { --diam: 100px; }
  .orb--kids { --diam: 94px; }
  .orb--teens { --diam: 99px; }
  .orb--youth { --diam: 113px; }
  .orb--women { --diam: 96px; }
  .orb--seniors { --diam: 100px; }
  .orb--adults { --diam: 98px; }
  .orb__icon { width: 28px; height: 28px; }
  .orb__label { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Wordmark from the previously approved brand artwork */
.brand .brand-wordmark { width: 91px; height: 44px; object-fit: contain; }
html[data-theme="night"] .brand .brand-wordmark { filter: brightness(0) invert(1); opacity: .96; }
@media(max-width:360px){.brand .brand-wordmark { width: 79px; height: 39px; }}
@media(min-width:900px){.brand .brand-wordmark { width: 111px; height: 52px; }}

/* V1.4: style chooser stays usable inside a 390px phone iframe. */
.style-dialog { max-height: min(92dvh, 790px); overflow-y: auto; overscroll-behavior: contain; }
@media(max-width:440px) {
  .style-dialog { width: calc(100% - 22px); padding: 29px 14px 18px; border-radius: 19px; }
  .style-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 12px 0; }
  .style-card { padding: 9px; min-height: 105px; }
  .style-card strong { font-size: 13px; }
  .style-card small { font-size: 11px; }
  .style-card__mini { height: 31px; }
  .style-dialog h2 { margin: 5px 0; font-size: 21px; }
  .style-dialog p { font-size: 12px; line-height: 1.65; margin-bottom: 7px; }
}

/* V1.7 — الاستايلات التفاعلية */
.interactive-dialog {
  width: min(calc(100% - 24px), 980px);
  padding-inline: 18px;
}
.interactive-dialog > p {
  max-width: 68ch;
  margin-bottom: 14px;
}
.interactive-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 14px;
}
.interactive-mode {
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,248,255,.92));
  color: var(--muted);
  font-weight: 800;
  padding: 8px 16px;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.interactive-mode:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(43,88,150,.08); color: var(--text); }
.interactive-mode.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #3d71cf, #6d92ea);
  box-shadow: 0 12px 26px rgba(63, 114, 204, .24);
}
.interactive-scene-meta {
  display: grid;
  gap: 4px;
  margin-bottom: 16px;
}
.interactive-scene-meta strong { font-size: 18px; color: var(--brand); }
.interactive-scene-meta span { font-size: 13px; color: var(--muted); }
.interactive-preview {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 18% 18%, rgba(208, 231, 255, .28), transparent 42%),
    radial-gradient(ellipse at 84% 20%, rgba(247, 220, 255, .22), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.95));
  min-height: 500px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.66), 0 18px 45px rgba(31,66,116,.08);
}
.interactive-scene {
  display: none;
  min-height: 500px;
  padding: 20px 18px 26px;
}
.interactive-scene.is-active { display: block; }

/* Galaxy */
.galaxy-stage {
  --orbit-rotation: -10deg;
  --orbit-radius: min(31vw, 190px);
  position: relative;
  width: 100%;
  min-height: 454px;
  border-radius: 22px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  background: radial-gradient(circle at center, rgba(255,255,255,.85), rgba(240,246,255,.35) 33%, transparent 72%);
}
.galaxy-stage.is-dragging { cursor: grabbing; }
.galaxy-stage::before,
.galaxy-stage::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px dashed rgba(110, 155, 215, .18);
  pointer-events: none;
}
.galaxy-stage::before { width: calc(var(--orbit-radius) * 2.1); height: calc(var(--orbit-radius) * 2.1); }
.galaxy-stage::after { width: calc(var(--orbit-radius) * 2.55); height: calc(var(--orbit-radius) * 2.55); opacity: .45; }
.galaxy-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: calc(var(--orbit-radius) * 2.55);
  height: calc(var(--orbit-radius) * 2.55);
  border-radius: 50%;
  border: 1.5px solid rgba(102, 145, 217, .18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 0 30px rgba(93,136,202,.08);
  transform: rotate(var(--orbit-rotation));
  pointer-events: none;
}
.galaxy-core {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.7) 28%, rgba(156,198,255,.14) 58%, rgba(250,255,255,.08));
  box-shadow: 0 18px 38px rgba(63,108,182,.15), inset 0 0 0 1px rgba(255,255,255,.8);
}
.galaxy-core img { width: 64px; height: 70px; object-fit: contain; position: relative; z-index: 1; }
.galaxy-core__glow {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,243,195,.72), rgba(255,215,126,.14) 40%, transparent 72%);
  filter: blur(4px);
}
.interactive-node {
  position: absolute;
  top: 50%;
  left: 50%;
  --angle: calc((360deg / var(--galaxy-node-count, 7)) * var(--orbit-index) + var(--orbit-rotation));
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--orbit-radius))) rotate(calc(-1 * var(--angle)));
  transition: filter .25s ease;
  z-index: 1;
}
.interactive-node:hover,
.interactive-node:focus-visible { filter: brightness(1.03); }
.interactive-node__shell {
  width: 108px;
  min-height: 108px;
  padding: 14px 10px;
  display: grid;
  place-items: center;
  gap: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.95), rgba(255,255,255,.18) 38%, rgba(var(--rgb), .15)), linear-gradient(160deg, rgba(255,255,255,.92), rgba(var(--rgb), .16) 38%, rgba(var(--rgb), .54));
  border: 1px solid rgba(var(--rgb), .22);
  box-shadow: 0 14px 32px rgba(var(--rgb), .16), inset 0 0 0 1px rgba(255,255,255,.65);
}
/* V1.10 — hover/tap/focus spotlight; orbit positioning remains untouched. */
.interactive-node__shell {
  transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s ease, box-shadow .34s ease, filter .34s ease;
  transform-origin: center center;
}
.galaxy-stage.has-active-node .interactive-node__shell {
  transform: scale(.91);
  opacity: .77;
  filter: saturate(.88);
}
.galaxy-stage.has-active-node .interactive-node.is-highlighted { z-index: 9; }
.galaxy-stage.has-active-node .interactive-node.is-highlighted .interactive-node__shell {
  transform: scale(1.14);
  opacity: 1;
  filter: saturate(1.15);
  box-shadow: 0 19px 37px rgba(var(--rgb), .35), 0 0 0 7px rgba(var(--rgb), .10), inset 0 0 0 1px rgba(255,255,255,.82);
}
@media (prefers-reduced-motion: reduce) {
  .interactive-node__shell { transition-duration: .01ms !important; }
  .galaxy-orbit { transform: none !important; }
}
.interactive-node__icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink); }
.interactive-node__label { color: var(--ink); font-size: 15px; font-weight: 900; }

/* Honeycomb */
.honeycomb-stage {
  max-width: 620px;
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  justify-items: center;
  align-items: center;
  min-height: 440px;
}
.honey-node {
  width: 126px;
  height: 140px;
  display: grid;
  place-items: center;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(var(--rgb), .18) 42%, rgba(var(--rgb), .5));
  border: 1px solid rgba(var(--rgb), .22);
  box-shadow: 0 18px 34px rgba(var(--rgb), .16), inset 0 0 0 1px rgba(255,255,255,.8);
  transition: transform .22s ease, box-shadow .22s ease;
}
.honey-node:hover,
.honey-node:focus-visible { transform: translateY(-6px) scale(1.03); box-shadow: 0 22px 42px rgba(var(--rgb), .25), inset 0 0 0 1px rgba(255,255,255,.88); }
.honey-node__inner {
  width: 82%;
  text-align: center;
  display: grid;
  gap: 7px;
  place-items: center;
}
.honey-node__icon { color: var(--ink); width: 34px; height: 34px; display: grid; place-items: center; }
.honey-node__label { color: var(--ink); font-weight: 900; font-size: 17px; line-height: 1.25; }
.honey-node--1 { grid-column: 2; grid-row: 1; }
.honey-node--2 { grid-column: 3; grid-row: 1; }
.honey-node--3 { grid-column: 1; grid-row: 2; }
.honey-node--4 { grid-column: 2; grid-row: 2; }
.honey-node--5 { grid-column: 3; grid-row: 2; }
.honey-node--6 { grid-column: 4; grid-row: 2; }
.honey-node--7 { grid-column: 2 / span 2; grid-row: 3; }

/* Wheel */
.wheel-stage {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 8px;
  align-items: center;
  min-height: 340px;
}
.wheel-control {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.84);
  color: var(--brand);
  box-shadow: 0 10px 22px rgba(31,66,116,.08);
}
.wheel-control:first-of-type svg { transform: rotate(180deg); }
.wheel-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 34%;
  padding: 18px 28%;
  scrollbar-width: none;
}
.wheel-track::-webkit-scrollbar { display: none; }
.wheel-item {
  flex: 0 0 170px;
  min-height: 200px;
  padding: 18px 14px;
  border-radius: 34px;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  background: radial-gradient(circle at 26% 20%, rgba(255,255,255,.95), rgba(255,255,255,.18) 38%, rgba(var(--rgb), .12)), linear-gradient(160deg, rgba(255,255,255,.92), rgba(var(--rgb), .14) 38%, rgba(var(--rgb), .55));
  border: 1px solid rgba(var(--rgb), .22);
  box-shadow: 0 18px 34px rgba(var(--rgb), .13), inset 0 0 0 1px rgba(255,255,255,.74);
  transform: scale(.88);
  opacity: .66;
  transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease;
}
.wheel-item.is-centered,
.wheel-item:hover,
.wheel-item:focus-visible {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 24px 42px rgba(var(--rgb), .18), inset 0 0 0 1px rgba(255,255,255,.82);
}
.wheel-item__icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); }
.wheel-item__label { font-size: 20px; font-weight: 900; color: var(--ink); }
.wheel-guide {
  display: flex;
  justify-content: center;
  margin-top: -16px;
}
.wheel-guide span {
  width: 120px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(120,157,221,.15), rgba(91,137,219,.45), rgba(120,157,221,.15));
}

@keyframes rotate-slow { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 760px) {
  .interactive-dialog { width: min(calc(100% - 18px), 980px); padding-inline: 12px; }
  .interactive-preview,
  .interactive-scene { min-height: 440px; }
  .galaxy-stage { min-height: 390px; --orbit-radius: min(30vw, 140px); }
  .galaxy-core { width: 94px; height: 94px; }
  .galaxy-core img { width: 52px; height: 58px; }
  .interactive-node__shell { width: 85px; min-height: 85px; }
  .interactive-node__label { font-size: 12px; }
  .honeycomb-stage { max-width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 400px; }
  .honey-node { width: 104px; height: 118px; }
  .honey-node__label { font-size: 14px; }
  .honey-node--1 { grid-column: 1; grid-row: 1; }
  .honey-node--2 { grid-column: 2; grid-row: 1; }
  .honey-node--3 { grid-column: 3; grid-row: 1; }
  .honey-node--4 { grid-column: 1; grid-row: 2; }
  .honey-node--5 { grid-column: 2; grid-row: 2; }
  .honey-node--6 { grid-column: 3; grid-row: 2; }
  .honey-node--7 { grid-column: 2; grid-row: 3; }
  .wheel-track { padding-inline: 14%; scroll-padding-inline: 22%; }
  .wheel-item { flex-basis: 145px; min-height: 178px; }
}

@media (max-width: 520px) {
  .interactive-switcher { display: grid; grid-template-columns: 1fr; }
  .interactive-mode { width: 100%; }
  .interactive-preview, .interactive-scene { min-height: 390px; }
  .galaxy-stage { --orbit-radius: 118px; min-height: 340px; }
  .interactive-node__shell { width: 74px; min-height: 74px; padding: 10px 6px; }
  .interactive-node__icon { width: 22px; height: 22px; }
  .interactive-node__label { font-size: 11px; }
  .wheel-stage { grid-template-columns: 34px 1fr 34px; }
  .wheel-control { width: 34px; height: 34px; }
  .wheel-track { gap: 10px; padding-inline: 12%; scroll-padding-inline: 20%; }
  .wheel-item { flex-basis: 126px; min-height: 160px; border-radius: 28px; }
  .wheel-item__label { font-size: 16px; }
}

/* V1.8: keep interactive experiences contained within a true mobile viewport. */
.interactive-dialog { max-height: min(92dvh, 900px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width:520px) {
 .interactive-dialog { width: calc(100% - 16px); padding: 28px 10px 14px; }
 .interactive-dialog .dialog-decor { width: 48px; height: 48px; margin-bottom: 5px; }
 .interactive-dialog h2 { font-size: 20px; }
 .interactive-dialog > p { font-size: 12px; line-height: 1.6; }
 .interactive-switcher { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
 .interactive-mode { min-height: 43px; padding: 7px 4px; font-size: 10px; }
 .interactive-scene-meta strong { font-size: 15px; }
 .interactive-scene-meta span { font-size: 11px; }
 .interactive-scene { padding: 14px 10px 20px; }
 .galaxy-stage { --orbit-radius: min(30vw, 110px); }
 .galaxy-core { width: 82px; height: 82px; }
 .galaxy-core img { width: 44px; height: 49px; }
 .interactive-node__shell { width: 68px; min-height: 68px; }
 .interactive-node__label { font-size: 10px; }
 .honeycomb-stage { gap: 7px; }
 .honey-node { width: min(100%,91px); height: 100px; }
 .honey-node__label { font-size: 12px; }
 .honey-node__icon { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
 .galaxy-orbit { animation: none !important; }
}


/* V1.9 — Apply interactive scenes to the homepage; preserve existing artwork. */
.home-interactive-section { display: none; width: min(calc(100% - 26px), 850px); margin: 16px auto 28px; }
html[data-active-mode="interactive"] .orbs-section { display: none; }
html[data-active-mode="interactive"] .home-interactive-section { display: block; }
.home-interactive-section .interactive-preview { min-height: 500px; }
.home-interactive-section .interactive-scene { padding: 14px 16px 18px; }
.apply-interactive { min-width: 180px; background: linear-gradient(110deg,#345fae,#5383de); }
.apply-interactive:focus-visible { outline-offset: 3px; }
@media (max-width:520px) {
  .home-interactive-section { width: calc(100% - 18px); margin-top: 14px; }
  .home-interactive-section .interactive-scene { padding: 12px 8px 20px; }
  .home-interactive-section .galaxy-stage { --orbit-radius: min(30vw, 110px); min-height: 370px; }
  .home-interactive-section .honeycomb-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .home-interactive-section .honey-node { width: min(100%, 92px); height: 105px; }
  .home-interactive-section .honey-node__label { font-size: 12px; }
}


/* V1.12 — Decorative connecting lines and breathing centers.
   Based on the validated V1.10 preview version; no preview CSS changes. */
@keyframes fekrah-halo-breathe {
  0%,100% { transform: translate(-50%, -50%) scale(.95); opacity:.35; }
  50% { transform: translate(-50%, -50%) scale(1.07); opacity:.78; }
}
@keyframes fekrah-fab-glow {
  0%,100% { box-shadow:0 10px 25px rgba(54,107,183,.28),inset 0 2px 4px rgba(255,255,255,.27); }
  50% { box-shadow:0 10px 31px 4px rgba(78,137,235,.40),inset 0 2px 5px rgba(255,255,255,.36); }
}
@keyframes fekrah-lamp-breathe {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.095); }
}
.idea-fab { animation: fekrah-fab-glow 4.2s ease-in-out infinite; }
.idea-fab__icon { animation: fekrah-lamp-breathe 3.1s ease-in-out infinite; }
.idea-fab:hover,.idea-fab:focus-visible { animation-play-state:paused; }

/* Artistic network — connections resize with the positions of all 7 nodes. */
.network-wiring { display:none; position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
html[data-scene="network"] .network-wiring { display:block; }
html[data-scene="network"] .scene-art__piece { opacity:0 !important; }
html[data-scene="network"] .orb { z-index:2; }
.network-wire { stroke:rgba(86,140,220,.29); stroke-width:1.75px; stroke-linecap:round; filter:drop-shadow(0 0 2px rgba(72,141,225,.12)); }
.network-wire--secondary { stroke:rgba(117,155,204,.14); stroke-width:1.2px; }
.network-wire-dot { fill:rgba(115,165,230,.42); }
.network-hub-ring { display:none; position:absolute; top:50%; left:50%; z-index:0; border:1.5px solid rgba(96,147,224,.35); background:radial-gradient(circle,rgba(158,201,255,.11),transparent 65%); border-radius:50%; pointer-events:none; animation:fekrah-halo-breathe 4s ease-in-out infinite; }
html[data-scene="network"] .orb--youth .network-hub-ring { display:block; }
.network-hub-ring--one { width:calc(var(--diam) + 23px); height:calc(var(--diam) + 23px); }
.network-hub-ring--two { width:calc(var(--diam) + 57px); height:calc(var(--diam) + 57px); animation-delay:-2s; border-style:dashed; border-color:rgba(105,153,227,.19); }
html[data-scene="network"] .orb--youth .orb__entrance { position:relative; z-index:1; }

/* Interactive galaxy — seven spokes follow the same CSS orbit rotation as the planets. */
.galaxy-spokes { position:absolute; inset:0; z-index:0; pointer-events:none; }
.galaxy-spoke { position:absolute; left:50%; top:50%; width:var(--orbit-radius); height:1.5px; transform-origin:0 50%; transform:rotate(calc(-90deg + (360deg / var(--galaxy-node-count, 7)) * var(--orbit-index) + var(--orbit-rotation))); background:linear-gradient(90deg,rgba(87,139,225,.20),rgba(103,160,234,.35) 55%,rgba(109,170,237,.05)); border-radius:999px; box-shadow:0 0 8px rgba(104,159,231,.11); }
.galaxy-core { z-index:2; }
.galaxy-orbit { z-index:0; }
.galaxy-stage .interactive-node { z-index:3; }
.galaxy-center-ring { position:absolute; top:50%; left:50%; border:1.5px solid rgba(98,151,227,.28); border-radius:50%; background:radial-gradient(circle,rgba(214,237,255,.1),transparent 70%); pointer-events:none; animation:fekrah-halo-breathe 3.5s ease-in-out infinite; }
.galaxy-center-ring--one { width:calc(100% + 16px); height:calc(100% + 16px); }
.galaxy-center-ring--two { width:calc(100% + 50px); height:calc(100% + 50px); border-style:dashed; border-color:rgba(113,153,223,.21); animation-duration:4.7s; animation-delay:-2.2s; }
@media (prefers-reduced-motion:reduce) {
  .network-hub-ring,.galaxy-center-ring,.idea-fab,.idea-fab__icon { animation:none !important; }
}

/* V1.14 — المجرة الحرة: لا حدود مستطيلة ولا قص للكواكب.
   لا يغير هذا التحديث أي CSS تابع لاستوديو معاينة الأجهزة. */
html[data-active-mode="interactive"][data-interactive-scene="galaxy"] .home-interactive-section {
  overflow: visible;
  isolation: isolate;
  max-width: 850px;
}
html[data-active-mode="interactive"][data-interactive-scene="galaxy"] .home-interactive-section .interactive-preview {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  min-height: auto;
}
html[data-active-mode="interactive"][data-interactive-scene="galaxy"] .home-interactive-section .interactive-scene--galaxy {
  overflow: visible;
  min-height: auto;
  padding-block: 18px 25px;
}
html[data-active-mode="interactive"][data-interactive-scene="galaxy"] .home-interactive-section .galaxy-stage {
  min-height: 555px;
  overflow: visible;
  border-radius: 50%;
  background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(237,246,255,.54), rgba(249,247,255,.22) 60%, transparent 100%);
  touch-action: pan-y;
}
/* تحويل الخطوط والحلقات الزخرفية إلى مساحة شفافة حرة، لا تصطدم بحواف مستطيلة. */
html[data-active-mode="interactive"][data-interactive-scene="galaxy"] .home-interactive-section .galaxy-stage::before {
  border-color: rgba(112,158,226,.17);
}
html[data-active-mode="interactive"][data-interactive-scene="galaxy"] .home-interactive-section .galaxy-stage::after {
  border-color: rgba(112,158,226,.13);
}
@media (max-width: 760px) {
  html[data-active-mode="interactive"][data-interactive-scene="galaxy"] .home-interactive-section .galaxy-stage { min-height: 445px; }
}
@media (max-width: 520px) {
  html[data-active-mode="interactive"][data-interactive-scene="galaxy"] .home-interactive-section .galaxy-stage {
    min-height: 376px;
    --orbit-radius: min(27vw, 110px);
  }
  html[data-active-mode="interactive"][data-interactive-scene="galaxy"] .home-interactive-section .interactive-scene--galaxy {
    padding: 10px 8px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-active-mode="interactive"][data-interactive-scene="galaxy"] .galaxy-center-ring { animation: none !important; }
}

/* === V1.15 — additive second level and extended approved logo === */
.brand .brand-combined { display: inline-flex; flex-direction: row; align-items: center; flex-shrink: 1; min-width: 0; gap: 1px; }
.brand .brand-prefix { color: var(--brand); font-weight: 900; font-size: 21px; line-height: 1; letter-spacing: -1px; white-space: nowrap; }
.brand .brand-wordmark { flex-shrink: 0; }
@media (max-width: 520px) {
  .topbar { width: calc(100% - 20px); }
  .brand { gap: 0; min-width: 0; }
  .brand > img:first-child { width: 38px; height: 45px; flex-shrink: 0; }
  .brand .brand-wordmark { width: 70px; height: 37px; }
  .brand .brand-prefix { font-size: 16px; letter-spacing: -1px; }
  .toolbar { flex-shrink: 0; gap: 3px; }
  .toolbar .icon-button { width: 36px; height: 38px; }
  .toolbar .icon-button svg { width: 17px; height: 17px; }
}
@media (max-width: 360px) {
  .brand > img:first-child { width: 34px; height: 42px; }
  .brand .brand-wordmark { width: 64px; height: 33px; }
  .brand .brand-prefix { font-size: 14px; }
  .toolbar .icon-button { width: 33px; height: 35px; }
}
@media (min-width: 900px) { .brand .brand-prefix { font-size: 25px; } }
html[data-theme="night"] .brand .brand-prefix { color: var(--brand); }

/* Ten satellites orbit the actual selected audience, not a duplicate placeholder. */
.activity-explorer { padding-bottom: 26px; position: relative; text-align: center; }
.activity-intro { padding: 5px 0 0; }
.activity-intro .category-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); color: #4b85b2; margin: 0; }
.activity-intro .category-kicker svg { width: 15px; height: 15px; }
.activity-intro h1 { font-size: clamp(23px, 5.8vw, 39px); font-weight: 900; line-height: 1.3; margin: 10px 0 2px; }
.activity-intro h1 span { background: linear-gradient(100deg,#21a4d8,#7568df,#c67ad2); background-clip: text; -webkit-background-clip: text; color: transparent; }
.activity-intro p { margin: 0; font-size: clamp(12px, 3vw, 15px); color: var(--muted); font-weight: 700; }
.activity-stage { --activity-radius: min(29vw, 220px); --activity-diameter: 107px; width: min(100%, 750px); height: 560px; margin: -2px auto 0; position: relative; isolation: isolate; }
.activity-orbit { position: absolute; width: calc(var(--activity-radius) * 2.1); height: calc(var(--activity-radius) * 2.1); top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; border: 1px dashed rgba(110,155,215,.2); pointer-events: none; }
.activity-orbit--inner { width: calc(var(--activity-radius) * 1.35); height: calc(var(--activity-radius) * 1.35); border-color: rgba(110,155,215,.12); }
.activity-spokes { position: absolute; inset: 0; pointer-events: none; }
.activity-spoke { position: absolute; left: 50%; top: 50%; width: var(--activity-radius); height: 1.5px; transform-origin: left center; transform: rotate(calc(-90deg + 36deg * var(--orbit-index))); border-radius: 99px; background: linear-gradient(90deg,rgba(98,151,227,.23),rgba(98,151,227,.13) 70%,transparent); }
.category-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 140px; height: 140px; z-index: 3; border-radius: 50%; --diam: 140px; }
.category-center .orb__glass { position: relative; width: 100%; height: 100%; }
.category-center .orb__icon { width: 43px; height: 43px; }
.category-center .orb__label { font-size: 21px; }
.category-center .network-hub-ring { display: block; }
.activity-node { --activity-ink: #31568d; --activity-rgb: 107,157,222; --activity-angle: calc(-90deg + 36deg * var(--orbit-index)); position: absolute; top: 50%; left: 50%; width: var(--activity-diameter); height: var(--activity-diameter); padding: 0; border: 0; border-radius: 50%; background: transparent; z-index: 2; transform: translate(-50%,-50%) rotate(var(--activity-angle)) translateX(var(--activity-radius)) rotate(calc(-1 * var(--activity-angle))); transition: filter .25s; }
.activity-node__glass { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 5px; padding: 11px 6px 8px; border-radius: 50%; border: 1px solid rgba(var(--activity-rgb),.27); background: radial-gradient(circle at 28% 22%,rgba(255,255,255,.98),rgba(255,255,255,.18) 45%,transparent 78%),linear-gradient(145deg,rgba(255,255,255,.93),rgba(var(--activity-rgb),.3) 63%,rgba(var(--activity-rgb),.5)); box-shadow: 0 13px 26px -10px rgba(var(--activity-rgb),.35),inset 0 2px 12px rgba(255,255,255,.8); backdrop-filter: blur(5px); transition: transform .25s ease, box-shadow .25s ease; }
.activity-node__icon { display: grid; place-items: center; color: var(--activity-ink); width: 30px; height: 30px; }
.activity-node__icon svg { width: 100%; height: 100%; stroke-width: 1.75; }
.activity-node__label { font-weight: 900; color: var(--activity-ink); font-size: 13px; line-height: 1.13; max-width: 95px; text-align: center; }
.activity-node:hover .activity-node__glass, .activity-node:focus-visible .activity-node__glass { transform: scale(1.09); box-shadow: 0 16px 32px rgba(var(--activity-rgb),.38), 0 0 0 4px rgba(var(--activity-rgb),.14); }
.activity-node.is-selected .activity-node__glass { box-shadow: 0 0 0 3px rgba(61,119,213,.65),0 14px 34px rgba(var(--activity-rgb),.28); transform: scale(1.045); }
.activity-node:nth-of-type(3n) { --activity-rgb: 184,146,229; --activity-ink: #704b99; }
.activity-node:nth-of-type(3n+1) { --activity-rgb: 96,192,189; --activity-ink: #1e7a76; }
.activity-node:nth-of-type(4n) { --activity-rgb: 244,167,105; --activity-ink: #995c2b; }
.activity-node:nth-of-type(5n) { --activity-rgb: 242,146,190; --activity-ink: #963f72; }
.activity-selection { min-height: 31px; color: var(--muted); font-size: 13px; font-weight: 700; margin: -10px auto 18px; padding: 0 14px; }
html[data-scene="tree"] .activity-node__glass { border-radius: 60% 33% 60% 33% / 60% 33% 60% 33%; }
html[data-scene="palm"] .activity-node__glass { border-radius: 70% 18% 70% 18% / 70% 18% 70% 18%; }
html[data-scene="rain"] .activity-node__glass { border-radius: 55% 55% 64% 64% / 44% 44% 78% 78%; }
html[data-scene="clouds"] .activity-node__glass { border-radius: 46% 50% 43% 55%; }
html[data-scene="network"] .activity-node__glass { background: radial-gradient(circle at 28% 22%,rgba(255,255,255,.95),rgba(var(--activity-rgb),.2)); box-shadow: 0 0 0 7px rgba(var(--activity-rgb),.06),inset 0 0 0 1px rgba(var(--activity-rgb),.18); }
@media (max-width: 760px) {
  .activity-stage { --activity-radius: min(30vw, 175px); --activity-diameter: 91px; height: 485px; }
  .category-center { width: 122px; height: 122px; --diam: 122px; }
  .category-center .orb__label { font-size: 18px; }
  .activity-node__label { font-size: 12px; }
  .activity-node__icon { width: 26px; height: 26px; }
}
@media (max-width: 520px) {
  .category-main { width: calc(100% - 12px); }
  .category-main .back-link { margin-inline: 10px; }
  .activity-stage { --activity-radius: min(34.2vw, 132px); --activity-diameter: clamp(73px, 20.5vw, 84px); height: 402px; }
  .activity-intro h1 { font-size: 26px; }
  .activity-node__glass { padding: 6px 3px; gap: 2px; }
  .activity-node__label { font-size: 10.5px; line-height: 1.1; max-width: 78px; }
  .activity-node__icon { width: 22px; height: 22px; }
  .category-center { width: 105px; height: 105px; --diam: 105px; }
  .category-center .orb__icon { width: 32px; height: 32px; }
  .category-center .orb__label { font-size: 16px; }
  .activity-selection { margin-top: -1px; }
}
@media (max-width: 360px) {
  .activity-stage { --activity-radius: min(33.5vw, 117px); --activity-diameter: 70px; }
  .activity-node__label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .activity-node,.activity-node__glass { transition: none !important; } }

/* V1.15.1 — six audience bubbles around the branded central hub.
   The original seven-audience source remains intact; seniors is filtered in PHP. */
.orb-stage .orb--youth {
  --x: 82%; --y: 71%; --diam: 105px;
}
.orb-brand {
  --rgb: 110,163,235; --ink: #245199; --diam: 128px;
  position: absolute; left: 50%; top: 51%;
  width: var(--diam); height: var(--diam);
  transform: translate(-50%,-50%);
  border-radius: 50%; z-index: 3; isolation: isolate;
  pointer-events: none;
}
.orb-brand__glass {
  position: relative; z-index: 1;
  gap: 0; padding: 8px 8px 9px;
  background:
    radial-gradient(circle at 29% 17%,rgba(255,255,255,.99),rgba(255,255,255,.11) 58%,transparent),
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(185,213,255,.33) 58%,rgba(129,175,238,.38));
  box-shadow: 0 12px 35px -14px rgba(60,112,205,.4),inset 0 3px 14px rgba(255,255,255,.9),0 0 0 7px rgba(113,164,229,.045);
}
.orb-brand__lamp { position: relative;z-index:2;width:47px;height:51px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(84,118,174,.15)); }
.orb-brand__prefix { position:relative;z-index:2;color:#285193;font-size:13px;font-weight:900;line-height:1;white-space:nowrap;margin-top:0; }
.orb-brand__wordmark { position:relative;z-index:2;width:72px;height:32px;object-fit:contain;margin-top:-3px; }
.orb-brand .network-hub-ring { left:50%;top:50%;transform:translate(-50%,-50%); }
html[data-scene="network"] .orb-brand .network-hub-ring { display:block; }
/* Don't retain the old youth-centered network halo. */
html[data-scene="network"] .orb--youth .network-hub-ring { display:none; }
@media (min-width:560px) {
 .orb-stage .orb--youth { --x:76%; --y:75%; --diam:142px; }
 .orb-brand { --diam:159px; top:52%; }
 .orb-brand__lamp {width:63px;height:68px;}
 .orb-brand__prefix {font-size:16px;}
 .orb-brand__wordmark {width:91px;height:40px;}
}
@media (min-width:900px) {
 .orb-stage .orb--youth { --x:76%; --y:75%; --diam:160px; }
 .orb-brand {--diam:178px;top:52%;}
 .orb-brand__lamp {width:72px;height:78px;}
 .orb-brand__prefix {font-size:18px;}
 .orb-brand__wordmark {width:104px;height:45px;}
}
@media (max-width:360px) {
 .orb-stage .orb--youth {--diam:100px;}
 .orb-brand {--diam:113px;}
 .orb-brand__lamp {width:42px;height:45px;}
 .orb-brand__prefix {font-size:12px;}
 .orb-brand__wordmark {width:65px;height:28px;}
}
html[data-theme="night"] .orb-brand__prefix {color:#d5e6ff;}
html[data-theme="night"] .orb-brand__glass {background:linear-gradient(145deg,rgba(66,91,144,.93),rgba(48,67,112,.85));border-color:rgba(213,230,255,.46);}

/* V1.15.2 — the puzzle replaces BOTH previous secondary interactive scenes. */
.puzzle-stage { min-height: 480px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 8px; isolation: isolate; }
.puzzle-stage::before { content:""; position:absolute; width:min(80vw,460px); aspect-ratio:1; border-radius:50%; background:conic-gradient(from 45deg,rgba(103,165,239,.16),rgba(184,128,236,.16),rgba(248,186,111,.15),rgba(106,206,184,.15),rgba(103,165,239,.16)); filter:blur(42px); z-index:-1; }
.puzzle-stage__caption { font-size:clamp(15px,2.4vw,20px); font-weight:900; color:var(--brand); margin:0 0 12px; }
.puzzle-grid { width:min(100%,640px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; justify-items:stretch; margin-inline:auto; }
.puzzle-tile { display:grid; position:relative; aspect-ratio:1; min-width:0; place-items:center; color:var(--ink); isolation:isolate; transition: transform .25s ease, filter .25s ease; }
.puzzle-tile__shape { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:rgba(var(--rgb),.20); stroke:rgba(var(--rgb),.75); stroke-width:2.7; stroke-linejoin:round; filter:drop-shadow(0 9px 8px rgba(52,82,130,.15)); }
.puzzle-tile__content { position:relative; z-index:1; display:flex; flex-direction:column; gap:8px; justify-content:center; align-items:center; text-align:center; pointer-events:none; font-size:clamp(15px,2.2vw,19px); font-weight:900; padding:8px; line-height:1.1; }
.puzzle-tile__icon { display:grid; place-items:center; width:40px; height:40px; color:var(--ink); }
.puzzle-tile__icon svg { width:36px; height:36px; }
.puzzle-tile:nth-child(even) .puzzle-tile__shape { fill:rgba(var(--rgb),.29); }
.puzzle-tile:hover,.puzzle-tile:focus-visible { z-index:5; transform:translateY(-4px) scale(1.035); filter:brightness(1.04); }
.puzzle-tile:focus-visible { outline-offset:-10px; border-radius:20px; }
.puzzle-stage__brand { display:inline-flex; align-items:center; gap:5px; margin-top:10px; padding:4px 12px; background:var(--glass); color:var(--brand); border:1px solid var(--line); border-radius:20px; font-weight:900; }
.puzzle-stage__brand img { width:26px; height:30px; object-fit:contain; }
html[data-theme="night"] .puzzle-tile__shape { fill:rgba(var(--rgb),.42); }
@media(max-width:760px) {
  .puzzle-stage { min-height:395px; }
  .puzzle-grid { max-width:420px; }
  .puzzle-tile__content { gap:4px; font-size:14px; }
  .puzzle-tile__icon { width:30px; height:30px; }
  .puzzle-tile__icon svg { width:28px; height:28px; }
}
@media(max-width:410px) {
  .puzzle-stage { min-height:370px; padding:14px 3px; }
  .puzzle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-width:326px; }
  .puzzle-tile__content { font-size:15px; }
  .puzzle-stage__caption { font-size:16px; margin-bottom:3px; }
}

/* Category results — the all / selected toggle never claims unpublished entries exist. */
.activity-results { max-width:780px; margin:5px auto 36px; padding:0 10px; }
.activity-scope { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:999px; background:var(--pill); padding:5px; margin-bottom:15px; }
.activity-scope__button { border:0; border-radius:999px; color:var(--muted); font-weight:900; font-size:14px; background:transparent; padding:10px 21px; min-width:88px; }
.activity-scope__button.is-active { color:#fff; background:linear-gradient(115deg,#347ed0,#7769d9); box-shadow:0 7px 16px rgba(52,126,208,.22); }
.activity-results__body { border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:20px 16px 22px; background:var(--glass); }
.activity-results__body h2 { font-size:clamp(17px,3.5vw,21px); color:var(--brand); margin:0 0 6px; }
.activity-results__body p { margin:0 auto 13px; font-size:13px; font-weight:700; color:var(--muted); max-width:560px; line-height:1.7; }
.activity-results__list { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; }
.activity-result__pill { display:inline-flex; justify-content:center; align-items:center; border:1px solid rgba(100,152,219,.20); background:var(--pill); color:var(--brand); border-radius:100px; padding:7px 13px; font-weight:800; font-size:12px; }
button.activity-result__pill:hover { border-color:#5b91d9; }
.activity-results__contribute { margin-top:15px; border:0; color:white; font-weight:900; padding:11px 22px; background:linear-gradient(115deg,#347ed0,#7967dd); border-radius:999px; box-shadow:0 8px 22px rgba(63,114,204,.2); }

/* Real idea suggestion modal, including mobile scrolling and clear validation states. */
#ideaDialog { width:min(96vw,610px); max-height:min(93dvh,900px); padding:23px clamp(14px,3vw,30px) 26px; overflow-y:auto; overscroll-behavior:contain; text-align:center; }
#ideaDialog > p { font-size:13px; line-height:1.65; margin:0 auto 12px; max-width:455px; }
#ideaDialog .dialog-decor { width:48px; height:48px; margin:0 auto 6px; }
#ideaDialog h2 { font-size:24px; margin:4px 0 6px; }
.idea-form { display:grid; gap:11px; text-align:right; }
.idea-form label:not(.idea-form__consent) { display:flex; flex-direction:column; align-items:stretch; gap:5px; color:var(--text); font-size:12.5px; font-weight:900; }
.idea-form label span { color:#d66b86; }
.idea-form input:not([type="checkbox"]),.idea-form select,.idea-form textarea { width:100%; min-width:0; border:1px solid rgba(113,142,183,.27); border-radius:12px; padding:11px 12px; color:var(--text); background:var(--panel); font-family:inherit; font-size:13px; outline-offset:2px; }
.idea-form input:focus,.idea-form textarea:focus,.idea-form select:focus { outline:2px solid rgba(67,139,223,.47); border-color:#5297e6; }
.idea-form select { cursor:pointer; }
.idea-form textarea { resize:vertical; min-height:95px; max-height:260px; }
.idea-form input::placeholder,.idea-form textarea::placeholder { color:var(--muted); opacity:.8; }
.idea-form__row { display:grid; gap:10px; }
.idea-form__row--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.idea-form__consent { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--text); line-height:1.55; font-weight:700; cursor:pointer; }
.idea-form__consent input { margin-top:3px; flex-shrink:0; width:17px; height:17px; accent-color:#397fd6; }
.idea-form__status { min-height:18px; margin:0; line-height:1.5; font-size:13px; font-weight:800; }
.idea-form__status[data-state="success"] { color:#168369; }
.idea-form__status[data-state="error"] { color:#c23b57; }
.idea-form__status[data-state="pending"] { color:var(--brand); }
.idea-form__submit { margin:2px auto 0; min-width:190px; padding:12px 20px; border-radius:14px; background:linear-gradient(115deg,#327cca,#8171e2); }
.idea-form__submit:disabled { opacity:.65; cursor:wait; }
.idea-form__honeypot { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
@media(max-width:470px) { #ideaDialog { padding:23px 14px 20px; } .idea-form__row--two { grid-template-columns:1fr; gap:9px; } .idea-form { gap:10px; } }

/* Clip inactive offscreen decorative elements and navigation without changing
   the approved responsive stage or the real device preview dimensions. */
html { overflow-x: clip; }
@media(max-width:410px) {
  #interactiveDialog .puzzle-grid { max-width:248px; }
  #interactiveDialog .puzzle-stage { min-height:345px; padding:7px 3px; }
  #interactiveDialog .puzzle-tile__icon { width:26px; height:26px; }
  #interactiveDialog .puzzle-tile__icon svg { width:25px; height:25px; }
  #interactiveDialog .puzzle-tile__content { font-size:13px; gap:3px; }
  #interactiveDialog .puzzle-stage__caption { font-size:14px; }
}


/* V1.15.3 — an activity circle opens a new, accessible third-stage page. */
.activity-node { display:block; text-decoration:none; cursor:pointer; color:inherit; }
.activity-node:focus-visible { outline:3px solid #4f88df; outline-offset:4px; }
.activity-selection { margin:2px auto 32px; line-height:1.6; }
.idea-directory { max-width:970px; width:100%; margin:0 auto; padding:20px clamp(13px,3vw,32px) 56px; text-align:center; }
.directory-path { display:flex; align-items:center; gap:9px; flex-wrap:wrap; text-align:right; margin:0 0 22px; font-size:12px; font-weight:800; color:var(--muted); }
.directory-path a { color:var(--brand); text-decoration:none; }
.directory-path a:hover { text-decoration:underline; }
.directory-path [aria-current="page"] { color:var(--muted); }
.directory-hero { padding:30px 18px 24px; position:relative; overflow:hidden; background:radial-gradient(circle at 12% 35%,rgba(159,219,245,.28),transparent 40%),radial-gradient(circle at 90% 25%,rgba(201,176,248,.25),transparent 40%),var(--glass); border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow); }
.directory-hero__eyebrow { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--pill); border-radius:999px; color:var(--brand); font-size:13px; font-weight:900; padding:7px 13px; }
.directory-hero__eyebrow svg { width:16px; height:16px; }
.directory-hero__icon { width:79px; height:79px; margin:15px auto 5px; display:grid; place-items:center; border:1px solid rgba(89,141,221,.25); border-radius:50%; background:radial-gradient(circle at 30% 20%,#fff,rgba(129,176,242,.4)); box-shadow:0 13px 30px rgba(84,143,218,.20),inset 0 2px 8px rgba(255,255,255,.85); color:var(--brand); }
.directory-hero__icon svg { width:40px; height:40px; }
.directory-hero__segment { color:var(--muted); font-size:13px; font-weight:800; margin:9px 0 0; }
.directory-hero h1 { font-size:clamp(26px,5vw,36px); font-weight:900; color:var(--brand); margin:7px 0 4px; }
.directory-hero__hint { color:var(--muted); font-size:14px; font-weight:700; line-height:1.8; max-width:550px; margin:0 auto; }
.directory-content { max-width:780px; margin:24px auto 0; }
.directory-tabs { display:flex; align-items:center; justify-content:center; gap:6px; padding:6px; margin:0 auto 18px; border:1px solid var(--line); background:var(--pill); border-radius:999px; max-width:370px; }
.directory-tab { display:flex; align-items:center; justify-content:center; flex:1; padding:12px 8px; color:var(--muted); border-radius:999px; font-size:14px; font-weight:900; text-decoration:none; white-space:nowrap; }
.directory-tab:hover { color:var(--brand); background:rgba(118,157,232,.09); }
.directory-tab.is-active { color:white; background:linear-gradient(120deg,#347ed0,#7769d9); box-shadow:0 7px 18px rgba(65,118,203,.25); }
.directory-tab.is-active:hover { color:white; }
.directory-tab:focus-visible { outline:3px solid #4083d9; outline-offset:3px; }
.directory-panel { border:1px solid var(--line); border-radius:28px; padding:24px 20px 28px; background:var(--glass); box-shadow:var(--shadow); }
.directory-panel__heading { display:flex; justify-content:center; align-items:center; gap:13px; text-align:right; margin-bottom:18px; }
.directory-panel__tag { font-size:12px; color:var(--muted); font-weight:800; }
.directory-panel__heading h2 { font-size:22px; color:var(--brand); margin:2px 0 0; }
.directory-mini-icon { display:grid; place-items:center; width:53px; height:53px; flex-shrink:0; border-radius:18px; color:#527fcb; background:rgba(115,171,238,.15); border:1px solid var(--line); }
.directory-mini-icon svg { width:28px; height:28px; }
.directory-empty { margin:4px auto 16px; padding:25px 15px; border-radius:20px; border:1px dashed rgba(124,163,213,.35); background:rgba(189,212,244,.08); }
.directory-empty__symbol { display:block; font-size:27px; color:#7a8be1; margin-bottom:8px; }
.directory-empty h3 { color:var(--brand); font-size:17px; font-weight:900; margin:0 0 7px; }
.directory-empty p { color:var(--muted); font-size:13px; font-weight:700; line-height:1.8; max-width:490px; margin:0 auto; }
.directory-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:14px 0 21px; }
.directory-list__item { display:flex; align-items:center; text-align:right; gap:9px; border:1px solid var(--line); background:var(--pill); color:var(--brand); text-decoration:none; padding:12px 13px; font-size:13px; font-weight:900; border-radius:16px; transition:transform .2s,border-color .2s; }
.directory-list__item:hover,.directory-list__item:focus-visible { border-color:#639cdd; transform:translateY(-2px); }
.directory-list__item.is-current { border-color:rgba(69,124,217,.4); }
.directory-list__item svg { width:22px; height:22px; flex-shrink:0; color:#5c8dd0; }
.directory-contribute { display:inline-flex; align-items:center; gap:9px; justify-content:center; margin:5px auto 0; padding:13px 27px; border:0; border-radius:999px; color:#fff; background:linear-gradient(120deg,#347ed0,#7769d9); font-size:15px; font-weight:900; box-shadow:0 9px 22px rgba(63,114,204,.25); }
.directory-contribute:hover { filter:brightness(1.05); }
.directory-back { display:inline-flex; gap:6px; align-items:center; text-decoration:none; color:var(--brand); font-size:13px; font-weight:800; padding:10px; margin-top:13px; }
.directory-back:hover { text-decoration:underline; }
.directory-back svg { width:16px; height:16px; }
@media(max-width:540px) {
  .idea-directory { padding:12px 12px 46px; }
  .directory-path { margin-bottom:12px; }
  .directory-hero { padding:21px 13px 22px; border-radius:24px; }
  .directory-hero__icon { width:70px; height:70px; margin:12px auto 5px; }
  .directory-hero__icon svg { width:35px; height:35px; }
  .directory-hero h1 { font-size:27px; }
  .directory-hero__hint { font-size:13px; }
  .directory-content { margin-top:15px; }
  .directory-tabs { max-width:340px; margin-bottom:12px; }
  .directory-tab { font-size:13px; padding:12px 6px; }
  .directory-panel { padding:19px 13px 22px; border-radius:23px; }
  .directory-panel__heading h2 { font-size:19px; }
  .directory-empty { padding:21px 12px; }
  .directory-list { gap:7px; }
  .directory-list__item { padding:10px 8px; font-size:11.5px; gap:5px; }
  .directory-list__item svg { width:19px; height:19px; }
}
@media(prefers-reduced-motion: reduce) { .directory-list__item { transition:none; } }

/* V1.15.6 — official approved mobile galaxy artwork in two coordinated modes. */
.page-atmosphere {
  z-index: 0;
  background: #f4f7ff url('../images/galaxy-day.webp') center center / cover no-repeat;
  transition: background-color .35s ease;
}
.page-atmosphere::before { background: rgba(246,251,255,.17); opacity: 1; }
.page-atmosphere::after { background: none; opacity: 0; }
.page-atmosphere span { opacity: 0; }
html[data-theme="night"] .page-atmosphere {
  background: #10192f url('../images/galaxy-night.webp') center center / cover no-repeat;
}
html[data-theme="night"] .page-atmosphere::before {
  background: rgba(4,11,30,.08); opacity: 1; filter: none;
}
html[data-theme="night"] .page-atmosphere::after,
html[data-theme="night"] .page-atmosphere span { opacity: 0; }
.site-shell { z-index: 1; }
/* Accessible compact day/night chooser placed next to interactive styles. */
.theme-picker { position: relative; flex: 0 0 auto; }
.theme-picker__trigger { color: var(--brand); }
.theme-picker__options {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 24;
  min-width: 154px; padding: 6px; display: grid; gap: 4px;
  border: 1px solid var(--line); border-radius: 17px;
  background: var(--panel); box-shadow: var(--shadow);
  direction: rtl;
}
.theme-picker__options[hidden] { display: none; }
.theme-picker__options button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  min-height: 42px; padding: 7px 11px; border-radius: 12px; border: 0;
  background: transparent; color: var(--text); font-weight: 800; text-align: right;
}
.theme-picker__options button:hover, .theme-picker__options button.is-active {
  background: var(--pill); color: var(--brand);
}
.theme-picker__options svg { width: 18px; height: 18px; }
@media(max-width: 540px) {
  .topbar { width: calc(100% - 20px); }
  .toolbar { gap: 5px; }
  .toolbar .icon-button { width: 36px; height: 36px; border-radius: 11px; }
  .toolbar .icon-button svg { width: 17px; height: 17px; }
  .brand { min-width: 0; }
  .brand .brand-wordmark { width: 83px; height: 42px; }
  .brand img { width: 42px; height: 49px; }
  .brand .brand-prefix { font-size: 13px; }
}
@media(max-width: 360px) {
  .toolbar { gap: 3px; }
  .toolbar .icon-button { width: 33px; height: 34px; }
  .brand .brand-wordmark { width: 76px; }
  .brand img { width: 38px; }
}
/* Keep approved style selection dialogs readable against the new dark sky. */
html[data-theme="night"] .style-card {
  background: linear-gradient(180deg, rgba(43,61,99,.95), rgba(28,43,75,.95));
}
html[data-theme="night"] .interactive-mode:not(.is-active) {
  background: rgba(42,59,94,.96);
}
html[data-theme="night"] .interactive-preview {
  background: radial-gradient(ellipse at 25% 20%, rgba(70,91,156,.28), transparent 48%),
              linear-gradient(180deg, rgba(32,46,82,.98), rgba(22,33,66,.98));
}


/* V1.15.7 — brighter night-mode text for better readability on galaxy background */
html[data-theme="night"] {
  --text: #f8fbff;
  --muted: #dbe8ff;
  --brand: #f4f8ff;
  --line: rgba(225, 235, 255, .20);
}
html[data-theme="night"] .intro__eyebrow,
html[data-theme="night"] .scene-chip,
html[data-theme="night"] .directory-hero__eyebrow {
  color: #eef5ff;
  border-color: rgba(229,239,255,.22);
}
html[data-theme="night"] .scene-chip {
  background: rgba(22, 37, 70, .44);
}
html[data-theme="night"] .scene-chip strong,
html[data-theme="night"] .intro h1,
html[data-theme="night"] .activity-intro h1,
html[data-theme="night"] .directory-hero h1,
html[data-theme="night"] .navigation-title,
html[data-theme="night"] .info-dialog h2 {
  color: #f8fbff;
  text-shadow: 0 2px 14px rgba(3,10,28,.24);
}
html[data-theme="night"] .intro p,
html[data-theme="night"] .activity-intro p,
html[data-theme="night"] .orbs-hint,
html[data-theme="night"] .site-footer,
html[data-theme="night"] .navigation-caption,
html[data-theme="night"] .navigation-bottom,
html[data-theme="night"] .category-kicker,
html[data-theme="night"] .category-display > p,
html[data-theme="night"] .activity-selection,
html[data-theme="night"] .directory-path,
html[data-theme="night"] .directory-path [aria-current="page"],
html[data-theme="night"] .directory-hero__segment,
html[data-theme="night"] .directory-hero__hint,
html[data-theme="night"] .directory-panel__tag,
html[data-theme="night"] .directory-empty p,
html[data-theme="night"] .back-link,
html[data-theme="night"] .idea-form input::placeholder,
html[data-theme="night"] .idea-form textarea::placeholder {
  color: #dbe8ff;
}
html[data-theme="night"] .orb__label,
html[data-theme="night"] .category-center .orb__label,
html[data-theme="night"] .activity-node__label {
  filter: brightness(1.12) saturate(1.05);
  text-shadow: 0 1px 2px rgba(9,18,40,.65), 0 0 10px rgba(255,255,255,.10);
}
html[data-theme="night"] .site-footer,
html[data-theme="night"] .directory-path,
html[data-theme="night"] .directory-hero__segment,
html[data-theme="night"] .directory-hero__hint,
html[data-theme="night"] .directory-empty p,
html[data-theme="night"] .directory-panel__tag,
html[data-theme="night"] .activity-selection,
html[data-theme="night"] .orbs-hint,
html[data-theme="night"] .intro p {
  text-shadow: 0 1px 10px rgba(4,11,29,.24);
}
html[data-theme="night"] .interactive-scene-meta span,
html[data-theme="night"] .style-card small {
  color: #d3e0fb;
}

/* V1.15.8 — four background settings, with the approved classic soft-gradient restoration. */
html[data-bg-mode="classic"] .page-atmosphere {
  background:
    radial-gradient(ellipse at 47% 30%, rgba(234,245,255,.60), transparent 51%),
    radial-gradient(ellipse at 12% 55%, rgba(255,222,227,.21), transparent 38%),
    radial-gradient(ellipse at 88% 68%, rgba(198,228,255,.20), transparent 36%),
    #fbfdff;
}
html[data-bg-mode="classic"] .page-atmosphere::before {
  background: transparent;
  opacity: 0;
}
html[data-bg-mode="classic"] .page-atmosphere::after {
  background: transparent;
  opacity: 0;
}
html[data-bg-mode="classic"] .page-atmosphere span {
  opacity: .46;
}
html[data-bg-mode="none"] body {
  background: #fff;
}
html[data-bg-mode="none"] .page-atmosphere {
  background: #fff;
}
html[data-bg-mode="none"] .page-atmosphere::before,
html[data-bg-mode="none"] .page-atmosphere::after {
  content: none;
}
html[data-bg-mode="none"] .page-atmosphere span {
  display: none;
}
/* The classic and plain modes retain light typography and original component palettes. */

/* V1.15.9 — one lamp icon opens both art and interactive styles */
.combined-styles-dialog { max-height: min(92dvh, 820px); overflow-y: auto; overscroll-behavior: contain; }
.styles-chooser { display: flex; align-items: center; gap: 5px; padding: 5px; margin: 13px auto 16px; max-width: 480px; border: 1px solid var(--line); background: var(--pill); border-radius: 999px; }
.styles-chooser__tab { flex: 1; min-width: 0; padding: 12px 8px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-weight: 900; font-size: 14px; line-height: 1.25; }
.styles-chooser__tab.is-active { color: #fff; background: linear-gradient(115deg,#377bd2,#7868df); box-shadow: 0 6px 18px rgba(60,103,206,.24); }
.styles-chooser__tab:focus-visible { outline: 3px solid #63a4e8; outline-offset: 2px; }
.styles-panel[hidden] { display: none !important; }
.styles-panel__description { margin: 0 auto 12px !important; max-width: 54ch !important; font-size: 13px !important; line-height: 1.7 !important; color: var(--muted) !important; }
.combined-styles-dialog .styles-panel > .dialog-done { margin-top: 12px; }
.combined-styles-dialog .styles-panel .style-grid { margin: 12px 0; }
@media (max-width: 440px) { .combined-styles-dialog { width: calc(100% - 22px); } .styles-chooser { margin: 10px auto 14px; } .styles-chooser__tab { font-size: 12.5px; padding: 12px 5px; } }

/* V1.15.10 — approved ideas listing: scoped to results page only */
.fk-public-ideas{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0;text-align:right}
.fk-public-idea{border:1px solid var(--line);background:var(--glass);border-radius:18px;padding:17px;box-shadow:0 10px 25px rgba(35,74,144,.05)}
.fk-public-idea__tag{display:inline-block;border-radius:999px;padding:4px 10px;background:var(--pill);font-size:12px;font-weight:800;color:var(--brand)}
.fk-public-idea h3{font-size:18px;font-weight:900;color:var(--brand);margin:9px 0}
.fk-public-idea p{color:var(--text);font-size:14px;line-height:1.85;white-space:normal;overflow-wrap:anywhere}
.fk-public-idea__meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:12px;font-weight:700}


/* V1.15.13 — four-destination sidebar and cohesive information/discovery/form pages */
.fk-nav-main .navigation-link { min-height: 55px; font-size: 17px; border-bottom: 1px solid var(--line); border-radius: 10px; }
.fk-preview-utility { display: flex; align-items: center; gap: 10px; color: var(--brand); font-weight: 800; padding: 6px 0; line-height: 1.65; }
.fk-preview-utility svg { width: 17px; height: 17px; }
.fk-pages { flex: 1; width: min(100% - 30px, 970px); margin-inline: auto; padding: 15px 0 75px; }
.fk-page-breadcrumb { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13px; font-weight: 800; margin: 6px 2px 22px; }
.fk-page-breadcrumb a { color: var(--brand); }
.fk-page-hero { text-align: center; background: radial-gradient(ellipse at 18% 20%,rgba(128,213,249,.16),transparent 45%),radial-gradient(ellipse at 85% 75%,rgba(194,144,238,.15),transparent 44%),var(--glass); border:1px solid var(--line); border-radius:29px; padding: 27px 20px 28px; box-shadow: var(--shadow); margin-bottom: 18px; }
.fk-page-hero__badge { display: inline-flex; padding: 7px 15px; border-radius: 99px; background: var(--pill); border: 1px solid var(--line); color: var(--brand); font-size: 12px; font-weight: 800; }
.fk-page-hero h1 { color: var(--brand); font-size: clamp(27px,5.5vw,37px); font-weight: 900; margin: 12px 0 4px; }
.fk-page-hero p { color: var(--muted); line-height: 1.9; font-weight: 700; margin: 5px auto; max-width: 62ch; }
.fk-page-card { background: var(--glass); border: 1px solid var(--line); border-radius: 24px; padding: clamp(17px,3vw,30px); box-shadow: var(--shadow); margin-bottom: 15px; }
.fk-page-card h2 { font-size: 21px; font-weight: 900; color: var(--brand); margin:0 0 13px; }
.fk-page-card p { color: var(--muted); line-height: 1.95; font-size: 15px; font-weight: 600; }
.fk-about-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.fk-page-card--owner { grid-column: 1/-1; }
.fk-page-card--owner strong { display: inline-block; font-size: 23px; color: var(--brand); margin: 5px 0 0; }
.fk-goals { margin: 0; padding: 0 18px 0 0; color: var(--muted); line-height: 2; font-size:15px; font-weight: 700; }
.fk-pill-link { border: none; display: inline-flex; justify-content: center; align-items: center; gap: 9px; background: linear-gradient(120deg,#367dce,#7765db); color: white; border-radius: 99px; padding: 13px 23px; font: inherit; font-weight: 900; font-size:14px; cursor:pointer; box-shadow: 0 9px 20px rgba(48,109,199,.20); }
.fk-pill-link:hover { filter: brightness(1.08); }
.fk-filter-form { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.fk-filter-form label { display: flex; flex-direction:column; gap: 7px; color: var(--text); font-size: 14px; font-weight: 900; }
.fk-filter-form select { border:1px solid var(--line); border-radius: 13px; color: var(--text); background: var(--panel); width:100%; min-height: 50px; padding: 10px 12px; font:inherit; font-weight:700; }
.fk-filter-actions { grid-column: 1/-1; display: flex; gap:15px; align-items:center; flex-wrap:wrap; margin-top: 4px; }
.fk-filter-reset { font-size: 13px; font-weight: 800; color:var(--muted); padding:10px; }
.fk-form-hint { text-align:center; color:var(--muted); font-size: 14px; font-weight:700; padding: 12px 0; }
.fk-write-card { max-width: 730px; margin-inline:auto; }
.fk-write-card .idea-form { margin:0; padding:0; text-align:right; }
.fk-write-card .idea-form label:not(.idea-form__consent) { color:var(--text); }
.fk-write-card .idea-form__status { max-width:none; }
.fk-matches { text-align:center; }
.fk-match-count { display:inline-grid; place-items:center; min-width:28px; padding:4px 6px; border-radius:12px; background: var(--pill); font-size:14px; }
.fk-no-matches { padding: 16px; border:1px dashed var(--line); border-radius:16px; margin:18px 0; }
.fk-no-matches > span { color:#8b8bec; font-size:24px; }
.fk-match-grid { text-align:right; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin: 19px auto; }
.fk-match-card { border:1px solid var(--line); background: var(--panel); border-radius:18px; padding:17px; min-width:0; }
.fk-match-card h3 { font-size: 17px; color:var(--brand); margin: 10px 0 6px; }
.fk-match-card p { overflow-wrap:anywhere; white-space:normal; font-size:13px; line-height:1.9; margin:0 0 14px; }
.fk-card-tag { font-size: 12px; color:#3979bf; font-weight:900; }
.fk-card-meta { border-top:1px solid var(--line); display:flex; gap:6px 15px; flex-wrap:wrap; padding-top:12px; font-size:11px; color:var(--muted); font-weight:700; }
.fk-result-note { font-size:12px; }
@media(max-width:640px) { .fk-pages { width:calc(100% - 25px); padding-top:12px; } .fk-page-hero { padding:21px 13px; border-radius:23px; } .fk-page-hero h1 { font-size: 28px; } .fk-about-grid, .fk-filter-form, .fk-match-grid { grid-template-columns:1fr; } .fk-page-card--owner, .fk-filter-actions { grid-column:auto; } .fk-page-card { border-radius:20px; } .fk-filter-actions { justify-content:center; } .fk-filter-actions .fk-pill-link { width:100%; } }
/* Avoid an off-viewport honeypot enlarging the dedicated form page capture. */
.fk-write-card .idea-form__honeypot { left:auto; right:auto; top:auto; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* V1.15.14 — inline account sign-in, centered modal in device previews and full site */
.fk-login-dialog { width: min(calc(100% - 26px), 450px); padding: 25px 24px 22px; max-height: min(92dvh, 720px); overflow-y: auto; overscroll-behavior: contain; }
.fk-login-dialog__icon { color: #407bd0; width: 62px; height: 62px; margin-bottom: 10px; }
.fk-login-dialog__intro { max-width: none !important; margin: 4px 0 15px !important; font-size: 14px !important; }
.fk-login-form { display: grid; gap: 8px; text-align: right; }
.fk-login-form label { color: var(--text); font-weight: 900; font-size: 14px; margin-top: 5px; }
.fk-login-form input { width:100%; min-height: 47px; padding: 11px 13px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--pill); color: var(--text); outline-offset: 2px; }
.fk-login-form input:focus-visible { outline:2px solid #4b90e7; }
.fk-login-submit { margin-top: 10px; min-height: 48px; width:100%; border:0; border-radius:13px; color:white; background: linear-gradient(110deg,#387dcf,#7564d9); font-weight:900; font-size:16px; }
.fk-login-submit:disabled { opacity:.62; cursor:wait; }
.fk-login-status { border-radius:12px; border:1px solid rgba(197,61,84,.22); background:rgba(220,64,79,.09); padding:10px 12px; color:var(--text); font-size:13px !important; font-weight:800; margin: 6px 0 !important; max-width:none !important; }
.fk-login-actions { display:flex; justify-content:center; gap:10px 18px; flex-wrap:wrap; margin-top:14px; }
.fk-login-actions button,.fk-login-actions a { color:var(--brand); padding:4px 0; background:none; border:0; font-size:13px; font-weight:800; text-decoration: underline; text-underline-offset: 4px; }
.fk-login-back { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding: 11px 8px 3px; font-size:13px; font-weight:800; color:var(--muted); }
.fk-login-back { border:0; background:transparent; cursor:pointer; font:inherit; font-size:13px; font-weight:800; }
.fk-login-back svg { width:16px; height:16px; }
.fk-recovery-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px auto 18px; text-align:center; }
.fk-recovery-methods span { border:1px solid var(--line); background:var(--pill); border-radius:14px; padding:11px 7px; display:grid; gap:6px; }
.fk-recovery-methods strong { font-size:14px; color:var(--brand); }
.fk-recovery-methods small { font-size:11px; color:var(--muted); line-height:1.4; }
.fk-account-info { padding-top: 40px; }
@media(max-width: 420px){ .fk-login-dialog { padding:20px 16px 18px; } .fk-login-dialog h2 { font-size: 22px; } }


/* V1.15.15 — full page for approved idea, evaluation, and participants' experiences */
.fk-idea-page{flex:1;width:min(calc(100% - 28px),860px);margin:0 auto;padding:15px 0 75px;text-align:right}
.fk-idea-head{text-align:center;margin:9px auto 21px;padding:26px 16px;border-radius:25px;border:1px solid var(--line);background:var(--glass);box-shadow:var(--shadow)}
.fk-idea-head h1{font-size:clamp(24px,5vw,34px);font-weight:900;color:var(--brand);margin:9px 0 5px;overflow-wrap:anywhere}
.fk-idea-head p{font-size:14px;font-weight:700;color:var(--muted);margin:5px 0}
.fk-idea-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--pill);padding:6px;border-radius:17px;margin-bottom:15px;border:1px solid var(--line)}
.fk-idea-tab{text-align:center;font-weight:900;font-size:14px;padding:13px 6px;color:var(--muted);border-radius:12px;transition:background .2s,color .2s}
.fk-idea-tab.is-active{background:linear-gradient(120deg,#347ed0,#7866db);color:white;box-shadow:0 6px 15px rgba(64,117,197,.20)}
.fk-idea-content{background:var(--glass);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:clamp(18px,4vw,29px);min-height:300px;overflow-wrap:anywhere}
.fk-idea-content h2{color:var(--brand);font-size:17px;font-weight:900;margin:5px 0 13px}
.fk-idea-content h2:not(:first-child){margin-top:28px}
.fk-idea-description{color:var(--text);white-space:normal;font-size:15px;line-height:2.1;font-weight:600}
.fk-idea-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fk-idea-info>div{border:1px solid var(--line);border-radius:15px;padding:15px 12px;background:var(--pill);min-width:0}
.fk-idea-info>div>span{font-size:22px;color:#559bdd;display:block;margin-bottom:7px}
.fk-idea-info strong{font-size:13px;color:var(--brand)}
.fk-idea-info p{font-size:13px;font-weight:700;color:var(--text);line-height:1.65;margin:5px 0 0}
.fk-idea-note{border-radius:14px;color:var(--muted);background:var(--pill);padding:14px;margin-top:22px;font-size:12px;font-weight:700;line-height:1.8}
.fk-idea-subtext{font-size:13px;color:var(--muted);line-height:1.9;font-weight:700}
.fk-rating-summary{border:1px dashed var(--line);background:var(--pill);border-radius:14px;padding:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:14px 0}
.fk-rating-summary strong{font-size:19px;color:#d79a27}
.fk-feedback-form{display:grid;gap:16px;margin:18px 0 3px}
.fk-feedback-form label:not(.fk-stars label){font-weight:800;font-size:14px;color:var(--text);display:grid;gap:9px}
.fk-feedback-form textarea{border-radius:15px;padding:13px;border:1px solid var(--line);background:var(--panel);font:inherit;font-size:14px;color:var(--text);min-height:105px;resize:vertical;width:100%}
.fk-feedback-form .fk-pill-link{justify-self:center;min-width:155px}
.fk-stars{padding:0;border:none;margin:0}
.fk-stars legend{color:var(--text);font-weight:900;font-size:14px;margin-bottom:13px}
.fk-stars__row{display:flex;justify-content:center;gap:7px;flex-direction:row-reverse}
.fk-stars label{position:relative;cursor:pointer;display:inline-block}
.fk-stars input{position:absolute;opacity:0;width:100%;height:100%;inset:0;cursor:pointer}
.fk-stars label span[aria-hidden]{font-size:40px;color:#dce0e9;transition:color .12s,transform .12s;display:block}
.fk-stars label:has(input:checked) span[aria-hidden],.fk-stars label:has(input:checked) ~ label span[aria-hidden],.fk-stars label:has(input:focus-visible) span[aria-hidden]{color:#eab232}
.fk-stars label:hover span[aria-hidden]{transform:scale(1.12)}
.fk-feedback-success{border:1px solid rgba(42,159,126,.3);background:rgba(52,184,137,.1);color:#188866;border-radius:13px;padding:12px;font-size:13px;font-weight:800}
.fk-feedback-error{border:1px solid rgba(203,83,91,.35);background:rgba(214,77,81,.09);color:#bd4852;border-radius:13px;padding:12px;font-size:13px;font-weight:800}
.fk-feedback-trap{position:absolute!important;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.fk-image-pick{border:1px dashed var(--line);padding:14px;border-radius:13px;background:var(--pill)}
.fk-image-pick input{display:block;max-width:100%;font:inherit;font-size:12px;color:var(--text)}
.fk-experience-card{border:1px solid var(--line);border-radius:15px;background:var(--pill);padding:15px;margin:12px 0 16px}
.fk-experience-card p{color:var(--text);line-height:2;font-size:14px;font-weight:600}
.fk-experience-card img{display:block;max-width:100%;height:auto;max-height:370px;object-fit:contain;border-radius:12px;margin:9px auto}
.fk-experience-date{color:var(--muted);font-size:11px}
.fk-public-idea,.fk-match-card{display:block;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s}
.fk-public-idea:hover,.fk-match-card:hover,.fk-public-idea:focus-visible,.fk-match-card:focus-visible{transform:translateY(-2px);box-shadow:0 13px 28px rgba(34,86,148,.14)}
.fk-public-idea::after,.fk-match-card::after{content:'اضغط لعرض التفاصيل والتقييمات ←';display:block;font-size:12px;color:var(--brand);font-weight:900;margin-top:14px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.fk-idea-page{width:calc(100% - 24px)}.fk-idea-head{padding:22px 12px;border-radius:23px}.fk-idea-tab{font-size:12px;padding:13px 4px}.fk-idea-info{grid-template-columns:1fr}.fk-idea-info>div{display:grid;grid-template-columns:28px 70px 1fr;gap:8px;align-items:center}.fk-idea-info>div>span{margin:0}.fk-idea-info p{margin:0}.fk-stars label span[aria-hidden]{font-size:38px}}

/* V1.15.20 — public comments: 50-character preview + accessible native expand/collapse. */
.fk-public-ratings{margin-top:30px;border-top:1px solid var(--line);padding-top:16px}
.fk-rating-card{border:1px solid var(--line);border-radius:15px;background:var(--pill);padding:15px;margin:12px 0 16px}
.fk-rating-card__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fk-rating-stars{color:#d69b23;font-size:20px;letter-spacing:2px}
.fk-public-comment,.fk-comment-full{color:var(--text);line-height:2;font-size:14px;font-weight:600;white-space:normal;overflow-wrap:anywhere;margin:8px 0}
.fk-comment-expand{margin:8px 0;color:var(--text);font-size:14px;line-height:2;font-weight:600}
.fk-comment-expand summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;cursor:pointer;list-style:none;overflow-wrap:anywhere}
.fk-comment-expand summary::-webkit-details-marker{display:none}
.fk-comment-expand summary::marker{content:''}
.fk-comment-expand summary:focus-visible{outline:2px solid #347ed0;outline-offset:3px;border-radius:4px}
.fk-comment-expand-label,.fk-comment-collapse-label{font-size:13px;font-weight:900;color:var(--brand);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.fk-comment-collapse-label,.fk-comment-expand[open] .fk-comment-preview,.fk-comment-expand[open] .fk-comment-expand-label{display:none}
.fk-comment-expand[open] .fk-comment-collapse-label{display:inline}
.fk-feedback-image-unavailable{border:1px dashed var(--line);background:var(--glass);border-radius:12px;color:var(--muted);font-weight:700;font-size:12px;text-align:center;padding:15px;margin-top:10px;line-height:1.8}

/* V1.15.21 — idea imagery, goal-first preview and a balanced three-tab bar */
.directory-tabs{max-width:560px;width:100%;}
.directory-tab{min-width:0;white-space:normal;text-align:center;line-height:1.35;}
.fk-public-idea__visual{display:grid;place-items:center;position:relative;overflow:hidden;width:100%;height:clamp(155px,29vw,225px);margin:13px 0 10px;border:1px solid var(--line);border-radius:17px;color:var(--brand);background:linear-gradient(135deg,rgba(171,219,249,.30),rgba(205,177,248,.25)),url('../images/galaxy-day.webp') center/cover;}
.fk-public-idea__visual.has-photo{background:var(--pill);}
.fk-public-idea__visual img{display:block;width:100%;height:100%;object-fit:cover;}
.fk-public-idea__visual svg{width:64px;height:64px;filter:drop-shadow(0 3px 15px rgba(70,120,201,.15));}
.fk-public-idea__visual>span{position:absolute;bottom:11px;right:11px;border-radius:999px;background:rgba(255,255,255,.86);color:#355d99;font-size:11px;font-weight:800;padding:5px 11px;}
.fk-public-idea__goal{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;line-height:1.9;max-height:5.7em;margin:8px 0 0;}
.fk-public-idea__more{display:block;margin-top:13px;color:var(--brand);font-size:13px;font-weight:900;}
.fk-public-idea::after,.fk-match-card::after{content:none;}
.fk-match-card .fk-public-idea__visual{margin:12px 0 10px;}
.fk-match-card .fk-public-idea__more{margin-top:10px;}
.fk-idea-main-photo{display:block;width:100%;height:auto;max-height:360px;object-fit:cover;border-radius:19px;margin:0 0 21px;border:1px solid var(--line);}
.fk-idea-head__goal{max-width:650px;margin:9px auto 0!important;line-height:1.8;white-space:pre-line;}
@media(max-width:540px){.directory-tabs{max-width:100%;gap:3px;padding:5px}.directory-tab{padding:12px 3px;font-size:11.5px}.fk-public-idea__visual{height:172px}.fk-public-idea__visual svg{width:53px;height:53px}}

.fk-public-idea__goal-label{display:block;color:var(--muted);font-size:11px;font-weight:800;margin:4px 0 0;}
.fk-match-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* V1.15.22 — account wallet and streamlined introduction */
.fk-about-page .fk-about-cover{margin:0 0 18px;overflow:hidden;border-radius:25px;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--glass)}
.fk-about-cover img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.fk-about-page .fk-about-lead{max-width:900px;margin:0 auto 16px}
.fk-about-lead p{margin:0;font-size:clamp(15px,2.6vw,19px);line-height:2.1;color:var(--text);font-weight:750}
.fk-about-owner strong{color:var(--brand)}
.fk-nav-wallet{display:flex;flex-wrap:wrap;gap:10px;padding:15px 4px;border-top:1px solid var(--line)}
.fk-nav-wallet a{padding:9px 12px;border-radius:12px;border:1px solid var(--line);font-size:13px;color:var(--brand);font-weight:800;background:var(--pill)}
.fk-account-card{max-width:700px;margin:0 auto 18px}
.fk-account-form{display:grid;gap:14px;margin-top:15px}
.fk-account-form label{display:grid;gap:7px;font-weight:800;color:var(--text);font-size:14px}
.fk-account-form input{border-radius:12px;padding:12px 13px;background:var(--panel);border:1px solid var(--line);min-height:47px;font:inherit;color:var(--text);width:100%;min-width:0}
.fk-account-form p{font-size:12px;line-height:1.8}
.fk-account-form .fk-pill-link{justify-self:start}
.fk-profile-links{margin-top:20px;display:flex;gap:11px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
.fk-profile-links a{background:var(--pill);border:1px solid var(--line);padding:10px 14px;border-radius:13px;color:var(--brand);font-weight:800}
.fk-wallet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.fk-wallet-item{padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--panel);min-width:0}
.fk-wallet-item h3{color:var(--brand);font-size:17px;margin:8px 0;overflow-wrap:anywhere}
.fk-wallet-item p{font-size:13px;margin:7px 0}
.fk-wallet-item a{font-weight:900;color:var(--brand)}
.fk-wallet-remove{padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--pill);color:var(--text);font:inherit;margin-top:10px}
.fk-save-idea{text-align:right;margin:9px 0 14px}
.fk-save-idea button,.fk-idea-login-hint button{padding:10px 16px;border:1px solid var(--line);background:var(--pill);border-radius:13px;color:var(--brand);font:inherit;font-weight:800}
.fk-idea-login-hint{margin:10px 0 16px;text-align:right}
.fk-pill-link--soft{background:var(--pill);color:var(--brand);border:1px solid var(--line);box-shadow:none}
@media(max-width:500px){.fk-about-cover{border-radius:18px!important}.fk-about-page .fk-about-lead{padding:18px!important}.fk-account-form .fk-pill-link{justify-self:stretch}.fk-profile-links a{flex:1 1 auto;text-align:center}}

.fk-profile-links form{display:inline-flex}.fk-profile-logout{font:inherit;font-weight:800;color:var(--brand);border:1px solid var(--line);background:var(--pill);padding:10px 14px;border-radius:13px;cursor:pointer}

/* V1.15.23 — genuine contiguous six-piece puzzle (only the puzzle scene). */
.puzzle-stage {
  min-height: 0;
  padding: clamp(16px, 3vw, 32px) 4px 20px;
}
.puzzle-stage__caption { margin-bottom: 16px; }
.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: min(100%, 420px);
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  direction: ltr; /* Fixed physical seams; Arabic text remains RTL in each piece. */
  isolation: isolate;
  overflow: visible;
}
.puzzle-tile {
  direction: rtl;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  position: relative;
  background: none;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  border: 0;
  border-radius: 0;
  z-index: 1;
  transform-origin: center;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), filter .24s ease, opacity .24s ease;
}
.puzzle-tile--projecting { z-index: 2; }
.puzzle-tile__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: rgba(var(--rgb), .38);
  stroke: rgba(var(--rgb), .95);
  stroke-width: 1.65;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 5px rgba(39, 66, 110, .12));
  transition: filter .24s ease, fill .24s ease, stroke-width .24s ease;
}
.puzzle-tile:nth-child(even) .puzzle-tile__shape { fill: rgba(var(--rgb), .38); }
.puzzle-tile__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 900;
  font-size: clamp(15px, 2.6vw, 19px);
  line-height: 1.25;
  padding: 12px;
  text-align: center;
  pointer-events: none;
}
.puzzle-tile__icon { width: 40px; height: 40px; }
.puzzle-tile__icon svg { width: 36px; height: 36px; }
.puzzle-tile:hover,
.puzzle-tile:focus-visible,
.puzzle-tile.is-selected {
  z-index: 12;
  transform: translateY(-4px) scale(1.035);
  filter: brightness(1.07) saturate(1.12);
}
.puzzle-tile:hover .puzzle-tile__shape,
.puzzle-tile:focus-visible .puzzle-tile__shape,
.puzzle-tile.is-selected .puzzle-tile__shape {
  fill: rgba(var(--rgb), .65);
  stroke-width: 2.6;
  filter: drop-shadow(0 10px 13px rgba(34, 74, 134, .31));
}
.puzzle-tile:focus-visible { outline: 3px solid #2357b0; outline-offset: 3px; }
@media (hover: hover) {
  .puzzle-grid:hover .puzzle-tile:not(:hover) { opacity: .78; filter: saturate(.84); }
}
.puzzle-grid:has(.puzzle-tile.is-selected) .puzzle-tile:not(.is-selected) { opacity: .75; }
html[data-theme="night"] .puzzle-tile__shape { fill: rgba(var(--rgb), .48); }
html[data-theme="night"] .puzzle-tile:hover .puzzle-tile__shape,
html[data-theme="night"] .puzzle-tile:focus-visible .puzzle-tile__shape,
html[data-theme="night"] .puzzle-tile.is-selected .puzzle-tile__shape { fill: rgba(var(--rgb), .70); }
.puzzle-stage__brand { margin-top: 20px; margin-bottom: 22px; background: transparent; border: 0; box-shadow: none; padding: 0; gap: 8px; }
.puzzle-stage__brand span { color: var(--brand); }
html[data-theme="night"] .puzzle-stage__caption,
html[data-theme="night"] .puzzle-tile,
html[data-theme="night"] .puzzle-tile__content,
html[data-theme="night"] .puzzle-tile__icon,
html[data-theme="night"] .puzzle-stage__brand span { color: #f8fbff; }
html[data-theme="night"] .puzzle-tile__icon svg { color: currentColor; }
html[data-theme="night"] .puzzle-stage__brand img { filter: drop-shadow(0 0 6px rgba(255,255,255,.18)); }
@media(max-width:760px) {
  .puzzle-grid { width: min(100%, 356px); max-width: 356px; }
  .puzzle-stage { min-height: 0; padding: 18px 3px; }
  .puzzle-tile__content { font-size: 16px; gap: 6px; padding: 9px; }
  .puzzle-tile__icon { width: 34px; height: 34px; }
  .puzzle-tile__icon svg { width: 31px; height: 31px; }
}
@media(max-width:410px) {
  .puzzle-grid { width: min(100%, 310px); max-width: 310px; }
  .puzzle-stage { min-height: 0; padding: 14px 3px; }
  .puzzle-stage__caption { margin-bottom: 12px; }
  .puzzle-tile__content { font-size: 15px; gap: 5px; }
  .puzzle-tile__icon, .puzzle-tile__icon svg { width: 30px; height: 30px; }
  /* The style selection dialog is narrower than the homepage. */
  #interactiveDialog .puzzle-grid { width: min(100%, 246px); max-width: 246px; }
  #interactiveDialog .puzzle-stage { min-height: 0; }
  #interactiveDialog .puzzle-tile__content { font-size: 12px; padding: 6px; }
}
@media(prefers-reduced-motion: reduce) {
  .puzzle-tile, .puzzle-tile__shape { transition: none; }
}

/* V1.15.24.1 — only the homepage puzzle: transparent surround and legible night labels. */
html[data-active-mode="interactive"][data-interactive-scene="puzzle"] .home-interactive-section .interactive-preview {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-height: 0;
}
html[data-active-mode="interactive"][data-interactive-scene="puzzle"] .home-interactive-section .interactive-scene--puzzle {
  background: transparent;
  border: 0;
  min-height: 0;
  overflow: visible;
}
html[data-theme="night"][data-interactive-scene="puzzle"] .home-interactive-section .puzzle-tile__content,
html[data-theme="night"][data-interactive-scene="puzzle"] .home-interactive-section .puzzle-tile__content strong,
html[data-theme="night"][data-interactive-scene="puzzle"] .home-interactive-section .puzzle-tile__icon,
html[data-theme="night"][data-interactive-scene="puzzle"] .home-interactive-section .puzzle-tile__icon svg,
html[data-theme="night"][data-interactive-scene="puzzle"] .home-interactive-section .puzzle-stage__caption,
html[data-theme="night"][data-interactive-scene="puzzle"] .home-interactive-section .puzzle-stage__brand span {
  color: #fff;
}


/* V1.15.25 — home puzzle only: reliably transparent surround and white night labels.
   Active-scene selectors do not change the galaxy or the other artistic layouts. */
html[data-interactive-scene="puzzle"] .home-interactive-section #interactiveHome,
html[data-interactive-scene="puzzle"] .home-interactive-section #interactiveHome > .interactive-scene--puzzle,
html[data-interactive-scene="puzzle"] .home-interactive-section #interactiveHome .puzzle-stage {
  background: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-interactive-scene="puzzle"] .home-interactive-section #interactiveHome {
  border-radius: 0;
  min-height: 0;
  overflow: visible;
}
html[data-interactive-scene="puzzle"] .home-interactive-section #interactiveHome > .interactive-scene--puzzle {
  min-height: 0;
  overflow: visible;
}
html[data-interactive-scene="puzzle"] .home-interactive-section .puzzle-stage__brand {
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-theme="night"] .home-interactive-section #interactiveHome .interactive-scene--puzzle .puzzle-stage__caption,
html[data-theme="night"] .home-interactive-section #interactiveHome .interactive-scene--puzzle .puzzle-tile,
html[data-theme="night"] .home-interactive-section #interactiveHome .interactive-scene--puzzle .puzzle-tile__content,
html[data-theme="night"] .home-interactive-section #interactiveHome .interactive-scene--puzzle .puzzle-tile__content strong,
html[data-theme="night"] .home-interactive-section #interactiveHome .interactive-scene--puzzle .puzzle-tile__icon,
html[data-theme="night"] .home-interactive-section #interactiveHome .interactive-scene--puzzle .puzzle-stage__brand span {
  color: #fff;
  text-shadow: 0 1px 4px rgba(8, 20, 42, .68);
}
html[data-theme="night"] .home-interactive-section #interactiveHome .interactive-scene--puzzle .puzzle-tile__icon svg,
html[data-theme="night"] .home-interactive-section #interactiveHome .interactive-scene--puzzle .puzzle-tile__icon svg use {
  color: #fff;
  stroke: #fff;
  filter: drop-shadow(0 1px 2px rgba(8, 20, 42, .55));
}

/* V1.15.26 — responsive idea photography: fit the whole uploaded photo, never crop it.
   The illustration (when no photo exists) retains its previous dimensions. */
.fk-public-idea__visual.has-photo {
  display: block;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  background: var(--pill);
}
.fk-public-idea__visual.has-photo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 760px);
  object-fit: contain;
  object-position: center;
}
.fk-idea-main-photo {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(78vh, 850px);
  object-fit: contain;
  object-position: center;
  background: var(--pill);
}
@media (max-width: 540px) {
  .fk-public-idea__visual.has-photo { height: auto; }
  .fk-public-idea__visual.has-photo img { max-height: min(72vh, 700px); }
  .fk-idea-main-photo { max-height: min(78vh, 760px); }
}