/* Duckies Desktop Toys v318 — compatibility-first visual refresh
   Loaded after app.css so the existing feature logic remains untouched. */

:root{
  --v318-radius:18px;
  --v318-radius-sm:12px;
  --v318-shadow:0 18px 55px rgba(0,0,0,.26);
  --v318-panel:color-mix(in srgb,var(--panel2) 92%,#11182b 8%);
  --v318-line:color-mix(in srgb,var(--border2) 72%,transparent);
}

html{scroll-padding-top:calc(var(--nav-h) + 18px)}
body{background:
  radial-gradient(circle at 50% -20%,rgba(68,204,255,.09),transparent 36rem),
  radial-gradient(circle at 85% 20%,rgba(192,102,255,.06),transparent 28rem),
  var(--bg);}

/* Navigation: five clear destinations instead of a wall of links. */
nav{backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);box-shadow:0 10px 35px rgba(0,0,0,.18)}
.nav-v318{gap:.3rem;flex-wrap:nowrap;overflow:visible}
.nav-v318>li{position:relative}
.nav-v318>li>a{font-size:.53rem;padding:.62rem .78rem;border-radius:9px}
.nav-cluster-trigger span{font-size:.72rem;opacity:.55;margin-left:.2rem}
.nav-cluster-menu{position:absolute;top:calc(100% + 10px);left:0;width:470px;display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px;background:color-mix(in srgb,var(--panel2) 96%,transparent);border:1px solid var(--border2);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.42);opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:10000}
.nav-cluster:hover>.nav-cluster-menu,.nav-cluster:focus-within>.nav-cluster-menu,.nav-cluster.is-open>.nav-cluster-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-cluster-menu-small{width:300px;grid-template-columns:1fr}
.nav-cluster-menu-right{left:auto;right:0}
.nav-cluster-menu a{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:4px;padding:11px 12px!important;border:1px solid transparent!important;border-radius:10px!important;text-shadow:none!important;white-space:normal!important}
.nav-cluster-menu a::after{display:none!important}
.nav-cluster-menu a:hover,.nav-cluster-menu a:focus{background:rgba(68,204,255,.07)!important;border-color:rgba(68,204,255,.18)!important;outline:none}
.nav-cluster-menu b{font-family:var(--pixel);font-size:.48rem;letter-spacing:1px;color:var(--text)}
.nav-cluster-menu span{font-family:var(--body);font-size:.76rem;line-height:1.25;color:var(--sub);letter-spacing:0}

/* Section rhythm and hierarchy. */
.sec-wrap{max-width:1180px;padding:5.5rem 3rem}
.sec-eyebrow{letter-spacing:3px;opacity:.9}
.sec-title{letter-spacing:.5px;text-wrap:balance}
.sec-body{max-width:760px;line-height:1.85}
.sec-divider{opacity:.45}
.cat-banner{border-width:1px!important;border-radius:var(--v318-radius)!important;padding:1.15rem 1.3rem!important;box-shadow:0 12px 35px color-mix(in srgb,var(--cat-c) 8%,transparent)!important}
.cat-banner-icon{width:54px!important;height:54px!important;border-radius:14px!important}
.cat-banner-title{font-size:.56rem!important}

/* Catalog cards: more like collectible software boxes, less like bordered panels. */
.freebie-grid{grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:1.25rem}
.freebie-card{border-radius:var(--v318-radius)!important;padding:1.25rem 1.2rem 1.2rem!important;background:linear-gradient(180deg,color-mix(in srgb,var(--card-bg) 95%,#fff 5%),var(--card-bg))!important;border:1px solid color-mix(in srgb,var(--fb,var(--neon-b)) 18%,var(--border))!important;box-shadow:0 8px 26px rgba(0,0,0,.14);transform:translateZ(0)}
.freebie-card::before{background:radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--fb,var(--neon-b)) 13%,transparent),transparent 52%)!important}
.freebie-card:hover,.freebie-card:focus-within{transform:translateY(-5px)!important;box-shadow:0 20px 48px color-mix(in srgb,var(--fb,var(--neon-b)) 13%,rgba(0,0,0,.3))!important;border-color:color-mix(in srgb,var(--fb,var(--neon-b)) 55%,var(--border))!important}
.freebie-card:focus-visible{outline:2px solid var(--neon-b);outline-offset:3px}
.freebie-preview{width:100%;min-height:150px;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.055),transparent 62%);border:1px solid rgba(255,255,255,.035)}
.freebie-icon{filter:drop-shadow(0 12px 18px rgba(0,0,0,.34))}
.freebie-title{margin-top:.95rem!important;letter-spacing:.7px}
.freebie-desc{line-height:1.55!important;opacity:.92}
.freebie-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .5rem}
.freebie-btn{width:100%;min-height:42px;margin-top:auto!important;border-radius:10px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}

