:root{
  --bg:#0b1220; --card:#111a2e; --text:#e9eefc; --muted:#aab6d6;
  --brand:#f2994a; --line:rgba(255,255,255,.08);
  --max:1100px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:20px}
header{position:sticky;top:0;background:rgba(11,18,32,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-badge{width:34px;height:34px;border-radius:10px;background:var(--brand);display:inline-block}
.links{display:flex;gap:14px;flex-wrap:wrap}
.links a{padding:10px 10px;border-radius:10px;color:var(--muted)}
.links a.active,.links a:hover{background:rgba(242,153,74,.12);color:var(--text)}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start;margin-top:18px}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.h1{font-size:34px;line-height:1.1;margin:0 0 10px}
.p{color:var(--muted);margin:0 0 14px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:transparent;cursor:pointer}
.btn.primary{background:var(--brand);color:#1b1206;border-color:transparent;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.thumb{width:100%;aspect-ratio:16/9;border-radius:14px;background:#0a0f1c;border:1px solid var(--line);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb iframe{width:100%;height:100%;display:block}
.meta{margin-top:10px}
.meta h3{margin:0 0 6px;font-size:16px}
.meta small{color:var(--muted)}
.footer{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}
input[type="search"]{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0a0f1c;color:var(--text)}
.badge{
  display:inline-flex;
  gap:8px;
  align-items:
  center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);color:var(--muted)}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(14px);
  background:rgba(11,18,32,.92);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.header-topbar{
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}

.topbar-inner{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.topbar-tagline{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.02em;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.lang-switch{
  font-size:13px;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid transparent;
  transition:.2s ease;
}

.lang-switch:hover,
.lang-switch.active{
  color:var(--text);
  border-color:rgba(255,255,255,.1);
  background:rgba(242,153,74,.12);
}

.lang-divider{
  color:rgba(255,255,255,.2);
  font-size:12px;
}

.header-main{
  min-height:82px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
}

.header-side{
  display:flex;
  align-items:center;
}

.header-left{
  justify-content:flex-start;
}

.header-right{
  justify-content:flex-end;
}

.header-center{
  display:flex;
  justify-content:center;
}

.site-logo-wrap{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:center;
}

.site-logo{
  height:56px;
  width:auto;
  display:block;
  object-fit:contain;
}

.site-title-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.site-title{
  font-size:22px;
  font-weight:700;
  line-height:1.1;
  color:var(--text);
}

.site-subtitle{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

.youtube-subscribe-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:var(--brand);
  color:#1b1206;
  font-weight:700;
  white-space:nowrap;
  transition:.2s ease;
}

.youtube-subscribe-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(242,153,74,.18);
}

.desktop-nav{
  border-top:1px solid rgba(255,255,255,.04);
}

.desktop-nav-inner{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.nav-link{
  padding:10px 14px;
  border-radius:12px;
  color:var(--muted);
  font-weight:500;
  transition:.2s ease;
}

.nav-link:hover,
.nav-link.active{
  color:var(--text);
  background:rgba(242,153,74,.12);
}

.menu-toggle{
  display:none;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  background:transparent;
  border-radius:12px;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
}

.menu-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  border-radius:999px;
}

.mobile-menu{
  display:none;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(11,18,32,.98);
}

.mobile-menu.open{
  display:block;
}

.mobile-menu-inner{
  padding:14px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile-nav-link{
  padding:12px 14px;
  border-radius:12px;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.02);
}

.mobile-nav-link:hover,
.mobile-nav-link.active{
  color:var(--text);
  background:rgba(242,153,74,.12);
}

.mobile-menu-divider{
  height:1px;
  background:rgba(255,255,255,.08);
  margin:6px 0;
}

.mobile-lang-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.mobile-subscribe{
  margin-top:6px;
  width:100%;
}

@media (max-width: 920px){
  .topbar-left{
    display:none;
  }

  .header-main{
    grid-template-columns:56px 1fr 56px;
    min-height:74px;
  }

  .menu-toggle{
    display:flex;
  }

  .desktop-nav{
    display:none;
  }

  .header-right .youtube-subscribe-btn{
    display:none;
  }

  .site-logo{
    height:48px;
  }

  .site-title{
    font-size:18px;
  }

  .site-subtitle{
    font-size:12px;
  }
}

@media (max-width: 560px){
  .site-logo-wrap{
    gap:10px;
  }

  .site-logo{
    height:42px;
  }

  .site-title{
    font-size:16px;
  }

  .site-subtitle{
    font-size:11px;
  }

  .topbar-inner{
    min-height:36px;
  }


  /* stronger mobile header behavior */
.header-center,
.site-logo-wrap,
.site-title-group {
  min-width: 0;
}

.site-logo-wrap {
  justify-content: center;
}

.site-title-group {
  overflow: hidden;
}

.site-title,
.site-subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 920px) {
  .desktop-nav {
    display: none !important;
  }

  .menu-toggle {
    display: flex !important;
  }

  .mobile-menu {
    display: none !important;
  }

  .mobile-menu.open {
    display: block !important;
  }

  .header-main {
    grid-template-columns: 56px minmax(0, 1fr) 56px !important;
    align-items: center;
  }

  .header-right .youtube-subscribe-btn {
    display: none !important;
  }

  .site-logo {
    height: 42px !important;
  }

  .site-title {
    font-size: 16px !important;
  }

  .site-subtitle {
    font-size: 11px !important;
  }
}

@media (max-width: 640px) {
  .topbar-left {
    display: none !important;
  }

  .container {
    padding: 14px;
  }

  .header-main {
    min-height: 68px !important;
  }

  .site-logo-wrap {
    gap: 8px !important;
  }

  .site-title {
    max-width: 150px;
  }
}
}