/* ==========================================================
   HEX — Blog + Admin styles  (loads AFTER styles.css)
   Uses the same tokens: --b bone, --vi violet, --vd void, --ink
   ========================================================== */

/* ====== shared bits ====== */
.blog-page{ background:var(--b); }
.section-pad{ padding:128px 0 96px; }
.bl-back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink2); }
.bl-back:hover{ color:var(--vi); }

/* hexagon bullet used as a motif accent */
.hexdot{ width:10px; height:11px; flex:0 0 auto; background:var(--vi);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }

/* ==========================================================
   PUBLIC — blog list
   ========================================================== */
.bloglist-hero{
  position:relative; padding:170px 0 64px; overflow:hidden;
  border-bottom:1px solid rgba(9,9,14,.08);
}
.bloglist-hero .eyebrow{ color:var(--vi); }
.bloglist-hero h1{ font-size:clamp(48px,7vw,104px); margin:18px 0 0; max-width:14ch; }
.bloglist-hero .lede{
  font-family:var(--f-italic); font-style:italic; font-weight:300;
  font-size:clamp(20px,2.3vw,30px); color:var(--vi); margin:22px 0 0; max-width:26ch;
}
.bloglist-hero .hexfield{
  position:absolute; right:-40px; top:90px; width:min(46vw,560px); opacity:.5;
  pointer-events:none;
}

