:root{
  --bg:#f7fafc; --text:#0f1b2a; --muted:#617089; --accent:#ffd800; --brand:#0e3b5f; --card:#ffffff; --border:#dfe6ee;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
a{color:var(--text);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{width:min(1200px,90vw);margin:auto}

.topbar{background:#fff;border-bottom:1px solid var(--border);font-size:.9rem}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.topbar-left{color:var(--muted)}
.topbar-right{display:flex;align-items:center;gap:10px}
.top-search input{background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px 10px}

.site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:18px;padding:8px 0}
.logo img{height:40px}
@media (max-width:1024px){ .logo img{height:34px} }
@media (max-width:640px){ .logo img{height:28px} }
.nav-toggle{display:none;border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px}
.primary-nav ul{display:flex;list-style:none;gap:18px;padding:0;margin:0}
.primary-nav ul li{position:relative}
.primary-nav ul li a{padding:10px 0;display:inline-block;font-weight:700}
.live-btn{margin-left:auto;background:var(--accent);color:#1b1b1b;padding:8px 12px;border-radius:10px;font-weight:800}

.primary-nav .sub-menu{position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--border);border-radius:14px;min-width:250px;padding:8px 0;display:none;z-index:1002}
.primary-nav li:hover>.sub-menu{display:block}
.primary-nav .sub-menu.mega{display:none;padding:16px;min-width:820px}
.primary-nav li:hover>.sub-menu.mega{display:grid}
.primary-nav .sub-menu.mega{grid-template-columns:repeat(4,1fr);gap:14px}
.primary-nav .sub-menu.mega li a{padding:6px 8px;display:block}

.site-main{min-height:60vh;padding:72px 0 16px} /* top padding for player */
.home-hero{display:grid;gap:18px}
.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hero-post{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px;margin-bottom:12px}
.grid-post{background:var(--card);border:1px solid var(--border);padding:8px;border-radius:12px}
.meta{color:var(--muted);font-size:.9rem}

.sections{display:grid;gap:22px;padding:8px 0 24px}
.section-block{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.section-block .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px}

.single-wrap{display:grid;grid-template-columns:1fr 320px;gap:24px;padding:24px 0}
.sidebar .widget{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:14px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related .rel{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px}
.related .rel h4{margin:.4rem 0;font-size:.95rem}

.archive .archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.site-footer{border-top:1px solid var(--border);margin-top:20px;padding:20px 0;background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between}

/* Player TOP (compact) */
#sob-player{position:fixed;top:0;left:0;right:0;height:56px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:6px 10px;z-index:9999}
#sob-player .sob-toggle{border:0;background:#0e3b5f;color:#fff;border-radius:999px;width:28px;height:28px;cursor:pointer;font-weight:800}
#sob-player .sob-vol{width:90px}
#sob-player .sob-cover{width:32px;height:32px;border-radius:6px;object-fit:cover;display:none}
#sob-player .sob-info{display:flex;flex-direction:column;line-height:1.1}
#sob-player .sob-info strong{font-size:.95rem}
#sob-player .sob-info small{font-size:.8rem;color:#617089}

@media (max-width:1024px){
  .primary-nav .sub-menu.mega{min-width:90vw;grid-template-columns:repeat(3,1fr)}
  .hero-grid{grid-template-columns:repeat(2,1fr)}
  .section-block .cards{grid-template-columns:repeat(2,1fr)}
  .more-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav-toggle{display:block}
  .primary-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--border);padding:10px}
  .primary-nav.open{display:block}
}
@media (max-width:700px){
  .archive .archive-grid{grid-template-columns:1fr}
  .single-wrap{grid-template-columns:1fr}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .related-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .more-grid{grid-template-columns:1fr}
}