:root{
    --bg:#0a0d13; --panel:#12161f; --panel2:#161b26; --line:#232a3a; --text:#e7ebf2; --dim:#8a93a8;
    --ok:#2fbf71; --bad:#ef4a4a; --warn:#f5a524;
    --banner1:#05070b; --banner2:#12161f; --accent:#f5a524; --accent2:#ffc266;
    --mono:"JetBrains Mono","Fira Code",ui-monospace,Consolas,monospace;
    --sans:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
    --radius:12px;
  }
  *{box-sizing:border-box;}
  button{-webkit-appearance:none;appearance:none;font:inherit;}
  input,textarea{-webkit-appearance:none;appearance:none;}
  html{-webkit-text-size-adjust:100%;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 0 70px;}
  .inner{max-width:1180px;margin:0 auto;padding:0 16px;}

  header.topbar{background:linear-gradient(160deg,var(--banner1),var(--banner2) 140%);border-bottom:1px solid var(--line);padding:20px 0;}
  header.topbar .brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;}
  header.topbar .brand-left{display:flex;align-items:center;gap:14px;}
  header.topbar .brand-icon{font-size:32px;line-height:1;filter:drop-shadow(0 0 10px rgba(245,165,36,.35));}
  header.topbar .brand-name{font-size:22px;font-weight:700;letter-spacing:-.01em;}
  header.topbar .brand-name b{color:var(--accent);}
  header.topbar .brand-sub{font-size:12px;color:var(--dim);margin-top:2px;}

  .actions-bar{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
  .actions-bar .spacer{flex:1;}
  .btn{
    display:inline-flex;align-items:center;gap:7px;background:var(--panel2);color:var(--text);border:1px solid var(--line);
    font-family:var(--sans);font-weight:600;font-size:12.5px;padding:9px 15px;border-radius:8px;cursor:pointer;white-space:nowrap;
    transition:border-color .15s, transform .1s;text-decoration:none;
  }
  .btn:hover{border-color:var(--accent);}
  .btn:active{transform:scale(.97);}
  .btn.primary{background:linear-gradient(135deg,var(--accent),#e0871a);color:#1a1000;border:none;box-shadow:0 2px 12px rgba(245,165,36,.25);}
  .btn.primary:hover{filter:brightness(1.08);}

  .tabs{display:flex;gap:2px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;padding:0 16px;overflow-x:auto;}
  .tab{padding:13px 15px;font-size:12.5px;color:var(--dim);cursor:pointer;border-bottom:3px solid transparent;font-weight:600;white-space:nowrap;}
  .tab.active{color:var(--accent2);border-bottom-color:var(--accent);}
  .tab:hover{color:var(--text);}

  .inner{padding-top:20px;}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.3);}
  .view{display:none;}
  .view.active{display:block;}

  h2{margin:0 0 4px;font-size:16.5px;letter-spacing:-.01em;}
  h3{margin:22px 0 10px;font-size:12.5px;color:var(--accent2);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);padding-bottom:8px;font-weight:700;}
  h3:first-child{margin-top:0;}
  p.lead{color:var(--dim);font-size:12.5px;margin:0 0 16px;line-height:1.6;}

  label{display:block;font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-weight:700;}
  input[type=number],input[type=text],input[type=password],select{
    width:100%;background:#0d1017;border:1px solid var(--line);color:var(--text);
    font-family:var(--mono);font-size:16px;padding:10px 11px;border-radius:7px;
  }
  input:focus,select:focus{outline:none;border-color:var(--accent);}
  input::placeholder{color:#4a5266;}
  .row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
  .field{flex:1;min-width:160px;}
  .hint{font-size:11px;color:var(--dim);margin-top:6px;line-height:1.55;}

  .notice-panel{background:rgba(245,165,36,.07);border:1px solid rgba(245,165,36,.28);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;}
  .notice-panel .notice-icon{font-size:19px;line-height:1.1;flex-shrink:0;}
  .notice-panel strong{display:block;color:var(--accent2);font-size:12.5px;margin-bottom:3px;}
  .notice-panel p{margin:0;font-size:11.5px;color:#c9b183;line-height:1.6;}

  /* ---------- aviso crítico: o que a ferramenta NÃO cobre ---------- */
  .critical-notice{
    background:rgba(239,74,74,.08);border:2px solid rgba(239,74,74,.4);border-radius:12px;
    padding:16px 18px;display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;
  }
  .critical-notice .notice-icon{font-size:24px;line-height:1.1;flex-shrink:0;}
  .critical-notice strong{display:block;color:#ff8a8a;font-size:13.5px;margin-bottom:6px;}
  .critical-notice p{margin:0 0 10px;font-size:12px;color:#e0aaaa;line-height:1.6;}
  .critical-notice ul{margin:0;padding-left:20px;}
  .critical-notice li{margin-bottom:9px;font-size:12px;color:#e0aaaa;line-height:1.6;}
  .critical-notice li:last-child{margin-bottom:0;}
  .critical-notice li b{color:#ffb3b3;}

  /* ---------- itens complementares (preenchimento manual) ---------- */
  .comp-row{display:flex;gap:10px;align-items:center;margin-bottom:8px;}
  .comp-row input[type=text]{flex:2;}
  .comp-row input[type=number]{flex:1;max-width:160px;}
  .comp-remove{
    background:transparent;border:1px solid var(--line);color:var(--bad);border-radius:7px;
    width:36px;height:36px;flex-shrink:0;cursor:pointer;font-size:15px;
  }
  .comp-remove:hover{border-color:var(--bad);}

  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px;}
  table{width:100%;border-collapse:collapse;font-size:12.5px;}
  table.table-wide{min-width:560px;}
  th{text-align:left;color:var(--dim);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
  td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
  tr:hover td{background:rgba(255,255,255,.015);}
  tr:last-child td{border-bottom:none;}
  tr.total-row td{font-weight:700;border-top:2px solid var(--accent);background:rgba(245,165,36,.06);}
  td input{width:100px;padding:7px 8px;font-size:16px;}
  td.num{text-align:right;font-family:var(--mono);}
  td.mat-name{font-weight:600;color:var(--text);}
  td.mat-name span.unit{display:block;font-weight:400;color:var(--dim);font-size:10.5px;}

  .grand-total{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;background:linear-gradient(135deg,#191307,#241c0a);border:1px solid rgba(245,165,36,.4);border-radius:var(--radius);padding:18px 22px;margin-top:8px;}
  .grand-total .label{font-size:12.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;}
  .grand-total .value{font-size:26px;font-weight:700;font-family:var(--mono);color:var(--accent2);}

  .subtotal-line{display:flex;justify-content:space-between;padding:10px 4px;font-size:13px;border-bottom:1px dashed var(--line);}
  .subtotal-line b{font-family:var(--mono);}

  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

  footer{margin-top:32px;font-size:11px;color:var(--dim);line-height:1.6;padding:0 16px;}
  footer .credit{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--dim);text-align:center;}

  .print-only{display:none;}

  /* ---------- responsive ---------- */
  @media (max-width:760px){
    .grid-2{grid-template-columns:1fr;}
    header.topbar .brand-icon{font-size:26px;}
    header.topbar .brand-name{font-size:19px;}
    .grand-total{flex-direction:column;align-items:flex-start;}
    .grand-total .value{font-size:22px;}
    .actions-bar{position:static;}
  }
  @media (max-width:480px){
    .inner{padding:0 12px;}
    .panel{padding:14px;border-radius:9px;}
    .row{gap:10px;}
    .field{min-width:100%;}
    .tab{padding:11px 12px;font-size:11.5px;}
    .btn{flex:1;justify-content:center;padding:10px 10px;}
    header.topbar .brand{gap:10px;}
    .grand-total{padding:14px 16px;}
  }

  /* ---------- modal de compartilhamento (e-mail) ---------- */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(5,7,11,.75);display:flex;align-items:center;justify-content:center;
    z-index:200;padding:20px;
  }
  .modal-overlay[hidden]{display:none;}
  .modal-box{
    width:100%;max-width:480px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.5);max-height:85vh;overflow-y:auto;position:relative;
  }
  .modal-box h3{margin:0 0 6px;font-size:15px;color:var(--text);}
  .modal-box p.lead{margin:0 0 14px;}
  .modal-box textarea{
    width:100%;min-height:180px;background:#0d1017;border:1px solid var(--line);color:var(--text);
    font-family:var(--mono);font-size:12px;padding:10px;border-radius:7px;resize:vertical;line-height:1.5;
  }
  .modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
  .modal-close{
    position:absolute;top:14px;right:16px;background:none;border:none;color:var(--dim);
    font-size:20px;cursor:pointer;line-height:1;
  }
  .copy-feedback{font-size:11.5px;color:var(--ok);margin-left:4px;opacity:0;transition:opacity .2s;}
  .copy-feedback.show{opacity:1;}

  /* ---------- print ---------- */
  @media print{
    body{background:#fff !important;color:#111 !important;}
    .actions-bar, .tabs{display:none !important;}
    .view{display:block !important;margin-bottom:18px;page-break-inside:avoid;}
    .print-only{display:block !important;}
    .panel{background:#fff !important;border:1px solid #ccc !important;box-shadow:none !important;break-inside:avoid;}
    header.topbar{background:#fff !important;border-bottom:2px solid #111 !important;color:#111 !important;}
    header.topbar .brand-name, header.topbar .brand-sub{color:#111 !important;}
    header.topbar .brand-name b{color:#111 !important;}
    .notice-panel{background:#fff !important;border:1px solid #999 !important;}
    .notice-panel strong, .notice-panel p{color:#333 !important;}
    .critical-notice{background:#fff !important;border:2px solid #c0392b !important;}
    .critical-notice strong{color:#c0392b !important;}
    .critical-notice p, .critical-notice li{color:#333 !important;}
    .critical-notice li b{color:#111 !important;}
    .comp-remove{display:none !important;}
    input,select{border:none !important;background:transparent !important;color:#111 !important;padding:2px 0 !important;}
    th{color:#555 !important;}
    td, th{border-bottom:1px solid #ddd !important;}
    tr.total-row td{background:#f2f2f2 !important;color:#111 !important;}
    .grand-total{background:#111 !important;border:none !important;}
    .grand-total .label, .grand-total .value{color:#fff !important;}
    .table-scroll{overflow:visible !important;margin:0;padding:0;}
    table{min-width:0 !important;}
    footer{color:#555 !important;}
    footer .credit{border-top:1px solid #ccc !important;}
    a{color:#111 !important;}
  }
  /* ---------- login overlay ---------- */
  #login-overlay{
    min-height:100vh;background:radial-gradient(circle at 30% 20%, #171008 0%, #05070b 65%);
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .login-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 26px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
  .login-card .brand-left{display:flex;align-items:center;gap:12px;margin-bottom:22px;justify-content:center;}
  .login-card .brand-icon{font-size:30px;filter:drop-shadow(0 0 10px rgba(245,165,36,.35));}
  .login-card .brand-name{font-size:20px;font-weight:700;}
  .login-card .brand-name b{color:var(--accent);}
  .login-card h2{text-align:center;font-size:14px;color:var(--dim);font-weight:600;margin:0 0 22px;}
  .login-card label{margin-top:14px;}
  .login-card label:first-of-type{margin-top:0;}
  .login-card .btn.primary{width:100%;justify-content:center;margin-top:18px;padding:11px;font-size:13px;}
  .login-error{min-height:16px;font-size:12px;color:var(--bad);margin-top:12px;text-align:center;line-height:1.5;}
  .login-links{text-align:center;margin-top:14px;}
  .login-links a{color:var(--dim);font-size:11.5px;text-decoration:none;border-bottom:1px dotted var(--dim);cursor:pointer;}
  .login-links a:hover{color:var(--accent2);border-color:var(--accent2);}

  #user-bar{display:none;align-items:center;justify-content:flex-end;gap:12px;padding:8px 16px;background:#0d1017;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--dim);flex-wrap:wrap;}
  #user-bar b{color:var(--text);}
  #user-bar .btn{padding:6px 12px;font-size:11.5px;}
  @media print{ #login-overlay, #user-bar, .modal-overlay{display:none !important;} }

  /* ---------- painel admin: extras ---------- */
  .btn.small{padding:5px 10px;font-size:11px;border-radius:6px;}
  .btn.danger{color:var(--bad);}
  .btn.danger:hover{border-color:var(--bad);}
  .btn:disabled{opacity:.5;cursor:not-allowed;}
  .status-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;}
  .status-pill.ativo{background:rgba(47,191,113,.12);color:var(--ok);}
  .status-pill.bloqueado{background:rgba(239,74,74,.12);color:var(--bad);}
  .status-pill.expirado{background:rgba(245,165,36,.12);color:var(--warn);}
  .row-actions{display:flex;gap:6px;flex-wrap:wrap;}
  td input[type=date]{width:145px;padding:6px 7px;font-size:16px;}
  #new-user-form[hidden]{display:none;}
  #new-user-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
  .alert-box{padding:11px 14px;border-radius:8px;font-size:12.5px;margin-bottom:14px;}
  .alert-box.ok{background:rgba(47,191,113,.1);border:1px solid rgba(47,191,113,.3);color:var(--ok);}
  .alert-box.bad{background:rgba(239,74,74,.1);border:1px solid rgba(239,74,74,.3);color:var(--bad);}
  details > summary{list-style:none;}
  details > summary::-webkit-details-marker{display:none;}
  details > summary::marker{display:none;content:"";}

  /* ---------- painel de ajuda "como funciona" ---------- */
  .help-toggle{
    display:inline-flex;align-items:center;gap:7px;background:rgba(47,191,113,.08);
    border:1px solid rgba(47,191,113,.3);color:var(--ok);font-family:var(--sans);font-weight:700;
    font-size:12px;padding:8px 14px;border-radius:8px;cursor:pointer;margin-bottom:4px;
    -webkit-appearance:none;appearance:none;
  }
  .help-toggle:hover{background:rgba(47,191,113,.14);}
  .help-toggle::before{content:"❓";}
  .help-toggle.is-open::before{content:"✕";}
  .help-box{
    margin-top:10px;background:#0d1017;border:1px solid var(--line);border-radius:10px;
    padding:16px 18px;font-size:12.5px;line-height:1.7;color:var(--text);
  }
  .help-box h4{margin:0 0 8px;font-size:12.5px;color:var(--ok);text-transform:uppercase;letter-spacing:.05em;}
  .help-box h4:not(:first-child){margin-top:16px;}
  .help-box p{margin:0 0 8px;color:var(--dim);}
  .help-box ul{margin:0 0 8px;padding-left:18px;color:var(--dim);}
  .help-box li{margin-bottom:5px;}
  .help-box b{color:var(--text);}
  .help-box .exemplo{
    margin-top:10px;background:rgba(245,165,36,.06);border:1px solid rgba(245,165,36,.2);
    border-radius:7px;padding:10px 12px;color:#c9b183;font-size:12px;
  }
  .help-box .exemplo b{color:var(--accent2);}