/* ════════════════════════════════════════════
   DESIGN TOKENS — Maker Studio
════════════════════════════════════════════ */
:root {
  /* Colors */
  --ink:          #1D1D1F;
  --steel:        #2C2C2C;
  --slate:        #555555;
  --ash:          #888888;
  --cloud:        #444444;
  --smoke:        #E8E8E8;
  --concrete:     #F8F8F8;
  --concrete-lt:  #FDFDFD;
  --concrete-dk:  #F0F0F2;
  --black:        #0A0A0A;

  /* Accents */
  --red:          #E63946;
  --red-dim:      #C0303B;
  --red-bg:       #FFF0F0;
  --teal:         #0D9488;
  --teal-dim:     #0A7A6F;
  --teal-bg:      #ECFDF5;
  --green:        #10B981;
  --green-bg:     #D1FAE5;
  --gold:         #F59E0B;
  --blue:         #0057B8;
  --blue-bg:      #EFF4FF;

  /* Typography */
  --display: 'Montserrat', sans-serif;
  --body:    'Outfit', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;

  /* Type scale — Major Third (1.25) */
  --t-xs:   0.64rem;
  --t-sm:   0.8rem;
  --t-base: 1rem;
  --t-md:   1.25rem;
  --t-lg:   1.563rem;
  --t-xl:   1.953rem;
  --t-2xl:  2.441rem;
  --t-3xl:  3.052rem;
  /* Spacing (8px grid) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;

  /* Radii */
  --r-pill: 50px;
  --r-card: 12px;
  --r-xl:   16px;
  --r-2xl:  20px;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.08);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.12);
  --shadow-xl: 0 16px 60px rgba(0,0,0,.14);

  /* Nav */
  --nav-h: 52px;
  /* Mobile bottom bar */
  --cta-bar-h: 72px;
}

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

html { font-size:16px }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--body);
  background: var(--steel);
  color: var(--concrete);
  overflow-x: hidden;
}

@media (min-width:768px) { html { font-size:18px } }

/* ════════════════════════════════════════════
   SCROLL PROGRESS
════════════════════════════════════════════ */
.scroll-progress {
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--red), var(--teal));
  z-index: 9999; will-change: width; transition: width .1s linear;
}

/* ════════════════════════════════════════════
   NAV
════════════════════════════════════════════ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:2000;
  height:auto; min-height:var(--nav-h);
  background: var(--steel);
  border:.5px solid var(--cloud); border-radius:0;
  backdrop-filter:none;
  display:flex; flex-direction:column;
  transition: background .35s ease, box-shadow .35s ease;
}

#nav {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease !important;
}

#nav.mx-nav-hidden {
  transform: translateY(-100%);
}

nav.menu-open { background: var(--steel); box-shadow:none }

.nav-inner {
  padding-left: clamp(10px,3vw,100px);
  padding-right: clamp(10px,3vw,100px);
  min-height: var(--nav-h); flex-shrink:0;
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
}
.logo {
  font-family: var(--display); font-size:18px; font-weight:900;
  color:var(--concrete); text-decoration:none; letter-spacing:-.04em;
  display:flex; align-items:center; gap:.5px; flex-shrink:0;
  transition: transform .2s ease-in-out;
}
.logo:hover { transform:scale(1.02) }
.logo-dot { color:var(--red) }
.logo-lottie-wrap { position:relative; display:flex; align-items:center; flex-shrink:0 }
.logo-lottie-wrap .logo { position:relative; z-index:99 }
.logo-lottie-bg {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; pointer-events:none; z-index:99;
  opacity:.5; filter:grayscale(1) brightness(1.2);
}
.nav-links { display:flex; align-items:center; gap:32px; list-style:none }
.nav-links a {
  font-size:12px; font-weight:600; color:var(--concrete);
  text-decoration:none; letter-spacing:.01em; transition:color .15s;
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-.5px; left:0; right:0; height:.5px;
  background:var(--steel); transform:scaleX(0);
  transition:transform .2s; transform-origin:left;
}
.nav-links a:hover { color:var(--concrete-lt) }
.nav-links a:hover::after { transform:scaleX(1); background:var(--red) }
.new-tag {
  background:var(--concrete); font-size:10px; padding:1px 4px; font-weight:600;
  color:var(--steel); border-radius:2px; text-transform:uppercase; transition:background .2s;
}
.new-tag:hover { background:var(--red); color:var(--concrete) }
.nav-actions { display:flex; align-items:center; gap:10px }
.btn-sm {
  font-size:12px; font-weight:600; padding:8px 18px; border-radius:var(--r-pill);
  cursor:pointer; text-decoration:none; transition:all .15s; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-outline { color:var(--concrete); background:var(--steel); border:.5px solid var(--cloud) }
.btn-outline:hover { color:var(--concrete); background:var(--red); border-color:var(--red) }
.btn-solid { color:var(--concrete); background:var(--steel); border:.5px solid var(--cloud) }
.btn-solid:hover { color:var(--concrete); background:var(--red); border-color:var(--red) }
#navAccountWrap { position:relative }
.nav-account-btn {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--cloud);
  background:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--ash); transform 0.2s ease-in-out;
}
.nav-account-btn:hover { border-color:var(--cloud); color:var(--concrete); transform : translateY(-2px) }
.nav-account-avatar {
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  font-family:var(--display); font-size:18px; font-weight:900; color:var(--concrete);
  background:var(--red); display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease; overflow:hidden;
}
.nav-account-avatar img { width:100%; height:100%; object-fit:cover }
.nav-account-avatar:hover { transform:translateY(-2px) }
.hamburger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  cursor:pointer; padding:6px; width:32px; height:32px;
  position:relative; z-index:2010; flex-shrink:0;
}
.hamburger span {
  display:block; width:20px; height:1px; background:var(--red); border-radius:.5px;
  transform-origin:center; transition:transform .35s cubic-bezier(.77,.2,.05,1), opacity .25s, width .3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0; width:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }
.mobile-menu {
  display:none; position:fixed; top:0; left:0; width:100vw; height:100dvh;
  background:var(--steel); flex-direction:column; justify-content:flex-start;
  padding:clamp(8px,2vh,12px) clamp(32px,8vw,80px) clamp(40px,6vh,80px);
  opacity:0; pointer-events:none; transition:opacity .3s; z-index:1999; overflow:hidden;
}
@media (max-width:768px) { .mobile-menu { display:flex }}
nav.menu-open .mobile-menu { opacity:1; pointer-events:auto }
.mobile-nav-links { list-style:none; display:flex; flex-direction:column; gap:0 }
.mobile-nav-links li a {
  display:block; font-family:var(--body); font-size:clamp(20px,6vw,34px);
  font-weight:600; color:var(--concrete); text-decoration:none;
  padding:12px 0; letter-spacing:-.03em; transition:color .15s;
}
.mobile-nav-links li a:hover { color:var(--red) }
.mobile-actions { display:flex; gap:12px; padding:28px 0 0; margin-top:28px }
.mobile-actions a {
  flex:1; text-align:center; font-size:13px; font-weight:600;
  padding:12px 20px; border-radius:var(--r-pill); text-decoration:none;
  letter-spacing:.02em; transition:all .15s;
}
.mob-btn-outline { color:var(--concrete); background:transparent; border:.5px solid var(--cloud) }
.mob-btn-outline:hover { background:var(--steel); color:var(--concrete) }
.mob-btn-solid { color:var(--concrete); background:var(--steel); border:.5px solid var(--steel) }
.mob-btn-solid:hover { background:var(--red); border-color:var(--red) }

/* ── HERO ── */
.page-top{height:var(--nav-h)}
.hero{background:var(--steel);border-bottom:1px solid var(--cloud);padding:40px clamp(24px,5vw,100px) 0;position:relative;overflow:hidden}
.hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
linear-gradient(rgba(255,255,255,0.015) .5px, transparent .5px),
linear-gradient(90deg, rgba(255,255,255,0.015) .5px, transparent .5px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}
.hero-top{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,60px);align-items:center}
.hero-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px}
.hero-tag-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero-tag-text{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.hero h1{ font-size: clamp(28px, 3vw, 48px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;}
.hero h1 .accent{color:var(--red)}
.hero-desc{font-size: clamp(12px, 1.2vw, 15px);
    max-width: clamp(200px, 28vw, 520px);
    line-height: 1.65;
    margin-bottom: clamp(20px, 1vw, 32px);
    margin-top: clamp(20px, 1vw, 32px);}
.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:32px}
.btn-hero-primary    {font-size: 14px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--concrete);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s;
    cursor: pointer;
    border: none;}
