:root{
    --bg:#f7f8fa; --panel:#ffffff; --ink:#0d1017; --muted:#7a8194; --line:#e6e8ee;
    --line-soft:#f0f1f5; --brand:#0d1017; --brand-ink:#ffffff; --accent:#111827;
    --accent-soft:#eef0f4; --green:#0ea373; --danger:#e5484d;
    --chip:#f2f3f6; --shadow:0 1px 2px rgba(16,20,35,.05);
    --shadow-sm:0 1px 1px rgba(16,20,35,.04); --radius:6px; --radius-sm:4px;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;}
  a{color:var(--ink)}
  .wrap{max-width:none; margin:0; padding:26px 30px 90px}
  header.top{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px}
  .logo{display:flex; align-items:center; gap:13px}
  .logo svg{height:34px; width:auto; display:block}
  .logo .word{font-weight:700; font-size:27px; letter-spacing:-1.2px; color:var(--ink); line-height:1}
  .divider{width:1px; height:30px; background:var(--line)}
  header.top .htitle{font-size:14px; font-weight:600; color:var(--ink)}
  header.top .sub{color:var(--muted); font-size:12px; margin-top:2px}
  .grow{flex:1}
  .btn{border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:9px 15px;
    border-radius:var(--radius-sm); cursor:pointer; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px;
    transition:.13s ease; white-space:nowrap; box-shadow:var(--shadow-sm)}
  .btn:hover{border-color:#c9cdd8; background:var(--chip)}
  .btn.primary{background:var(--ink); color:var(--brand-ink); border-color:var(--ink)}
  .btn.primary:hover{background:#000; color:#fff}
  .btn.ghost{background:transparent; box-shadow:none}
  .btn.sm{padding:6px 11px; font-size:12px}
  .btn.danger{color:var(--danger)}
  .btn.danger:hover{border-color:var(--danger); background:#fdecec}

  .cards{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
  .card .k{color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px}
  .card .v{font-size:26px; font-weight:700; margin-top:7px; letter-spacing:-1px}
  .card .v small{font-size:13px; color:var(--muted); font-weight:600; letter-spacing:0}
  .card.hi{background:var(--ink); border-color:var(--ink)}
  .card.hi .k{color:rgba(255,255,255,.55)}
  .card.hi .v{color:#fff}

  .toolbar{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
  select,input,textarea{font-family:inherit; font-size:13px; color:var(--ink); background:var(--panel);
    border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 12px; outline:none; transition:.13s}
  select{cursor:pointer; -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8194' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 11px center; padding-right:30px}
  select:hover{border-color:#c9cdd8}
  select:focus,input:focus,textarea:focus{border-color:var(--ink); box-shadow:0 0 0 3px var(--accent-soft)}
  input[type=search]{min-width:250px}
  .seg{display:inline-flex; background:var(--chip); border-radius:var(--radius-sm); padding:3px; gap:2px}
  .seg button{border:0; background:transparent; color:var(--muted); padding:7px 13px; border-radius:3px; cursor:pointer; font-weight:600; font-size:12.5px; transition:.13s}
  .seg button:hover{color:var(--ink); background:var(--panel)}

  .tablecard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
  .tablescroll{overflow-x:auto}
  table{border-collapse:collapse; width:100%}
  th,td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:middle; white-space:nowrap}
  th{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; position:sticky; top:0; background:var(--panel); border-bottom:1px solid var(--line)}
  td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
  tbody tr{transition:.1s}
  #tbody tr:not(.month-sep){cursor:pointer}
  #tbody tr:not(.month-sep) td.noedit{cursor:default}
  tbody tr:hover{background:var(--line-soft)}
  td.desc{white-space:normal; min-width:180px; max-width:340px}
  td.small{color:var(--muted); font-size:12.5px}
  .amt{font-weight:700; letter-spacing:-.2px}
  .maplink{color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:4px}
  .maplink:hover{text-decoration:underline}
  .maplink .pin{color:var(--muted); font-size:12px}
  .pill{display:inline-flex; align-items:center; gap:6px; padding:3px 11px 3px 9px; border-radius:3px; font-size:12px; font-weight:600}
  .pill::before{content:""; width:7px; height:7px; border-radius:2px; background:currentColor}
  .rowact{display:flex; gap:5px; opacity:0; transition:.13s}
  tr:hover .rowact{opacity:1}
  .iconbtn{border:1px solid var(--line); background:var(--panel); border-radius:var(--radius-sm); width:31px; height:31px; cursor:pointer; font-size:13px; display:inline-grid; place-items:center; color:var(--muted); transition:.13s}
  .iconbtn:hover{border-color:#c9cdd8; color:var(--ink); background:var(--chip)}
  .iconbtn.del:hover{border-color:var(--danger); color:var(--danger); background:#fdecec}
  tfoot td{font-weight:700; background:var(--panel); border-top:2px solid var(--line); font-size:14px}
  .month-sep td{background:var(--bg); font-weight:700; color:var(--ink); font-size:11.5px; letter-spacing:.3px; padding-top:10px; padding-bottom:10px; cursor:pointer; user-select:none}
  .month-sep td:hover{background:var(--chip)}
  .month-sep .msum{color:var(--muted); font-weight:600}
  .month-sep .chev{display:inline-block; width:14px; color:var(--muted)}
  .empty{padding:60px; text-align:center; color:var(--muted)}
  .flabel{font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.4px}
  th.sortable{cursor:pointer; user-select:none}
  th.sortable:hover{color:var(--ink)}
  th .ar{font-size:9px; margin-left:3px; opacity:.9}
  th.active{color:var(--ink)}
  td.note{white-space:normal; max-width:240px; color:var(--muted); font-size:12.5px}
  td.chk,th.chk{width:38px; text-align:center; padding-left:14px; padding-right:6px}
  input[type=checkbox]{width:15px; height:15px; accent-color:var(--ink); cursor:pointer; vertical-align:middle}
  .bulkbar{display:none; align-items:center; gap:10px; background:var(--ink); color:#fff; border-radius:var(--radius); padding:9px 14px; margin-bottom:10px; font-size:13px; font-weight:600}
  .bulkbar.on{display:flex}
  .bulkbar .btn{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; box-shadow:none}
  .bulkbar .btn:hover{background:rgba(255,255,255,.22)}
  .bulkbar .btn.danger{color:#fff}
  .bulkbar .btn.danger:hover{background:var(--danger); border-color:var(--danger)}
  .perpers{display:flex; flex-direction:column; gap:3px; margin-top:8px; max-height:64px; overflow:auto}
  .perpers .pp{display:flex; justify-content:space-between; font-size:13px}
  .perpers .pp .nm{color:var(--muted); font-weight:600}
  .perpers .pp .vv{font-weight:700; letter-spacing:-.2px}
  .exp-list{display:flex; flex-direction:column; gap:8px}
  .exp-item{display:flex; flex-direction:column; gap:2px; padding:13px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; background:var(--panel); transition:.13s; text-align:left; width:100%; font:inherit; color:inherit}
  .exp-item:hover{border-color:#c9cdd8; background:var(--chip)}
  .exp-item .tt{font-weight:700; font-size:13.5px}
  .exp-item .ds{font-size:12px; color:var(--muted)}
  .ac,.ac *{font-family:inherit}

  /* Tabs (Gestione) */
  .tabs{display:inline-flex; gap:2px; background:var(--chip); border-radius:var(--radius-sm); padding:3px; margin-bottom:18px}
  .tab{border:0; background:transparent; color:var(--muted); padding:8px 16px; border-radius:3px; cursor:pointer; font-weight:600; font-size:13px; font-family:inherit; transition:.13s}
  .tab:hover{color:var(--ink)}
  .tab.active{background:var(--panel); color:var(--ink); box-shadow:var(--shadow-sm)}
  .tabpane{display:none}
  .tabpane.active{display:block}
  .panehint{font-size:12.5px; color:var(--muted); margin:0 0 12px}

  /* Avatar + menu utente */
  .usermenu{position:relative}
  .avatar{width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--ink); color:#fff; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; box-shadow:var(--shadow-sm)}
  .avatar:hover{filter:brightness(1.08)}
  .usermenu .menu{position:absolute; right:0; top:calc(100% + 6px); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:0 12px 34px rgba(16,20,35,.16); min-width:210px; padding:6px; display:none; z-index:40}
  .usermenu .menu.on{display:block}
  .mu-head{padding:9px 10px 10px; border-bottom:1px solid var(--line-soft); margin-bottom:5px}
  .mu-name{font-weight:700; font-size:13.5px}
  .mu-mail{font-size:12px; color:var(--muted)}
  .mu-item{display:block; width:100%; text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:4px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink); font-family:inherit}
  .mu-item:hover{background:var(--chip)}

  .accbox{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--chip)}
  .acc-name{font-weight:700} .acc-mail{font-size:12.5px; color:var(--muted)}
  .rolechip{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:4px 9px; border-radius:3px; background:var(--ink); color:#fff}
  .invcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; letter-spacing:.5px}
  .inv-used{color:var(--muted)} .inv-free{color:var(--green)}

  /* Gate accesso */
  #gate{position:fixed; inset:0; background:var(--bg); display:none; align-items:flex-start; justify-content:center; padding:8vh 16px; z-index:100; overflow:auto}
  #gate.on{display:flex}
  .gatecard{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 16px 50px rgba(16,20,35,.12); width:100%; max-width:400px; padding:32px 30px}
  .gtitle{font-size:20px; font-weight:700; letter-spacing:-.4px}
  .gsub{color:var(--muted); font-size:13px; margin:4px 0 20px}
  .gerr{color:var(--danger); font-size:12.5px; font-weight:600; min-height:16px; margin-bottom:8px}
  .gswitch{text-align:center; font-size:12.5px; color:var(--muted); margin-top:16px}
  .gswitch a{font-weight:700; text-decoration:none}
  .gswitch a:hover{text-decoration:underline}

  /* Modal */
  .overlay{position:fixed; inset:0; background:rgba(13,16,23,.42); backdrop-filter:blur(2px); display:none; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:50; overflow:auto}
  .overlay.on{display:flex}
  .modal{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); width:100%; max-width:660px; box-shadow:0 16px 50px rgba(16,20,35,.2); animation:pop .16s ease}
  @keyframes pop{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
  .modal h3{margin:0; padding:20px 24px 16px; border-bottom:1px solid var(--line); font-size:17px; letter-spacing:-.3px}
  .modal .body{padding:20px 24px}
  .modal .foot{padding:15px 24px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end}
  .field{margin-bottom:15px}
  .field label{display:block; font-size:11px; font-weight:700; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px}
  .field label .req{color:var(--danger); margin-left:2px}
  .field label .lblhint{color:var(--muted); font-weight:600; text-transform:none; letter-spacing:0}
  .linkcell{color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:5px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .linkcell:hover{text-decoration:underline}
  .linkcell .ic{color:var(--muted); flex:none}
  .field input,.field select,.field textarea{width:100%}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
  .calcbox{background:var(--chip); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; font-size:13px; display:flex; justify-content:space-between; align-items:center; color:var(--muted)}
  .calcbox b{font-size:20px; color:var(--ink); letter-spacing:-.5px}
  .hint{font-size:11.5px; color:var(--muted); margin-top:4px}
  /* Autocomplete Maps */
  .ac{position:relative}
  .ac-list{position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:0 10px 30px rgba(16,20,35,.15); z-index:5; max-height:230px; overflow:auto; display:none}
  .ac-list.on{display:block}
  .ac-item{padding:9px 12px; cursor:pointer; font-size:12.5px; border-bottom:1px solid var(--line-soft); display:flex; gap:8px; align-items:flex-start}
  .ac-item:last-child{border-bottom:0}
  .ac-item:hover,.ac-item.sel{background:var(--chip)}
  .ac-item .pin{color:var(--muted); flex:none; margin-top:1px}
  .ac-item .nm{font-weight:600; color:var(--ink)}
  .ac-item .ad{color:var(--muted)}
  .ac-loading{padding:9px 12px; font-size:12px; color:var(--muted)}
  .settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
  .settings-grid h4{margin:0 0 10px; font-size:14px}
  .minitable{width:100%; border-collapse:collapse; min-width:0}
  .minitable th{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; text-align:left; padding:4px 8px; border:0}
  .minitable td{padding:5px 8px; white-space:nowrap; border:0}
  .minitable input[type=text]{width:100%}
  @media(max-width:900px){ .cards{grid-template-columns:1fr 1fr} .settings-grid{grid-template-columns:1fr} }
  @media(max-width:560px){ .grid2,.grid3{grid-template-columns:1fr} .wrap{padding:20px 14px 70px} }

  /* Print */
  @media print{
    body{background:#fff}
    .noprint{display:none !important}
    .wrap{max-width:none; padding:0}
    .tablecard{border:0; box-shadow:none}
    table{min-width:0; font-size:11px}
    th{color:#333}
    .print-head{display:block !important; margin-bottom:10px}
  }
  .print-head{display:none}