/* /public_html/themes/vision/assets/css/blog.css (EN)
   ============================================================
   QUANTAPS • BLOG CSS — CLEAN / PREMIUM / EDITORIAL (v3.2)
   - Index + archive + post unified system
   - Hero/topbar-aligned accent language
   - Research side card refined
   - Banner / CTA color family unified
   - Editor's Pick slider fixed for new markup
   - Archive sidebar polished
   - Mobile section separators improved
   ============================================================ */

:root{
  --qt-blog-max: 1240px;
  --qt-blog-gap: 16px;
  --qt-sticky-top: 78px;

  --qt-surface: rgba(255,255,255,.90);
  --qt-surface2: rgba(255,255,255,.78);
  --qt-surface3: rgba(255,255,255,.95);

  --qt-border: rgba(148,163,184,.20);
  --qt-border-soft: rgba(148,163,184,.13);

  --qt-ink: var(--qt-ink, #0e1321);
  --qt-ink-2: #11172a;
  --qt-muted: rgba(16,21,38,.72);
  --qt-muted2: rgba(16,21,38,.60);
  --qt-muted3: rgba(16,21,38,.48);

  --qt-ac: var(--accent, #6a7eff);
  --qt-ac-2: #8aa0ff;
  --qt-ac-3: #b05cff;
  --qt-ac-soft: rgba(106,126,255,.10);
  --qt-cyan-soft: rgba(122,216,255,.14);

  --qt-topbar-bg-1:#eef5ff;
  --qt-topbar-bg-2:#edf0ff;
  --qt-topbar-bg-3:#f6f0ff;

  --qt-topbar-border:rgba(99,119,255,.20);
  --qt-topbar-border-strong:rgba(99,119,255,.30);

  --qt-topbar-ink:#172042;
  --qt-topbar-ink-soft:rgba(23,32,66,.82);

  --qt-topbar-cta-bg:#6fa8ff;
  --qt-topbar-cta-bg-2:#7c63ff;
  --qt-topbar-cta-ink:#ffffff;

  --qt-shadow-xs: 0 6px 16px rgba(15,18,36,.04);
  --qt-shadow-sm: 0 12px 28px rgba(15,18,36,.06);
  --qt-shadow-md: 0 18px 44px rgba(15,18,36,.08);
  --qt-shadow-lg: 0 22px 56px rgba(85,102,188,.10);

  --qt-r-12: 12px;
  --qt-r-14: 14px;
  --qt-r-16: 16px;
  --qt-r-18: 18px;
  --qt-r-20: 20px;
  --qt-r-22: 22px;
  --qt-r-24: 24px;
  --qt-r-26: 26px;
  --qt-r-28: 28px;
}

/* ============================================================
   BASE
   ============================================================ */

.qt-blog-index,
.qt-post{
  color:var(--qt-ink);
  background:
    radial-gradient(1100px 520px at 50% -220px, rgba(106,126,255,.16), transparent 62%),
    radial-gradient(860px 420px at 10% 0%, rgba(122,216,255,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 540px);
}

.qt-blog-index{
  padding:18px 0 52px;
}

.qt-post{
  padding:18px 0 46px;
}

.qt-blog-shell,
.qt-post-shell{
  width:min(var(--qt-blog-max), calc(100% - 32px));
  margin:0 auto;
  display:grid;
  gap:18px;
}

.qt-blog-frame,
.qt-post-frame{
  border:1px solid rgba(148,163,184,.16);
  border-radius:var(--qt-r-28);
  background:rgba(255,255,255,.92);
  box-shadow:var(--qt-shadow-md);
  padding:18px;
}

.qt-post-frame{
  position:relative;
  overflow:visible;
}

.qt-blog a,
.qt-post a{
  -webkit-tap-highlight-color:transparent;
}

.qt-blog img,
.qt-post img{
  max-width:100%;
  display:block;
}

.qt-blog-sec{
  position:relative;
  padding-top:6px;
}

.qt-blog-sec + .qt-blog-sec{
  border-top:1px solid rgba(148,163,184,.14);
  padding-top:20px;
}

.qt-blog-sec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.qt-blog-sec-title{
  margin:0;
  font-size:20px;
  line-height:1.14;
  font-weight:950;
  color:rgba(16,21,38,.96);
  letter-spacing:-.025em;
}

.qt-blog-sec-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid rgba(16,21,38,.14);
  background:#fff;
  color:rgba(16,21,38,.92);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, color .16s ease, box-shadow .16s ease;
}

.qt-blog-sec-link:hover{
  transform:translateY(-1px);
  border-color:rgba(106,126,255,.28);
  background:rgba(106,126,255,.06);
  box-shadow:var(--qt-shadow-xs);
}

.qt-blog-tag{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:0 9px;
  border-radius:9px;
  background:rgba(106,126,255,.08);
  color:rgba(16,21,38,.82);
  font-size:11px;
  font-weight:850;
  width:max-content;
}

.qt-blog-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color:rgba(16,21,38,.58);
  font-size:12px;
  font-weight:700;
}

.qt-blog-empty{
  padding:18px 0 8px;
  color:rgba(16,21,38,.62);
  font-size:14px;
  font-weight:750;
}

/* ============================================================
   HERO
   ============================================================ */

.qt-blog-hero{
  display:grid;
  gap:18px;
  padding:22px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:24px;
  background:
    radial-gradient(620px 240px at 14% -10%, rgba(106,126,255,.14), transparent 60%),
    radial-gradient(520px 240px at 100% 0%, rgba(122,216,255,.10), transparent 58%),
    linear-gradient(135deg,
      rgba(238,245,255,.80) 0%,
      rgba(237,240,255,.64) 52%,
      rgba(246,240,255,.74) 100%);
}

.qt-blog-bc,
.qt-post-bc{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:rgba(16,21,38,.58);
}

.qt-blog-bc a,
.qt-post-bc a{
  color:rgba(16,21,38,.72);
  text-decoration:none;
}

.qt-blog-bc a:hover,
.qt-post-bc a:hover{
  text-decoration:underline;
}

.qt-blog-bc .sep,
.qt-post-bc .sep{
  opacity:.42;
}

.qt-blog-bc .current,
.qt-post-bc .current{
  color:rgba(16,21,38,.90);
  font-weight:800;
}

.qt-blog-hero-main{
  text-align:center;
  max-width:860px;
  margin:0 auto;
}

.qt-blog-title{
  margin:0;
  font-size:clamp(34px, 4.8vw, 58px);
  line-height:.98;
  letter-spacing:-.04em;
  color:rgba(16,21,38,.98);
}

.qt-blog-sub{
  margin:14px auto 0;
  max-width:62ch;
  color:rgba(16,21,38,.70);
  font-size:15px;
  line-height:1.75;
  font-weight:650;
}

.qt-blog-search-wrap{
  width:min(560px, 100%);
  margin:0 auto;
}

.qt-blog-search{
  position:relative;
  display:block;
}

.qt-blog-inp{
  width:100%;
  min-height:58px;
  padding:0 58px 0 18px;
  border-radius:18px;
  border:1.5px solid rgba(148,163,184,.24);
  background:#fff;
  color:rgba(16,21,38,.92);
  font-size:15px;
  font-weight:700;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.qt-blog-inp::placeholder{
  color:rgba(16,21,38,.52);
  font-weight:600;
}

.qt-blog-inp:focus{
  border-color:color-mix(in srgb, var(--qt-ac) 48%, var(--qt-border));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--qt-ac) 14%, transparent);
}

