/* Designer KV, layered after the shared UI and landing layout.
   Exact cyan/green stops are taken from the supplied SVG artwork. */
:root {
  --bg:#050808; --card:#101619; --card-2:#182125; --card2:#182125;
  --bg-card:#101619; --bg-card-2:#182125; --border:#2c3b42;
  --text:#f8faff; --dim:#b8c7ce; --text-dim:#b8c7ce; --muted:#9badb7;
  --green:#06f633; --green-bright:#06f633; --mint:#77f7b1; --cyan:#07fbff; --violet:#b6a0ff;
  --grad:linear-gradient(110deg,#07fbff,#06f633);
  --accent-gradient:linear-gradient(110deg,#07fbff,#06f633);
}
body { background:#050808!important; }
nav,.topnav { background:#05090af2!important; border-color:#ffffff1c!important; }
.brand-anniversary { display:block; width:112px; height:auto; flex-shrink:0; }
.topnav .brand { gap:20px; }.topnav .brand-name { font-size:14px; font-weight:500; padding-left:20px; border-left:1px solid #ffffff30; }
.topnav .links a.on { color:#b6fff3; background:#15332e; }.topnav .links a:hover { background:#18292d; }
.topnav .logout { border-radius:30px; }
.btn,.cta,.submit,button.primary { border-radius:30px; }
.btn.btn-ghost,.btn.ghost,.cta.quiet { background:#0e1b1c!important; border-color:#466469!important; }
input:focus,textarea:focus,select:focus { border-color:#07fbff!important; box-shadow:0 0 0 3px #07fbff14; }
input,textarea,select { background:#080e11!important; border-color:#3a515a!important; }
.gradient-text { color:#89f9dc; }.tech-badge { color:#b8c7ce; }.tech-badge::before { background:#07fbff; }
.card,.week,.place,.board,.notice,.answers,.table-wrap,.login-card,.hero-card { border-color:#2c3b42!important; }
.editorial-label { color:#b6a0ff; }.card:hover { border-color:#967ede!important; }
.brand-anniversary,.auth-anniversary,.campaign-badge,.campaign-title img { object-fit:contain; }
.auth-anniversary { display:block; width:160px; height:auto; margin:0 0 28px; }
.campaign-badge { display:block; width:215px; max-width:100%; height:auto; }

/* The character remains intact; the KV objects provide its environment. */
.mascot-scene::before {
  display:block; inset:9% -3% 0; border:0; border-radius:0;
  background:url('/assets/designer-heart-glass.webp') center/contain no-repeat;
  transform:rotate(-12deg); opacity:.35; z-index:0; pointer-events:none;
}
.mascot-scene::after {
  width:25%; height:25%; top:0; right:-2%; border-radius:0; box-shadow:none;
  background:url('/assets/designer-bracket.webp') center/contain no-repeat; z-index:3; pointer-events:none;
}
.scene-label { border-color:#49616a; border-radius:30px; background:#071013ed; color:#d9f2f0; box-shadow:none; }
.scene-label i { color:#07fbff; }.scene-label.code { top:12%; left:-3%; }.scene-label.note { bottom:8%; }
.mascot-scene figcaption { color:#b8c7ce; letter-spacing:.07em; }
.page-hero .mascot-scene::before { opacity:.24; }
.page-hero .mascot-scene::after { background-image:url('/assets/designer-heart-soft.webp'); width:23%; height:23%; right:1%; }
.page-hero .scene-label.note { bottom:0; }
.task-page .page-hero .mascot-scene::after { background-image:url('/assets/designer-bracket.webp'); }

/* Landing follows the original KV hierarchy: typography, character, soft shapes. */
header.hero {
  background:
    radial-gradient(ellipse 55% 60% at 100% 35%,#1fb04299,transparent 70%),
    radial-gradient(ellipse 45% 55% at 0 8%,#0e8c9a66,transparent 70%),
    radial-gradient(ellipse 60% 55% at 12% 100%,#6a52e6a6,transparent 70%),
    radial-gradient(ellipse 80% 25% at 50% 100%,#7ff0e044,transparent 75%),
    #030606;
  padding-top:48px;
}
header.hero.page-hero { background:none; padding-top:46px; }
.hero-layout { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:30px; }
.hero h1.campaign-title { max-width:640px; width:100%; margin:12px 0 0; font-size:inherit; line-height:0; }
.campaign-title img { display:block; width:100%; height:auto; margin-bottom:-2%; }
.hero-badge { color:#c5d7db; letter-spacing:.035em; }
.hero-week { background:#092823; border-color:#1b6958; color:#b6f8de; border-radius:30px; margin-bottom:24px; }
.hero p.lead { color:#d0dde0; max-width:470px; }.hero-dates { color:#afc6ca; }
.hero-art { padding:20px 10px; }.hero-art .mascot-img { filter:drop-shadow(0 24px 28px #0007); }
.hero-art::before { inset:14% -8% 0; opacity:.5; }
.hero-art::after { width:24%; height:24%; top:-5%; right:3%; }
.hero-stats { border-color:#ffffff26; margin-top:24px; }
.hero-stats .stat { border-color:#ffffff26; }.hero-stats .stat b { color:#fff; }.hero-stats .stat span { color:#b8c7ce; }
.ticker { background:linear-gradient(100deg,#07fbff,#06f633); }
.ticker .ti,.ticker .ti b { color:#052419; }
#about,#scoring,#facts { background:#080d10; }
#weeks,#tasks,section.band { background:#0b1317; border-color:#28383e; }
.section-mascot::after { background-image:url('/assets/designer-hash.webp'); top:2%; right:-8%; }
#scoring .section-mascot::after { background-image:url('/assets/designer-185.webp'); width:60%; height:37%; top:auto; bottom:-2%; right:-8%; }
#scoring .section-mascot .scene-label { display:none; }
.week.is-current { border-color:#06f633!important; }.week-num { color:#7ef7df; }
.pill { background:#0e3028; border-color:#28634f; color:#b4f3d7; }
.callout { background:#101f25; border-color:#30505b; border-left-color:#07fbff; }
.callout.warn { background:#25221b; border-color:#635534; }
.chip,.chip-p,.chip-v,.chip-g,.chip-r { background:#1e2439; color:#d3c7ff; border-color:#4a4169; }
.step::before { background:var(--grad); }.step { border-color:#314047; }
.stack-seg.s1 { background:#00c9cb; color:#052024; }.stack-seg.s2 { background:#06df67; color:#05221a; }.stack-seg.s3 { background:#9a8df0; color:#17152d; }.stack-seg.s4 { background:#bcafff; color:#17152d; }
.task-head { background:#122129; }.task-head .t-num { background:var(--grad); color:#03261d; }
pre.code { background:#050b0e; color:#cce6e6; border-color:#30434c; }
.tn-card,.facts .fact { background:#10191e; border-color:#31434b; }.tn-badge { background:#0d2c29; color:#b2f4de; border-color:#306a5f; }
.campaign-banner {
  min-height:300px; padding:34px; margin-bottom:65px; border-radius:24px; overflow:hidden;
  background:#04100e url('/assets/designer-background.jpg') center/cover no-repeat;
  border:1px solid #304347; display:flex; align-items:flex-start;
}
.campaign-banner>div { width:47%; }.campaign-logo { width:145px; height:auto; display:block; margin-bottom:26px; }
.campaign-banner p { font-size:clamp(20px,2.5vw,32px); line-height:1.2; letter-spacing:-.04em; color:#fff; text-shadow:0 2px 16px #000; }.campaign-banner strong { font-weight:600; }

/* Authentication: KV atmosphere at the sides; quiet, opaque surfaces for forms. */
body.auth-page {
  background:radial-gradient(ellipse at 0 85%,#6255d94d,transparent 48%),radial-gradient(ellipse at 80% 100%,#08b95338,transparent 55%),#030808!important;
}
.auth-story h2 span { color:#98ffe1; }.auth-story h2 { font-weight:600; letter-spacing:-.055em; }
.auth-story .mascot-scene { width:min(370px,90%); margin-top:24px; }
.auth-page .auth,.auth-page>main.card { background:#0d1519!important; border-color:#344a52!important; border-radius:24px; }
.auth-page .submit,.auth-page button[type=submit] { border-radius:30px; }
.auth-story .mascot-scene::after { background-image:url('/assets/designer-heart-soft.webp'); width:20%; height:20%; }
.motion-toggle { border-radius:30px; }
@media(max-width:900px) {
  .hero-layout { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:20px; }.hero h1.campaign-title { margin-bottom:22px; }
  .brand-name { display:none; }.auth-story h2 { font-size:38px; }
}
@media(max-width:640px) {
  .brand-anniversary { width:86px; }.topnav-in { gap:4px; padding-inline:12px; }.topnav .brand { gap:0; }.topnav .links a,.topnav .logout { padding:7px 6px; font-size:11px; }
  header.hero { padding-top:28px; }.hero-layout { grid-template-columns:minmax(0,1fr); gap:12px; }.hero h1.campaign-title { margin:15px 0 23px; }.hero-art { width:min(310px,90%); }
  .hero-art::after { right:-3%; }.hero-art figcaption { font-size:8px; }.hero-art .scene-label.note { bottom:13%; }
  .auth-story .campaign-badge { grid-column:1; width:155px; }.auth-story h2 { font-size:28px; }.auth-story .mascot-scene { width:115px; margin:0; }.auth-anniversary { width:132px; margin-bottom:22px; }
  .section-mascot::after { right:0; }.campaign-banner { min-height:245px; padding:22px; margin-bottom:40px; background-position:60% center; }.campaign-banner>div { width:52%; }.campaign-banner p { font-size:20px; }.campaign-logo { width:108px; margin-bottom:22px; }
}

/* Generated additions, matched to the designer's original materials. */
.kv-card-detail {
  display:block; width:88px; height:88px; object-fit:contain;
  margin:0 0 18px; transition:transform .3s ease;
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .card:hover .kv-card-detail { transform:translateY(-4px) rotate(-4deg); }
}
.motion-off .kv-card-detail { transform:none!important; }
.auth-story .mascot-scene::after { background-image:url('/assets/kv-dialogue.webp'); }
.task-page .page-hero .mascot-scene::after { background-image:url('/assets/kv-prompt.webp'); }
@media(max-width:640px) {
  .kv-card-detail { width:64px; height:64px; margin-bottom:14px; }
}

/* Leaderboard: a dedicated mascot scene and KV prize wreaths. */
.leaderboard-page .page-hero {
  grid-template-columns:minmax(0,1fr) 300px; padding:35px 0 25px;
  border-bottom:1px solid var(--border); margin-bottom:26px;
}
.leaderboard-eyebrow { font:11px/1.6 Consolas,monospace; color:#b6a0ff; letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px; }
.leaderboard-page h1 { font-size:clamp(34px,5vw,58px); letter-spacing:-.055em; }
.leaderboard-page h1 em { color:#91fce3; background:none; -webkit-text-fill-color:currentColor; }
.leaderboard-page .page-hero .mascot-img { max-height:310px; }
.leaderboard-page .page-hero .mascot-scene::before { display:none; }
.leaderboard-page .page-hero .mascot-scene::after {
  background-image:url('/assets/kv-result.webp'); width:19%; height:19%; right:-3%; top:20%;
}
.leaderboard-page .page-hero .scene-label.note { bottom:1%; right:0; }
.leaderboard-page .podium { gap:18px; margin:32px 0; }
.leaderboard-page .podium:empty { display:none; }
.leaderboard-page .place { padding:24px 20px; border-radius:20px; }
.leaderboard-page .place::before { height:2px; }
.leaderboard-page .place.p1 { --c:#95f3bc; border-color:#548c72!important; padding-top:35px; padding-bottom:32px; background:linear-gradient(160deg,#163127,#101619 70%)!important; }
.leaderboard-page .place.p2 { --c:#9be9f3; }
.leaderboard-page .place.p3 { --c:#c1afff; }
.rank-award { position:relative; width:96px; height:96px; margin:0 auto 10px; display:grid; place-items:center; }
.rank-laurel { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.rank-number { position:relative; z-index:1; color:#f5faff; font-size:36px; line-height:1; font-weight:700; letter-spacing:-.06em; transform:translateY(-2px); }
.place.p1 .rank-award { width:114px; height:114px; }
.place.p1 .rank-number { font-size:43px; }
.leaderboard-page .place .medal { font:11px/1.6 Consolas,monospace; letter-spacing:.08em; }
.leaderboard-page .place .who { margin-top:12px; font-size:18px; line-height:1.4; }
.leaderboard-page .place .pts { margin-top:16px; font-size:34px; line-height:1.2; }
.leaderboard-page .place .pts small { display:block; margin-top:5px; font-size:12px; }
.leaderboard-page .board { border-radius:16px; }
@media(max-width:720px) {
  .leaderboard-page .page-hero { grid-template-columns:minmax(0,1fr) 145px; gap:12px; padding-top:26px; }
  .leaderboard-page .page-hero .mascot-img { max-height:170px; }
  .leaderboard-page .page-hero .scene-label { display:none; }
  .leaderboard-eyebrow { font-size:9px; margin-bottom:10px; }.leaderboard-page h1 { font-size:32px; }
  .leaderboard-page .podium { grid-template-columns:minmax(0,1fr); gap:12px; margin:22px 0; }
  .leaderboard-page .place,.leaderboard-page .place.p1 { padding:20px; order:0; display:grid; grid-template-columns:76px minmax(0,1fr); column-gap:18px; text-align:left; }
  .rank-award,.place.p1 .rank-award { grid-column:1; grid-row:1/5; width:76px; height:76px; margin:auto 0; }
  .rank-number,.place.p1 .rank-number { font-size:30px; }
  .leaderboard-page .place .medal,.leaderboard-page .place .who,.leaderboard-page .place .tabno,.leaderboard-page .place .pts { grid-column:2; }
  .leaderboard-page .place .who { font-size:16px; margin-top:4px; }
  .leaderboard-page .place .pts { font-size:27px; margin-top:8px; }.leaderboard-page .place .pts small { display:inline; margin-left:6px; }
}
@media(max-width:380px) {
  .leaderboard-page .page-hero { grid-template-columns:minmax(0,1fr) 105px; }.leaderboard-page h1 { font-size:28px; }
  .leaderboard-page .place,.leaderboard-page .place.p1 { grid-template-columns:60px minmax(0,1fr); padding:16px; gap:0 14px; }
  .rank-award,.place.p1 .rank-award { width:60px; height:60px; }
}

.hero p.lead { margin-top:22px; }