:root{--bg:#0b1220;--card:#0f172a;--muted:#9aa4b2;--fg:#e6e9ef;--acc:#06b6d4;--acc-2:#22c55e;--danger:#ef4444;--border:#1c2640;--focus:#22d3ee}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b1220;color:var(--fg);min-height:100dvh}
.app-header{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#0b1220}
.app-header h1{margin:0;font-size:20px;letter-spacing:.5px}
.actions{display:flex;gap:8px}
.actions #sync-status{font-size:12px;padding:6px 10px;border:1px solid var(--border);border-radius:10px;color:var(--muted)}
.actions #sync-status.syncing{color:#ffd27a;border-color:#5b4b1a}
.actions #sync-status.ok{color:#86efac;border-color:#1e7b57}
.actions #sync-status.error{color:#fca5a5;border-color:#6d0f26}
button{appearance:none;border:1px solid var(--border);background:#0f1a30;color:var(--fg);padding:8px 12px;border-radius:8px;cursor:pointer;transition:background .2s ease, transform .08s ease;font-weight:600;font-size:14px}
button:hover{background:#12203c}
button:active{transform:scale(.98)}
button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button.danger{border-color:#3a1030;background:linear-gradient(180deg,#3a1030,#250a22);color:#ffb4c2}
button#btn-sync{border-color:#1e7b57;background:#1f7b57;color:#a7f3d0}
button#btn-sync:hover{background:#216f50}
main{display:grid;gap:18px;padding:18px;grid-template-columns:1fr;max-width:1100px;margin:0 auto}
.card{background:#0f172a;border:1px solid var(--border);border-radius:14px;padding:16px}
.group-title{margin:6px 2px 10px 2px;font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.form-group{margin-bottom:12px}
.card h2{margin:4px 0 12px 2px;font-size:18px}
.grid-form{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:10px;align-items:end}
.grid-form input, .grid-form select{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:#0c1528;color:var(--fg);font-size:14px}
.grid-form input:focus-visible, .grid-form select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.grid-form button{background:linear-gradient(180deg,#2a5bff,#274bff);border-color:#274bff}
.field-card{border-radius:10px;background:#0f172a;border:1px solid var(--border);padding:12px 12px;height:44px}
.field-card::-webkit-outer-spin-button,.field-card::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field-card[type=number]{-moz-appearance:textfield}
.field-card::placeholder{color:var(--muted);opacity:.9}
.calc-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border:1px solid var(--border);border-radius:10px;padding:10px;background:#0b1325;grid-column:1/-1}
.calc-preview div{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:#0f172a}
.calc-preview span{color:var(--muted);font-size:12px;white-space:nowrap;margin-right:8px}
.calc-preview strong{font-variant-numeric:tabular-nums;line-height:1.1;justify-self:end;white-space:nowrap;font-size:16px}
.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px;background:#0f172a}
.table-tools{display:flex;gap:10px;align-items:center;margin:8px 0}
.table-tools input, .table-tools select{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#0b1325;color:var(--fg)}
.table-tools .muted{color:var(--muted);font-size:12px}
table{width:100%;border-collapse:separate;border-spacing:0;min-width:360px}
thead th{position:sticky;top:0;background:#0b1222;text-align:left;padding:12px 10px;border-bottom:1px solid var(--border);font-size:13px}
tbody td{padding:10px 10px;border-bottom:1px solid #1a2244;word-break:break-word}
tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
tbody tr:hover{background:rgba(59,130,246,.08)}
.col-num{width:52px}
.col-acoes{width:180px}
.numeric{text-align:right}
/* Alinhamento numérico para #tbl-nomes (colunas de valores) */
#tbl-nomes tbody td:nth-child(8),
#tbl-nomes tbody td:nth-child(9),
#tbl-nomes tbody td:nth-child(10),
#tbl-nomes tbody td:nth-child(11),
#tbl-nomes tbody td:nth-child(12),
#tbl-nomes tbody td:nth-child(13){text-align:right;font-variant-numeric:tabular-nums}
.row-actions{display:flex;gap:8px}
.row-actions button{padding:6px 10px;font-size:12px;border-radius:8px}
.row-actions .edit{background:linear-gradient(180deg,#2a936a,#1e7b57);border-color:#1e7b57}
.row-actions .delete{background:linear-gradient(180deg,#8f1e38,#6d0f26);border-color:#6d0f26}
.linklike{background:transparent;border:none;color:#93c5fd;cursor:pointer;padding:0;text-decoration:underline;font-weight:600}
.app-footer{padding:16px 24px;color:var(--muted);text-align:center}
/* Modal */
.modal{position:fixed;inset:0;display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-dialog{position:relative;margin:8vh auto 0 auto;max-width:860px;background:#0b1222;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.modal-header h3{margin:0;font-size:16px}
.modal-close{background:transparent;border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--fg)}
.modal-body{padding:14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;grid-column:1/-1}
.attach-controls{display:flex;gap:10px;align-items:center}
.attach-controls input[type=file]{border:1px solid var(--border);background:#0c1330;color:var(--fg);padding:8px;border-radius:10px}
@media (max-width:1100px){.grid-form{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:900px){
  .grid-form{grid-template-columns:1fr}
  .col-acoes{width:140px}
  thead th, tbody td{padding:10px 8px}
  .card h2{font-size:16px}
}
@media print{
  body{background:white;color:black}
  .app-header,.app-footer,.actions,form button,#btn-clear,#btn-export,#btn-print{display:none!important}
  .card{border:none;background:white}
  .table-wrap{border:none}
  thead th{background:white;border-bottom:1px solid #000}
  tbody td{border-bottom:1px solid #ccc}
}