/* Layout: aurora fissa · sidebar di vetro scuro con sezioni come Flemme (Overview, Shopify, Ads, Netto, Impostazioni) · topbar a pillola · pannello di vetro chiaro con card smerigliate e grafici animati (dal reel «Admin Dashboard V2»). Pelli: Reel, Oro, Rosa. */
:root{
  --bg0:#041420;--b1:#0e7392;--b2:#1a4a86;--b3:#0b8c84;--b4:#0a3550;
  --side-a:rgba(26,96,128,.48);--side-b:rgba(5,26,42,.62);
  --sink:#e8f5fb;--sink2:rgba(222,240,250,.68);--sink3:rgba(210,232,244,.44);
  --panel-a:rgba(228,242,250,.78);--panel-b:rgba(170,204,226,.46);--modal:rgba(236,246,251,.96);--gap:#e3f0f7;
  --card:rgba(255,255,255,.5);--card-b:rgba(255,255,255,.8);--card-h:rgba(255,255,255,.72);
  --ink:#0b1924;--ink2:#34505f;--ink3:#62808f;--line:rgba(11,25,36,.08);
  --acc:#16a6e3;--acc-d:#0b88c2;--acc-glow:rgba(22,166,227,.45);
  --btn:#08121a;--dark-a:#0b1d2b;--dark-b:#123a52;
  --pos:#0c9a5f;--neg:#d53f4c;--warn:#b97b08;--info:#1f6fd1;--teal:#0e8f86;
  --f:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
body[data-skin="oro"]{--bg0:#120b09;--b1:#6b2f44;--b2:#3d2420;--b3:#9a6a2e;--b4:#24140f;--side-a:rgba(120,70,52,.42);--side-b:rgba(22,12,9,.68);--sink:#fbf1e6;--sink2:rgba(250,236,222,.68);--sink3:rgba(245,228,210,.44);--panel-a:rgba(252,243,235,.82);--panel-b:rgba(226,200,184,.5);--modal:rgba(252,245,239,.97);--gap:#f6ece4;--ink:#241c1d;--ink2:#5a4648;--ink3:#8a7572;--line:rgba(36,28,29,.09);--acc:#b5853f;--acc-d:#93692b;--acc-glow:rgba(181,133,63,.45);--btn:#1d1416;--dark-a:#1e1416;--dark-b:#4a2a2c}
body[data-skin="rosa"]{--bg0:#170a10;--b1:#8e465b;--b2:#4a1f32;--b3:#c99b9b;--b4:#2a1019;--side-a:rgba(142,70,91,.42);--side-b:rgba(28,10,18,.68);--sink:#fdf0f1;--sink2:rgba(252,232,235,.68);--sink3:rgba(248,222,226,.44);--panel-a:rgba(253,242,242,.84);--panel-b:rgba(234,200,205,.52);--modal:rgba(253,245,245,.97);--gap:#f8eaeb;--ink:#292528;--ink2:#5e5357;--ink3:#8c7f83;--line:rgba(41,37,40,.09);--acc:#8e465b;--acc-d:#6b2f44;--acc-glow:rgba(142,70,91,.45);--btn:#241a1e;--dark-a:#2a161e;--dark-b:#5a2a3b}

*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{margin:0;background:var(--bg0);color:var(--ink);font-family:var(--f);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-x:hidden}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,var(--b4),var(--bg0) 70%)}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.85}
.aurora i:nth-child(1){width:58vw;height:58vw;left:-14vw;top:-18vw;background:var(--b1);animation:d1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:50vw;height:50vw;right:-12vw;top:-8vw;background:var(--b2);animation:d2 32s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:46vw;height:46vw;right:6vw;bottom:-22vw;background:var(--b3);opacity:.6;animation:d1 36s ease-in-out infinite alternate-reverse}
.aurora i:nth-child(4){width:30vw;height:30vw;left:18vw;bottom:-10vw;background:var(--b1);opacity:.45;animation:d2 40s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(8vw,6vw) scale(1.1)}}
@keyframes d2{to{transform:translate(-7vw,8vw) scale(.92)}}