.qt-blog-btn{
  position:absolute;
  top:50%;
  right:8px;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:rgba(16,21,38,.88);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .16s ease, transform .16s ease;
}

.qt-blog-btn:hover{
  background:rgba(106,126,255,.08);
}

.qt-blog-btn svg{
  width:22px;
  height:22px;
  display:block;
}

/* ============================================================
   HOME TOP GRID
   ============================================================ */

.qt-blog-top-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(320px, .92fr);
  gap:22px;
}

.qt-blog-featured,
.qt-blog-latest{
  min-width:0;
}

.qt-blog-featured-card{
  display:grid;
  gap:12px;
  color:inherit;
  text-decoration:none;
}

.qt-blog-featured-media{
  aspect-ratio:16/10;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(148,163,184,.10);
  box-shadow:var(--qt-shadow-xs);
}

.qt-blog-featured-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.qt-blog-featured-title{
  margin:0;
  font-size:22px;
  line-height:1.20;
  font-weight:950;
  letter-spacing:-.025em;
  color:rgba(16,21,38,.96);
}

.qt-blog-featured-ex{
  margin:0;
  color:rgba(16,21,38,.70);
  font-size:14px;
  line-height:1.75;
  font-weight:650;
}

.qt-blog-stack{
  display:grid;
  gap:12px;
}

.qt-blog-mini{
  display:grid;
  grid-template-columns:164px minmax(0,1fr);
  gap:12px;
  align-items:start;
  color:inherit;
  text-decoration:none;
}

.qt-blog-mini-media{
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(148,163,184,.10);
}

.qt-blog-mini-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.qt-blog-mini-body{
  min-width:0;
}

.qt-blog-mini-title{
  margin:6px 0 0;
  font-size:15px;
  line-height:1.32;
  font-weight:900;
  color:rgba(16,21,38,.94);
  letter-spacing:-.01em;
}

.qt-blog-mini-author{
  margin:6px 0 0;
  color:rgba(16,21,38,.62);
  font-size:12px;
  font-weight:700;
}

/* ============================================================
   BANNER
   ============================================================ */

.qt-blog-banner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:22px;
  align-items:center;
  padding:26px 28px;
  border-radius:28px;
  border:1px solid rgba(99,119,255,.16);
  color:var(--qt-topbar-ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.40), transparent 18%),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(300px 180px at 100% 100%, rgba(176,92,255,.08), transparent 60%),
    radial-gradient(260px 160px at 0% 100%, rgba(61,157,255,.08), transparent 56%),
    linear-gradient(
      90deg,
      var(--qt-topbar-bg-1) 0%,
      var(--qt-topbar-bg-2) 56%,
      var(--qt-topbar-bg-3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 18px 42px rgba(99,119,255,.10);
  overflow:hidden;
}

.qt-blog-banner::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(61,157,255,0) 0%,
    rgba(61,157,255,.14) 18%,
    rgba(99,119,255,.30) 52%,
    rgba(176,92,255,.16) 82%,
    rgba(176,92,255,0) 100%
  );
  pointer-events:none;
}

.qt-blog-banner > *{
  position:relative;
  z-index:1;
}

.qt-blog-banner-title{
  margin:0;
  color:var(--qt-topbar-ink);
  font-size:20px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:-.02em;
}

.qt-blog-banner-sub{
  margin:8px 0 0;
  color:var(--qt-topbar-ink-soft);
  font-size:13px;
  line-height:1.7;
  font-weight:600;
}

.qt-blog-banner-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.qt-blog-banner-inp{
  min-width:260px;
  height:46px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(99,119,255,.16);
  background:rgba(255,255,255,.82);
  color:var(--qt-topbar-ink);
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 6px 16px rgba(86,102,180,.04);
}

