/* =====================================================================
   THÈME « Gestion Maarifa Market » — charte graphique (maquettes 1 et 2)
   Fond blanc / gris très clair, un seul violet, Inter léger, lignes plutôt que cadres.
   Ce fichier est chargé APRÈS app.css : il redéfinit les anciennes variables
   (--y, --bg, --ink…) vers la nouvelle palette. Passer en thème sombre ou changer
   d'accent = modifier les variables ci-dessous, sans toucher aux écrans.
   ===================================================================== */
@font-face{font-family:Inter;font-weight:300;font-style:normal;font-display:swap;src:local("Inter Light"),url(/fonts/inter-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400;font-style:normal;font-display:swap;src:local("Inter"),url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-style:normal;font-display:swap;src:local("Inter Medium"),url(/fonts/inter-latin-500-normal.woff2) format("woff2")}

:root{
  --accent:#5B4BDB;--accent-hover:#4A3BC4;--accent-soft:#F1EFFD;
  --bg:#F7F7FA;--surface:#FFFFFF;--line:#ECECF1;
  --text:#1F2033;--text-2:#6B6D80;--text-3:#A3A5B5;
  --success:#1F9D6B;--success-bg:#E8F6F0;--warning:#B7791F;--warning-bg:#FDF4E1;
  --danger:#D6454D;--danger-bg:#FDECEE;--info:#2F7FE0;--info-bg:#EAF2FD;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --w-light:300;--w-regular:400;--w-medium:500;
  --radius-s:8px;--radius-m:12px;
  --shadow-card:0 1px 2px rgba(31,32,51,.04);--shadow-pop:0 8px 24px rgba(31,32,51,.10);
  --sidebar-w:240px;--sidebar-w-small:72px;--topbar-h:64px;--row-h:52px;--control-h:40px;
  /* anciennes variables de app.css, redirigées vers la charte */
  --y:var(--accent);--y2:var(--accent-soft);--y3:var(--accent-hover);--on-y:#fff;--am:#B7791F;
  --card:var(--surface);--ink:var(--text);--mut:var(--text-2);--ok:var(--success);--ko:var(--danger);
  --wa:var(--accent);--ac:var(--accent);--sh:var(--shadow-card);--k:var(--text);--k2:var(--text);
}
body[data-accent]{--y:var(--accent);--y2:var(--accent-soft);--y3:var(--accent-hover)}
html{font-size:14px}
body{font-family:var(--font);font-weight:var(--w-light);font-size:14px;line-height:22px;background:var(--bg)!important;color:var(--text);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
b,strong{font-weight:var(--w-medium)}
h2{font-size:24px;line-height:32px;font-weight:var(--w-medium);margin:0 0 16px;letter-spacing:0}
h3{font-size:16px;line-height:24px;font-weight:var(--w-medium);margin:0 0 12px}
h4{font-weight:var(--w-medium)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.li{display:block;flex:none}
.note{color:var(--text-2);font-weight:var(--w-light);font-size:12px;line-height:16px}
.pos{color:var(--success)}.neg{color:var(--danger)}
.empty{color:var(--text-2)}

/* ---------- barre latérale ---------- */
#app{min-height:100vh}
#side{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--line);box-shadow:none;transition:width .18s ease}
.brand{display:flex;align-items:center;gap:12px;height:var(--topbar-h);padding:0 16px;border-bottom:1px solid var(--line);margin:0}
.bmark{width:32px;height:32px;border-radius:var(--radius-s);background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:var(--w-medium);flex:none}
.bname{display:flex;flex-direction:column;line-height:1.25;min-width:0}.bname b{font-size:16px;font-weight:var(--w-medium)}.bname small{font-size:12px;color:var(--text-2);font-weight:var(--w-light)}
#menu{padding:8px 12px;gap:4px;flex:1;overflow-y:auto}
.mgt{font-size:12px;line-height:16px;color:var(--text-3);padding:16px 12px 4px;font-weight:var(--w-regular)}
#menu button{height:40px;padding:0 12px;gap:12px;border-radius:var(--radius-s);font-size:13px;font-weight:var(--w-regular);color:var(--text-2);background:transparent;box-shadow:none}
#menu button .ic{width:20px;font-size:0;display:flex;color:inherit}
#menu button:hover{background:var(--bg);color:var(--text)}
#menu button.on{background:var(--accent-soft);color:var(--accent);box-shadow:none;font-weight:var(--w-regular)}
.badge{background:var(--danger);color:#fff;border-radius:999px;padding:0 6px;font-size:11px;line-height:18px;font-weight:var(--w-regular)}
#who{padding:12px;border-top:1px solid var(--line);position:relative;color:var(--text)}
.ucard{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--radius-s);cursor:pointer;color:var(--text-2)}
.ucard:hover{background:var(--bg)}
.ucard .un{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}.ucard .un b{color:var(--text);font-size:13px;font-weight:var(--w-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.ucard .un small{font-size:12px;color:var(--text-2)}
.av{width:32px;height:32px;border-radius:999px;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--w-medium);font-size:13px;flex:none}
.umenu{display:none;position:absolute;left:12px;right:12px;bottom:68px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-pop);padding:4px;z-index:70}
.umenu.on{display:block}
.umenu button{display:flex;align-items:center;gap:12px;width:100%;height:40px;border:0;background:transparent;border-radius:var(--radius-s);padding:0 12px;font-size:13px;color:var(--text);cursor:pointer;margin:0}
.umenu button:hover{background:var(--bg)}
body.side-small #side{width:var(--sidebar-w-small)}
body.side-small .bname,body.side-small .mgt,body.side-small #menu .lb,body.side-small .ucard .un,body.side-small .ucard>.li{display:none}
body.side-small .brand{justify-content:center;padding:0}body.side-small #menu button{justify-content:center;padding:0;position:relative}
body.side-small #menu .badge{position:absolute;top:2px;right:6px}body.side-small .ucard{justify-content:center}
body.side-small .umenu{left:8px;right:auto;width:180px}

/* ---------- barre du haut ---------- */
header#top{height:var(--topbar-h);padding:0 32px;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:none;position:sticky;top:0;z-index:40}
#burger{display:none;background:transparent;color:var(--text);border:0;padding:6px;border-radius:var(--radius-s)}
#collapse,.ib{width:40px;height:40px;border:0;background:transparent;color:var(--text-2);border-radius:var(--radius-s);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:0;margin:0;padding:0;position:relative}
#collapse:hover,.ib:hover{background:var(--bg);color:var(--text)}
#themeBtn+#uchip,#hideBtn+#themeBtn{margin-left:0}
.dot8{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:999px;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
#gsearch{display:flex;align-items:center;gap:8px;height:var(--control-h);flex:0 1 380px;min-width:0;border:1px solid var(--line);border-radius:var(--radius-s);padding:0 12px;background:var(--surface);color:var(--text-3)}
#gsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#gsearch input{border:0!important;outline:0!important;box-shadow:none!important;background:transparent;flex:1;min-width:0;padding:0;font-size:13px;height:100%;border-radius:0}
#st{font-size:12px;color:var(--success);margin-left:auto}
.hb{display:none;background:var(--warning-bg);color:var(--warning);border-radius:999px;font-size:12px;padding:2px 10px}.hb.on{display:inline-block}
#uchip{margin-left:4px;display:inline-flex;cursor:pointer}
/* horloge animée */
#clock{display:flex;align-items:center;gap:10px;margin-left:auto;padding:0 12px 0 6px;height:44px;border-radius:999px;background:var(--bg);flex:none}
#clock .face{width:34px;height:34px;flex:none}
#clock .rim{fill:var(--surface);stroke:var(--line);stroke-width:1.6}
#clock .ticks line{stroke:var(--text-3);stroke-width:1}
#clock #hh,#clock #hm{stroke:var(--text);stroke-width:2;stroke-linecap:round}
#clock #hs{stroke:var(--accent);stroke-width:1.2;stroke-linecap:round;transition:transform .2s}
#clock .pin{fill:var(--accent)}
.ticker{height:22px;overflow:hidden;min-width:150px}
.tk{font-size:13px;font-weight:var(--w-regular);color:var(--text);line-height:22px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tk::first-letter{text-transform:uppercase}
.tk.in{animation:tkin .5s ease both}
@keyframes tkin{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
#clock+.hb,#clock~#hideBtn{margin-left:0}
@media(prefers-reduced-motion:reduce){.tk.in{animation:none}.ring,.orb{animation:none!important}}

/* ---------- contenu ---------- */
main{max-width:1440px;padding:24px 32px 48px}
.crumb{font-size:12px;line-height:16px;color:var(--text-2);margin:0 0 8px}.crumb a{color:var(--text-2)}.crumb a:hover{color:var(--accent);text-decoration:none}.crumb span{margin:0 4px;color:var(--text-3)}
.hello{margin-bottom:24px}.hello h2{font-size:24px;letter-spacing:0;margin:0}.hello>div>span{color:var(--text-2);font-size:14px}
.pill{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--text-2);box-shadow:none}

/* ---------- cartes ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:24px;margin-bottom:24px;box-shadow:var(--shadow-card)}
.grid{gap:24px;margin-bottom:24px}
.kpi small,.kpi b,.kpi span{font-weight:var(--w-light)}
.kpi small{color:var(--text-2);font-size:13px;font-weight:var(--w-regular)}.kpi small:before{display:none}
.kpi b{font-size:28px;line-height:36px;font-weight:var(--w-light);letter-spacing:0}.kpi span{font-size:12px;color:var(--text-2)}
.kc{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line);box-shadow:var(--shadow-card);border-radius:var(--radius-m);padding:24px}
.kc small{color:var(--text-2);text-transform:none;letter-spacing:0;font-weight:var(--w-regular);font-size:13px}.kc b{font-weight:var(--w-light);font-size:28px}.kc span{color:var(--text-2);opacity:1}
.mini div,.pcard,details.prod,.rb{background:var(--surface);border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--radius-s)}
.mini .g b{color:var(--success)}.mini .r b{color:var(--danger)}
.mini div b{font-weight:var(--w-light)}

/* ---------- boutons ---------- */
.btn{height:var(--control-h);padding:0 16px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--text);font-size:13px;font-weight:var(--w-medium);box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;white-space:nowrap;vertical-align:middle}
.btn:hover{background:var(--bg);border-color:var(--line)}
.btn.p,.lgbtn{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none}
.btn.p:hover{background:var(--accent-hover);border-color:var(--accent-hover);filter:none}
.btn.ok{background:var(--surface);color:var(--success);border-color:var(--line);font-weight:var(--w-medium)}
.btn.ok:hover{background:var(--success-bg);border-color:var(--success-bg)}
.btn.d{background:var(--surface);color:var(--danger);border-color:var(--danger)}
.btn.d:hover{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
.btn.s{height:32px;padding:0 12px;font-size:12px}
.btn.dark{background:var(--surface);color:var(--text);border-color:var(--line)}
.btn:disabled,.btn[disabled]{background:var(--bg);color:var(--text-3);border-color:var(--bg);cursor:not-allowed;opacity:1}

/* ---------- champs ---------- */
input,select,textarea{height:var(--control-h);padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-s);font-size:13px;font-weight:var(--w-light);color:var(--text);background:var(--surface);outline:0}
textarea{height:auto;min-height:80px;padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input[type=checkbox],input[type=radio]{height:auto;accent-color:var(--accent)}
label.f{font-size:13px;color:var(--text-2);font-weight:var(--w-regular);gap:4px}
label.chk{font-size:13px}
.sw input:checked+i{background:var(--accent)}
.searchbox,.switchbox{border-radius:var(--radius-s);border:1px solid var(--line);background:var(--surface)}
.searchbox input{border:0;box-shadow:none;height:38px}
.scanbox{height:48px;border:1px solid var(--accent);font-size:18px}

/* ---------- badges d'état (pâles, point + texte) ---------- */
.chip{height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:var(--w-regular);gap:6px}
.chip:before{width:6px;height:6px}
.chip .dot{display:none}
.c-o{background:var(--success-bg);color:var(--success)}.c-a{background:var(--warning-bg);color:var(--warning)}
.c-r{background:var(--danger-bg);color:var(--danger)}.c-b{background:var(--info-bg);color:var(--info)}.c-g{background:var(--bg);color:var(--text-2)}
.catchip{background:var(--bg);color:var(--text-2);font-weight:var(--w-light)}
.warn{background:var(--warning-bg);color:var(--warning);border-radius:var(--radius-s)}
.err{background:var(--danger-bg);color:var(--danger);border-radius:var(--radius-s)}

/* ---------- tableaux : lignes fines, rien d'autre ---------- */
table{border-radius:0;border:0;background:transparent;overflow:visible}
thead th,tr:first-child>th{background:transparent;color:var(--text-2);font-size:12px;line-height:16px;font-weight:var(--w-regular);height:44px;padding:0 12px;border:0;border-bottom:1px solid var(--line);text-transform:none}
td{height:var(--row-h);padding:0 12px;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:14px;font-weight:var(--w-light);color:var(--text);vertical-align:middle}
td:first-child,td:first-child b{font-weight:var(--w-regular)}
td b{font-weight:var(--w-regular);color:var(--text)}
tbody tr:hover td{background:var(--bg)}
tbody tr.sel td{background:var(--accent-soft)}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td{font-variant-numeric:tabular-nums}
tr.tot td{background:transparent!important;border-top:1px solid rgba(31,32,51,.2);border-bottom:0;font-weight:var(--w-medium)}
.card:has(table){padding:12px 24px}
.kb{color:var(--text-2)}.kb:hover{background:var(--bg)}
.kmenu{border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-pop)}
.kmenu button:hover:not(:disabled){background:var(--bg)}
.thumb{border-radius:var(--radius-s)}.pic{background:var(--accent-soft);border-radius:var(--radius-s);font-size:18px}
.tabs2 button,.ivtabs button{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--text-2);font-size:13px;font-weight:var(--w-regular)}
.tabs2 button:hover,.ivtabs button:hover{background:var(--bg)}
.tabs2 button.on,.ivtabs button.on{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent);font-weight:var(--w-regular)}
.pager{color:var(--text-2)}

/* ---------- fenêtres ---------- */
#modal{background:rgba(31,32,51,.4)}
#modal .box{border-radius:var(--radius-m);border-top:0;box-shadow:var(--shadow-pop);padding:24px;width:min(640px,96vw)}
#modal .box.sm{width:min(480px,96vw)}

/* ---------- tableau de bord ---------- */
.kcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-bottom:24px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:24px;box-shadow:var(--shadow-card);min-width:0}
.kcard small{display:block;color:var(--text-2);font-size:13px;line-height:20px;font-weight:var(--w-regular)}
.kcard .v{font-size:28px;line-height:36px;font-weight:var(--w-light);margin:4px 0;font-variant-numeric:tabular-nums}
.kcard .dl{font-size:12px;line-height:16px;color:var(--text-2)}.kcard .dl.up{color:var(--success)}.kcard .dl.dn{color:var(--danger)}
.drow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:24px;margin-bottom:24px}
.drow.h{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.drow>.card,.kcards>.kcard{margin-bottom:0}
.chead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.chead h3{margin:0}
.link{border:0;background:transparent;color:var(--accent);font-size:13px;font-weight:var(--w-medium);cursor:pointer;padding:0}.link:hover{text-decoration:underline}
.seg{display:inline-flex;gap:4px}.seg button{border:0;background:transparent;color:var(--text-2);height:28px;padding:0 10px;border-radius:var(--radius-s);font-size:12px;cursor:pointer}.seg button.on{background:var(--accent-soft);color:var(--accent)}
.lrow{display:flex;align-items:center;gap:12px;height:var(--row-h);border-bottom:1px solid var(--line);font-size:14px}.lrow:last-child{border-bottom:0}
.lrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--w-regular)}.lrow .nm small{display:block;color:var(--text-2);font-weight:var(--w-light);font-size:12px;line-height:16px}
.lrow .am{font-variant-numeric:tabular-nums;text-align:right}
.pbar{height:4px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:6px}.pbar i{display:block;height:100%;border-radius:999px;background:var(--accent)}.pbar i.w{background:#E0A93B}.pbar i.r{background:var(--danger)}
.prow{padding:12px 0;border-bottom:1px solid var(--line)}.prow:last-child{border-bottom:0}.prow .t{display:flex;justify-content:space-between;gap:12px;font-size:14px}.prow .t span{font-weight:var(--w-regular)}.prow .t b{font-weight:var(--w-light);color:var(--text-2);font-variant-numeric:tabular-nums}
.alertbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--accent-soft);border-radius:var(--radius-m);padding:12px 16px;margin-bottom:24px;color:var(--text)}
.alertbar b{color:var(--accent);font-weight:var(--w-medium);margin-right:4px}
.alertbar .btn{height:32px;font-size:12px}
.rem>div{background:var(--bg);border-radius:var(--radius-s)}.rem>div.late{background:var(--danger-bg)}.rem .when{color:var(--text-2)}.rem .late .when{color:var(--danger)}
.pb .bar{height:4px;background:var(--line)}.pb .bar b{background:var(--accent)}
.big{font-weight:var(--w-light)}
.legend i{border-radius:999px}
@media(max-width:1180px){.kcards{grid-template-columns:repeat(2,minmax(0,1fr))}.drow,.drow.h{grid-template-columns:minmax(0,1fr)}header#top{padding:0 16px}}

/* ---------- page de connexion (même animation, couleurs de la charte) ---------- */
.lgbg{background:radial-gradient(circle at 20% 15%,#8E80F0 0,#5B4BDB 40%,#3A2DA3 100%)!important}
.lgcard{border-radius:var(--radius-m);box-shadow:0 30px 70px rgba(31,32,51,.35)}
.lgleft{background:linear-gradient(145deg,#6D5EE6,#4A3BC4)}
.lgtxt h1{font-weight:var(--w-medium);letter-spacing:2px}.lgtxt h4{font-weight:var(--w-regular)}
.orb{background:radial-gradient(circle at 30% 28%,#CFC8FF,#8E80F0 55%,#5B4BDB);box-shadow:inset -10px -14px 28px rgba(31,32,51,.25)}
.lgright h2{font-weight:var(--w-medium);font-size:24px}
.lgf{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);color:var(--text-3)}
.lgf:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.lgf input,.lgf select{height:var(--control-h);padding:0;border:0!important;box-shadow:none!important;background:transparent;font-size:14px}
.lgbtn{height:44px;border-radius:var(--radius-s);padding:0;font-size:14px;font-weight:var(--w-medium)}
.lgbtn:hover{background:var(--accent-hover);filter:none}
.shw{color:var(--accent)}
body.guest header#top{display:none}

/* ---------- impression : en-tête de la boutique aux couleurs de la charte ---------- */
@media print{
  #phead{border:1px solid var(--line);border-bottom:4px solid var(--accent)}
  #phead .band{background:var(--accent-soft)}#phead .sub{background:var(--accent)}
  main h2,.rep-head h2{border-left:6px solid var(--accent)}
  table th{background:var(--accent-soft)!important;color:var(--text)!important;border-color:var(--line)!important}
  #top,#collapse,.crumb{display:none!important}
}

/* ---------- téléphone et tablette ---------- */
@media(max-width:1199px) and (min-width:861px){
  #side{width:var(--sidebar-w-small)}
  .bname,.mgt,#menu .lb,.ucard .un,.ucard>.li{display:none}
  .brand{justify-content:center;padding:0}#menu button{justify-content:center;padding:0;position:relative}#menu .badge{position:absolute;top:2px;right:6px}.ucard{justify-content:center}
  #collapse{display:none}
}
@media(max-width:860px){
  #burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px}
  #collapse,#gsearch,.ticker{display:none}
  #clock{padding:0 6px;background:transparent}
  header#top{padding:0 8px;gap:4px}
  #side{width:280px;max-width:84vw}
  body.menu-open #side{box-shadow:var(--shadow-pop)}
  body.menu-open #scrim{background:rgba(31,32,51,.4)}
  main{padding:16px 16px 32px}
  .kcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.kcard{padding:16px}.kcard .v{font-size:22px;line-height:28px}
  .card{padding:16px;margin-bottom:16px}.card:has(table){padding:8px 12px}
  #menu button,.btn,.ib,.umenu button{min-height:44px}.btn.s{min-height:36px}
  body.side-small #side{width:280px}
}
@media(max-width:420px){.kcards{grid-template-columns:minmax(0,1fr)}}

#uchip .av,.ucard .av{background:var(--accent-soft);color:var(--accent);background-image:none;box-shadow:none}
.mini div,.mini .g,.mini .r,.mini .k{border-left:1px solid var(--line)!important}
td:has(.btn){white-space:normal;max-width:none;overflow:visible}
td:has(.btn) .btn.s{margin:2px 4px 2px 0}
td{max-width:240px}
#hideBtn,#themeBtn{border:0;border-radius:var(--radius-s);width:40px;height:40px}