/* CricZebra App theme — ultra-lightweight CSS (no framework) */
:root{
  --cz-bg:#f7faf8; --cz-fg:#152521; --cz-muted:#6a7770;
  --cz-card:#fff; --cz-border:#e3ebe6;
  --cz-pitch:#2f9e6b; --cz-pitch-fg:#fff;
  --cz-gold:#e6b325; --cz-gold-fg:#152521;
  --cz-sidebar:#0f3d2e; --cz-sidebar-fg:#f6f9f7;
  --cz-radius:14px;
  --cz-shadow:0 4px 20px -4px rgba(15,61,46,.15);
  --cz-max:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cz-bg);color:var(--cz-fg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Header */
.cz-header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--cz-border);backdrop-filter:blur(8px)}
.cz-header-inner{max-width:var(--cz-max);margin:0 auto;padding:8px 12px;display:flex;align-items:center;gap:10px;height:56px}
.cz-menu-btn{background:none;border:0;padding:6px;cursor:pointer;color:var(--cz-fg)}
.cz-logo img{height:32px;width:auto}
.cz-brand{font-weight:800;font-size:20px}
.cz-lang{margin-left:auto;display:inline-flex;background:#eef3f0;border-radius:9999px;padding:3px}
.cz-lang button{background:none;border:0;padding:4px 12px;border-radius:9999px;font-size:12px;font-weight:700;cursor:pointer;color:var(--cz-muted)}
.cz-lang button.is-active{background:var(--cz-pitch);color:#fff}

/* Shell + sidebar */
.cz-shell{max-width:var(--cz-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:0}
.cz-sidebar{background:var(--cz-sidebar);color:var(--cz-sidebar-fg);padding:16px;position:fixed;top:56px;left:0;bottom:0;width:280px;max-width:85vw;z-index:60;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;-webkit-overflow-scrolling:touch}
body.cz-sidebar-open .cz-sidebar{transform:translateX(0);box-shadow:0 10px 40px rgba(0,0,0,.35)}
body.cz-sidebar-open{overflow:hidden}
.cz-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
body.cz-sidebar-open .cz-backdrop{opacity:1;pointer-events:auto}
.cz-sb-group{margin-bottom:18px}
.cz-sb-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.7;margin-bottom:6px}
.cz-sb-group a{display:flex;justify-content:space-between;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--cz-sidebar-fg)}
.cz-sb-group a:hover{background:rgba(255,255,255,.08)}
.cz-sb-count{opacity:.6;font-size:11px}

@media(min-width:1024px){
  .cz-shell{grid-template-columns:260px 1fr}
  .cz-sidebar{position:sticky;top:56px;left:auto;bottom:auto;width:auto;max-width:none;height:calc(100vh - 56px);transform:none;z-index:1;box-shadow:none}
  .cz-menu-btn{display:none}
  .cz-backdrop{display:none}
  body.cz-sidebar-open{overflow:auto}
}

.cz-main{padding:16px;min-width:0}

/* Sections */
.cz-section{margin-top:24px}
.cz-section-head{display:flex;align-items:center;justify-content:space-between;border-left:4px solid var(--cz-gold);padding-left:10px;margin-bottom:12px}
.cz-section-title{margin:0;font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.cz-more{color:var(--cz-pitch);font-size:12px;font-weight:700}
.cz-more:hover{text-decoration:underline}

/* Grid: hero + 3 equal compact */
.cz-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){
  .cz-grid{grid-template-columns:2fr 1fr;align-items:stretch}
  .cz-grid-side{display:grid;grid-template-rows:1fr 1fr 1fr;gap:10px;min-height:0}
}

/* Hero card */
.cz-hero{display:flex;flex-direction:column;background:var(--cz-card);border:1px solid var(--cz-border);border-radius:var(--cz-radius);overflow:hidden;box-shadow:var(--cz-shadow);transition:transform .2s}
.cz-hero:hover{transform:translateY(-2px)}
.cz-hero-img{aspect-ratio:16/9;background:#e6eee9;overflow:hidden}
.cz-hero-img img{width:100%;height:100%;object-fit:cover}
.cz-hero-body{padding:14px}
.cz-title{margin:8px 0 0;font-size:calc(20px * var(--cz-title-scale,1));font-weight:800;line-height:1.25}

/* Compact card */
.cz-compact{display:flex;gap:10px;padding:8px;border-radius:10px;background:var(--cz-card);border:1px solid var(--cz-border);align-items:center;min-height:0;overflow:hidden}
.cz-compact:hover{background:#f0f6f2}
.cz-compact-img{width:110px;aspect-ratio:16/10;flex:none;border-radius:8px;overflow:hidden;background:#e6eee9}
.cz-compact-img img{width:100%;height:100%;object-fit:cover}
.cz-compact-title{margin:0;font-size:calc(14px * var(--cz-title-scale,1));font-weight:700;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

/* Chip */
.cz-chip{display:inline-block;padding:3px 10px;border-radius:9999px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.cz-chip-gold{background:var(--cz-gold);color:var(--cz-gold-fg)}
.cz-chip-pitch{background:rgba(47,158,107,.12);color:var(--cz-pitch)}

/* List (global infinite) */
.cz-list{display:flex;flex-direction:column;gap:8px}

/* Article */
.cz-article{max-width:760px;margin:0 auto;padding:16px 0}
.cz-article-title{font-size:calc(28px * var(--cz-title-scale,1));font-weight:800;line-height:1.2;margin:10px 0 8px}
.cz-meta{color:var(--cz-muted);font-size:12px;display:flex;gap:8px;margin-bottom:12px}
.cz-actions{display:flex;gap:8px;margin:10px 0}
.cz-actions button{background:var(--cz-card);border:1px solid var(--cz-border);padding:6px 12px;border-radius:9999px;font-size:12px;font-weight:700;cursor:pointer}
.cz-actions button.is-saved{background:var(--cz-pitch);color:#fff;border-color:var(--cz-pitch)}
.cz-article-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin:12px 0}
.cz-prose p{font-size:17px;line-height:1.7;margin:10px 0}
.cz-prose img{border-radius:10px;margin:12px 0}
.cz-prose a{color:var(--cz-pitch);text-decoration:underline}

.cz-footer{border-top:1px solid var(--cz-border);padding:20px;text-align:center;color:var(--cz-muted);font-size:12px}
.cz-search{display:flex;gap:6px}
.cz-search input{flex:1;padding:8px 10px;border:1px solid var(--cz-border);border-radius:8px}
.cz-search button{background:var(--cz-pitch);color:#fff;border:0;border-radius:8px;padding:0 14px;font-weight:700;cursor:pointer}