/* ====== Tema: Verde claro brilhoso ====== */
:root{
  --bg:#0c0f0d;
  --panel:#131a15;
  --surface:#0f1511;
  --accent:#75f7b9;
  --accent-2:#b9ffd9;
  --text:#e6fff1;
  --muted:#9fe2c2;
  --danger:#ff7a7a;
  --success:#6df0a1;
  --shadow:0 10px 30px rgba(117,247,185,0.25), inset 0 0 0 1px rgba(185,255,217,0.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(117,247,185,.15), transparent 60%),
              radial-gradient(1200px 600px at 80% 110%, rgba(117,247,185,.10), transparent 60%),
              var(--bg);
  color:var(--text);
  font: 500 16px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.2) blur(6px);
  background:linear-gradient(180deg, rgba(19,26,21,.8), rgba(19,26,21,.55));
  border-bottom:1px solid rgba(185,255,217,.1);
}

.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:44px; height:44px; border-radius:12px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color:#082012; display:grid; place-content:center;
  font-weight:900; text-shadow:0 2px 8px rgba(0,0,0,.2);
  box-shadow: var(--shadow);
}
h1{margin:0;font-size:20px}
h1 + p{margin:0; color:var(--muted); font-size:13px}

.id-block{display:flex; gap:12px; flex-wrap:wrap}
label{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted)}
input, select, button{
  font: inherit;
}
input, select{
  background:var(--surface); color:var(--text);
  border:1px solid rgba(185,255,217,.18);
  padding:10px 12px; border-radius:12px; outline:none;
  box-shadow: inset 0 0 0 1px rgba(117,247,185,.08);
}
input::placeholder{color:#bfe9d3a5}

.controls{padding:16px 20px; display:grid; gap:10px}
.controls .row{display:flex; gap:12px; align-items:center}
.controls .row.wrap{flex-wrap:wrap}
.spacer{flex:1}

.btn{
  background: rgba(117,247,185,.14);
  color:var(--text);
  border:1px solid rgba(117,247,185,.35);
  padding:10px 14px; border-radius:12px; cursor:pointer;
  transition: all .2s ease; box-shadow: var(--shadow);
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 14px 30px rgba(117,247,185,.28), inset 0 0 0 1px rgba(185,255,217,.25);}
.btn.primary{background: linear-gradient(180deg, rgba(117,247,185,.3), rgba(117,247,185,.15));}
.btn.success{background: linear-gradient(180deg, rgba(109,240,161,.35), rgba(109,240,161,.18));}
.btn.danger{background: linear-gradient(180deg, rgba(255,122,122,.25), rgba(255,122,122,.12)); border-color: rgba(255,122,122,.45)}
.btn.print{background: linear-gradient(180deg, rgba(185,255,217,.24), rgba(185,255,217,.1));}
.btn.print.outline{background: transparent}
.btn.small{padding:6px 10px; border-radius:10px}
.btn.ghost{background: transparent}

.table-wrap{
  padding: 0 20px 24px;
}
table{
  width:100%;
  border-collapse:separate; border-spacing:0 10px;
}
thead th{
  text-align:left; font-weight:700; color:var(--accent-2);
  padding:8px 10px;
}
tbody tr{
  background: linear-gradient(180deg, rgba(19,26,21,1), rgba(19,26,21,.85));
  border:1px solid rgba(185,255,217,.15);
  box-shadow: var(--shadow);
}
td{
  padding:6px 10px; vertical-align:middle;
}
td.num{ text-align:right }
td.right{ text-align:right }
td .produto{ width: 100% }
td input[type="number"]{ width: 140px; text-align:right }
td .custo, td .preco{ font-variant-numeric: tabular-nums }

tfoot td{
  padding:10px 10px;
  border-top:1px dashed rgba(185,255,217,.3);
}
tfoot td strong{color:var(--accent-2)}
.muted{opacity:.6}

.hint{opacity:.8; color:var(--muted); padding:0 20px 24px}

.app-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; font-size:13px; color:var(--muted);
  border-top:1px solid rgba(185,255,217,.1);
}

/* ====== Impressão / PDF ====== */
@media print{
  body{background:#fff; color:#111}
  .app-header, .controls, .hint, .app-footer, .remove{ display:none !important }
  table{ border-spacing:0; width:100% }
  thead th{ color:#111; border-bottom:1px solid #000 }
  tbody tr{ background:#fff; box-shadow:none; border: none }
  td, th{ padding:6px; font-size:12px; color:#000 }
  tfoot td{ border-top:1px solid #000; color:#000 }
}