.qt-blog-banner-inp::placeholder{
  color:rgba(23,32,66,.56);
}

.qt-blog-banner-inp:focus{
  border-color:rgba(99,119,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 0 0 4px rgba(99,119,255,.10);
}

.qt-blog-banner-btn{
  height:46px;
  padding:0 18px;
  border:1px solid rgba(99,119,255,.10);
  border-radius:14px;
  background:linear-gradient(135deg,var(--qt-topbar-cta-bg),var(--qt-topbar-cta-bg-2));
  color:var(--qt-topbar-cta-ink);
  font-weight:900;
  cursor:pointer;
  transition:opacity .16s ease, transform .16s ease, box-shadow .16s ease, filter .16s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 24px rgba(99,119,255,.18);
}

.qt-blog-banner-btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.03);
}

.qt-blog-banner-art{
  position:relative;
  width:280px;
  height:138px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:
    radial-gradient(circle at 50% 50%, rgba(99,119,255,.08), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(176,92,255,.06), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 10px 30px rgba(99,119,255,.08);
}

.qt-blog-banner-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.20), transparent 24%),
    radial-gradient(circle at 80% 80%, rgba(176,92,255,.08), transparent 28%);
  pointer-events:none;
}

.qt-blog-banner-art::after{
  content:none;
  display:none;
}

.qt-blog-banner-art img{
  position:relative;
  z-index:1;
  width:min(100%, 190px);
  height:auto;
  display:block;
  object-fit:contain;
  opacity:.45;
  filter:saturate(.92) contrast(1.02);
  pointer-events:none;
}

/* ============================================================
   RESEARCH + SIDE CARD
   ============================================================ */

.qt-blog-two-col{
  display:grid;
  grid-template-columns:minmax(0, 1.22fr) minmax(300px, .78fr);
  gap:22px;
  align-items:center;
}

.qt-blog-two-col > aside{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.qt-blog-list{
  display:grid;
  gap:14px;
}

.qt-blog-list-item{
  display:grid;
  grid-template-columns:164px minmax(0,1fr);
  gap:12px;
  color:inherit;
  text-decoration:none;
}

.qt-blog-list-media{
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(148,163,184,.10);
}

.qt-blog-list-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.qt-blog-list-title{
  margin:6px 0 0;
  font-size:16px;
  line-height:1.30;
  font-weight:900;
  color:rgba(16,21,38,.95);
}

.qt-blog-side-card{
  position:relative;
  width:100%;
  max-width:520px;
  padding:24px;
  border-radius:28px;
  border:1px solid var(--qt-topbar-border);
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.38), transparent 18%),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(300px 180px at 100% 100%, rgba(176,92,255,.10), transparent 60%),
    radial-gradient(260px 160px at 0% 100%, rgba(61,157,255,.10), transparent 56%),
    linear-gradient(90deg,
      var(--qt-topbar-bg-1) 0%,
      var(--qt-topbar-bg-2) 56%,
      var(--qt-topbar-bg-3) 100%);
  color:var(--qt-topbar-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 18px 42px rgba(99,119,255,.10);
  overflow:hidden;
}

.qt-blog-side-card::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(61,157,255,0) 0%,
    rgba(61,157,255,.14) 18%,
    rgba(99,119,255,.30) 50%,
    rgba(176,92,255,.16) 82%,
    rgba(176,92,255,0) 100%
  );
}

.qt-blog-side-card > *{
  position:relative;
  z-index:1;
}

.qt-blog-side-pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(99,119,255,.16);
  color:var(--qt-topbar-ink);
  font-size:12px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 4px 12px rgba(86,102,180,.05);
}

.qt-blog-side-title{
  margin:16px 0 0;
  color:var(--qt-topbar-ink);
  font-size:18px;
  line-height:1.32;
  font-weight:950;
  letter-spacing:-.02em;
}

.qt-blog-side-card p,
.qt-blog-side-card .qt-blog-side-sub{
  color:var(--qt-topbar-ink-soft);
}

.qt-blog-side-icons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
  justify-content:center;
}

.qt-blog-side-icons .ic{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(99,119,255,.12);
  color:var(--qt-topbar-ink);
  text-decoration:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 6px 14px rgba(86,102,180,.06);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.qt-blog-side-icons .ic:hover{
  transform:translateY(-1px);
  border-color:rgba(99,119,255,.22);
  background:rgba(255,255,255,.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 10px 18px rgba(86,102,180,.10);
}

.qt-blog-side-icons svg{
  width:19px;
  height:19px;
  display:block;
}


.qt-blog-side-btn{
  margin:16px auto 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--qt-topbar-cta-bg),var(--qt-topbar-cta-bg-2));
  color:var(--qt-topbar-cta-ink);
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(99,119,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 24px rgba(99,119,255,.18);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.qt-blog-side-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 14px 28px rgba(99,119,255,.22);
  filter:saturate(1.02);
}

.qt-blog-side-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:16px;
}

.qt-blog-side-icons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:0;
}

.qt-blog-side-btn{
  margin:16px auto 0;
}

/* ============================================================
   CATEGORY TABS
   ============================================================ */

.qt-blog-catbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.qt-blog-catpill{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.78);
  color:rgba(16,21,38,.74);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.qt-blog-catpill:hover,
.qt-blog-catpill.is-active{
  background:linear-gradient(135deg,var(--qt-topbar-cta-bg),var(--qt-topbar-cta-bg-2));
  border-color:rgba(99,119,255,.20);
  color:#fff;
  box-shadow:0 10px 22px rgba(99,119,255,.14);
}

.qt-blog-catpanel,
.qt-blog-cat-panel{
  display:none;
}

