:root{
      --bg:#ffffff;
      --page:#f5f5f5;
      --text:#0f172a;
      --muted:#64748b;
      --soft:#94a3b8;
      --line:#e2e8f0;

      --brand:#0ea5e9;
      --brand2:#10b981;
      --brand3:#f59e0b;
      --brand4:#8b5cf6;

      --shadow: 0 10px 30px rgba(2,6,23,.08);
      --shadow2: 0 8px 18px rgba(2,6,23,.06);
      --shadow3: 0 5px 12px rgba(0,0,0,.2);

      --r18:18px;
      --r16:16px;
      --r14:14px;

      --max:1180px;
      --gap:18px;
      --pad:15px 12px 20px 12px;

      --ratioW:3;
      --ratioH:2;

      --heroMaxH: 250px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
      background: var(--page);
      color: var(--text);
    }
    a{color:inherit;text-decoration:none}
    button,input{font-family:inherit}
    img{display:block;max-width:100%}

    .container{
      width:min(var(--max), calc(100% - 24px));
      margin:0 auto;
    }

    /* Top bar */
    /*.topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      background: #060;
      border-bottom: 1px solid var(--line);
    }
    .topbar-inner{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 0;
      position:relative;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:170px;
    }
    .logo{
      width:38px;height:38px;border-radius:12px;
      background:#090;
      box-shadow: 0 10px 18px rgba(14,165,233,.16);
      flex:0 0 auto;
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:900;
      font-size:14px;
    }
    .brand b{font-size:14px; letter-spacing:.6px;color:#fff}
    .search{
      flex:1;
      display:flex; align-items:center; gap:10px;
      border:1px solid var(--line);
      background:#f8fafc;
      border-radius:999px;
      padding:9px 12px;
      min-width: 160px;
    }
    .search input{
      flex:1; border:0; outline:0; background:transparent;
      color:var(--text); font-size:14px;
    }
    .nav{
      display:flex; gap:6px; align-items:center;
      white-space:nowrap;
    }
    .nav a{
      font-size:13px;color:#fff;
      padding:8px 10px;border-radius:12px;
    }
    .nav a:hover{background:#f1f5f9;color:var(--text)}
    .actions{
      display:flex; gap:8px; align-items:center;
      white-space:nowrap;
    }
    .btn{
      border:1px solid rgba(226,232,240,.95);
      background:#fff;
      padding:9px 11px;
      border-radius:12px;
      cursor:pointer;
      font-size:13px;
      color:var(--text);
    }
    .btn:hover{background:#f8fafc}
    .btn.primary{
      border:none;
      background: var(--brand3);
      font-weight:800;
    }
    .btn.primary:hover{filter:brightness(.98)}
    .btn.ghost{
      background:#fff;
      border-color: rgba(226,232,240,.9);
      color: var(--muted);
    }
    .avatar{
      width:34px;height:34px;border-radius:999px;
      background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(16,185,129,.14));
      border:1px solid rgba(226,232,240,.95);
    }*/

    /*.container{
      width:min(var(--headerWidth), calc(100% - 24px));
      margin:0 auto;
    }*/













