/* ===========================================================
   PiHunter — inner pages (shop, product, about, contact)
   Builds on styles.css design system. RTL.
   =========================================================== */

/* ---------- page hero / breadcrumb ---------- */
.page-hero{
  position:relative; overflow:hidden;
  padding-block: clamp(40px,6vw,84px) clamp(28px,4vw,52px);
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 120% at 88% -10%, var(--accent-soft), transparent 60%);
}
/* hacker FX layers */
.fx-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask:radial-gradient(120% 100% at 82% 0%, #000, transparent 72%);
          mask:radial-gradient(120% 100% at 82% 0%, #000, transparent 72%);
}
.fx-scan{
  position:absolute; inset-inline:0; top:0; height:160px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, var(--accent-soft), transparent);
  opacity:.5; animation:heroScan 6.5s linear infinite;
}
@keyframes heroScan{ 0%{ transform:translateY(-160px); opacity:0; } 12%{ opacity:.6; } 88%{ opacity:.35; } 100%{ transform:translateY(420px); opacity:0; } }
.fx-chip{
  position:absolute; z-index:0; pointer-events:none; direction:ltr;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--accent); opacity:.16; white-space:nowrap;
  animation:chipFloat 9s ease-in-out infinite;
}
.fx-chip::before{ content:"› "; opacity:.6; }
@keyframes chipFloat{ 0%,100%{ transform:translateY(0); opacity:.16; } 50%{ transform:translateY(-7px); opacity:.26; } }
body.no-grid .fx-scan, body.no-grid .fx-chip{ animation:none; }
body.no-grid .fx-chip{ opacity:.14; }
@media (prefers-reduced-motion: reduce){ .fx-scan, .fx-chip{ animation:none; } }
@media (max-width:720px){ .fx-chip{ display:none; } }

.breadcrumb{
  display:flex; align-items:center; gap:.55em; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; direction:rtl;
  color:var(--faint);
}
.breadcrumb a{ color:var(--muted); transition:.18s; }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb .sep{ color:var(--line-2); }
.page-hero h1{ font-size:clamp(2rem,4.6vw,3.2rem); margin-top:16px; text-wrap:balance; }
.page-hero .lead{ color:var(--muted); margin-top:14px; font-size:1.08rem; max-width:62ch; text-wrap:pretty; }
.page-hero .hero-actions{ margin-top:28px; }

/* ---------- shop toolbar ---------- */
.shop-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-bottom:30px; flex-wrap:wrap;
}
.shop-toolbar .count{ color:var(--faint); font-size:.92rem; }
.shop-toolbar .count b{ color:var(--ink); }
.shop-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.shop-filters button{
  font-family:var(--font-fa); font-size:.88rem; color:var(--muted); cursor:pointer; white-space:nowrap;
  background:var(--bg-1); border:1px solid var(--line-2); border-radius:999px; padding:.5em 1.1em;
  transition:.18s ease;
}
.shop-filters button:hover{ border-color:var(--accent-line); color:var(--ink); }
.shop-filters button.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

/* ---------- product grid (woocommerce archive) ---------- */
.shop-grid{ grid-template-columns:repeat(3,1fr); gap:22px; }
.product{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.product .thumb{
  position:relative; aspect-ratio:16/10; display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--accent-soft), transparent 62%),
    repeating-linear-gradient(135deg, var(--strip-a) 0 14px, var(--strip-b) 14px 28px);
  border-bottom:1px solid var(--line);
}
.product .thumb .pico{
  width:62px; height:62px; border-radius:15px; display:grid; place-items:center;
  background:var(--bg-1); border:1px solid var(--accent-line); color:var(--accent);
  font-family:var(--font-mono); font-size:1.15rem; font-weight:600; letter-spacing:.02em;
  box-shadow:0 0 30px -8px var(--accent-line);
}
.product .badge{
  position:absolute; top:14px; inset-inline-end:14px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; direction:ltr;
  background:var(--accent); color:var(--accent-ink); border-radius:6px; padding:.34em .6em; font-weight:700;
}
.product .badge.muted{ background:var(--bg-3); color:var(--muted); }
.product .body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.product .cat{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:var(--faint); direction:ltr; }
.product h3{ font-size:1.2rem; line-height:1.4; }
.product .desc{ color:var(--muted); font-size:.92rem; text-wrap:pretty; }
.product .more{ margin-top:auto; padding-top:18px; color:var(--accent); font-weight:600; font-size:.93rem; display:inline-flex; gap:.5em; align-items:center; direction:rtl; }
.product .more .ar{ font-family:var(--font-mono); transition:.2s; }
.product.card:hover .more .ar{ transform:translateX(-4px); }
.product .stars{ color:var(--accent); font-size:.82rem; letter-spacing:.1em; }
.product .stars span{ color:var(--faint); font-family:var(--font-mono); margin-inline-start:.4em; }
.product .foot{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.price{ display:flex; flex-direction:column; line-height:1.3; }
.price .from{ font-size:.72rem; color:var(--faint); }
.price b{ font-size:1.28rem; color:var(--ink); font-weight:800; }
.price b .unit{ font-size:.78rem; font-weight:600; color:var(--muted); margin-inline-start:.2em; }
.price.quote b{ font-size:1.05rem; color:var(--accent); }
.product .add{
  flex:none; width:46px; height:46px; border-radius:11px; display:grid; place-items:center; cursor:pointer;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
  font-family:var(--font-mono); font-size:1.3rem; transition:.18s ease;
}
.product .add:hover{ background:var(--accent); color:var(--accent-ink); transform:translateY(-1px); }
.product.card:hover{ transform:translateY(-4px); }
.product .stretch{ position:absolute; inset:0; z-index:1; }
.product .add, .product .foot .price{ position:relative; z-index:2; }

/* ---------- single product ---------- */
.product-detail{ display:grid; grid-template-columns: 1fr 1.05fr; gap:clamp(28px,4vw,56px); align-items:start; }
.pd-gallery{
  position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  aspect-ratio:1/1; display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--accent-soft), transparent 60%),
    repeating-linear-gradient(135deg, var(--strip-a) 0 16px, var(--strip-b) 16px 32px);
}
.pd-gallery .pd-emblem{ width:34%; height:auto; filter:drop-shadow(0 0 30px var(--accent-line)); opacity:.92; }
.pd-gallery .pd-ring{ position:absolute; inset:0; border-radius:inherit;
  background:repeating-radial-gradient(circle at 50% 35%, transparent 0 48px, color-mix(in oklab, var(--accent) 12%, transparent) 48px 49px); opacity:.5; }
