/* ===========================================================
   Dr. Fixit — The Perfect Challenge
   Brand layer on top of Bootstrap 5.3.
   Palette sampled directly from the Dr. Fixit master logo.

   Themes: the brand constants live on :root and never move.
   Everything a theme is allowed to change lives in the two
   blocks below, so a component never hard-codes a surface.
   =========================================================== */

:root{
  /* --- brand, exact from logo: identical in both themes --- */
  --df-yellow:#FFDE00;          /* logo field yellow          */
  --df-yellow-hi:#FEF200;       /* helmet highlight yellow    */
  --df-yellow-deep:#E8A200;     /* derived shadow             */
  --df-yellow-soft:#FFEE8A;     /* derived tint               */
  --df-blue:#004681;            /* WATERPROOFING EXPERT bar   */
  --df-blue-lt:#1E6FBF;
  --df-black:#000000;

  /* --- ground, hue-locked to the brand blue --- */
  --df-navy:#061A31;
  --df-navy-deep:#030F1F;
  --df-navy-mid:#0B2B50;

  /* --- reward --- */
  --df-foil:#F6C453;
  --df-foil-hi:#FFF0BE;

  /* --- semantic, kept clear of the accent --- */
  --df-ok:#22C55E;
  --df-bad:#FF4D5E;

  /* --- geometry, shared --- */
  --df-r-sm:12px;
  --df-r:16px;
  --df-r-lg:20px;
  --df-r-xl:26px;
  --bs-border-radius:14px;
  --bs-border-radius-lg:18px;
  --bs-body-font-family:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --bs-primary:#FFDE00;
  --bs-primary-rgb:255,222,0;
  --bs-focus-ring-color:rgba(255,222,0,.3);
}

/* -----------------------------------------------------------
   DARK — the monsoon night. Blue is the ground, not the paint.
   ----------------------------------------------------------- */