.btn-hero-primary:hover{background:var(--red)}
.btn-hero-ghost{    font-size: 14px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: var(--r-pill);
    background: var(--concrete);
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s;
    cursor: pointer;
    border: none;}
.btn-hero-ghost:hover{border-color:var(--ink)}
.search-wrap{display:flex;align-items:center;gap:12px;max-width:480px;margin-bottom:0}
.search-box{flex:1;display:flex;align-items:center;gap:10px;background:var(--concrete);border:1.5px solid var(--smoke);border-radius:var(--r-pill);padding:10px 18px;transition:border-color .2s}
.search-box:focus-within{border-color:var(--ink)}.search-box svg{color:var(--ash);flex-shrink:0}
.search-box input{border:none;background:transparent;font-family:var(--body);font-size:13px;color:var(--ink);outline:none;width:100%}
.search-box input::placeholder{color:var(--ash)}
.hero-stats {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--cloud);
    margin-top: 48px;
    background: var(--steel);
    grid-auto-flow: column;
    align-content: space-around;
    justify-content: stretch;
    align-items: center;
    justify-items: stretch;
}
.hero-stat{padding:10px 40px 10px 0;margin-right:40px;border-right:1px solid var(--cloud); justify-items:anchor-center}
.hero-stat:last-child{border-right:none;margin-right:0}
.hero-stat-num{font-family:var(--display);font-size:28px;font-weight:900;color:var(--concrete);letter-spacing:-.04em;line-height:1;margin-bottom:4px}
.hero-stat-label{font-size:11px;color:var(--concrete-dk);font-weight:500;letter-spacing:.04em}
/* ── HERO VIDEO WIDGET ── */
.hero-right{position:relative}
.hero-cta { display: block; }
.hero-top {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-items: start;
}
.hero-left  { grid-column: 1; grid-row: 1; }
.hero-right { grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
.hero-cta   { grid-column: 1; grid-row: 2; }
.hero-cta .hero-actions { max-width: 480px; }
.hvw{position:relative;border-radius:14px;overflow:hidden;background:var(--steel);border:1px solid var(--cloud)}
.hvw iframe{width:100%;aspect-ratio:16/9;border:none;display:block}
.hvw-overlay{position:absolute;inset:0;pointer-events:none}
.hvw-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent)}
.hvw-live{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;color:#fff;text-transform:uppercase}
.hvw-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.5s ease-in-out infinite}
.hvw-badge{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.5);text-transform:uppercase}
.hvw-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--ink);border-top:1px solid var(--cloud)}
.hvw-info{flex:1;min-width:0}
.hvw-title{font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hvw-author{font-size:10px;color:rgba(255,255,255,.55);margin-top:3px}
.hvw-btn{flex-shrink:0;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);background:var(--red);color:#fff;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:background .15s}
.hvw-btn:hover{background:var(--red-dim)}
.hvw-placeholder{border-radius:14px;border:1.5px dashed var(--smoke);background:linear-gradient(135deg,var(--concrete),var(--concrete-dark));aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ash);text-align:center;padding:24px}
.hvw-placeholder-icon{width:48px;height:48px;border-radius:12px;background:var(--smoke);display:flex;align-items:center;justify-content:center}
.hvw-placeholder p{font-size:12px;line-height:1.55;max-width:200px}
.hvw-placeholder strong{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px}

/* ── FILTERS ── */
.filter-section{padding:0 clamp(24px,5vw,100px);background:var(--steel);position:sticky;top:0px;border-bottom:1px solid var(--cloud);z-index:100}
.filter-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;flex-wrap:wrap;gap:12px}
.filter-tabs{display:flex;gap:4px;border-radius:var(--r-pill);padding:4px;border:1px solid var(--cloud);flex-wrap:wrap;background:darkslateblue}
.filter-tab{font-size:12px;font-weight:600;padding:7px 16px;border-radius:var(--r-pill);border:none;background:transparent;color:var(--concrete);cursor:pointer;transition:all .2s;letter-spacing:.02em;white-space:nowrap}
.filter-tab:hover{color:var(--ink);background:rgba(255,255,255,.7)}
.filter-tab.active{background:var(--concrete);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.diff-wrap{display:flex;gap:6px;align-items:center}
.diff-btn{font-family:var(--mono);font-size:10px;font-weight:700;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--cloud);background:transparent;color:var(--concrete);cursor:pointer;transition:all .15s;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.diff-btn:hover{background:var(--slate)}
.diff-btn.active.beginner{background:#DCFCE7;border-color:#86EFAC;color:#15803D}
.diff-btn.active.intermediate{background:#FEF9C3;border-color:#FDE047;color:#A16207}
.diff-btn.active.advanced{background:var(--red-bg);border-color:var(--red);color:var(--red)}

/* ── SECTION LABEL ── */
.section-label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:24px;display:flex;align-items:center;gap:12px}
.section-label::after{content:'';flex:1;height:1px;background:var(--cloud)}

/* ── FEATURED ── */
.featured-section{padding:64px clamp(24px,5vw,100px) 0}
.featured-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--cloud);border-radius:20px 20px 0 0 ;overflow:hidden;transition:box-shadow .3s;text-decoration:none;color:inherit;cursor:pointer}
.featured-img{position:relative;overflow:hidden;aspect-ratio:16 / 9;background:var(--steel)}
.featured-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.featured-card:hover .featured-img img{transform:scale(1.03)}
.featured-badge{position:absolute;top:20px;left:20px;background:var(--red);color:var(--concrete);font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill)}
.featured-content{padding:20px 40px;display:flex;flex-direction:column;justify-content:space-between;background:var(--ink);position:relative}
.yt-chip {
  position: absolute;
  top: 20px; right: 20px;
  width: 180px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(72,61,139,.4);
  border: 1.5px solid rgba(255,255,255,.12);
  z-index: 10;
  display: none;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.yt-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,.7) }
.yt-chip-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}
.yt-chip-video iframe {
  position: absolute;
  top: 50%; left: 50%;
  /* Scale up to hide YouTube controls/bars */
  width: 130%; height: 130%;
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
}
.yt-chip-label {
  background: #FF0000;
  color: #fff;
  font-family: var(--mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px;
  display: flex; align-items: center; gap: 5px;
}
.yt-chip-label svg { flex-shrink: 0 }
@media (max-width: 768px) {
  .yt-chip { position: static; width: 100%; margin-bottom: 16px; border-radius: 8px; }
  .yt-chip-video iframe { pointer-events: auto }
}
.featured-meta{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.feat-cat-tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.feat-diff{font-family:var(--mono);font-size:10px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);border:1.5px solid}
.diff-beginner{color:#15803D;border-color:#86EFAC;background:#DCFCE7}
.diff-intermediate{color:#A16207;border-color:#FDE047;background:#FEF9C3}
.diff-advanced{color:var(--red);border-color:var(--red);background:var(--red-bg)}
.meta-sep{color:var(--cloud)}
.featured-content h2{font-family:var(--display);font-size:clamp(22px,2vw,32px);font-weight:900;line-height:1.1;letter-spacing:-.025em;color:var(--concrete);margin-bottom:14px}
.featured-excerpt{font-size:14px;color:var(--ash);line-height:1.7;margin-bottom:28px;flex:1}
.featured-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--cloud);padding-top:20px;padding-left:20px;padding-bottom:20px;flex-wrap:wrap;gap:12px}
.featured-stats{display:flex;gap:16px;align-items:center}
.feat-stat{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--ash)}
.author-wrap{display:flex;align-items:center;gap:10px}
.author-avatar{width:36px;height:36px;border-radius:50%;background:var(--steel);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:12px;font-weight:900;color:var(--concrete);flex-shrink:0;overflow:hidden}
.author-avatar img{width:100%;height:100%;object-fit:cover}
.author-name{font-size:12px;font-weight:600;color:var(--concrete)}
.author-sub{font-size:11px;color:var(--ash)}
.read-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--concrete);text-decoration:none;transition:gap .2s;white-space:nowrap;padding-right: 20px;}
.read-link:hover{gap:10px}

/* ── PROJECT CARD ── */
.blog-section{padding:48px clamp(24px,5vw,100px) 80px}
.blog-layout{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.post-card{    border: 1px solid var(--cloud);
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--ink);
    transition: all .25s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    cursor: pointer;}
.post-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.09);border-color:var(--cloud)}
.post-card-img{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--concrete)}
.post-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.post-card:hover .post-card-img img{transform:scale(1.02)}
.post-card-tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);background:rgba(10,10,10,.8);color:var(--concrete);backdrop-filter:blur(8px)}
.tag-arm{background:rgba(0,87,184,.85)}.tag-rover{background:rgba(16,185,129,.85)}.tag-drone{background:rgba(147,51,234,.85)}.tag-humanoid{background:rgba(230,57,70,.85)}.tag-gripper{background:rgba(245,158,11,.85);color:#1A1A1A}.tag-vision{background:rgba(6,182,212,.85)}.tag-other{background:rgba(44,44,44,.85)}
.diff-badge{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);backdrop-filter:blur(8px)}
.diff-badge.beginner{background:rgba(220,252,231,.9);color:#15803D}.diff-badge.intermediate{background:rgba(254,249,195,.9);color:#A16207}.diff-badge.advanced{background:rgba(254,226,226,.9);color:var(--red)}
.post-card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.post-date{font-size:11px;color:var(--ash)}
.post-meta-dot{color:var(--cloud);font-size:10px}
.post-card-body h3{font-family:var(--display);font-size:16px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--concrete);margin-bottom:8px;transition:color .15s}
.post-card:hover h3{color:var(--red)}
.post-excerpt{font-size:13px;color:var(--ash);line-height:1.6;margin-bottom:16px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--cloud);padding-top:14px;margin-top:auto}
.post-author-mini{display:flex;align-items:center;gap:8px}
.post-avatar-mini{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:10px;font-weight:900;color:var(--concrete);flex-shrink:0;overflow:hidden;background:var(--steel)}
.post-avatar-mini img{width:100%;height:100%;object-fit:cover}
.post-author-name{font-size:12px;font-weight:600;color:var(--concrete-dk)}
.card-stats{display:flex;gap:10px;align-items:center}
.card-stat{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10px;color:var(--ash)}
.card-placeholder{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:var(--concrete);font-size:40px;opacity:.3}