.pd-gallery .pd-scan{
  position:absolute; inset-inline:0; top:0; height:46%; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, transparent, var(--accent-soft) 70%, color-mix(in oklab,var(--accent) 45%, transparent));
  border-bottom:1px solid var(--accent-line); opacity:.0;
  animation:pdScan 3.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes pdScan{ 0%{ transform:translateY(-46%); opacity:0; } 12%{ opacity:.9; } 50%{ transform:translateY(118%); opacity:.9; } 60%{ opacity:0; } 100%{ transform:translateY(118%); opacity:0; } }
body.no-grid .pd-gallery .pd-scan{ display:none; }
@media (prefers-reduced-motion: reduce){ .pd-gallery .pd-scan{ display:none; } }
.pd-thumbs{ display:flex; gap:12px; margin-top:14px; }
.pd-thumbs .t{
  width:74px; height:74px; border-radius:11px; border:1px solid var(--line-2); cursor:pointer;
  display:grid; place-items:center; color:var(--faint); font-family:var(--font-mono); font-size:.62rem;
  background:repeating-linear-gradient(135deg, var(--strip-a) 0 10px, var(--strip-b) 10px 20px);
  direction:ltr; transition:.18s;
}
.pd-thumbs .t.active, .pd-thumbs .t:hover{ border-color:var(--accent); color:var(--accent); }

.pd-info .cat{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--accent); direction:ltr; }
.pd-info h1{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin-top:12px; text-wrap:balance; }
.pd-rating{ display:flex; align-items:center; gap:10px; margin-top:14px; color:var(--accent); font-size:.9rem; letter-spacing:.08em; }
.pd-rating span{ color:var(--muted); font-family:var(--font-fa); letter-spacing:0; }
.pd-price{ display:flex; align-items:baseline; gap:12px; margin:22px 0; padding-bottom:22px; border-bottom:1px solid var(--line); }
.pd-price .now{ font-size:2rem; font-weight:800; color:var(--ink); }
.pd-price .now .unit{ font-size:1rem; font-weight:600; color:var(--muted); margin-inline-start:.3em; }
.pd-price .from{ font-size:.85rem; color:var(--faint); }
.pd-price .tax{ margin-inline-start:auto; font-size:.8rem; color:var(--faint); }
.pd-desc{ color:var(--muted); font-size:1.02rem; text-wrap:pretty; }
.pd-includes{ list-style:none; margin:24px 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; }
.pd-includes li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:var(--ink); }
.pd-includes .ck{ flex:none; color:var(--accent); font-family:var(--font-mono); font-weight:700; }
.pd-buy{ display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:11px; overflow:hidden; background:var(--bg-1); }
.qty button{ width:46px; height:50px; background:none; border:none; color:var(--ink); font-size:1.3rem; cursor:pointer; font-family:var(--font-mono); transition:.15s; }
.qty button:hover{ background:var(--bg-2); color:var(--accent); }
.qty input{ width:48px; height:50px; text-align:center; background:none; border:none; color:var(--ink); font-family:var(--font-mono); font-size:1rem; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pd-buy .btn{ flex:1; justify-content:center; min-width:200px; }
.pd-added{ display:none; margin-top:18px; padding:13px 16px; border-radius:11px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:.92rem; }
.pd-added.show{ display:flex; align-items:center; gap:10px; }
.pd-meta{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; font-size:.86rem; color:var(--faint); font-family:var(--font-mono); direction:ltr; }
.pd-meta b{ color:var(--muted); font-weight:500; }
.pd-trust{ display:flex; gap:18px; margin-top:22px; flex-wrap:wrap; }
.pd-trust .t{ display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--muted); }
.pd-trust .t i{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-family:var(--font-mono); font-style:normal; font-size:.8rem; }

