:root{
    --ink:#131C2E;
    --navy:#1B2A45;
    --bg:#EFF2F5;
    --card:#FFFFFF;
    --border:#DAE0E7;
    --amber:#E79A3A;
    --amber-dark:#C97D22;
    --green:#2A7D5F;
    --green-bg:#E7F3EE;
    --red:#B4432F;
    --red-bg:#FBEAE6;
    --muted:#5B6472;
    --mono: 'IBM Plex Mono', monospace;
    --display: 'Space Grotesk', sans-serif;
    --body: 'Inter', sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--body);
    padding:24px 16px 60px;
  }
  .wrap{max-width:980px;margin:0 auto;}
  header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
    border-bottom:2px solid var(--navy);
    padding-bottom:14px;
  }
  header h1{
    font-family:var(--display);
    font-size:22px;
    font-weight:700;
    margin:0;
    letter-spacing:-0.01em;
  }
  header .tag{
    font-family:var(--mono);
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  header .version{
    font-family:var(--mono);
    font-size:11px;
    color:#fff;
    background:var(--navy);
    padding:2px 8px;
    border-radius:4px;
    letter-spacing:.02em;
  }
  .fuelbar{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .fuelbar label{
    font-size:12px;font-weight:600;color:var(--muted);
  }
  .fuelbar select{
    font-family:var(--body);
    font-weight:600;
    font-size:13px;
    padding:8px 12px;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--card);
    color:var(--navy);
  }
  .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }
  @media (max-width:760px){ .grid{grid-template-columns:1fr;} }
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:18px 18px 20px;
  }
  .card-blue{
    background:#EAF3FA;
    border-color:#C9DFF0;
  }
  .card h2{
    font-family:var(--display);
    font-size:15px;
    margin:0 0 4px;
    color:var(--navy);
  }
  .card .sub{
    font-size:12px;
    color:var(--muted);
    margin:0 0 14px;
  }
  .field{margin-bottom:12px;}
  .field label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    margin-bottom:4px;
  }
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  input[type=text], input[type=number], input[type=password], select{
    width:100%;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:6px;
    font-family:var(--mono);
    font-size:13px;
    background:#FCFDFE;
    color:var(--ink);
  }
  select{font-family:var(--body);}
  input:focus, select:focus{
    outline:2px solid var(--amber);
    outline-offset:1px;
    border-color:var(--amber);
  }
  .unit{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:4px;}
  .checkline{
    display:flex;align-items:center;gap:8px;
    font-size:13px;margin:10px 0 4px;
  }
  .checkline input{width:auto;}
  .plan-block{border:1px solid var(--border);border-top:none;padding:12px;margin-bottom:6px;border-radius:0 0 8px 8px;}
  .planhead{
    font-family:var(--display);font-weight:700;font-size:13.5px;
    padding:9px 12px;border-radius:8px 8px 0 0;margin-top:16px;
    color:#fff;letter-spacing:.01em;
  }
  .planhead span{font-family:var(--body);font-weight:500;font-size:11.5px;opacity:.85;margin-left:6px;}
  .planhead.fix{background:var(--navy);}
  .planhead.flex{background:var(--amber-dark);}
  .uploadbox{
    display:flex;gap:8px;align-items:center;flex-wrap:wrap;
    background:#F5F7F9;border:1px dashed var(--border);
    border-radius:8px;padding:10px;margin-bottom:8px;
  }
  .uploadbox input[type=file]{
    flex:1;min-width:160px;
    font-size:12px;font-family:var(--body);color:var(--muted);
  }
  .extract-status{
    font-size:12px;color:var(--muted);min-height:16px;margin:2px 0 6px;
  }
  .extract-status.ok{color:var(--green);}
  .extract-status.err{color:var(--red);}
  .divider{
    display:flex;align-items:center;text-align:center;
    color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;
    margin:14px 0 12px;
  }
  .divider::before, .divider::after{
    content:'';flex:1;border-top:1px solid var(--border);
  }
  .divider span{padding:0 8px;white-space:nowrap;}
  .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
  button{
    font-family:var(--body);
    font-weight:600;
    font-size:13px;
    border:none;
    border-radius:7px;
    padding:9px 14px;
    cursor:pointer;
  }
  .btn-primary{background:var(--navy);color:#fff;}
  .btn-primary:hover{background:#0F1830;}
  .btn-ghost{background:transparent;color:var(--navy);border:1px solid var(--border);}
  .btn-ghost:hover{border-color:var(--navy);}
  .save-msg{font-size:12px;color:var(--green);font-family:var(--mono);align-self:center;}
  .results{margin-top:24px;}
  .results h2{
    font-family:var(--display);
    font-size:17px;
    margin:0 0 4px;
  }
  .results .note{font-size:12px;color:var(--muted);margin:0 0 14px;}
  .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .cards3.two{grid-template-columns:repeat(2,1fr);}
  .cards2x2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
  .rcard .breaklines{margin-top:6px;}
  .rcard .breakline{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);padding:4px 0;border-bottom:1px solid var(--border);}
  .rcard .breakline.total{font-weight:700;color:var(--ink);border-bottom:none;margin-top:6px;padding-top:8px;border-top:2px solid var(--navy);font-family:var(--mono);font-size:13px;}
  @media (max-width:760px){ .cards3, .cards3.two, .cards2x2{grid-template-columns:1fr;} }
  .rcard.placeholder-card{
    background:#F5F7F9;border:1px dashed var(--border);
    display:flex;flex-direction:column;justify-content:center;
  }
  .placeholder-note{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4;}
  .rcard{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:16px;
    position:relative;
  }
  .rcard.client-card{
    background:#EAF3FA;
    border-color:#C9DFF0;
  }
  .rcard.moltoconv{
    background:#CDEEDD;
    border-color:var(--green);
    box-shadow:0 0 0 1px var(--green);
  }
  .rcard.conv{
    background:var(--green-bg);
    border-color:var(--amber-dark);
    box-shadow:0 0 0 1px var(--amber-dark);
  }
  .rcard.nonconv{
    background:#F6D9D3;
    border-color:var(--red);
    box-shadow:0 0 0 1px var(--red);
  }
  .rcard .badge{
    position:absolute;top:-10px;right:12px;
    color:#fff;
    font-size:10px;font-weight:700;
    padding:3px 8px;border-radius:20px;
    letter-spacing:.03em;
    font-family:var(--body);
  }
  .badge.moltoconv{background:var(--green);}
  .badge.conv{background:var(--amber-dark);}
  .badge.nonconv{background:var(--red);}
  .rcard h3{
    font-family:var(--display);
    font-size:13px;
    margin:0 0 10px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.03em;
  }
  .rcard .euro{
    font-family:var(--mono);
    font-size:26px;
    font-weight:600;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .rcard .permonth{font-size:12px;color:var(--muted);margin-top:2px;font-family:var(--mono);}
  .rcard .delta{
    margin-top:10px;
    font-size:13px;
    font-family:var(--mono);
    font-weight:600;
    padding:6px 8px;
    border-radius:6px;
    display:inline-block;
  }
  .delta.pos{background:var(--green-bg);color:var(--green);}
  .delta.neg{background:var(--red-bg);color:var(--red);}
  .warnbox{
    margin-top:16px;
    background:var(--red-bg);
    border:1px solid #E8C3B9;
    color:var(--red);
    font-size:12.5px;
    padding:10px 12px;
    border-radius:8px;
  }
  .infobox{
    margin-top:12px;
    background:#FFF6E9;
    border:1px solid #EFCB94;
    color:var(--amber-dark);
    font-size:12.5px;
    padding:10px 12px;
    border-radius:8px;
  }
  .breakdown{
    margin-top:18px;background:var(--card);border:1px solid var(--border);
    border-radius:10px;padding:14px 16px;
  }
  .breakdown summary{
    cursor:pointer;font-weight:600;font-size:13px;color:var(--navy);
    font-family:var(--display);
  }
  .breakdown[open] summary{margin-bottom:12px;}
  .breaktable{width:100%;border-collapse:collapse;font-size:12.5px;}
  .breaktable th, .breaktable td{
    border:1px solid var(--border);padding:7px 10px;text-align:right;
  }
  .breaktable th:first-child, .breaktable td:first-child{text-align:left;}
  .breaktable th{background:#F5F7F9;font-family:var(--mono);font-weight:600;}
  .breaktable tr.total td{font-weight:700;background:#F5F7F9;font-family:var(--mono);}
    margin-top:14px;
    font-size:12.5px;
    color:var(--muted);
    background:#F5F7F9;
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 12px;
  }
  footer{margin-top:26px;font-size:11px;color:var(--muted);text-align:center;}
  .userbar{
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:10px;margin-bottom:18px;
  }
  .userbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .userbar-right{display:flex;gap:8px;}
  #userGreeting{font-size:13px;font-weight:600;color:var(--navy);}
  .creditbadge{
    font-family:var(--mono);font-size:12px;
    background:var(--navy);color:#fff;
    padding:4px 10px;border-radius:20px;
  }
  .admintable{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:10px;}
  .admintable th, .admintable td{
    border:1px solid var(--border);padding:6px 8px;text-align:left;
  }
  .admintable th{background:#F5F7F9;font-family:var(--mono);font-weight:600;}
  .admintable button{
    font-size:11px;padding:4px 8px;margin-right:4px;margin-bottom:2px;
  }
  .pill{
    display:inline-block;font-size:10px;font-weight:700;
    padding:2px 7px;border-radius:20px;font-family:var(--body);
  }
  .pill.on{background:var(--green-bg);color:var(--green);}
  .pill.off{background:var(--red-bg);color:var(--red);}
  .pill.saldato{background:var(--green-bg);color:var(--green);}
  .pill.attivo{background:#FFF6E9;color:var(--amber-dark);}