:root{
  --bg:#f5f8f7; --surface:#ffffff; --ink:#16211f; --muted:#6c7975;
  --line:#e3e8e7; --line-strong:#d3dad8;
  --brand:#2f6f6b; --brand-ink:#20514e; --brand-tint:#e3efed; --brand-tint-2:#f0f6f5;
  --danger:#a4331f; --danger-tint:#f6e7e3;
  --radius:9px; --shadow:0 1px 2px rgba(16,33,31,.05);
  --font:ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;}
a{color:var(--brand-ink);text-decoration:none;}
h1{font-size:20px;font-weight:650;margin:0;letter-spacing:-.01em;}
h2{font-size:15px;font-weight:650;margin:0 0 .6rem;}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:224px 1fr;min-height:100vh;}

.sidebar{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.brand{display:flex;align-items:center;gap:.55rem;padding:1.05rem 1.1rem;border-bottom:1px solid var(--line);color:var(--ink);}
.brand .mark{width:26px;height:26px;flex:none;color:var(--brand);}
.brand b{font-size:15px;letter-spacing:.01em;}
.nav{padding:.6rem .55rem;display:flex;flex-direction:column;gap:2px;}
.nav a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:8px;color:var(--muted);font-weight:500;position:relative;}
.nav a svg{width:17px;height:17px;flex:none;}
.nav a:hover{background:var(--brand-tint-2);color:var(--ink);}
.nav a.active{background:var(--brand-tint);color:var(--brand-ink);font-weight:600;}
.nav a.active::before{content:"";position:absolute;left:-.55rem;top:.35rem;bottom:.35rem;width:3px;border-radius:0 3px 3px 0;background:var(--brand);}
.nav .group{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#9aa4a1;padding:.9rem .6rem .3rem;font-weight:600;}
.side-foot{margin-top:auto;padding:.85rem 1.1rem;border-top:1px solid var(--line);color:#9aa4a1;font-size:12px;display:flex;align-items:center;gap:.4rem;}
.side-foot .dot{width:7px;height:7px;border-radius:50%;background:#4a9d7e;flex:none;}

.main{display:flex;flex-direction:column;min-width:0;}
.content{padding:1.2rem 1.6rem 2.5rem;width:100%;max-width:1180px;}

/* ---------- Page header ---------- */
.pagehead{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1rem;flex-wrap:wrap;}
.pagehead .count{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;}
.pagehead .spacer{flex:1;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:13px;font-weight:550;
     border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
     padding:.42rem .7rem;border-radius:8px;cursor:pointer;white-space:nowrap;text-decoration:none;}
.btn svg{width:15px;height:15px;}
.btn:hover{border-color:#bcc6c3;background:#fbfcfc;}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn.primary:hover{background:var(--brand-ink);border-color:var(--brand-ink);}
.btn.danger{color:var(--danger);border-color:#e2c4be;}
.btn.danger:hover{background:var(--danger-tint);border-color:#d9b3ab;}

.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;
     border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;vertical-align:middle;}
.iconbtn svg{width:16px;height:16px;}
.iconbtn:hover{background:var(--brand-tint-2);color:var(--ink);}
.iconbtn.danger:hover{background:var(--danger-tint);color:var(--danger);}

/* ---------- Toolbar / filters ---------- */
.toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.toolbar label{font-size:12px;color:var(--muted);font-weight:600;}
.toolbar .spacer{flex:1;}

select,input[type=text],textarea{font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
     border:1px solid var(--line-strong);border-radius:8px;padding:.44rem .6rem;}
select:focus,input[type=text]:focus,textarea:focus{outline:2px solid var(--brand-tint);outline-offset:0;border-color:var(--brand);}
select{padding-right:1.7rem;appearance:none;
     background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
     background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px;background-repeat:no-repeat;}
.search{min-width:230px;}

/* ---------- Card & table ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.card.pad{padding:1.1rem 1.25rem;}
.twrap{overflow-x:auto;border-radius:var(--radius);}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead th{position:sticky;top:0;background:#fbfcfc;text-align:left;font-size:11px;text-transform:uppercase;
     letter-spacing:.05em;color:var(--muted);font-weight:650;padding:.55rem .8rem;border-bottom:1px solid var(--line);white-space:nowrap;}
tbody td{padding:.44rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--brand-tint-2);}
td.strong{font-weight:600;white-space:nowrap;}
td.dim{color:var(--muted);white-space:nowrap;}
td.num{font-variant-numeric:tabular-nums;color:var(--muted);}
td.actions{text-align:right;white-space:nowrap;}
td.actions form{display:inline;}
.empty{padding:1.5rem;text-align:center;color:var(--muted);}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:4px;}
.chip{font-size:11px;line-height:1;padding:.24rem .45rem;border-radius:999px;background:var(--brand-tint);color:var(--brand-ink);font-weight:600;white-space:nowrap;}
.chip.more{background:#eef1f0;color:var(--muted);}
.chip.off{background:#f0f1f1;color:#9aa4a1;}

/* ---------- Forms ---------- */
.form{max-width:640px;}
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;}
.field > label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650;}
.field input[type=text],.field select,.field textarea{width:100%;}
.field textarea{min-height:11rem;resize:vertical;line-height:1.5;}
.field .hint{font-size:12px;color:var(--muted);}
.check{flex-direction:row;align-items:center;gap:.5rem;}
.check > label{display:flex;align-items:center;gap:.5rem;font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:500;}
.checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.4rem;}
.checkgrid label{display:flex;align-items:center;gap:.5rem;padding:.4rem .55rem;border:1px solid var(--line);border-radius:8px;font-size:13px;cursor:pointer;}
.checkgrid label:hover{background:var(--brand-tint-2);border-color:var(--line-strong);}
.checkgrid input{accent-color:var(--brand);}
.formactions{display:flex;gap:.5rem;margin-top:.4rem;}

/* ---------- Choice grid (Liste) ---------- */
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;}
.choice{display:flex;align-items:center;gap:.55rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow);}
.choice:hover{border-color:var(--brand);background:var(--brand-tint-2);}
.choice svg{width:16px;height:16px;color:var(--brand);flex:none;}

/* ---------- Home stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem;margin-bottom:1.2rem;}
.stat{display:block;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);}
.stat:hover{border-color:var(--brand);}
.stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650;}
.stat .v{font-size:30px;font-weight:680;line-height:1.1;margin-top:.25rem;font-variant-numeric:tabular-nums;}

/* ---------- Misc ---------- */
.muted{color:var(--muted);}
.lede{color:var(--muted);margin:0 0 1.2rem;max-width:60ch;}
.error{background:var(--danger-tint);border:1px solid #e2c4be;color:var(--danger);padding:.7rem .9rem;border-radius:8px;margin-bottom:1rem;}

@media (max-width:720px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto;}
  .brand{border-bottom:none;border-right:1px solid var(--line);}
  .nav{flex-direction:row;padding:.4rem;}
  .nav .group,.side-foot{display:none;}
  .nav a.active::before{display:none;}
}