:root{
 --bg:#0b1220;
 --card:#111a2e;
 --txt:#e9eefc;
 --mut:#a9b6d6;
 --b:#223155;
 --acc:#22c55e; /* greener look */
}
*{ box-sizing:border-box; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
body{ margin:0; background:linear-gradient(180deg,#070d18, #0b1220 40%); color:var(--txt); }
.wrap{ max-width:1200px; margin:28px auto; padding:0 16px; }

.head{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:16px; }
.brand{ display:flex; gap:12px; align-items:center; }
.logo{ width:54px; height:54px; object-fit:contain; border-radius:10px; background:#0b1428; border:1px solid var(--b); padding:6px; }

h1{ margin:0; font-size:28px; }
.sub{ margin:6px 0 0; color:var(--mut); }
.meta{ text-align:right; color:var(--mut); display:flex; flex-direction:column; gap:10px; align-items:flex-end; }

.btn{ background:var(--acc); border:0; color:#04110a; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:800; }
.btn-ghost{ background:transparent; border:1px solid var(--b); color:var(--txt); font-weight:700; }

.grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:16px; }
.card{ background:rgba(17,26,46,.92); border:1px solid var(--b); border-radius:14px; padding:16px; }
.card h2{ margin:0 0 12px; font-size:18px; }

label{ display:block; margin:10px 0; color:var(--mut); font-size:14px; }
input{
 width:100%;
 margin-top:6px;
 padding:12px 12px;
 border-radius:10px;
 border:1px solid var(--b);
 background:#0b1428;
 color:var(--txt);
 font-size:15px;
}
input[readonly]{ opacity:.92; }

.row{ margin-top:12px; display:flex; justify-content:flex-end; }

.summary{ display:grid; gap:12px; }
.box{ border:1px solid var(--b); border-radius:12px; padding:14px; background:#0b1428; }
.k{ color:var(--mut); font-size:13px; }
.v{ margin-top:8px; font-size:22px; font-weight:900; }
.note{ margin-top:12px; color:var(--mut); font-size:13px; line-height:1.4; }

.sep{ border:0; border-top:1px solid var(--b); margin:14px 0; }

.tableWrap{ overflow:auto; border:1px solid var(--b); border-radius:12px; background:#0b1428; }
.tbl{ width:100%; border-collapse:collapse; min-width:700px; }
.tbl th,.tbl td{ padding:10px 12px; border-bottom:1px solid rgba(34,49,85,.6); text-align:right; }
.tbl th:first-child,.tbl td:first-child{ text-align:left; }
.tbl thead th{ position:sticky; top:0; background:#0b1428; color:var(--mut); font-weight:800; }
.tbl tbody tr:hover{ background:rgba(34,197,94,.10); }

@media (max-width: 900px){
 .head{ flex-direction:column; align-items:flex-start; }
 .meta{ align-items:flex-start; text-align:left; }
 .grid{ grid-template-columns:1fr; }
}

/* Better print look */
@media print{
 @page { size: A4; margin: 12mm; }
 body{ background:#fff; color:#000; }
 .wrap{ max-width:none; margin:0; padding:0; }
 .card{ background:#fff; border:1px solid #ddd; }
 input{ border:1px solid #ccc; color:#000; background:#fff; }
 .btn, .btn-ghost{ display:none !important; }
 .sub,.meta,.note,.k{ color:#000; }
 .tableWrap{ border:1px solid #ddd; }
 .tbl thead th{ background:#f5f5f5; color:#000; }
}