:root,
[data-bs-theme="dark"]{
  color-scheme:dark;

  --df-bg:#061A31;
  --df-bg-deep:#030F1F;
  --df-elev:#0A2244;

  /* neutrals: blue-biased, never a flat grey */
  --df-text:#E9F0FA;
  --df-muted:#9DB4D2;
  --df-dim:#6B85A7;
  --df-line:rgba(157,180,210,.18);
  --df-line-2:rgba(157,180,210,.32);

  /* every raised surface in the system resolves through these four */
  --df-surface:rgba(255,255,255,.055);
  --df-surface-2:rgba(255,255,255,.085);
  --df-surface-3:rgba(255,255,255,.13);
  --df-glass:rgba(255,255,255,.06);
  --df-track:rgba(255,255,255,.14);
  --df-panel-bg:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  --df-role-bg:linear-gradient(140deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  --df-plinth-bg:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));

  /* accent as *text*. Logo yellow is a fill colour; on a pale ground it
     fails contrast, so every yellow word resolves through this instead. */
  --df-ink-accent:var(--df-yellow);
  --df-ink-accent-2:var(--df-yellow-soft);
  --df-ink-ok:#6EE79B;
  --df-ink-bad:#FF9AA5;
  --df-ic-bg:linear-gradient(160deg,rgba(255,222,0,.2),rgba(0,70,129,.45));
  --df-ic-line:rgba(255,222,0,.28);

  /* the sky behind every page head */
  --df-sky:
    radial-gradient(120% 90% at 78% -20%, rgba(30,111,191,.34), transparent 62%),
    radial-gradient(90% 80% at 6% -10%, rgba(0,70,129,.5), transparent 60%),
    linear-gradient(180deg,#0A2748 0%, var(--df-bg) 100%);
  --df-rain-1:rgba(200,224,255,.55);
  --df-rain-2:rgba(200,224,255,.4);
  --df-rain-o1:.42;
  --df-rain-o2:.22;
  --df-drop:rgba(216,236,255,.7);

  --df-shadow-1:0 2px 10px -4px rgba(0,0,0,.5);
  --df-shadow-2:0 14px 34px -20px rgba(0,0,0,.85);
  --df-shadow-3:0 26px 54px -26px rgba(0,0,0,.9);

  --df-header-bg:rgba(7,24,45,.92);
  --df-nav-bg:linear-gradient(180deg,#08213F,#050F1F);
  --df-blue-ink:#9CC6F5;
  --df-on-accent:#14100A;

  --bs-body-bg:var(--df-bg);
  --bs-body-color:var(--df-text);
  --bs-border-color:var(--df-line);
  --bs-link-color:var(--df-yellow);
  --bs-link-hover-color:var(--df-yellow-soft);
  --bs-emphasis-color:var(--df-text);
  --bs-secondary-color:var(--df-muted);
  --bs-code-color:var(--df-ink-accent);
}

/* -----------------------------------------------------------
   LIGHT — daylight after the rain. Paper ground, navy ink,
   the blue held back to accents so it stops shouting.
   ----------------------------------------------------------- */
[data-bs-theme="light"]{
  color-scheme:light;

  --df-bg:#F5F8FC;
  --df-bg-deep:#EAF0F8;
  --df-elev:#FFFFFF;

  --df-text:#0C2039;
  --df-muted:#4E668A;
  --df-dim:#7389A6;
  --df-line:rgba(12,32,57,.13);
  --df-line-2:rgba(12,32,57,.22);

  --df-surface:#FFFFFF;
  --df-surface-2:#F1F6FC;
  --df-surface-3:#E3EDF9;
  --df-glass:#FFFFFF;
  --df-track:rgba(12,32,57,.13);
  --df-panel-bg:linear-gradient(150deg,#FFFFFF,#F3F8FD);
  --df-role-bg:linear-gradient(140deg,#FFFFFF,#EEF5FC);
  --df-plinth-bg:linear-gradient(180deg,#E6EFFA,#F7FAFE);

  --df-ink-accent:#8A5E00;
  --df-ink-accent-2:#6E4A00;
  --df-ink-ok:#12793B;
  --df-ink-bad:#BE1C2C;
  --df-ic-bg:linear-gradient(160deg,rgba(255,222,0,.6),rgba(255,222,0,.22));
  --df-ic-line:rgba(232,162,0,.55);

  --df-sky:
    radial-gradient(120% 90% at 78% -20%, rgba(30,111,191,.16), transparent 62%),
    radial-gradient(90% 80% at 6% -10%, rgba(255,222,0,.18), transparent 58%),
    linear-gradient(180deg,#DCEAF9 0%, var(--df-bg) 100%);
  --df-rain-1:rgba(0,70,129,.32);
  --df-rain-2:rgba(0,70,129,.22);
  --df-rain-o1:.3;
  --df-rain-o2:.18;
  --df-drop:rgba(0,70,129,.35);

  --df-shadow-1:0 2px 8px -4px rgba(12,32,57,.18);
  --df-shadow-2:0 14px 30px -18px rgba(12,32,57,.28);
  --df-shadow-3:0 26px 50px -26px rgba(12,32,57,.34);

  --df-header-bg:rgba(247,250,254,.92);
  --df-nav-bg:linear-gradient(180deg,#FFFFFF,#F1F6FC);
  --df-blue-ink:#0A4E90;
  --df-on-accent:#14100A;

  --bs-body-bg:var(--df-bg);
  --bs-body-color:var(--df-text);
  --bs-border-color:var(--df-line);
  --bs-link-color:#0A5AA8;
  --bs-link-hover-color:#004681;
  --bs-emphasis-color:var(--df-text);
  --bs-secondary-color:var(--df-muted);
  --bs-code-color:var(--df-ink-accent);
}

/* Panels that stay night-side in both themes — the film, the certificate,
   the confetti stage. They re-declare the neutrals locally so their children
   stay readable no matter which way the page around them is lit. */
.df-onnight,
.df-player,
.df-placeholder,
.df-banner--blue,
.df-badge{
  --df-text:#E9F0FA;
  --df-muted:#9DB4D2;
  --df-dim:#6B85A7;
  --df-line:rgba(157,180,210,.18);
  --df-line-2:rgba(157,180,210,.32);
  --df-surface:rgba(255,255,255,.055);
  --df-surface-2:rgba(255,255,255,.085);
  --df-surface-3:rgba(255,255,255,.13);
  --df-track:rgba(255,255,255,.14);
  --df-glass:rgba(255,255,255,.06);
  --df-elev:#0A2244;
  --df-panel-bg:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.022));
  --df-role-bg:linear-gradient(140deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  --df-plinth-bg:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));

  /* accent as *text*. Logo yellow is a fill colour; on a pale ground it
     fails contrast, so every yellow word resolves through this instead. */
  --df-ink-accent:var(--df-yellow);
  --df-ink-accent-2:var(--df-yellow-soft);
  --df-ink-ok:#6EE79B;
  --df-ink-bad:#FF9AA5;
  --df-ic-bg:linear-gradient(160deg,rgba(255,222,0,.2),rgba(0,70,129,.45));
  --df-ic-line:rgba(255,222,0,.28);
  color:var(--df-text);
}

html{ -webkit-text-size-adjust:100%; }
/* Bootstrap display utilities carry !important, so [hidden] must too. */
[hidden]{ display:none !important; }
body{
  background:var(--df-bg); color:var(--df-text);
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
}
h1,h2,h3,.df-display{
  font-family:"Archivo Black","Archivo",sans-serif; font-weight:400;
  letter-spacing:-.025em; line-height:1.04; text-wrap:balance; margin:0;
}
:focus-visible{ outline:3px solid var(--df-yellow); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--df-yellow); color:#14100A; }
.df-main{ flex:1 0 auto; display:flex; flex-direction:column; }
/* Puts the remaining vertical space around the content instead of below it. */
.df-grow{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; }
/* A pass-through column, so .df-grow deeper down still has room to expand into. */
.df-stack{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }

/* ===========================================================
   1. THE SKY — animated rain behind the page head
   =========================================================== */
.df-sky{
  position:relative; overflow:hidden;
  background:var(--df-sky);
}
.df-rain,.df-rain-slow{
  position:absolute; inset:-40% -12% 0; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 76%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 20%,#000 76%,transparent);
  animation:df-rain 1.05s linear infinite;
}
.df-rain{ opacity:var(--df-rain-o1); background-image:repeating-linear-gradient(76deg, var(--df-rain-1) 0 1px, transparent 1px 7px); }
.df-rain-slow{ opacity:var(--df-rain-o2); animation-duration:2.1s; background-image:repeating-linear-gradient(76deg, var(--df-rain-2) 0 1px, transparent 1px 13px); }
@keyframes df-rain{ to{ transform:translate3d(-26px,120px,0); } }
.df-sky > *{ position:relative; z-index:1; }
.df-sky > .df-rain,.df-sky > .df-rain-slow{ z-index:0; }

/* droplets that bead and fall */
.df-drops{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.df-drops i{
  position:absolute; width:5px; height:5px; border-radius:50% 50% 55% 55%;
  background:var(--df-drop); animation:df-bead 3.4s ease-in infinite;
}
@keyframes df-bead{ 0%{transform:translateY(0) scale(.6);opacity:0} 18%{opacity:.9} 100%{transform:translateY(64px) scale(1.15);opacity:0} }

@media (prefers-reduced-motion:reduce){
  .df-rain,.df-rain-slow,.df-drops i{ animation:none; }
}

/* ===========================================================
   2. THE MEMBRANE — the campaign's signature device
   =========================================================== */
.df-membrane{
  position:relative; height:7px; z-index:3;
  background:linear-gradient(90deg,var(--df-yellow-deep),var(--df-yellow) 22%,var(--df-yellow-soft) 50%,var(--df-yellow) 78%,var(--df-yellow-deep));
}
.df-membrane::before{
  content:""; position:absolute; left:0; right:0; top:-9px; height:9px; pointer-events:none;
  background-image:radial-gradient(circle at 50% 100%, rgba(216,236,255,.85) 0 2.1px, rgba(216,236,255,.22) 2.1px 3.2px, transparent 3.3px);
  background-size:23px 9px; background-repeat:repeat-x;
}
.df-membrane::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px;
  background:linear-gradient(180deg,rgba(255,222,0,.28),transparent);
}
.df-membrane--thick{ height:10px; }
.df-membrane--progress{ background:var(--df-track); }
.df-membrane--progress::before{ display:none; }
.df-membrane .df-fill{
  display:block; height:100%; width:0; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--df-yellow-deep),var(--df-yellow) 40%,var(--df-yellow-soft));
  transition:width .25s linear;
}

/* ===========================================================
   3. LOGO — see section 24. The old CSS lockup is gone: every
   position now carries the supplied master artwork instead.
   =========================================================== */

/* ===========================================================
   4. HEADER / FOOTER
   =========================================================== */
.df-header{ position:sticky; top:0; z-index:1030; }
.df-header .df-sky{ padding:.7rem 0; }
.df-crumb{ font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--df-muted); }
.df-crumb b{ color:var(--df-text); font-weight:800; }
.df-steps{ display:flex; gap:5px; align-items:center; }
.df-steps i{ width:24px; height:4px; border-radius:3px; background:var(--df-track); display:block; }
.df-steps i.on{ background:var(--df-yellow); box-shadow:0 0 12px -2px rgba(255,222,0,.6); }
.df-footer{ border-top:1px solid var(--df-line); padding:1.4rem 0; font-size:.78rem; color:var(--df-dim); }
.df-footer a{ color:var(--df-muted); text-decoration:none; }
.df-footer a:hover{ color:var(--df-ink-accent); }

/* ===========================================================
   5. TYPE HELPERS
   =========================================================== */
.df-kicker{ font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--df-ink-accent); }
.df-kicker--mut{ color:var(--df-dim); }
.df-lede{ color:var(--df-muted); line-height:1.62; }
.df-tiny{ font-size:.78rem; color:var(--df-dim); line-height:1.55; }
.df-num{ font-family:"Archivo Black",sans-serif; font-variant-numeric:tabular-nums; }
.df-tabular{ font-variant-numeric:tabular-nums; }
.df-h1{ font-size:clamp(2.1rem,5.4vw,3.6rem); }
.df-h2{ font-size:clamp(1.6rem,3.6vw,2.4rem); }
.df-h3{ font-size:clamp(1.15rem,2.2vw,1.5rem); }
.df-hl{ background:linear-gradient(180deg,transparent 76%,var(--df-yellow) 76%,var(--df-yellow) 97%,transparent 97%); padding:0 .06em; }
.df-y{ color:var(--df-ink-accent); }
.df-mut{ color:var(--df-muted); }

