:root{
  --cream:#f8f5ee; --cream-2:#f1ece0; --card:#ffffff; --ink:#2a2f29; --muted:#716b5c;
  --line:#e4ddcc; --sage:#4c5f56; --sage-deep:#37453f; --gold:#a9855f; --gold-lt:#e9dcc4; --gold-pale:#f5ecd9;
  --good:#2c6b41; --good-bg:#eef4ef; --bad:#a3532c; --bad-bg:#f8ece7;
  --radius:10px; --radius-lg:14px;
}
*{box-sizing:border-box;}
body{margin:0; font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; background:var(--cream); color:var(--ink); line-height:1.5;}
.wrap{max-width:1360px; margin:0 auto; padding:0 24px;}

/* ---------- Passcode gate ---------- */
#gate{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.gate-box{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px 36px; max-width:380px; width:100%; text-align:center; box-shadow:0 8px 30px rgba(42,47,41,.08);}
.gate-box h1{font-size:1.3rem; margin:0 0 6px;}
.gate-box p{color:var(--muted); font-size:0.9rem; margin:0 0 22px;}
.gate-box input{width:100%; padding:12px 14px; border-radius:var(--radius); border:1px solid var(--line); font-size:1.05rem; text-align:center; letter-spacing:.05em; margin-bottom:12px;}
.gate-box input:focus{outline:none; border-color:var(--gold);}
.gate-box button{width:100%; padding:12px; border-radius:var(--radius); border:none; background:var(--sage); color:#fff; font-weight:600; font-size:0.95rem; cursor:pointer;}
.gate-box button:hover{background:var(--sage-deep);}
.gate-err{color:var(--bad); font-size:0.85rem; margin-top:10px; min-height:1.2em;}

/* ---------- App shell ---------- */
#app{display:none;}
header.top{padding:34px 0 20px; border-bottom:1px solid var(--line);}
header.top h1{font-family:Georgia,serif; font-size:1.7rem; margin:0 0 4px; color:var(--sage-deep);}
header.top p{color:var(--muted); margin:0; font-size:0.95rem;}

/* ---------- Summary cards ---------- */
.summary-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:24px 0;}
.summary-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 20px;}
.summary-card .label{font-size:0.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600;}
.summary-card .value{font-size:1.5rem; font-weight:700; margin-top:4px; color:var(--sage-deep);}
.summary-card .value.bad{color:var(--bad);}
.summary-card .value.good{color:var(--good);}

/* ---------- Contractor tabs ---------- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 22px;}
.tab-btn{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:9px 18px; font-size:0.88rem; font-weight:600; cursor:pointer; color:var(--muted);}
.tab-btn.active{background:var(--sage); border-color:var(--sage); color:#fff;}
.tab-meta{color:var(--muted); font-size:0.85rem; margin-bottom:18px;}
.tab-meta strong{color:var(--ink);}

/* ---------- Table ---------- */
.qtable{width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 1px 3px rgba(42,47,41,.06); margin-bottom:36px;}
.qtable th{text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:10px 12px; border-bottom:2px solid var(--line); background:var(--cream-2); position:sticky; top:0;}
.qtable td{padding:10px 12px; border-bottom:1px solid var(--line); font-size:0.88rem; vertical-align:top;}
.qtable tr.section-row td{background:var(--sage); color:#fff; font-weight:700; padding:9px 12px; font-size:0.85rem;}
.qtable tr.section-row td.sec-total{text-align:right;}
.qtable tr:last-child td{border-bottom:none;}
.qtable td.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.qtable td.item-no{color:var(--muted); font-size:0.8rem; white-space:nowrap;}
.qtable td.desc{max-width:420px;}
.qtable .amount-label{color:var(--muted); font-style:italic;}
.target-input{width:100px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:0.85rem; text-align:right; font-variant-numeric:tabular-nums;}
.target-input:focus{outline:none; border-color:var(--gold);}
.comment-input{width:100%; min-width:180px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:0.83rem; resize:vertical; min-height:34px; font-family:inherit;}
.comment-input:focus{outline:none; border-color:var(--gold);}
.save-dot{display:inline-block; width:6px; height:6px; border-radius:50%; margin-left:6px; background:transparent; vertical-align:middle;}
.save-dot.saving{background:var(--gold);}
.save-dot.saved{background:var(--good);}
tfoot td{font-weight:700; background:var(--cream-2); border-top:2px solid var(--line);}

.hint{background:var(--gold-pale); border:1px solid var(--gold-lt); border-radius:var(--radius); padding:14px 18px; font-size:0.85rem; color:var(--sage-deep); margin-bottom:22px;}
footer{text-align:center; color:var(--muted); font-size:0.8rem; padding:30px 0 50px;}

@media (max-width:760px){
  .qtable{font-size:0.8rem;}
  .qtable th, .qtable td{padding:8px 8px;}
  .qtable td.desc{max-width:220px;}
  .target-input{width:80px;}
}