body.azk-modal-open { overflow: hidden; }
.journey-engine { color: var(--azk-text); }
.azk-page {
    background:
        radial-gradient(circle at 50% 0, rgba(255,215,106,.08), transparent 34%),
        radial-gradient(circle at 12% 0, rgba(1,177,196,.08), transparent 30%),
        linear-gradient(180deg, #001f25 0%, var(--azk-bg) 38%, #00181d 100%);
    min-height: 100vh;
    padding: 18px 14px 100px;
}
.azk-shell { width: min(100%, 760px); margin: 0 auto; }
.hero-card,
.home-share-card,
.practice-top-card,
.task-card,
.completion-card,
.share-gate,
.light-final-card,
.light-viral-card,
.lights-entry-card {
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 55px rgba(0,0,0,.20);
    border-radius: 24px;
}

.hero-card {
    padding: 30px 24px;
    margin-top: 14px;
}

.hero-title {
    font-size: clamp(27px,5.4vw,40px);
    line-height: 1.42;
    margin: 0 0 15px;
    font-weight: 800;
}

.hero-desc {
    color: var(--azk-muted);
    font-size: 17px;
    line-height: 1.9;
    margin: 0 0 22px;
}

.home-eyebrow {
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    color: var(--azk-gold);
    margin: 18px 4px 0;
}

.azk-btn {
    appearance: none;
    border: 0;
    border-radius: 16px;
    cursor: pointer;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 800;
    width: 100%;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.azk-btn:active { transform: scale(.985); }
.azk-btn:disabled { opacity: .48; cursor: not-allowed; }

.azk-btn-primary,
.complete-btn {
    color: #001a1e;
    background: linear-gradient(135deg, var(--azk-primary), #69e5ed);
    box-shadow: 0 10px 30px rgba(1,177,196,.23);
}

.home-main-btn { margin-top: 4px; }

.text-btn,
.back-btn {
    border: 0;
    background: transparent;
    color: var(--azk-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 9px;
}

.restart-home-btn {
    width: 100%;
    margin-top: 8px;
}

.quick-points {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
    margin-top: 20px;
}

.quick-points > div {
    padding: 12px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    color: #d8eef1;
    font-size: 13px;
    text-align: center;
    line-height: 1.55;
}

.home-share-card {
    padding: 22px;
    margin-top: 15px;
}

.home-share-card h3 { margin: 0 0 9px; }

.home-share-card p,
.share-gate p,
.completion-card p,
.light-viral-card p,
.lights-modal-head p,
.light-final-card p {
    color: var(--azk-muted);
    line-height: 1.8;
}

.share-soft-btn {
    width: 100%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
    color: var(--azk-text);
    border-radius: 14px;
    padding: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* Only the light entry card gets its compact custom layout. */
.lights-entry-card {
    position: relative;
    overflow: hidden;
    padding: 16px 18px;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at 55% 0, rgba(255,215,106,.075), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}

.lights-entry-title {
    margin: 0 0 13px;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 800;
    text-align: right;
}

.lights-entry-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 18px;
    align-items: center;
}

.lights-entry-social {
    min-width: 0;
}

.mini-lights-static {
    display: flex;
    align-items: flex-end;
    gap: 13px;
    min-height: 39px;
    overflow: hidden;
}

/* Top box bulbs intentionally stay small, static and without glow. */
.mini-lights-static .glow-light {
    animation: none !important;
    flex: 0 0 auto;
}

.mini-lights-static .glow-light::before {
    display: none;
}

.mini-lights-static .bulb-globe {
    box-shadow: inset 0 -4px 7px rgba(110,72,0,.13);
    filter: saturate(.78) brightness(.95);
}

.top-your-turn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #d7e7e9;
    font-size: 12px;
    line-height: 1.5;
}

.top-your-turn .glow-light {
    animation: none !important;
    flex: 0 0 auto;
}

.top-your-turn .glow-light::before {
    display: none;
}

.lights-more-count {
    margin-top: 5px;
    color: var(--azk-muted);
    font-size: 11.5px;
    font-weight: 700;
}

.lights-entry-action {
    text-align: center;
    align-self: center;
}

.lights-entry-action strong {
    display: block;
    color: #ffe39a;
    font-size: 14px;
    margin-bottom: 7px;
}

.light-watch-link,
.light-modal-start,
.light-create-btn,
.light-share-main {
    appearance: none;
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, #ffedaa, #ffd76a 50%, #f7bd43);
    color: #3b2900;
    box-shadow: 0 12px 30px rgba(255,205,82,.15);
    font-weight: 900;
}

.light-watch-link {
    width: 100%;
    white-space: nowrap;
    border-radius: 999px;
    padding: 10px 17px;
    font-size: 14px;
}

/* bulb - same silhouette language as the attached reference */
.glow-light {
    --delay: 0s;
    --drift: 0px;
    position: relative;
    width: 42px;
    height: 58px;
    color: #4a3500;
    font-weight: 900;
    isolation: isolate;
    animation: azkBulbFloat 5.6s ease-in-out infinite var(--delay);
}

.glow-light::before {
    content: "";
    position: absolute;
    inset: -30% -45% -10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,226,143,.32), rgba(255,226,143,.09) 44%, transparent 72%);
    opacity: .9;
    z-index: -1;
    animation: azkAuraPulse 3.2s ease-in-out infinite var(--delay);
}

.bulb-globe {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 36px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 27%, #fffdf1 0 9%, #fff6ce 11%, #ffe58c 34%, #f6c94f 62%, #d49c25 100%);
    box-shadow:
        inset 0 -5px 8px rgba(110,72,0,.16),
        0 0 calc(var(--light-glow-strength) * 3px) rgba(255,224,137,.72),
        0 0 calc(var(--light-glow-strength) * 7px) var(--light-glow);
    z-index: 2;
    transition: background .32s ease, box-shadow .32s ease, filter .32s ease, opacity .32s ease;
}

/* tapered lower part of the upper bulb, matching the provided silhouette */
.bulb-globe::after {
    content: "";
    position: absolute;
    left: 17%;
    right: 17%;
    bottom: -8px;
    height: 16px;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
    background: linear-gradient(180deg, #efc54f 0%, #c98b1d 100%);
    box-shadow: inset 0 -4px 5px rgba(80,52,0,.14);
}

.bulb-globe span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 3;
    font-size: inherit;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
    transition: opacity .3s ease, transform .3s ease;
}

.bulb-base {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 46%;
    height: 10px;
    transform: translateX(-50%);
    border-radius: 0 0 48% 48% / 0 0 72% 72%;
    background: linear-gradient(180deg, #7f8a93 0%, #59646e 55%, #414b54 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.18);
    z-index: 1;
    transition: background .32s ease, opacity .32s ease;
}

.glow-light-mini { width: 24px; height: 34px; font-size: 9px; }
.glow-light-mini .bulb-globe { height: 22px; }
.glow-light-mini .bulb-globe::after { bottom: -4px; height: 8px; }
.glow-light-mini .bulb-base { height: 6px; }

.glow-light-sky { width: 38px; height: 54px; font-size: 13px; }
.glow-light-sky .bulb-globe { height: 34px; }
.glow-light-sky .bulb-globe::after { bottom: -6px; height: 12px; }
.glow-light-sky .bulb-base { height: 9px; }

.glow-light-large { width: 88px; height: 122px; font-size: 31px; }
.glow-light-large .bulb-globe { height: 79px; }
.glow-light-large .bulb-globe::after { bottom: -15px; height: 30px; }
.glow-light-large .bulb-base { height: 20px; }

.glow-light-peak { width: 118px; height: 162px; font-size: 44px; }
.glow-light-peak .bulb-globe { height: 103px; }
.glow-light-peak .bulb-globe::after { bottom: -19px; height: 38px; }
.glow-light-peak .bulb-base { height: 26px; }

.glow-light-peak-small { width: 30px; height: 43px; font-size: 10px; opacity: .82; }
.glow-light-peak-small .bulb-globe { height: 26px; }
.glow-light-peak-small .bulb-globe::after { bottom: -5px; height: 10px; }
.glow-light-peak-small .bulb-base { height: 7px; }

/* popup bulbs begin dark, then turn on one-by-one */
.glow-light-sky.is-pending::before {
    opacity: .08;
}

.glow-light-sky.is-pending .bulb-globe {
    background: linear-gradient(180deg, rgba(196,202,204,.16), rgba(87,102,107,.18));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    filter: saturate(.2) brightness(.55);
    opacity: .72;
}

.glow-light-sky.is-pending .bulb-globe::after {
    background: linear-gradient(180deg, rgba(135,145,149,.2), rgba(73,85,90,.24));
}

.glow-light-sky.is-pending .bulb-base {
    opacity: .5;
    background: linear-gradient(180deg, #59646c, #39434a);
}

.glow-light-sky.is-pending .bulb-globe span {
    opacity: 0;
    transform: scale(.4);
}

.glow-light.is-off::before {
    opacity: .03;
}

.glow-light.is-off .bulb-globe {
    background: linear-gradient(180deg, #4d5a5f 0%, #334147 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
    filter: saturate(.1) brightness(.58);
}

.glow-light.is-off .bulb-globe::after {
    background: linear-gradient(180deg, #465157 0%, #303a3f 100%);
}

.glow-light.is-off .bulb-base {
    background: linear-gradient(180deg, #566169 0%, #38434a 100%);
    opacity: .74;
}

.glow-light.is-off .bulb-globe span {
    opacity: 0;
}

.glow-light-sky.is-revealed {
    animation: azkBulbFloat 5.6s ease-in-out infinite var(--delay), azkBulbReveal .52s cubic-bezier(.2,.85,.25,1.18) both;
}

.glow-light-sky.is-revealed .bulb-globe span {
    opacity: 1;
    transform: scale(1);
}

@keyframes azkBulbReveal {
    0% { transform: scale(.72); opacity: .45; }
    58% { transform: scale(1.13); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes azkAuraPulse {
    0%, 100% { transform: scale(.92); opacity: .58; }
    50% { transform: scale(1.12); opacity: 1; }
}

@keyframes azkBulbFloat {
    0%,100% { translate: 0 0; }
    50% { translate: var(--drift) -5px; }
}

/* journey */
.journey-top-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.journey-chip { font-size:13px; color:var(--azk-gold); font-weight:800; background:rgba(244,197,92,.09); border:1px solid rgba(244,197,92,.18); padding:8px 11px; border-radius:999px; }
.practice-top-card { padding:17px 18px; margin-bottom:14px; }
.compact-progress-head { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:var(--azk-muted); }
.compact-progress-head strong { color:var(--azk-text); }
.progress-track,.lights-goal-track { height:9px; background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden; margin-top:10px; }
.progress-fill,.lights-goal-fill { height:100%; width:0; border-radius:inherit; transition:width .35s ease; }
.progress-fill { background:linear-gradient(90deg, var(--azk-primary-dark), var(--azk-primary), #6ce6ee); }
.light-progress-reminder { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:13px; color:#ffe8a1; font-size:13px; font-weight:700; }
.tiny-glow-dot { width:9px; height:9px; border-radius:50%; background:var(--light-color); box-shadow:0 0 13px var(--light-glow); animation: azkTinyPulse 2.4s ease-in-out infinite; }
@keyframes azkTinyPulse { 50% { box-shadow:0 0 21px var(--light-glow); transform:scale(1.18); } }
.task-card { padding:28px 22px; text-align:center; min-height:330px; display:flex; flex-direction:column; justify-content:center; }
.task-type { display:inline-flex; align-self:center; background:rgba(1,177,196,.10); border:1px solid rgba(1,177,196,.20); color:#8ceaf1; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:800; margin-bottom:15px; }
.task-title { font-size:25px; line-height:1.5; margin:0 0 12px; }
.task-instruction { color:var(--azk-muted); line-height:1.8; margin:0 auto 16px; }
.task-content-text { font-size:22px; line-height:2.05; font-weight:700; color:#fff; white-space:pre-line; }
.counter-panel {
    margin-top: 24px;
}

.counter-big-btn {
    position: relative;
    width: 100%;
    min-height: 116px;
    overflow: hidden;
    border: 1px solid rgba(244, 197, 92, .34);
    border-radius: 22px;
    padding: 18px 20px;
    cursor: pointer;
    color: #fff7df;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 213, 106, .15), transparent 48%),
        linear-gradient(135deg, rgba(76, 49, 16, .92), rgba(40, 31, 18, .96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 14px 34px rgba(0, 0, 0, .20);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.counter-big-btn::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    right: -55px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 197, 92, .13), transparent 68%);
    pointer-events: none;
}

.counter-big-btn:hover {
    border-color: rgba(255, 215, 112, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 16px 38px rgba(0, 0, 0, .24),
        0 0 0 3px rgba(244, 197, 92, .045);
}

.counter-big-btn:active {
    transform: scale(.992);
}

.counter-main,
.counter-sub {
    position: relative;
    z-index: 2;
    display: block;
}

.counter-main {
    direction: ltr;
    unicode-bidi: isolate;
    width: fit-content;
    min-width: 118px;
    margin: 0 auto;
    padding: 6px 18px 7px;
    border: 1px solid rgba(255, 220, 132, .23);
    border-radius: 999px;
    background: rgba(255, 220, 132, .07);
    color: #ffd56d;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: .5px;
    text-shadow: 0 2px 16px rgba(255, 199, 63, .14);
}

.counter-sub {
    margin-top: 11px;
    color: rgba(255, 244, 214, .78);
    font-size: 12px;
    font-weight: 700;
}

.counter-big-btn.done {
    border-color: rgba(77, 213, 164, .35);
    background:
        radial-gradient(circle at 50% 0%, rgba(77, 213, 164, .13), transparent 48%),
        linear-gradient(135deg, rgba(22, 72, 58, .94), rgba(18, 48, 41, .96));
}

.counter-big-btn.done .counter-main {
    color: #8ff0cc;
    border-color: rgba(113, 235, 191, .24);
    background: rgba(113, 235, 191, .07);
    text-shadow: none;
}

.counter-reset {
    display: inline-block;
    margin-top: 8px;
    color: rgba(255, 239, 196, .60);
    font-size: 12px;
}

.counter-reset:hover {
    color: #ffe29a;
}
.sticky-actions { position:sticky; bottom:14px; display:grid; grid-template-columns:54px 1fr 54px; gap:9px; margin-top:15px; z-index:8; }
.complete-btn,.nav-icon-btn { height:54px; border:0; border-radius:16px; font-weight:800; cursor:pointer; }
.nav-icon-btn { background:#153a42; color:var(--azk-text); font-size:20px; }
.nav-icon-btn:disabled { opacity:.35; }
.footer-note { text-align:center; color:var(--azk-muted); font-size:12px; line-height:1.6; margin:16px 12px; }
.share-gate { padding:22px; margin-bottom:14px; text-align:center; }
.azk-btn-share { background:linear-gradient(135deg, #32d4a0, #21b889); color:#04251b; }
.share-gate h3 { margin-top:0; }

/* final/viral */
.light-final-card,.light-viral-card,.completion-card { padding:28px 22px; text-align:center; }
.final-step-badge { display:inline-flex; background:rgba(255,215,106,.10); color:#ffe39c; border:1px solid rgba(255,215,106,.18); padding:7px 12px; border-radius:999px; font-size:12px; font-weight:800; margin-bottom:14px; }
.light-final-card h2,.light-viral-card h2,.completion-card h2 { margin:0 0 12px; font-size:28px; line-height:1.5; }
.light-name-label { display:block; text-align:right; margin-bottom:8px; font-weight:700; }
.light-name-input { width:100%; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.05); color:#fff; padding:15px 16px; font-size:16px; outline:none; }
.light-name-input::placeholder { color:#c3dadd; }
.light-name-input:disabled { opacity:.5; }
.light-letter-preview { margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:16px; padding:12px 14px; }
.light-letter-preview span { color:var(--azk-muted); font-size:14px; }
.light-letter-preview strong { font-size:28px; color:#ffe59c; }
.anonymous-choice { display:inline-flex; align-items:center; gap:8px; margin-top:14px; cursor:pointer; }
.form-error { color:#ffb2b2; font-size:14px; margin:12px 0 0; }
.your-light-inline { display:flex; justify-content:center; margin-bottom:18px; }
.light-created-message { margin-bottom:20px; }
.viral-divider { width:100px; height:1px; background:rgba(255,255,255,.10); margin:18px auto; }
.light-viral-card h3 { margin:0 0 10px; font-size:24px; }
.viral-tree { position:relative; width:min(100%,280px); height:160px; margin:12px auto 16px; }
.tree-light {
    position:absolute; width:24px; height:32px; border-radius:50% 50% 42% 42% / 58% 58% 44% 44%;
    background: radial-gradient(circle at 38% 28%, #fff7d8 0 10%, #fff0b6 12%, var(--light-color) 40%, #f0d37a 58%, rgba(255,255,255,.18) 68%, rgba(255,215,106,.06) 82%, transparent 100%);
    box-shadow:0 0 14px var(--light-glow);
}
.tree-light::after { content:""; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:10px; height:8px; border-radius:4px 4px 7px 7px; background:linear-gradient(180deg,#8e98a1 0%,#66727c 100%); }
.tree-line { position:absolute; background:rgba(255,255,255,.16); transform-origin:top center; }
.tree-light.root { top:0; left:calc(50% - 12px); } .tree-light.c1 { top:72px; right:36px; } .tree-light.c2 { top:72px; left:36px; } .tree-light.c3 { bottom:0; right:0; } .tree-light.c4 { bottom:0; left:0; }
.tree-line.l1 { top:30px; left:calc(50% - 1px); width:2px; height:46px; } .tree-line.l2 { top:74px; left:54px; right:54px; height:2px; }
.completion-icon { width:66px; height:66px; display:grid; place-items:center; margin:0 auto 14px; border-radius:50%; background:rgba(35,180,133,.12); color:#89f1cb; font-size:30px; font-weight:900; }
.completion-share-btn { margin-top:12px; }

.share-fallback { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }
.share-fallback.is-visible { display:grid; }
.share-native-btn[hidden] { display:none !important; }
.share-fallback a,.share-fallback button {
    display:inline-flex; justify-content:center; align-items:center; min-height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05); color:var(--azk-text); padding:10px 12px; font-weight:700; text-decoration:none; cursor:pointer;
}

.share-fallback .share-channel--whatsapp { background:#25D366; color:#063b1c; border-color:#25D366; }
.share-fallback .share-channel--telegram { background:#229ED9; color:#fff; border-color:#229ED9; }
.share-fallback .share-channel--facebook { background:#1877F2; color:#fff; border-color:#1877F2; }
.share-fallback .share-channel--x { background:#111; color:#fff; border-color:#555; }
.share-fallback .share-channel--copy { background:#087d8a; color:#fff; border-color:#087d8a; grid-column:1 / -1; }
.share-fallback .share-channel:hover { filter:brightness(1.12); transform:translateY(-2px); }
.share-fallback .share-channel:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@media (max-width:640px) {
    .share-fallback { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* modal */
.lights-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: grid;
    place-items: center;
    padding: 14px;
    opacity: 0;
    transition: opacity .18s ease;
}

.lights-modal.is-open { opacity: 1; }

.lights-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1,8,10,.84);
    backdrop-filter: blur(8px);
}

.lights-modal-dialog {
    position: relative;
    z-index: 2;
    width: min(100%, 720px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #0b2a30, #071d22);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 25px;
    box-shadow: 0 28px 90px rgba(0,0,0,.5);
    transform: translateY(8px) scale(.99);
    transition: transform .18s ease;
    overflow: hidden;
}

.lights-modal.is-open .lights-modal-dialog { transform: none; }

.lights-close {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.10);
    background: #12353c;
    color: #fff;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

.lights-modal-head {
    padding: 17px 20px 13px;
    text-align: right;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.lights-modal-head h2 {
    margin: 0 0 3px 42px;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 800;
}

.lights-modal-head p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--azk-muted);
}

.lights-goal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.055);
    color: #d4e3e5;
    font-size: 11.5px;
    font-weight: 700;
}

.lights-goal-row span:last-child {
    direction: rtl;
    color: #ffe39a;
}

.lights-modal-body {
    padding: 13px 16px 4px;
    overflow: hidden;
}

.lights-sky-shell {
    position: relative;
    padding: 15px 13px 13px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 30%, rgba(255,215,106,.08), transparent 52%),
        rgba(255,255,255,.022);
    border: 1px solid rgba(255,255,255,.055);
    overflow: hidden;
}

.lights-sky {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px 10px;
    align-items: start;
    justify-items: center;
    min-height: 170px;
}

.lights-sky .glow-light {
    animation-duration: 4.1s, 6.4s;
}

.popup-your-turn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.popup-your-turn .glow-light {
    animation: none !important;
    flex: 0 0 auto;
}

.popup-your-turn strong,
.popup-your-turn span {
    display: block;
}

.popup-your-turn strong {
    color: #fff;
    font-size: 13px;
    margin-bottom: 2px;
}

.popup-your-turn span {
    color: #cbdcde;
    font-size: 11.5px;
}

.lights-modal-footer {
    padding: 12px 16px 16px;
    background: #071d22;
}

.light-modal-start {
    background: transparent;
    color: #ffd76a;
    border: 1.5px solid rgba(255,215,106,.68);
    box-shadow: none;
    transition: background .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.light-modal-start.is-ready {
    background: linear-gradient(135deg, #ffedaa, #ffd76a 50%, #f7bd43);
    color: #3b2900;
    border-color: transparent;
    box-shadow: 0 12px 34px rgba(255,205,82,.20);
}

.lights-empty-note {
    width: 100%;
    text-align: center;
    color: var(--azk-muted);
    font-size: 12px;
}

.lights-sky-empty {
    grid-column: 1 / -1;
    align-self: center;
    text-align: center;
    color: var(--azk-muted);
    padding: 24px 10px;
}

/* peak */
.light-peak-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,7,8,.89); display:grid; place-items:center; opacity:0; transition:opacity .28s ease; }
.light-peak-overlay.is-active { opacity:1; }
.peak-scene { text-align:center; position:relative; width:min(92vw,620px); height:500px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.peak-user-light { opacity:0; transform:scale(.18); transition:transform .85s cubic-bezier(.17,.84,.3,1.16), opacity .45s ease; }
.light-peak-overlay.is-active .peak-user-light { opacity:1; transform:scale(1); }
.peak-surroundings { position:absolute; inset:0; }
.peak-surroundings .glow-light { position:absolute; opacity:0; transition:opacity .45s ease 1s; }
.light-peak-overlay.is-active .peak-surroundings .glow-light { opacity:.7; }
.peak-surroundings .glow-light:nth-child(1) { left:13%; top:18%; } .peak-surroundings .glow-light:nth-child(2) { right:14%; top:19%; }
.peak-surroundings .glow-light:nth-child(3) { left:23%; top:37%; } .peak-surroundings .glow-light:nth-child(4) { right:25%; top:38%; }
.peak-surroundings .glow-light:nth-child(5) { left:10%; bottom:24%; } .peak-surroundings .glow-light:nth-child(6) { right:11%; bottom:25%; }
.peak-surroundings .glow-light:nth-child(7) { left:31%; bottom:12%; } .peak-surroundings .glow-light:nth-child(8) { right:32%; bottom:12%; }
.peak-surroundings .glow-light:nth-child(n+9) { display:none; }
.peak-scene h2,.peak-scene p { position:relative; z-index:3; opacity:0; transform:translateY(8px); transition:opacity .35s ease 1.05s, transform .35s ease 1.05s; }
.light-peak-overlay.is-active .peak-scene h2,.light-peak-overlay.is-active .peak-scene p { opacity:1; transform:none; }
.peak-scene h2 { font-size:31px; margin:24px 0 8px; }
.peak-scene p { color:#d6e8eb; margin:0; font-size:15px; }

@media (max-width: 760px) {
    .lights-entry-content {
        grid-template-columns: minmax(0,1fr) 115px;
        gap: 12px;
    }

    .mini-lights-static {
        gap: 10px;
    }

    .lights-sky {
        grid-template-columns: repeat(6,1fr);
    }
}

@media (max-width: 640px) {
    .azk-page { padding: 14px 11px 95px; }

    .hero-card,
    .task-card,
    .light-final-card,
    .light-viral-card,
    .completion-card,
    .lights-entry-card {
        padding: 18px 14px;
    }

    .quick-points { grid-template-columns: 1fr; }

    .lights-entry-title {
        font-size: 16px;
        margin-bottom: 11px;
    }

    .lights-entry-content {
        grid-template-columns: minmax(0,1fr) 100px;
        gap: 10px;
    }

    .mini-lights-static {
        gap: 8px;
        min-height: 34px;
    }

    .mini-lights-static .glow-light:nth-child(n+6) {
        display: none;
    }

    .top-your-turn {
        font-size: 10.5px;
        gap: 6px;
    }

    .lights-more-count {
        font-size: 10.5px;
    }

    .lights-entry-action strong {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .light-watch-link {
        padding: 9px 10px;
        font-size: 13px;
    }

    .lights-modal {
        padding: 8px;
    }

    .lights-modal-dialog {
        max-height: 96vh;
        border-radius: 20px;
    }

    .lights-modal-head {
        padding: 14px 13px 11px;
    }

    .lights-modal-head h2 {
        margin-left: 38px;
        font-size: 17px;
    }

    .lights-modal-head p {
        font-size: 11px;
    }

    .lights-goal-row {
        gap: 8px;
        font-size: 10px;
        margin-top: 9px;
        padding-top: 8px;
    }

    .lights-modal-body {
        padding: 10px 10px 2px;
    }

    .lights-sky-shell {
        padding: 12px 8px 10px;
    }

    .lights-sky {
        grid-template-columns: repeat(5,1fr);
        gap: 12px 6px;
        min-height: 150px;
    }

    .glow-light-sky {
        width: 32px;
        height: 46px;
        font-size: 11px;
    }

    .glow-light-sky .bulb-globe { height: 29px; }
    .glow-light-sky .bulb-globe::after { bottom: -5px; height: 10px; }
    .glow-light-sky .bulb-base { height: 8px; }

    .popup-your-turn {
        gap: 7px;
        margin-top: 10px;
        padding-top: 9px;
    }

    .popup-your-turn strong { font-size: 12px; }
    .popup-your-turn span { font-size: 10.5px; }

    .lights-modal-footer {
        padding: 10px 10px 12px;
    }

    .sticky-actions { grid-template-columns: 48px 1fr 48px; }
    .task-content-text { font-size: 20px; }
    .light-viral-card h3 { font-size: 21px; }
    .share-fallback { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   V5 - simplified lights box + static lamp wall
   ========================================================= */

/* Top box: lamps tightly packed and count on the same line. */
.lights-entry-content {
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 16px;
}

.lights-entry-social-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.mini-lights-static {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-height: 27px;
    flex: 0 0 auto;
    overflow: visible;
}

.mini-lights-static .glow-light {
    animation: none !important;
    width: 17px;
    height: 24px;
    font-size: 6px;
}

.mini-lights-static .glow-light::before {
    display: none !important;
}

.mini-lights-static .bulb-globe {
    height: 15px;
    box-shadow: inset 0 -2px 4px rgba(110,72,0,.12) !important;
    filter: saturate(.76) brightness(.96);
}

.mini-lights-static .bulb-globe::after {
    bottom: -3px;
    height: 6px;
}

.mini-lights-static .bulb-base {
    height: 4px;
    box-shadow: none;
}

.lights-more-count {
    margin: 0;
    color: #d5e4e6;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* Remove the previous separate "your turn" lamp row. */
.top-your-turn {
    display: none !important;
}

/* Popup has no animation/transitions. */
.lights-modal,
.lights-modal-dialog,
.lights-modal .glow-light,
.lights-modal .glow-light::before,
.lights-modal .bulb-globe,
.lights-modal .bulb-globe span,
.lights-modal .bulb-base,
.light-modal-start {
    animation: none !important;
    transition: none !important;
}

.lights-modal {
    opacity: 1;
}

.lights-modal-dialog,
.lights-modal.is-open .lights-modal-dialog {
    transform: none;
}

/* Single compact headline, aligned to the right. */
.lights-modal-head {
    padding: 17px 20px 12px;
    text-align: right;
}

.lights-modal-head h2 {
    margin: 0 42px 0 0;
    font-size: 16px;
    line-height: 1.65;
    font-weight: 800;
    color: #f5fbfc;
}

.lights-modal-head p {
    display: none !important;
}

/* No progress bar. Only two clear counters. */
.lights-goal-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.lights-goal-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lights-goal-side small {
    color: #8eaaae;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
}

.lights-goal-side strong {
    color: #f5fbfc;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
}

.lights-goal-mission {
    text-align: left;
    align-items: flex-end;
}

.lights-goal-mission strong {
    color: #9fe9ef;
}

/* Lamp wall */
.lights-modal-body {
    padding: 10px 16px 0;
    overflow: hidden;
}

.lights-wall-title {
    margin: 0 2px 7px;
    color: #dcebed;
    font-size: 11.5px;
    font-weight: 800;
    text-align: right;
}

.lights-wall-scroll {
    position: relative;
    height: min(47vh, 330px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 9px 26px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 17px;
    background: rgba(255,255,255,.018);
    scrollbar-width: thin;
    scrollbar-color: rgba(151,190,194,.34) transparent;
}

.lights-wall-scroll::-webkit-scrollbar {
    width: 6px;
}

.lights-wall-scroll::-webkit-scrollbar-thumb {
    background: rgba(151,190,194,.30);
    border-radius: 999px;
}

.lights-wall-scroll::after {
    content: "";
    position: sticky;
    display: block;
    left: 0;
    right: 0;
    bottom: -26px;
    height: 54px;
    margin-top: -54px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7,29,34,0), rgba(7,29,34,.88));
    z-index: 5;
}

.lights-wall-section {
    position: relative;
    min-height: 255px;
}

.lights-wall-section-title {
    position: sticky;
    top: -12px;
    z-index: 4;
    margin: -2px -2px 10px;
    padding: 7px 4px 6px;
    background: rgba(8,34,39,.92);
    color: #9eb8bc;
    font-size: 10.5px;
    font-weight: 700;
    text-align: right;
}

.lights-sky {
    display: grid;
    grid-template-columns: repeat(10, minmax(0,1fr));
    gap: 12px 5px;
    min-height: 0;
    align-items: start;
    justify-items: center;
}

/* Popup lamps are deliberately much smaller. */
.lights-modal .glow-light-sky {
    width: 21px;
    height: 30px;
    font-size: 7px;
}

.lights-modal .glow-light-sky::before {
    inset: -15% -18% -4%;
    opacity: .22;
}

.lights-modal .glow-light-sky .bulb-globe {
    height: 19px;
    box-shadow:
        inset 0 -2px 4px rgba(110,72,0,.13),
        0 0 7px rgba(255,224,137,.24);
}

.lights-modal .glow-light-sky .bulb-globe::after {
    bottom: -4px;
    height: 8px;
}

.lights-modal .glow-light-sky .bulb-base {
    height: 5px;
}

/* Static dark lamps. */
.lights-sky-off .glow-light::before {
    opacity: 0 !important;
}

.lights-sky-off .glow-light.is-off .bulb-globe {
    background: linear-gradient(180deg, #47545a 0%, #303c42 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.045) !important;
    filter: none;
    opacity: .9;
}

.lights-sky-off .glow-light.is-off .bulb-globe::after {
    background: linear-gradient(180deg, #445056 0%, #2d383e 100%);
}

.lights-sky-off .glow-light.is-off .bulb-base {
    background: linear-gradient(180deg, #505c63 0%, #333d43 100%);
    opacity: .85;
}

.lights-scroll-note {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 2px 0 8px;
    color: #8ba9ad;
    font-size: 10.5px;
    font-weight: 700;
    border-top: 1px solid rgba(255,255,255,.045);
    border-bottom: 1px solid rgba(255,255,255,.045);
}

/* First unlit lamp is the user's visual open loop. */
.is-your-lamp {
    z-index: 12;
}

.your-lamp-tooltip {
    position: absolute;
    right: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(50%);
    width: 148px;
    padding: 7px 9px;
    border-radius: 9px;
    background: #f5fbfc;
    color: #0b343a;
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    font-size: 10.5px;
    line-height: 1.5;
    font-weight: 800;
    text-align: center;
    white-space: normal;
}

.your-lamp-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    border: 6px solid transparent;
    border-top-color: #f5fbfc;
}

/* CTA uses the website's primary color, not yellow. */
.lights-modal-footer {
    padding: 12px 16px 16px;
    background: #071d22;
}

.light-modal-start,
.light-modal-start.is-ready {
    background: linear-gradient(135deg, var(--azk-primary-dark), var(--azk-primary)) !important;
    border: 0 !important;
    color: #001a1e !important;
    box-shadow: 0 9px 25px rgba(1,177,196,.17) !important;
}

/* old v4 reveal states must have no visual effect here */
.lights-modal .glow-light-sky.is-pending,
.lights-modal .glow-light-sky.is-revealed {
    animation: none !important;
}

@media (max-width: 640px) {
    .lights-entry-content {
        grid-template-columns: 1fr 104px;
        gap: 10px;
    }

    .lights-entry-social-row {
        gap: 7px;
    }

    .mini-lights-static {
        gap: 3px;
    }

    .mini-lights-static .glow-light {
        width: 14px;
        height: 21px;
    }

    .mini-lights-static .bulb-globe {
        height: 13px;
    }

    .lights-more-count {
        font-size: 10px;
        white-space: normal;
        line-height: 1.35;
    }

    .lights-entry-action strong {
        font-size: 12px;
    }

    .light-watch-link {
        padding: 9px 13px;
        font-size: 12px;
    }

    .lights-modal-head {
        padding: 14px 13px 11px;
    }

    .lights-modal-head h2 {
        margin-right: 38px;
        font-size: 14px;
        line-height: 1.65;
    }

    .lights-goal-row {
        gap: 10px;
    }

    .lights-goal-side small {
        font-size: 9px;
    }

    .lights-goal-side strong {
        font-size: 10.5px;
    }

    .lights-modal-body {
        padding: 8px 10px 0;
    }

    .lights-wall-scroll {
        height: min(50vh, 320px);
        padding: 11px 7px 24px;
    }

    .lights-wall-section {
        min-height: 245px;
    }

    .lights-sky {
        grid-template-columns: repeat(8, minmax(0,1fr));
        gap: 11px 4px;
    }

    .lights-modal .glow-light-sky {
        width: 18px;
        height: 27px;
        font-size: 6px;
    }

    .lights-modal .glow-light-sky .bulb-globe {
        height: 17px;
    }

    .your-lamp-tooltip {
        width: 130px;
        font-size: 9.5px;
    }
}

/* =========================================================
   V6 - one continuous lamp wall + goal under CTA
   ========================================================= */

/* Header now contains the single sentence only. */
.lights-modal-head {
    padding: 17px 20px 13px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.lights-modal-head h2 {
    margin: 0 42px 0 0;
    font-size: 15px;
    line-height: 1.7;
    text-align: right;
    font-weight: 800;
    color: #f5fbfc;
}

/* Remove all old wall titles/separators if old markup is ever cached. */
.lights-wall-title,
.lights-wall-section-title,
.lights-scroll-note,
.lights-wall-section {
    display: contents;
}

/* One scroll area, one continuous grid. */
.lights-modal-body {
    padding: 10px 16px 0;
    overflow: hidden;
}

.lights-wall-scroll {
    position: relative;
    height: min(49vh, 345px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 10px 54px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 17px;
    background:
        radial-gradient(circle at 50% 10%, rgba(255,220,125,.035), transparent 38%),
        rgba(255,255,255,.018);
    scrollbar-width: thin;
    scrollbar-color: rgba(151,190,194,.34) transparent;
}

.lights-wall-scroll::after {
    content: "";
    position: sticky;
    display: block;
    left: 0;
    right: 0;
    bottom: -54px;
    height: 70px;
    margin-top: -70px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7,29,34,0), rgba(7,29,34,.88));
    z-index: 5;
}

.lights-sky-mixed {
    display: grid;
    grid-template-columns: repeat(10, minmax(0,1fr));
    gap: 14px 5px;
    align-items: start;
    justify-items: center;
    min-height: 0;
    padding: 2px 4px 30px;
}

/* Lit bulbs stay subtle and compact. */
.lights-sky-mixed .glow-light-sky {
    width: 21px;
    height: 30px;
    font-size: 7px;
}

/* Unlit lamps now live in the same grid as lit lamps. */
.lights-sky-mixed .glow-light.is-off::before {
    opacity: 0 !important;
}

.lights-sky-mixed .glow-light.is-off .bulb-globe {
    background: linear-gradient(180deg, #465258 0%, #303b41 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
    filter: none;
    opacity: .88;
}

.lights-sky-mixed .glow-light.is-off .bulb-globe::after {
    background: linear-gradient(180deg, #424d53 0%, #2c363b 100%);
}

.lights-sky-mixed .glow-light.is-off .bulb-base {
    background: linear-gradient(180deg, #505c63 0%, #333d43 100%);
    opacity: .82;
}

/* Make the first unlit lamp visually identifiable without animation. */
.lights-sky-mixed .is-your-lamp {
    z-index: 20;
    position: relative;
}

/* Highly visible tooltip. */
.your-lamp-tooltip {
    position: absolute;
    right: 50%;
    bottom: calc(100% + 9px);
    transform: translateX(50%);
    width: 178px;
    padding: 9px 11px;
    border-radius: 11px;
    background: #6fe7ef;
    color: #03282d;
    border: 1px solid rgba(255,255,255,.78);
    box-shadow:
        0 10px 28px rgba(0,0,0,.34),
        0 0 0 3px rgba(111,231,239,.12);
    font-size: 11px;
    line-height: 1.6;
    font-weight: 900;
    text-align: center;
    white-space: normal;
    z-index: 50;
}

.your-lamp-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    border: 7px solid transparent;
    border-top-color: #6fe7ef;
}

/* CTA first; compact mission info beneath it. */
.lights-modal-footer {
    padding: 12px 16px 15px;
    background: #071d22;
    border-top: 1px solid rgba(255,255,255,.055);
}

.light-modal-start,
.light-modal-start.is-ready {
    background: linear-gradient(135deg, var(--azk-primary-dark), var(--azk-primary)) !important;
    color: #001a1e !important;
    border: 0 !important;
    box-shadow: 0 9px 25px rgba(1,177,196,.17) !important;
}

.lights-goal-row-under-cta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-top: 11px;
    padding: 10px 2px 0;
    border-top: 1px solid rgba(255,255,255,.055);
}

.lights-goal-row-under-cta .lights-goal-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lights-goal-row-under-cta .lights-goal-side small {
    color: #7f9ca0;
    font-size: 9.5px;
    line-height: 1.3;
    font-weight: 700;
}

.lights-goal-row-under-cta .lights-goal-side strong {
    color: #f3fbfc;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 850;
}

.lights-goal-row-under-cta .lights-goal-mission {
    text-align: left;
    align-items: flex-end;
}

.lights-goal-row-under-cta .lights-goal-mission strong {
    color: #81e5ec;
}

@media (max-width: 640px) {
    .lights-modal-head {
        padding: 14px 13px 11px;
    }

    .lights-modal-head h2 {
        margin-right: 38px;
        font-size: 13.5px;
        line-height: 1.7;
    }

    .lights-modal-body {
        padding: 8px 10px 0;
    }

    .lights-wall-scroll {
        height: min(50vh, 325px);
        padding: 14px 7px 50px;
    }

    .lights-sky-mixed {
        grid-template-columns: repeat(8, minmax(0,1fr));
        gap: 13px 4px;
    }

    .lights-sky-mixed .glow-light-sky {
        width: 18px;
        height: 27px;
        font-size: 6px;
    }

    .your-lamp-tooltip {
        width: 154px;
        padding: 8px 9px;
        font-size: 10px;
    }

    .lights-modal-footer {
        padding: 11px 12px 13px;
    }

    .lights-goal-row-under-cta {
        gap: 10px;
        margin-top: 9px;
        padding-top: 9px;
    }

    .lights-goal-row-under-cta .lights-goal-side small {
        font-size: 8.5px;
    }

    .lights-goal-row-under-cta .lights-goal-side strong {
        font-size: 10px;
    }
}

/* =========================================================
   V7 - Lights merged into the main Hero (no popup)
   ========================================================= */

/* The old top lights hook and popup are no longer used. */
.lights-entry-card,
.lights-modal {
    display: none !important;
}

.hero-card-lights-v7 {
    margin-top: 0;
    padding: 28px 28px 24px;
    overflow: visible;
}

.hero-title-v7 {
    margin: 0;
    font-size: clamp(30px, 4.2vw, 42px);
    line-height: 1.45;
    font-weight: 850;
    text-align: right;
}

.hero-desc-v7 {
    margin: 8px 0 22px;
    color: #bfd5d8;
    font-size: 16px;
    line-height: 1.8;
    text-align: right;
}

/* Three rows, ten cells per row. Only INTERNAL table lines are visible. */
.home-lamp-wall {
    position: relative;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-rows: repeat(3, 54px);
    direction: rtl;
    width: 100%;
    margin: 4px 0 14px;
    background: rgba(2, 26, 31, .32);
    border-radius: 14px;
    overflow: visible;
}

.home-lamp-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 54px;
}

/* Internal vertical lines only — no right/left outer border. */
.home-lamp-cell:not(:nth-child(10n)) {
    border-left: 1px solid rgba(181, 215, 219, .10);
}

/* Internal horizontal lines only — no top/bottom outer border. */
.home-lamp-cell:nth-child(n+11) {
    border-top: 1px solid rgba(181, 215, 219, .10);
}

/* Small, static lamps inside the hero wall. */
.home-lamp-wall .glow-light {
    animation: none !important;
    transition: none !important;
}

.home-lamp-wall .glow-light::before {
    animation: none !important;
    opacity: .24;
}

.glow-light-home-wall {
    width: 22px;
    height: 31px;
    font-size: 7px;
}

.glow-light-home-wall .bulb-globe {
    height: 20px;
    box-shadow:
        inset 0 -2px 4px rgba(110,72,0,.13),
        0 0 6px rgba(255,224,137,.26);
}

.glow-light-home-wall .bulb-globe::after {
    bottom: -4px;
    height: 8px;
}

.glow-light-home-wall .bulb-base {
    height: 5px;
}

.home-lamp-wall .glow-light.is-off::before {
    opacity: 0 !important;
}

.home-lamp-wall .glow-light.is-off .bulb-globe {
    background: linear-gradient(180deg, #415056 0%, #29373c 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.045) !important;
    filter: none;
    opacity: .78;
}

.home-lamp-wall .glow-light.is-off .bulb-globe::after {
    background: linear-gradient(180deg, #3c494f 0%, #283238 100%);
}

.home-lamp-wall .glow-light.is-off .bulb-base {
    background: linear-gradient(180deg, #4d595f 0%, #313c42 100%);
    opacity: .72;
}

.is-your-home-lamp {
    z-index: 8;
}

/* Always-visible tooltip on the first unlit lamp. */
.home-lamp-tooltip {
    position: absolute;
    z-index: 20;
    right: 50%;
    bottom: calc(50% + 23px);
    transform: translateX(50%);
    width: 146px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--azk-primary);
    color: #00242a;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 9px 24px rgba(0,0,0,.32);
    font-size: 10.5px;
    line-height: 1.55;
    font-weight: 900;
    text-align: center;
    white-space: normal;
}

.home-lamp-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    border: 6px solid transparent;
    border-top-color: var(--azk-primary);
}

.home-lamp-explainer {
    margin: 0 2px 18px;
    color: #d8e8ea;
    font-size: 13px;
    line-height: 1.8;
    font-weight: 650;
    text-align: right;
}

.home-main-btn-v7 {
    margin-top: 0;
}

/* Separate target box under the CTA; no progress bar. */
.home-light-progress-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 13px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.075);
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

.home-light-progress-side {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.home-light-progress-side small {
    color: #91adb1;
    font-size: 10.5px;
    line-height: 1.4;
    font-weight: 700;
}

.home-light-progress-side strong {
    color: #f5fbfc;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 850;
}

.home-light-progress-current {
    text-align: right;
    align-items: flex-start;
}

.home-light-progress-mission {
    text-align: left;
    align-items: flex-end;
}

.home-light-progress-mission strong {
    color: #9fe9ef;
}

.home-light-progress-divider {
    width: 1px;
    height: 30px;
    background: rgba(255,255,255,.09);
}

@media (max-width: 640px) {
    .hero-card-lights-v7 {
        padding: 23px 14px 20px;
    }

    .hero-title-v7 {
        font-size: 27px;
        line-height: 1.5;
    }

    .hero-desc-v7 {
        margin-top: 6px;
        margin-bottom: 18px;
        font-size: 14px;
    }

    .home-lamp-wall {
        grid-template-rows: repeat(3, 45px);
        margin-bottom: 13px;
    }

    .home-lamp-cell {
        height: 45px;
    }

    .glow-light-home-wall {
        width: 18px;
        height: 26px;
        font-size: 6px;
    }

    .glow-light-home-wall .bulb-globe {
        height: 17px;
    }

    .glow-light-home-wall .bulb-globe::after {
        bottom: -3px;
        height: 7px;
    }

    .glow-light-home-wall .bulb-base {
        height: 4px;
    }

    .home-lamp-tooltip {
        width: 118px;
        padding: 7px 8px;
        bottom: calc(50% + 20px);
        font-size: 9.5px;
    }

    .home-lamp-explainer {
        margin-bottom: 15px;
        font-size: 12px;
    }

    .home-light-progress-card {
        gap: 11px;
        padding: 12px 13px;
    }

    .home-light-progress-side small {
        font-size: 9.5px;
    }

    .home-light-progress-side strong {
        font-size: 13px;
    }
}


/* =========================================================
   V8 - refinements for centered hero and tighter lamp box
   ========================================================= */
.hero-title-center,
.hero-desc-center {
    text-align: center;
}

.hero-card-lights-v7 {
    margin-top: 8px;
    padding: 30px 26px 24px;
}

.hero-desc-v7 {
    margin: 10px 0 18px;
}

.home-lamp-box {
    margin: 0 0 18px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
}

.home-lamp-wall {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(3, 52px);
    margin: 0;
    background: rgba(2,26,31,.18);
    border-radius: 12px;
}

.home-lamp-cell {
    height: 52px;
}

.home-lamp-cell:not(:nth-child(8n)) {
    border-left: 1px solid rgba(181, 215, 219, .10);
}

.home-lamp-cell:not(:nth-child(10n)) {
    border-left: 0;
}

.home-lamp-cell:nth-child(n+9) {
    border-top: 1px solid rgba(181, 215, 219, .10);
}

.home-lamp-cell:nth-child(n+11) {
    border-top: 0;
}

.glow-light-home-wall {
    width: 20px;
    height: 29px;
    font-size: 7px;
}

.home-lamp-explainer {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.75;
}

.home-lamp-tooltip {
    right: 50%;
    top: calc(50% + 20px);
    bottom: auto;
    transform: translateX(50%);
    width: 154px;
    padding: 9px 10px;
    background: #7be8f0;
    color: #073339;
    border-color: rgba(255,255,255,.48);
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.home-lamp-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #7be8f0;
}

.is-your-home-lamp .glow-light.is-off .bulb-globe {
    animation: azkOffBulbBlink 1.8s ease-in-out infinite;
}

@keyframes azkOffBulbBlink {
    0%, 100% {
        background: linear-gradient(180deg, #415056 0%, #29373c 100%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
        opacity: .78;
    }
    50% {
        background: radial-gradient(circle at 40% 30%, #fff6cf 0 12%, #ffe79b 25%, #f8d56b 55%, #dca533 100%);
        box-shadow: 0 0 10px rgba(255,224,137,.5), inset 0 -2px 4px rgba(110,72,0,.13);
        opacity: 1;
    }
}

.home-main-btn-animated {
    animation: azkCtaPulse 2.2s ease-in-out infinite;
}

@keyframes azkCtaPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 12px 32px rgba(1,177,196,.20);
    }
    50% {
        transform: translateY(-2px) scale(1.015);
        box-shadow: 0 16px 42px rgba(1,177,196,.32);
    }
}

.quick-points-v7 {
    margin-top: 16px;
    gap: 10px;
}

.quick-points-v7 > div {
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    padding: 13px 10px;
    line-height: 1.7;
}

.home-light-progress-card {
    margin-top: 16px;
}

.home-share-card {
    margin-top: 18px;
}

@media (max-width: 640px) {
    .hero-card-lights-v7 {
        padding: 24px 14px 20px;
    }

    .home-lamp-box {
        margin-bottom: 16px;
        padding: 12px 10px 10px;
    }

    .home-lamp-wall {
        grid-template-rows: repeat(3, 42px);
    }

    .home-lamp-cell {
        height: 42px;
    }

    .glow-light-home-wall {
        width: 16px;
        height: 24px;
        font-size: 6px;
    }

    .glow-light-home-wall .bulb-globe {
        height: 15px;
    }

    .home-lamp-tooltip {
        top: calc(50% + 18px);
        width: 122px;
        font-size: 9px;
        padding: 7px 8px;
    }

    .quick-points-v7 {
        grid-template-columns: 1fr;
        margin-top: 14px;
    }

    .home-light-progress-card {
        margin-top: 14px;
    }
}


/* =========================================================
   V9 - DB-driven hero typography + subtle SVG background
   ========================================================= */
.hero-card-lights-v7 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 36px 34px 28px;
}

.hero-card-lights-v7::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .78;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 620'%3E%3Ccircle cx='48' cy='-12' r='190' fill='%2301b1c4' fill-opacity='.055'/%3E%3Cg transform='translate(82 475)' fill='none' stroke='%2395dbe2' stroke-opacity='.055' stroke-width='5'%3E%3Cpath d='M0 -48 L19 -29 L48 -29 L48 0 L29 19 L29 48 L0 48 L-19 29 L-48 29 L-48 0 L-29 -19 L-29 -48 Z'/%3E%3Ccircle r='17'/%3E%3C/g%3E%3Cg transform='translate(795 92)' fill='none' stroke='%23f4c55c' stroke-opacity='.035' stroke-width='4'%3E%3Ccircle r='58'/%3E%3Cpath d='M-58 0H58M0-58V58M-41-41L41 41M41-41L-41 41'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-card-lights-v7::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 15%, rgba(1,177,196,.045), transparent 48%);
}

.hero-title-v7 {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: clamp(31px, 4.4vw, 44px);
    line-height: 1.42;
    font-weight: 900;
    letter-spacing: -.25px;
}

.hero-title-primary,
.hero-title-accent {
    display: block;
}

.hero-title-primary {
    color: #f7fdff;
}

.hero-title-accent {
    color: #ffc451;
}

.hero-desc-v7 {
    max-width: 650px;
    margin: 14px auto 26px;
    color: #c6dade;
    font-size: 16px;
    line-height: 1.9;
    font-weight: 600;
}

.home-lamp-box {
    margin: 0;
}

/* More breathing room before the primary action. */
.home-main-btn-v9 {
    margin-top: 30px;
}

.home-main-btn-animated {
    position: relative;
    overflow: hidden;
}

.home-main-btn-animated::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70px;
    right: -100px;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
    animation: azkCtaSheen 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes azkCtaSheen {
    0%, 55% { right: -100px; opacity: 0; }
    65% { opacity: 1; }
    100% { right: calc(100% + 110px); opacity: 0; }
}

/* Three DB-driven benefits as compact pills like the reference design. */
.quick-points-v7 {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 12px;
    margin-top: 28px;
}

.quick-points-v7 > div {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,.038);
    border: 1px solid rgba(153,213,219,.16);
    color: #e6f3f4;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.45;
}

.quick-points-v7 > div::before {
    content: "✓";
    display: grid;
    place-items: center;
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: rgba(35,180,133,.17);
    color: #77e5bd;
    font-size: 12px;
    font-weight: 900;
}

.home-light-progress-card {
    margin-top: 20px;
}

@media (max-width: 640px) {
    .hero-card-lights-v7 {
        padding: 28px 16px 23px;
    }

    .hero-title-v7 {
        font-size: 28px;
        line-height: 1.48;
    }

    .hero-desc-v7 {
        margin: 11px auto 22px;
        font-size: 14px;
        line-height: 1.85;
    }

    .home-main-btn-v9 {
        margin-top: 26px;
    }

    .quick-points-v7 {
        display: flex !important;
        margin-top: 22px;
        gap: 8px;
    }

    .quick-points-v7 > div {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 11px;
    }

    .quick-points-v7 > div::before {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
        font-size: 11px;
    }

    .home-light-progress-card {
        margin-top: 16px;
    }
}


/* =========================================================
   V10 - DB eyebrow + DB share box, no home progress card
   ========================================================= */
.hero-eyebrow-v10 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    padding: 0;
    color: var(--azk-gold);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 800;
    text-align: center;
}

/* The separate milestone/mission box under the hero is removed in V10. */
.home-light-progress-card {
    display: none !important;
}

/* Share card remains fully DB-driven, with the warm visual treatment. */
.home-share-card {
    margin-top: 22px;
    padding: 25px 26px 21px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0, rgba(244,197,92,.07), transparent 56%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
    border: 1px solid rgba(244,197,92,.28);
    border-radius: 24px;
}

.home-share-card h3 {
    max-width: 650px;
    margin: 0 auto 10px;
    color: #ffd36f;
    font-size: 20px;
    line-height: 1.65;
    font-weight: 850;
}

.home-share-card p {
    max-width: 650px;
    margin: 0 auto;
    color: #d3e3e5;
    font-size: 14px;
    line-height: 1.9;
}

.home-share-card .share-soft-btn {
    width: auto;
    min-width: 150px;
    margin-top: 18px;
    padding: 11px 21px;
    color: #ffd36f;
    background: rgba(244,197,92,.07);
    border: 1px solid rgba(244,197,92,.34);
    border-radius: 15px;
    font-weight: 850;
}

.home-share-card .share-soft-btn:hover {
    background: rgba(244,197,92,.12);
}

@media (max-width: 640px) {
    .hero-eyebrow-v10 {
        margin-bottom: 8px;
        font-size: 11.5px;
    }

    .home-share-card {
        margin-top: 18px;
        padding: 21px 15px 18px;
    }

    .home-share-card h3 {
        font-size: 17px;
        line-height: 1.65;
    }

    .home-share-card p {
        font-size: 12.5px;
        line-height: 1.85;
    }

    .home-share-card .share-soft-btn {
        margin-top: 15px;
    }
}


/* =========================================================
   V11 - standalone eyebrow + smaller lamps + clearer tooltip
   ========================================================= */
.hero-eyebrow-v11 {
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 0 auto 14px;
    padding: 9px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    color: #ffe7a0;
    background: rgba(244,197,92,.08);
    border: 1px solid rgba(244,197,92,.22);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 850;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.hero-eyebrow-v11-dot {
    color: var(--azk-gold);
    font-size: 13px;
    line-height: 1;
}

.hero-card-lights-v7 {
    margin-top: 0 !important;
}

/* Slightly smaller lamps to make the wall feel denser. */
.glow-light-home-wall {
    width: 16px !important;
    height: 24px !important;
    font-size: 5.5px !important;
}

.glow-light-home-wall .bulb-globe {
    height: 15px !important;
}

.glow-light-home-wall .bulb-globe::after {
    bottom: -3px !important;
    height: 6px !important;
}

.glow-light-home-wall .bulb-base {
    height: 4px !important;
}

/* Warmer tooltip so it stands out clearly from the site primary CTA. */
.home-lamp-tooltip {
    background: #fff2c2 !important;
    color: #3b2a00 !important;
    border: 1px solid rgba(244,197,92,.65) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.30), 0 0 0 3px rgba(244,197,92,.06) !important;
}

.home-lamp-tooltip::after {
    border-bottom-color: #fff2c2 !important;
    border-top-color: transparent !important;
}

@media (max-width: 640px) {
    .hero-eyebrow-v11 {
        max-width: calc(100% - 10px);
        margin-bottom: 11px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .glow-light-home-wall {
        width: 14px !important;
        height: 21px !important;
        font-size: 5px !important;
    }

    .glow-light-home-wall .bulb-globe {
        height: 13px !important;
    }
}


/* =========================================================
   V12 - centered eyebrow + denser lamp wall + live count
   ========================================================= */
.hero-eyebrow-v11 {
    display: flex !important;
    width: max-content !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 auto 14px !important;
    left: auto !important;
    transform: none !important;
    text-align: center !important;
}

/* Keep the 8-column wall compact instead of stretching across the card. */
.home-lamp-wall {
    width: min(100%, 410px) !important;
    margin: 0 auto !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, 42px) !important;
}

.home-lamp-cell {
    height: 42px !important;
}

/* Slightly tighter visual footprint for each bulb. */
.glow-light-home-wall {
    width: 14px !important;
    height: 21px !important;
    font-size: 5px !important;
}

.glow-light-home-wall .bulb-globe {
    height: 13px !important;
}

.glow-light-home-wall .bulb-globe::after {
    height: 5px !important;
}

.glow-light-home-wall .bulb-base {
    height: 3px !important;
}

.home-lamp-explainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 12px auto 0 !important;
    max-width: 620px;
    color: #c8e0e3;
}

.home-lamp-count {
    color: #ffe19a;
    font-weight: 900;
    white-space: nowrap;
}

.home-lamp-explainer-separator {
    color: rgba(255,255,255,.28);
}

@media (max-width: 640px) {
    .hero-eyebrow-v11 {
        max-width: calc(100% - 12px) !important;
        margin-bottom: 11px !important;
    }

    .home-lamp-wall {
        width: min(100%, 330px) !important;
        grid-template-rows: repeat(3, 36px) !important;
    }

    .home-lamp-cell {
        height: 36px !important;
    }

    .glow-light-home-wall {
        width: 12px !important;
        height: 18px !important;
        font-size: 4.5px !important;
    }

    .glow-light-home-wall .bulb-globe {
        height: 11px !important;
    }

    .home-lamp-explainer {
        font-size: 11.5px !important;
        line-height: 1.7 !important;
        gap: 4px;
    }
}

/* =========================================================
   V13 - softer eyebrow + non-button quick benefits
   ========================================================= */

/* Eyebrow should feel like a subtle hook, not a CTA/chip. */
.hero-eyebrow-v11 {
    display: flex !important;
    width: fit-content !important;
    max-width: calc(100% - 28px) !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
    left: auto !important;
    transform: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: rgba(255, 221, 137, .88) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

.hero-eyebrow-v11::before,
.hero-eyebrow-v11::after {
    content: "";
    width: 24px;
    height: 1px;
    flex: 0 0 24px;
    background: linear-gradient(90deg, transparent, rgba(244,197,92,.32));
}

.hero-eyebrow-v11::after {
    transform: scaleX(-1);
}

.hero-eyebrow-v11-dot {
    color: rgba(244,197,92,.82) !important;
    font-size: 8px !important;
    opacity: .9;
}

/* These are benefits, not actions. Remove the chip/button appearance. */
.quick-points-v7 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px 22px !important;
    margin: 18px auto 0 !important;
    max-width: 680px;
}

.quick-points-v7 > div {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #d5e7e9 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    line-height: 1.7 !important;
    font-weight: 650 !important;
    text-align: center !important;
    cursor: default !important;
}

.quick-points-v7 > div::before {
    content: "✓" !important;
    position: static !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    border-radius: 50% !important;
    color: #70dfbc !important;
    background: rgba(35,180,133,.10) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: none !important;
}

/* Slightly more breathing room around the primary CTA. */
.home-main-btn-v7 {
    margin-top: 24px !important;
}

.quick-points-v7 {
    margin-top: 20px !important;
}

@media (max-width: 640px) {
    .hero-eyebrow-v11 {
        max-width: calc(100% - 16px) !important;
        margin-bottom: 10px !important;
        font-size: 10.5px !important;
        line-height: 1.5 !important;
    }

    .hero-eyebrow-v11::before,
    .hero-eyebrow-v11::after {
        width: 16px;
        flex-basis: 16px;
    }

    .quick-points-v7 {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        margin-top: 17px !important;
    }

    .quick-points-v7 > div {
        font-size: 11.5px !important;
        line-height: 1.6 !important;
    }

    .quick-points-v7 > div::before {
        width: 17px !important;
        height: 17px !important;
        flex-basis: 17px !important;
        font-size: 9px !important;
    }

    .home-main-btn-v7 {
        margin-top: 21px !important;
    }
}

@media (max-width: 640px) {
    .counter-big-btn { min-height: 104px; padding: 16px; }
    .counter-main { min-width: 104px; font-size: 30px; }
}


/* =========================================================
   V15 - Complete task button locked until counter is finished
   ========================================================= */
.complete-btn {
    background: linear-gradient(135deg, #526268, #43545a);
    color: rgba(238, 247, 248, .68);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition:
        background .28s ease,
        color .28s ease,
        box-shadow .28s ease,
        transform .18s ease,
        opacity .18s ease;
}

.complete-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    background: linear-gradient(135deg, #526268, #43545a);
    color: rgba(238, 247, 248, .62);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 6px 18px rgba(0,0,0,.10);
}

.complete-btn:not(:disabled) {
    cursor: pointer;
    color: #001a1e;
    background: linear-gradient(135deg, var(--azk-primary), #69e5ed);
    box-shadow:
        0 10px 30px rgba(1,177,196,.26),
        inset 0 1px 0 rgba(255,255,255,.24);
}

.complete-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow:
        0 13px 34px rgba(1,177,196,.32),
        inset 0 1px 0 rgba(255,255,255,.28);
}

.complete-btn:not(:disabled):active {
    transform: translateY(0) scale(.99);
}


/* =========================================================
   V16 - task content alignment
   ========================================================= */
.task-card {
    text-align: right;
    align-items: stretch;
}

.task-type {
    align-self: flex-start;
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

.task-title {
    width: 100%;
    text-align: right;
    margin-right: 0;
    margin-left: 0;
}

.task-instruction {
    width: 100%;
    text-align: right;
    margin: 0 0 16px;
}

.task-content-text {
    width: 100%;
    text-align: right;
}

/* The counter is an interactive control, so it stays centered. */
.counter-panel,
.counter-big-btn,
.counter-main,
.counter-sub {
    text-align: center;
}

@media (max-width: 640px) {
    .task-card {
        text-align: right;
    }

    .task-title,
    .task-instruction,
    .task-content-text {
        text-align: right;
    }
}

/* =========================================================
   V17 - inner task cards match reference design
   ========================================================= */
.task-card {
    position: relative;
    overflow: hidden;
    text-align: right;
    justify-content: flex-start;
    min-height: 0;
    padding: 34px 28px 28px;
    margin-top: 14px;
    background:
        radial-gradient(circle at 14% 16%, rgba(255,255,255,.03), transparent 16%),
        linear-gradient(180deg, rgba(13,76,87,.92) 0%, rgba(10,57,66,.96) 100%);
    border: 1px solid rgba(92, 225, 243, .22);
    box-shadow:
        0 18px 46px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 0 0 1px rgba(255,255,255,.02);
}

.task-card::before {
    content: "";
    position: absolute;
    right: auto;
    left: 34px;
    top: 52px;
    width: 78px;
    height: 78px;
    opacity: .08;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d6eef2' stroke-width='3'%3E%3Cpath d='M48 10 60 24 78 18 72 36 86 48 72 60 78 78 60 72 48 86 36 72 18 78 24 60 10 48 24 36 18 18 36 24Z'/%3E%3Ccircle cx='48' cy='48' r='9'/%3E%3C/g%3E%3C/svg%3E");
}

.task-type {
    display: none !important;
}

.task-title {
    position: relative;
    z-index: 1;
    margin: 8px 0 24px;
    color: #ffd47a;
    font-size: clamp(26px, 3.2vw, 34px);
    line-height: 1.8;
    font-weight: 800;
    text-align: right;
}

.task-title::before {
    content: "✦";
    color: #ffb267;
    margin-left: 10px;
    font-size: .8em;
}

.task-instruction {
    display: none !important;
}

.task-content-text {
    position: relative;
    z-index: 1;
    margin: 0 0 22px;
    color: #f6fdff;
    font-size: clamp(24px, 2.9vw, 33px);
    line-height: 1.95;
    font-weight: 500;
    text-align: right;
}

.counter-panel {
    margin-top: 10px;
}

.counter-big-btn {
    border-radius: 24px;
}

.sticky-actions {
    margin-top: 18px;
}

@media (max-width: 640px) {
    .task-card {
        padding: 28px 16px 22px;
        margin-top: 12px;
    }

    .task-card::before {
        left: 16px;
        top: 54px;
        width: 64px;
        height: 64px;
    }

    .task-title {
        margin: 4px 0 18px;
        font-size: 22px;
        line-height: 1.75;
    }

    .task-content-text {
        margin-bottom: 18px;
        font-size: 19px;
        line-height: 1.95;
    }
}


/* =========================================================
   V18 - simplified final light step
   ========================================================= */
.light-final-card-v18 {
    max-width: 760px;
    margin: 18px auto 0;
    padding: 34px 30px 28px;
    text-align: right;
    background:
        radial-gradient(circle at 12% 12%, rgba(255,212,122,.055), transparent 24%),
        linear-gradient(180deg, rgba(13,76,87,.90), rgba(8,49,57,.97));
    border: 1px solid rgba(92,225,243,.20);
    box-shadow: 0 20px 52px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}

.light-final-card-v18 h2 {
    margin: 0 0 24px;
    color: #ffd47a;
    font-size: clamp(27px, 3.5vw, 36px);
    line-height: 1.55;
    font-weight: 850;
    text-align: right;
}

.light-name-fields-v18 {
    margin: 0;
}

.light-final-card-v18 .light-name-label {
    display: block;
    margin: 0 0 9px;
    color: #f6fdff;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

.light-final-card-v18 .light-name-input {
    height: 54px;
    padding: 0 16px;
    border-radius: 15px;
    border: 1px solid rgba(183,221,226,.18);
    background: rgba(255,255,255,.045);
    color: #fff;
    font-size: 16px;
    text-align: right;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.light-final-card-v18 .light-name-input:focus {
    border-color: rgba(92,225,243,.48);
    background: rgba(255,255,255,.06);
    box-shadow: 0 0 0 3px rgba(1,177,196,.08);
}

.light-name-note-v18 {
    margin: 9px 2px 0;
    color: rgba(219,239,242,.67);
    font-size: 11px;
    line-height: 1.65;
    text-align: right;
}

.light-name-note-v18 strong {
    color: #ffe09a;
    font-weight: 800;
}

.light-create-btn-v18 {
    margin-top: 22px;
    min-height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--azk-primary), #68e4ed);
    color: #03272d;
    box-shadow: 0 13px 34px rgba(1,177,196,.22);
    font-size: 17px;
    font-weight: 900;
}

.light-final-card-v18 .form-error {
    margin-top: 10px;
    text-align: right;
}

@media (max-width: 640px) {
    .light-final-card-v18 {
        margin-top: 12px;
        padding: 26px 16px 20px;
    }

    .light-final-card-v18 h2 {
        margin-bottom: 20px;
        font-size: 25px;
    }

    .light-name-note-v18 {
        font-size: 10px;
    }

    .light-create-btn-v18 {
        margin-top: 18px;
    }
}


/* =========================================================
   V19 - simple viral/share moment after lighting the lamp
   ========================================================= */
.light-viral-card-v19 {
    position: relative;
    overflow: hidden;
    padding: 34px 30px 30px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 3%, rgba(255, 211, 105, .10), transparent 28%),
        linear-gradient(180deg, rgba(14, 61, 70, .96), rgba(8, 43, 50, .98));
    border: 1px solid rgba(109, 204, 216, .20);
    box-shadow: 0 22px 58px rgba(0, 0, 0, .24);
}

.light-viral-card-v19::before {
    content: "";
    position: absolute;
    inset: auto -18% -55% -18%;
    height: 260px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(34, 197, 94, .07), transparent 65%);
}

.viral-lamp-v19 {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}

.viral-lamp-v19 .glow-light-large {
    transform: scale(.82);
    transform-origin: center center;
}

.viral-count-v19 {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #c4dde1;
    font-size: 13px;
    font-weight: 700;
}

.viral-main-title-v19 {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto 12px !important;
    color: #ffffff;
    font-size: clamp(25px, 4vw, 34px) !important;
    line-height: 1.55 !important;
    font-weight: 800;
}

.viral-main-description-v19 {
    position: relative;
    z-index: 1;
    max-width: 590px;
    margin: 0 auto 18px !important;
    color: #c7dde0 !important;
    font-size: 16px;
    line-height: 1.9 !important;
}

.viral-sadaqah-note-v19 {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 22px;
    color: #ffe09a;
    font-size: 15px;
    line-height: 1.6;
}

.viral-sadaqah-note-v19 span {
    color: #ffbf69;
    font-size: 16px;
}

.light-share-main-v19 {
    position: relative;
    z-index: 1;
    min-height: 58px;
    border-radius: 17px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #f4fff7 !important;
    border: 1px solid rgba(148, 255, 184, .26) !important;
    box-shadow: 0 14px 34px rgba(34, 197, 94, .20) !important;
    font-size: 17px;
    font-weight: 900;
}

.light-share-main-v19:hover {
    background: linear-gradient(135deg, #28cf66 0%, #18ad50 100%) !important;
    box-shadow: 0 17px 40px rgba(34, 197, 94, .27) !important;
}

.light-share-main-v19:active {
    transform: translateY(1px) scale(.992);
}

/* old visual no longer used */
.light-viral-card-v19 .viral-divider,
.light-viral-card-v19 .viral-tree,
.light-viral-card-v19 .light-created-message {
    display: none !important;
}

@media (max-width: 640px) {
    .light-viral-card-v19 {
        padding: 28px 16px 22px;
    }

    .viral-lamp-v19 {
        margin-bottom: 8px;
    }

    .viral-count-v19 {
        margin-bottom: 15px;
        padding: 6px 11px;
        font-size: 12px;
    }

    .viral-main-title-v19 {
        font-size: 24px !important;
        margin-bottom: 9px !important;
    }

    .viral-main-description-v19 {
        font-size: 14px;
        line-height: 1.85 !important;
        margin-bottom: 14px !important;
    }

    .viral-sadaqah-note-v19 {
        margin-bottom: 18px;
        font-size: 13px;
    }

    .light-share-main-v19 {
        min-height: 56px;
        font-size: 16px;
    }
}

/* =========================================================
   V20 - task card typography/colors + separated action box
   ========================================================= */
.task-card {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 34px 34px 30px;
    margin-top: 14px;
    text-align: right;
    justify-content: flex-start;
    border: 1px solid transparent;
    border-radius: 28px;
    background:
        radial-gradient(circle at 15% 14%, rgba(255,255,255,.025), transparent 18%) padding-box,
        linear-gradient(180deg, #103c45 0%, #0c3038 100%) padding-box,
        linear-gradient(135deg, rgba(67,216,231,.52), rgba(255,208,107,.32) 58%, rgba(67,216,231,.16)) border-box;
    box-shadow:
        0 18px 48px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.task-card::before {
    left: 34px;
    top: 42px;
    width: 76px;
    height: 76px;
    opacity: .065;
}

.task-title {
    width: 100%;
    margin: 4px 0 24px;
    color: #ffd47a;
    font-size: clamp(24px, 2.55vw, 29px);
    line-height: 1.85;
    font-weight: 800;
    text-align: right;
}

.task-title::before {
    content: "✦";
    color: #ffb566;
    margin-left: 9px;
    font-size: .72em;
    vertical-align: .08em;
}

.task-content-text {
    width: 100%;
    margin: 0 0 24px;
    color: #f2fbfd;
    font-size: clamp(19px, 2vw, 23px);
    line-height: 2.05;
    font-weight: 450;
    text-align: right;
}

/* Keep the counter visually centered inside the right-aligned card. */
.counter-panel {
    width: 100%;
    margin-top: 8px;
    text-align: center;
}

/* Action/navigation controls now live in their own quiet box below the card. */
.sticky-actions {
    position: static !important;
    bottom: auto !important;
    width: 100%;
    margin: 14px auto 0;
    padding: 10px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    gap: 10px;
    z-index: auto;
    border: 1px solid rgba(125, 195, 204, .18);
    border-radius: 22px;
    background: rgba(8, 42, 49, .82);
    box-shadow:
        0 12px 30px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: blur(8px);
}

.sticky-actions .complete-btn,
.sticky-actions .nav-icon-btn {
    margin: 0;
}

.nav-icon-btn {
    border: 1px solid rgba(116, 194, 204, .18);
    background: rgba(19, 61, 69, .82);
    color: #e9f8fa;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

/* =========================================================
   V20 - final/name step centered typography
   ========================================================= */
.light-final-card-v18 {
    text-align: center;
    border: 1px solid transparent;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,212,122,.055), transparent 28%) padding-box,
        linear-gradient(180deg, #103c45 0%, #0c3038 100%) padding-box,
        linear-gradient(135deg, rgba(67,216,231,.44), rgba(255,208,107,.24) 58%, rgba(67,216,231,.14)) border-box;
}

.light-final-card-v18 h2,
.light-final-card-v18 .light-name-label,
.light-name-note-v18,
.light-final-card-v18 .form-error {
    text-align: center;
}

.light-final-card-v18 h2 {
    max-width: 620px;
    margin: 0 auto 24px;
}

.light-name-fields-v18 {
    max-width: 610px;
    margin: 0 auto;
}

.light-final-card-v18 .light-name-label {
    margin-bottom: 10px;
}

.light-final-card-v18 .light-name-input {
    text-align: center;
}

.light-name-note-v18 {
    margin: 9px auto 0;
}

.light-create-btn-v18 {
    max-width: 610px;
    margin: 22px auto 0;
}

@media (max-width: 640px) {
    .task-card {
        padding: 27px 17px 22px;
        border-radius: 22px;
    }

    .task-card::before {
        left: 15px;
        top: 38px;
        width: 60px;
        height: 60px;
    }

    .task-title {
        margin-bottom: 18px;
        font-size: 21px;
        line-height: 1.8;
    }

    .task-content-text {
        margin-bottom: 20px;
        font-size: 18px;
        line-height: 1.95;
    }

    .sticky-actions {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        gap: 8px;
        margin-top: 12px;
        padding: 8px;
        border-radius: 19px;
    }

    .light-final-card-v18 h2 {
        text-align: center;
    }

    .light-final-card-v18 .light-name-label,
    .light-name-note-v18,
    .light-final-card-v18 .form-error,
    .light-final-card-v18 .light-name-input {
        text-align: center;
    }
}


/* =========================================================
   V21 - final name-step rhythm + floating journey controls
   ========================================================= */

/* Give ordinary journey steps enough breathing room behind the floating controls. */
.journey-page {
    padding-bottom: 104px;
}

/* Floating controls: same visual family as the task card, but quieter. */
.sticky-actions {
    position: fixed !important;
    left: 50%;
    right: auto;
    bottom: 14px !important;
    transform: translateX(-50%);
    width: min(calc(100% - 28px), 790px);
    max-width: 790px;
    margin: 0 !important;
    padding: 10px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    gap: 10px;
    z-index: 80;
    border: 1px solid rgba(92, 225, 243, .18);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16, 60, 69, .97) 0%, rgba(12, 48, 56, .98) 100%);
    box-shadow:
        0 18px 46px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(10px);
}

.sticky-actions .nav-icon-btn {
    background: rgba(8, 42, 49, .78);
    border: 1px solid rgba(121, 201, 211, .18);
}

/* Final name card: headline/subheadline behave as one unit. */
.light-final-card-v18 {
    max-width: 760px;
    margin: 18px auto 0;
    padding: 38px 30px 30px;
    text-align: center;
}

.light-final-card-v18 h2 {
    max-width: 620px;
    margin: 0 auto 6px;
    color: #ffd47a;
    font-size: clamp(28px, 3.3vw, 36px);
    line-height: 1.5;
    font-weight: 850;
    text-align: center;
}

.light-name-fields-v18 {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.light-final-card-v18 .light-name-label {
    display: block;
    margin: 0 auto;
    color: #edf9fb;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 700;
    text-align: center;
}

/* Separate the form control from the title block so the hierarchy is obvious. */
.light-final-card-v18 .light-name-input {
    display: block;
    width: min(100%, 520px);
    height: 56px;
    margin: 27px auto 0;
    padding: 0 18px;
    text-align: center;
    border-radius: 16px;
    border: 1px solid rgba(183, 221, 226, .20);
    background: rgba(255,255,255,.045);
    color: #fff;
    font-size: 16px;
    outline: none;
}

.light-final-card-v18 .light-name-input:focus {
    border-color: rgba(92,225,243,.62);
    background: rgba(255,255,255,.065);
    box-shadow: 0 0 0 4px rgba(1,177,196,.09);
}

.light-name-note-v18 {
    max-width: 520px;
    margin: 12px auto 0;
    color: rgba(219,239,242,.68);
    font-size: 11px;
    line-height: 1.75;
    text-align: center;
}

.light-create-btn-v18 {
    display: block;
    width: min(100%, 520px);
    max-width: 520px;
    margin: 25px auto 0;
}

.light-final-card-v18 .form-error {
    max-width: 520px;
    margin: 12px auto 0;
    text-align: center;
}

/* Final light/name/share states do not need the journey floating controls. */
.light-final-card-v18:not([hidden]) ~ .sticky-actions,
.light-viral-card-v19:not([hidden]) ~ .sticky-actions,
.completion-card:not([hidden]) ~ .sticky-actions {
    display: none !important;
}

@media (max-width: 640px) {
    .journey-page {
        padding-bottom: 92px;
    }

    .sticky-actions {
        width: calc(100% - 18px);
        bottom: 9px !important;
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        gap: 8px;
        padding: 8px;
        border-radius: 19px;
    }

    .light-final-card-v18 {
        margin-top: 10px;
        padding: 30px 15px 22px;
    }

    .light-final-card-v18 h2 {
        margin-bottom: 5px;
        font-size: 25px;
    }

    .light-final-card-v18 .light-name-label {
        font-size: 12px;
    }

    .light-final-card-v18 .light-name-input {
        width: 100%;
        margin-top: 23px;
    }

    .light-name-note-v18 {
        margin-top: 10px;
        font-size: 10px;
    }

    .light-create-btn-v18 {
        width: 100%;
        margin-top: 22px;
    }
}


/* =========================================================
   V22 - name step warmth + refined spacing + share/peak pacing
   ========================================================= */
.light-final-card-v18 {
    max-width: 760px;
    margin: 22px auto 0;
    padding: 30px 34px 34px;
    text-align: center;
}

.light-final-top-lamp {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 14px;
}

.final-name-lamp {
    width: 58px;
    height: 82px;
    font-size: 24px;
}

.final-name-lamp .bulb-globe {
    height: 52px;
}

.final-name-lamp .bulb-globe::after {
    bottom: -9px;
    height: 18px;
}

.final-name-lamp .bulb-base {
    height: 13px;
}

.final-name-lamp .bulb-globe,
.final-name-lamp .bulb-base {
    animation: azkFinalLampBlink 2.1s ease-in-out infinite;
}

@keyframes azkFinalLampBlink {
    0%, 100% {
        filter: saturate(.78) brightness(.83);
        opacity: .72;
        box-shadow:
            0 0 0 rgba(255,224,137,0),
            inset 0 -2px 4px rgba(110,72,0,.10);
    }
    50% {
        filter: saturate(1) brightness(1);
        opacity: 1;
        box-shadow:
            0 0 18px rgba(255,224,137,.42),
            0 0 34px rgba(255,211,96,.24),
            inset 0 -2px 4px rgba(110,72,0,.16);
    }
}

.light-final-card-v18 h2 {
    max-width: 560px;
    margin: 0 auto 10px;
    line-height: 1.45;
}

.light-name-fields-v18 {
    max-width: 560px;
    margin: 0 auto;
}

.light-final-card-v18 .light-name-label {
    max-width: 520px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.75;
}

.light-final-card-v18 .light-name-input {
    width: min(100%, 460px);
    height: 58px;
    margin: 24px auto 0;
    padding: 0 20px;
    text-align: center;
}

.light-name-note-v18 {
    width: min(100%, 460px);
    margin: 14px auto 0;
    font-size: 11.5px;
    line-height: 1.85;
}

.light-create-btn-v18 {
    display: block;
    width: min(100%, 460px);
    max-width: 460px;
    margin: 28px auto 0;
    position: relative;
    overflow: hidden;
    animation: azkCreateLampPulse 2.2s ease-in-out infinite;
}

.light-create-btn-v18::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.04) 66%, transparent 100%);
    transform: translateX(-130%);
    animation: azkCreateLampShine 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes azkCreateLampPulse {
    0%,100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 14px 34px rgba(1,177,196,.18);
    }
    50% {
        transform: translateY(-2px) scale(1.012);
        box-shadow: 0 18px 42px rgba(1,177,196,.28);
    }
}

@keyframes azkCreateLampShine {
    0%, 74%, 100% { transform: translateX(-130%); }
    82% { transform: translateX(130%); }
}

.light-final-card-v18 .form-error {
    max-width: 460px;
    margin: 12px auto 0;
}

/* Keep floating controls in the same family as cards. */
.sticky-actions {
    background: linear-gradient(180deg, rgba(16, 60, 69, .98) 0%, rgba(12, 48, 56, .98) 100%);
    border-color: rgba(92, 225, 243, .14);
}

/* Make the peak moment readable for a longer moment. */
.peak-scene h2 { 
    font-size: 32px;
    margin: 26px 0 10px;
}

.peak-scene p {
    max-width: 440px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.9;
}

@media (max-width: 640px) {
    .light-final-card-v18 {
        margin-top: 12px;
        padding: 26px 15px 24px;
    }

    .light-final-top-lamp {
        margin-bottom: 12px;
    }

    .final-name-lamp {
        width: 50px;
        height: 70px;
        font-size: 21px;
    }

    .final-name-lamp .bulb-globe { height: 45px; }
    .final-name-lamp .bulb-globe::after { bottom: -8px; height: 16px; }
    .final-name-lamp .bulb-base { height: 11px; }

    .light-final-card-v18 h2 {
        margin-bottom: 8px;
        font-size: 25px;
    }

    .light-final-card-v18 .light-name-label {
        font-size: 13px;
    }

    .light-final-card-v18 .light-name-input,
    .light-name-note-v18,
    .light-create-btn-v18,
    .light-final-card-v18 .form-error {
        width: 100%;
        max-width: 100%;
    }

    .light-final-card-v18 .light-name-input {
        margin-top: 20px;
    }

    .light-name-note-v18 {
        margin-top: 12px;
        font-size: 10.5px;
    }

    .light-create-btn-v18 {
        margin-top: 22px;
    }
}


/* =========================================================
   V23 - navigation direction + primary share CTA + final share hierarchy
   ========================================================= */

/* In RTL pages, force the navigation layout explicitly:
   NEXT on the left, PREVIOUS on the right. */
.sticky-actions {
    direction: ltr;
}

.sticky-actions .complete-btn {
    direction: rtl;
}

.sticky-actions .nav-icon-btn {
    direction: ltr;
}

/* The success was already communicated in the transition.
   The sharing idea is now the main message on the final card. */
.viral-main-title-v19 {
    display: none !important;
}

.viral-count-v19 {
    margin-bottom: 20px;
    color: #d9f2f5;
    background: rgba(255,255,255,.04);
    border-color: rgba(92,225,243,.11);
}

.viral-main-description-v19 {
    max-width: 650px;
    margin: 2px auto 26px !important;
    color: #f5fdff !important;
    font-size: clamp(20px, 2.5vw, 25px) !important;
    line-height: 1.9 !important;
    font-weight: 800;
    text-wrap: balance;
}

/* Share is a primary action, so use the site's turquoise family instead of green. */
.light-share-main-v19 {
    min-height: 60px;
    background: linear-gradient(135deg, var(--azk-primary) 0%, #5edbe5 100%) !important;
    color: #062b31 !important;
    border: 1px solid rgba(154,245,251,.35) !important;
    box-shadow:
        0 14px 34px rgba(1,177,196,.22),
        0 0 0 rgba(92,225,243,0) !important;
    animation: azkShareGlowV23 2.25s ease-in-out infinite;
}

.light-share-main-v19::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.05) 66%, transparent 100%);
    transform: translateX(-135%);
    animation: azkShareShineV23 3.4s ease-in-out infinite;
}

.light-share-main-v19:hover {
    background: linear-gradient(135deg, var(--azk-primary) 0%, #72e5ed 100%) !important;
    box-shadow:
        0 18px 42px rgba(1,177,196,.30),
        0 0 24px rgba(92,225,243,.20) !important;
}

@keyframes azkShareGlowV23 {
    0%,100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 14px 34px rgba(1,177,196,.20), 0 0 0 rgba(92,225,243,0);
    }
    50% {
        transform: translateY(-2px) scale(1.012);
        box-shadow: 0 18px 44px rgba(1,177,196,.31), 0 0 28px rgba(92,225,243,.20);
    }
}

@keyframes azkShareShineV23 {
    0%,72%,100% { transform: translateX(-135%); }
    82% { transform: translateX(135%); }
}

/* Success overlay copy should be easy to read before it reveals the share card. */
.peak-scene h2 {
    color: #ffd47a;
    font-weight: 900;
}

.peak-scene p {
    color: #edf9fb;
    font-weight: 700;
}

@media (max-width: 640px) {
    .viral-main-description-v19 {
        font-size: 18px !important;
        line-height: 1.85 !important;
        margin-bottom: 22px !important;
    }

    .viral-count-v19 {
        margin-bottom: 16px;
        font-size: 11.5px;
    }

    .light-share-main-v19 {
        min-height: 57px;
    }
}


/* =========================================================
   V24 - fixed task text size + lamp name tooltips
   ========================================================= */
.task-content-text {
    font-size: 1.2rem !important;
}

.footer-note {
    display: none !important;
}

/* Clickable lamps with full-name tooltip. */
.lamp-name-tooltip-holder {
    position: relative;
    overflow: visible !important;
}

.lamp-name-clickable {
    cursor: pointer;
    outline: none;
}

.lamp-name-clickable:focus-visible {
    filter: brightness(1.08);
}

.lamp-person-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 120;
    min-width: max-content;
    max-width: 210px;
    padding: 7px 11px;
    border-radius: 10px;
    background: #f4fbfc;
    border: 1px solid rgba(7, 74, 84, .14);
    color: #073b43;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 5px) scale(.96);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.lamp-person-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #f4fbfc;
}

.lamp-name-tooltip-holder.is-name-tooltip-open .lamp-person-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}

/* On the final/share card show the user's name below the large lamp. */
.viral-lamp-name-tooltip .lamp-person-tooltip {
    top: calc(100% + 2px);
    bottom: auto;
}

.viral-lamp-name-tooltip .lamp-person-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #f4fbfc;
}

.viral-lamp-name-tooltip.is-name-tooltip-open .lamp-person-tooltip {
    transform: translate(-50%, 0) scale(1);
}

@media (max-width: 640px) {
    .task-content-text {
        font-size: 1.2rem !important;
    }

    .lamp-person-tooltip {
        max-width: 170px;
        padding: 6px 9px;
        font-size: 10px;
    }
}


/* =========================================================
   V25 - quieter home lamp count + estimated momentum counter
   ========================================================= */
.home-lamp-count {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: rgba(126, 166, 171, .78) !important;
    font-size: .76rem !important;
    line-height: 1.4;
    font-weight: 700 !important;
    letter-spacing: 0;
    white-space: nowrap;
}

.home-lamp-count #homeLampCountValue {
    color: rgba(143, 184, 189, .86);
    font-size: .82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.home-lamp-count-prefix,
.home-lamp-count-suffix {
    color: rgba(116, 153, 158, .68);
    font-weight: 650;
}

.home-lamp-explainer-separator {
    color: rgba(108, 151, 157, .24) !important;
}

@media (max-width: 640px) {
    .home-lamp-count {
        font-size: .70rem !important;
    }

    .home-lamp-count #homeLampCountValue {
        font-size: .76rem;
    }
}


/* =========================================================
   V26 - subtle live movement for the approximate home counter
   ========================================================= */
.home-lamp-count #homeLampCountValue {
    display: inline-block;
    min-width: 5.4em;
    text-align: center;
    transition: transform .22s ease, opacity .22s ease, color .22s ease;
}

.home-lamp-count #homeLampCountValue.is-counting {
    animation: azkHomeCountTick .48s ease;
}

@keyframes azkHomeCountTick {
    0% {
        transform: translateY(0);
        opacity: .84;
    }
    42% {
        transform: translateY(-2px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: .86;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-lamp-count #homeLampCountValue.is-counting {
        animation: none !important;
    }
}


/* =========================================================
   V27 - no mobile autofocus + visual name-field cue
   ========================================================= */
.light-final-card-v18 .light-name-input.is-name-attention {
    animation: azkNameFieldAttention 1.8s ease-out 1;
}

@keyframes azkNameFieldAttention {
    0% {
        border-color: rgba(183,221,226,.20);
        box-shadow: 0 0 0 0 rgba(1,177,196,0);
        background: rgba(255,255,255,.045);
    }
    28% {
        border-color: rgba(92,225,243,.72);
        box-shadow: 0 0 0 5px rgba(1,177,196,.11), 0 0 26px rgba(1,177,196,.10);
        background: rgba(255,255,255,.065);
    }
    68% {
        border-color: rgba(92,225,243,.46);
        box-shadow: 0 0 0 3px rgba(1,177,196,.07);
        background: rgba(255,255,255,.055);
    }
    100% {
        border-color: rgba(183,221,226,.20);
        box-shadow: 0 0 0 0 rgba(1,177,196,0);
        background: rgba(255,255,255,.045);
    }
}

@media (prefers-reduced-motion: reduce) {
    .light-final-card-v18 .light-name-input.is-name-attention {
        animation: none !important;
        border-color: rgba(92,225,243,.62);
        box-shadow: 0 0 0 4px rgba(1,177,196,.09);
    }
}


/* First step: a quiet hint inside the counter until the first tap. */
.counter-tap-hint {
    position: relative;
    z-index: 2;
    display: block;
    margin: 0 auto 5px;
    color: rgba(255, 244, 214, .58);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.counter-tap-hint[hidden] { display: none !important; }