
:root{--ink:#0c0c0d;--pan:#FBFBFA;--card:#fff;--tx:#141416;--tx2:#6e6e74;--tx3:#a1a1a7;--ln:#ececea;
 --lilac:#ebe8f3;--lilactx:#5c5a68;--sand:#efe9df;--sage:#e4ebe5;--sagetx:#3f5545;--sky:#e6ecf5;--rose:#f5e6e3;--gray:#efefee;--evsub:#66666c;
 --bkbase:#f7f5f1;--bkmix:24%;--bkau:#55555b;--bkchip:rgba(255,255,255,.72);--bktrack:rgba(0,0,0,.08);--bkbar:#0c0c0d;
 --inv:#0c0c0d;--invtx:#fff;--strong:#0c0c0d;--strongln:transparent;--strong2:#222225;--strongck:#4a4a4f;--coral:#f0b4a8;--coraltx:#f0b4a8;
 --sh:0 1px 2px rgba(0,0,0,.03),0 0 0 1px rgba(0,0,0,.025);--h1sub:#a8a8ad;--g1:#eaf1e1;--g1t:#4f7a3a;--g2t:#3d63a8;--g3t:#2f7a4f;--g4t:#6a4fa3;--g5t:#a6503f}
html[data-theme=dark]{--pan:#141416;--card:#1c1c1f;--tx:#f1f1f3;--tx2:#a0a0a8;--tx3:#6f6f77;--ln:#2a2a2e;
 --lilac:#25223a;--lilactx:#b5b1c8;--sand:#2c2820;--sage:#1d2a22;--sagetx:#a9c4b0;--sky:#1d2533;--rose:#33231f;--gray:#26262a;--evsub:#9a9aa2;
 --bkbase:#202023;--bkmix:30%;--bkau:#c9c9cf;--bkchip:rgba(0,0,0,.35);--bktrack:rgba(255,255,255,.12);--bkbar:#f1f1f3;
 --inv:#f1f1f3;--invtx:#0c0c0d;--strong:#232327;--strongln:#2f2f34;--strong2:#2e2e33;--strongck:#55555c;
 --sh:0 0 0 1px rgba(255,255,255,.04);--h1sub:#6f6f77;--g1:#1f2a1a;--g1t:#9cc58a;--g2t:#93b2ec;--g3t:#8fd0a8;--g4t:#c0aef0;--g5t:#eba595}
*{box-sizing:border-box;margin:0}
body{background:var(--ink);font-family:var(--fs),-apple-system,"Segoe UI",sans-serif;color:var(--tx);-webkit-font-smoothing:antialiased;width:1920px;height:1200px;overflow:hidden}
html[data-theme=dark] body{background:#000}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app{display:grid;grid-template-columns:268px 1fr;height:100%}
html.fechado .app{grid-template-columns:84px 1fr}
/* barra lateral */
.side{color:#e9e9ec;padding:36px 18px 22px;display:flex;flex-direction:column;gap:6px}
.logo{display:flex;align-items:flex-start;justify-content:space-between;padding:0 6px 26px 12px}
.logo .lg{height:17px;display:block}
.logo .fv{display:none;height:12px;margin-top:2px}
.logo small{display:block;font-size:11.5px;color:#7d7d84;font-weight:500;margin-top:10px}
.fold{width:30px;height:30px;border-radius:50%;background:#1c1c1f;display:grid;place-items:center;color:#9a9aa1;margin-top:-6px}
.fold svg{width:15px;height:15px}
.sec{font-size:10.5px;letter-spacing:.14em;color:#5f5f66;font-weight:600;padding:16px 12px 8px}
.nav{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:12px;font-size:14px;font-weight:500;color:#c9c9ce;position:relative}
.nav.on{background:#fff;color:#0c0c0d;font-weight:600}
.nav .bd{margin-left:auto;font-size:11px;font-weight:600;background:#26262a;color:#d8d8dc;border-radius:99px;padding:2px 8px}
.nav .dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--coral)}
.grow{flex:1}
.theme{display:grid;grid-template-columns:1fr 1fr;background:#1a1a1d;border-radius:12px;padding:3px;margin:0 2px 6px}
.theme span{display:flex;align-items:center;justify-content:center;gap:7px;height:34px;border-radius:9px;font-size:12.5px;color:#8b8b92;font-weight:500}
.theme span.on{background:#2c2c30;color:#fff}
.theme svg{width:15px;height:15px}
.me{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#161618;margin-top:4px}
.av{width:42px;height:42px;border-radius:50%;background:#efe9df;color:#0c0c0d;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;position:relative}
.av:after{content:"";position:absolute;right:0;bottom:1px;width:10px;height:10px;border-radius:50%;background:#8fc7a0;border:2px solid #161618}
.me b{display:block;font-size:13.5px;color:#fff;font-weight:600}
.me small{font-size:11.5px;color:#83838a}
.me>svg{margin-left:auto;color:#6c6c73;width:16px;height:16px}
/* menu recolhido: só o óculos e os ícones */
html.fechado .side{padding:36px 14px 22px;align-items:center}
html.fechado .logo{flex-direction:column;align-items:center;gap:22px;padding:0 0 22px}
html.fechado .logo .lg,html.fechado .logo small{display:none}
html.fechado .logo .fv{display:block}
html.fechado .fold{margin:0;transform:rotate(180deg)}
html.fechado .sec{font-size:0;padding:14px 0 6px;width:28px;border-top:1px solid #222225;margin-top:6px}
html.fechado .nav{width:48px;height:44px;padding:0;justify-content:center;font-size:0;gap:0}
html.fechado .nav .bd{position:absolute;top:4px;right:2px;margin:0;font-size:9.5px;padding:1px 5px}
html.fechado .nav .dot{position:absolute;top:10px;right:11px;margin:0}
html.fechado .theme{grid-template-columns:1fr;width:48px;margin:0 0 6px}
html.fechado .theme span{font-size:0;gap:0}
html.fechado .me{padding:6px;background:transparent}
html.fechado .me div:not(.av),html.fechado .me>svg{display:none}