/* Hero: stronger focal surface without replacing the existing art/animations. */
#home .sec-wrap,.hero{position:relative}
.hero-title{max-width:850px;margin-inline:auto;text-wrap:balance}
.hero-sub{max-width:650px!important;font-size:1.16rem!important}
.hero-btn,.btn,.freebie-btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.hero-btn:hover,.btn:hover,.freebie-btn:hover{transform:translateY(-2px)}
.hero-os-line{background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:999px;padding:.55rem .9rem;width:max-content;max-width:100%;margin-inline:auto}

/* Sidebar becomes a quieter utility rail so the catalog is the star. */
#sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--panel3) 96%,#111a2b 4%),var(--panel));border-right:1px solid var(--v318-line);box-shadow:12px 0 40px rgba(0,0,0,.12)}
.sb-header{background:linear-gradient(180deg,rgba(68,204,255,.045),transparent)}

/* Admin = Control Deck: cleaner grouping and better scanning. */
.admin-modal{width:min(880px,96vw)!important;border-radius:20px!important;border-color:color-mix(in srgb,var(--neon-y) 45%,var(--border2))!important;box-shadow:0 30px 90px rgba(0,0,0,.55)!important}
.admin-header{padding:1.05rem 1.35rem!important;background:linear-gradient(90deg,rgba(255,229,102,.075),transparent)!important}
.admin-title::after{content:'  ·  CONTROL DECK';color:var(--sub);opacity:.65}
.admin-tabs{gap:.5rem!important;padding-bottom:.7rem;border-bottom:1px solid var(--border)}
.admin-tab{border-radius:9px!important;padding:.65rem .9rem!important}
.admin-tab.active{box-shadow:inset 0 0 18px rgba(255,229,102,.05)}
.admin-setting-row,.scb-card,.dash-card{border-radius:12px}
.admin-setting-row input,.ai-input{border-radius:9px!important;min-height:42px}
.admin-save-btn{border-radius:9px!important;min-height:38px}

/* Forms and FAQ. */
.faq-item,.contact-method,.site-control-box,.scb-card,.dash-card{border-radius:var(--v318-radius-sm)!important}
.faq-item{transition:border-color .18s,background .18s,transform .18s}
.faq-item:hover{transform:translateY(-1px)}
input,textarea,select,button{accent-color:var(--neon-b)}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--neon-b);outline-offset:3px}

/* Reduced motion should genuinely reduce decorative motion. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  #nav-parrot,.stars{animation:none!important}
  .freebie-card:hover{transform:none!important}
}

@media(max-width:1180px){
  .nav-v318>li>a{padding:.6rem .58rem;font-size:.49rem}
  .nav-cluster-menu{width:420px}
}
@media(max-width:900px){.nav-v318{display:none!important}}
@media(max-width:700px){
  .sec-wrap{padding:4rem 1.15rem}
  .freebie-grid{grid-template-columns:1fr!important;gap:1rem}
  .freebie-card{padding:1.1rem!important}
  .hero-os-line{border-radius:14px}
}

[data-theme="light"] body{background:radial-gradient(circle at 50% -20%,rgba(50,120,255,.08),transparent 35rem),var(--bg)}
[data-theme="light"] .nav-cluster-menu{background:rgba(255,255,255,.98);box-shadow:0 18px 50px rgba(24,32,72,.16)}
[data-theme="light"] .freebie-card{box-shadow:0 8px 25px rgba(30,40,80,.08)}