:root{
    --bg: #ffffff;
    --bg-soft: #f4f4f5;
    --tg-blue: #2AABEE;
    --tg-blue-2: #229ED9;
    --accent: #2AABEE;
    --text: #1c1c1e;
    --text-soft: #8e8e93;
    --border: #e7e7ea;
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 72px;
    --topbar-h: 56px;
    --radius: 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html,body{
    background: var(--bg-soft);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  a{ color: inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }

  /* ============ TOP BAR (kun.uz style, sticky, follows scroll) ============ */
  .topbar{
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-h);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 14px;
  }

  .topbar .burger{
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--bg-soft);
    border: none;
    display: flex; align-items:center; justify-content:center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
  }
  .topbar .burger:hover{ background:#eceef0; }
  .topbar .burger svg{ width:20px; height:20px; stroke: var(--text); }

  .topbar .logo{
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.02em;
    color: var(--accent);
    flex-shrink:0;
    display:flex; align-items:center; gap:6px;
  }
  .topbar .logo .dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); }

  .topbar nav{
    display:flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    -ms-overflow-style:none;
  }
  .topbar nav::-webkit-scrollbar{ display:none; }
  .topbar nav a{
    flex-shrink:0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-soft);
    padding: 8px 14px;
    border-radius: 10px;
    white-space:nowrap;
    transition: background .15s, color .15s;
  }
  .topbar nav a.active{ color: var(--text); background: var(--bg-soft); font-weight:600; }
  .topbar nav a:hover{ color: var(--text); }

  .topbar .search-btn{
    width:38px; height:38px;
    border-radius: 10px;
    background: var(--bg-soft);
    border:none;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; cursor:pointer;
  }
  .topbar .search-btn svg{ width:18px; height:18px; stroke: var(--text-soft); }

  /* ============ LAYOUT ============ */
  .layout{
    display:flex;
    min-height: 100vh;
  }

  /* ============ SIDEBAR (vkvideo.ru style) ============ */
  .sidebar{
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    width: var(--sidebar-w);
    background: #ffffff;
    border-right: 1px solid var(--border);
    flex-shrink:0;
    transition: width .22s ease;
    overflow: hidden;
    z-index: 90;
  }
  .sidebar.collapsed{ width: var(--sidebar-w-collapsed); }

  .sidebar-inner{
    padding: 14px 10px;
    height:100%;
    overflow-y:auto;
    display:flex; flex-direction:column; gap: 2px;
  }
  .sidebar-inner::-webkit-scrollbar{ width:0px; }

  .side-link{
    display:flex;
    align-items:center;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--text);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .side-link:hover{ background: var(--bg-soft); }
  .side-link.active{ background: rgba(42,171,238,0.12); color: var(--tg-blue-2); }
  .side-link.active svg{ stroke: var(--tg-blue-2); }

  .side-link svg{
    width: 22px; height:22px; flex-shrink:0;
    stroke: var(--text-soft);
    stroke-width: 1.8;
    fill:none;
    transition: stroke .15s;
  }
  .side-link.active svg{ stroke: var(--tg-blue-2); }

  .side-link span{
    opacity:1;
    transition: opacity .15s;
    overflow:hidden;
  }
  .sidebar.collapsed .side-link span{ opacity:0; width:0; }
  .sidebar.collapsed .side-link{ justify-content:center; padding: 11px 0; }

  .side-divider{
    height:1px;
    background: var(--border);
    margin: 10px 6px;
  }

  .side-section-title{
    font-size: 12px;
    font-weight:700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 10px 12px 4px;
    white-space:nowrap;
    transition: opacity .15s;
  }
  .sidebar.collapsed .side-section-title{ opacity:0; height:0; padding:0; overflow:hidden; }

  /* ============ MAIN CONTENT ============ */
  .content{
    flex:1;
    min-width:0;
    padding: 16px;
    max-width: 1000px;
    margin: 0 auto;
    display:flex; flex-direction:column; gap: 26px;
  }

  .section-title{
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    display:flex; align-items:center; gap:8px;
  }
  .section-title .badge{
    width:6px; height:18px; border-radius:3px;
    background: var(--accent);
    display:inline-block;
  }

  /* ============ SCROLL ARROWS (shared) ============ */
  .scroll-row-wrap{ position:relative; }
  .scroll-arrow{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width: 36px; height:36px;
    border-radius:50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index: 5;
    transition: background .15s, opacity .15s;
  }
  .scroll-arrow:hover{ background:#fff; }
  .scroll-arrow svg{ width:18px; height:18px; stroke: var(--text); stroke-width:2.4; }
  .scroll-arrow.left{ left: -6px; }
  .scroll-arrow.right{ right: -6px; }
  .scroll-arrow.hidden{ display:none; }

  .stories-row-wrap .scroll-arrow{ top: 38%; }

  @media (max-width: 760px){
    .scroll-arrow{ display:none !important; }
  }

  /* ============ STORIES (VK style) ============ */
  .stories-row{
    display:flex;
    gap: 12px;
    overflow-x:auto;
    padding: 4px 0 6px;
    scrollbar-width:none;
    scroll-behavior: smooth;
  }
  .stories-row::-webkit-scrollbar{ display:none; }

  .story{
    flex-shrink:0;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    width: 76px;
    cursor:pointer;
  }
  .story-ring{
    width: 64px; height:64px;
    border-radius:50%;
    padding: 2.5px;
    background: linear-gradient(135deg, #2AABEE, #6dd5fa, #2AABEE);
    display:flex; align-items:center; justify-content:center;
  }
  .story.seen .story-ring{ background: var(--border); }
  .story-ring img{
    width:100%; height:100%; border-radius:50%; object-fit:cover;
    border: 2.5px solid #fff;
  }
  .story-name{
    font-size: 12px; font-weight:500; color: var(--text-soft);
    text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width: 76px;
  }
  .story.add-story .story-ring{
    background: var(--bg-soft);
    border: 1.5px dashed var(--text-soft);
  }
  .story.add-story .story-ring svg{ width:24px; height:24px; stroke: var(--text-soft); }

  /* ============ ARTICLE CAROUSEL ============ */
  .carousel-wrap{ position:relative; }
  .carousel{
    display:flex;
    gap: 14px;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width:none;
    scroll-behavior: smooth;
  }
  .carousel::-webkit-scrollbar{ display:none; }

  .carousel-card{
    flex-shrink:0;
    width: 280px;
    scroll-snap-align: start;
    border-radius: var(--radius);
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: transform .15s, box-shadow .15s;
  }
  .carousel-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.07); }
  .carousel-card .thumb{
    width:100%; height: 150px; object-fit:cover;
    background: var(--bg-soft);
  }
  .carousel-card .body{ padding: 12px 14px 14px; }
  .carousel-card .tag{
    display:inline-block;
    font-size: 11px; font-weight:700; color: var(--tg-blue-2);
    background: rgba(42,171,238,0.1);
    padding: 3px 8px; border-radius:6px;
    margin-bottom:8px;
  }
  .carousel-card h3{
    font-size: 14.5px; font-weight:600; line-height:1.35;
    margin-bottom: 8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .carousel-card .meta{
    font-size:12px; color: var(--text-soft); display:flex; gap:10px; align-items:center;
  }
  .carousel-card .meta svg{ width:13px; height:13px; stroke:var(--text-soft); margin-right:3px; vertical-align:-2px; }

  /* ============ VIDEO GRID (9 items, 3 cols) ============ */
  .video-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .video-card{
    border-radius: var(--radius);
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
    cursor:pointer;
    transition: transform .15s, box-shadow .15s;
  }
  .video-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.07); }
  .video-thumb{
    position:relative;
    width:100%; aspect-ratio: 16/9;
    background: var(--bg-soft);
    overflow:hidden;
  }
  .video-thumb img{ width:100%; height:100%; object-fit:cover; }
  .video-thumb .play{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
  }
  .video-thumb .play svg{
    width:42px; height:42px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
  }
  .video-thumb .duration{
    position:absolute; right:6px; bottom:6px;
    background: rgba(0,0,0,0.65); color:#fff;
    font-size:11px; font-weight:600;
    padding:2px 6px; border-radius:5px;
  }
  .video-info{ padding: 10px 12px 12px; }
  .video-info h4{
    font-size: 13.5px; font-weight:600; line-height:1.35;
    margin-bottom: 6px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .video-info .meta{ font-size:12px; color:var(--text-soft); }

  /* ============ ARTICLES LIST (image, date, views) ============ */
  .articles-list{
    display:flex; flex-direction:column; gap:12px;
  }
  .article-row{
    display:flex; gap:14px;
    background:#fff;
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    transition: box-shadow .15s, transform .15s;
    cursor:pointer;
  }
  .article-row:hover{ box-shadow: 0 4px 14px rgba(0,0,0,0.06); transform: translateY(-1px); }
  .article-row img{
    width: 120px; height: 84px; border-radius:10px; object-fit:cover; flex-shrink:0;
    background: var(--bg-soft);
  }
  .article-row .info{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
  .article-row h3{
    font-size: 15px; font-weight:600; line-height:1.4; margin-bottom:8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .article-row .meta{
    display:flex; gap:14px; align-items:center;
    font-size:12.5px; color:var(--text-soft);
  }
  .article-row .meta .item{ display:flex; align-items:center; gap:4px; }
  .article-row .meta svg{ width:14px; height:14px; stroke:var(--text-soft); }

  /* ============ ADS SLIDER (swipeable) ============ */
  .ads-section{ }
  .ads-slider{
    display:flex;
    gap: 14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:4px;
    scrollbar-width:none;
    scroll-behavior: smooth;
  }
  .ads-slider::-webkit-scrollbar{ display:none; }
  .ad-card{
    flex-shrink:0;
    width: 240px;
    scroll-snap-align:start;
    border-radius: var(--radius);
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
    position:relative;
  }
  .ad-card img{ width:100%; height:140px; object-fit:cover; }
  .ad-card .ad-label{
    position:absolute; top:8px; left:8px;
    background: rgba(0,0,0,0.55); color:#fff;
    font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    padding:3px 7px; border-radius:5px;
  }
  .ad-card .body{ padding:10px 12px 12px; }
  .ad-card h4{ font-size:13.5px; font-weight:600; margin-bottom:4px; }
  .ad-card p{ font-size:12px; color:var(--text-soft); }

  /* ============ FOOTER ============ */
  .site-footer{
    background: #fff;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  .footer-inner{
    max-width: 1000px;
    margin: 0 auto;
    padding: 36px 16px 24px;
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 28px;
  }
  .footer-col h5{
    font-size: 13px;
    font-weight:700;
    text-transform: uppercase;
    letter-spacing:.06em;
    color: var(--text-soft);
    margin-bottom: 14px;
  }
  .footer-col .logo{
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.02em;
    color: var(--accent);
    display:flex; align-items:center; gap:6px;
    margin-bottom: 10px;
  }
  .footer-col .logo .dot{ width:8px; height:8px; border-radius:50%; background: var(--accent); }
  .footer-col p{ font-size:13.5px; color: var(--text-soft); line-height:1.6; max-width:280px; }
  .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
  .footer-col ul a{
    font-size: 13.5px; color: var(--text);
    transition: color .15s;
  }
  .footer-col ul a:hover{ color: var(--tg-blue-2); }

  .footer-social{
    display:flex; gap:10px; margin-top: 14px;
  }
  .footer-social a{
    width: 36px; height:36px; border-radius:10px;
    background: var(--bg-soft);
    display:flex; align-items:center; justify-content:center;
    transition: background .15s, color .15s;
  }
  .footer-social a:hover{ background: var(--tg-blue); color:#fff; }
  .footer-social a svg{ width:18px; height:18px; stroke: currentColor; fill:none; stroke-width:1.8; }

  .footer-bottom{
    border-top: 1px solid var(--border);
    max-width:1000px; margin:0 auto;
    padding: 16px;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:10px;
    font-size:12.5px; color: var(--text-soft);
  }
  .footer-bottom .legal-links{ display:flex; gap:16px; }
  .footer-bottom .legal-links a{ color: var(--text-soft); transition:color .15s; }
  .footer-bottom .legal-links a:hover{ color: var(--text); }

  @media (max-width: 760px){
    .footer-inner{ grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-col p{ max-width:none; }
  }
  @media (max-width: 480px){
    .footer-inner{ grid-template-columns: 1fr; }
  }

  /* ============ SIDEBAR SOCIAL ============ */
  .sidebar-social{
    display:flex;
    gap: 8px;
    padding: 8px 12px 4px;
    flex-wrap: wrap;
  }
  .sidebar-social a{
    width: 34px; height:34px; border-radius:9px;
    background: var(--bg-soft);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition: background .15s, color .15s;
    color: var(--text-soft);
  }
  .sidebar-social a:hover{ background: var(--tg-blue); color:#fff; }
  .sidebar-social a svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .sidebar.collapsed .sidebar-social{ display:none; }

  /* ============ BACK TO TOP ============ */
  .back-to-top{
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px; height:46px;
    border-radius:50%;
    background: var(--tg-blue);
    color:#fff;
    border:none;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 18px rgba(42,171,238,0.4);
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s, background .15s;
    z-index: 150;
  }
  .back-to-top.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
  .back-to-top:hover{ background: var(--tg-blue-2); }
  .back-to-top svg{ width:22px; height:22px; stroke:#fff; stroke-width:2.4; }

  @media (max-width: 760px){
    .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 900px){
    .sidebar{
      position: fixed;
      left:0; top: var(--topbar-h);
      height: calc(100vh - var(--topbar-h));
      transform: translateX(-100%);
      transition: transform .25s ease;
      box-shadow: 4px 0 24px rgba(0,0,0,0.08);
    }
    .sidebar.mobile-open{ transform: translateX(0); }
    .sidebar.collapsed{ width: var(--sidebar-w); }
    .sidebar.collapsed .side-link span{ opacity:1; width:auto; }
    .sidebar.collapsed .side-section-title{ opacity:1; height:auto; padding:10px 12px 4px; }
    .sidebar.collapsed .side-link{ justify-content:flex-start; padding:11px 12px; }
    .overlay{
      position:fixed; inset:0; top:var(--topbar-h);
      background:rgba(0,0,0,0.3);
      z-index:80; opacity:0; pointer-events:none; transition:opacity .25s;
    }
    .overlay.show{ opacity:1; pointer-events:auto; }
  }

  @media (max-width: 760px){
    .video-grid{ grid-template-columns: repeat(2,1fr); }
    .article-row img{ width:96px; height:72px; }
  }

  @media (max-width: 480px){
    .video-grid{ grid-template-columns: repeat(2,1fr); gap:10px; }
    .carousel-card{ width: 240px; }
    .topbar .logo span.text{ display:none; }
  }

  /* ============ CATEGORY PAGES ============ */
  .cat-page{ display:none; }
  .cat-page.active{ display:flex; flex-direction:column; gap:28px; }

  /* Category hero banner */
  .cat-hero{
    border-radius: 18px;
    padding: 36px 32px;
    color:#fff;
    position:relative;
    overflow:hidden;
    min-height: 160px;
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  .cat-hero::before{
    content:'';
    position:absolute; inset:0;
    background: inherit;
    opacity: .15;
    filter: blur(60px);
    transform: scale(1.4);
    z-index:0;
  }
  .cat-hero-emoji{
    font-size: 52px;
    line-height:1;
    margin-bottom: 10px;
    position:relative; z-index:1;
  }
  .cat-hero h1{
    font-size: 26px; font-weight:800; letter-spacing:-.02em;
    position:relative; z-index:1;
    text-shadow: 0 1px 8px rgba(0,0,0,0.18);
  }
  .cat-hero p{
    font-size:14px; opacity:.88; margin-top:6px;
    position:relative; z-index:1;
    max-width: 560px; line-height:1.5;
  }
  .cat-hero .cat-stats{
    display:flex; gap:20px; margin-top:14px;
    position:relative; z-index:1;
  }
  .cat-hero .cat-stat{
    font-size:13px; font-weight:600; opacity:.9;
    display:flex; align-items:center; gap:5px;
  }
  .cat-hero .cat-stat svg{ width:15px; height:15px; }

  /* Category badge in articles */
  .cat-badge{
    display:inline-flex; align-items:center; gap:5px;
    font-size:11.5px; font-weight:700;
    padding: 3px 10px; border-radius: 6px;
    margin-bottom: 8px;
  }

  /* Telegram post card */
  .tg-post{
    background:#fff;
    border:1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    display:flex; flex-direction:column; gap:12px;
  }
  .tg-post-header{
    display:flex; align-items:center; gap:10px;
  }
  .tg-post-avatar{
    width:42px; height:42px; border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
  }
  .tg-post-channel{ font-weight:700; font-size:14.5px; }
  .tg-post-sub{ font-size:12px; color: var(--text-soft); }
  .tg-post-verified{
    width:16px; height:16px;
    background: var(--tg-blue);
    border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .tg-post-verified svg{ width:10px; height:10px; stroke:#fff; stroke-width:2.5; }
  .tg-post-body{ font-size:14.5px; line-height:1.6; }
  .tg-post-body strong{ font-weight:700; }
  .tg-post-img{ border-radius:12px; width:100%; max-height:280px; object-fit:cover; }
  .tg-post-footer{
    display:flex; align-items:center; justify-content:space-between;
    font-size:12.5px; color: var(--text-soft);
  }
  .tg-post-reactions{
    display:flex; gap:10px;
  }
  .tg-reaction{
    display:flex; align-items:center; gap:4px;
    background: var(--bg-soft);
    padding:4px 10px; border-radius:20px;
    font-size:13px; font-weight:500;
  }

  /* Fact card */
  .fact-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    display:flex; gap:16px;
  }
  .fact-num{
    font-size:40px; font-weight:900; line-height:1;
    flex-shrink:0; width:48px; text-align:center;
    opacity:.15;
  }
  .fact-body h3{ font-size:16px; font-weight:700; margin-bottom:8px; }
  .fact-body p{ font-size:14px; color: var(--text-soft); line-height:1.65; }
  .fact-tag{
    display:inline-block; margin-top:10px;
    font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px;
    opacity:.85;
  }

  /* Research card */
  .research-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    display:flex;
  }
  .research-card .rc-accent{
    width:6px; flex-shrink:0;
  }
  .research-card .rc-body{
    padding:16px 18px;
    flex:1;
  }
  .research-card .rc-label{
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
    margin-bottom:8px;
  }
  .research-card h3{ font-size:15.5px; font-weight:700; margin-bottom:8px; line-height:1.4; }
  .research-card p{ font-size:13.5px; color:var(--text-soft); line-height:1.6; }
  .research-card .rc-meta{
    display:flex; gap:14px; margin-top:12px;
    font-size:12px; color:var(--text-soft);
  }

  /* Opinion card */
  .opinion-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    display:flex; gap:16px;
  }
  .opinion-author-img{
    width:52px; height:52px; border-radius:50%;
    object-fit:cover; flex-shrink:0;
  }
  .opinion-card blockquote{
    font-size:15.5px; font-weight:600; line-height:1.55;
    font-style:italic;
    position:relative;
    padding-left:18px;
  }
  .opinion-card blockquote::before{
    content:'"';
    position:absolute; left:0; top:-4px;
    font-size:36px; line-height:1;
    opacity:.2;
    font-style:normal;
  }
  .opinion-author{ font-size:13px; color:var(--text-soft); margin-top:10px; }
  .opinion-author strong{ color:var(--text); }

  /* Country card */
  .country-grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:14px;
  }
  .country-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    transition:transform .15s, box-shadow .15s;
  }
  .country-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.07); }
  .country-card .flag-img{ width:100%; height:90px; object-fit:cover; }
  .country-card .cc-body{ padding:12px 14px 14px; }
  .country-card .flag-emoji{ font-size:28px; margin-bottom:6px; }
  .country-card h4{ font-size:15px; font-weight:700; margin-bottom:3px; }
  .country-card p{ font-size:12.5px; color:var(--text-soft); }
  .country-card .cc-stats{ display:flex; gap:12px; margin-top:8px; font-size:12px; color:var(--text-soft); }

  @media (max-width:760px){
    .country-grid{ grid-template-columns: repeat(2,1fr); }
  }
  @media (max-width:480px){
    .country-grid{ grid-template-columns: 1fr 1fr; }
  }

  /* Language lesson card */
  .lang-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
  }
  .lang-card .lang-flag{ font-size:36px; margin-bottom:10px; }
  .lang-card h3{ font-size:16px; font-weight:700; margin-bottom:6px; }
  .lang-card .lang-phrase{
    background: var(--bg-soft);
    border-radius:10px;
    padding:12px 16px;
    margin:12px 0;
    font-size:20px; font-weight:700; letter-spacing:.01em;
  }
  .lang-card .lang-trans{ font-size:13.5px; color:var(--text-soft); }
  .lang-card .lang-tag{
    font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:5px;
    margin-top:10px; display:inline-block;
  }
  .lang-word-list{
    display:flex; flex-direction:column; gap:8px; margin-top:12px;
  }
  .lang-word-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:9px 14px;
    background:var(--bg-soft);
    border-radius:10px;
    font-size:14px;
  }
  .lang-word-row .orig{ font-weight:700; }
  .lang-word-row .trans{ color:var(--text-soft); }