/*    /* Top bar *
    .topbar{
      position:sticky; top:0; z-index:50;
      background: #060;
      backdrop-filter: blur(10px) saturate(140%);
      /*border-bottom: 1px solid var(--line);*
    }
    .topbar-inner{
      display:flex; align-items:center; gap:10px;
      padding:10px 0;
      position:relative;
    }
    .brand{
      display:flex; align-items:center; /*gap:10px;*
      /*min-width:170px;*
    }
    .logo{
      max-width: 90px;
      border-radius: 35px;
      box-shadow: 0 10px 18px rgba(14, 165, 233, .16);
      flex: 0 0 auto;
    }
    .logo img{
      max-width: calc(100% - 10px);
      margin: 9px 5px 5px 5px;
    }
    .brand b{font-size:14px; letter-spacing:.6px;color: #fff;}
    .brand span{display:block;font-size:12px;color:var(--muted);margin-top:1px}

    .search{
      flex:1;
      display:flex; align-items:center; gap:10px;
      border:1px solid var(--line);
      background:#f8fafc;
      border-radius:999px;
      padding:9px 12px;
      min-width: 160px;
    }
    .search input{
      flex:1; border:0; outline:0; background:transparent;
      color:var(--text); font-size:14px;
    }

    .nav{
      display:flex; gap:6px; align-items:center;
      white-space:nowrap;
    }
    .nav a{
      font-size:13px;color:#fff;
      padding:8px 10px;border-radius:12px;
    }
    .nav a:hover{background:#f1f5f9;color:var(--text)}

    .actions{
      display:flex; gap:8px; align-items:center;
      white-space:nowrap;
    }
    .btn{
      /*border:1px solid var(--line);*
      border: none;
      background:#fff;
      padding:9px 11px;
      border-radius:12px;
      cursor:pointer;
      font-size:13px;
      color:var(--text);
      font-weight:900;
    }
    .btn:hover{background:#f8fafc}
    .btn.primary{
      /*border-color: rgba(16,185,129,.55);*
      border: none;
      background: #f59e0b;
      font-weight:650;
    }
    .btn.primary:hover{
      background: #f59e0b;
    }
    .btn.ghost{
      background:#fff;
      border-color: rgba(226,232,240,.9);
      color: var(--muted);
    }
    .avatar{
      width: 34px;
      height: 34px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(16, 185, 129, .14));
      border: 2px solid var(--line);
      overflow: hidden;
    }
*/
    /* Mobile menu */
    .menu-btn{
      display:none;
      width:40px; height:40px;
      border-radius:12px;
      border:1px solid var(--line);
      background:#fff;
      cursor:pointer;
      align-items:center;
      justify-content:center;
      font-size:18px;
      color:var(--muted);
    }
    .menu-btn:hover{background:#f8fafc;color:var(--text)}
    .menu{
      display:none;
      position:absolute;
      right:0;
      top:56px;
      width: min(320px, calc(100vw - 24px));
      background:#fff;
      border:1px solid var(--line);
      border-radius:16px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .menu.open{display:block}
    .menu .vbar{
      height:3px;
      background: linear-gradient(90deg, var(--brand2), var(--brand), var(--brand3), var(--brand4));
    }
    .menu .section{padding:10px}
    .menu a, .menu button{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius:12px;
      font-size:14px;
      border:1px solid rgba(226,232,240,.9);
      background:#fff;
      color:var(--text);
      cursor:pointer;
      margin-bottom:8px;
    }
    .menu a:hover, .menu button:hover{background:#f8fafc}
    .menu .muted{color:var(--muted); font-size:12px; margin:8px 2px 10px}


    /* Panels */
    .panel{
      background:#fff;
      /*border:1px solid rgba(226,232,240,.9);*/
      border-radius: var(--r18);
      box-shadow: var(--shadow3);
      overflow:hidden;
    }
    .panel.pad{padding: var(--pad)}
    .vbar{
      height:3px;
      background: linear-gradient(90deg, var(--brand2), var(--brand), var(--brand3), var(--brand4));
    }
    .panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin:5px 0px 15px 0px;
    }
    h3{
      /*margin:0;
      font-size:12px;
      letter-spacing:.35px;
      color:var(--muted);
      font-weight:800;
      text-transform:uppercase;*/
      margin: 0;
      font-size: 24px;
      font-weight: 800;
      color: #555;
    }
    .panel-head a{font-size:12px;color:var(--muted)}
    .panel-head a:hover{color:var(--text)}

    /* 3:2 media */
    .ratio32{
      /*aspect-ratio: var(--ratioW) / var(--ratioH);*/
      /*width:100%;*/
      /*background:#f1f5f9;*/
      overflow:hidden;
      /*position:relative;*/
      height: 200px;
    }
    .ratio32 img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Layout */
    main{ padding: 14px 0 22px; }

    .layout{
      display:grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: var(--gap);
      align-items:start;
      margin-top: 62px;
    }

    /* Sidebar */
    .side-stack{display:flex; flex-direction:column; gap: var(--gap);
      align-self: start;
      position: sticky;
      top: 76px;
    }

    .contact-cards{display:flex; flex-direction:column; gap:10px;}
    .contact-card{
      display:flex;
      align-items:center;
      gap:10px;
      /*padding:10px;
      border:1px solid rgba(226,232,240,.9);*/
      border-radius:16px;
      background:#fff;
    }
    .cc-ico{
      width:38px;height:38px;border-radius:14px;
      display:grid;place-items:center;
      border:1px solid rgba(226,232,240,.95);
      background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(14,165,233,.08));
      flex:0 0 auto;
    }
    .cc-meta{min-width:0; flex:1;}
    .cc-meta b{display:block;font-size:13px}
    .cc-meta span{
      display:block;
      font-size:12px;
      color:var(--muted);
      margin-top:2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .cc-btn{
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(226,232,240,.95);
      background:#fff;
      font-size:12px;
      font-weight:900;
      cursor:pointer;
      white-space:nowrap;
    }
    .cc-btn:hover{background:#f8fafc}
    .cc-btn.primary{
      border-color: rgba(16,185,129,.55);
      background: rgba(16,185,129,.16);
    }

    .side-kpis{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    .kpi{
      border:1px solid rgba(226,232,240,.9);
      border-radius:16px;
      padding:10px;
      background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(14,165,233,.06));
      min-width:0;
    }
    .kpi .k{
      display:block;
      font-size:11px;
      color:var(--muted);
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.25px;
    }
    .kpi .v{
      display:block;
      margin-top:4px;
      font-size:14px;
      font-weight:900;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* Sponsored rail (like your ads style) */
    .ads-rail-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      /*margin: 20px 2px 10px 0px;*/
      padding: 10px 12px;
      background: #fafafa;
      border-bottom: 1px solid #d1d1d1;
      border-radius: var(--r14) 14px;
      box-shadow: var(--shadow);
    }
    .ads-rail-head .label{
      font-size:12px;
      letter-spacing:.35px;
      color:var(--muted);
      font-weight:650;
      text-transform:uppercase;
      margin-left: 10px;
    }
    .ads-rail-head .why{
      font-size:12px;
      color:var(--muted);
    }
    .ads-rail-head .why:hover{color:var(--text)}
    .ad-cards-wrap{ display:grid;grid-template-columns: 1fr;gap:12px; }

    .ad-card{
      background:#fff;
      /*border:1px solid rgba(226,232,240,.9);*/
      border-radius:16px;
      overflow:hidden;
      box-shadow: var(--shadow3);
      /*cursor: zoom-in;*/
      display:flex; flex-direction:column; 
    }
    .ad-img{
      width:100%;
      aspect-ratio: 3 / 2;
      background:#f1f5f9;
    }
    .ad-img img{width:100%;height:100%;object-fit:cover}
    .ad-body{padding:10px 10px 20px 10px}
    .ad-body b{
      display:block;
      font-size:13px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .ad-txt{
      margin-top:6px;
      font-size:12px;
      color:#334155;
      line-height:1.35;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .ad-sub{
      margin-top:8px;
      font-size:12px;
      color:var(--muted);
      font-weight:800;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* Lightbox */
    .lightbox{
      position:fixed; inset:0;
      background: rgba(2,6,23,.92);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:9999;
      padding: 14px;
    }
    .lightbox.open{display:flex}
    .lightbox img{
      width: min(1100px, 100%);
      height: min(85vh, 100%);
      object-fit: contain;
      border-radius: 14px;
      box-shadow: 0 25px 70px rgba(0,0,0,.45);
      background: rgba(255,255,255,.02);
    }
    .lb-top{
      position:absolute; top:12px; right:12px; left:12px;
      display:flex; justify-content:space-between; align-items:center; gap:10px;
      color:#e2e8f0;
      pointer-events:none;
    }
    .lb-top .hint{font-size:12px; opacity:.9}
    .lb-close{
      pointer-events:auto;
      border:1px solid rgba(226,232,240,.25);
      background: rgba(255,255,255,.08);
      color:#e2e8f0;
      padding:10px 12px;
      border-radius:12px;
      cursor:pointer;
      font-size:13px;
      font-weight:900;
    }
    .lb-close:hover{background: rgba(255,255,255,.12)}

    .lb-caption{
      width: min(1100px, 100%);
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(226,232,240,.18);
      color: #e2e8f0;
      backdrop-filter: blur(8px);
    }
    #lbTitle{
      display:block;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.2;
    }
    #lbSub{
      margin-top: 4px;
      font-size: 12px;
      opacity: .9;
      line-height: 1.3;
    }
    /* Footer */
    footer{
      margin-top:18px;
      background:#0b1220;
      color:rgba(255,255,255,.88);
      border-top:1px solid rgba(255,255,255,.10);
    }
    footer .wrap{
      max-width:var(--max);
      margin:0 auto;
      padding:18px 16px;
      display:grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap:14px;
    }
    @media (max-width: 900px){
      footer .wrap{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 520px){
      footer .wrap{grid-template-columns:1fr}
    }
    .fTitle{font-weight:1000; margin:0 0 8px; color:#fff}
    .fLink{display:block; color:rgba(255,255,255,.78); font-size:13px; padding:4px 0}
    .fLink:hover{color:#fff}
    .copyright{
      max-width:var(--max);
      margin:0 auto;
      padding:10px 16px 16px;
      color:rgba(255,255,255,.65);
      font-size:12px;
      border-top:1px solid rgba(255,255,255,.10);
    }

    /* Responsive */
    @media (max-width: 980px){
      .nav{display:none}
      .layout{grid-template-columns: 1fr;}
      .side-kpis{grid-template-columns: 1fr 1fr;}
      .ad-cards-wrap{ grid-template-columns: 1fr 1fr; }
      :root{--heroMaxH: 360px;}
      @media (max-width: 620px){
        .ad-cards-wrap{ display:grid;grid-template-columns: 1fr; }
        .grid{grid-template-columns: 1fr;}
        @media (max-width: 560px){
          .ads-rail-head{ margin: 0px 10px; }
          .container{width:calc(100% - 18px)}
          .topbar-inner{padding:9px 0}
          .brand{min-width:auto}
          .grid{grid-template-columns: 1fr;}
          .side-kpis{grid-template-columns: 1fr;}
          :root{--heroMaxH: 320px;}

          .container{ width: 100%; }
          .hero, .ad-card{ border-radius: unset; }
          .panel{ border-radius: unset;border:none; }
        }
      }
    }

    /* Mobile rules */
    @media (max-width: 1150px){
      .panel{width: 100%}
      .maincols{ display:block; }
    }
    @media (max-width: 980px){
      .layout{grid-template-columns: 1fr; gap: var(--gap)}
      .sticky{position:static}
      .nav{display:none}
      .brand{min-width:auto}
    }
    @media (max-width: 980px){
      .menu-btn{display:flex}
      .actions{display:none} /* use menu for actions on mobile */
    }
    @media (max-width: 560px){
      /*.container{width:calc(100% - 18px)}*/
      .topbar-inner{padding:9px 0}
      .brand span{display:none}
      .layout{padding:10px 0 18px}
      :root{--pad:10px; --gap:20px; --postMediaMaxH: 380px; --tileMediaMaxH: 170px;}

      /* Post images should be full width on mobile */
      .post-body{padding-left:10px; padding-right:10px}
      .post-head{padding-left:10px; padding-right:10px}
      .post-actions{padding-left:10px; padding-right:10px}
      .comments{padding-left:10px; padding-right:10px}

      .post-media{
        border-radius: 0;
        margin-left:-10px;
        margin-right:-10px;
        max-height: var(--postMediaMaxH);
      }

      .embed{grid-template-columns: 1fr}
      .tiles{grid-template-columns: 1fr 1fr}
      .pymk-card{flex-basis: 190px}


      .embed .thumb .ratio32{width:100%;height:100%}
      .embed .info{
        border-radius: 0px 0px 14px 14px;
        border: 1px solid rgba(226, 232, 240, .95);
      }

    }