:root{
  --bg:#f4f6f3; --panel:#ffffff; --panel2:#eef1ea; --border:#dfe5da;
  --text:#2c332c; --muted:#7d8778;
  --accent:#3aaa35; --accent-text:#ffffff;
  --accent2:#ed8509; --sage:#9dad8c; --gray:#878787;
  --danger:#c9463f; --ok:#3aaa35; --radius:10px;
  --shadow:0 1px 2px rgba(44,51,44,.05), 0 1px 8px rgba(44,51,44,.04);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}
.hidden{display:none !important}
button{cursor:pointer;font-family:inherit}
input,select,textarea{width:100%;font-family:inherit;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:8px 10px}
input:disabled,select:disabled{opacity:.55;cursor:not-allowed}
img{max-width:100%;height:auto}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
.field{margin-bottom:12px}
.btn{background:var(--accent);border:none;color:var(--accent-text);font-weight:600;padding:9px 16px;border-radius:8px}
.btn:hover{background:#329b2d}
.btn.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.secondary:hover{background:var(--panel2)}
.btn.danger{background:var(--danger);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Login */
#loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f4f6f3,#eef2ea);padding:16px}
.login-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;width:100%;max-width:320px;text-align:center}
.login-logo{max-width:220px;width:100%;height:auto;margin:0 auto 18px;display:block}
.login-card h1{font-size:18px;margin:0 0 4px;color:var(--text)}
.login-card p{color:var(--muted);font-size:13px;margin:0 0 20px}
.login-card form{text-align:left}
.login-card .error{color:var(--danger);font-size:13px;margin-top:8px;min-height:16px}
@media(max-width:400px){.login-card{padding:22px}}

/* App shell */
#app{max-width:1200px;margin:0 auto;padding:20px;width:100%}
header.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px;border-bottom:3px solid var(--sage);padding-bottom:14px}
header.topbar .brand{display:flex;align-items:center;gap:10px;min-width:0}
header.topbar .brand img{height:34px;width:auto;display:block;flex:none}
header.topbar h1{font-size:18px;margin:0;color:var(--text)}
header.topbar .who{color:var(--muted);font-size:13px}
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tab{padding:8px 14px;border-radius:20px;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-size:13px}
.tab.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:18px;max-width:100%}
.panel h2{font-size:15px;margin:0 0 14px;color:var(--text)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:700px){
  #app{padding:14px}
  .grid2,.grid3{grid-template-columns:1fr}
  header.topbar h1{font-size:16px}
  header.topbar .brand img{height:28px}
}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px}
table{width:100%;min-width:560px;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
tr:hover td{background:var(--panel2)}
.status-badge{padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.status-open{background:rgba(237,133,9,.14);color:var(--accent2)}
.status-closed{background:rgba(58,170,53,.14);color:var(--ok)}
.money{font-variant-numeric:tabular-nums}
.small{font-size:12px;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media(max-width:700px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--panel);border:1px solid var(--border);border-top:3px solid var(--sage);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .value{font-size:20px;font-weight:700;margin-top:4px;color:var(--text)}
.actions-cell{display:flex;gap:6px}
.actions-cell button{padding:5px 9px;font-size:12px;border-radius:6px}
.invoice-link{color:var(--accent2);text-decoration:none;font-size:12px;font-weight:600}
.modal-backdrop{position:fixed;inset:0;background:rgba(44,51,44,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;width:520px;max-width:100%;max-height:90vh;overflow:auto}
.modal h3{margin:0 0 16px;color:var(--text)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);padding:10px 16px;border-radius:8px;font-size:13px;z-index:60;color:var(--text)}
.toast.err{border-color:var(--danger);color:var(--danger)}