:root {
  --primary: #ff2d55;
  --secondary: #111827;
  --bg: #0b1020;
  --surface: #121931;
  --card: #0f172a;
  --muted: #94a3b8;
  --text: #e5eefc;
  --border: rgba(148,163,184,.16);
  --shadow: 0 18px 60px rgba(15,23,42,.25);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:Inter,system-ui,sans-serif; background:linear-gradient(180deg,#08101f,#0d1328 35%,#09101d); color:var(--text); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { width:min(1280px, calc(100% - 32px)); margin:0 auto; }
.topbar { border-bottom:1px solid var(--border); background:rgba(9,16,29,.82); backdrop-filter: blur(12px); position:sticky; top:0; z-index:60; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:88px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand-logo { width:54px; height:54px; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,var(--primary),#fb7185); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; font-weight:800; }
.brand-text h1 { margin:0; font-size:1.2rem; }
.brand-text p { margin:6px 0 0; color:var(--muted); font-size:.92rem; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.ad-box { background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.16); border-radius:18px; padding:10px; position:relative; overflow:hidden; }
.ad-box img { width:100%; height:auto; object-fit:cover; border-radius:14px; }
.ad-close { position:absolute; right:10px; top:10px; width:32px; height:32px; border:none; border-radius:999px; background:rgba(15,23,42,.9); color:#fff; cursor:pointer; font-size:20px; z-index:2; }
.hero-ad { margin:22px auto; }
.layout { display:grid; grid-template-columns:minmax(0, 1.85fr) 360px; gap:26px; align-items:start; }
.player-card, .panel, .post-card, .content-card, .blog-sidebar { background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.player-card { overflow:hidden; }
.player-stage { position:relative; background:#000; aspect-ratio:16/9; }
.player-stage iframe, .player-stage video, .player-stage .custom-embed { width:100%; height:100%; border:0; }
.player-overlay-ad { position:absolute; inset:auto 20px 20px auto; width:min(320px, 40%); z-index:4; }
.player-header { padding:20px 22px 8px; }
.player-header h2 { margin:0 0 8px; font-size:1.4rem; }
.player-header p { margin:0; color:var(--muted); }
.channel-list { padding:18px; display:grid; gap:12px; max-height:780px; overflow:auto; }
.channel-item { padding:14px 16px; border-radius:18px; border:1px solid var(--border); background:rgba(255,255,255,.025); display:flex; align-items:center; justify-content:space-between; gap:10px; transition:.2s ease; }
.channel-item:hover, .channel-item.is-active { border-color:rgba(255,45,85,.35); transform:translateY(-1px); }
.channel-item small { color:var(--muted); }
.section { margin-top:34px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.section-head h3 { margin:0; font-size:1.45rem; }
.section-head p { margin:8px 0 0; color:var(--muted); }
.post-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.post-card { overflow:hidden; }
.post-card-thumb { aspect-ratio:16/9; background:#111827; overflow:hidden; }
.post-card-thumb img { width:100%; height:100%; object-fit:cover; }
.post-card-body { padding:18px; }
.post-card-body h4 { margin:0 0 10px; font-size:1.06rem; }
.post-card-body p { margin:0; color:var(--muted); line-height:1.7; }
.meta { display:flex; gap:12px; align-items:center; color:var(--muted); font-size:.85rem; margin-bottom:12px; }
.intro-grid { display:grid; grid-template-columns: minmax(0, 1.3fr) 280px; gap:24px; }
.content-card { padding:24px; }
.content-card p, .content-card li { color:#d8e1f0; line-height:1.85; }
.content-card h1, .content-card h2, .content-card h3 { line-height:1.2; }
.footer { margin-top:48px; border-top:1px solid var(--border); padding:26px 0 50px; color:var(--muted); }
.footer-grid { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.float-ad { position:fixed; top:120px; width:140px; z-index:40; display:block; }
.float-ad.left { left:12px; }
.float-ad.right { right:12px; }
.popup-ad { position:fixed; inset:0; background:rgba(2,6,23,.68); display:none; align-items:center; justify-content:center; padding:16px; z-index:80; }
.popup-ad.is-visible { display:flex; }
.popup-ad .popup-inner { width:min(560px, 100%); }
.list-reset { list-style:none; padding:0; margin:0; }
.page-hero { padding:36px 0 14px; }
.article-layout { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:28px; }
.article-cover { aspect-ratio:16/8; overflow:hidden; border-radius:24px; margin-bottom:22px; background:#111827; }
.article-cover img { width:100%; height:100%; object-fit:cover; }
.prose { font-size:1.02rem; }
.prose img { border-radius:20px; margin:18px 0; }
.prose iframe { max-width:100%; border-radius:20px; }
.admin-shell { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh; }
.admin-sidebar { background:#0b1222; border-right:1px solid var(--border); padding:24px; position:sticky; top:0; height:100vh; }
.admin-sidebar a { display:block; padding:12px 14px; border-radius:14px; color:#d6deef; margin-bottom:8px; background:transparent; }
.admin-sidebar a:hover, .admin-sidebar a.active { background:rgba(255,255,255,.06); }
.admin-main { padding:28px; }
.admin-card { background:#0b1222; border:1px solid var(--border); border-radius:24px; padding:22px; margin-bottom:20px; }
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.admin-card label { display:block; font-weight:600; margin-bottom:6px; }
.admin-card input, .admin-card textarea, .admin-card select { width:100%; background:#111827; border:1px solid rgba(255,255,255,.08); color:#eef2ff; border-radius:14px; padding:13px 14px; font:inherit; }
.admin-card textarea { min-height:140px; resize:vertical; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:none; border-radius:999px; background:var(--primary); color:#fff; padding:12px 20px; font-weight:700; cursor:pointer; }
.btn-secondary { background:#1e293b; }
.notice { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.28); color:#dcfce7; padding:14px 16px; border-radius:16px; margin-bottom:18px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:14px 12px; border-bottom:1px solid var(--border); text-align:left; }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(480px,100%); background:#0b1222; border:1px solid var(--border); border-radius:24px; padding:28px; }
@media (max-width: 1380px){ .float-ad{ display:none; } }
@media (max-width: 1100px){ .layout, .article-layout, .intro-grid, .post-grid { grid-template-columns:1fr; } .topbar-inner{padding:12px 0; flex-wrap:wrap;} }
@media (max-width: 760px){ .container { width:min(100% - 20px, 1280px); } .admin-shell{ grid-template-columns:1fr;} .admin-sidebar{ position:relative; height:auto;} .admin-grid{ grid-template-columns:1fr;} .brand-text p{ display:none; } }