.posts-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-top:8px;
}
.pcard{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid rgba(9,9,14,.08); border-radius:22px; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.pcard:hover{ transform:translateY(-4px);
  box-shadow:0 30px 60px -34px rgba(85,18,224,.45); border-color:rgba(85,18,224,.3); }
.pcard-img{ aspect-ratio:16/10; background:var(--b3); position:relative; overflow:hidden; }
.pcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.pcard:hover .pcard-img img{ transform:scale(1.04); }
.pcard-img.empty{ display:grid; place-items:center;
  background:linear-gradient(135deg,var(--vi6),var(--vi)); }
.pcard-img.empty svg{ width:56px; height:56px; opacity:.8; }
.pcard-body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.pcard-meta{ display:flex; align-items:center; gap:10px; font-family:var(--f-mono);
  font-size:clamp(14px,1.1vw,16px); letter-spacing:.16em; text-transform:uppercase; color:var(--ink2); }
.pcard h3{ font-family:var(--f-display); font-weight:700; letter-spacing:-.03em;
  font-size:25px; line-height:1.1; margin:0; }
.pcard p{ color:var(--ink2); margin:0; font-size:14.5px; line-height:1.6; }
.pcard .more{ margin-top:auto; padding-top:6px; font-family:var(--f-mono); font-size:13px;
  letter-spacing:.06em; color:var(--vi); display:inline-flex; gap:8px; }
.pcard:hover .more{ gap:14px; }
.pcard .more .arr{ transition:transform .3s; }

.blog-empty{
  text-align:center; padding:90px 24px; border:1px dashed rgba(9,9,14,.2);
  border-radius:24px; background:#fff;
}
.blog-empty .mark{ width:64px; height:70px; margin:0 auto 22px;
  background:linear-gradient(135deg,var(--vi),var(--vi6));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.blog-empty h2{ font-family:var(--f-display); font-weight:900; letter-spacing:-.03em;
  font-size:34px; margin:0 0 12px; }
.blog-empty p{ color:var(--ink2); max-width:42ch; margin:0 auto 26px; }

/* ==========================================================
   PUBLIC — single post
   ========================================================== */
.post-hero{
  position:relative; height:58vh; min-height:440px; overflow:hidden;
  display:flex; align-items:flex-end;
}
.post-hero img.cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.post-hero .scrim{ position:absolute; inset:0;
  background:linear-gradient(to top,rgba(13,8,32,.86) 0%,rgba(13,8,32,.25) 45%,rgba(13,8,32,.05) 100%); }
.post-hero.noimg{ background:linear-gradient(135deg,var(--vi6),var(--vd)); min-height:380px; }
.post-hero-inner{ position:relative; z-index:2; padding-bottom:48px; }
.post-label{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.24em;
  text-transform:uppercase; color:#ffffff; margin:0 0 14px; }
.post-hero h1{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em;
  line-height:.98; color:var(--b); font-size:clamp(34px,5.4vw,76px); margin:0; max-width:18ch; }
.post-hero .meta{ margin-top:18px; display:flex; gap:14px; align-items:center;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.1em; color:#ffffff; }

.post-wrap{ max-width:760px; margin:0 auto; padding:0 32px; }
.post-body{ padding:64px 0 40px; font-size:18px; line-height:1.75; color:var(--ink); }
.post-body > *:first-child{ margin-top:0; }
.post-body h2{ font-family:var(--f-display); font-weight:700; letter-spacing:-.03em;
  font-size:30px; line-height:1.12; margin:48px 0 16px; }
.post-body h3{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em;
  font-size:21px; margin:32px 0 10px; }
.post-body p{ margin:0 0 22px; }
.post-body a{ color:var(--vi); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; }
.post-body a:hover{ opacity:.7; }
.post-body ul,.post-body ol{ margin:0 0 22px; padding-left:22px; }
.post-body li{ margin:0 0 8px; }
.post-body blockquote{ margin:32px 0; padding:6px 0 6px 26px; border-left:3px solid var(--vi);
  font-family:var(--f-italic); font-style:italic; font-size:23px; color:var(--vi6); }
.post-body .post-fig{ margin:34px 0; }
.post-body .post-fig img{ width:100%; border-radius:16px; }
.post-body .post-fig.hero-fig img{ aspect-ratio:16/9; object-fit:cover; }
.post-foot{ padding:30px 0 110px; border-top:1px solid rgba(9,9,14,.1); margin-top:36px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }

/* ==========================================================
   ADMIN
   ========================================================== */
.admin-body{ background:var(--b); min-height:100vh; }

/* slim admin top bar */
.adbar{ position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; background:rgba(242,237,230,.86);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(9,9,14,.1); }
.adbar .brand{ display:flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; font-size:18px; }
.adbar .brand .tag{ font-family:var(--f-mono); font-weight:400; font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--vi);
  border:1px solid rgba(85,18,224,.3); border-radius:999px; padding:3px 9px; margin-left:4px; }
.adbar .right{ display:flex; align-items:center; gap:10px; }
.adbar .who{ font-family:var(--f-mono); font-size:12px; color:var(--ink2); letter-spacing:.08em; }

/* generic admin buttons */
.btn-a{ font-family:var(--f-mono); font-size:13px; letter-spacing:.06em;
  padding:11px 18px; border-radius:999px; transition:.22s; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px; }
.btn-a.solid{ background:var(--vi); color:var(--b); }
.btn-a.solid:hover{ background:var(--vi2); transform:translateY(-1px); }
.btn-a.ghost{ border:1px solid rgba(9,9,14,.22); color:var(--ink); }
.btn-a.ghost:hover{ border-color:var(--vi); color:var(--vi); }
.btn-a.dark{ background:var(--vd); color:var(--b); }
.btn-a.dark:hover{ background:#1a1138; }
.btn-a.danger{ border:1px solid rgba(200,40,60,.4); color:#b3263a; }
.btn-a.danger:hover{ background:rgba(200,40,60,.08); }
.btn-a:disabled{ opacity:.45; cursor:not-allowed; transform:none; }

/* ---- login ---- */
.login-stage{ min-height:100vh; display:grid; place-items:center; padding:40px 24px;
  position:relative; overflow:hidden; }
.login-stage .bgmark{ position:absolute; width:min(70vw,720px); right:-10%; top:50%;
  transform:translateY(-50%); opacity:.06; pointer-events:none; }
.login-card{ position:relative; z-index:2; width:100%; max-width:420px; }
.login-card .eyebrow{ color:var(--vi); }
.login-card h1{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em;
  font-size:42px; line-height:.96; margin:16px 0 6px; }
.login-card .sub{ color:var(--ink2); font-size:14px; margin:0 0 30px; }
.login-card form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field > span{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink2); }
.field input,.field textarea,.field select{
  font-family:var(--f-mono); font-size:15px; color:var(--ink);
  background:#fff; border:1px solid rgba(9,9,14,.18); border-radius:12px;
  padding:13px 15px; transition:border-color .2s, box-shadow .2s; width:100%; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none;
  border-color:var(--vi); box-shadow:0 0 0 4px rgba(85,18,224,.12); }
.field textarea{ resize:vertical; min-height:96px; line-height:1.55; }
.login-err{ font-family:var(--f-mono); font-size:13px; color:#b3263a; min-height:18px; }
.login-hint{ margin-top:18px; font-family:var(--f-mono); font-size:12px; color:var(--ink2);
  border-top:1px dashed rgba(9,9,14,.18); padding-top:14px; line-height:1.7; }
.login-hint code{ color:var(--vi); background:rgba(85,18,224,.08); padding:2px 7px; border-radius:6px; }

/* ---- writer shell ---- */
.writer{ max-width:1080px; margin:0 auto; padding:40px 40px 160px; }
.wsteps{ display:flex; flex-direction:row; gap:8px; align-items:center; justify-content:center; margin-bottom:34px; flex-wrap:nowrap; }
.step-chip{ display:flex; align-items:center; gap:9px; font-family:var(--f-mono);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink2);
  padding:7px 13px; border-radius:999px; border:1px solid transparent; }
.step-chip .n{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:rgba(9,9,14,.1); color:var(--ink2); font-size:11px; }
.step-chip.active{ color:var(--vi); border-color:rgba(85,18,224,.3); background:rgba(85,18,224,.06); }
.step-chip.active .n{ background:var(--vi); color:var(--b); }
.step-chip.done{ color:var(--ink); }
.step-chip.done .n{ background:var(--vd); color:var(--b); }
.step-sep{ width:18px; height:1px; background:rgba(9,9,14,.2); }

.wsec{ margin-bottom:30px; }
.wsec > .lab{ display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.wsec > .lab .req{ color:var(--vi); }
.wsec .help{ font-family:var(--f-mono); font-size:12px; color:var(--ink2); margin:-4px 0 12px; }

.h1-pick{ display:flex; flex-direction:column; gap:10px; }
.opt{ text-align:left; border:1px solid rgba(9,9,14,.16); border-radius:12px; padding:13px 16px;
  font-family:var(--f-mono); font-size:14px; transition:.18s; background:#fff; line-height:1.45; }
.opt:hover{ border-color:var(--vi); }
.opt.sel{ border-color:var(--vi); background:rgba(85,18,224,.06); color:var(--vi6); }
.opt .check{ float:right; color:var(--vi); opacity:0; }
.opt.sel .check{ opacity:1; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip-opt{ border:1px solid rgba(9,9,14,.16); border-radius:999px; padding:9px 15px;
  font-family:var(--f-mono); font-size:13px; background:#fff; transition:.18s; }
.chip-opt:hover{ border-color:var(--vi); }
.chip-opt.sel{ border-color:var(--vi); background:var(--vi); color:var(--b); }

.h1-editable{ font-family:var(--f-display); font-weight:700; letter-spacing:-.03em;
  font-size:30px; line-height:1.08; border:1px dashed transparent; border-radius:10px;
  padding:8px 10px; margin:0; outline:none; }
.h1-editable:focus{ border-color:var(--vi); background:#fff; }
.h1-editable:empty:before{ content:'Your headline…'; color:var(--ink3); }

/* image dropzone */
.dropzone{ border:2px dashed rgba(9,9,14,.22); border-radius:16px; padding:26px;
  text-align:center; transition:.2s; background:#fff; cursor:pointer; }
.dropzone:hover,.dropzone.over{ border-color:var(--vi); background:rgba(85,18,224,.04); }
.dropzone .dz-ic{ width:34px; height:38px; margin:0 auto 12px; background:var(--vi);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); opacity:.85; }
.dropzone p{ font-family:var(--f-mono); font-size:13px; color:var(--ink2); margin:0; }
.dropzone b{ color:var(--vi); }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:14px; }
.thumb{ position:relative; border-radius:12px; overflow:hidden; border:1px solid rgba(9,9,14,.14);
  background:#fff; display:flex; flex-direction:column; }
.thumb.dragging{ opacity:.4; }
.thumb .imgwrap{ position:relative; aspect-ratio:1; background:var(--b3); cursor:grab; }
.thumb .imgwrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb .badge{ position:absolute; top:7px; left:7px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.1em; background:var(--vd); color:var(--b); padding:3px 7px; border-radius:6px; }
.thumb .badge.hero{ background:var(--vi); }
.thumb .rm{ position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%;
  background:rgba(13,8,32,.7); color:#fff; display:grid; place-items:center; font-size:13px; line-height:1; }
.thumb .rm:hover{ background:#b3263a; }
.thumb .ovl{ position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(13,8,32,.55); color:#fff; font-family:var(--f-mono); font-size:11px; }
.thumb .ovl.err{ background:rgba(160,20,40,.7); }
.thumb .cap{ padding:8px; display:flex; flex-direction:column; gap:5px; }
.thumb .cap .alt-in{ font-family:var(--f-mono); font-size:11px; color:var(--ink);
  border:1px solid rgba(9,9,14,.14); border-radius:7px; padding:6px 8px; width:100%; }
.thumb .cap .alt-in:focus{ outline:none; border-color:var(--vi); }
.thumb .cap .fname{ font-family:var(--f-mono); font-size:10px; color:var(--vi); word-break:break-all; }
.spin{ width:22px; height:22px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.toggles{ display:flex; gap:12px; flex-wrap:wrap; }
.toggle{ display:flex; align-items:center; gap:10px; border:1px solid rgba(9,9,14,.16);
  border-radius:12px; padding:12px 16px; font-family:var(--f-mono); font-size:13px; background:#fff; }
.toggle .sw{ width:38px; height:22px; border-radius:999px; background:rgba(9,9,14,.18);
  position:relative; transition:.2s; flex:0 0 auto; }
.toggle .sw::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:.2s; }
.toggle.on .sw{ background:var(--vi); }
.toggle.on .sw::after{ transform:translateX(16px); }

.ai-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.ai-btn{ flex:1; min-width:240px; text-align:left; border-radius:14px; padding:16px 18px;
  font-family:var(--f-mono); transition:.2s; display:flex; gap:12px; align-items:flex-start; }
.ai-btn .ttl{ font-size:14px; letter-spacing:.04em; }
.ai-btn .d{ font-size:11.5px; opacity:.7; margin-top:3px; line-height:1.4; }
.ai-btn.primary{ background:var(--vi); color:var(--b); }
.ai-btn.primary:hover{ background:var(--vi2); }
.ai-btn.secondary{ border:1px solid rgba(9,9,14,.2); color:var(--ink); }
.ai-btn.secondary:hover{ border-color:var(--vi); color:var(--vi); }
.ai-btn .ic{ width:18px; height:20px; flex:0 0 auto; margin-top:1px; background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }

/* sticky bar */
.stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:rgba(242,237,230,.92); backdrop-filter:blur(12px);
  border-top:1px solid rgba(9,9,14,.12); padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.stickybar .meta{ font-family:var(--f-mono); font-size:12px; color:var(--ink2); letter-spacing:.06em; }

/* preview */
.preview-toolbar{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.seg{ display:inline-flex; background:#fff; border:1px solid rgba(9,9,14,.16); border-radius:999px; padding:3px; }
.seg button{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; padding:8px 16px;
  border-radius:999px; color:var(--ink2); }
.seg button.on{ background:var(--vi); color:var(--b); }
.raw-edit{ width:100%; min-height:420px; font-family:var(--f-mono); font-size:13px; line-height:1.6;
  border:1px solid rgba(9,9,14,.18); border-radius:14px; padding:18px; background:#fff; resize:vertical; }
.preview-card{ background:#fff; border:1px solid rgba(9,9,14,.1); border-radius:20px;
  padding:38px 44px; }
.preview-card .ph1{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em;
  font-size:clamp(30px,4vw,48px); line-height:1; margin:0 0 24px; outline:none; border:1px dashed transparent;
  border-radius:10px; padding:4px 6px; }
.preview-card .ph1:focus{ border-color:var(--vi); }
.revise-box{ margin-top:22px; background:rgba(85,18,224,.05); border:1px solid rgba(85,18,224,.18);
  border-radius:16px; padding:20px 22px; }
.revise-box .lab{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vi6); margin:0 0 10px; display:flex; gap:8px; align-items:center; }
.revise-row{ display:flex; gap:10px; }
.revise-row input{ flex:1; }

/* manage list */
.manage{ display:flex; flex-direction:column; gap:10px; }
.mrow{ display:flex; align-items:center; gap:16px; background:#fff; border:1px solid rgba(9,9,14,.1);
  border-radius:14px; padding:14px 18px; }
.mrow .mthumb{ width:54px; height:54px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:var(--b3); }
.mrow .minfo{ flex:1; min-width:0; }
.mrow .minfo h4{ font-family:var(--f-display); font-weight:700; font-size:16px; letter-spacing:-.02em;
  margin:0 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow .minfo .m{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink2); letter-spacing:.06em;
  display:flex; gap:10px; flex-wrap:wrap; }
.mrow .draft{ color:#c98a00; }
.mrow .macts{ display:flex; gap:8px; flex:0 0 auto; }
.mrow .macts a,.mrow .macts button{ font-family:var(--f-mono); font-size:12px; padding:8px 12px;
  border-radius:9px; border:1px solid rgba(9,9,14,.16); color:var(--ink); transition:.18s; }
.mrow .macts a:hover{ border-color:var(--vi); color:var(--vi); }
.mrow .macts .del:hover{ border-color:#b3263a; color:#b3263a; }
.mrow .stbadge{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 8px; border-radius:6px; flex:0 0 auto; }
.mrow .stbadge.live{ background:rgba(61,224,122,.16); color:#1c7d44; }
.mrow .stbadge.startup{ background:rgba(85,18,224,.12); color:var(--vi); }
.mrow .minfo .lk{ color:var(--vi); }

/* count pill on adbar buttons */
.count-pill:empty{ display:none; }
.count-pill{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:var(--vi); color:var(--b); font-size:10.5px; }

/* startup staging actions */
.startup-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; align-items:center; }
.startup-stat{ font-family:var(--f-mono); font-size:12px; color:var(--ink2); letter-spacing:.06em; margin-right:auto; }
.startup-stat b{ color:var(--ink); }

/* link library */
.linklib{ display:flex; flex-wrap:wrap; gap:8px; }
.linklib button{ font-family:var(--f-mono); font-size:12px; padding:8px 13px; border-radius:999px;
  border:1px solid rgba(9,9,14,.16); background:#fff; transition:.18s; display:inline-flex; gap:7px; align-items:center; }
.linklib button:hover{ border-color:var(--vi); color:var(--vi); }
.linklib button .k{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.55; }
.linklib button.post{ border-style:dashed; }

/* competitor analyse result card */
#analyse-out{ margin-top:14px; }
.analyse-card{ background:rgba(85,18,224,.05); border:1px solid rgba(85,18,224,.2);
  border-radius:14px; padding:16px 18px; }
.ac-row{ display:flex; gap:14px; padding:7px 0; border-bottom:1px solid rgba(85,18,224,.1);
  font-family:var(--f-mono); font-size:13px; line-height:1.5; }
.ac-row:last-of-type{ border-bottom:0; }
.ac-k{ flex:0 0 130px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--vi6); }
.ac-note{ margin-top:10px; font-family:var(--f-mono); font-size:12px; color:var(--ink2); line-height:1.55; }
.ac-note b{ color:var(--vi); }

/* mode segmented control */
.modeseg{ display:inline-flex; background:#fff; border:1px solid rgba(9,9,14,.16);
  border-radius:999px; padding:4px; gap:4px; }
.modeseg button{ font-family:var(--f-mono); font-size:13px; letter-spacing:.04em;
  padding:10px 20px; border-radius:999px; color:var(--ink2); transition:.18s; white-space:nowrap; }
.modeseg button:hover{ color:var(--ink); }
.modeseg button.on{ background:var(--vi); color:var(--b); }
.remix-panel{ margin-top:18px; padding:18px 18px 4px; border:1px solid rgba(85,18,224,.18);
  border-radius:16px; background:rgba(85,18,224,.035); }
.src-row{ background:#fff; border:1px solid rgba(9,9,14,.12); border-radius:12px;
  padding:12px 14px; margin-top:12px; }
.src-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.src-head span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--vi6); }
.src-head .src-rm{ font-family:var(--f-mono); font-size:11px; color:var(--ink2); }
.src-head .src-rm:hover{ color:#b3263a; }
.src-row input,.src-row textarea{ width:100%; font-family:var(--f-mono); font-size:13px; color:var(--ink);
  background:#fff; border:1px solid rgba(9,9,14,.16); border-radius:9px; padding:10px 12px; }
.src-row input:focus,.src-row textarea:focus{ outline:none; border-color:var(--vi);
  box-shadow:0 0 0 3px rgba(85,18,224,.1); }
.src-row textarea{ margin-top:8px; resize:vertical; min-height:70px; line-height:1.5; }
.remix-btns{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }

/* image prompt cards */
.img-prompts{ display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.imgp{ background:#fff; border:1px solid rgba(9,9,14,.12); border-radius:14px; padding:16px 18px; }
.imgp .head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.imgp .tag{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--vi); color:var(--b); padding:3px 9px; border-radius:6px; }
.imgp .rep{ font-family:var(--f-mono); font-size:12px; color:var(--ink2); line-height:1.5; margin:0 0 10px; }
.imgp .ptext{ font-family:var(--f-mono); font-size:12.5px; line-height:1.6; color:var(--ink);
  background:var(--b); border:1px solid rgba(9,9,14,.1); border-radius:10px; padding:12px 14px;
  white-space:pre-wrap; word-break:break-word; }
.imgp .copy{ margin-top:10px; font-family:var(--f-mono); font-size:12px; padding:8px 14px; border-radius:8px;
  border:1px solid rgba(9,9,14,.18); color:var(--ink); transition:.18s; }
.imgp .copy:hover{ border-color:var(--vi); color:var(--vi); }
.imgp .copy.done{ background:var(--vi); color:var(--b); border-color:var(--vi); }

/* SEO companion-post (spinoff) box */
.spinoff-box{ margin-top:22px; border-radius:16px; padding:18px 22px; }
.spinoff-box.prompt{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; border:1px dashed rgba(85,18,224,.35); background:rgba(85,18,224,.04); }
.spinoff-box.result{ border:1px solid rgba(85,18,224,.25); background:rgba(85,18,224,.05); }
.spinoff-box .so-head{ font-family:var(--f-display); font-weight:700; letter-spacing:-.02em;
  font-size:21px; line-height:1.15; margin:8px 0 12px; }
.spinoff-box .so-grid{ display:flex; flex-direction:column; gap:9px; }
.spinoff-box .so-grid > div{ font-family:var(--f-mono); font-size:13px; line-height:1.5; }
.spinoff-box .so-k{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--vi6); margin-bottom:2px; }
.spinoff-box .so-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.link-retry{ color:var(--vi); text-decoration:underline; font-family:var(--f-mono); font-size:13px; }

/* keyword-anchored targeting selects */
.target-selects{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px; }
@media (max-width:760px){ .target-selects{ grid-template-columns:1fr; } }

/* done */
.done-stage{ max-width:560px; margin:0 auto; padding:90px 28px; text-align:center; }
.done-stage .mark{ width:72px; height:78px; margin:0 auto 28px;
  background:linear-gradient(135deg,var(--vi),var(--vi6));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:grid; place-items:center; }
.done-stage .mark svg{ width:30px; height:30px; }
.done-stage h1{ font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; font-size:38px;
  line-height:1; margin:0 0 10px; }
.done-stage .pt{ font-family:var(--f-italic); font-style:italic; color:var(--vi); font-size:24px; margin:0 0 30px; }
.done-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* toast */
.toast{ position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--vd); color:var(--b); font-family:var(--f-mono); font-size:13px;
  padding:13px 22px; border-radius:999px; opacity:0; pointer-events:none; transition:.3s; z-index:60;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.muted{ color:var(--ink2); }
.hide{ display:none !important; }

/* responsive */
@media (max-width:760px){
  .posts-grid{ grid-template-columns:1fr; }
  .bloglist-hero .hexfield{ display:none; }
  .ai-btn{ min-width:100%; }
  .preview-card{ padding:26px 22px; }
  .writer{ padding:32px 18px 170px; }
}