/* ---------- product tabs ---------- */
.prod-tabs{ margin-top:clamp(48px,7vw,88px); }
.tab-head{ display:flex; gap:6px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tab-head button{
  font-family:var(--font-fa); font-size:1rem; font-weight:600; color:var(--muted); cursor:pointer;
  background:none; border:none; padding:.9em 1.3em; position:relative; transition:.18s;
}
.tab-head button::after{ content:""; position:absolute; inset-inline:0; bottom:-1px; height:2px; background:var(--accent); transform:scaleX(0); transition:.2s; }
.tab-head button:hover{ color:var(--ink); }
.tab-head button.active{ color:var(--accent); }
.tab-head button.active::after{ transform:scaleX(1); }
.tab-panel{ display:none; padding-top:30px; max-width:780px; }
.tab-panel.active{ display:block; }
.tab-panel p{ color:var(--muted); margin-bottom:16px; text-wrap:pretty; }
.tab-panel h4{ font-size:1.15rem; margin:26px 0 12px; }
.spec-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.spec-table td{ padding:14px 4px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; }
.spec-table td:first-child{ color:var(--ink); font-weight:600; width:34%; }

/* ---------- related ---------- */
.related-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:30px; }

/* ---------- about ---------- */
.about-story{ display:grid; grid-template-columns: 1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.about-story .copy h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); text-wrap:balance; }
.about-story .copy p{ color:var(--muted); margin-top:1.1rem; font-size:1.05rem; text-wrap:pretty; }
.about-visual{
  position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3; display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--accent-soft), transparent 60%),
    repeating-linear-gradient(135deg, var(--strip-a) 0 16px, var(--strip-b) 16px 32px);
}
.about-visual img{ width:42%; filter:drop-shadow(0 0 30px var(--accent-line)); }
.values{ grid-template-columns:repeat(3,1fr); gap:22px; }
.value{ display:flex; flex-direction:column; gap:12px; }
.value .vico{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-family:var(--font-mono); font-size:1.1rem; }
.value h4{ font-size:1.15rem; }
.value p{ color:var(--muted); font-size:.94rem; text-wrap:pretty; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap:clamp(28px,4vw,52px); align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:14px; }
.info-item{
  display:flex; gap:15px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px;
  transition:.2s ease;
}
.info-item:hover{ border-color:var(--line-2); }
.info-item .ii{ flex:none; width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-family:var(--font-mono); font-size:.92rem; }
.info-item h4{ font-size:1rem; }
.info-item p, .info-item a{ color:var(--muted); font-size:.92rem; margin-top:3px; direction:ltr; display:block; text-align:start; }
.info-item a:hover{ color:var(--accent); }
.contact-card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:clamp(26px,3vw,40px); }
.contact-card h3{ font-size:1.4rem; margin-bottom:6px; }
.contact-card .sub{ color:var(--muted); font-size:.95rem; margin-bottom:26px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-ok{ display:none; margin-top:16px; padding:14px 16px; border-radius:11px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:.92rem; text-align:center; }
.contact-ok.show{ display:block; }

/* ---------- mini cart (nav) ---------- */
.cart-link{ position:relative; display:inline-grid; place-items:center; width:46px; height:46px; border-radius:11px; border:1px solid var(--line-2); color:var(--ink); transition:.18s; flex:none; }
.cart-link:hover{ border-color:var(--accent-line); color:var(--accent); }
.cart-link svg{ width:20px; height:20px; }
.cart-count{ position:absolute; top:-7px; inset-inline-start:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-family:var(--font-mono); font-size:.66rem; font-weight:700; display:grid; place-items:center; border:2px solid var(--bg); }
.cart-count.empty{ display:none; }

/* ---------- add-to-cart toast ---------- */
.toast{
  position:fixed; inset-block-end:24px; inset-inline-start:24px; z-index:200;
  display:flex; align-items:center; gap:12px; max-width:340px;
  background:var(--card); border:1px solid var(--accent-line); border-radius:13px; padding:14px 18px;
  box-shadow:0 24px 60px -24px #000; transform:translateY(140%); opacity:0; transition:.36s cubic-bezier(.2,.7,.3,1);
}
.toast.show{ transform:none; opacity:1; }
.toast .tk{ flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-family:var(--font-mono); font-weight:700; }
.toast .tt{ font-size:.92rem; color:var(--ink); } .toast .tt b{ color:var(--accent); }
.toast a{ margin-inline-start:auto; font-size:.82rem; color:var(--accent); font-weight:600; white-space:nowrap; }

/* ---------- blog ---------- */
.blog-featured{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; overflow:hidden; padding:0; margin-bottom:36px; }
.blog-featured .ph{ aspect-ratio:auto; min-height:360px; height:100%; }
.blog-featured .fbody{ padding:clamp(28px,3.5vw,52px); display:flex; flex-direction:column; gap:16px; justify-content:center; }
.blog-featured .fbody h2{ font-size:clamp(1.5rem,2.6vw,2.15rem); line-height:1.4; text-wrap:balance; }
.blog-featured .fbody p{ color:var(--muted); text-wrap:pretty; }
.blog-meta{ display:flex; gap:12px; align-items:center; font-size:.8rem; color:var(--faint); font-family:var(--font-mono); direction:ltr; }
.blog-meta .d{ width:4px; height:4px; border-radius:50%; background:var(--faint); }
@media(max-width:860px){ .blog-featured{ grid-template-columns:1fr; } .blog-featured .ph{ min-height:220px; } }

/* ---------- article prose ---------- */
.article-layout{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:clamp(32px,5vw,64px); align-items:start; }
.prose > p{ color:var(--muted); font-size:1.08rem; line-height:2; margin-bottom:1.3rem; text-wrap:pretty; }
.prose h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin:2.4rem 0 1rem; scroll-margin-top:96px; }
.prose h3{ font-size:1.25rem; margin:1.8rem 0 .8rem; }
.prose ul{ margin:0 0 1.3rem; padding-inline-start:1.2em; color:var(--muted); display:flex; flex-direction:column; gap:.6em; }
.prose li{ line-height:1.9; } .prose li::marker{ color:var(--accent); }
.prose blockquote{ margin:1.8rem 0; padding:18px 24px; border-inline-start:3px solid var(--accent); background:var(--bg-1); border-radius:0 12px 12px 0; color:var(--ink); font-size:1.1rem; }
.prose pre{ background:#0c1310; border:1px solid var(--line-2); border-radius:12px; padding:18px 20px; overflow:auto; direction:ltr; font-family:var(--font-mono); font-size:.84rem; color:var(--accent); margin-bottom:1.4rem; line-height:1.8; }
.prose code{ font-family:var(--font-mono); font-size:.88em; color:var(--accent); background:var(--accent-soft); padding:.1em .4em; border-radius:5px; direction:ltr; }
.prose pre code{ background:none; padding:0; color:inherit; }
.prose .figph{ border-radius:12px; margin:1.8rem 0; aspect-ratio:16/8; }
.article-aside{ position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; }
.toc{ border:1px solid var(--line); border-radius:14px; padding:22px; background:var(--card); }
.toc h5{ font-size:.74rem; color:var(--faint); font-family:var(--font-mono); letter-spacing:.1em; margin:0 0 14px; direction:ltr; display:flex; }
.toc a{ display:block; color:var(--muted); font-size:.92rem; padding:.42em 0 .42em 12px; transition:.15s; border-inline-start:2px solid transparent; }
.toc a:hover{ color:var(--accent); border-color:var(--accent-line); }
.share-row{ display:flex; gap:8px; }
.share-row a{ flex:1; text-align:center; font-family:var(--font-mono); font-size:.72rem; border:1px solid var(--line-2); border-radius:9px; padding:.75em; direction:ltr; color:var(--muted); transition:.15s; }
.share-row a:hover{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.article-hero-meta{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:.92rem; margin-top:20px; }
.author-chip{ display:flex; align-items:center; gap:10px; }
.author-chip .av{ width:42px; height:42px; border-radius:50%; }
.author-chip img.av{ object-fit:cover; border:1px solid var(--line-2); }

/* ---------- author bio box (article footer) ---------- */
.author-box{ display:flex; gap:20px; align-items:flex-start; margin-top:2.6rem; padding:24px; background:var(--card); border:1px solid var(--line); border-radius:14px; position:relative; overflow:hidden; }
.author-box::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:3px; height:100%; background:linear-gradient(var(--accent), transparent); }
.author-box .ab-photo{ width:78px; height:78px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--line-2); }
.author-box .ab-main{ min-width:0; }
.author-box .ab-kicker{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; color:var(--faint); direction:ltr; }
.author-box h4{ font-size:1.1rem; margin:6px 0 2px; }
.author-box .ab-role{ font-size:.86rem; color:var(--accent); font-weight:600; }
.author-box p{ color:var(--muted); font-size:.94rem; line-height:1.9; margin:10px 0 0; }
.author-box .ab-links{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.author-box .ab-links a{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); border:1px solid var(--line-2); border-radius:7px; padding:.4em .8em; transition:.15s; }
.author-box .ab-links a:hover{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
@media(max-width:600px){ .author-box{ flex-direction:column; gap:14px; } .author-box .ab-photo{ width:64px; height:64px; } }
@media(max-width:860px){ .article-layout{ grid-template-columns:1fr; } .article-aside{ position:static; } }

/* ---------- case studies / clients ---------- */
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.case{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.case .ctop{ padding:24px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); }
.case .cname{ font-weight:700; font-size:1.18rem; }
.case .ctag{ font-family:var(--font-mono); font-size:.64rem; color:var(--accent); border:1px solid var(--accent-line); border-radius:6px; padding:.3em .6em; direction:ltr; white-space:nowrap; }
.case .cbody{ padding:24px 28px 26px; display:flex; flex-direction:column; gap:14px; flex:1; }
.case .cbody p{ color:var(--muted); text-wrap:pretty; }
.case .cstats{ display:flex; gap:28px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.case .cstats b{ display:block; font-size:1.5rem; color:var(--accent); font-weight:800; font-family:var(--font-fa); }
.case .cstats span{ font-size:.8rem; color:var(--faint); }
@media(max-width:860px){ .case-grid{ grid-template-columns:1fr; } }
.logo-wall{ display:grid; grid-template-columns:repeat(5,1fr); border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.logo-wall .lw{ aspect-ratio:5/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16px; border-inline-start:1px solid var(--line); border-top:1px solid var(--line); transition:.2s; position:relative; }
.logo-wall .lw .lwm{ width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-weight:800; font-size:1.15rem; transition:.2s; }
.logo-wall .lw .lwn{ color:var(--muted); font-weight:600; font-size:.92rem; transition:.2s; text-align:center; }
.logo-wall .lw:hover{ background:var(--bg-1); }
.logo-wall .lw:hover .lwm{ background:var(--accent); color:var(--accent-ink); box-shadow:0 0 22px -4px var(--accent-line); }
.logo-wall .lw:hover .lwn{ color:var(--ink); }
@media(max-width:860px){ .logo-wall{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .logo-wall{ grid-template-columns:repeat(2,1fr); } }

/* ---------- hacker operator cards ---------- */
.operators{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.operator{ padding:0; overflow:hidden; position:relative; display:grid; grid-template-columns:138px 1fr; }
.op-photo{ position:relative; overflow:hidden; border-inline-end:1px solid var(--line); background:#0c1310; }
.op-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; filter:grayscale(1) contrast(1.06) brightness(.98); transition:filter .35s ease, transform .5s ease; }
.op-photo::before{ content:""; position:absolute; inset:0; z-index:1; background:var(--accent); mix-blend-mode:color; opacity:0; transition:opacity .35s ease; }
.op-photo::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.18) 3px 4px),
            linear-gradient(180deg, transparent 55%, rgba(8,12,10,.85)); opacity:.6; }
.operator:hover .op-photo img{ transform:scale(1.04); filter:grayscale(.4) contrast(1.08); }
.operator:hover .op-photo::before{ opacity:.32; }
.op-photo .op-codename{ position:absolute; z-index:3; inset-inline:10px; bottom:10px; font-family:var(--font-mono); font-size:.72rem; color:var(--accent); direction:ltr; text-shadow:0 1px 6px #000; }
.op-main{ display:flex; flex-direction:column; min-width:0; }
.op-bar{ display:flex; align-items:center; gap:7px; padding:11px 16px; border-bottom:1px solid var(--line); background:var(--bg-1); font-family:var(--font-mono); font-size:.66rem; color:var(--faint); direction:ltr; }
.op-bar i{ width:9px; height:9px; border-radius:50%; background:var(--bg-3); }
.op-bar i:nth-child(1){ background:oklch(0.7 0.18 25); } .op-bar i:nth-child(2){ background:oklch(0.82 0.14 80); } .op-bar i:nth-child(3){ background:var(--accent); }
.op-bar .id{ margin-inline-start:auto; }
.op-body{ padding:18px 22px 20px; display:flex; flex-direction:column; gap:13px; flex:1; }
.operator h4{ font-size:1.18rem; }
.operator .role{ color:var(--accent); font-size:.84rem; margin-top:-6px; }
.op-body > p{ color:var(--muted); font-size:.9rem; text-wrap:pretty; }
.op-skills{ display:flex; flex-wrap:wrap; gap:7px; }
.op-skills span{ font-family:var(--font-mono); font-size:.64rem; color:var(--muted); border:1px solid var(--line-2); border-radius:6px; padding:.3em .55em; direction:ltr; }
.op-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.op-status{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:.66rem; color:var(--accent); direction:ltr; }
.op-status i{ width:7px; height:7px; border-radius:50%; background:var(--accent); animation:statusPulse 2.4s ease-out infinite; }
body.no-grid .op-status i{ animation:none; }
.op-foot .socials{ display:flex; gap:8px; }
.op-foot .socials a{ font-family:var(--font-mono); font-size:.66rem; color:var(--muted); border:1px solid var(--line-2); border-radius:7px; padding:.35em .7em; direction:ltr; transition:.15s; }
.op-foot .socials a:hover{ color:var(--accent); border-color:var(--accent-line); }
@media(max-width:520px){ .operators{ grid-template-columns:1fr; } .operator{ grid-template-columns:112px 1fr; } }

/* ---------- bug bounty directory ---------- */
.bb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bb-card{ padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.bb-top{ display:flex; align-items:center; gap:12px; }
.bb-mark{ width:44px; height:44px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-weight:800; font-size:1.05rem; overflow:hidden; }
.bb-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.bb-name{ font-weight:700; font-size:1.05rem; line-height:1.3; }
.bb-rows{ display:flex; flex-direction:column; gap:7px; }
.bb-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.84rem; border-bottom:1px dashed var(--line); padding-bottom:7px; }
.bb-row:last-child{ border-bottom:none; padding-bottom:0; }
.bb-row .k{ color:var(--faint); } .bb-row .v{ color:var(--ink); font-weight:600; }
.bb-row .v.cap{ color:var(--accent); }
.bb-link{ margin-top:auto; display:inline-flex; align-items:center; gap:.5em; color:var(--accent); font-size:.85rem; font-weight:600; }
.bb-link .ar{ font-family:var(--font-mono); transition:.2s; }
.bb-card:hover .bb-link .ar{ transform:translateX(-4px); }
@media(max-width:980px){ .bb-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .bb-grid{ grid-template-columns:1fr; } }
.plat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.plat .pmark{ width:46px; height:46px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-weight:800; flex:none; overflow:hidden; }
.plat .pmark img{ width:100%; height:100%; object-fit:cover; display:block; }
.plat .pmeta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.82rem; color:var(--muted); }
.plat .pmeta b{ color:var(--ink); }
.plat .ptargets{ display:flex; flex-wrap:wrap; gap:7px; }
.plat .ptargets span{ font-size:.74rem; color:var(--muted); border:1px solid var(--line-2); border-radius:6px; padding:.28em .55em; }
@media(max-width:860px){ .plat-grid{ grid-template-columns:1fr; } }

/* ---------- hunter experiences ---------- */
.exp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.exp{ padding:22px 24px; display:flex; flex-direction:column; gap:13px; position:relative; overflow:hidden; }
.exp::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:.25s; }
.exp:hover::before{ transform:scaleY(1); }
.exp .ehead{ display:flex; align-items:center; gap:11px; }
.exp .eav{ width:38px; height:38px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-family:var(--font-mono); font-weight:700; font-size:.9rem; }
.exp .ename{ font-weight:700; font-size:.95rem; }
.exp .ehandle{ font-family:var(--font-mono); font-size:.68rem; color:var(--accent); direction:ltr; }
.exp .etarget{ margin-inline-start:auto; font-family:var(--font-mono); font-size:.64rem; color:var(--muted); border:1px solid var(--line-2); border-radius:6px; padding:.3em .6em; }
.exp p{ color:var(--muted); font-size:.92rem; line-height:1.9; text-wrap:pretty; }
.exp .everdict{ font-family:var(--font-mono); font-size:.62rem; padding:.26em .5em; border-radius:5px; direction:ltr; align-self:flex-start; }
.exp .everdict.pos{ background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line); }
.exp .everdict.neg{ background:color-mix(in oklab,var(--crit) 16%,transparent); color:var(--crit); border:1px solid color-mix(in oklab,var(--crit) 38%,transparent); }
.exp .everdict.mix{ background:color-mix(in oklab,var(--warn) 16%,transparent); color:var(--warn); border:1px solid color-mix(in oklab,var(--warn) 38%,transparent); }
@media(max-width:720px){ .exp-grid{ grid-template-columns:1fr; } }
.exp-form{ margin-top:26px; }
.exp-note{ font-family:var(--font-mono); font-size:.66rem; color:var(--faint); direction:ltr; margin-bottom:10px; }

/* ---------- live pentest engine (cinematic) ---------- */
.pt-engine{ position:relative; border-radius:18px; overflow:hidden; background:#090d0b; box-shadow:0 50px 120px -60px #000, 0 0 0 1px var(--line-2); }
.pe-bar{ display:flex; align-items:center; gap:8px; padding:13px 18px; border-bottom:1px solid var(--line); background:#0c1310; font-family:var(--font-mono); font-size:.72rem; color:var(--faint); direction:ltr; }
.pe-bar i{ width:11px; height:11px; border-radius:50%; }
.pe-bar i:nth-child(1){ background:oklch(0.7 0.18 25);} .pe-bar i:nth-child(2){ background:oklch(0.82 0.14 80);} .pe-bar i:nth-child(3){ background:var(--accent);}
.pe-bar .t{ margin-inline-start:auto; }
.pe-bar .live{ display:inline-flex; align-items:center; gap:.45em; color:var(--accent); }
.pe-bar .live::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); animation:statusPulse 1.6s ease-out infinite; }
.pe-grid{ display:grid; grid-template-columns:230px 1fr 320px; min-height:420px; }
.pe-phases{ border-inline-end:1px solid var(--line); padding:20px 16px; display:flex; flex-direction:column; gap:6px; background:#0a100d; }
.pe-phase{ display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:11px; transition:.3s; opacity:.5; }
.pe-phase .pn{ width:30px; height:30px; flex:none; border-radius:8px; display:grid; place-items:center; font-family:var(--font-mono); font-size:.78rem; border:1px solid var(--line-2); color:var(--muted); transition:.3s; }
.pe-phase .pl{ display:flex; flex-direction:column; }
.pe-phase .pl b{ font-size:.92rem; } .pe-phase .pl span{ font-family:var(--font-mono); font-size:.62rem; color:var(--faint); direction:ltr; }
.pe-phase.active{ opacity:1; background:var(--accent-soft); }
.pe-phase.active .pn{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 16px -2px var(--accent-line); }
.pe-phase.done{ opacity:.85; }
.pe-phase.done .pn{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.pe-term{ padding:20px 22px; font-family:var(--font-mono); font-size:.82rem; line-height:1.95; color:var(--muted); direction:ltr; overflow:hidden; border-inline-end:1px solid var(--line); }
.pe-term .l{ white-space:pre-wrap; word-break:break-word; }
.pe-term .l .g{ color:var(--accent); } .pe-term .l .w{ color:var(--warn); } .pe-term .l .c{ color:var(--crit); } .pe-term .l .d{ color:var(--faint); } .pe-term .l .i{ color:var(--ink); }
.pe-cursor{ display:inline-block; width:8px; height:1.05em; background:var(--accent); vertical-align:-2px; animation:blink 1.1s steps(1) infinite; }
.pe-findings{ padding:18px 18px; display:flex; flex-direction:column; background:#0a100d; }
.pe-findings .fh{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:.68rem; color:var(--faint); direction:ltr; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.pe-findings .fh b{ color:var(--accent); font-size:1.1rem; }
.pe-flist{ display:flex; flex-direction:column; gap:8px; overflow:hidden; flex:1; }
.finding{ display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--bg-1); opacity:0; transform:translateX(-12px); animation:findIn .4s ease forwards; }
@keyframes findIn{ to{ opacity:1; transform:none; } }
.finding .sev{ font-family:var(--font-mono); font-size:.58rem; font-weight:700; padding:.28em .5em; border-radius:5px; direction:ltr; flex:none; }
.finding .sev.crit{ background:color-mix(in oklab,var(--crit) 22%,transparent); color:var(--crit); border:1px solid color-mix(in oklab,var(--crit) 40%,transparent); }
.finding .sev.high{ background:color-mix(in oklab,var(--warn) 20%,transparent); color:var(--warn); border:1px solid color-mix(in oklab,var(--warn) 40%,transparent); }
.finding .sev.med{ background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line); }
.finding .fn{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink); direction:ltr; }
.finding .cvss{ margin-inline-start:auto; font-family:var(--font-mono); font-size:.68rem; color:var(--faint); direction:ltr; }
.pe-progress{ grid-column:1/-1; border-top:1px solid var(--line); padding:14px 22px; display:flex; align-items:center; gap:16px; background:#0c1310; }
.pe-progress .lbl{ font-family:var(--font-mono); font-size:.72rem; color:var(--faint); direction:ltr; white-space:nowrap; }
.pe-progress .track{ flex:1; height:6px; border-radius:3px; background:var(--bg-2); overflow:hidden; }
.pe-progress .fill{ height:100%; width:0; background:linear-gradient(90deg, var(--accent), color-mix(in oklab,var(--accent) 60%, var(--warn))); border-radius:3px; transition:width .5s ease; box-shadow:0 0 12px var(--accent-line); }
.pe-progress .pct{ font-family:var(--font-mono); font-size:.8rem; color:var(--accent); direction:ltr; white-space:nowrap; min-width:42px; text-align:left; }
@media(max-width:880px){ .pe-grid{ grid-template-columns:1fr; } .pe-phases{ flex-direction:row; overflow-x:auto; border-inline-end:none; border-bottom:1px solid var(--line); } .pe-phase{ flex:none; } .pe-phase .pl{ display:none; } .pe-term{ border-inline-end:none; border-bottom:1px solid var(--line); min-height:240px; } }
body.no-grid .pe-bar .live::before, body.no-grid .pe-cursor{ animation:none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .shop-grid{ grid-template-columns:repeat(2,1fr); }
  .values{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 860px){
  .product-detail{ grid-template-columns:1fr; }
  .pd-gallery{ aspect-ratio:16/10; }
  .about-story{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .shop-grid{ grid-template-columns:1fr; }
  .values{ grid-template-columns:1fr; }
  .pd-includes{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .pd-buy .btn{ width:100%; flex:none; }
}

/* ===========================================================
   Knowledge base — category color tokens (shared by hub + term pages)
   =========================================================== */
.c-vuln{ color:var(--crit); background:color-mix(in oklab,var(--crit) 14%,transparent); border:1px solid color-mix(in oklab,var(--crit) 34%,transparent); }
.c-tool{ color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); }
.c-concept{ color:oklch(0.74 0.11 235); background:oklch(0.74 0.11 235 / .12); border:1px solid oklch(0.74 0.11 235 / .34); }
.c-method{ color:var(--warn); background:color-mix(in oklab,var(--warn) 13%,transparent); border:1px solid color-mix(in oklab,var(--warn) 34%,transparent); }
.c-glossary{ color:var(--muted); background:var(--bg-2); border:1px solid var(--line-2); }

/* ---------- knowledge base: single term page ---------- */
.wiki-tagrow{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-top:18px; }
.wiki-token{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; border-radius:6px; padding:.42em .62em; direction:ltr; font-weight:700; }
.wiki-type{ font-family:var(--font-fa); font-size:.8rem; color:var(--muted); border:1px solid var(--line-2); border-radius:6px; padding:.36em .72em; }
.wiki-sev{ font-family:var(--font-mono); font-size:.62rem; font-weight:700; padding:.42em .6em; border-radius:6px; direction:ltr; }
.wiki-sev.crit{ color:var(--crit); background:color-mix(in oklab,var(--crit) 18%,transparent); border:1px solid color-mix(in oklab,var(--crit) 38%,transparent); }
.wiki-sev.high{ color:var(--warn); background:color-mix(in oklab,var(--warn) 16%,transparent); border:1px solid color-mix(in oklab,var(--warn) 38%,transparent); }
.wiki-sev.med{ color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); }
.page-hero .wiki-h1{ font-size:clamp(1.9rem,4.4vw,2.9rem); margin-top:16px; text-wrap:balance; line-height:1.28; }
.wiki-h1 .en{ font-family:var(--font-mono); color:var(--accent); direction:ltr; }
.wiki-sub{ font-family:var(--font-mono); font-size:.9rem; color:var(--faint); direction:ltr; margin-top:8px; }
.page-hero .wiki-sub + .lead{ margin-top:14px; }
.wiki-doc{ max-width:760px; }
.wiki-fix{ margin-top:30px; border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:14px; padding:20px 22px; }
.wiki-fix-k{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--accent); direction:ltr; display:flex; align-items:center; gap:.5em; margin-bottom:9px; }
.wiki-fix-k::before{ content:"\2713"; }
.wiki-fix p{ color:var(--ink); font-size:.97rem; line-height:1.9; margin:0; text-wrap:pretty; }
.wiki-rel{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.wiki-rel h3{ font-size:1.05rem; margin-bottom:14px; }
.wiki-relrow{ display:flex; flex-wrap:wrap; gap:9px; }
.wiki-relchip{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); border:1px solid var(--line-2); border-radius:8px; padding:.5em .8em; direction:ltr; background:var(--bg-1); transition:.15s; }
a.wiki-relchip:hover{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.wiki-relchip.static{ opacity:.6; }
.wiki-back{ display:inline-flex; align-items:center; gap:.5em; margin-top:36px; color:var(--muted); font-weight:600; font-size:.95rem; }
.wiki-back .ar{ font-family:var(--font-mono); transition:.2s; }
.wiki-back:hover{ color:var(--accent); }
.wiki-back:hover .ar{ transform:translateX(4px); }

/* ===========================================================
   Default content page (CMS template)
   =========================================================== */
.doc-head .hero-cmd{ margin-top:20px; }
.doc-body{ max-width:760px; }
.doc-body .prose:first-child > :first-child{ margin-top:0; }
.doc-updated{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:.76rem; color:var(--faint); direction:ltr; margin-top:18px; }
.doc-updated .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }

/* ===========================================================
   Comments (reusable — content pages + blog)
   =========================================================== */
.comments{ max-width:760px; margin-top:clamp(40px,5vw,60px); padding-top:clamp(34px,4vw,48px); border-top:1px solid var(--line); }
.comments-head{ display:flex; align-items:baseline; gap:11px; margin-bottom:26px; }
.comments-head h2{ font-size:clamp(1.4rem,2.6vw,1.8rem); }
.comments-head .cc{ font-family:var(--font-mono); font-size:.84rem; color:var(--faint); direction:ltr; }

/* form */
.comment-form{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:clamp(20px,2.4vw,26px); margin-bottom:30px; }
.comment-form .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.comment-form .field{ margin-bottom:16px; }
.comment-form .field:last-of-type{ margin-bottom:0; }
.comment-form textarea{ min-height:108px; }
.comment-form .cf-foot{ display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.comment-form .cf-note{ font-size:.82rem; color:var(--faint); display:flex; align-items:center; gap:.5em; }
.comment-form .cf-note::before{ content:""; width:14px; height:14px; border-radius:4px; border:1px solid var(--line-2); background:var(--bg-1); flex:none; }
.comment-form .btn{ margin-inline-start:auto; }
.comment-ok{ display:none; margin-top:16px; padding:13px 16px; border-radius:11px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:.9rem; }
.comment-ok.show{ display:block; }

/* list */
.comment-list{ display:flex; flex-direction:column; gap:8px; }
.comment{ display:flex; gap:15px; padding:20px 0; border-top:1px solid var(--line); }
.comment:first-child{ border-top:0; }
.comment .c-av{ flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-family:var(--font-mono); font-weight:700; font-size:1.05rem; }
.comment.is-team .c-av{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.comment .c-main{ flex:1; min-width:0; }
.comment .c-top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px; }
.comment .c-name{ font-weight:600; color:var(--ink); white-space:nowrap; }
.comment .c-badge{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:5px; padding:.24em .5em; direction:ltr; }
.comment .c-date{ font-family:var(--font-mono); font-size:.72rem; color:var(--faint); direction:ltr; margin-inline-start:auto; }
.comment .c-body{ color:var(--muted); line-height:1.9; text-wrap:pretty; }
.comment .c-actions{ display:flex; gap:16px; margin-top:11px; }
.comment .c-actions button{ background:none; border:0; cursor:pointer; font-family:var(--font-fa); font-size:.82rem; color:var(--faint); display:inline-flex; align-items:center; gap:.45em; transition:.15s; padding:0; }
.comment .c-actions button:hover{ color:var(--accent); }
.comment .c-actions button.liked{ color:var(--accent); }
.comment .c-fresh{ animation:cIn .4s cubic-bezier(.2,.7,.3,1); }
@keyframes cIn{ from{ opacity:0; transform:translateY(-8px); } }
@media(max-width:560px){
  .comment-form .cf-row{ grid-template-columns:1fr; }
  .comment-form .btn{ width:100%; justify-content:center; margin-inline-start:0; }
}

/* pending (unmoderated) comments — visible to their author only, never counted as published */
.comment.c-pending{ opacity:.9; }
.comment.c-pending .c-main{ border-inline-start:2px solid color-mix(in oklab,var(--warn) 55%,transparent); padding-inline-start:12px; }
.c-badge.c-wait{ background:color-mix(in oklab,var(--warn) 15%,transparent); color:var(--warn); border-color:color-mix(in oklab,var(--warn) 38%,transparent); }
.comment .c-note{ margin-top:8px; font-size:.8rem; color:var(--faint); line-height:1.8; }

.vid-card.is-soon .vid-thumb{ cursor:default; background:var(--bg-2); }
.vid-soon{ position:absolute; inset-block-end:12px; inset-inline-start:12px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; color:var(--muted); background:var(--bg-3); border:1px solid var(--line-2); border-radius:6px; padding:.3em .6em; }

/* blog index: search + pagination */
.blog-search{ display:flex; align-items:center; gap:9px; flex:1 1 240px; max-width:340px; background:var(--bg-1); border:1px solid var(--line-2); border-radius:10px; padding:.55em .9em; color:var(--faint); }
.blog-search input{ flex:1; min-width:0; background:none; border:0; outline:none; color:var(--ink); font-family:var(--font-fa); font-size:.92rem; }
.blog-search input::placeholder{ color:var(--faint); }
.blog-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.blog-empty{ margin-top:34px; text-align:center; color:var(--muted); font-size:.95rem; line-height:2; }
.pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:clamp(34px,4vw,52px); }
.pager button{ min-width:44px; min-height:44px; padding:.5em .9em; border-radius:10px; border:1px solid var(--line-2); background:var(--bg-1); color:var(--muted); font-family:var(--font-fa); font-size:.9rem; cursor:pointer; transition:.15s; }
.pager button:hover:not(:disabled){ color:var(--ink); border-color:var(--accent-line); }
.pager button.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:700; }
.pager button:disabled{ opacity:.4; cursor:default; }
.pager .gap{ display:grid; place-items:center; min-width:24px; color:var(--faint); }
@media(max-width:560px){ .blog-search{ max-width:none; flex-basis:100%; } }

.op-photo .op-initials{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-mono); font-size:2rem; font-weight:700; letter-spacing:.02em; color:var(--accent); background:linear-gradient(150deg,var(--bg-3),var(--bg-2)); }