@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#1B2A41;
  --paper:#FAF6EE;
  --paper-dim:#F1EBDC;
  --green:#2F6844;
  --rust:#B5502A;
  --gold:#C9A227;
  --charcoal:#2B2B2B;
  --line:#DCD3BE;
  --radius:6px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:'Inter',system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
}

a{color:var(--ink);}

.nav{
  background:var(--ink);
  color:var(--paper);
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.nav .brand{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.2px;
}
.nav .links{display:flex;gap:16px;flex-wrap:wrap;font-size:.92rem;}
.nav .links a{color:#E7E0CE;text-decoration:none;padding:4px 2px;border-bottom:2px solid transparent;}
.nav .links a.active,.nav .links a:hover{border-bottom-color:var(--gold);color:var(--paper);}

.wrap{max-width:900px;margin:0 auto;padding:20px 16px 60px;}

h1,h2,h3{font-family:'Playfair Display',serif;font-weight:700;color:var(--ink);margin:0 0 12px;}
h1{font-size:1.6rem;}
h2{font-size:1.25rem;margin-top:28px;}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:20px;
}

label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:4px;margin-top:12px;}
input[type=text],input[type=date],input[type=number],input[type=email],input[type=password],input[type=tel],select,textarea{
  width:100%;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:'Inter',sans-serif;
  font-size:1rem;
  background:var(--paper);
  color:var(--charcoal);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;}

.btn{
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  border:none;
  padding:11px 18px;
  border-radius:var(--radius);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  text-decoration:none;
  margin-top:16px;
}
.btn:hover{background:#25395a;}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn.danger{background:var(--rust);}
.btn.small{padding:6px 12px;font-size:.82rem;margin-top:0;}

.row{display:flex;gap:12px;flex-wrap:wrap;}
.row > *{flex:1;min-width:140px;}

.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.stat{
  flex:1;min-width:140px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;
}
.stat .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#6b6250;}
.stat .value{font-family:'IBM Plex Mono',monospace;font-size:1.4rem;font-weight:600;margin-top:2px;}
.stat.income .value{color:var(--green);}
.stat.expense .value{color:var(--rust);}
.stat.balance .value{color:var(--ink);}

table{width:100%;border-collapse:collapse;font-size:.92rem;}
th{
  text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:#6b6250;border-bottom:2px solid var(--line);padding:8px 8px;
}
td{padding:9px 8px;border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}
.amt{font-family:'IBM Plex Mono',monospace;text-align:right;white-space:nowrap;}
.amt.income{color:var(--green);}
.amt.expense{color:var(--rust);}
.tag{
  display:inline-block;background:var(--paper-dim);border:1px solid var(--line);
  border-radius:20px;padding:2px 10px;font-size:.75rem;color:var(--ink);
}
.status{display:inline-block;border-radius:20px;padding:2px 10px;font-size:.75rem;font-weight:600;}
.status.draft{background:#EAE3D2;color:#6b6250;}
.status.sent{background:#FDF0DC;color:#8a6110;}
.status.paid{background:#E1EEE4;color:var(--green);}

.error{background:#FBE6DD;border:1px solid var(--rust);color:#8a3a1c;padding:10px 14px;border-radius:var(--radius);margin-bottom:14px;}
.success{background:#E1EEE4;border:1px solid var(--green);color:#1e4d2e;padding:10px 14px;border-radius:var(--radius);margin-bottom:14px;}

.empty{color:#8a806a;font-style:italic;padding:20px 0;text-align:center;}

.login-wrap{max-width:380px;margin:60px auto;padding:0 16px;}
.login-wrap .card{padding:28px 24px;}

.invitem-row{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px;}
.invitem-row .desc{flex:3;}
.invitem-row .qty,.invitem-row .rate{flex:1;}
.invitem-row .rm{flex:0 0 auto;}

/* Invoice print view */
.invoice-sheet{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 30px;max-width:700px;margin:0 auto;
}
.invoice-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;border-bottom:3px double var(--ink);padding-bottom:16px;margin-bottom:20px;}
.invoice-head .biz{font-family:'Playfair Display',serif;font-weight:700;font-size:1.4rem;color:var(--ink);}
.invoice-head .meta{text-align:right;font-size:.88rem;color:#6b6250;}
.invoice-head .meta strong{color:var(--ink);font-family:'IBM Plex Mono',monospace;}
.bill-to{margin-bottom:20px;font-size:.92rem;}
.bill-to .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#6b6250;margin-bottom:2px;}
.totals{margin-top:14px;margin-left:auto;max-width:280px;font-size:.92rem;}
.totals div{display:flex;justify-content:space-between;padding:4px 0;}
.totals .grand{font-weight:700;font-size:1.15rem;border-top:2px solid var(--ink);margin-top:6px;padding-top:8px;color:var(--ink);}

@media print{
  .nav,.no-print{display:none !important;}
  body{background:#fff;}
  .invoice-sheet{border:none;padding:0;}
  .wrap{padding:0;max-width:none;}
}

@media (max-width:600px){
  .invoice-head{flex-direction:column;}
  .invoice-head .meta{text-align:left;}
}