@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --g: #00A651;
  --g-dark: #008C45;
  --g-deep: #00331A;
  --g-glow: rgba(0,166,81,.15);
  --g-pale: #E6FFF0;
  --g-100: #B3FFD6;

  --gold: #FFB800;
  --gold-glow: rgba(255,184,0,.15);
  --gold-pale: #FFF8E0;

  --purple: #7B61FF;
  --pink: #FF6B8A;
  --red: #FF4444;
  --blue: #3B82F6;

  --dark: #0A0A0F;
  --dark2: #141419;
  --dark3: #1E1E26;
  --card: #FFFFFF;
  --bg: #F5F5F8;
  --bg2: #EDEDF0;
  --line: #E0E0E5;
  --line2: #EBEBEF;

  --t1: #0F0F12;
  --t2: #3A3A42;
  --t3: #6B6B76;
  --t4: #9898A3;
  --t5: #C0C0C8;

  --f: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f2: 'Space Grotesk', system-ui, sans-serif;

  --r: 14px;
  --r-sm: 8px;
  --r-lg: 20px;
  --r-full: 100px;

  --s1: 0 1px 3px rgba(0,0,0,.06);
  --s2: 0 4px 12px rgba(0,0,0,.08);
  --s3: 0 8px 30px rgba(0,0,0,.12);
  --s-glow: 0 4px 20px var(--g-glow);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--bg);color:var(--t1);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--g-100);color:var(--g-deep)}

.w{max-width:1200px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.w{padding:0 24px}}
@media(min-width:1240px){.w{padding:0}}


/* ============================================================
   HEADER — Complete mobile-first
   ============================================================ */
.hdr {
  background: linear-gradient(180deg, var(--g) 0%, var(--g-dark) 100%);
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

.hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  gap: 12px;
  position: relative;
}

/* ============================================================
   LOGO — Icon + Text combo, special design
   ============================================================ */
.logo {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  z-index: 10;
  text-decoration: none;
}

/* When logo image is uploaded */
.logo-img {
  height: 32px;
  width: auto;
  margin-right: 8px;
}

/* Logo mark (shows when no image uploaded) */
.logo-mark {
  width: 34px;
  height: 34px;
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  overflow: hidden;
}
.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