.qt-blog-cat-panel.is-active{
  display:block;
}

.qt-blog-cat-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.qt-blog-cat-footer{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
}

/* ============================================================
   EDITOR'S PICK SLIDER
   ============================================================ */

.qt-blog-sec-head--slider{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.qt-blog-slider-arrows{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.qt-blog-slider-btn{
  width:42px;
  height:42px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:999px;
  background:#fff;
  color:rgba(16,21,38,.92);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.qt-blog-slider-btn:hover{
  border-color:rgba(106,126,255,.28);
  background:rgba(106,126,255,.06);
  transform:translateY(-1px);
  box-shadow:var(--qt-shadow-xs);
}

.qt-blog-picks-wrap{
  overflow:hidden;
  width:100%;
}

.qt-blog-picks-slider{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 42px) / 4);
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:2px;
}

.qt-blog-picks-slider::-webkit-scrollbar{
  display:none;
}

.qt-blog-pick-slide{
  min-width:0;
  color:inherit;
  text-decoration:none;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:10px;
  scroll-snap-align:start;
}

.qt-blog-pick-slide-media{
  aspect-ratio:16/10;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(148,163,184,.10);
  box-shadow:var(--qt-shadow-xs);
}

.qt-blog-pick-slide-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.qt-blog-pick-slide-body{
  min-width:0;
  display:grid;
  gap:8px;
  align-content:start;
}

.qt-blog-pick-slide-title{
  margin:0;
  font-size:15px;
  line-height:1.35;
  font-weight:900;
  color:rgba(16,21,38,.94);
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ============================================================
   FINAL CTA
   ============================================================ */

.qt-blog-final{
  position:relative;
  padding:28px 22px;
  text-align:center;
  border-radius:26px;
  border:1px solid var(--qt-topbar-border);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.34), transparent 18%),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.14), transparent 24%),
    radial-gradient(300px 180px at 100% 100%, rgba(176,92,255,.08), transparent 60%),
    radial-gradient(260px 160px at 0% 100%, rgba(61,157,255,.08), transparent 56%),
    linear-gradient(
      90deg,
      var(--qt-topbar-bg-1) 0%,
      var(--qt-topbar-bg-2) 56%,
      var(--qt-topbar-bg-3) 100%);
  color:var(--qt-topbar-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 18px 42px rgba(99,119,255,.10);
  overflow:hidden;
}

.qt-blog-final::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(61,157,255,0) 0%,
    rgba(61,157,255,.14) 18%,
    rgba(99,119,255,.30) 52%,
    rgba(176,92,255,.16) 82%,
    rgba(176,92,255,0) 100%
  );
  pointer-events:none;
}

.qt-blog-final > *{
  position:relative;
  z-index:1;
}

.qt-blog-final-title{
  margin:0;
  color:var(--qt-topbar-ink);
  font-size:24px;
  line-height:1.14;
  font-weight:950;
  letter-spacing:-.02em;
}

.qt-blog-final-sub{
  margin:10px auto 0;
  max-width:56ch;
  color:var(--qt-topbar-ink-soft);
  font-size:14px;
  line-height:1.7;
  font-weight:650;
}

.qt-blog-final-btn{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--qt-topbar-cta-bg),var(--qt-topbar-cta-bg-2));
  color:#fff;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(99,119,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 24px rgba(99,119,255,.18);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.qt-blog-final-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 14px 28px rgba(99,119,255,.22);
  filter:saturate(1.03);
}

/* ============================================================
   CARD GRID / ARCHIVE
   ============================================================ */

.qt-blog-simple-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(12, minmax(0,1fr));
}

.qt-blog-card{
  grid-column:span 4;
  border:1px solid rgba(148,163,184,.14);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.90);
  text-decoration:none;
  color:inherit;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow:var(--qt-shadow-xs);
}

.qt-blog-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--qt-ac) 24%, var(--qt-border));
  box-shadow:var(--qt-shadow-sm);
}

.qt-blog-card-media{
  aspect-ratio:16/10;
  background:rgba(148,163,184,.10);
}

.qt-blog-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.qt-blog-card-body{
  padding:15px;
}

.qt-blog-card-title{
  margin:8px 0 0;
  font-size:18px;
  line-height:1.26;
  font-weight:950;
  color:rgba(16,21,38,.95);
  letter-spacing:-.015em;
}

.qt-blog-card-ex{
  margin:8px 0 0;
  color:rgba(16,21,38,.70);
  font-size:13.5px;
  line-height:1.68;
  font-weight:650;
}

/* archive layout */
.qt-blog-archive-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:22px;
  align-items:start;
}

.qt-blog-archive-main{
  min-width:0;
}

.qt-blog-archive-side{
  display:grid;
  gap:14px;
  position:sticky;
  top:74px;
}

.qt-blog-archive-box{
  border:1px solid rgba(148,163,184,.14);
  border-radius:20px;
  background:rgba(255,255,255,.90);
  padding:15px;
  box-shadow:var(--qt-shadow-xs);
}

.qt-blog-archive-box-title{
  margin:0 0 10px;
  font-size:13px;
  font-weight:950;
  color:rgba(16,21,38,.92);
}

.qt-blog-archive-search{
  position:relative;
  display:block;
}

.qt-blog-archive-search-inp{
  width:100%;
  height:50px;
  padding:0 52px 0 16px;
  border-radius:16px;
  border:1.5px solid rgba(16,21,38,.18);
  background:#fff;
  color:rgba(16,21,38,.92);
  font-size:15px;
  font-weight:700;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}

.qt-blog-archive-search-inp::placeholder{
  color:rgba(16,21,38,.56);
  font-weight:600;
}