/* ── LOAD MORE ── */
.load-more-wrap{text-align:center;margin-top:32px}
.btn-load-more{font-family:var(--body);font-size:13px;font-weight:700;padding:12px 32px;border-radius:var(--r-pill);border:1.5px solid var(--smoke);background:transparent;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.btn-load-more:hover{border-color:var(--ink);background:var(--concrete)}
.btn-load-more:disabled{opacity:.4;cursor:not-allowed}
#emptyState{display:none;text-align:center;padding:60px 20px;color:var(--ash)}
#emptyState h3{font-family:var(--display);font-size:24px;font-weight:900;letter-spacing:-.02em;margin-bottom:8px;color:var(--concrete)}

/* ── SIDEBAR ── */
.sidebar{display:flex;flex-direction:column;gap:24px;position:sticky;top:calc(var(--nav-h) + 80px)}
.sidebar-widget{border:1px solid var(--cloud);border-radius:var(--r-card);    background: radial-gradient(var(--ink), transparent);overflow:hidden}
.sidebar-widget-header{padding:16px 20px;border-bottom:1px solid var(--cloud);background:darkslateblue}
.sidebar-widget-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete)}
.sidebar-widget-body{padding:16px 20px}
.ws-sidebar-count-box { display:flex; flex-direction:column; align-items:center; gap:10px; padding:var(--sp-2,16px) 0; text-align:center }
.ws-sidebar-count-num { font-family:var(--display); font-size:2.4rem; font-weight:900; color:var(--concrete); line-height:1 }
.ws-sidebar-count-label { font-size:12px; color:var(--ash,#888); line-height:1.5 }
.btn-ws-see-all { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; font-size:12px; font-weight:700; padding:9px 18px; border-radius:50px; border:none; background:darkslategray; color:#fff; cursor:pointer; transition:all .2s }
.btn-ws-see-all:hover { background:var(--teal-dim,#0A7A6F); transform:translateY(-1px) }
.ws-sidebar-empty { font-size:12px; color:var(--ash,#888); text-align:center; padding:16px 0 }
#wsListModal { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:3500; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .2s }
#wsListModal.open { opacity:1; pointer-events:auto }
#wsListModalBox { background:#1D1D1F; border:1px solid #444; border-radius:16px; width:100%; max-width:800px; max-height:85vh; overflow:hidden; display:flex; flex-direction:column; transform:translateY(20px); transition:transform .25s }
#wsListModalScroll { overflow-y:auto; flex:1 }
#wsListModal.open #wsListModalBox { transform:translateY(0) }
.wslist-modal-head { display:flex; align-items:center; justify-content:space-between; padding:20px 28px; border-bottom:1px solid #444; position:sticky; top:0; background:#1D1D1F; z-index:1 }
.wslist-modal-title { font-family:var(--display,'Montserrat',sans-serif); font-size:20px; font-weight:800; color:#F8F8F8; letter-spacing:-.02em }
.wslist-modal-grid { padding:20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px }
.ws-card-thumb-svg { width:100%; height:100%; display:block; overflow:hidden }
.ws-card-thumb-svg svg { width:100%; height:100%; display:block }
.submit-cta-widget{background:darkslategray;border:1px solid var(--cloud)}
.submit-cta-widget .sidebar-widget-header{border:1px solid var(--cloud);background:darkslategray}
.submit-cta-widget .sidebar-widget-title{color:var(--concrete)}
.submit-cta-widget .sidebar-widget-body h4{color:var(--concrete);font-family:var(--display);font-size:18px;font-weight:900;letter-spacing:-.02em;margin-bottom:8px}
.submit-cta-widget .sidebar-widget-body p{font-size:12px;color:var(--concrete);line-height:1.6;margin-bottom:16px}
.btn-submit-project{width:100%;padding:11px;border-radius:var(--r-pill);border:none;background:var(--red);color:var(--concrete);font-family:var(--body);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
.btn-submit-project:hover{background:var(--red-dim)}
.popular-list{display:flex;flex-direction:column;gap:2px}
.popular-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;text-decoration:none;color:inherit;border-bottom:1px solid var(--cloud);transition:all .15s;cursor:pointer}
.popular-item:last-child{border-bottom:none}
.popular-item:hover .popular-title{color:var(--red)}
.popular-num{font-family:var(--display);font-size:18px;font-weight:900;color:var(--smoke);letter-spacing:-.04em;line-height:1.2;flex-shrink:0;min-width:28px}
.popular-title{font-size:13px;font-weight:600;color:var(--concrete);line-height:1.35;margin-bottom:3px;transition:color .15s}
.popular-meta{font-size:11px;color:var(--ash)}
.topics-grid{display:flex;flex-wrap:wrap;gap:8px}
.topic-pill{font-size:12px;font-weight:600;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--cloud);background:transparent;color:var(--ash);text-decoration:none;transition:all .2s;cursor:pointer}
.topic-pill:hover{border-color:var(--ink);color:var(--ash);background:var(--concrete)}
.topic-pill.active{background:var(--ink);color:var(--concrete);border-color:var(--ink)}

/* ── REVEAL ── */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .45s cubic-bezier(0.22,1,0.36,1), transform .45s cubic-bezier(0.22,1,0.36,1);
  will-change:opacity,transform;
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── AUTH MODAL ── */
.auth-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(12px);z-index:4000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.auth-modal-overlay.active{opacity:1;pointer-events:auto}
.auth-modal{background:var(--concrete);border-radius:20px;width:100%;max-width:440px;padding:32px;transform:translateY(20px) scale(.97);transition:transform .25s cubic-bezier(.4,0,.2,1);position:relative;max-height:90vh;overflow-y:auto}
.auth-modal-overlay.active .auth-modal{transform:translateY(0) scale(1)}
.auth-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:.5px solid var(--smoke);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ash);font-size:16px;transition:all .15s}
.auth-modal-close:hover{background:var(--ink);color:var(--concrete)}
.auth-logo{font-family:var(--display);font-size:18px;font-weight:900;color:var(--ink);letter-spacing:-.02em;margin-bottom:4px}
.auth-logo span{color:var(--red)}
.auth-sub{font-size:12px;color:var(--ash);margin-bottom:20px}
.auth-panel{display:none}.auth-panel.active{display:block}
.auth-tabs{display:flex;gap:0;margin-bottom:20px;border:1.5px solid var(--smoke);border-radius:10px;overflow:hidden}
.auth-tab-btn{flex:1;padding:10px;font-family:var(--body);font-size:13px;font-weight:600;color:var(--ash);background:transparent;border:none;cursor:pointer;transition:all .15s}
.auth-tab-btn.active{background:var(--ink);color:var(--concrete)}
.auth-field{margin-bottom:12px}
.auth-field label{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin-bottom:6px}
.auth-input{width:100%;padding:10px 14px;border:.5px solid var(--cloud);border-radius:10px;font-family:var(--body);font-size:14px;color:var(--ink);background:var(--concrete);outline:none;transition:border-color .2s}
.auth-input:focus{border-color:var(--ash)}.auth-input.error{border-color:var(--red)}
.auth-error{font-size:11px;color:var(--red);margin-top:4px;display:none}
.auth-submit-btn{width:100%;padding:12px;border-radius:var(--r-pill);border:none;background:var(--ink);color:var(--concrete);font-family:var(--body);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;margin-top:4px}
.auth-submit-btn:hover{background:var(--red)}.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed}
.auth-terms{font-size:11px;color:var(--ash);text-align:center;margin-top:12px;line-height:1.5}
.auth-terms a{color:var(--blue);text-decoration:none}
.auth-success-msg{text-align:center;padding:20px 0;font-size:14px;color:var(--green);font-weight:600}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:.5px;background:var(--smoke)}
.auth-divider span{font-size:11px;color:var(--ash)}
.photo-upload-wrap{display:flex;align-items:center;gap:12px;margin-top:4px}
.photo-preview{width:52px;height:52px;border-radius:50%;background:var(--concrete);border:1.5px dashed var(--cloud);display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;flex-shrink:0;cursor:pointer}
.photo-preview img{width:100%;height:100%;object-fit:cover}
.photo-upload-label{font-size:12px;color:var(--blue);cursor:pointer;font-weight:600}
.photo-upload-label:hover{text-decoration:underline}

/* ── SUBMIT PROJECT MODAL ── */
.submit-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(12px);z-index:4000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.submit-modal-overlay.active{opacity:1;pointer-events:auto}
.submit-modal{background:var(--concrete);border-radius:20px;width:100%;max-width:600px;padding:32px;transform:translateY(20px) scale(.97);transition:transform .25s cubic-bezier(.4,0,.2,1);position:relative;max-height:92vh;overflow-y:auto}
.submit-modal-overlay.active .submit-modal{transform:translateY(0) scale(1)}
.submit-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:.5px solid var(--smoke);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ash);font-size:16px;transition:all .15s}
.submit-modal-close:hover{background:var(--ink);color:var(--concrete)}
.submit-modal h3{font-family:var(--display);font-size:22px;font-weight:900;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.submit-modal p.sub{font-size:12px;color:var(--ash);margin-bottom:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin-bottom:6px}
.form-field label .optional{font-size:9px;color:var(--cloud);text-transform:none;letter-spacing:0;font-family:var(--body)}
.form-input{width:100%;padding:10px 14px;border:.5px solid var(--cloud);border-radius:10px;font-family:var(--body);font-size:14px;color:var(--ink);background:var(--concrete);outline:none;transition:border-color .2s}
.form-input:focus{border-color:var(--ash)}.form-input.error{border-color:var(--red)}
.form-textarea{width:100%;padding:10px 14px;border:.5px solid var(--cloud);border-radius:10px;font-family:var(--body);font-size:13px;color:var(--ink);background:var(--concrete);outline:none;resize:vertical;transition:border-color .2s;min-height:80px}
.form-textarea:focus{border-color:var(--ash)}
.form-select{width:100%;padding:10px 14px;border:.5px solid var(--cloud);border-radius:10px;font-family:var(--body);font-size:14px;color:var(--ink);background:var(--concrete);outline:none;appearance:none;cursor:pointer}
.form-section-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin:20px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--cloud)}
.btn-form-submit{width:100%;padding:13px;border-radius:var(--r-pill);border:none;background:var(--ink);color:var(--concrete);font-family:var(--body);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;margin-top:8px}
.btn-form-submit:hover{background:var(--red)}.btn-form-submit:disabled{opacity:.6;cursor:not-allowed}
.submit-error{font-size:12px;color:var(--red);margin-top:8px;display:none;text-align:center}
.submit-success{text-align:center;padding:32px 0}
.submit-success h4{font-family:var(--display);font-size:22px;font-weight:900;color:var(--ink);margin-bottom:8px}
.submit-success p{font-size:13px;color:var(--ash);line-height:1.6}

/* ── CTA BAND ── */
.cta-band{background:var(--ink);padding:64px clamp(24px,5vw,100px);display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-band-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:12px}
.cta-band h2{font-family:var(--display);font-size:clamp(28px,3vw,44px);font-weight:900;color:var(--concrete);letter-spacing:-.03em;line-height:1.05;margin-bottom:12px}
.cta-band p{font-size:14px;color:rgba(255,255,255,.45);max-width:460px;line-height:1.6}
.cta-band-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-cta-white{padding:12px 28px;border-radius:var(--r-pill);background:var(--concrete);color:var(--ink);font-size:14px;font-weight:700;text-decoration:none;transition:all .15s;white-space:nowrap}
.btn-cta-white:hover{background:var(--smoke)}
.btn-cta-ghost{padding:12px 28px;border-radius:var(--r-pill);background:transparent;color:rgba(255,255,255,.7);border:1.5px solid rgba(255,255,255,.2);font-size:14px;font-weight:600;text-decoration:none;transition:all .15s;white-space:nowrap}
.btn-cta-ghost:hover{border-color:rgba(255,255,255,.5);color:var(--concrete)}

/* ── FOOTER ── */
footer{background:var(--ink)}
.footer-top{padding:64px clamp(24px,5vw,100px);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;border-bottom:1px solid var(--cloud)}
.footer-logo{font-family:var(--display);font-size:20px;font-weight:900;color:var(--concrete);text-decoration:none;letter-spacing:-.04em;display:block;margin-bottom:14px}
.footer-logo span{color:var(--red)}
.footer-tagline{font-size:13px;color:rgba(255,255,255,.35);line-height:1.65;max-width:240px}
.footer-col h5{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:18px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul a{font-size:13px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .15s}
.footer-col ul a:hover{color:var(--concrete)}
.footer-bottom{padding:24px clamp(24px,5vw,100px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.2)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{font-size:12px;color:rgba(255,255,255,.2);text-decoration:none;transition:color .15s}
.footer-legal a:hover{color:rgba(255,255,255,.5)}

/* ── SKELETON ── */
.skeleton{background:linear-gradient(90deg,var(--concrete) 25%,var(--smoke) 50%,var(--concrete) 75%);background-size:400% 100%;animation:shimmer 1.5s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* ════════════════════════════════════════════
   MOBILE RESPONSIVE — Complete Overhaul
   Breakpoints: 1100 / 960 / 900 / 768 / 600 / 480
════════════════════════════════════════════ */

/* ── ≤1100px: Collapse layout to single column ── */
@media (max-width: 1100px) {
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    top: auto;
  }
}

@media (max-width: 960px) {
  .hero-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .hero-left  { order: 1; width: 100%; text-align: center; }
  .hero-right { order: 2; width: 100%; }
  .hero-cta   { order: 3; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .hero-actions { width: 100%; justify-content: center; flex-direction: row; flex-wrap: wrap; }
.btn-hero-primary, .btn-hero-ghost { flex: 1; justify-content: center; }
  .search-wrap { width: 100%; max-width: 100%; }
  .hero-desc { max-width: 100% !important; }
  .hero-tag  { justify-content: center; }
  .btn-hero-primary, .btn-hero-ghost { padding: 11px 16px; font-size: 13px; line-height: 1; }
}

/* ── ≤900px: Featured card stacks ── */
@media (max-width: 900px) {
  .featured-card {
    grid-template-columns: 1fr;
  }
  .featured-img {
    min-height: 260px;
  }
  .featured-content {
    padding: 28px 24px;
  }
  .featured-section {
    padding-top: 40px;
  }
}

/* ── ≤768px: Core mobile layout ── */
@media (max-width: 768px) {

  /* Nav */
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Hero */
  .hero {
    padding: 28px 20px 0;
  }
  .hero-left  { order: 1; }
  .hero-right { order: 2; }
  .hero-top {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.05 !important;
  }
  .hero-desc {
    font-size: 14px !important;
    max-width: 100% !important;
    margin-top: 16px !important;
    margin-bottom: 20px !important;
    line-height: 1.6 !important;
  }
.hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: space-between;
  }
  .btn-hero-primary,
  .btn-hero-ghost {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 14px 20px;
  }
  .search-wrap {
    max-width: 100%;
  }
  .search-box input {
    font-size: 14px;
  }

  /* Hero stats */
  .hero-stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 28px;
  }
  .hero-stat {
    padding: 16px 8px;
    margin-right: 0;
    text-align: center;
  }
  .hero-stat:last-child {
    border-right: none;
  }
  .hero-stat-num {
    font-size: 22px;
  }
  .hero-stat-label {
    font-size: 10px;
  }

  /* Featured */
  .featured-section {
    padding: 32px 20px 0;
  }
  .featured-card {
    grid-template-columns: 1fr;
  }
  .featured-img {
    min-height: 220px;
  }
  .featured-content {
    padding: 24px 20px;
  }
  .featured-content h2 {
    font-size: clamp(20px, 5vw, 28px);
  }
  .featured-excerpt {
    font-size: 13px;
  }
  .featured-footer {
    flex-wrap: wrap;
    gap: 16px;
  }

  /* Filter bar — horizontal scroll, no wrap */
  .filter-section {
    padding: 0;
  }
  .filter-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
    gap: 8px;
  }
  .filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    width: 100%;
    scrollbar-width: none;
    padding: 4px;
    gap: 2px;
  }
  .filter-tabs::-webkit-scrollbar {
    display: none;
  }
  .filter-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 11px;
  }
  .diff-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    width: 100%;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .diff-wrap::-webkit-scrollbar {
    display: none;
  }
  .diff-btn {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 9px;
    padding: 5px 10px;
  }

  /* Blog section */
  .blog-section {
    padding: 28px 20px 48px;
  }
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Sidebar — single column below grid */
  .sidebar {
    position: static !important;
    top: auto !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* CTA Band */
  .cta-band {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 20px;
    gap: 24px;
  }
  .cta-band h2 {
    font-size: clamp(24px, 6vw, 36px);
    margin-bottom: 10px;
  }
  .cta-band p {
    font-size: 13px;
  }
  .cta-band-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .btn-cta-white,
  .btn-cta-ghost {
    text-align: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    white-space: normal;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 40px 20px;
  }
  .footer-bottom {
    padding: 20px;
  }

  .hero-right {
    display: block;
    width: 100%;
    margin-top: 8px;
  }
  .hero-left {
    text-align: center;
  }
  .hero-tag {
    justify-content: center;
  }
  .hero-actions {
    align-items: center;
  }
  .search-wrap {
    margin: 0 auto;
  }
}

