/* ─────────────────────────────────────────────────────────────
   HIDROTEKNIKA — tema premium nero + rosso
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#070707;
  --card:rgba(255,255,255,.04);
  --card-line:rgba(255,255,255,.08);
  --hair:rgba(255,255,255,.05);
  --txt:#F2F4F6;
  --txt2:#C9CCCF;
  --muted:#6E6E6E;
  --red:#E6332A;
  --red-l:#F26D63;
  --green:#9FD46A;
  --amber:#F2A23B;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
html,body{ margin:0; height:100%; }
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
#app{ max-width:520px; margin:0 auto; min-height:100vh; position:relative; }
.screen{ min-height:100vh; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top); }
button{ font-family:inherit; cursor:pointer; }
.hide{ display:none !important; }

/* glow di sfondo */
.glow{ position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(230,51,41,.15) 0%, rgba(7,7,7,0) 66%); }

/* ── lingua ── */
.lang{ display:inline-flex; border:1px solid rgba(255,255,255,.14); border-radius:20px; overflow:hidden; }
.lang span{ font-size:11px; letter-spacing:1px; padding:5px 10px; color:var(--muted); }
.lang span.on{ background:rgba(230,51,41,.9); color:#fff; }

/* ── SPLASH ── */
.splash{ align-items:center; justify-content:flex-start; text-align:center; position:relative; z-index:1; }
.splash .lang{ position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px; }
.logo-wrap{ position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center; margin-top:24vh; }
.halo{ position:absolute; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle, rgba(230,51,41,.42) 0%, rgba(230,51,41,0) 70%);
  animation:glow 4s ease-in-out infinite; }
.ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(230,51,41,.45); animation:ring 3.6s ease-out infinite; }
.logo-h{ position:relative; animation:bob 4.5s ease-in-out infinite; }
.brand{ margin-top:48px; font-size:21px; font-weight:400; letter-spacing:5px; padding-left:5px; }
.brand-sub{ display:flex; align-items:center; gap:12px; margin:18px 0; }
.brand-sub .ln{ width:26px; height:1px; background:rgba(255,255,255,.2); }
.brand-sub .tld{ font-size:12px; letter-spacing:5px; color:var(--red); }
.spacer{ flex:1; }
.btn-enter{ margin-bottom:20px; padding:13px 0; width:224px; border-radius:30px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#EEF1F4;
  font-size:15px; letter-spacing:1px; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-enter:active{ transform:scale(.98); }
.note{ margin:0 0 32px; font-size:10px; letter-spacing:1.5px; color:#565656; }

/* ── AUTH ── */
.auth{ align-items:center; position:relative; z-index:1; }
.auth-top{ margin-top:44px; display:flex; align-items:center; gap:8px; }
.auth-top span{ font-size:12px; letter-spacing:3px; color:var(--txt2); }
.faceid-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.faceid-circle{ position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center; }
.faceid-circle .halo{ width:150px; height:150px; animation:glow 2.6s ease-in-out infinite; }
.faceid-ico{ font-size:84px; color:var(--red-l); position:relative; animation:glow 2.6s ease-in-out infinite; }
.faceid-t{ margin:30px 0 0; font-size:18px; }
.faceid-h{ margin:8px 0 0; font-size:12px; color:var(--muted); }
.btn-pwd{ margin-bottom:36px; padding:10px 0; width:200px; border-radius:30px;
  border:1px solid rgba(255,255,255,.14); background:transparent; color:var(--txt2);
  font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px; }

/* ── PIN ── */
.pin{ align-items:center; }
.pin-title{ margin:30px 0 0; font-size:16px; }
.pin-title.err{ color:var(--red-l); }
.pwd-box{ position:relative; width:230px; margin:24px 0 6px; }
.pwd-input{ width:100%; height:48px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:#F2F4F6; font-size:18px; letter-spacing:2px;
  text-align:center; padding:0 42px 0 16px; outline:none; box-sizing:border-box; }
.pwd-input::placeholder{ color:#4F5762; letter-spacing:4px; -webkit-text-security:none; }
.pwd-input:focus{ border-color:rgba(230,51,41,.6); }
.pwd-mask{ -webkit-text-security:disc; }
.pwd-eye{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#7A7A7A; font-size:20px; cursor:pointer; padding:6px; }
.btn-login{ margin-top:14px; padding:12px 0; width:230px; border-radius:30px;
  border:1px solid rgba(255,255,255,.16); background:rgba(230,51,41,.9); color:#fff;
  font-size:15px; letter-spacing:1px; display:flex; align-items:center; justify-content:center; gap:9px; }
.btn-login:active{ transform:scale(.98); }
.dots{ display:flex; gap:18px; margin:24px 0 8px; }
.dot{ width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); transition:background .12s ease; }
.dot.on{ background:var(--red-l); border-color:var(--red-l); }
.keypad{ margin-top:18px; display:grid; grid-template-columns:repeat(3,70px); gap:20px; justify-content:center; }
.key{ width:70px; height:70px; border-radius:50%; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09); display:flex; align-items:center; justify-content:center;
  font-size:27px; font-weight:400; color:#EEF1F4; cursor:pointer;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.key:active{ background:rgba(255,255,255,.14); }
.key.fn{ background:transparent; border:none; color:var(--muted); }
.key.fn .ti-face-id{ color:var(--red-l); }
.key.ok{ background:rgba(230,51,41,.92); border:none; color:#fff; }
.key.ok:active{ background:rgba(230,51,41,1); }

/* ── HEADER comune schermate ── */
.hdr{ padding:20px 16px 10px; display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.hdr .back{ font-size:22px; color:var(--txt2); }
.hdr .ttl{ flex:1; font-size:18px; font-weight:400; }
.hdr .act{ font-size:20px; color:var(--txt2); }
.hdr .back, .hdr .act{ padding:6px; margin:-6px 0; cursor:pointer; }
.hdr .back:active, .hdr .act:active{ opacity:.55; }
.hello{ font-size:10px; letter-spacing:2px; color:var(--muted); }
.hello + .ttl-big{ font-size:20px; }

/* ── MENU lista ── */
.list{ padding:6px 14px 24px; display:flex; flex-direction:column; gap:11px; position:relative; z-index:1; }
/* mini card del menu (4 in fila) */
.cards{ padding:16px 12px calc(20px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(4,1fr); gap:9px; position:relative; z-index:2; }
.mcard{ background:var(--card); border:1px solid var(--card-line); border-radius:15px; padding:12px 4px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.mcard:active{ background:rgba(255,255,255,.08); transform:scale(.97); }
.mcard i{ font-size:22px; color:var(--red-l); }
.mt{ margin:0; font-size:10px; color:var(--txt2); text-align:center; }
/* HOME stile Apple */
.menu-bg{ background:linear-gradient(180deg,#0c0809 0%,#070707 52%); }
.aurora{ position:absolute; bottom:-80px; left:50%; transform:translateX(-50%); width:130%; height:260px; border-radius:50%; background:radial-gradient(ellipse, rgba(230,51,41,.20) 0%, rgba(7,7,7,0) 68%); pointer-events:none; z-index:0; }
.greet{ padding:24px 22px 6px; position:relative; z-index:1; }
.greet-hi{ margin:0; font-size:26px; font-weight:300; color:#F4F6F8; }
.greet-date{ margin:6px 0 0; font-size:13px; color:#7A7A7A; }
.hero{ margin:14px 18px; padding:18px; border-radius:20px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); position:relative; z-index:1; cursor:pointer; }
.hero:active{ background:rgba(255,255,255,.08); }
.hero-lab{ margin:0; font-size:10px; letter-spacing:1.5px; color:#8A8A8A; }
.hero-val{ margin:7px 0 0; font-size:31px; font-weight:400; color:#F4F6F8; }
.hero-chart{ display:flex; align-items:flex-end; gap:3px; height:28px; margin-top:12px; }
.hero-chart .hbar{ flex:1; border-radius:2px; background:rgba(242,109,99,.32); }
.hero-chart .hbar.hot{ background:var(--red); }
.hero-cn{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; }
.hero-cn-l{ font-size:11px; letter-spacing:1px; color:#8A8A8A; }
.hero-cn-v{ font-size:16px; color:var(--red-l); }
.cards2{ padding:8px 18px calc(22px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1fr; gap:12px; position:relative; z-index:1; }
.ncard{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:16px 14px; cursor:pointer; }
.ncard:active{ background:rgba(255,255,255,.09); transform:scale(.98); }
.ncard i{ font-size:24px; color:var(--red-l); }
.ncard-t{ margin:12px 0 0; font-size:15px; color:#EFF1F3; }
/* personaggio animato */
.charwrap{ position:relative; height:188px; display:flex; align-items:center; justify-content:center; }
.halo2{ position:absolute; top:50%; left:50%; width:210px; height:210px; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(230,51,41,.32) 0%, rgba(7,7,7,0) 70%); animation:hk-halo2 4s ease-in-out infinite; }
.ring2{ position:absolute; top:50%; left:50%; width:170px; height:170px; border-radius:50%; transform:translate(-50%,-50%); border:1px solid rgba(230,51,41,.4); animation:hk-ring2 3.6s ease-out infinite; }
.charfloat{ position:relative; animation:hk-float2 4.5s ease-in-out infinite; }
.charimg{ width:166px; height:166px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.12); display:block; }
.charph{ width:166px; height:166px; border-radius:50%; background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.18); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
@keyframes hk-float2{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes hk-halo2{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1) } 50%{ opacity:.95; transform:translate(-50%,-50%) scale(1.12) } }
@keyframes hk-ring2{ 0%{ transform:translate(-50%,-50%) scale(.7); opacity:.5 } 100%{ transform:translate(-50%,-50%) scale(1.45); opacity:0 } }
.row{ background:var(--card); border:1px solid var(--card-line); border-radius:16px;
  padding:15px 14px; display:flex; align-items:center; gap:12px; }
.row:active{ background:rgba(255,255,255,.07); }
.row .ic{ width:38px; height:38px; border-radius:11px; background:rgba(230,51,41,.14);
  display:flex; align-items:center; justify-content:center; color:var(--red-l); font-size:20px; }
.row .tx{ flex:1; min-width:0; }
.row .tx p{ margin:0; }
.row .tx .t{ font-size:14px; color:#EFF1F3; }
.row .tx .s{ font-size:10px; color:var(--muted); margin-top:2px; }
.row .chev{ font-size:16px; color:#565656; }

/* ── segmenti / chip ── */
.seg{ padding:4px 16px; display:flex; gap:6px; position:relative; z-index:1; }
.seg span{ flex:1; text-align:center; font-size:11px; padding:6px 0; border-radius:14px;
  color:var(--muted); border:1px solid var(--card-line); }
.seg span.on{ background:rgba(230,51,41,.9); color:#fff; border-color:transparent; }
.chips{ padding:0 16px 8px; display:flex; gap:6px; position:relative; z-index:1; }
.chips span{ font-size:11px; padding:5px 12px; border-radius:14px; color:var(--muted); border:1px solid var(--card-line); }
.chips span.on{ background:rgba(230,51,41,.9); color:#fff; border-color:transparent; }
.period{ padding:12px 16px 4px; display:flex; align-items:center; justify-content:center; gap:14px; color:var(--txt2); font-size:13px; position:relative; z-index:1; }
.period .ti{ color:var(--muted); font-size:16px; }
.navbtn{ cursor:pointer; padding:6px; }
.navbtn:active{ opacity:.5; }
.period-label{ cursor:pointer; padding:6px 12px; border-radius:12px; display:inline-flex; align-items:center; gap:6px; min-width:120px; justify-content:center; }
.period-label:active{ background:rgba(255,255,255,.07); }
.period-label .ti{ font-size:13px; opacity:.6; }

/* ── cruscotto ── */
.kpi{ margin:6px 16px; background:var(--card); border:1px solid var(--card-line); border-radius:16px; padding:16px; position:relative; z-index:1; }
.kpi .lab{ margin:0; font-size:11px; color:var(--muted); }
.kpi .big{ margin:4px 0 0; font-size:26px; font-weight:400; }
.kpi .delta{ margin:6px 0 0; font-size:11px; }
.delta.up{ color:var(--red-l); } .delta.down{ color:var(--green); }
.bars{ padding:6px 16px; display:flex; flex-direction:column; gap:11px; position:relative; z-index:1; }
.bar .top{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
.bar .top .k{ color:var(--txt2); } .bar .top .v{ color:#EFF1F3; }
.bar .track{ height:6px; border-radius:3px; background:rgba(255,255,255,.07); }
.bar .fill{ height:6px; border-radius:3px; background:var(--red); }
.chart{ margin-top:auto; padding:10px 16px 18px; display:flex; align-items:flex-end; gap:5px; height:80px; position:relative; z-index:1; }
.chart .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.chart .cb{ width:100%; border-radius:3px; background:rgba(242,109,99,.4); }
.chart .cb.hot{ background:var(--red); }
.chart .cl{ font-size:8px; color:var(--muted); }
.subbox{ margin:10px 16px 16px; padding:12px 14px; background:rgba(255,255,255,.03); border:1px solid var(--card-line); border-radius:14px; position:relative; z-index:1; }
.subbox .h{ margin:0 0 8px; font-size:10px; letter-spacing:1px; color:var(--muted); }
.subbox .ln{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; }
.subbox .ln .k{ color:var(--txt2); } .subbox .ln .v{ color:#EFF1F3; }

/* ── elenco movimenti ── */
.feed{ padding:2px 14px 24px; position:relative; z-index:1; }
.feed .gl{ margin:14px 4px 6px; font-size:10px; letter-spacing:1px; color:var(--muted); }
.mv{ display:flex; align-items:center; gap:11px; padding:11px 8px; border-bottom:1px solid var(--hair); }
.mv .mic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.mv .mic.in{ background:rgba(63,153,34,.16); color:var(--green); }
.mv .mic.out{ background:rgba(230,51,41,.16); color:var(--red-l); }
.mv .md{ flex:1; min-width:0; }
.mv .md p{ margin:0; } .mv .md .d{ font-size:13px; color:#EFF1F3; } .mv .md .m{ font-size:10px; color:var(--muted); margin-top:1px; }
.mv .amt{ font-size:13px; } .mv .amt.in{ color:var(--green); } .mv .amt.out{ color:var(--red-l); }

/* ── prodotti ── */
.search{ margin:4px 16px 8px; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.05); border:1px solid var(--card-line); border-radius:12px; padding:8px 11px; position:relative; z-index:1; }
.search .ti{ font-size:15px; color:var(--muted); } .search span{ font-size:12px; color:var(--muted); }
.prod .mic{ background:rgba(255,255,255,.05); color:var(--txt2); }
.qty{ font-size:14px; } .qty.ok{ color:var(--green); } .qty.low{ color:var(--amber); } .qty.zero{ color:var(--red-l); }

/* ── agenti ── */
.agent{ background:var(--card); border:1px solid var(--card-line); border-radius:14px; padding:12px; display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.avatar{ width:38px; height:38px; border-radius:50%; background:rgba(230,51,41,.16); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--red-l); }
.agent .ai{ flex:1; } .agent .ai .n{ margin:0; font-size:13px; color:#EFF1F3; } .agent .ai .s{ margin:2px 0 0; font-size:10px; color:var(--muted); }
.agent .ar{ text-align:right; } .agent .ar .c{ margin:0; font-size:13px; color:var(--green); } .agent .ar .cl{ margin:1px 0 0; font-size:9px; color:var(--muted); }

/* ── footer riga ── */
.foot{ margin-top:auto; padding:12px 18px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--card-line); display:flex; justify-content:space-between; font-size:11px; position:relative; z-index:1; }
.foot .l{ color:var(--muted); } .foot .r{ color:var(--txt2); }

/* ── caricamento ── */
.loading{ flex:1; display:flex; align-items:center; justify-content:center; min-height:200px; position:relative; z-index:1; }
.spinner{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.12); border-top-color:var(--red); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── animazioni ── */
@keyframes glow{ 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:.9; transform:scale(1.08);} }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
@keyframes ring{ 0%{ transform:scale(.55); opacity:.5;} 100%{ transform:scale(2); opacity:0;} }
.fade{ animation:fade .35s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }