@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#f7f4ee; --paper-raised:#ffffff; --ink:#182430; --ink-soft:#4c5a68;
  --line:#ded6c6; --line-soft:#e9e3d6; --accent:#2f6f5e; --accent-soft:#e4ece8;
  --amber:#8a6415; --amber-soft:#f2e8d2; --rust:#a3402c; --rust-soft:#f4e0da;
  --slate-soft:#e7e9ec;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141a1f; --paper-raised:#1b232a; --ink:#eae5da; --ink-soft:#a7b0b8;
    --line:#333f47; --line-soft:#26313a; --accent:#7cc7ae; --accent-soft:#1e2f2a;
    --amber:#d8ac4e; --amber-soft:#33291a; --rust:#e0906c; --rust-soft:#33241d;
    --slate-soft:#242c33;
  }
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
}
button, select, input, textarea{ font-family:inherit; font-size:inherit; }
a{ color:var(--accent); }

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

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:2px solid var(--ink); padding-bottom:16px; margin-bottom:24px; gap:16px; flex-wrap:wrap;
}
.topbar h1{ font-family:'Fraunces', serif; font-weight:500; font-size:1.4rem; margin:0; }
.topbar .who{ font-size:0.85rem; color:var(--ink-soft); display:flex; align-items:center; gap:10px; }
.topbar .who .badge{ background:var(--accent-soft); color:var(--accent); padding:3px 9px; border-radius:999px; font-size:0.72rem; font-weight:600; text-transform:uppercase; }

.tabs{ display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tab{
  padding:9px 14px; font-size:0.85rem; cursor:pointer; border:none; background:none; color:var(--ink-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab.active{ color:var(--ink); border-bottom-color:var(--accent); font-weight:600; }

.panel{ display:none; flex-direction:column; gap:18px; }
.panel.active{ display:flex; }

.card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
}
.hint{ font-size:0.82rem; color:var(--ink-soft); }

.stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.stat{ background:var(--paper-raised); padding:14px 16px; display:flex; flex-direction:column; gap:5px; }
.stat .k{ font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); }
.stat .v{ font-family:'IBM Plex Mono', monospace; font-size:1.15rem; }
.stat.credit .v{ color:var(--accent); }

.cards{ display:flex; flex-direction:column; gap:10px; }
.mcard{ background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.mcard-top{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mcard-title{ font-weight:600; }
.mcard-meta{ font-size:0.8rem; color:var(--ink-soft); margin-top:3px; }
.pill{ font-size:0.7rem; font-weight:600; padding:4px 10px; border-radius:999px; text-transform:uppercase; height:fit-content; }
.pill.done{ background:var(--accent-soft); color:var(--accent); }
.pill.planned{ background:var(--slate-soft); color:var(--ink-soft); }
.pill.progress{ background:var(--amber-soft); color:var(--amber); }
.pill.late{ background:var(--rust-soft); color:var(--rust); }

.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); }
select, input[type=text], input[type=date], input[type=number], input[type=email], input[type=password]{
  border:1px solid var(--line); border-radius:7px; padding:7px 9px; background:var(--paper); color:var(--ink);
}
textarea{ border:1px solid var(--line); border-radius:7px; padding:8px 10px; background:var(--paper); color:var(--ink); width:100%; min-height:46px; }

.btn{ border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); border-radius:7px; padding:8px 14px; cursor:pointer; font-size:0.85rem; }
.btn:hover{ border-color:var(--ink-soft); }
.btn.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.small{ padding:4px 10px; font-size:0.76rem; }
.btn.danger{ color:var(--rust); border-color:var(--rust); }

.ledger{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.ledger-row{ display:flex; justify-content:space-between; padding:9px 14px; border-bottom:1px solid var(--line-soft); font-size:0.85rem; }
.ledger-row:last-child{ border-bottom:none; }
.ledger-row.total{ background:var(--accent-soft); font-weight:600; }
.amt{ font-family:'IBM Plex Mono', monospace; }

.login-screen{ max-width:360px; margin:80px auto; display:flex; flex-direction:column; gap:16px; }
.login-screen h1{ font-family:'Fraunces', serif; font-size:1.4rem; text-align:center; margin:0; }
.login-screen .sub{ text-align:center; font-size:0.85rem; color:var(--ink-soft); margin-top:-10px; }
.field{ display:flex; flex-direction:column; gap:5px; }
.error-msg{ color:var(--rust); font-size:0.82rem; min-height:1em; }

.admin-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.admin-form .full{ grid-column:1/-1; }
.villa-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.villa-chip{ padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-size:0.8rem; cursor:pointer; background:var(--paper-raised); }
.villa-chip.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.item-list{ display:flex; flex-direction:column; gap:8px; }
.item-row{ display:grid; grid-template-columns:1fr 100px 32px; gap:8px; align-items:center; }

.hidden{ display:none !important; }