/* ── ≤600px: Small phones ── */
@media (max-width: 600px) {

  /* Nav */
  .btn-sm { display: none; }

  /* Hero */
  .hero {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero h1 {
    font-size: clamp(30px, 10vw, 42px) !important;
  }
  .hero-tag-text {
    font-size: 10px;
  }

  /* Hero stats */
  .hero-stat {
    padding: 12px 4px;
  }
  .hero-stat-num {
    font-size: 20px;
  }
  .hero-stat-label {
    font-size: 9px;
    letter-spacing: 0;
  }

  /* Featured */
  .featured-section {
    padding: 24px 16px 0;
  }
  .featured-content {
    padding: 20px 16px;
  }
  .featured-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .read-link {
    align-self: flex-start;
  }

  /* Filter */
  .filter-inner {
    padding: 10px 16px;
  }

  /* Blog */
  .blog-section {
    padding: 20px 16px 40px;
  }
  .post-card-body {
    padding: 16px;
  }
  .post-card-body h3 {
    font-size: 15px;
  }
  .post-excerpt {
    font-size: 12px;
  }

  /* Sidebar — full single column */
  .sidebar {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-legal {
    flex-wrap: wrap;
    gap: 14px;
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Modals */
  .auth-modal {
    padding: 24px 18px;
    border-radius: 16px;
    max-height: 95dvh;
  }
  .submit-modal {
    padding: 24px 18px;
    border-radius: 16px;
    max-height: 95dvh;
  }
  .submit-modal h3 {
    font-size: 18px;
  }

  /* CTA */
  .cta-band {
    padding: 32px 16px;
  }
}

/* ── ≤480px: Tiny phones (iPhone SE etc.) ── */
@media (max-width: 480px) {
  .hero-actions {
    gap: 8px;
  }
  .hero-top  { display: flex; flex-direction: column; }
  .hero-left { order: 1; }
  .hero-right { order: 2; width: 100%; }
  .hero-cta  { order: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin-top: 8px; }
  .hero-actions { width: 100%; justify-content: center; }
  .search-wrap { width: 100%; }
  .hero-actions {order : 3;}
  .search-wrap {order : 4;}
  .hero-stats {
    margin-top: 20px;
  }
  .btn-hero-primary,
  .btn-hero-ghost {
    padding: 13px 16px;
    font-size: 14px;
  }
  .section-label {
    font-size: 9px;
    letter-spacing: .1em;
    margin-bottom: 16px;
  }
  .featured-img {
    min-height: 180px;
  }
  .blog-grid {
    gap: 12px;
  }
  .load-more-wrap {
    margin-top: 20px;
  }
  .btn-load-more {
    font-size: 12px;
    padding: 11px 24px;
    width: 100%;
    justify-content: center;
  }
  .footer-top {
    padding: 32px 16px;
  }
  .footer-logo {
    font-size: 18px;
  }
  .footer-tagline {
    font-size: 12px;
    max-width: 100%;
  }
  .cta-band-label {
    font-size: 9px;
  }

  /* Sidebar widgets at full width */
  .sidebar-widget-body {
    padding: 14px 16px;
  }
  .sidebar-widget-header {
    padding: 12px 16px;
  }
  .submit-cta-widget .sidebar-widget-body h4 {
    font-size: 16px;
  }
  .submit-cta-widget .sidebar-widget-body p {
    font-size: 11px;
  }

  /* Auth modal */
  .auth-modal {
    padding: 20px 14px;
  }
  .submit-modal {
    padding: 20px 14px;
  }
}

/* ════ INVENTOR DASHBOARD OVERLAY ════ */
.dash-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:stretch;justify-content:flex-end;pointer-events:none}
.dash-overlay.active{pointer-events:auto}
.dash-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s;cursor:pointer}
.dash-overlay.active .dash-backdrop{opacity:1}
.dash-panel{position:relative;z-index:1;width:min(520px,100vw);height:100%;background:var(--concrete,#F8F8F8);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(0,0,0,.12);border-radius:12px 0 0 12px;}
.dash-overlay.active .dash-panel{transform:translateX(0)}
.dash-header{padding:20px 24px 0;flex-shrink:0}
.dash-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.dash-user-row{display:flex;align-items:center;gap:12px}
.dash-avatar{width:44px;height:44px;border-radius:50%;background:var(--red,#E63946);display:flex;align-items:center;justify-content:center;font-family:var(--display,'Montserrat',sans-serif);font-size:16px;font-weight:900;color:#fff;overflow:hidden;flex-shrink:0}
.dash-avatar img{width:100%;height:100%;object-fit:cover}
.dash-user-name{font-family:var(--display,'Montserrat',sans-serif);font-size:15px;font-weight:900;color:var(--ink,#1D1D1F);letter-spacing:-.02em}
.dash-user-email{font-size:11px;color:var(--ash,#888);margin-top:1px}
.dash-close-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--smoke,#E8E8E8);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ash,#888);font-size:16px;transition:all .15s;flex-shrink:0}
.dash-close-btn:hover{background:var(--ink,#1D1D1F);color:#fff;border-color:var(--ink,#1D1D1F)}
.dash-tabs{display:flex;gap:0;border-bottom:1px solid var(--cloud)}
.dash-tab{flex:1;padding:10px 4px;font-family:var(--body,'Outfit',sans-serif);font-size:12px;font-weight:600;color:var(--ash,#888);background:none;border:none;border-bottom:1px solid transparent;cursor:pointer;transition:all .15s;letter-spacing:.01em}
.dash-tab.active{color:var(--red,#E63946);border-bottom-color:var(--red,#E63946)}
.dash-body{flex:1;overflow-y:auto;padding:20px 24px 32px}
/* Tab panels */
.dash-pane{display:none}.dash-pane.active{display:block}
/* Project list */
.dp-list{display:flex;flex-direction:column;gap:10px}
.dp-card{background:#fff;border:1px solid var(--smoke,#E8E8E8);border-radius:12px;overflow:hidden;transition:box-shadow .2s}
.dp-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.dp-card-inner{display:flex;gap:12px;padding:14px}
.dp-thumb{width:64px;height:64px;border-radius:8px;background:var(--concrete,#F8F8F8);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--cloud,#C8C8C8)}
.dp-thumb img{width:100%;height:100%;object-fit:cover}
.dp-info{flex:1;min-width:0}
.dp-title{font-family:var(--display,'Montserrat',sans-serif);font-size:13px;font-weight:800;color:var(--ink,#1D1D1F);letter-spacing:-.02em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dp-status{font-family:var(--mono,'JetBrains Mono',monospace);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:50px}
.dp-status-published{background:#d1fae5;color:#065f46}
.dp-status-pending{background:#fef3c7;color:#92400e}
.dp-status-draft,.dp-status-deleted{background:var(--smoke,#E8E8E8);color:var(--ash,#888)}
.dp-stat{font-family:var(--mono,'JetBrains Mono',monospace);font-size:10px;color:var(--ash,#888);display:flex;align-items:center;gap:3px}
.dp-actions{display:flex;gap:6px;margin-top:2px}
.dp-btn{font-size:11px;font-weight:700;padding:5px 12px;border-radius:50px;border:1.5px solid;cursor:pointer;transition:all .15s;background:none;letter-spacing:.01em}
.dp-btn-edit{color:var(--ink,#1D1D1F);border-color:var(--smoke,#E8E8E8)}
.dp-btn-edit:hover{border-color:var(--ink,#1D1D1F);background:var(--ink,#1D1D1F);color:#fff}
.dp-btn-del{color:var(--red,#E63946);border-color:rgba(230,57,70,.25)}
.dp-btn-del:hover{background:var(--red,#E63946);color:#fff;border-color:var(--red,#E63946)}
.dp-empty{text-align:center;padding:48px 16px;color:var(--ash,#888);font-size:13px}
.dp-empty svg{opacity:.25;margin-bottom:12px}
/* Edit project view */
.dp-edit-view{display:none}
.dp-edit-view.active{display:block}
.dp-back-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--slate,#555);background:none;border:none;cursor:pointer;padding:0;margin-bottom:16px;transition:color .15s}
.dp-back-btn:hover{color:var(--red,#E63946)}
/* Shared form styles (reuse .auth-field / .auth-input pattern) */
.dash-field{margin-bottom:14px}
.dash-field label{display:block;font-family:var(--mono,'JetBrains Mono',monospace);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ash,#888);margin-bottom:6px}
.dash-field label span{color:var(--red,#E63946)}
.dash-input,.dash-select,.dash-textarea{width:100%;padding:9px 12px;border:1px solid var(--smoke,#E8E8E8);border-radius:8px;font-family:var(--body,'Outfit',sans-serif);font-size:13px;color:var(--ink,#1D1D1F);background:#fff;outline:none;transition:border-color .2s}
.dash-input:focus,.dash-select:focus,.dash-textarea:focus{border-color:var(--ash,#888)}
.dash-textarea{resize:vertical;min-height:90px;line-height:1.6}
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.dash-row{grid-template-columns:1fr}}
.dash-submit-btn{width:100%;padding:11px;border-radius:50px;border:none;font-family:var(--body,'Outfit',sans-serif);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;margin-top:4px}
.dash-submit-red{background:var(--red,#E63946);color:#fff}.dash-submit-red:hover{background:var(--red-dim,#C0303B)}
.dash-submit-ink{background:var(--ink,#1D1D1F);color:#fff}.dash-submit-ink:hover{opacity:.85}
.dash-submit-btn:disabled{opacity:.55;cursor:not-allowed}
.dash-error{font-size:11px;color:var(--red,#E63946);margin-bottom:10px;display:none}
.dash-success{font-size:12px;color:#065f46;background:#d1fae5;border-radius:8px;padding:10px 14px;margin-bottom:12px;display:none}
/* Profile photo */
.dash-photo-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.dash-photo-preview{width:60px;height:60px;border-radius:50%;background:var(--concrete,#F8F8F8);border:2px dashed var(--cloud,#C8C8C8);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;cursor:pointer}
.dash-photo-preview img{width:100%;height:100%;object-fit:cover}
.dash-photo-label{font-size:12px;color:var(--blue,#0057B8);cursor:pointer;font-weight:600}
.dash-photo-label:hover{text-decoration:underline}
/* Logout row */
.dash-logout-btn{width:100%;padding:10px;border-radius:50px;border:1px solid var(--smoke,#E8E8E8);background:none;font-family:var(--body,'Outfit',sans-serif);font-size:13px;font-weight:600;color:var(--ash,#888);cursor:pointer;transition:all .15s;margin-top:8px}
.dash-logout-btn:hover{border-color:var(--red,#E63946);color:var(--red,#E63946)}
/* Skeleton inside dash */
.dash-skel{background:linear-gradient(90deg,var(--concrete,#F8F8F8) 25%,var(--smoke,#E8E8E8) 50%,var(--concrete,#F8F8F8) 75%);background-size:400% 100%;animation:shimmer 1.5s infinite;border-radius:6px}

/* ── LIVE TAB ── */
.live-status-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;padding:3px 10px;border-radius:50px;letter-spacing:.06em;text-transform:uppercase}
.live-status-pill.live{background:#E63946;color:#fff}
.live-status-pill.live .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:lsdot 1.4s ease infinite;flex-shrink:0}
@keyframes lsdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.live-status-pill.scheduled{background:#FFFBEB;color:#92400E;border:1px solid #FDE68A}
.live-status-pill.ended{background:var(--concrete-dk,#F0F0F2);color:var(--ash,#888)}
.dp-live-form{display:flex;flex-direction:column;gap:14px}
.dp-live-session-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.dp-live-item{background:var(--white,#fff);border:1px solid var(--smoke,#E8E8E8);border-radius:10px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.dp-live-item-info{flex:1;min-width:0}
.dp-live-item-title{font-size:13px;font-weight:700;color:var(--ink,#1D1D1F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-live-item-meta{font-size:11px;color:var(--ash,#888);margin-top:2px;display:flex;align-items:center;gap:8px}
.dp-live-item-actions{display:flex;gap:6px;flex-shrink:0}
.dp-live-action-btn{font-size:11px;font-weight:600;padding:5px 12px;border-radius:50px;border:none;cursor:pointer;transition:all .15s;font-family:var(--body,'Outfit',sans-serif)}
.dp-live-watch{background:var(--red-bg,#FFF0F0);color:var(--red,#E63946)}
.dp-live-watch:hover{background:var(--red,#E63946);color:#fff}
.dp-live-end{background:var(--concrete-dk,#F0F0F2);color:var(--slate,#555)}
.dp-live-end:hover{background:var(--smoke,#E8E8E8)}
.dp-live-divider{font-size:11px;font-weight:700;color:var(--ash,#888);text-transform:uppercase;letter-spacing:.06em;margin:8px 0 4px}
.dp-live-empty{text-align:center;padding:24px;color:var(--ash,#888);font-size:13px}
.dp-live-success{display:none;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px 10px}
.dp-live-success.active{display:flex}
.dp-live-success-icon{font-size:40px}
.dp-live-success-title{font-family:var(--display,'Montserrat',sans-serif);font-size:18px;font-weight:800;color:var(--teal,#0D9488)}
.dp-live-success-sub{font-size:13px;color:var(--slate,#555)}
.dp-live-link{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;background:var(--red,#E63946);color:#fff;border-radius:50px;font-size:13px;font-weight:700;text-decoration:none;margin-top:4px;transition:background .15s}
.dp-live-link:hover{background:var(--red-dim,#C0303B)}
/* ── GO LIVE TAB ── */
.live-status-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;padding:3px 10px;border-radius:50px;letter-spacing:.06em;text-transform:uppercase}
.live-status-pill.live{background:#E63946;color:#fff}
.live-status-pill.live .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:lsdot 1.4s ease infinite;flex-shrink:0}
@keyframes lsdot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.live-status-pill.scheduled{background:#FFFBEB;color:#92400E;border:1px solid #FDE68A}
.live-status-pill.ended{background:var(--concrete-dk,#F0F0F2);color:var(--ash,#888)}

/* Camera preview */
.cam-preview-wrap{position:relative;background:#111;border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-bottom:14px}
.cam-preview-wrap video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}
.cam-status-bar{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between}
.cam-live-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(230,57,70,.9);color:#fff;font-size:10px;font-weight:800;padding:4px 10px;border-radius:50px;letter-spacing:.06em}
.cam-live-badge .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:lsdot 1.4s ease infinite}
.cam-timer{font-family:var(--mono,'JetBrains Mono',monospace);font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.6);padding:3px 10px;border-radius:50px}
.cam-permission{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;padding:20px;text-align:center}
.cam-permission svg{opacity:.4}
.cam-permission p{font-size:12px;color:var(--ash,#888)}
.cam-controls{display:flex;gap:8px}
.cam-ctrl-btn{flex:1;padding:10px;border-radius:50px;border:none;font-family:var(--body,'Outfit',sans-serif);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px}
.cam-ctrl-btn:disabled{opacity:.45;cursor:not-allowed}
.btn-golive{background:var(--red,#E63946);color:#fff}
.btn-golive:hover:not(:disabled){background:var(--red-dim,#C0303B)}
.btn-endlive{background:var(--concrete-dk,#F0F0F2);color:var(--slate,#555)}
.btn-endlive:hover:not(:disabled){background:var(--smoke,#E8E8E8)}
.btn-camlive-secondary{background:var(--concrete-dk,#F0F0F2);color:var(--slate,#555);flex:0 0 auto;padding:10px 14px}

/* Sessions list */
.dp-live-divider{font-size:11px;font-weight:700;color:var(--ash,#888);text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px}
.dp-live-list{display:flex;flex-direction:column;gap:8px}
.dp-live-item{background:var(--white,#fff);border:1px solid var(--smoke,#E8E8E8);border-radius:10px;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.dp-live-item-left{flex:1;min-width:0}
.dp-live-item-title{font-size:13px;font-weight:700;color:var(--ink,#1D1D1F);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-live-item-meta{font-size:11px;color:var(--ash,#888);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dp-live-item-actions{display:flex;gap:6px;flex-shrink:0}
.dp-li-btn{font-size:11px;font-weight:600;padding:5px 12px;border-radius:50px;border:none;cursor:pointer;transition:all .15s;font-family:var(--body,'Outfit',sans-serif)}
.dp-li-watch{background:var(--red-bg,#FFF0F0);color:var(--red,#E63946)}
.dp-li-watch:hover{background:var(--red,#E63946);color:#fff}
.dp-li-end{background:var(--concrete-dk,#F0F0F2);color:var(--slate,#555)}
.dp-li-end:hover{background:var(--smoke,#E8E8E8)}
.dp-live-empty{text-align:center;padding:20px;color:var(--ash,#888);font-size:13px}

/* ── Workshop tab & dash ── */
.ws-section-title{font-family:var(--mono,'JetBrains Mono',monospace);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ash,#888);margin:18px 0 10px;border-top:1px solid var(--smoke,#E8E8E8);padding-top:14px}
.ws-session-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ws-add-session-btn{width:100%;padding:8px;border:1px dashed var(--cloud,#C8C8C8);border-radius:8px;background:transparent;font-family:var(--body,'Outfit',sans-serif);font-size:12px;color:var(--ash,#888);cursor:pointer;transition:all .15s;margin-top:4px}
.ws-add-session-btn:hover{border-color:var(--teal,#0D9488);color:var(--teal,#0D9488)}
.ws-session-item{display:flex;align-items:center;gap:8px;background:var(--concrete,#F8F8F8);border-radius:8px;padding:8px 10px;margin-bottom:6px}
.ws-session-item span{flex:1;font-size:12px;color:var(--ink,#1D1D1F)}
.ws-session-remove{width:20px;height:20px;border-radius:50%;background:var(--smoke,#E8E8E8);border:none;cursor:pointer;font-size:12px;color:var(--ash,#888);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.ws-session-remove:hover{background:var(--red-bg,#FFF0F0);color:var(--red,#E63946)}
 
/* Inventor workshop list items */
.ws-item{background:var(--white,#fff);border:1px solid var(--smoke,#E8E8E8);border-radius:10px;padding:13px 14px;margin-bottom:10px;transition:border-color .15s}
.ws-item:hover{border-color:var(--cloud,#C8C8C8)}
.ws-item-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.ws-item-title{font-size:13px;font-weight:700;color:var(--ink,#1D1D1F);flex:1}
.ws-item-meta{font-size:11px;color:var(--ash,#888);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ws-item-actions{display:flex;gap:6px;flex-shrink:0;margin-top:8px}
.ws-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:50px;letter-spacing:.04em}
.ws-pill-free{background:#ECFDF5;color:#065f46}
.ws-pill-paid{background:#EFF4FF;color:var(--blue,#0057B8)}
.ws-pill-cancelled{background:var(--concrete-dk,#F0F0F2);color:var(--ash,#888)}
.ws-pill-single{background:var(--concrete,#F8F8F8);color:var(--slate,#555)}
.ws-pill-series{background:#F5F3FF;color:var(--purple,#7C3AED)}
.ws-action-btn{font-size:11px;font-weight:600;padding:5px 12px;border-radius:50px;border:none;cursor:pointer;transition:all .15s;font-family:var(--body,'Outfit',sans-serif)}
.ws-btn-view{background:var(--concrete-dk,#F0F0F2);color:var(--slate,#555)}
.ws-btn-view:hover{background:var(--smoke,#E8E8E8)}
.ws-btn-cancel{background:var(--red-bg,#FFF0F0);color:var(--red,#E63946)}
.ws-btn-cancel:hover{background:var(--red,#E63946);color:#fff}
 
/* ── Viewer-facing workshop cards ── */
.workshops-section{padding:var(--sp-4,32px) clamp(16px,5vw,100px);background:var(--white,#fff)}
.workshops-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3,24px);flex-wrap:wrap;gap:10px}
.workshops-section-title{font-family:var(--display,'Montserrat',sans-serif);font-size:var(--t-lg,1.563rem);font-weight:800;color:var(--ink,#1D1D1F)}
.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
@media(max-width:540px){.ws-grid{grid-template-columns:1fr}}
 
.ws-card{background:var(--white,#fff);border:1px solid var(--smoke,#E8E8E8);border-radius:16px;overflow:hidden;transition:all .2s;cursor:pointer}
.ws-card:hover{border-color:var(--cloud,#C8C8C8);box-shadow:0 8px 32px rgba(0,0,0,.1);transform:translateY(-2px)}
.ws-card-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--concrete,#F8F8F8),var(--smoke,#E8E8E8));position:relative;overflow:hidden}
.ws-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ws-card-thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;background:linear-gradient(135deg,#F0F4FF,#E8F5FF)}
.ws-card-price-badge{position:absolute;top:10px;right:10px;font-size:11px;font-weight:800;padding:4px 10px;border-radius:50px}
.ws-price-free{background:#ECFDF5;color:#065f46}
.ws-price-paid{background:var(--ink,#1D1D1F);color:#fff}
.ws-card-body{padding:16px}
.ws-card-level{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal,#0D9488);margin-bottom:6px}
.ws-card-title{font-family:var(--display,'Montserrat',sans-serif);font-size:15px;font-weight:800;color:var(--ink,#1D1D1F);line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ws-card-meta{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.ws-card-meta-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ash,#888)}
.ws-card-meta-row svg{flex-shrink:0;color:var(--slate,#555)}
.ws-card-inv{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--smoke,#E8E8E8)}
.ws-card-inv-photo{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.ws-card-inv-ph{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--teal,#0D9488),var(--teal-dim,#0A7A6F));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;flex-shrink:0}
.ws-card-inv-name{font-size:11px;font-weight:600;color:var(--slate,#555)}
.ws-card-sub-count{font-size:10px;color:var(--ash,#888);margin-left:auto}
 
/* ── Subscribe modal ── */
.ws-modal-price-row{display:flex;align-items:center;justify-content:space-between;background:var(--concrete,#F8F8F8);border-radius:10px;padding:12px 14px;margin-bottom:16px}
.ws-modal-price-label{font-size:12px;color:var(--slate,#555)}
.ws-modal-price-amount{font-family:var(--mono,'JetBrains Mono',monospace);font-size:20px;font-weight:700;color:var(--ink,#1D1D1F)}
.ws-modal-price-amount.free{color:var(--teal,#0D9488)}
.ws-modal-learn{margin-bottom:14px}
.ws-modal-learn-title{font-size:11px;font-weight:700;color:var(--ash,#888);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.ws-modal-learn-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.ws-modal-learn-list li{font-size:12px;color:var(--slate,#555);display:flex;align-items:flex-start;gap:6px}
.ws-modal-learn-list li::before{content:'✓';color:var(--teal,#0D9488);font-weight:700;flex-shrink:0;margin-top:1px}
.ws-modal-sessions{margin-bottom:14px}
.ws-modal-sessions-title{font-size:11px;font-weight:700;color:var(--ash,#888);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.ws-session-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;background:var(--concrete,#F8F8F8);color:var(--slate,#555);padding:4px 10px;border-radius:50px;margin-right:6px;margin-bottom:6px}
.ws-join-success{background:#ECFDF5;border:1px solid #A7F3D0;border-radius:10px;padding:14px;margin-top:8px;display:none}
.ws-join-success.active{display:block}
.ws-join-link-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:var(--teal,#0D9488);color:#fff;border-radius:50px;font-size:13px;font-weight:700;text-decoration:none;margin-top:8px;transition:background .15s}
.ws-join-link-btn:hover{background:var(--teal-dim,#0A7A6F)}
.ws-no-link{font-size:12px;color:var(--slate,#555);margin-top:6px}
 
/* commission note */
.ws-commission-note{font-size:10px;color:var(--ash,#888);text-align:center;margin-top:6px}

/* ── Dash image uploader ── */
.dash-img-upload-wrap { display:flex; flex-direction:column; gap:10px }
.dash-img-dropzone {
  border:2px dashed var(--cloud,#C8C8C8); border-radius:10px;
  padding:20px; text-align:center; cursor:pointer;
  transition:border-color .15s; background:var(--concrete,#F8F8F8);
  position:relative; overflow:hidden;
}
.dash-img-dropzone:hover { border-color:var(--teal,#0D9488) }
.dash-img-dropzone input[type=file] {
  position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
}
.dash-img-dropzone-label { font-size:12px; color:var(--ash,#888); pointer-events:none }
.dash-img-dropzone-label strong { color:var(--teal,#0D9488) }
.dash-cover-preview {
  width:100%; max-height:160px; object-fit:cover;
  border-radius:8px; border:1px solid var(--smoke,#E8E8E8); display:none;
}
.dash-gallery-thumbs { display:flex; flex-wrap:wrap; gap:8px }
.dash-gallery-thumb-item {
  width:72px; height:72px; border-radius:8px; overflow:hidden;
  position:relative; border:1px solid var(--smoke,#E8E8E8); flex-shrink:0;
}
.dash-gallery-thumb-item img { width:100%; height:100%; object-fit:cover; display:block }
.dash-gallery-thumb-remove {
  position:absolute; top:2px; right:2px; width:18px; height:18px;
  border-radius:50%; background:rgba(0,0,0,.65); border:none;
  cursor:pointer; color:#fff; font-size:10px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.dash-img-uploading { font-size:11px; color:var(--teal,#0D9488); display:none; align-items:center; gap:6px }
.dash-img-uploading .spinner { width:14px; height:14px; border:2px solid var(--smoke); border-top-color:var(--teal); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0 }
@keyframes spin { to { transform:rotate(360deg) } }