.qt-blog-archive-search-inp:focus{
  border-color:rgba(106,126,255,.58);
  box-shadow:0 0 0 4px rgba(106,126,255,.10);
}

.qt-blog-archive-search-btn{
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:rgba(16,21,38,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.qt-blog-archive-search-btn:hover{
  background:rgba(106,126,255,.08);
}

.qt-blog-archive-search-btn svg{
  width:22px;
  height:22px;
  display:block;
}

.qt-blog-archive-box--subscribe{
  border-color:rgba(99,119,255,.16);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.34), transparent 18%),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.14), transparent 22%),
    linear-gradient(135deg,
      rgba(238,245,255,.86) 0%,
      rgba(237,240,255,.78) 54%,
      rgba(246,240,255,.82) 100%);
}

.qt-blog-archive-sub{
  margin:0 0 12px;
  color:rgba(23,32,66,.78);
  font-size:13px;
  line-height:1.65;
  font-weight:650;
}

.qt-blog-archive-subscribe{
  position:relative;
  display:grid;
  gap:10px;
}

.qt-blog-archive-inp{
  width:100%;
  min-height:46px;
  padding:0 14px;
  border-radius:14px;
  border:1.5px solid rgba(148,163,184,.22);
  background:#fff;
  color:rgba(16,21,38,.92);
  font-size:14px;
  font-weight:700;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}

.qt-blog-archive-inp::placeholder{
  color:rgba(16,21,38,.52);
  font-weight:600;
}

.qt-blog-archive-inp:focus{
  border-color:rgba(106,126,255,.58);
  box-shadow:0 0 0 4px rgba(106,126,255,.12);
}

.qt-blog-archive-btn{
  width:100%;
  min-height:44px;
  padding:0 14px;
  border:1px solid rgba(99,119,255,.10);
  border-radius:14px;
  background:linear-gradient(135deg,var(--qt-topbar-cta-bg),var(--qt-topbar-cta-bg-2));
  color:#fff;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease, filter .16s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 22px rgba(38,93,255,.18);
}

.qt-blog-archive-btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.03);
}

.qt-blog-archive-msg{
  min-height:18px;
  margin-top:2px;
  font-size:12.5px;
  line-height:1.45;
  font-weight:800;
}

.qt-blog-archive-msg.is-ok{
  color:#0f7a43;
}

.qt-blog-archive-msg.is-err{
  color:#c43d3d;
}

.qt-blog-archive-box--cta{
  border-color:rgba(99,119,255,.16);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.30), transparent 18%),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(135deg,
      rgba(238,245,255,.86) 0%,
      rgba(237,240,255,.78) 54%,
      rgba(246,240,255,.82) 100%);
}

.qt-blog-archive-cta-title{
  font-weight:950;
  font-size:14px;
  color:var(--qt-topbar-ink);
}

.qt-blog-archive-cta-sub{
  margin:8px 0 0;
  color:var(--qt-topbar-ink-soft);
  font-size:13px;
  line-height:1.6;
}

.qt-blog-archive-cta-btn{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(99,119,255,.10);
  background:linear-gradient(135deg,var(--qt-topbar-cta-bg),var(--qt-topbar-cta-bg-2));
  color:#fff;
  font-weight:950;
  text-decoration:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 22px rgba(38,93,255,.16);
}

.qt-blog-simple-grid--archive{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(12, minmax(0,1fr));
}

.qt-blog-simple-grid--archive .qt-blog-card{
  grid-column:span 6;
}

.qt-blog-simple-grid--archive .qt-blog-card-media{
  aspect-ratio:16/9;
}

.qt-blog-simple-grid--archive .qt-blog-card-title{
  font-size:16px;
  line-height:1.28;
}

.qt-blog-simple-grid--archive .qt-blog-card-ex{
  font-size:13px;
  line-height:1.62;
}

/* pager */
.qt-blog-pager{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.qt-blog-page{
  min-width:40px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.78);
  color:rgba(16,21,38,.88);
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}

.qt-blog-page:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--qt-ac) 26%, var(--qt-border));
  background:color-mix(in srgb, var(--qt-ac) 10%, white);
}

.qt-blog-page.is-active{
  border-color:color-mix(in srgb, var(--qt-ac) 44%, var(--qt-border));
  background:color-mix(in srgb, var(--qt-ac) 14%, white);
}

/* ============================================================
   POST
   ============================================================ */

.qt-post-box{
  border:1px solid rgba(148,163,184,.14);
  border-radius:18px;
  background:rgba(255,255,255,.88);
  padding:14px;
}

.qt-post-box--content{
  padding:18px;
}

.qt-post-box-title{
  font-size:13px;
  font-weight:950;
  color:rgba(16,21,38,.92);
  margin-bottom:10px;
}

.qt-post-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.14fr) minmax(440px, 1fr);
  gap:22px;
  align-items:stretch;
  padding:22px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:26px;
  background:rgba(255,255,255,.88);
}

.qt-post-title{
  margin:0;
  font-size:clamp(42px, 4.25vw, 62px);
  line-height:.98;
  letter-spacing:-.045em;
  max-width:12.5ch;
}

.qt-post-desc{
  margin:18px 0 0;
  color:rgba(16,21,38,.72);
  font-size:17px;
  line-height:1.72;
  font-weight:650;
  max-width:68ch;
}

.qt-post-meta{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  color:rgba(16,21,38,.62);
  font-size:13.5px;
  line-height:1.45;
}

.qt-post-meta .dot{
  opacity:.55;
}

.qt-post-meta strong{
  color:rgba(16,21,38,.86);
}

