:root{
  --brand:#4ea3a1; --brand-600:#3a8b89; --brand-700:#2f7a78;
  --ink-900:#111827; --ink-800:#1f2937; --ink-700:#4b5563; --ink-500:#6b7280;
  --muted:#9aa3b2;
  --border:#e5e7eb; --panel:#ffffff; --bg:#f6f7fb;
  --radius:16px; --shadow:0 12px 28px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  --focus:0 0 0 3px rgba(78,163,161,.25);
  --chip:#eef5f5; --chip-border:#d7e8e7;
}
*,:before,:after{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--ink-900); background:var(--bg)}
a{color:inherit; text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:0 20px}

/* App bar */
.appbar{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.appbar__wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:24px; width:auto}
.brand span{font-weight:800}
.tabs{display:flex; align-items:center; gap:20px}
.tab{padding:8px 2px; color:var(--ink-700); font-weight:600}
.tab.is-active{color:var(--brand-700); position:relative}
.tab.is-active::after{content:""; position:absolute; left:0; right:0; bottom:-12px; height:3px; border-radius:4px; background:var(--brand)}
.right{display:flex; align-items:center; gap:12px}
.avatar{width:28px; height:28px; border-radius:50%; background:linear-gradient(145deg,#dfeff0,#cfe6e5); border:1px solid #cfe2e2}

/* Common components */
.page{padding:18px 0 50px}
.hbar{background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 14px; margin:6px 0 12px}
.hbar h1{margin:0; font-size:18px}
.panel{background:#fff; border:1px solid var(--border); border-radius:18px; padding:16px}
.card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px}
.grid-3{display:grid; grid-template-columns:1fr; gap:14px}
.grid-2{display:grid; grid-template-columns:1fr; gap:14px}
.grid-4{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:860px){ .grid-2{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} }

.kpis{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:1040px){ .kpis{grid-template-columns:repeat(4,1fr)} }
.kpi{background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 14px}
.kpi h4{margin:0 0 4px; font-size:14px; color:var(--ink-700)}
.kpi .value{font:800 20px/1 Inter}

.pill{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:999px; padding:8px 12px; font-weight:700; color:var(--ink-800)}
.btn{appearance:none; border:1px solid var(--border); background:#fff; padding:10px 12px; border-radius:12px; font-weight:700; cursor:pointer}
.btn:hover{box-shadow:var(--shadow)}
.btn--brand{background:var(--brand); color:#fff; border-color:transparent}
.btn--brand:hover{background:var(--brand-600)}

.list{display:grid; gap:12px; padding:0; margin:0; list-style:none}
.row{background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.row .meta{color:var(--ink-700); font-size:14px}
.badge{display:inline-block; width:10px; height:10px; border-radius:50%; background:#b7d7d5; margin-right:8px}

.search{position:relative}
.search input{width:100%; padding:12px 44px 12px 14px; border:1px solid var(--border); border-radius:14px}
.search input:focus{outline:none; border-color:var(--brand); box-shadow:var(--focus)}

/* Grids for cards */
.card-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:760px){ .card-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .card-grid{grid-template-columns:repeat(3,1fr)} }

.app-card{display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:flex-start}
.app-icon{width:28px; height:28px; border-radius:50%; background:linear-gradient(145deg,#e8f2f1,#d8ecea); border:1px solid var(--chip-border)}
.app-title{margin:0 0 2px; font-weight:800}
.app-sub{margin:0; color:var(--ink-700); font-size:14px}
.app-foot{margin-top:10px; color:var(--ink-700); font-size:13px}

.placeholder{min-height:220px; border-radius:12px; background:#fbfcfd; border:1px dashed #cfd6de; display:flex; align-items:center; justify-content:center; color:var(--ink-500)}