/* Site name text — always shows beside logo */
.logo-t {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-name {
  font-family: var(--f2);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: 0;
}
.logo-name-first {
  color: #fff;
}
.logo-name-second {
  background: linear-gradient(135deg, #4ADE80, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-dot {
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  display: inline-block;
  margin-left: 2px;
  margin-bottom: 2px;
  box-shadow: 0 0 6px rgba(255,184,0,.5);
}
.logo-tagline {
  font-size: .52rem;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Tablet+ */
@media (min-width: 480px) {
  .logo-mark {
    width: 38px;
    height: 38px;
  }
  .logo-name {
    font-size: 1.3rem;
  }
  .logo-tagline {
    font-size: .55rem;
  }
}

/* Desktop */
@media (min-width: 769px) {
  .logo-img {
    height: 36px;
  }
  .logo-mark {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  .logo-name {
    font-size: 1.4rem;
  }
  .logo-dot {
    width: 6px;
    height: 6px;
  }
  .logo-tagline {
    font-size: .58rem;
  }
}

/* Burger — always visible on mobile */
.burger {
  display: flex;
  width: 36px;
  height: 36px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.1);
  border-radius: 8px;
  border: none;
  cursor: pointer;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
}
.burger.on span:nth-child(1) {
  transform: rotate(45deg) translate(2.5px, 2.5px);
}
.burger.on span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.burger.on span:nth-child(3) {
  transform: rotate(-45deg) translate(2.5px, -2.5px);
}

/* Navigation — HIDDEN by default on mobile */
.nav {
  display: none;
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(3, 61, 26, .98);
  z-index: 800;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* When open */
.nav.open {
  display: flex;
}

.nav a {
  display: block;
  padding: 14px 20px;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.06);
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.nav a:last-child {
  border-bottom: none;
}
.nav a:hover,
.nav a:active,
.nav a.cur {
  color: #fff;
  background: rgba(255,255,255,.08);
}

/* ═══════ DESKTOP — 769px+ ═══════ */
@media (min-width: 769px) {
  .hdr-inner {
    height: 56px;
  }

  .logo-t {
    font-size: 1.3rem;
  }

  .logo-mark {
    width: 36px;
    height: 36px;
    font-size: .95rem;
  }

  /* Hide burger on desktop */
  .burger {
    display: none;
  }

  /* Show nav as horizontal bar */
  .nav {
    display: flex !important;
    position: static;
    background: none;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 0;
    overflow: visible;
    flex: 1;
    justify-content: center;
  }

  .nav a {
    display: inline-flex;
    padding: 8px 14px;
    font-size: .78rem;
    border: none;
    border-bottom: none;
    border-radius: 99px;
    white-space: nowrap;
    color: rgba(255,255,255,.6);
  }

  .nav a:hover {
    color: #fff;
    background: rgba(255,255,255,.1);
  }

  .nav a.cur {
    color: #fff;
    background: rgba(255,255,255,.15);
  }
}


/* ============================================================
   TICKER — Gradient glow
   ============================================================ */
.tkr{
  background:linear-gradient(90deg,var(--g-dark),var(--g));
  height:34px;display:flex;align-items:center;overflow:hidden;
}
.tkr-tag{
  background:var(--gold);color:var(--dark);
  padding:0 14px;height:100%;
  display:flex;align-items:center;gap:6px;
  font-size:.6rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;
  flex-shrink:0;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%);
  padding-right:22px;
}
.tkr-pulse{
  width:6px;height:6px;background:var(--red);
  border-radius:50%;animation:pulse 1s ease infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}

.tkr-track{flex:1;overflow:hidden}
.tkr-scroll{
  display:flex;gap:32px;animation:slide 35s linear infinite;
  width:max-content;padding:0 16px;
}
.tkr-scroll:hover{animation-play-state:paused}
.tkr-scroll a{font-size:.74rem;color:rgba(255,255,255,.8);white-space:nowrap;font-weight:500}
.tkr-scroll a:hover{color:#fff}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* ============================================================
   MAIN
   ============================================================ */
.main{padding:20px 0 48px}


/* ============================================================
   SECTION
   ============================================================ */
.sec{
  display:flex;align-items:center;gap:12px;
  margin-bottom:16px;
}
.sec h2{
  font-family:var(--f2);font-size:1.05rem;font-weight:700;
  color:var(--t1);white-space:nowrap;
  display:flex;align-items:center;gap:8px;
}
.sec h2::before{
  content:'';width:4px;height:20px;
  background:linear-gradient(180deg,var(--g),var(--gold));
  border-radius:2px;
}
.sec-line{flex:1;height:1px;background:var(--line)}
.sec-link{
  font-size:.72rem;font-weight:700;color:var(--g);
  padding:5px 14px;border:1.5px solid var(--g);
  border-radius:var(--r-full);transition:all .2s;
  white-space:nowrap;
}
.sec-link:hover{background:var(--g);color:#fff}


/* ============================================================
   TAG — Pill
   ============================================================ */
.tag{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:var(--r-full);
  font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  background:var(--g-pale);color:var(--g-dark);
  transition:all .15s;
}
.tag:hover{background:var(--g);color:#fff}
.tag-gold{background:var(--gold-pale);color:#A07B00}
.tag-purple{background:#F0ECFF;color:var(--purple)}


/* ============================================================
   HERO — Mobile-first stacked, desktop overlay
   ============================================================ */
.hero{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border-radius:var(--r);
  overflow:hidden;
  margin-bottom:20px;
  box-shadow:var(--s2);
}
.hero-img-wrap{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--dark);
}
.hero-img-wrap img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}
.hero-text{
  padding:16px;
}
.hero-tag{margin-bottom:8px}
.hero h1{
  font-family:var(--f2);
  font-size:1.2rem;
  font-weight:700;
  color:var(--t1);
  line-height:1.25;
  margin-bottom:8px;
}
.hero p{
  font-size:.84rem;
  color:var(--t3);
  line-height:1.55;
  margin-bottom:10px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hero-meta{
  font-size:.68rem;
  color:var(--t4);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.hero-meta span+span::before{
  content:'·';
  margin-right:6px;
  color:var(--t5);
}
.hero-read{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:10px;
  font-size:.76rem;
  font-weight:700;
  color:var(--g);
  transition:gap .2s;
}
.hero:hover .hero-read{gap:8px}

/* Tablet: taller image */
@media(min-width:480px){
  .hero-img-wrap img{height:280px}
  .hero h1{font-size:1.4rem}
  .hero-text{padding:20px}
}

/* Desktop: side-by-side layout */
@media(min-width:769px){
  .hero{
    flex-direction:row;
    min-height:380px;
  }
  .hero-img-wrap{
    width:58%;
    flex-shrink:0;
  }
  .hero-img-wrap img{
    height:100%;
    min-height:380px;
  }
  .hero-text{
    width:42%;
    padding:28px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .hero h1{
    font-size:1.65rem;
    margin-bottom:12px;
  }
  .hero p{
    font-size:.88rem;
    -webkit-line-clamp:4;
    margin-bottom:14px;
  }
}

/* Large desktop */
@media(min-width:1024px){
  .hero-img-wrap img{min-height:420px}
  .hero h1{font-size:1.85rem}
  .hero-text{padding:36px 36px}
}


/* ============================================================
   CARD — Gen Z vibes
   ============================================================ */
.card{
  background:var(--card);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--s1);
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.2,0,0,1),box-shadow .3s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--s3)}

.card-img-w{overflow:hidden;background:var(--bg2);border-radius:var(--r) var(--r) 0 0}
.card-img{
  width:100%;height:170px;object-fit:cover;
  transition:transform .5s ease-out;
}
.card:hover .card-img{transform:scale(1.06)}

.card-bd{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.card-tag{margin-bottom:6px}
.card-h{
  font-family:var(--f2);font-size:.95rem;font-weight:700;
  color:var(--t1);line-height:1.3;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s;
}
.card:hover .card-h{color:var(--g)}
.card-exc{
  font-size:.78rem;color:var(--t3);line-height:1.55;
  flex:1;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.card-ft{
  font-size:.64rem;color:var(--t4);
  padding-top:8px;border-top:1px solid var(--line2);
}
.card-ft span+span::before{content:' · '}


/* ============================================================
   ROW — Horizontal card
   ============================================================ */
.row{
  display:flex;gap:14px;padding:14px;
  background:var(--card);border-radius:var(--r);
  margin-bottom:10px;box-shadow:var(--s1);
  transition:transform .2s,box-shadow .2s;
}
.row:hover{transform:translateX(4px);box-shadow:var(--s2)}

.row-img{
  width:110px;height:80px;object-fit:cover;
  border-radius:var(--r-sm);background:var(--bg2);flex-shrink:0;
}
.row-bd{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.row-tag{margin-bottom:2px}
.row-h{
  font-family:var(--f2);font-size:.84rem;font-weight:700;
  color:var(--t1);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s;
}
.row:hover .row-h{color:var(--g)}
.row-meta{font-size:.62rem;color:var(--t4);margin-top:4px}
.row-meta span+span::before{content:' · '}


/* ============================================================
   TRENDING — Glow numbers
   ============================================================ */
.trend{
  display:flex;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line2);
  align-items:flex-start;transition:transform .15s;
}
.trend:first-child{padding-top:0}
.trend:last-child{border:none;padding-bottom:0}
.trend:hover{transform:translateX(4px)}
.trend-n{
  font-family:var(--f2);font-size:1.6rem;font-weight:700;
  background:linear-gradient(135deg,var(--g),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1;min-width:28px;text-align:right;
}
.trend:nth-child(n+4) .trend-n{
  background:linear-gradient(135deg,var(--t5),var(--t4));
  -webkit-background-clip:text;background-clip:text;
}
.trend-h{
  font-size:.8rem;font-weight:700;color:var(--t1);
  line-height:1.35;transition:color .15s;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.trend:hover .trend-h{color:var(--g)}
.trend-m{font-size:.6rem;color:var(--t4);margin-top:3px}


/* ============================================================
   GRIDS
   ============================================================ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:769px){.g3{grid-template-columns:repeat(3,1fr);gap:16px}}

.lay{display:flex;flex-direction:column;gap:24px}
.lay-c{flex:1;min-width:0}
@media(min-width:769px){
  .lay{flex-direction:row;gap:28px}
  .lay-s{width:300px;flex-shrink:0}
}


/* ============================================================
   WIDGET
   ============================================================ */
.wgt{
  background:var(--card);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--s1);margin-bottom:16px;
}
.wgt-head{
  padding:12px 16px;
  background:linear-gradient(135deg,var(--g),var(--g-dark));
  color:#fff;font-family:var(--f2);
  font-size:.78rem;font-weight:700;
}
.wgt-body{padding:14px 16px}


/* ============================================================
   PROMO — Glassmorphism
   ============================================================ */
.promo{
  background:linear-gradient(145deg,var(--dark2),var(--dark3));
  border-radius:var(--r);padding:28px 20px;
  text-align:center;margin-top:16px;
  border:1px solid rgba(255,255,255,.06);
  position:relative;overflow:hidden;
}
.promo::before{
  content:'';position:absolute;
  top:-40px;right:-40px;width:120px;height:120px;
  background:var(--g-glow);border-radius:50%;filter:blur(40px);
}
.promo::after{
  content:'';position:absolute;
  bottom:-30px;left:-30px;width:80px;height:80px;
  background:var(--gold-glow);border-radius:50%;filter:blur(30px);
}
.promo>*{position:relative;z-index:1}
.promo h3{font-family:var(--f2);color:#fff;font-size:1.1rem;margin-bottom:6px}
.promo p{font-size:.78rem;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:16px}
.promo-btn{
  display:inline-block;padding:10px 24px;
  background:linear-gradient(135deg,var(--g),var(--gold));
  color:var(--dark);font-weight:800;font-size:.78rem;
  border-radius:var(--r-full);transition:all .2s;
  box-shadow:0 4px 16px var(--g-glow);
}
.promo-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--g-glow)}


/* ============================================================
   ARTICLE
   ============================================================ */
.art{background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--s2)}
.art-img{width:100%;height:240px;object-fit:cover;background:var(--bg2)}
.art-head{padding:20px 16px 16px;border-bottom:1px solid var(--line2)}
.art h1{
  font-family:var(--f2);font-size:1.5rem;font-weight:700;
  color:var(--t1);line-height:1.2;margin-bottom:16px;
  letter-spacing:-.02em;
}
.by{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.72rem;color:var(--t3)}
.by-av{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--g),var(--gold));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.78rem;flex-shrink:0;
}
.by-name{font-weight:700;color:var(--t1)}
.by-dot{width:3px;height:3px;border-radius:50%;background:var(--t5)}

.art-body{padding:20px 16px 28px;font-size:1.02rem;line-height:1.85;color:var(--t2)}
.art-body p{margin-bottom:20px}
.art-body h2{font-family:var(--f2);font-size:1.3rem;font-weight:700;color:var(--t1);margin:28px 0 12px}
.art-body h3{font-size:1.08rem;font-weight:700;color:var(--t1);margin:24px 0 10px}
.art-body img{margin:20px 0;border-radius:var(--r-sm);width:100%}
.art-body a{color:var(--g);text-decoration:underline;text-underline-offset:3px}
.art-body blockquote{
  margin:20px 0;padding:16px 20px;
  border-left:4px solid var(--gold);background:var(--gold-pale);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-style:italic;color:var(--t2);
}
.art-body ul,.art-body ol{padding-left:22px;margin-bottom:20px}
.art-body ul li{list-style:disc;margin-bottom:6px}
.art-body ol li{list-style:decimal;margin-bottom:6px}
.art-body strong{color:var(--t1)}

.art-end{display:flex;align-items:center;gap:8px;padding:0 16px;margin-bottom:14px}
.art-end span{flex:1;height:1px;background:var(--line2)}
.art-end i{width:8px;height:8px;background:var(--g);border-radius:50%;font-style:normal}

.share{
  padding:14px 16px;border-top:1px solid var(--line2);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.share-l{font-size:.72rem;font-weight:700;color:var(--t2);margin-right:4px}
.share a,.share button{
  padding:6px 14px;font-size:.68rem;font-weight:700;
  color:#fff;border:none;cursor:pointer;font-family:inherit;
  border-radius:var(--r-full);transition:all .15s;
}
.share a:hover,.share button:hover{transform:translateY(-1px);opacity:.9}
.s-wa{background:#25D366}
.s-tw{background:#1A1A1A}
.s-fb{background:#1877F2}
.s-cp{background:var(--bg2);color:var(--t2)}

@media(min-width:769px){
  .art-img{height:440px}
  .art-head{padding:28px 32px 24px}
  .art h1{font-size:2.1rem}
  .art-body{padding:28px 32px 36px}
  .art-end{padding:0 32px}
  .share{padding:16px 32px}
}


/* ============================================================
   COMMENTS — Gen Z clean
   ============================================================ */
.cmt-section{
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--s1);margin-top:16px;overflow:hidden;
}
.cmt-head{
  padding:14px 16px;border-bottom:1px solid var(--line2);
  display:flex;align-items:center;justify-content:space-between;
}
.cmt-head h3{font-family:var(--f2);font-size:.9rem;font-weight:700;color:var(--t1)}
.cmt-count{
  font-size:.66rem;font-weight:700;color:var(--g);
  background:var(--g-pale);padding:3px 10px;border-radius:var(--r-full);
}

.cmt-form{padding:16px;background:var(--bg);border-bottom:1px solid var(--line2)}
.cmt-form h4{font-size:.82rem;font-weight:700;margin-bottom:12px;color:var(--t1)}
.cf-name{
  width:100%;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-size:.84rem;font-family:inherit;color:var(--t1);
  background:var(--card);outline:none;margin-bottom:10px;
  transition:border-color .15s;
}
.cf-name:focus{border-color:var(--g);box-shadow:0 0 0 3px var(--g-glow)}
.cf-text{
  width:100%;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-size:.84rem;font-family:inherit;color:var(--t1);
  background:var(--card);outline:none;resize:vertical;
  min-height:90px;line-height:1.6;transition:border-color .15s;
}
.cf-text:focus{border-color:var(--g);box-shadow:0 0 0 3px var(--g-glow)}
.cf-submit{
  margin-top:10px;padding:10px 24px;
  background:linear-gradient(135deg,var(--g),var(--g-dark));
  color:#fff;font-size:.78rem;font-weight:700;
  border:none;border-radius:var(--r-full);cursor:pointer;
  font-family:inherit;transition:all .2s;
  box-shadow:0 2px 10px var(--g-glow);
}
.cf-submit:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--g-glow)}

.cmt-list{padding:0 16px}
.cmt{padding:16px 0;border-bottom:1px solid var(--line2)}
.cmt:last-child{border:none}
.cmt-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cmt-av{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--g-pale),var(--g-100));
  color:var(--g-dark);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.68rem;flex-shrink:0;
}
.cmt-who{font-size:.8rem;font-weight:700;color:var(--t1)}
.cmt-when{font-size:.62rem;color:var(--t4)}
.cmt-txt{font-size:.86rem;line-height:1.65;color:var(--t2);padding-left:40px}
.cmt-empty{padding:32px 16px;text-align:center;color:var(--t4);font-size:.84rem}

.alert{padding:12px 14px;font-size:.78rem;margin-bottom:10px;border-radius:var(--r-sm)}
.alert-ok{background:var(--g-pale);border-left:3px solid var(--g);color:var(--g-dark)}
.alert-err{background:#FFF0F0;border-left:3px solid var(--red);color:var(--red)}

@media(min-width:769px){
  .cmt-head{padding:14px 32px}
  .cmt-form{padding:20px 32px}
  .cmt-list{padding:0 32px}
}


/* ============================================================
   SEARCH
   ============================================================ */
.search-box{
  background:var(--card);border-radius:var(--r-lg);
  padding:24px 20px;box-shadow:var(--s2);margin-bottom:24px;
}
.search-box h1{font-family:var(--f2);font-size:1.3rem;margin-bottom:14px}
.search-form{display:flex;gap:8px}
.search-input{
  flex:1;padding:12px 16px;
  border:1.5px solid var(--line);border-radius:var(--r-full);
  font-size:.88rem;font-family:inherit;color:var(--t1);
  outline:none;transition:border-color .15s;
}
.search-input:focus{border-color:var(--g);box-shadow:0 0 0 3px var(--g-glow)}
.search-btn{
  padding:12px 24px;
  background:linear-gradient(135deg,var(--g),var(--g-dark));
  color:#fff;font-weight:700;font-size:.82rem;
  border:none;border-radius:var(--r-full);cursor:pointer;
  font-family:inherit;transition:all .15s;white-space:nowrap;
}
.search-btn:hover{box-shadow:0 4px 16px var(--g-glow)}
.search-results{margin-top:8px;font-size:.82rem;color:var(--t3)}

@media(min-width:769px){
  .search-box{padding:32px}
  .search-box h1{font-size:1.5rem}
}


/* ============================================================
   CATEGORY
   ============================================================ */
.cat-bar{
  background:linear-gradient(135deg,var(--g),var(--g-dark));
  padding:20px 0;margin-bottom:20px;
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.cat-bar h1{font-family:var(--f2);font-size:1.3rem;color:#fff}
.cat-bar p{font-size:.78rem;color:rgba(255,255,255,.55);margin-top:2px}

@media(min-width:769px){
  .cat-bar{padding:28px 0}
  .cat-bar h1{font-size:1.6rem}
}


/* ============================================================
   PAGINATION
   ============================================================ */
.pag{display:flex;justify-content:center;gap:6px;margin-top:24px;flex-wrap:wrap}
.pag a,.pag span{
  min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:600;
  background:var(--card);color:var(--t3);
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:all .15s;box-shadow:var(--s1);
}
.pag a:hover{border-color:var(--g);color:var(--g);background:var(--g-pale)}
.pag-on{
  background:linear-gradient(135deg,var(--g),var(--g-dark))!important;
  border-color:var(--g)!important;color:#fff!important;
  box-shadow:0 2px 10px var(--g-glow);
}


/* ============================================================
   EMPTY
   ============================================================ */
.empty{text-align:center;padding:60px 16px}
.empty h2{font-family:var(--f2);font-size:1.2rem;color:var(--t2);margin-bottom:6px}
.empty p{color:var(--t4)}


/* ============================================================
   FOOTER
   ============================================================ */
.ftr{
  background:var(--dark);color:rgba(255,255,255,.35);
  margin-top:40px;border-top:3px solid var(--g);
}
.ftr-in{padding:32px 0 24px}
.ftr-grid{display:grid;grid-template-columns:1fr;gap:20px}
.ftr-brand{font-family:var(--f2);font-size:1.1rem;color:#fff;margin-bottom:8px}
.ftr-brand span{
  background:linear-gradient(135deg,var(--g),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.ftr-desc{font-size:.74rem;color:rgba(255,255,255,.22);line-height:1.7;max-width:280px;margin-bottom:14px}
.ftr-soc{display:flex;gap:6px}
.ftr-soc a{
  width:30px;height:30px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-size:.64rem;font-weight:700;color:rgba(255,255,255,.3);
  transition:all .15s;
}
.ftr-soc a:hover{background:var(--g);border-color:var(--g);color:#fff;transform:translateY(-2px)}
.ftr-heading{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.18);margin-bottom:10px}
.ftr-links a{display:block;font-size:.74rem;color:rgba(255,255,255,.3);padding:3px 0;transition:color .15s}
.ftr-links a:hover{color:var(--g)}
.ftr-bottom{
  border-top:1px solid rgba(255,255,255,.04);
  padding:14px 0;font-size:.64rem;color:rgba(255,255,255,.15);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;
}

@media(min-width:769px){
  .ftr-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
  .ftr-in{padding:44px 0 32px}
}


/* ============================================================
   BUTTONS / FORMS / BADGES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 20px;font-size:.78rem;font-weight:700;
  cursor:pointer;font-family:inherit;border:none;
  white-space:nowrap;text-decoration:none;
  border-radius:var(--r-sm);transition:all .15s;
}
.btn-g{
  background:linear-gradient(135deg,var(--g),var(--g-dark));
  color:#fff;box-shadow:0 2px 8px var(--g-glow);
}
.btn-g:hover{box-shadow:0 4px 16px var(--g-glow);transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--t2);border:1.5px solid var(--line)}
.btn-o:hover{border-color:var(--t4)}
.btn-r{background:transparent;color:var(--red);border:1.5px solid #FFCDD2}
.btn-sm{padding:5px 12px;font-size:.7rem}
.btn-full{width:100%}

.fgroup{margin-bottom:16px}
.flabel{display:block;font-size:.74rem;font-weight:700;color:var(--t1);margin-bottom:5px}
.finput,.fselect,.ftextarea{
  width:100%;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-size:.84rem;color:var(--t1);background:var(--card);
  outline:none;font-family:inherit;transition:all .15s;
}
.finput:focus,.fselect:focus,.ftextarea:focus{
  border-color:var(--g);box-shadow:0 0 0 3px var(--g-glow);
}
.ftextarea{resize:vertical;min-height:140px;line-height:1.7}

.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;font-size:.6rem;font-weight:700;
  border-radius:var(--r-full);
}
.badge-g{background:var(--g-pale);color:var(--g-dark)}
.badge-a{background:var(--gold-pale);color:#A07B00}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ============================================================
   JOIN / SIGNUP PAGE
   ============================================================ */
.join-hero{
  background:linear-gradient(135deg,var(--g),var(--g-dark));
  border-radius:var(--r-lg);
  padding:28px 20px;
  margin-bottom:24px;
  position:relative;
  overflow:hidden;
}
.join-hero::before{
  content:'';position:absolute;
  top:-40px;right:-40px;width:150px;height:150px;
  background:rgba(255,255,255,.06);border-radius:50%;
}
.join-hero::after{
  content:'';position:absolute;
  bottom:-30px;left:20%;width:100px;height:100px;
  background:rgba(255,255,255,.04);border-radius:50%;
}
.join-hero-content{position:relative;z-index:1}
.join-hero h1{
  font-family:var(--f2);font-size:1.4rem;font-weight:700;
  color:#fff;margin-bottom:8px;
}
.join-hero p{
  font-size:.86rem;color:rgba(255,255,255,.6);
  line-height:1.6;max-width:500px;
}

@media(min-width:769px){
  .join-hero{padding:40px 36px}
  .join-hero h1{font-size:1.8rem}
}

.join-grid{
  display:flex;
  flex-direction:column;
  gap:24px;
}

@media(min-width:769px){
  .join-grid{
    flex-direction:row;
    gap:28px;
  }
  .join-form-wrap{flex:1;min-width:0}
  .join-info{width:300px;flex-shrink:0}
}

.join-form-wrap{
  background:var(--card);
  border-radius:var(--r);
  padding:20px;
  box-shadow:var(--s2);
}
.join-form-wrap h2{
  font-family:var(--f2);font-size:1.15rem;font-weight:700;
  margin-bottom:4px;
}
.join-form-sub{
  font-size:.82rem;color:var(--t3);margin-bottom:18px;line-height:1.5;
}

@media(min-width:769px){
  .join-form-wrap{padding:28px}
  .join-form-wrap h2{font-size:1.3rem}
}

.join-info-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
  margin-bottom:16px;
}
.join-info-card h3{
  font-family:var(--f2);font-size:.92rem;font-weight:700;
  margin-bottom:10px;color:var(--t1);
}
.join-info-card ul{
  display:flex;flex-direction:column;gap:8px;
}
.join-info-card li{
  font-size:.82rem;color:var(--t2);line-height:1.5;
}

.join-info-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  text-align:center;
}
.join-stat{}
.join-stat-num{
  font-family:var(--f2);font-size:1.8rem;font-weight:700;
  background:linear-gradient(135deg,var(--g),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1;margin-bottom:4px;
}
.join-stat-label{
  font-size:.66rem;font-weight:600;color:var(--t4);text-transform:uppercase;
  letter-spacing:.05em;
}

/* ============================================================
   ADMIN
   ============================================================ */
.admin-root{display:flex;min-height:100vh;background:var(--bg)}

/* ============================================================
   ADMIN SIDEBAR — Mobile toggle
   ============================================================ */
.adm-sb {
  width: 220px;
  background: var(--dark);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 300;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease;
  border-right: 1px solid rgba(255,255,255,.04);
}

/* Mobile: hidden by default */
@media (max-width: 768px) {
  .adm-sb {
    transform: translateX(-100%);
  }
  .adm-sb.open {
    transform: translateX(0);
  }
  .adm-main {
    margin-left: 0 !important;
  }
  /* Show admin burger */
  .adm-burger {
    display: flex !important;
  }
}

/* Desktop */
@media (min-width: 769px) {
  .adm-sb {
    transform: translateX(0);
  }
  .adm-main {
    margin-left: 220px;
  }
  .adm-burger {
    display: none !important;
  }
}

/* Admin burger button */
.adm-burger {
  display: none;
  width: 34px;
  height: 34px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.adm-burger span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--t2);
  border-radius: 1px;
  transition: .2s;
  pointer-events: none;
}
.adm-burger.on span:nth-child(1) { transform: rotate(45deg) translate(2px, 2px); }
.adm-burger.on span:nth-child(2) { opacity: 0; }
.adm-burger.on span:nth-child(3) { transform: rotate(-45deg) translate(2px, -2px); }

/* Admin overlay when sidebar open on mobile */
.adm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 299;
}
.adm-overlay.on {
  display: block;
}

.adm-pg{padding:20px;flex:1}

.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.st-card{
  background:var(--card);border:1px solid var(--line);
  padding:18px;border-radius:var(--r);
  transition:all .15s;
}
.st-card:hover{border-color:var(--g);box-shadow:var(--s-glow)}
.st-val{font-family:var(--f2);font-size:1.6rem;color:var(--t1);line-height:1;margin-bottom:2px}
.st-lbl{font-size:.66rem;font-weight:600;color:var(--t4)}

.ac{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.ac-head{padding:12px 16px;border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between}
.ac-title{font-family:var(--f2);font-size:.82rem;font-weight:700}
.ac-body{padding:16px}

.at{width:100%;border-collapse:collapse}
.at th{padding:8px 12px;text-align:left;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t4);border-bottom:1px solid var(--line)}
.at td{padding:10px 12px;font-size:.76rem;border-bottom:1px solid var(--line2)}
.at tr:hover td{background:var(--bg)}
.thumb-s{width:42px;height:30px;object-fit:cover;border-radius:4px;background:var(--bg2)}

/* Login */
.login-pg{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--dark);padding:16px;
  position:relative;overflow:hidden;
}
.login-pg::before{
  content:'';position:absolute;
  top:-100px;right:-100px;width:400px;height:400px;
  background:var(--g-glow);border-radius:50%;filter:blur(80px);
}
.login-pg::after{
  content:'';position:absolute;
  bottom:-100px;left:-100px;width:300px;height:300px;
  background:var(--gold-glow);border-radius:50%;filter:blur(60px);
}
.login-box{
  background:var(--card);width:100%;max-width:380px;
  padding:32px 28px;border-radius:var(--r-lg);
  box-shadow:var(--s3);position:relative;z-index:1;
}
.login-logo{text-align:center;margin-bottom:20px}
.login-logo span{
  font-family:var(--f2);font-size:1.6rem;font-weight:700;
}
.login-logo span i{font-style:normal}
.login-logo span b{
  background:linear-gradient(135deg,var(--g),var(--gold));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;font-weight:700;
}
.login-box h1{font-family:var(--f2);font-size:1.2rem;text-align:center;margin-bottom:4px}
.login-sub{text-align:center;font-size:.8rem;color:var(--t4);margin-bottom:22px}

.toggle{position:relative;width:38px;height:20px}
.toggle input{display:none}
.toggle-track{
  position:absolute;inset:0;background:var(--line);
  border-radius:var(--r-full);cursor:pointer;transition:.2s;
}
.toggle-track::before{
  content:'';position:absolute;width:14px;height:14px;
  background:#fff;border-radius:50%;top:3px;left:3px;
  transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.toggle input:checked+.toggle-track{background:var(--g)}
.toggle input:checked+.toggle-track::before{transform:translateX(18px)}

.upload-zone{
  border:2px dashed var(--line);padding:20px;text-align:center;
  background:var(--bg);cursor:pointer;transition:.15s;
  position:relative;border-radius:var(--r);
}
.upload-zone:hover{border-color:var(--g);background:var(--g-pale)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

/* Settings */
.settings-grid{display:grid;grid-template-columns:1fr;gap:16px}
.settings-nav{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:sticky;top:70px}
.settings-nav-a{
  display:block;padding:11px 16px;font-size:.78rem;font-weight:600;
  color:var(--t3);border-bottom:1px solid var(--line2);transition:.15s;
}
.settings-nav-a:last-child{border:none}
.settings-nav-a:hover{color:var(--t1);background:var(--bg)}
.settings-nav-a.on{color:var(--g);background:var(--g-pale);border-left:3px solid var(--g)}

@media(min-width:769px){
  .st-grid{grid-template-columns:repeat(4,1fr)}
  .settings-grid{grid-template-columns:180px 1fr}
}
@media(max-width:768px){
  .adm-sb{transform:translateX(-100%)}
  .adm-sb.open{transform:translateX(0)}
  .adm-main{margin-left:0}
}
@media print{
  .hdr,.ftr,.tkr,.share,.cmt-section{display:none!important}
  .art{box-shadow:none;border-radius:0}
}

/* ============================================================
   STATIC PAGES — About, Contact, Privacy, Terms, Advertise
   ============================================================ */
.page-header{
  padding:24px 0;
  margin-bottom:20px;
  border-bottom:3px solid var(--g);
}
.page-header h1{
  font-family:var(--f2);
  font-size:1.4rem;
  font-weight:700;
  color:var(--t1);
  margin-bottom:4px;
}
.page-header p{
  font-size:.82rem;
  color:var(--t4);
}

@media(min-width:769px){
  .page-header{padding:32px 0}
  .page-header h1{font-size:1.8rem}
}

.page-content{
  max-width:800px;
}

.page-grid{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.page-card{
  background:var(--card);
  border-radius:var(--r);
  padding:20px;
  box-shadow:var(--s1);
  border:1px solid var(--line);
}
.page-card h2{
  font-family:var(--f2);
  font-size:1.05rem;
  font-weight:700;
  color:var(--t1);
  margin-bottom:12px;
}
.page-card h3{
  font-size:.92rem;
  font-weight:700;
  color:var(--t1);
  margin:18px 0 8px;
}
.page-card p{
  font-size:.88rem;
  color:var(--t2);
  line-height:1.7;
  margin-bottom:14px;
}
.page-card p:last-child{margin-bottom:0}

@media(min-width:769px){
  .page-card{padding:28px}
  .page-card h2{font-size:1.2rem}
}

/* Features grid */
.page-features{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:14px;
}
.page-feature{
  padding:16px;
  background:var(--bg);
  border-radius:var(--r);
  border:1px solid var(--line);
}
.page-feature-icon{
  font-size:1.5rem;
  margin-bottom:8px;
}
.page-feature h3{
  font-size:.86rem;
  font-weight:700;
  color:var(--t1);
  margin:0 0 4px;
}
.page-feature p{
  font-size:.78rem;
  color:var(--t3);
  line-height:1.55;
  margin:0;
}

@media(min-width:480px){
  .page-features{grid-template-columns:1fr 1fr}
}
@media(min-width:769px){
  .page-features{grid-template-columns:1fr 1fr 1fr}
}

/* Values list */
.page-values{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-left:0;
}
.page-values li{
  font-size:.86rem;
  color:var(--t2);
  line-height:1.6;
  padding:10px 14px;
  background:var(--bg);
  border-radius:var(--r-sm);
  border-left:3px solid var(--g);
}
.page-values li strong{
  color:var(--t1);
}

/* Contact page grid */
.contact-grid{
  display:flex;
  flex-direction:column;
  gap:24px;
}

@media(min-width:769px){
  .contact-grid{
    flex-direction:row;
    gap:28px;
  }
  .contact-grid .page-card{flex:1;min-width:0}
  .contact-info{width:300px;flex-shrink:0}
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:0;
}

@media(min-width:480px){
  .form-row{flex-direction:row;gap:14px}
  .form-row .fgroup{flex:1}
}

.contact-info{}
.contact-info-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px;
  margin-bottom:16px;
}
.contact-info-card h3{
  font-family:var(--f2);
  font-size:.92rem;
  font-weight:700;
  margin-bottom:14px;
  color:var(--t1);
}

.contact-detail{
  display:flex;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line2);
  align-items:flex-start;
}
.contact-detail:last-child{border:none}
.contact-detail-icon{
  font-size:1.1rem;
  flex-shrink:0;
  margin-top:2px;
}
.contact-detail-label{
  font-size:.68rem;
  font-weight:600;
  color:var(--t4);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:2px;
}
.contact-detail-value{
  font-size:.84rem;
  font-weight:600;
  color:var(--g);
}

/* Advertise stats */
.ad-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}
.ad-stat{
  padding:16px;
  background:var(--bg);
  border-radius:var(--r);
  text-align:center;
  border:1px solid var(--line);
}
.ad-stat-num{
  font-family:var(--f2);
  font-size:1.4rem;
  font-weight:700;
  background:linear-gradient(135deg,var(--g),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1.1;
  margin-bottom:4px;
}
.ad-stat-label{
  font-size:.64rem;
  font-weight:600;
  color:var(--t4);
  text-transform:uppercase;
  letter-spacing:.04em;
}

@media(min-width:769px){
  .ad-stats{grid-template-columns:repeat(4,1fr)}
}

/* Ad options */
.ad-options{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:14px;
}
.ad-option{
  padding:16px;
  background:var(--bg);
  border-radius:var(--r);
  border:1px solid var(--line);
}
.ad-option h3{
  font-size:.88rem;
  font-weight:700;
  color:var(--t1);
  margin:0 0 6px;
}
.ad-option p{
  font-size:.8rem;
  color:var(--t3);
  line-height:1.55;
  margin:0;
}

@media(min-width:480px){
  .ad-options{grid-template-columns:1fr 1fr}
}

/* Legal content */
.legal-content h2{
  font-size:1rem;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--line2);
}
.legal-content h2:first-child{
  margin-top:0;
  padding-top:0;
  border:none;
}
.legal-content h3{
  font-size:.88rem;
  margin:14px 0 6px;
}
.legal-content ul{
  padding-left:20px;
  margin-bottom:14px;
}
.legal-content ul li{
  list-style:disc;
  font-size:.86rem;
  color:var(--t2);
  line-height:1.65;
  margin-bottom:6px;
}
.legal-content a{
  color:var(--g);
  text-decoration:underline;
  text-underline-offset:2px;
}