.app{position:relative;z-index:1;display:grid;grid-template-columns:236px minmax(0,1fr);gap:16px;max-width:1560px;margin:0 auto}
.side{position:sticky;top:16px;height:calc(100dvh - 32px);display:flex;flex-direction:column;padding:16px 12px 12px;border-radius:24px;background:linear-gradient(180deg,var(--side-a),var(--side-b));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.28);backdrop-filter:blur(26px) saturate(1.35);-webkit-backdrop-filter:blur(26px) saturate(1.35);color:var(--sink);overflow-y:auto;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.brand{display:flex;flex-direction:column;gap:6px;padding:4px 8px 10px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:4px}
.brand img{width:128px;height:auto;display:block}
.brand small{font-size:11px;color:var(--sink2);letter-spacing:.02em}
.grp{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sink3);padding:12px 10px 5px}
.nv{display:flex;align-items:center;gap:10px;width:100%;height:35px;padding:0 10px;border-radius:11px;border:0;background:transparent;color:var(--sink);font-size:13px;font-weight:500;cursor:pointer;text-align:left;transition:background .2s,box-shadow .2s;white-space:nowrap}
.nv svg{opacity:.85;flex:none}
.nv:hover{background:rgba(255,255,255,.08)}
.nv.on{background:linear-gradient(180deg,var(--acc),var(--acc-d));color:#fff;box-shadow:0 8px 22px var(--acc-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.nv em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:grid;place-items:center;background:rgba(255,196,77,.22);color:#ffd88a}
.nv.on em{background:rgba(255,255,255,.26);color:#fff}
.sfoot{margin-top:auto;padding:12px 10px 4px;display:flex;flex-direction:column;gap:8px}
.sfoot .mo{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sink2)}
.sfoot .mo b{color:var(--sink);font-weight:600}
.conn{display:flex;flex-wrap:wrap;gap:6px 10px}
.conn span{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--sink2)}
.dot{width:7px;height:7px;border-radius:50%;background:#2fd18a;box-shadow:0 0 0 3px rgba(47,209,138,.18);flex:none;display:inline-block}

.main{min-width:0;display:flex;flex-direction:column;gap:16px}
.top{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:20px;background:linear-gradient(90deg,var(--side-a),var(--side-b));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);color:var(--sink)}
.search{flex:1;max-width:430px;min-width:0;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--sink2)}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--sink);font:13px var(--f)}
.search input::placeholder{color:var(--sink3)}
.kbd{font-size:10.5px;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.1);color:var(--sink2)}
.tright{margin-left:auto;display:flex;align-items:center;gap:8px}
.cbtn{position:relative;width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--sink);cursor:pointer}
.cbtn:hover{background:rgba(255,255,255,.14)}
.cbtn .pin{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:#ff6b5e;box-shadow:0 0 0 2px var(--b4)}
.menu{display:none}
.skins{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.skins button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.skins button.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.demo{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:rgba(255,196,77,.14);border:1px solid rgba(255,196,77,.35);color:#ffd88a;font-size:11.5px;font-weight:600;white-space:nowrap}
.demo i{width:6px;height:6px;border-radius:50%;background:#ffc44d}
.me{display:flex;align-items:center;gap:9px;padding-left:4px}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc-d));color:#fff;font-size:12px;font-weight:700;flex:none}
.nm b{display:block;font-size:12.5px;font-weight:600;color:var(--sink)}
.nm small{font-size:11px;color:var(--sink2)}

.panel{position:relative;min-width:0;border-radius:28px;padding:26px 26px 28px;background:linear-gradient(140deg,var(--panel-a),var(--panel-b));border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 30px 70px rgba(0,0,0,.28);backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);color:var(--ink)}
.stack{display:flex;flex-direction:column;gap:16px}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.ph h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-.022em;text-wrap:balance}
.ph p{margin:4px 0 0;color:var(--ink3);font-size:13px}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{height:38px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn.dk{background:var(--btn);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.btn.lt{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85);color:var(--ink)}
.btn.sm{height:30px;padding:0 12px;font-size:12px}
.lnk{border:0;background:none;color:var(--ink2);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 0;white-space:nowrap}
.lnk:hover{color:var(--ink)}
.card{background:var(--card);border:1px solid var(--card-b);border-radius:20px;padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 26px rgba(10,30,50,.07);min-width:0}
.card h3{margin:0;font-size:14px;font-weight:700;letter-spacing:-.005em}
.sub{font-size:12px;color:var(--ink3);margin-top:2px}
.ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.g21{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px}
.g12{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:16px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpis.k6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* KPI */
.kpi{position:relative;display:flex;flex-direction:column;width:100%;text-align:left;color:inherit;cursor:pointer;padding:16px 16px 10px;transition:transform .28s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s;overflow:hidden}
.kpi:hover{transform:translateY(-5px);background:var(--card-h);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 34px rgba(10,30,50,.12)}
.kt{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);color:var(--ink2);flex:none}
.kpi .v{font-size:24px;font-weight:750;letter-spacing:-.025em;margin-top:12px;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.kpi .l{font-size:12.5px;font-weight:600;margin-top:4px}
.kpi .s{font-size:11.5px;color:var(--ink3);margin-top:1px}
.spk{height:40px;margin:6px -6px -4px}
.dl{font-size:11px;font-weight:700;padding:3px 7px;border-radius:999px;white-space:nowrap}
.up{color:var(--pos);background:rgba(12,154,95,.12)}
.dn{color:var(--neg);background:rgba(213,63,76,.11)}
.fl{color:var(--ink3);background:rgba(11,25,36,.06)}
.dline{font-size:12px;color:var(--ink3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}

.seg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.85);flex-wrap:wrap}
.seg button{height:28px;padding:0 12px;border-radius:999px;border:0;background:transparent;font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--btn);color:#fff}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.4);color:var(--ink2);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.tab.on{background:var(--btn);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.tab em{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:8px;background:rgba(185,123,8,.15);color:var(--warn)}
.tab.on em{background:rgba(255,255,255,.2);color:#fff}
.sync{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap}
.sync .dot{width:7px;height:7px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;padding:20px}
.live{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pos)}
.live i{width:8px;height:8px;border-radius:50%;background:#19c27a;box-shadow:0 0 0 0 rgba(25,194,122,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(25,194,122,0)}100%{box-shadow:0 0 0 0 rgba(25,194,122,0)}}
.hlab{font-size:13px;font-weight:600;color:var(--ink2);margin-top:14px}
.hval{font-size:46px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.05;margin-top:2px}
.hval.bump{animation:bump .7s}
@keyframes bump{30%{color:var(--pos);transform:scale(1.03)}}
.hmini{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.hmini small{display:block;font-size:11.5px;color:var(--ink3)}
.hmini b{font-size:16px;font-variant-numeric:tabular-nums}
.chh{margin:8px -8px -14px}
.netbox{display:flex;flex-direction:column;text-align:left;border:0;cursor:pointer;border-radius:18px;padding:18px;color:#fff;background:linear-gradient(155deg,var(--dark-a),var(--dark-b));box-shadow:0 18px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .25s;min-width:0;position:relative;overflow:hidden}
.netbox::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--acc-glow),transparent 70%)}
.netbox:hover{transform:translateY(-3px)}
.nk{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.75)}
.netv{font-size:36px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:6px;color:#5ef0a8}
.nspk{height:56px;margin:10px -8px 0}
.netbox .dline{color:rgba(255,255,255,.6)}
.np{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.np small{display:block;font-size:11px;color:rgba(255,255,255,.6)}
.np b{font-size:14px;font-variant-numeric:tabular-nums}
.np b.in{color:#5ef0a8}
.nsplit{margin-top:auto;padding-top:14px}
.nsplit .lbl{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,.7);margin-bottom:6px}
.sbar{display:flex;height:9px;border-radius:9px;overflow:hidden;gap:3px;background:rgba(255,255,255,.08)}
.sbar i{display:block;height:100%;border-radius:9px;animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

/* funnel */
.fn{display:flex;flex-direction:column;gap:4px}
.fr{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:12.5px}
.fr .tr{height:30px;border-radius:9px;background:rgba(255,255,255,.45);overflow:hidden;position:relative}
.fr .tr i{position:absolute;inset:0 auto 0 0;border-radius:9px;animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap}
.fr b{font-variant-numeric:tabular-nums;font-size:13px;min-width:44px;text-align:right}
.fdrop{font-size:11px;color:var(--ink3);padding-left:182px;margin:-1px 0 2px}
.fdrop span{color:var(--neg);font-weight:600}

.hb{display:flex;flex-direction:column;gap:11px}
.hb .rw{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:12.5px}
.hb .tr{height:10px;border-radius:10px;background:rgba(255,255,255,.55);overflow:hidden}
.hb .tr i{display:block;height:100%;border-radius:10px;animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
.hb b{font-variant-numeric:tabular-nums;font-size:12.5px;text-align:right;white-space:nowrap}

/* liste e tabelle */
.scroll{overflow-x:auto;margin:0 -6px;padding:0 6px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-size:10.5px;font-weight:600;color:var(--ink3);text-align:left;padding:7px 10px;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.tbl td{padding:10px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:middle}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:rgba(255,255,255,.42)}
.tbl .r{text-align:right}
.tbl td.r{white-space:nowrap}
.tbl .mut{color:var(--ink3)}
.tbl .t1{font-weight:600}
.tbl .nw{white-space:nowrap}
.pos{color:var(--pos);font-weight:650}
.neg{color:var(--neg)}
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);white-space:nowrap;color:var(--ink2)}
.chip i{width:7px;height:7px;border-radius:50%;flex:none}
.chip.ok{color:var(--pos);background:rgba(12,154,95,.1);border-color:rgba(12,154,95,.18)}
.chip.warn{color:var(--warn);background:rgba(196,134,15,.12);border-color:rgba(196,134,15,.24)}
.chip.bad{color:var(--neg);background:rgba(213,63,76,.1);border-color:rgba(213,63,76,.2)}
.chip.info{color:var(--info);background:rgba(31,111,209,.1);border-color:rgba(31,111,209,.18)}
.chip.teal{color:var(--teal);background:rgba(14,143,134,.11);border-color:rgba(14,143,134,.2)}
.chip.mute{color:var(--ink3)}
.chip.dk{background:var(--btn);color:#fff;border-color:transparent}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fchip{height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.45);font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fchip em{font-style:normal;font-size:11px;color:var(--ink3)}
.fchip.on{background:var(--btn);color:#fff;border-color:transparent}
.fchip.on em{color:rgba(255,255,255,.7)}
.li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li .grow{flex:1;min-width:0}
.li .grow b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .grow small{font-size:12px;color:var(--ink3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
button.li{width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;color:inherit;cursor:pointer;border-radius:10px;font:inherit}
button.li:hover{background:rgba(255,255,255,.42)}
.li.flash{animation:flash 2.2s}
@keyframes flash{0%{background:rgba(25,194,122,.28)}100%{background:transparent}}
.thumb{width:40px;height:40px;border-radius:11px;background:#fff;object-fit:contain;flex:none;border:1px solid rgba(255,255,255,.9)}
.note{font-size:12px;color:var(--ink3);background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.8);border-radius:12px;padding:10px 12px;line-height:1.5}
.note b{color:var(--ink2)}

/* netto */
.wfw{display:flex;align-items:stretch;gap:8px;height:250px;padding-top:22px}
.wfc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.wfa{position:relative;flex:1;width:100%}
.wfa i{position:absolute;left:12%;right:12%;border-radius:8px;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.wfa i.pos{transform-origin:bottom}
.wfa i.ng{transform-origin:top}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.wfa b{position:absolute;left:0;right:0;text-align:center;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.wfl{font-size:11px;color:var(--ink3);text-align:center;line-height:1.25;height:28px}
.wfl .ls{display:none}
.big{font-size:40px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.nth{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.ntl{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.6);font-size:12px;font-weight:600;color:var(--ink);cursor:pointer}
.ntl i{width:10px;height:10px;border-radius:50%}
.ntl.off{background:transparent;border-color:var(--line);color:var(--ink3);text-decoration:line-through}
.ntc{position:relative}
.ntc svg{display:block;width:100%;height:auto}
.ntc .nb{transform-box:fill-box;transform-origin:bottom;animation:rise .7s cubic-bezier(.2,.8,.2,1) both;transition:opacity .15s}
.ntc.hov .nb{opacity:.35}
.ntc.hov .nb.on{opacity:.95}
.nttip{position:absolute;top:2px;transform:translate(-50%,-100%);background:var(--btn);color:#fff;border-radius:12px;padding:8px 11px;font-size:12px;line-height:1.5;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:5;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.nttip.on{opacity:1}
.nttip small{display:block;font-size:10.5px;opacity:.6}

/* creative */
.cres{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cre{padding:0;overflow:hidden;cursor:pointer;text-align:left;color:inherit;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .25s;display:flex;flex-direction:column}
.cre:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 34px rgba(10,30,50,.14)}
.cth{position:relative;aspect-ratio:4/5;max-width:100%;background:linear-gradient(150deg,#e9c9cf,#8e465b);display:grid;place-items:center;color:#fff;overflow:hidden}
.cth img{width:100%;height:100%;object-fit:cover;display:block}
.cth .pl{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;backdrop-filter:blur(6px)}
.cth .cx{position:absolute;left:10px;top:10px;display:flex;gap:5px;flex-wrap:wrap}
.cbd{padding:12px 14px 14px}
.cbd b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbd small{font-size:11.5px;color:var(--ink3)}
.cst{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:10px}
.cst div{font-size:10.5px;color:var(--ink3)}
.cst div b{font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}

/* moduli */
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--ink2);min-width:0}
.f input,.f select{height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.7);padding:0 11px;font:500 13px var(--f);color:var(--ink);outline:0;min-width:0;width:100%}
.f input:focus,.f select:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-glow)}
.f.full{grid-column:1/-1}
.f .hint{font-weight:500;color:var(--warn);font-size:11px}

/* modale e toast */
.mback{position:fixed;inset:0;z-index:60;background:rgba(2,10,16,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));opacity:0;pointer-events:none;transition:opacity .2s}
.mback.on{opacity:1;pointer-events:auto}
.modal{width:min(600px,100%);max-height:calc(100dvh - 40px);overflow:auto;border-radius:24px;padding:22px;background:var(--modal);border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 80px rgba(0,0,0,.35);color:var(--ink);transform:translateY(14px) scale(.98);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.mback.on .modal{transform:none}
.mh{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mh .grow{flex:1;min-width:0}
.mt{font-size:13px;font-weight:600;color:var(--ink2)}
.mv{font-size:28px;font-weight:780;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.why{font-size:13px;color:var(--ink2);line-height:1.55;margin:0 0 14px;max-width:62ch}
.rows .rw{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.rows .rw span{color:var(--ink2)}
.rows .rw span small{display:block;font-size:11px;color:var(--ink3)}
.rows .rw b{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rows .rw.tot{border-top:2px solid rgba(11,25,36,.18);font-weight:700}
.rows .rw.tot b{font-size:18px;color:var(--pos)}
.tl{display:flex;flex-direction:column;margin:6px 0 4px}
.tl div{display:grid;grid-template-columns:22px 1fr auto;gap:10px;font-size:13px;position:relative;padding-bottom:14px}
.tl div::before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:2px;background:rgba(11,25,36,.12)}
.tl div:last-child::before{display:none}
.tl i{width:14px;height:14px;border-radius:50%;border:2px solid rgba(11,25,36,.2);background:#fff;margin-top:2px;position:relative;z-index:1}
.tl .ok i{background:var(--pos);border-color:var(--pos)}
.tl .now i{border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-glow)}
.tl .bad i{background:var(--neg);border-color:var(--neg)}
.tl span{color:var(--ink2)}
.tl .ok span,.tl .now span{color:var(--ink);font-weight:600}
.tl small{color:var(--ink3);font-size:12px;white-space:nowrap}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:70;background:var(--btn);color:#fff;font-size:13px;font-weight:600;padding:11px 16px;border-radius:14px;box-shadow:0 14px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:9px}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast .dot{width:8px;height:8px}
.scrim{display:none}
.apexcharts-tooltip{border-radius:10px!important;box-shadow:0 10px 24px rgba(0,0,0,.25)!important}
.apexcharts-tooltip-title{font-weight:700!important}

@media (max-width:1280px){.kpis.k6{grid-template-columns:repeat(3,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g3>:last-child{grid-column:1/-1}}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.g21,.g12{grid-template-columns:minmax(0,1fr)}.hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(290px,86vw);z-index:50;border-radius:0 24px 24px 0;transform:translateX(-105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);padding-top:calc(16px + env(safe-area-inset-top,0px));padding-left:calc(12px + env(safe-area-inset-left,0px));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,var(--side-a),var(--side-b)),var(--bg0)}
  .side.open{transform:none}
  .scrim{display:block;position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s}
  .scrim.on{opacity:1;pointer-events:auto}
  .menu{display:grid}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .g3>:last-child{grid-column:auto}
  .nm{display:none}
}
@media (max-width:640px){
  body{padding-block:10px}
  .search{display:none}
  .panel{padding:18px 14px 20px;border-radius:22px}
  .ph h1{font-size:23px}
  .kpis,.kpis.k6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{padding:14px;border-radius:17px}
  .hero{padding:16px}
  .hval{font-size:34px}
  .netv{font-size:30px}
  .kpi{padding:13px 13px 8px}
  .kpi .v{font-size:19px;margin-top:10px}
  .kpi .l{font-size:12px}
  .ico{width:28px;height:28px;border-radius:9px}
  .dl{font-size:10px;padding:2px 6px}
  .demo span{display:none}
  .demo{padding:0 9px}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .fr{grid-template-columns:minmax(0,1fr) auto}
  .fr .tr{grid-column:1/-1;grid-row:2}
  .fdrop{padding-left:0}
  .hb .rw{grid-template-columns:minmax(0,1fr) auto}
  .hb .rw .tr{grid-column:1/-1;grid-row:2}
  .wfw{gap:3px;height:220px}
  .wfa b{font-size:9.5px}
  .wfl{font-size:10px;height:16px}
  .wfl .lf{display:none}
  .wfl .ls{display:inline}
  .tab{height:34px;padding:0 11px;font-size:12.5px}
  .big{font-size:32px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* --- app vera --- */
.dot.off{background:#9aa9b3;box-shadow:0 0 0 3px rgba(154,169,179,.18)}
.dot.bad{background:#ff6b5e;box-shadow:0 0 0 3px rgba(255,107,94,.2)}
.nm small a{color:inherit}
.loginwrap{position:relative;z-index:1;min-height:calc(100dvh - 32px);display:grid;place-items:center}
.loginbox{width:min(400px,100%);border-radius:26px;padding:28px;background:linear-gradient(140deg,var(--panel-a),var(--panel-b));border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 30px 70px rgba(0,0,0,.3);backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);color:var(--ink)}
.loginbox .brand small{color:var(--ink3)}
a.btn{text-decoration:none}