:root{
  --brand:#4ea3a1; --brand-600:#3a8b89; --brand-700:#2f7a78;
  --accent:#c27652; --accent-700:#a96444;
  --ink-900:#111827; --ink-800:#1f2937; --ink-700:#4b5563; --ink-500:#6b7280;
  --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}

/* Topbar */
.topbar{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.topbar__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}
.links{display:flex; align-items:center; gap:20px}
.links a{color:var(--ink-700); font-weight:600}
.links a.active{color:var(--brand-700); position:relative}
.links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-12px; height:3px; background:var(--brand); border-radius:4px}
.right{display:flex; align-items:center; gap:10px}
.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--accent{background:var(--accent); color:#fff; border-color:transparent}
.btn--accent:hover{background:var(--accent-700)}

/* Common blocks */
.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:20px}
.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:2fr 1fr} }
@media (min-width:1180px){ .grid-4{grid-template-columns:repeat(3,1fr)} }

.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}
.list{display:grid; gap:12px; padding:0; margin:0; list-style:none}
.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)}

.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)}

.stat-cards{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:1020px){ .stat-cards{grid-template-columns:repeat(3,1fr)} }
.kpi{background:#fff; border:1px solid var(--border); border-radius:14px; padding:12px 14px}
.kpi .label{color:var(--ink-700); font-size:14px}
.kpi .value{font:800 20px/1 Inter}
.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)}
.card-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:900px){ .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)}
.title{margin:0 0 2px; font-weight:800}
.sub{margin:0; color:var(--ink-700); font-size:14px}
.foot{margin-top:10px; color:var(--ink-700); font-size:13px}

/* Marketing hero for Partners landing */
.hero{background:linear-gradient(#ffffff,#f5f7f9); border-bottom:1px solid var(--border)}
.hero-inner{padding:22px 0}
.hero h1{font-size:clamp(26px,4.6vw,40px); margin:0 0 10px}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap}
.metrics{display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px}
@media (min-width:840px){ .metrics{grid-template-columns:repeat(3,1fr)} }
.metric{background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px}
.metric .value{font:800 22px/1 Inter}
.metric .label{color:var(--ink-700)}
.quote{background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px}