/* LS Studio — couche visuelle commune (DA du panel admin) : palette, verre, profondeur 3D, motion.
   Chargée après les feuilles de chaque page ; ls-fx.js injecte le décor et pilote les animations. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root{
  color-scheme:dark;
  --accent:#e6273c;--accent-soft:rgba(230,39,60,.14);--accent-line:rgba(230,39,60,.32);--accent-glow:rgba(230,39,60,.45);
  --bg:#070709;--panel:rgba(17,17,20,.72);--panel-solid:#121216;--panel-raise:rgba(255,255,255,.035);--panel-hover:rgba(255,255,255,.055);
  --inset:rgba(0,0,0,.28);--line:rgba(255,255,255,.06);--line-strong:rgba(255,255,255,.11);
  --text:#f3f4f6;--text-soft:#c8cad1;--muted:#8a8d96;--dim:#5c5f68;
  --r-lg:16px;--r-md:12px;--r-sm:9px;--ease:cubic-bezier(.16,1,.3,1);--persp:1100px;--px:0;--py:0;
  --shadow-3d:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.6),0 10px 24px -14px rgba(0,0,0,.9),0 26px 60px -30px rgba(0,0,0,.95);
  --shadow-3d-hover:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.6),0 20px 40px -18px rgba(0,0,0,.95),0 40px 80px -34px #000,0 0 34px -14px var(--accent-glow);
  --font:Geist,"Segoe UI Variable Display","Segoe UI",Inter,system-ui,sans-serif;--mono:"Geist Mono","Cascadia Mono",Consolas,monospace;
  --display:Anton,"Arial Narrow",Impact,sans-serif;
  font-family:var(--font);background:var(--bg);color:var(--text);
}
html{background:var(--bg)}
body{background:transparent!important;color:var(--text);font-family:var(--font);position:relative;overflow-x:hidden}
::selection{background:var(--accent);color:#fff}
*{scrollbar-width:thin;scrollbar-color:#ffffff24 transparent}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Décor : halos, terrain de particules (WebGL), sol en perspective, balayage ---------- */
.fx-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 50% 0%,#101014,var(--bg) 62%)}
.fx-backdrop canvas{position:absolute;inset:0;width:100%;height:100%}
.fx-layers{position:absolute;inset:-14%;background:radial-gradient(38% 30% at 18% 76%,rgba(230,39,60,.2),transparent 70%),radial-gradient(34% 28% at 82% 68%,rgba(59,130,246,.13),transparent 70%),radial-gradient(46% 38% at 50% 100%,rgba(245,158,11,.09),transparent 70%),radial-gradient(30% 24% at 62% 22%,rgba(168,85,247,.09),transparent 70%);transform:translate3d(calc(var(--px)*-14px),calc(var(--py)*-10px),0) scale(1.08);animation:fx-drift 26s var(--ease) infinite alternate}
.fx-floor{position:absolute;left:-30%;right:-30%;bottom:-6%;height:58%;transform:perspective(820px) rotateX(66deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);overflow:hidden;opacity:.5}
.fx-floor:before{content:"";position:absolute;inset:-92px 0 0;background-image:linear-gradient(90deg,#e6273c42 0 1px,#e6273c00 3px),linear-gradient(0deg,#ffffff1a 0 1px,#fff0 3px);background-size:92px 92px;animation:fx-floor 6s linear infinite}
.fx-webgl .fx-floor{display:none}
.fx-sweep{position:absolute;inset:-20% -60%;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.035) 50%,transparent 58%);animation:fx-sweep 14s linear infinite}
.fx-grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes fx-drift{from{opacity:.78}to{opacity:1}}
@keyframes fx-floor{to{transform:translate3d(0,92px,0)}}
@keyframes fx-sweep{from{transform:translate(-22%)}to{transform:translate(22%)}}