/* ===========================================================
   6. SURFACES
   =========================================================== */
.df-card{ background:var(--df-glass); border:1px solid var(--df-line); border-radius:18px; padding:1.25rem; }
.df-card--solid{ background:var(--df-elev); }
.df-panel{
  background:var(--df-panel-bg);
  border:1px solid var(--df-line-2); border-radius:24px;
}
.df-chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border-radius:20px;
  background:var(--df-surface-2); border:1px solid var(--df-line-2);
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--df-muted);
}
.df-chip--y{ background:rgba(255,222,0,.15); border-color:rgba(255,222,0,.5); color:var(--df-ink-accent-2); }
.df-chip--ok{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.45); color:var(--df-ink-ok); }
.df-chip--bad{ background:rgba(255,77,94,.14); border-color:rgba(255,77,94,.45); color:var(--df-ink-bad); }

/* ===========================================================
   7. BUTTONS
   =========================================================== */
.btn{ font-weight:800; letter-spacing:.01em; border-radius:14px; padding:.85rem 1.4rem; }
.btn-df{
  background:linear-gradient(180deg,var(--df-yellow-soft),var(--df-yellow) 42%,var(--df-yellow-deep));
  color:#14100A; border:0; box-shadow:0 5px 0 #A87400, 0 12px 22px -10px rgba(255,222,0,.55);
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn-df:hover{ color:#14100A; filter:brightness(1.05); }
.btn-df:active{ transform:translateY(4px); box-shadow:0 1px 0 #A87400; }
.btn-df:disabled,.btn-df.disabled{ background:var(--df-surface-2); color:var(--df-dim); box-shadow:none; opacity:1; }
.btn-df-ghost{ background:var(--df-surface-2); color:var(--df-text); border:1px solid var(--df-line-2); }
.btn-df-ghost:hover{ background:var(--df-surface-3); color:var(--df-text); border-color:var(--df-line-2); }
.btn-df-lg{ padding:1rem 1.7rem; font-size:1.05rem; }
.df-dock{ padding-top:1.25rem; }
@media (max-width:767.98px){
  .df-dock--sticky{
    position:sticky; bottom:0; z-index:1020; padding:1.5rem 0 1rem;
    background:linear-gradient(180deg,transparent,var(--df-bg) 34%);
  }
}

/* ===========================================================
   8. ROLE CHOICE
   =========================================================== */
.df-role{
  position:relative; display:flex; align-items:center; gap:1rem; width:100%; height:100%;
  text-align:left; text-decoration:none; color:var(--df-text); overflow:hidden;
  background:var(--df-role-bg);
  border:1px solid var(--df-line-2); border-radius:20px; padding:1.15rem 1.1rem;
  transition:border-color .15s, transform .12s;
}
.df-role::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--df-yellow); transform:scaleY(0); transform-origin:top; transition:transform .2s; }
.df-role:hover,.df-role:focus-visible{ border-color:rgba(255,222,0,.65); color:var(--df-text); }
.df-role:hover::before,.df-role.active::before{ transform:scaleY(1); }
.df-role:active{ transform:scale(.99); }
.df-role-ic{ width:56px; height:56px; border-radius:16px; flex:0 0 auto; display:grid; place-items:center; background:var(--df-ic-bg); border:1px solid var(--df-ic-line); }
.df-role-ic svg{ width:27px; height:27px; stroke:var(--df-ink-accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.df-role-t{ font-family:"Archivo Black",sans-serif; font-size:1.1rem; letter-spacing:-.01em; }
.df-role-s{ font-size:.82rem; color:var(--df-muted); margin-top:.15rem; }
.df-role-chev{ margin-left:auto; color:var(--df-dim); font-size:1.3rem; line-height:1; }

/* ===========================================================
   9. FORMS
   =========================================================== */
.df-label{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--df-muted); margin-bottom:.5rem; }
.form-control.df-input{
  background:var(--df-surface); border:1.5px solid var(--df-line-2); border-radius:14px;
  padding:.95rem 1rem; color:var(--df-text); font-size:1.1rem; font-weight:700; letter-spacing:.06em;
}
.form-control.df-input::placeholder{ color:#54688A; letter-spacing:.02em; font-weight:600; }
.form-control.df-input:focus{ background:rgba(255,222,0,.06); border-color:var(--df-yellow); color:var(--df-text); box-shadow:0 0 0 .2rem rgba(255,222,0,.18); }
.df-help{ font-size:.78rem; color:var(--df-dim); margin-top:.5rem; }

/* ===========================================================
   10. LANGUAGE TILES
   =========================================================== */
.df-lang{
  position:relative; display:block; width:100%; height:100%; text-align:left; text-decoration:none;
  background:var(--df-surface); border:1.5px solid var(--df-line); border-radius:16px;
  padding:1rem .9rem; color:var(--df-text); transition:.15s;
}
.df-lang:hover{ border-color:var(--df-line-2); background:var(--df-surface-2); color:var(--df-text); }
.df-lang-n{ display:block; font-family:"Archivo Black","Archivo",sans-serif; font-size:1.3rem; line-height:1.2; }
.df-lang-e{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--df-muted); margin-top:.3rem; }
.df-lang.active{ border-color:var(--df-yellow); background:rgba(255,222,0,.11); }
.df-lang.active .df-lang-e{ color:var(--df-ink-accent); }
.df-lang-tick{ position:absolute; top:.7rem; right:.7rem; width:19px; height:19px; border-radius:50%; background:var(--df-yellow); display:none; place-items:center; }
.df-lang.active .df-lang-tick{ display:grid; }
.df-lang-tick svg{ width:11px; height:11px; stroke:#14100A; stroke-width:3.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ===========================================================
   11. VIDEO PLAYER
   =========================================================== */
.df-player{
  position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/9;
  background:radial-gradient(90% 120% at 30% 20%, #123A6B, #040E1F);
  border:1px solid var(--df-line-2);
}
.df-player iframe,.df-player video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.df-player-face{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; text-align:center; padding:1rem; }
.df-player-drip{ position:absolute; inset:0; opacity:.26; background-image:repeating-linear-gradient(76deg,rgba(200,224,255,.5) 0 1px,transparent 1px 9px); animation:df-rain 1.4s linear infinite; }
.df-play{
  width:72px; height:72px; border-radius:50%; border:0; background:var(--df-yellow);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 0 0 12px rgba(255,222,0,.16), 0 12px 30px -8px rgba(0,0,0,.8);
  transition:transform .15s, box-shadow .15s;
}
.df-play:hover{ transform:scale(1.06); box-shadow:0 0 0 16px rgba(255,222,0,.2), 0 12px 30px -8px rgba(0,0,0,.8); }
.df-play svg{ width:26px; height:26px; fill:#14100A; margin-left:4px; }
.df-player-bar{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:2.2rem .9rem .7rem; background:linear-gradient(180deg,transparent,rgba(0,0,0,.85)); }
.df-track{ height:5px; border-radius:3px; background:rgba(255,255,255,.24); overflow:hidden; }
.df-track i{ display:block; height:100%; width:0; background:var(--df-yellow); border-radius:3px; transition:width .25s linear; }
.df-player-meta{ display:flex; justify-content:space-between; margin-top:.5rem; font-size:.72rem; font-weight:700; color:#D8E4F5; font-variant-numeric:tabular-nums; }
.df-noskip{ position:absolute; top:.75rem; right:.75rem; z-index:4; }

/* ===========================================================
   12. QUIZ
   =========================================================== */
.df-dial{ position:relative; width:66px; height:66px; flex:0 0 auto; }
.df-dial svg{ transform:rotate(-90deg); width:66px; height:66px; }
.df-dial circle{ fill:none; stroke-width:6; stroke-linecap:round; }
.df-dial .tr{ stroke:var(--df-track); }
.df-dial .pr{ stroke:var(--df-yellow); transition:stroke-dashoffset .3s linear, stroke .3s; }
.df-dial.is-t1 .pr{ stroke:var(--df-yellow); }
.df-dial.is-t2 .pr{ stroke:#FFC24D; }
.df-dial.is-t3 .pr{ stroke:#E8A200; }
.df-dial.is-t0 .pr{ stroke:var(--df-dim); }
.df-dial b{ position:absolute; inset:0; display:grid; place-items:center; font-family:"Archivo Black",sans-serif; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.df-qsegs{ display:flex; gap:6px; }
.df-qsegs i{ flex:1; height:5px; border-radius:3px; background:var(--df-track); display:block; }
.df-qsegs i.done{ background:var(--df-yellow); box-shadow:0 0 12px -2px rgba(255,222,0,.5); }
.df-qsegs i.now{ background:rgba(255,222,0,.55); }
.df-question{ font-size:clamp(1.25rem,2.6vw,1.9rem); line-height:1.25; }

.df-opt{
  position:relative; display:flex; align-items:center; gap:.9rem; width:100%; text-align:left;
  background:var(--df-surface); border:1.5px solid var(--df-line-2); border-radius:16px;
  padding:1rem 1.05rem; color:var(--df-text); font-size:1.02rem; font-weight:700;
  transition:background .16s, border-color .16s, opacity .16s; cursor:pointer;
}
.df-opt:hover:not(:disabled){ background:var(--df-surface-2); border-color:rgba(255,222,0,.4); }
.df-opt-k{
  width:32px; height:32px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--df-surface-2); border:1px solid var(--df-line-2);
  font-size:.8rem; font-weight:800; color:var(--df-muted);
}
.df-opt-mk{ margin-left:auto; width:24px; height:24px; border-radius:50%; display:none; place-items:center; flex:0 0 auto; }
.df-opt-mk svg{ width:13px; height:13px; stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.df-opt.is-right{ border-color:var(--df-ok); background:rgba(34,197,94,.14); }
.df-opt.is-right .df-opt-k{ background:var(--df-ok); border-color:var(--df-ok); color:#04240F; }
.df-opt.is-right .df-opt-mk{ display:grid; background:var(--df-ok); }
.df-opt.is-right .df-opt-mk svg{ stroke:#04240F; }
.df-opt.is-wrong{ border-color:var(--df-bad); background:rgba(255,77,94,.13); animation:df-shake .34s; }
.df-opt.is-wrong .df-opt-k{ background:var(--df-bad); border-color:var(--df-bad); color:#2B0308; }
.df-opt.is-wrong .df-opt-mk{ display:grid; background:var(--df-bad); }
.df-opt.is-wrong .df-opt-mk svg{ stroke:#2B0308; }
.df-opt.is-mute{ opacity:.4; }
@keyframes df-shake{ 20%{transform:translateX(-6px)} 45%{transform:translateX(5px)} 70%{transform:translateX(-3px)} 100%{transform:translateX(0)} }
@media (prefers-reduced-motion:reduce){ .df-opt.is-wrong{ animation:none; } }

.df-verdict{ display:flex; align-items:flex-start; gap:.7rem; border-radius:16px; padding:1rem 1.05rem; font-size:.9rem; line-height:1.55; }
.df-verdict b{ display:block; font-family:"Archivo Black",sans-serif; font-weight:400; letter-spacing:0; font-size:1rem; margin-bottom:.15rem; }
.df-verdict-mk{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; margin-top:.42rem; }
.df-verdict--ok .df-verdict-mk{ background:var(--df-ok); box-shadow:0 0 0 4px rgba(34,197,94,.18); }
.df-verdict--no .df-verdict-mk{ background:var(--df-bad); box-shadow:0 0 0 4px rgba(255,77,94,.18); }
.df-verdict--ok{ background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.4); }
.df-verdict--ok b{ color:var(--df-ink-ok); }
.df-verdict--no{ background:rgba(255,77,94,.11); border:1px solid rgba(255,77,94,.38); }
.df-verdict--no b{ color:var(--df-ink-bad); }
.df-countdown{ font-family:"Archivo Black",sans-serif; font-size:clamp(5rem,18vw,9rem); line-height:1; color:var(--df-ink-accent); text-shadow:0 0 50px rgba(255,222,0,.45); }

/* ===========================================================
   13. SCORE LEDGER
   =========================================================== */
.df-tally{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--df-line); border:1px solid var(--df-line); border-radius:18px; overflow:hidden; }
.df-tally > div{ background:var(--df-elev); padding:1rem .5rem; text-align:center; }
.df-tally b{ display:block; font-family:"Archivo Black",sans-serif; font-size:1.7rem; font-variant-numeric:tabular-nums; line-height:1; }
.df-tally span{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--df-muted); margin-top:.4rem; }

.df-ledger{ display:flex; flex-direction:column; }
.df-ledger-row{ display:flex; align-items:center; gap:.9rem; padding:.85rem 0; border-bottom:1px dashed var(--df-line); }
.df-ledger-row:last-child{ border-bottom:0; }
.df-ledger-t{ font-size:.95rem; font-weight:700; }
.df-ledger-s{ font-size:.76rem; color:var(--df-dim); margin-top:.1rem; }
.df-ledger-v{ margin-left:auto; font-family:"Archivo Black",sans-serif; font-size:1.1rem; font-variant-numeric:tabular-nums; color:var(--df-ink-accent); }
.df-ledger-row.is-zero .df-ledger-v{ color:var(--df-dim); }
.df-total{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.15rem; border-radius:18px;
  background:linear-gradient(100deg,rgba(255,222,0,.16),rgba(255,222,0,.04));
  border:1px solid rgba(255,222,0,.42);
}
.df-total span{ font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--df-ink-accent-2); }
.df-total b{ font-family:"Archivo Black",sans-serif; font-size:clamp(2rem,5vw,2.6rem); font-variant-numeric:tabular-nums; color:var(--df-ink-accent); line-height:1; }

.df-tier{ display:flex; align-items:center; gap:.7rem; font-size:.85rem; padding:.65rem .85rem; border-radius:12px; background:var(--df-surface); border:1px solid var(--df-line); color:var(--df-muted); }
.df-tier b{ margin-left:auto; font-family:"Archivo Black",sans-serif; font-size:.95rem; color:var(--df-muted); font-variant-numeric:tabular-nums; }
.df-tier.is-hit{ border-color:rgba(255,222,0,.55); background:rgba(255,222,0,.1); color:var(--df-text); }
.df-tier.is-hit b{ color:var(--df-ink-accent); }

/* ===========================================================
   14. BADGE
   =========================================================== */
.df-badge{
  position:relative; border-radius:22px; overflow:hidden; padding:2rem 1.5rem 1.6rem; text-align:center;
  background:radial-gradient(115% 85% at 50% 0%, #14406F, #071A38 66%, #04122A);
  border:1px solid rgba(246,196,83,.42);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.35);
  max-width:420px; margin-inline:auto;
}
.df-badge::before{ content:""; position:absolute; inset:9px; border:1px solid rgba(246,196,83,.28); border-radius:14px; pointer-events:none; }
.df-badge::after{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,var(--df-yellow-deep),var(--df-foil-hi),var(--df-yellow-deep)); }
.df-rosette{
  position:relative; width:108px; height:108px; margin:.6rem auto 0; border-radius:50%;
  background:conic-gradient(from 0deg,#C9963A,#FFF0BE 12%,#E0AE4C 25%,#FFF0BE 38%,#C9963A 50%,#FFF0BE 62%,#E0AE4C 75%,#FFF0BE 88%,#C9963A);
  display:grid; place-items:center; box-shadow:0 10px 26px -8px rgba(246,196,83,.7);
}
.df-rosette-in{ width:86px; height:86px; border-radius:50%; background:radial-gradient(circle at 34% 28%, #16447A, #071A38); border:1.5px solid rgba(255,240,190,.6); display:grid; place-items:center; }
.df-rosette-in svg{ width:38px; height:38px; fill:none; stroke:var(--df-foil-hi); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.df-badge-t{
  margin-top:1rem; font-family:"Archivo Black",sans-serif; font-size:1.75rem; letter-spacing:-.02em; line-height:1;
  background:linear-gradient(180deg,#FFF6D9,var(--df-foil) 60%,#C9963A);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.df-badge-sub{ font-size:.62rem; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--df-muted); margin-top:.6rem; }
.df-badge-hr{ height:1px; background:linear-gradient(90deg,transparent,rgba(246,196,83,.5),transparent); margin:1.1rem 0 .9rem; }
.df-badge-name{ font-family:"Archivo Black",sans-serif; font-size:1.25rem; letter-spacing:-.01em; }
.df-badge-code{ font-size:.75rem; font-weight:700; letter-spacing:.16em; color:var(--df-muted); margin-top:.25rem; font-variant-numeric:tabular-nums; }
.df-badge-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(246,196,83,.22); border:1px solid rgba(246,196,83,.22); border-radius:12px; overflow:hidden; margin-top:1.1rem; }
.df-badge-stats > div{ background:rgba(4,14,31,.72); padding:.6rem .25rem; }
.df-badge-stats b{ display:block; font-family:"Archivo Black",sans-serif; font-size:1.05rem; color:var(--df-foil); font-variant-numeric:tabular-nums; }
.df-badge-stats span{ display:block; font-size:.55rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--df-dim); margin-top:.15rem; }
.df-badge-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.1rem; padding-top:.85rem; border-top:1px solid rgba(246,196,83,.2); }
.df-badge-serial{ font-size:.58rem; font-weight:700; letter-spacing:.13em; color:var(--df-dim); text-align:left; font-variant-numeric:tabular-nums; line-height:1.6; }
.df-qr{ width:44px; height:44px; border-radius:6px; background:repeating-conic-gradient(#E9F0FA 0% 25%, #061A31 0% 50%); background-size:8px 8px; border:2px solid #E9F0FA; flex:0 0 auto; }

/* ===========================================================
   15. CELEBRATION
   =========================================================== */
.df-confetti{ position:fixed; inset:0; pointer-events:none; z-index:1040; }
.df-burst{ position:relative; width:150px; height:150px; margin-inline:auto; display:grid; place-items:center; }
.df-burst-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,222,0,.35); animation:df-pulse 2.4s ease-out infinite; }
.df-burst-ring:nth-child(2){ animation-delay:.8s; }
.df-burst-ring:nth-child(3){ animation-delay:1.6s; }
@keyframes df-pulse{ 0%{transform:scale(.55);opacity:.9} 100%{transform:scale(1.5);opacity:0} }
@media (prefers-reduced-motion:reduce){ .df-burst-ring{ animation:none; opacity:.3; } }

/* ===========================================================
   16. LEADERBOARD
   =========================================================== */
.df-tabs{ display:inline-flex; gap:4px; padding:4px; background:var(--df-surface-2); border:1px solid var(--df-line); border-radius:14px; }
.df-tab{
  border:0; background:transparent; color:var(--df-muted); font-weight:800; font-size:.88rem;
  letter-spacing:.04em; padding:.6rem 1.4rem; border-radius:11px; transition:.15s; cursor:pointer;
}
.df-tab.active{ background:var(--df-yellow); color:#14100A; }

/* The plinths are open-bottomed, so the podium carries its own floor line —
   it must not borrow the membrane for one. */
.df-podium{
  display:grid; grid-template-columns:1fr 1.18fr 1fr; align-items:end; gap:.7rem;
  border-bottom:2px solid var(--df-line-2);
}
.df-pod{ position:relative; text-align:center; min-width:0; }
.df-pod-av{
  width:56px; height:56px; border-radius:50%; margin:0 auto .6rem; display:grid; place-items:center;
  font-family:"Archivo Black",sans-serif; font-size:1.1rem; color:#061A31;
  background:linear-gradient(160deg,#BFD0E6,#8098B8); border:2px solid rgba(255,255,255,.35);
}
.df-pod--1 .df-pod-av{ width:72px; height:72px; font-size:1.4rem; background:linear-gradient(160deg,var(--df-foil-hi),var(--df-foil) 55%,#C9963A); border-color:var(--df-foil-hi); box-shadow:0 0 0 6px rgba(246,196,83,.16); }
.df-pod-n{ font-size:.8rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.df-pod-p{ font-family:"Archivo Black",sans-serif; font-size:.9rem; color:var(--df-ink-accent); font-variant-numeric:tabular-nums; margin-top:.1rem; }
.df-pod-plinth{
  margin-top:.6rem; border-radius:12px 12px 0 0; display:grid; place-items:center;
  background:var(--df-plinth-bg);
  border:1px solid var(--df-line); border-bottom:0;
  font-family:"Archivo Black",sans-serif; font-size:1.35rem; color:var(--df-dim);
}
.df-pod--1 .df-pod-plinth{ height:96px; background:linear-gradient(180deg,rgba(255,222,0,.26),rgba(255,222,0,.06)); border-color:rgba(255,222,0,.5); color:var(--df-ink-accent); }
.df-pod--2 .df-pod-plinth{ height:70px; }
.df-pod--3 .df-pod-plinth{ height:52px; }
.df-pod-crown{ position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:1.1rem; }

.df-lrow{ display:flex; align-items:center; gap:.9rem; padding:.85rem 1rem; border-radius:15px; background:var(--df-surface); border:1px solid var(--df-line); }
.df-lrow-rk{ width:28px; flex:0 0 auto; text-align:center; font-family:"Archivo Black",sans-serif; font-size:1rem; color:var(--df-dim); font-variant-numeric:tabular-nums; }
.df-lrow-av{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:.8rem; font-weight:800; color:#061A31; background:linear-gradient(160deg,#BFD0E6,#8098B8); }
.df-lrow-txt{ flex:1 1 auto; min-width:0; }
.df-lrow-n{ display:block; font-size:.95rem; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.df-lrow-s{ display:block; font-size:.74rem; color:var(--df-dim); margin-top:.05rem; font-variant-numeric:tabular-nums; }
.df-lrow-p{ margin-left:auto; text-align:right; flex:0 0 auto; }
.df-lrow-p b{ display:block; font-family:"Archivo Black",sans-serif; font-size:1.05rem; color:var(--df-ink-accent); font-variant-numeric:tabular-nums; line-height:1.15; }
.df-lrow-p span{ display:block; font-size:.58rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--df-dim); }
.df-lrow.is-me{ background:linear-gradient(100deg,rgba(255,222,0,.16),rgba(255,222,0,.05)); border-color:rgba(255,222,0,.55); }
.df-lrow.is-me .df-lrow-rk{ color:var(--df-ink-accent); }
.df-lrow.is-me .df-lrow-av{ background:linear-gradient(160deg,var(--df-yellow-soft),var(--df-yellow-deep)); }
/* This is the one row the participant cares about — never truncate it. */
.df-lrow.is-me .df-lrow-n{ white-space:normal; overflow:visible; text-overflow:clip; }
.df-lrow.is-me{ align-items:flex-start; }
.df-lrow.is-me .df-lrow-rk,
.df-lrow.is-me .df-lrow-av,
.df-lrow.is-me .df-lrow-p{ margin-top:.1rem; }

/* ===========================================================
   17. NOTICES
   =========================================================== */
.df-notice{ display:flex; gap:1rem; padding:1.15rem; border-radius:18px; background:rgba(255,77,94,.09); border:1px solid rgba(255,77,94,.35); }
.df-notice-ic{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; background:rgba(255,77,94,.18); }
.df-notice-ic svg{ width:20px; height:20px; stroke:var(--df-ink-bad); fill:none; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.df-notice b{ font-family:"Archivo Black",sans-serif; font-weight:400; color:var(--df-ink-bad); font-size:1.05rem; }

/* ===========================================================
   18. HERO SHIELD
   =========================================================== */
.df-shield{ width:min(58vw,240px); aspect-ratio:120/132; }
.df-shield svg{ width:100%; height:100%; display:block; }

/* ===========================================================
   19. UTILITIES — declared last so they win over components
   =========================================================== */
.df-y{ color:var(--df-ink-accent); }
.df-mut{ color:var(--df-muted); }
.df-dimmed{ color:var(--df-dim); }
/* A value lifted out of a muted sentence — never an absolute white. */
.df-strong{ color:var(--df-text); }

/* ===========================================================
   20. PLAYER STAGE — real film, or a designed stand-in
   =========================================================== */
.df-player-stage{ position:absolute; inset:0; z-index:1; }
.df-player-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* The placeholder shown until Pidilite supplies the films. It has to look
   deliberate, because a plain navy rectangle for sixty seconds reads as broken. */
.df-placeholder{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:1.5rem;
  background:
    radial-gradient(120% 90% at 70% -10%, rgba(30,111,191,.5), transparent 60%),
    radial-gradient(90% 80% at 10% 110%, rgba(0,70,129,.55), transparent 60%),
    linear-gradient(160deg,#0C2A50,#050F22);
}
.df-placeholder-in{ position:relative; z-index:2; max-width:34ch; }
.df-scene-k{
  font-size:.6rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--df-yellow); margin-bottom:.6rem;
}
.df-scene-t{
  font-family:"Archivo Black",sans-serif; font-size:clamp(1.05rem,2.4vw,1.6rem);
  letter-spacing:-.02em; line-height:1.2; color:var(--df-text);
}
.df-scene-t.is-in{ animation:df-scene .5s ease-out both; }
@keyframes df-scene{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .df-scene-t.is-in{ animation:none; } }
.df-placeholder-note{ margin-top:1.1rem; }
.df-placeholder .df-logo{ margin:0 auto 1.1rem; }
.df-player.is-placeholder .df-player-drip{ opacity:.16; }

/* ===========================================================
   21. QR — a live code, with a labelled stand-in if it can't render
   =========================================================== */
.df-qr{
  width:52px; height:52px; border-radius:6px; flex:0 0 auto; overflow:hidden;
  background:repeating-conic-gradient(#E9F0FA 0% 25%, #061A31 0% 50%);
  background-size:8px 8px; border:2px solid #E9F0FA;
}
.df-qr.is-live{ background:#fff; padding:1px; }
.df-qr svg{ display:block; width:100%; height:100%; }

/* ===========================================================
   22. LEADERBOARD — viewing someone else's board
   =========================================================== */
.df-off-board{
  display:flex; align-items:flex-start; gap:.7rem; margin-top:.75rem;
  padding:.75rem .9rem; border-radius:12px; font-size:.8rem; line-height:1.5;
  background:rgba(30,111,191,.14); border:1px solid rgba(30,111,191,.42); color:var(--df-muted);
}
.df-off-board b{ color:var(--df-text); font-weight:800; }

/* ===========================================================
   23. QUIZ SCORE CHIP — replaces the duplicate logo in the header
   =========================================================== */
.df-scorechip{
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  padding:.4rem .8rem; border-radius:12px; min-width:88px;
  background:rgba(255,222,0,.1); border:1px solid rgba(255,222,0,.4);
}
.df-scorechip span{
  font-size:.55rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--df-muted);
}
.df-scorechip b{
  font-family:"Archivo Black",sans-serif; font-size:1.25rem; line-height:1.1;
  color:var(--df-ink-accent); font-variant-numeric:tabular-nums;
}
@media (max-width:400px){
  .df-scorechip{ min-width:0; padding:.3rem .6rem; }
  .df-scorechip b{ font-size:1.05rem; }
}

/* ===========================================================
   24. THE MASTER LOGO — the real asset, at a size you can read
   -----------------------------------------------------------
   This replaced a CSS reproduction of the lockup. One artwork,
   four heights, so header, certificate, film stand-in and the
   admin sign-in all show the same mark.
   =========================================================== */
.df-logo{
  display:block; width:auto; height:var(--df-logo-h,44px);
  image-rendering:auto; -webkit-user-drag:none; user-select:none;
}
.df-logo--sm{ --df-logo-h:38px; }
.df-logo--lg{ --df-logo-h:74px; }
.df-logo--xl{ --df-logo-h:110px; }
.df-logo-link{ display:inline-flex; align-items:center; flex:0 0 auto; border-radius:8px; }
.df-logo-link:focus-visible{ outline-offset:5px; }
@media (min-width:768px){ .df-logo{ --df-logo-h:52px; } .df-logo--sm{ --df-logo-h:46px; } .df-logo--lg{ --df-logo-h:96px; } .df-logo--xl{ --df-logo-h:150px; } }

/* ===========================================================
   25. HEADER BAR — one grid for every page
   =========================================================== */
.df-bar{ display:flex; align-items:center; gap:.75rem; min-height:56px; }
.df-bar-end{ margin-left:auto; display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.df-bar-sep{ width:1px; align-self:stretch; margin:.35rem .15rem; background:var(--df-line-2); flex:0 0 auto; }
/* The identity panel drops out of the bar, so the header's sky cannot clip.
   The rain inside it is masked and sits above the fold, so letting it out
   costs nothing — body already refuses a horizontal scrollbar. */
.df-header .df-sky{ padding:.55rem 0; box-shadow:var(--df-shadow-1); overflow:visible; }
.df-back{
  display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 auto;
  border-radius:12px; border:1px solid var(--df-line-2); background:var(--df-surface-2);
  color:var(--df-text); text-decoration:none; font-size:1.15rem; line-height:1;
  transition:background .15s, border-color .15s, transform .12s;
}
.df-back:hover{ background:var(--df-surface-3); color:var(--df-text); border-color:var(--df-line-2); }
.df-back:active{ transform:scale(.94); }

/* ===========================================================
   26. THEME SWITCH — sun / moon, remembered per device
   =========================================================== */
.df-theme{
  position:relative; display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 auto;
  padding:0; border-radius:12px; border:1px solid var(--df-line-2);
  background:var(--df-surface-2); color:var(--df-text); cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
}
.df-theme:hover{ background:var(--df-surface-3); border-color:rgba(255,222,0,.55); }
.df-theme:active{ transform:scale(.94); }
.df-theme svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
/* One button, two glyphs: show the theme you would switch *to*. */
.df-theme .df-theme-sun{ display:none; }
[data-bs-theme="dark"] .df-theme .df-theme-sun{ display:block; }
[data-bs-theme="dark"] .df-theme .df-theme-moon{ display:none; }

/* ===========================================================
   27. IDENTITY — who is signed in, on every page after verify
   =========================================================== */
.df-id{
  display:inline-flex; align-items:center; gap:.6rem; max-width:min(56vw,320px);
  padding:.32rem .7rem .32rem .32rem; border-radius:999px;
  background:var(--df-surface-2); border:1px solid var(--df-line-2);
  color:var(--df-text); text-align:left; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.df-id:hover{ background:var(--df-surface-3); border-color:rgba(255,222,0,.5); }
.df-id-av{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-family:"Archivo Black",sans-serif; font-size:.78rem; color:#14100A;
  background:linear-gradient(160deg,var(--df-yellow-soft),var(--df-yellow) 55%,var(--df-yellow-deep));
}
.df-id-txt{ min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.df-id-n{ font-size:.82rem; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.df-id-s{ font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--df-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:575.98px){
  .df-id{ padding:.28rem; gap:0; }
  .df-id .df-id-txt{ display:none; }
}

/* The panel the chip opens — the full record, and the way out of it. */
.df-idpop{
  position:absolute; top:calc(100% + .5rem); right:0; z-index:1060; width:min(310px,calc(100vw - 2rem));
  background:var(--df-elev); border:1px solid var(--df-line-2); border-radius:var(--df-r-lg);
  box-shadow:var(--df-shadow-2); padding:1rem; text-align:left;
}
.df-idpop[hidden]{ display:none !important; }
.df-idpop-h{ display:flex; align-items:center; gap:.7rem; }
.df-idpop-h .df-id-av{ width:44px; height:44px; font-size:1rem; }
.df-idpop-n{ font-family:"Archivo Black",sans-serif; font-size:1rem; letter-spacing:-.01em; line-height:1.2; }
.df-idpop-r{ font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--df-ink-accent); margin-top:.2rem; }
.df-idpop-rows{ margin-top:.9rem; border-top:1px dashed var(--df-line); }
.df-idpop-row{ display:flex; gap:1rem; align-items:baseline; padding:.5rem 0; border-bottom:1px dashed var(--df-line); }
.df-idpop-row:last-child{ border-bottom:0; }
.df-idpop-row dt{ font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--df-dim); flex:0 0 102px; margin:0; }
.df-idpop-row dd{ margin:0; margin-left:auto; text-align:right; font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; word-break:break-word; }
.df-idpop-out{ display:block; width:100%; margin-top:.9rem; }
.df-bar-end{ position:relative; }

/* The same record, stated in full in the page body rather than the chrome. */
.df-idcard{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1rem 1.15rem; border-radius:var(--df-r-lg);
  background:var(--df-panel-bg); border:1px solid var(--df-line-2);
}
.df-idcard-av{
  width:52px; height:52px; border-radius:16px; flex:0 0 auto; display:grid; place-items:center;
  font-family:"Archivo Black",sans-serif; font-size:1.15rem; color:#14100A;
  background:linear-gradient(160deg,var(--df-yellow-soft),var(--df-yellow) 55%,var(--df-yellow-deep));
  box-shadow:0 6px 18px -10px rgba(255,222,0,.8);
}
.df-idcard-main{ min-width:0; flex:1 1 190px; }
.df-idcard-n{ font-family:"Archivo Black",sans-serif; font-size:1.15rem; letter-spacing:-.015em; line-height:1.2; }
.df-idcard-s{ font-size:.8rem; color:var(--df-muted); margin-top:.25rem; }
.df-idcard-meta{ display:flex; gap:.4rem; flex-wrap:wrap; margin-left:auto; }
.df-idcard-out{ font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--df-dim); background:0; border:0; padding:.2rem 0; cursor:pointer; }
.df-idcard-out:hover{ color:var(--df-ink-bad); }

/* ===========================================================
   28. KPI TILES — the numbers that make the programme feel live
   =========================================================== */
.df-kpi{
  position:relative; height:100%; overflow:hidden;
  padding:1.2rem 1.15rem; border-radius:var(--df-r-lg);
  background:var(--df-panel-bg); border:1px solid var(--df-line);
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.df-kpi::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--df-yellow-deep),var(--df-yellow),var(--df-yellow-soft));
  opacity:.55; transition:opacity .18s;
}
.df-kpi:hover{ transform:translateY(-3px); border-color:var(--df-line-2); box-shadow:var(--df-shadow-2); }
.df-kpi:hover::after{ opacity:1; }
.df-kpi-ic{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; margin-bottom:.85rem;
  background:var(--df-ic-bg); border:1px solid var(--df-ic-line);
}
.df-kpi-ic svg{ width:19px; height:19px; fill:none; stroke:var(--df-ink-accent); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.df-kpi-v{
  font-family:"Archivo Black",sans-serif; font-size:clamp(1.7rem,4.4vw,2.3rem); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.df-kpi-v small{ font-family:"Archivo",sans-serif; font-weight:900; font-size:.5em; color:var(--df-ink-accent); margin-left:.1em; }
.df-kpi-l{ font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--df-muted); margin-top:.55rem; }
.df-kpi-d{ font-size:.76rem; color:var(--df-dim); margin-top:.35rem; line-height:1.5; }

/* ===========================================================
   29. BANNERS — the campaign creative, in three weights
   =========================================================== */
.df-banner{
  position:relative; overflow:hidden; border-radius:var(--df-r-xl);
  border:1px solid var(--df-line-2); padding:clamp(1.5rem,4vw,2.4rem);
  background:var(--df-panel-bg);
}
/* A yellow field is a light surface whichever way the page is lit, so it
   carries its own ink and its own idea of what a raised surface looks like. */
.df-banner--yellow{
  border-color:rgba(232,162,0,.75);
  background:linear-gradient(115deg,var(--df-yellow) 0%,var(--df-yellow-hi) 44%,var(--df-yellow-deep) 100%);
  --df-text:#14100A;
  --df-muted:rgba(20,16,10,.78);
  --df-dim:rgba(20,16,10,.62);
  --df-line:rgba(20,16,10,.2);
  --df-line-2:rgba(20,16,10,.3);
  --df-surface:rgba(255,255,255,.45);
  --df-surface-2:rgba(255,255,255,.6);
  --df-surface-3:rgba(255,255,255,.75);
  --df-ink-accent:#5A3D00;
  --df-ink-accent-2:#4A3200;
  color:#14100A;
}
.df-banner--yellow .df-banner-k{ color:rgba(20,16,10,.62); }
.df-banner--yellow .df-banner-s{ color:rgba(20,16,10,.78); }
.df-banner--yellow .df-prize{ box-shadow:none; backdrop-filter:blur(2px); }
.df-banner--blue{
  border-color:rgba(30,111,191,.5); color:#EAF2FD;
  background:
    radial-gradient(110% 130% at 88% -10%, rgba(30,111,191,.85), transparent 60%),
    linear-gradient(120deg,#04305C,#061A31 70%);
}
.df-banner--blue .df-banner-k{ color:var(--df-yellow); }
.df-banner--blue .df-banner-s{ color:#B9CFEA; }
.df-banner--blue .df-kpi-v small,
.df-banner--blue .df-kicker{ color:var(--df-yellow); }
.df-banner-k{ font-size:.68rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--df-ink-accent); }
.df-banner-t{ font-family:"Archivo Black",sans-serif; font-size:clamp(1.5rem,3.8vw,2.4rem); letter-spacing:-.025em; line-height:1.06; margin-top:.7rem; }
.df-banner-s{ margin-top:.75rem; color:var(--df-muted); line-height:1.6; max-width:46ch; }
.df-banner-art{
  position:absolute; right:-6%; bottom:-22%; width:min(42%,300px); opacity:.16; pointer-events:none;
}
.df-banner--yellow .df-banner-art{ opacity:.2; }
.df-banner-art svg{ width:100%; height:auto; display:block; }
@media (max-width:767.98px){ .df-banner-art{ display:none; } }

/* The prize strip: three rewards, read left to right. */
.df-prize{
  display:flex; align-items:center; gap:.9rem; padding:.95rem 1rem; height:100%;
  border-radius:var(--df-r); background:var(--df-surface); border:1px solid var(--df-line);
}
.df-prize-m{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-family:"Archivo Black",sans-serif; font-size:.9rem; color:#14100A;
  background:linear-gradient(160deg,var(--df-foil-hi),var(--df-foil) 55%,#C9963A);
  box-shadow:0 0 0 4px rgba(246,196,83,.14);
}
.df-prize-t{ font-weight:800; font-size:.95rem; letter-spacing:-.01em; }
.df-prize-s{ font-size:.75rem; color:var(--df-dim); margin-top:.12rem; }

/* ===========================================================
   30. TICKER — a live-feeling strip of recent finishers
   =========================================================== */
.df-ticker{
  display:flex; align-items:center; gap:1rem; overflow:hidden;
  border-block:1px solid var(--df-line); background:var(--df-surface);
  padding:.6rem 0;
}
.df-ticker-l{
  flex:0 0 auto; margin-left:1rem; padding:.3rem .65rem; border-radius:8px;
  background:var(--df-yellow); color:#14100A;
  font-size:.6rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
/* The label is chrome and must not move; only the window scrolls. */
.df-ticker-win{ flex:1 1 auto; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent); }
.df-ticker-track{ display:flex; gap:2.2rem; width:max-content; white-space:nowrap; animation:df-ticker 34s linear infinite; }
.df-ticker:hover .df-ticker-track{ animation-play-state:paused; }
.df-ticker-i{ font-size:.82rem; color:var(--df-muted); }
.df-ticker-i b{ color:var(--df-text); font-weight:800; }
.df-ticker-i i{ color:var(--df-ink-accent); font-style:normal; font-weight:800; font-variant-numeric:tabular-nums; }
@keyframes df-ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .df-ticker-track{ animation:none; } }

/* ===========================================================
   31. SECTION HEADS + polish passes
   =========================================================== */
.df-sechead{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.df-sechead p{ margin:0; }
.df-rule{ height:1px; background:linear-gradient(90deg,var(--df-line-2),transparent); border:0; opacity:1; margin:0; }

.df-card{ transition:border-color .18s, transform .18s, box-shadow .18s; }
.df-card--hover:hover{ transform:translateY(-3px); border-color:var(--df-line-2); box-shadow:var(--df-shadow-2); }
.df-step-n{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center; margin-bottom:.9rem;
  font-family:"Archivo Black",sans-serif; font-size:.95rem; color:#14100A;
  background:linear-gradient(160deg,var(--df-yellow-soft),var(--df-yellow) 60%,var(--df-yellow-deep));
}
.df-panel{ box-shadow:var(--df-shadow-2); }
.df-role{ box-shadow:var(--df-shadow-1); }
.df-role:hover{ transform:translateY(-2px); box-shadow:var(--df-shadow-2); }
.df-role:active{ transform:translateY(0) scale(.99); }

/* Light mode wants a little more edge definition than a glass panel gives. */
[data-bs-theme="light"] .df-card,
[data-bs-theme="light"] .df-lrow,
[data-bs-theme="light"] .df-prize{ box-shadow:var(--df-shadow-1); }
[data-bs-theme="light"] .df-membrane::before{ opacity:.55; }
[data-bs-theme="light"] .form-control.df-input::placeholder{ color:#93A7C0; }
[data-bs-theme="light"] .df-tab.active{ box-shadow:0 2px 8px -3px rgba(232,162,0,.8); }
[data-bs-theme="light"] .df-total{ background:linear-gradient(100deg,rgba(255,222,0,.3),rgba(255,222,0,.1)); border-color:rgba(232,162,0,.6); }
[data-bs-theme="light"] .df-lrow.is-me{ background:linear-gradient(100deg,rgba(255,222,0,.28),rgba(255,222,0,.09)); border-color:rgba(232,162,0,.6); }
[data-bs-theme="light"] .df-chip{ background:var(--df-surface-2); }
[data-bs-theme="light"] .df-hl{ background:linear-gradient(180deg,transparent 74%,rgba(255,222,0,.85) 74%,rgba(255,222,0,.85) 97%,transparent 97%); }

/* Theme changes should read as a change of light, not a flash of layout. */
@media (prefers-reduced-motion:no-preference){
  body,.df-card,.df-panel,.df-kpi,.df-role,.df-lrow,.df-prize,.df-idcard{
    transition:background-color .25s ease, border-color .25s ease, color .25s ease;
  }
}

/* The narrowest handsets: the bar keeps back, mark, identity and switch. */
@media (max-width:400px){
  .df-bar{ gap:.45rem; }
  .df-logo--sm{ --df-logo-h:34px; }
  .df-back,.df-theme{ width:34px; height:34px; }
}