.qt-post-chips{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.qt-post-chip{
  border:1px solid rgba(106,126,255,.20);
  background:rgba(106,126,255,.10);
  color:rgba(16,21,38,.88);
  padding:9px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}

.qt-post-chip:hover{
  border-color:rgba(106,126,255,.34);
  background:rgba(106,126,255,.14);
}

.qt-post-hero-left{
  position:relative;
  isolation:isolate;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:360px;
  padding:8px 4px 8px 2px;
}

.qt-post-hero-left::before{
  content:"";
  position:absolute;
  inset:-10px 8px -10px -4px;
  z-index:-1;
  border-radius:24px;
  background:
    radial-gradient(420px 180px at 0% 8%, rgba(106,126,255,.10), transparent 64%),
    radial-gradient(360px 160px at 34% 100%, rgba(122,216,255,.08), transparent 62%);
  opacity:.88;
  pointer-events:none;
}

.qt-post-hero-right{
  min-width:0;
  display:flex;
  align-items:stretch;
}

.qt-post-cover{
  width:100%;
  height:100%;
  min-height:360px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(148,163,184,.10);
  aspect-ratio:16 / 10;
  max-height:none;
}

.qt-post-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.qt-post-cover.is-empty{
  width:100%;
  aspect-ratio:16 / 10;
  max-height:420px;
}

.qt-post-body{
  display:grid;
  grid-template-columns:250px minmax(0, 1fr) 300px;
  gap:18px;
  align-items:start;
  margin-top:14px;
}

.qt-post-toc,
.qt-post-side{
  position:sticky;
  top:var(--qt-sticky-top);
  align-self:start;
}

.qt-post-toc{
  max-height:calc(100vh - var(--qt-sticky-top) - 20px);
  overflow:auto;
  scrollbar-width:thin;
  padding-right:2px;
}

.qt-post-side{
  display:grid;
  gap:12px;
  max-height:calc(100vh - var(--qt-sticky-top) - 20px);
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
  padding-right:4px;
}

.qt-post-toc::-webkit-scrollbar,
.qt-post-side::-webkit-scrollbar{
  width:8px;
}

.qt-post-toc::-webkit-scrollbar-thumb,
.qt-post-side::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.28);
  border-radius:999px;
}

.qt-post-toc::-webkit-scrollbar-track,
.qt-post-side::-webkit-scrollbar-track{
  background:transparent;
}

.qt-toc{
  display:grid;
  gap:6px;
}

.qt-toc-a{
  display:block;
  text-decoration:none;
  color:rgba(16,21,38,.68);
  font-size:13px;
  line-height:1.38;
  font-weight:700;
  padding:7px 0 7px 12px;
  border-left:2px solid rgba(148,163,184,.18);
  border-radius:0 10px 10px 0;
  transition:color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.qt-toc-a:hover{
  color:rgba(16,21,38,.94);
  border-left-color:rgba(106,126,255,.52);
  background:rgba(106,126,255,.06);
  transform:translateX(1px);
}

.qt-toc-a.is-h2{
  color:rgba(16,21,38,.82);
  font-weight:850;
  font-size:13.5px;
  letter-spacing:-.005em;
}

.qt-toc-a.is-h3{
  margin-left:10px;
  padding-left:14px;
  color:rgba(16,21,38,.56);
  font-size:12.5px;
  font-weight:650;
  border-left-color:rgba(148,163,184,.12);
}

.qt-toc-a.is-h3:hover{
  color:rgba(16,21,38,.78);
  border-left-color:rgba(106,126,255,.34);
}

.qt-toc-empty{
  color:rgba(16,21,38,.58);
  font-size:13px;
  font-weight:650;
}

.qt-share-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}

.qt-share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:42px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.74);
  color:rgba(16,21,38,.88);
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.qt-share-btn:hover{
  border-color:rgba(106,126,255,.32);
  background:rgba(106,126,255,.08);
  transform:translateY(-1px);
}

.qt-share-btn.is-copy{
  width:100%;
}

.qt-share-ic{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:block;
  opacity:.92;
}

.qt-share-btn span{
  display:inline-block;
  line-height:1;
}

.qt-share-btn--x .qt-share-ic{
  width:15px;
  height:15px;
  flex-basis:15px;
}

.qt-post-search-form{
  position:relative;
  display:block;
}