/* ---------- HUD : barre de progression segmentée + micro-typo mono ---------- */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:repeating-linear-gradient(90deg,#ffffff14 0 calc(12.5% - 3px),transparent 0 12.5%)}
.fx-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--scroll,0));background:var(--accent);box-shadow:0 0 14px var(--accent-glow)}
.fx-hud{position:fixed;right:18px;bottom:14px;z-index:15;pointer-events:none;font:500 9px/1 var(--mono);letter-spacing:2px;color:var(--dim);display:flex;gap:10px;align-items:center}
.fx-hud b{color:var(--accent);font-weight:500}
.fx-hud:before{content:"";width:22px;height:1px;background:var(--line-strong)}
@media(max-width:700px){.fx-hud{display:none}}

/* ---------- Chargement : monogramme, barre de progression, sortie par iris ---------- */
.fx-intro{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:26px;background:radial-gradient(60% 50% at 50% 50%,#16090c,var(--bg) 70%)}
.fx-intro.fx-out{animation:fx-iris .75s var(--ease) both}
.fx-intro svg{width:clamp(120px,16vw,200px);aspect-ratio:116/64;fill:#fff;filter:drop-shadow(0 2px 0 #b8b8c4) drop-shadow(1px 5px 0 #5a5a68) drop-shadow(0 0 44px var(--accent-glow));animation:fx-logo-in .9s var(--ease) both,fx-mark 2.4s ease-in-out .9s infinite alternate}
.fx-intro i{display:block;width:clamp(160px,18vw,230px);height:3px;border-radius:99px;background:#ffffff14;overflow:hidden}
.fx-intro i:before{content:"";display:block;height:100%;background:var(--accent);box-shadow:0 0 14px var(--accent-glow);transform-origin:0 50%;transform:scaleX(.9);animation:fx-load 1.1s var(--ease) both;transition:transform .3s var(--ease)}
.fx-intro.fx-out i:before{transform:scaleX(1)}
.fx-intro span{font:500 10px var(--mono);letter-spacing:4px;color:var(--muted);animation:fx-pulse 1.6s ease-in-out infinite}
@keyframes fx-logo-in{from{opacity:0;transform:perspective(300px) rotateY(-70deg) scale(.7)}}
@keyframes fx-load{from{transform:scaleX(0)}}
@keyframes fx-line{from{transform:scaleX(0)}}
@keyframes fx-iris{from{clip-path:circle(150% at 50% 50%)}to{clip-path:circle(0% at 50% 50%);visibility:hidden}}

/* ---------- Typo cinétique ---------- */
h1{font-family:var(--display)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.005em!important;line-height:.98!important;color:var(--text)}
h1>span:not(.fx-w):not(.fx-accent),h1 .fx-accent .fx-c{background:linear-gradient(100deg,#fff 0%,var(--accent) 38%,#ff7a88 52%,var(--accent) 66%,#fff 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
h1>span:not(.fx-w):not(.fx-accent){animation:fx-chrome 7s ease-in-out infinite!important}
h1 .fx-accent{background:none!important;color:inherit!important;animation:none!important}
h1 .fx-accent .fx-c{animation:fx-char .8s var(--ease) both,fx-chrome 7s ease-in-out infinite;animation-delay:calc(var(--i)*26ms + var(--fx-delay,0ms)),calc(var(--i)*-180ms)}
h1 .fx-w{display:inline-block;white-space:nowrap}
h1 .fx-c{display:inline-block;transform:translateY(105%) rotate(6deg);opacity:0;animation:fx-char .8s var(--ease) both;animation-delay:calc(var(--i)*26ms + var(--fx-delay,0ms))}
@keyframes fx-char{to{transform:none;opacity:1}}
@keyframes fx-chrome{50%{background-position:100% 50%}}
h2{font-family:var(--font);letter-spacing:-.03em;color:var(--text)}
.eyebrow,.card-kicker,.post-tag,.post-badge,.side-top,.art-label,.art-caption,.art-studio,.hero-caption,.hero-foot,.card-meta,.principle-num,.pf-card-head,.rating-label,.visual-top,.visual-bottom{font-family:var(--mono)!important}
.eyebrow{color:var(--muted)}
.eyebrow .dot,.eyebrow .status-dot,.dot,.status-dot{background:var(--accent)!important;box-shadow:0 0 12px var(--accent-glow);animation:fx-pulse 2.4s ease-in-out infinite}
@keyframes fx-pulse{50%{opacity:.35}}

/* ---------- Apparition au défilement ---------- */
.fx-reveal{opacity:0;transform:perspective(900px) translateY(34px) rotateX(7deg);transform-origin:50% 100%}
.fx-reveal.fx-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

/* ---------- Surfaces transparentes : le décor traverse toute la page ---------- */
main,.hero,.section,.catalogue,.posts,.studio,.collections,.faq,footer,.pf-hero,.post-page,.catalog-layout,.catalog-main,.pf-layout{background:transparent!important;background-image:none}
.hero:before,.pf-hero:before,.hero-grid,.pf-banner:not(.is-photo){display:none!important}
.header{background:rgba(9,9,11,.62)!important;backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-bottom:1px solid var(--line)!important}
.header nav a,.header nav button{color:var(--muted)!important;transition:color .2s}
.header nav a:hover,.header nav a.active,.header nav .nav-active,.header nav button:hover{color:#fff!important}
.header nav a.active:after{background:var(--accent)!important;box-shadow:0 0 10px var(--accent-glow)}
.header nav{background:transparent}
.brand svg{fill:#fff;filter:drop-shadow(0 0 14px var(--accent-glow));animation:fx-mark 6s var(--ease) infinite alternate}
@keyframes fx-mark{from{transform:perspective(300px) rotateY(-16deg) rotateX(5deg)}to{transform:perspective(300px) rotateY(16deg) rotateX(-4deg)}}
.brand small{color:var(--muted)!important;font-family:var(--mono)}
footer{border-top:1px solid var(--line);color:var(--muted)!important}
footer *{color:inherit}

/* ---------- Verre / cartes (panel admin) ---------- */
.resource-card,.product-card,.post-card,.pf-card,.pf-post,.pf-comment,.post-body,.comments,.post-form,.search-bar,.sidebar,.empty,.admin-row,.user-menu-panel,dialog,.admin-panel-inner,.contact-banner,.code-window,.questions details,.principles>*,.item-card,.items-panel,.publier-card,.wizard,.wizard-steps,.step-panel,.login-card,.pf-chips>*,.pf-tiles button,.toast{
  background-color:var(--panel)!important;background-image:linear-gradient(168deg,#ffffff0e,#fff0 42%,#00000024)!important;
  border:1px solid var(--line)!important;border-top-color:#ffffff1a!important;border-radius:var(--r-lg)!important;
  box-shadow:var(--shadow-3d);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--text)}
.pf-chips>*,.pf-tiles button,.pf-post,.pf-comment,.admin-row,.search-bar,.toast{border-radius:var(--r-md)!important}
.pf-chips>*{box-shadow:none;color:var(--text-soft)!important}
.resource-card,.product-card,.post-card,.pf-post,.item-card{transform:perspective(var(--persp)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transform-style:preserve-3d;transition:transform .42s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)!important;will-change:transform}
.resource-card:hover,.product-card:hover,.post-card:hover,.pf-post:hover,.item-card:hover{transform:perspective(var(--persp)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px) scale(1.012)!important;box-shadow:var(--shadow-3d-hover)!important;border-color:var(--accent-line)!important}
.resource-card:after,.product-card:after,.post-card:after,.pf-post:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.09),transparent 65%);opacity:0;transition:opacity .3s}
.resource-card:hover:after,.product-card:hover:after,.post-card:hover:after,.pf-post:hover:after{opacity:1}
.post-card,.pf-post,.product-card{position:relative}
.card-body h3,.card-body h3 button,.post-card h3,.pf-post-body h3,.pf-comment h3,.comments h3,.post-body h2{color:var(--text)!important}
.card-footer,.comment,.comments-empty,.post-note,.rating-block,.pf-card-head,.pf-bar,.detail-meta{border-color:var(--line)!important}
.card-action{background:var(--panel-raise)!important;border-top:1px solid var(--line)!important;color:var(--text-soft)!important}
.card-action:hover,.card-action.is-download{background:var(--accent-soft)!important;color:#fff!important}
.card-action.is-download:hover{background:var(--accent)!important}
.image-badge,.pf-thumb em{background:linear-gradient(135deg,var(--accent),#8f1020)!important;color:#fff!important;font-family:var(--mono);box-shadow:0 0 18px -4px var(--accent-glow)}
.preview img,.post-visual img{filter:saturate(.85) contrast(1.05)}

/* ---------- Boutons ---------- */
.button,.post-form button,.admin-cat-form button,.post-actions button,.admin-panel-head button,.toolbar-actions button,.text-button,.user-menu-trigger,#add-post-btn,#admin-gear,.motion,.motion-toggle{
  position:relative;overflow:hidden;background-color:var(--panel-raise)!important;background-image:linear-gradient(170deg,#ffffff12,#0000001f)!important;
  border:1px solid var(--line)!important;border-top-color:#ffffff1f!important;border-radius:var(--r-md)!important;color:var(--text)!important;
  box-shadow:inset 0 1px #ffffff12,0 4px 10px -6px #000000d9;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s,background-color .2s!important}
.button:hover,.post-form button:hover,.toolbar-actions button:hover,.user-menu-trigger:hover,#add-post-btn:hover,#admin-gear:hover{transform:translateY(-2px);border-color:var(--line-strong)!important;background-color:var(--panel-hover)!important}
.button:after{background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.2) 50%,transparent 58%)!important;inset:0 -50%!important;width:auto!important;transform:translate(-80%);transition:transform .6s var(--ease)!important;left:auto}
.button:hover:after{transform:translate(80%);left:auto!important}
.hero .button,.button.dark,.dark,.header-discord,.header-contact,.post-form button[type=submit],#comment-form .button,.discord-link,.community .button,.pf-card .post-form button,.admin-cat-form button,.post-actions button.ok{
  background-color:var(--accent)!important;background-image:linear-gradient(170deg,#ffffff30,#00000030)!important;border-color:#ff5c6e66!important;color:#fff!important;
  box-shadow:inset 0 1px #ffffff40,inset 0 -2px 6px #00000050,0 0 28px -6px var(--accent-glow),0 10px 22px -12px #000}
.hero .button:hover,.button.dark:hover,.header-discord:hover,.header-contact:hover,.discord-link:hover{background-color:#f23a4f!important;box-shadow:inset 0 1px #ffffff50,0 0 44px -4px var(--accent-glow),0 14px 26px -12px #000}
.text-button,.motion,.motion-toggle{background:none!important;border-color:transparent!important;box-shadow:none;color:var(--text-soft)!important}
.outline,.button.outline{background-color:transparent!important;border-color:var(--line-strong)!important}
[aria-pressed=true],.filters .selected,.pf-tiles button[aria-pressed=true],.pf-filters button[aria-pressed=true],.admin-filters button[aria-pressed=true],.toolbar-actions button[aria-pressed=true],#categories button[aria-pressed=true]{
  background:var(--accent-soft)!important;border-color:var(--accent-line)!important;color:#fff!important;box-shadow:inset 0 1px #ffffff17,0 0 20px -10px var(--accent-glow)!important}
.pf-filters button,.filters button,.admin-filters button,#categories button{background-color:var(--panel-raise);border:1px solid var(--line);color:var(--muted);transition:all .2s var(--ease)}
.pf-filters button:hover,.filters button:hover,#categories button:hover{color:#fff;border-color:var(--line-strong)}
#categories small,#categories button[aria-pressed=true] small{background:#ffffff10;color:var(--text-soft)}
.favorite[aria-pressed=true]{background:var(--accent)!important;color:#fff!important}

/* ---------- Champs ---------- */
input,textarea,select,.search-bar input{color:var(--text)!important}
.post-form input,.post-form select,.post-form textarea,#comment-form textarea,.admin-cat-form input,dialog input,dialog textarea,dialog select{background:var(--inset)!important;border:1px solid var(--line)!important;border-radius:var(--r-sm)!important;box-shadow:inset 0 2px 6px #0006}
.post-form input:focus,.post-form textarea:focus,#comment-form textarea:focus,.search-bar:focus-within{border-color:var(--accent-line)!important;box-shadow:0 0 0 3px var(--accent-soft)!important;outline:0}
.search-bar input{background:transparent!important}
::placeholder{color:var(--dim)!important}
select option{background:var(--panel-solid);color:var(--text)}

/* ---------- Bandeau défilant, blocs sombres ---------- */
.ticker,.expertise-strip{background:rgba(230,39,60,.07)!important;border-block:1px solid var(--accent-line)!important;color:var(--text)!important;font-family:var(--mono);backdrop-filter:blur(10px)}
.ticker i,.expertise-strip i{color:var(--accent)!important}
.community,.contact-banner{background:linear-gradient(120deg,rgba(230,39,60,.2),rgba(17,17,20,.7) 55%)!important;border:1px solid var(--accent-line)!important;border-radius:var(--r-lg)!important;margin:0 3% 40px;backdrop-filter:blur(18px)}
.community-mark,.banner-watermark{font-family:var(--display)!important;color:#ffffff07!important}
.sidebar{color:var(--text)}
.side-head,.side-bottom{border-color:var(--line)!important;background:transparent!important}

/* ---------- Héros : monogramme 3D suivi au pointeur ---------- */
.hero{perspective:1400px}
.hero-art{transform-style:preserve-3d;transform:rotateY(calc(var(--px)*16deg)) rotateX(calc(var(--py)*-12deg));transition:transform .5s var(--ease)}
.hero-logo,.chrome-mark{transform:translateZ(90px);filter:drop-shadow(0 2px 0 #b8b8c4) drop-shadow(1px 5px 0 #6a6a78) drop-shadow(2px 9px 0 #3a3a45) drop-shadow(0 30px 34px #000) drop-shadow(0 0 60px var(--accent-glow))!important}
.orbit{border-color:var(--accent-line)!important;box-shadow:inset 0 0 40px -20px var(--accent-glow)!important;transform-style:preserve-3d}
.orbit.second,.orbit-two{border-color:#ffffff1f!important}
.plate,.art-plane{background:linear-gradient(130deg,#ffffff14,#e6273c1f,#ffffff05,#ffffff12)!important;border:1px solid #ffffff1c!important;transform:translateZ(-80px) rotate(37deg)!important;backdrop-filter:blur(4px)}
.art-studio,.art-label,.art-caption{color:var(--muted)!important;transform:translateZ(140px)}
.hero-art:after{background:var(--accent-glow)!important;filter:blur(34px)!important}
.hero-copy>p{color:var(--text-soft)!important}

/* ---------- Profil ---------- */
.pf-hero{border-bottom:1px solid var(--line)!important}
.pf-avatar{border:1px solid #ffffff2e!important;border-radius:var(--r-lg)!important;box-shadow:var(--shadow-3d),0 0 44px -12px var(--accent-glow)!important;transform:perspective(600px) rotateY(calc(var(--px)*14deg)) rotateX(calc(var(--py)*-10deg));transition:transform .4s var(--ease)}
.pf-badge{font-family:var(--mono);background:var(--panel-raise)!important;border-color:var(--line-strong)!important;color:var(--text-soft)!important}
.pf-badge.is-dark{background:var(--accent-soft)!important;border-color:var(--accent-line)!important;color:#ff8b98!important}
.pf-hero:has(.is-photo) .pf-hero-inner>div:last-child{background:var(--panel)!important;border-color:var(--line)!important;border-radius:var(--r-lg)!important}
.pf-tiles strong{font-family:var(--display);font-weight:400;font-size:40px!important;letter-spacing:0!important}
.pf-comment p b,.stars button.on{color:var(--accent)!important}
.post-pending{border-color:var(--accent-line)!important;color:#ff8b98}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  h1 .fx-c{transform:none;opacity:1}.fx-reveal{opacity:1;transform:none}.fx-intro{display:none}
}

/* ---------- Ajustements ---------- */
h1 .fx-w{background:none!important;color:inherit!important;-webkit-text-fill-color:currentColor;animation:none!important}
h1 .fx-accent .fx-w{-webkit-text-fill-color:transparent}
.questions details{padding:0 20px;margin-bottom:10px}
.questions summary{font-size:13.5px!important;color:var(--text)}
.questions details p,.principles p{color:var(--text-soft)!important}
h1{background:none!important;color:var(--text)!important;-webkit-text-fill-color:currentColor}
/* Connexion */
body>.card,main>.card,.card:has(>.btn){background:var(--panel)!important;background-image:linear-gradient(168deg,#ffffff0e,#fff0 42%,#00000024)!important;border:1px solid var(--line)!important;border-top-color:#ffffff1a!important;box-shadow:var(--shadow-3d),0 0 80px -30px var(--accent-glow);backdrop-filter:blur(18px);transform:perspective(900px) rotateY(calc(var(--px)*5deg)) rotateX(calc(var(--py)*-4deg));transition:transform .5s var(--ease)}
.card>.btn{background:var(--accent)!important;background-image:linear-gradient(170deg,#ffffff30,#00000030)!important;border:1px solid #ff5c6e66;border-radius:var(--r-md)!important;color:#fff!important;box-shadow:inset 0 1px #ffffff40,0 0 28px -6px var(--accent-glow),0 10px 22px -12px #000}
.card>.btn:hover{transform:translateY(-2px);background-color:#f23a4f!important}

/* ---------- Icônes : pastilles façon panel admin ---------- */
.category-icon,.menu-icon{display:grid;place-items:center;flex:0 0 30px;width:30px!important;height:30px;border-radius:9px;background:linear-gradient(145deg,#ffffff14,#ffffff05);border:1px solid var(--line);border-top-color:#ffffff24;color:var(--text-soft);font-size:14px!important;box-shadow:inset 0 1px #ffffff12,0 6px 12px -8px #000;transition:all .25s var(--ease)}
.category-icon svg,.menu-icon svg{width:16px;height:16px}
#categories button{gap:12px!important;padding:8px 10px!important}
#categories button:hover .category-icon,.user-menu-panel a:hover .menu-icon,.user-menu-panel button:hover .menu-icon{color:#fff;border-color:var(--line-strong);transform:perspective(200px) rotateY(-14deg) scale(1.06)}
#categories button[aria-pressed=true] .category-icon,.user-menu-panel a:first-child .menu-icon{background:linear-gradient(145deg,#e6273c47,#e6273c0a);border-color:var(--accent-line);border-top-color:#fff3;color:var(--accent);box-shadow:inset 0 1px #ffffff2e,inset 0 -2px 6px #00000080,0 0 22px -6px var(--accent-glow)}
.user-menu-panel{min-width:230px!important;padding:8px!important}
.user-menu-panel a,.user-menu-panel button{gap:12px!important;padding:7px 9px!important;border-radius:var(--r-sm)!important;color:var(--text)!important;background:none!important;border:0!important;box-shadow:none!important}
.user-menu-panel a:hover,.user-menu-panel button:hover{background:var(--panel-hover)!important}
.user-menu-panel .danger,.user-menu-panel .danger .menu-icon{color:#ff8b98!important}
@media(max-width:700px){.category-icon{flex-basis:24px;width:24px!important;height:24px;border-radius:7px}.category-icon svg{width:13px;height:13px}}