/* Premium polish layer. Loaded last on every page; blue and black palette. */
:root{--g1:#3b8bff;--g2:#2f5bff;--g3:#22d3ee;--grad:linear-gradient(120deg,var(--g1),var(--g2) 55%,var(--g3));--glow:0 0 0 1px rgba(59,139,255,.35),0 10px 30px -8px rgba(59,139,255,.45);--ease:cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth}
body{background:radial-gradient(900px 520px at 12% -8%,rgba(59,139,255,.20),transparent 60%),radial-gradient(800px 480px at 95% 8%,rgba(47,91,255,.14),transparent 60%),radial-gradient(900px 600px at 50% 112%,rgba(34,211,238,.10),transparent 60%),var(--page);background-attachment:fixed}
::selection{background:rgba(59,139,255,.45);color:#fff}
*{scrollbar-width:thin;scrollbar-color:#22365a transparent}
::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-thumb{background:#22365a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#34508a}
:focus-visible{outline:2px solid var(--g1);outline-offset:2px}

/* top bar: frosted glass with a gradient hairline, animated wordmark */
.top{background:rgba(8,14,27,.78)!important;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 8px 24px -12px rgba(0,0,0,.6)!important;position:sticky}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad);opacity:.65}
.brand{background:linear-gradient(100deg,#fff 0%,#bcd6ff 30%,var(--g2) 55%,var(--g3) 80%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;letter-spacing:.2px;animation:brandShine 7s ease-in-out infinite;transition:filter .3s}
.brand:hover{filter:drop-shadow(0 0 10px rgba(59,139,255,.6))}
@keyframes brandShine{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.avbtn{transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.avbtn:hover{transform:scale(1.07);box-shadow:var(--glow)}

/* list headers: gradient accent edge + soft glow */
.head{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(59,139,255,.08),transparent 70%),var(--card)!important;box-shadow:0 10px 26px -14px rgba(0,0,0,.7)!important}
.head::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.head h2{letter-spacing:.2px}
.col:hover .head{border-color:rgba(59,139,255,.35)}
.col.text .items{border:1px solid rgba(255,255,255,.06);border-top:0}

/* banners: lift, light sweep, cursor spotlight, soft vignette */
.item,.card{transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s}
.item::before,.card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.35))}
.item::after,.card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 60%)}
.item:hover::after,.card:hover::after{opacity:1}
.item:hover,.card:hover{transform:translateY(-4px) scale(1.025)!important;box-shadow:0 18px 34px -10px rgba(0,0,0,.75),0 0 0 1px rgba(59,139,255,.55)!important;z-index:4}
.item img.bg,.card img.bg{transition:transform .7s var(--ease)}
.item:hover img.bg,.card:hover img.bg{transform:scale(1.07)}
.item .tools,.item .rank,.card .rank,.card .ov{z-index:3}
.item img.logo{transition:transform .4s var(--ease)}.item:hover img.logo{transform:translateY(-50%) scale(1.05)}

/* rank badges: pill, with gold / silver / bronze for the top three */
.rank{left:8px!important;top:8px!important;min-width:26px;text-align:center;padding:2px 9px!important;border-radius:999px;font-weight:700;letter-spacing:.3px;background:rgba(12,16,24,.72)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18)}
.rank[data-n="1"]{background:linear-gradient(135deg,#ffe58a,#e5a92a)!important;color:#3a2600!important;border-color:#fff3b8;box-shadow:0 0 14px rgba(255,200,70,.65)}
.rank[data-n="2"]{background:linear-gradient(135deg,#f3f6fb,#aab4c4)!important;color:#1f2733!important;border-color:#fff;box-shadow:0 0 12px rgba(200,210,230,.5)}
.rank[data-n="3"]{background:linear-gradient(135deg,#f0b07a,#b4692f)!important;color:#2b1500!important;border-color:#ffd3ae;box-shadow:0 0 12px rgba(220,140,80,.5)}
.item:has(.rank[data-n="1"]){box-shadow:0 0 0 1px rgba(255,205,80,.45),0 8px 24px -10px rgba(255,190,60,.45)}

/* text lists and recommendations */
.line{transition:transform .2s var(--ease),background-color .2s}
.line:hover{background:linear-gradient(90deg,rgba(59,139,255,.18),transparent)!important}
#recs{position:relative;border:1px solid rgba(255,255,255,.06);box-shadow:0 18px 40px -22px rgba(0,0,0,.8)!important;overflow:hidden}
#recs::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.rec{border:1px solid transparent;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s!important}
.rec:hover{border-color:rgba(59,139,255,.45);box-shadow:0 18px 34px -12px rgba(0,0,0,.75)!important}
.rimg{box-shadow:0 8px 18px -10px rgba(0,0,0,.8)}

/* buttons and inputs */
.btn,.add,button.btn{transition:transform .2s var(--ease),box-shadow .25s,border-color .25s,background-color .25s}
.btn:hover{transform:translateY(-2px);border-color:var(--g1);box-shadow:var(--glow);background:linear-gradient(180deg,rgba(59,139,255,.14),transparent),var(--card)}
.btn:active{transform:translateY(0) scale(.97)}
#addlist,#addtext{border-style:dashed}
.add:focus,dialog input[type=text]:focus{box-shadow:0 0 0 3px rgba(59,139,255,.28)}

/* menus, dialogs, detail view: soft entrance */
.menu{background:rgba(10,17,32,.94)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.1)!important;box-shadow:0 24px 50px -16px rgba(0,0,0,.8)!important;animation:pop .22s var(--ease);transform-origin:top right}
.menu button:hover,.menu a:hover{background:rgba(59,139,255,.18)!important}
dialog[open]{animation:pop .26s var(--ease);box-shadow:0 30px 70px -20px rgba(0,0,0,.85);border-color:rgba(255,255,255,.12)}
dialog::backdrop{background:rgba(2,5,12,.7);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fade .25s ease}
#modal:not([hidden]){animation:fade .25s ease}
#modal:not([hidden]) #mbody{animation:pop .32s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* first-load entrance (class "boot" is removed after ~2s so re-renders and drags don't replay it) */
.boot .col,.boot .panel,.boot #recs,.boot .profile{animation:rise .7s var(--ease) both}
.boot .col:nth-child(2){animation-delay:.07s}.boot .col:nth-child(3){animation-delay:.14s}.boot .col:nth-child(4){animation-delay:.21s}.boot .col:nth-child(5){animation-delay:.28s}.boot .col:nth-child(6){animation-delay:.35s}.boot .col:nth-child(n+7){animation-delay:.42s}
.boot #recs{animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){.brand,.menu,dialog[open],#modal:not([hidden]) #mbody,.boot .col,.boot .panel,.boot #recs,.boot .profile{animation:none!important}.item img.bg,.card img.bg{transition:none}.item:hover,.card:hover{transform:none!important}}
.item img.logo,.item .gen.tx{z-index:2}

/* dropdowns ("Add to…", settings): match the dark rounded look */
select,.rec select{appearance:none;-webkit-appearance:none;width:100%;padding:11px 40px 11px 14px;border:1px solid var(--line);border-radius:12px;color:var(--ink);font:500 14px Inter,sans-serif;cursor:pointer;
  background:linear-gradient(180deg,rgba(59,139,255,.10),transparent),var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fb4ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center;
  transition:border-color .25s,box-shadow .25s,transform .2s var(--ease)}
select:hover{border-color:var(--g1);box-shadow:var(--glow);transform:translateY(-1px)}
select:focus{outline:none;border-color:var(--g1);box-shadow:0 0 0 3px rgba(59,139,255,.28)}
select option{background:#0e1728;color:var(--ink)}