.qt-post-search-inp{
  width:100%;
  height:50px;
  padding:0 52px 0 16px;
  border-radius:16px;
  border:1.5px solid rgba(16,21,38,.18);
  background:#fff;
  color:rgba(16,21,38,.92);
  font-size:15px;
  font-weight:700;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.qt-post-search-inp::placeholder{
  color:rgba(16,21,38,.56);
  font-weight:600;
}

.qt-post-search-inp:focus{
  border-color:rgba(106,126,255,.58);
  box-shadow:0 0 0 4px rgba(106,126,255,.10);
}

.qt-post-search-btn{
  position:absolute;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:rgba(16,21,38,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.qt-post-search-btn:hover{
  background:rgba(106,126,255,.08);
}

.qt-post-search-btn svg{
  width:22px;
  height:22px;
  display:block;
}

.qt-post-subscribe{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(106,126,255,.16), transparent 62%),
    radial-gradient(360px 160px at 100% 0%, rgba(122,216,255,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  border:1px solid rgba(106,126,255,.18);
}

.qt-post-subscribe-sub{
  margin:0 0 12px;
  color:rgba(16,21,38,.68);
  font-size:13px;
  line-height:1.65;
  font-weight:650;
}

.qt-post-subscribe-form{
  position:relative;
  display:grid;
  gap:10px;
}

.qt-post-subscribe-inp{
  width:100%;
  min-height:46px;
  padding:0 14px;
  border-radius:14px;
  border:1.5px solid rgba(148,163,184,.22);
  background:#fff;
  color:rgba(16,21,38,.92);
  font-size:14px;
  font-weight:700;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.qt-post-subscribe-inp::placeholder{
  color:rgba(16,21,38,.52);
  font-weight:600;
}

.qt-post-subscribe-inp:focus{
  border-color:rgba(106,126,255,.58);
  box-shadow:0 0 0 4px rgba(106,126,255,.12);
}

.qt-post-subscribe-btn{
  width:100%;
  min-height:44px;
  padding:0 14px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--qt-topbar-cta-bg),var(--qt-topbar-cta-bg-2));
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  box-shadow:0 10px 22px rgba(38,93,255,.18);
}

.qt-post-subscribe-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(38,93,255,.22);
}

.qt-post-subscribe-btn:disabled{
  cursor:not-allowed;
}

.qt-post-subscribe-msg{
  min-height:18px;
  margin-top:2px;
  font-size:12.5px;
  line-height:1.45;
  font-weight:800;
}

.qt-post-subscribe-msg.is-ok{
  color:#0f7a43;
}

.qt-post-subscribe-msg.is-err{
  color:#c43d3d;
}

.qt-ai-inline{
  margin:0 0 14px;
  padding:0 0 12px;
  border-bottom:1px solid rgba(148,163,184,.16);
}

.qt-ai-inline-title{
  font-size:13px;
  font-weight:950;
  color:rgba(16,21,38,.90);
  margin:0 0 10px;
}

.qt-ai-inline-pills{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  overflow:hidden;
}

.qt-ai-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.70);
  color:rgba(16,21,38,.88);
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
  flex:0 0 auto;
}

.qt-ai-pill:hover{
  border-color:rgba(106,126,255,.35);
  background:rgba(106,126,255,.08);
}

.qt-ai-pill-ic{
  width:13px;
  height:13px;
  display:inline-block;
  flex:0 0 auto;
}

.qt-content{
  color:rgba(16,21,38,.86);
  font-size:16px;
  line-height:1.9;
}

.qt-content :where(p){
  margin:0 0 14px;
}

.qt-content :where(h2){
  margin:26px 0 10px;
  font-size:24px;
  line-height:1.18;
  letter-spacing:-.01em;
}

.qt-content :where(h3){
  margin:18px 0 8px;
  font-size:18px;
  line-height:1.22;
}

.qt-content :where(ul,ol){
  margin:0 0 14px 18px;
  padding:0;
}

.qt-content :where(li){
  margin:8px 0;
}

.qt-content :where(a){
  color:rgba(16,21,38,.92);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(106,126,255,.55);
}

.qt-content :where(blockquote){
  margin:16px 0;
  padding:12px 14px;
  border-left:3px solid rgba(106,126,255,.55);
  background:rgba(106,126,255,.06);
  border-radius:14px;
}

.qt-content :where(img){
  max-width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(148,163,184,.08);
  margin:12px 0;
}

.qt-content :where(pre){
  overflow:auto;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,18,36,.04);
  margin:14px 0;
}

.qt-content :where(code){
  font-family:ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.95em;
}

.qt-post-cta{
  background:
    radial-gradient(520px 220px at 40% -20%, rgba(106,126,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}

.qt-post-cta-title{
  font-weight:950;
  font-size:14px;
  color:rgba(16,21,38,.92);
}

.qt-post-cta-sub{
  margin:8px 0 0;
  color:rgba(16,21,38,.70);
  font-size:13px;
  line-height:1.6;
}

.qt-post-cta-btn{
  margin-top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(106,126,255,.34);
  background:rgba(106,126,255,.14);
  color:rgba(16,21,38,.92);
  font-weight:950;
  text-decoration:none;
}

.qt-post-cta-btn:hover{
  background:rgba(106,126,255,.18);
}

.qt-post-tags{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.qt-toc-fab{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 78px);
  right:14px;
  z-index:99990;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--qt-border);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 28px rgba(15,18,36,.08);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.qt-toc-fab svg{
  width:20px;
  height:20px;
}

.qt-toc-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}

.qt-toc-modal.is-open{
  display:block;
}

.qt-toc-ov{
  position:absolute;
  inset:0;
  background:rgba(10,16,34,.28);
  backdrop-filter:blur(6px);
}

.qt-toc-panel{
  position:absolute;
  left:50%;
  top:calc(env(safe-area-inset-top, 0px) + 72px);
  transform:translateX(-50%);
  width:min(520px, calc(100% - 24px));
  max-height:min(70vh, 640px);
  overflow:auto;
  border-radius:18px;
  border:1px solid var(--qt-border);
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 48px rgba(15,18,36,.10);
  padding:14px;
}

.qt-toc-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(148,163,184,.16);
  margin-bottom:10px;
}

.qt-toc-panel-title{
  font-size:17px;
  font-weight:950;
  color:rgba(16,21,38,.92);
  letter-spacing:-.015em;
}

.qt-toc-close{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.70);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
}

.qt-toc-close:hover{
  border-color:rgba(106,126,255,.35);
  background:rgba(106,126,255,.08);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1280px){
  .qt-blog-picks-slider{
    grid-auto-columns:calc((100% - 28px) / 3);
  }
}

@media (max-width: 1180px){
  .qt-blog-top-grid,
  .qt-blog-two-col{
    grid-template-columns:1fr;
  }

  .qt-blog-banner{
    grid-template-columns:1fr;
  }

  .qt-blog-banner-art{
    width:100%;
    max-width:100%;
    height:124px;
  }

  .qt-blog-two-col > aside{
    display:block;
  }

  .qt-blog-side-card{
    max-width:none;
  }

  .qt-ai-inline-title{
    display:none;
  }
}

@media (max-width: 1200px){
  .qt-post-body{
    grid-template-columns:230px minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1100px){
  .qt-post-body{
    grid-template-columns:240px minmax(0, 1fr);
  }

  .qt-post-side{
    grid-column:1 / -1;
    position:static;
    max-height:none;
    overflow:visible;
    padding-right:0;
  }

  .qt-blog-archive-layout{
    grid-template-columns:1fr;
  }

  .qt-blog-archive-side{
    position:static;
  }
}

@media (max-width: 980px){
  .qt-blog-card{
    grid-column:span 6;
  }

  .qt-blog-cat-grid{
    grid-template-columns:1fr;
  }

  .qt-blog-picks-slider{
    grid-auto-columns:calc((100% - 14px) / 2);
  }

  .qt-ai-inline-title{
    display:block;
  }

  .qt-ai-inline-pills{
    flex-wrap:wrap;
    overflow:visible;
  }
}

@media (max-width: 860px){
  :root{
    --qt-sticky-top: 68px;
  }

  .qt-blog-frame,
  .qt-post-frame{
    padding:12px;
    border-radius:22px;
  }

  .qt-post-hero{
    grid-template-columns:1fr;
    align-items:start;
    gap:16px;
    padding:18px;
    border-radius:22px;
  }

  .qt-post-hero-left{
    display:block;
    min-height:0;
    padding:0;
  }

  .qt-post-hero-left::before{
    content:none;
  }

  .qt-post-title{
    max-width:none;
    font-size:clamp(30px, 8vw, 42px);
    line-height:1.04;
    letter-spacing:-.03em;
  }

  .qt-post-desc{
    margin-top:12px;
    font-size:15px;
    line-height:1.68;
  }

  .qt-post-meta{
    margin-top:12px;
    gap:10px;
    font-size:12.5px;
  }

  .qt-post-chips{
    margin-top:12px;
    gap:8px;
  }

  .qt-post-chip{
    padding:7px 10px;
    font-size:12px;
  }

  .qt-post-cover{
    height:auto;
    min-height:0;
    border-radius:18px;
    max-height:420px;
  }

  .qt-post-body{
    grid-template-columns:1fr;
  }

  .qt-post-toc{
    display:none;
  }

  .qt-post-side{
    position:static;
    max-height:none;
    overflow:visible;
    padding-right:0;
  }

  .qt-toc-fab{
    display:flex;
  }
}

@media (max-width: 760px){
  .qt-blog-mini,
  .qt-blog-list-item{
    grid-template-columns:1fr;
  }

  .qt-blog-featured-media,
  .qt-blog-mini-media,
  .qt-blog-list-media,
  .qt-blog-pick-slide-media,
  .qt-blog-card-media{
    aspect-ratio:16/9;
  }

  .qt-blog-banner-form{
    flex-direction:column;
  }

  .qt-blog-banner-inp,
  .qt-blog-banner-btn{
    width:100%;
    min-width:0;
  }

  .qt-blog-simple-grid--archive .qt-blog-card{
    grid-column:1 / -1;
  }

  .qt-blog-picks-slider{
    grid-auto-columns:88%;
  }
  .qt-blog-banner-art{
    display:none;
  }
}

@media (max-width: 640px){
  .qt-blog-shell,
  .qt-post-shell{
    width:min(var(--qt-blog-max), calc(100% - 20px));
  }

  .qt-blog-frame,
  .qt-post-frame{
    padding:12px;
    border-radius:22px;
  }

  .qt-blog-hero{
    padding:16px;
    border-radius:20px;
  }

  .qt-blog-title{
    font-size:clamp(30px, 10vw, 42px);
  }

  .qt-blog-sub{
    font-size:14px;
  }

  .qt-blog-inp{
    min-height:54px;
    font-size:14px;
  }

  .qt-blog-card{
    grid-column:1 / -1;
  }

  .qt-blog-sec{
    padding-top:14px;
  }

  .qt-blog-sec + .qt-blog-sec{
    border-top:0;
    padding-top:22px;
    margin-top:8px;
  }

  .qt-blog-sec + .qt-blog-sec::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(
      90deg,
      rgba(61,157,255,0) 0%,
      rgba(61,157,255,.10) 18%,
      rgba(99,119,255,.26) 52%,
      rgba(176,92,255,.14) 82%,
      rgba(176,92,255,0) 100%
    );
  }

  .qt-blog-sec-head{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(148,163,184,.10);
  }

  .qt-blog-sec-title{
    font-size:18px;
  }

  .qt-blog-banner,
  .qt-blog-side-card,
  .qt-blog-final,
  .qt-blog-archive-box{
    border-radius:22px;
  }

  .qt-blog-side-title{
    font-size:17px;
  }

  .qt-blog-final-title{
    font-size:21px;
  }

  .qt-blog-picks-slider{
    grid-auto-columns:84%;
  }

  .qt-share-btn{
    height:40px;
    font-size:13px;
    padding:0 10px;
  }

  .qt-share-ic{
    width:15px;
    height:15px;
    flex-basis:15px;
  }




}

@media (max-width: 460px){
  .qt-blog-banner{
    padding:20px 18px;
  }

  .qt-blog-banner-art{
    height:110px;
    border-radius:18px;
  }

  .qt-blog-side-card,
  .qt-blog-final{
    padding:20px 18px;
  }

  .qt-blog-side-icons .ic{
    width:38px;
    height:38px;
  }

  .qt-blog-side-btn,
  .qt-blog-final-btn{
    width:100%;
  }
}