/* WB-236 (وحش بلال 2026-05-13): replaced 28× rgba(167,139,250,*) → rgba(34,197,94,*) for cinema theme. */
/* R68GZ4_PURE_BW (2026-04-28): pure black & white only — 27 tokens swapped. */
/* R68GZ2_CLEAN_GREEN_LEAKS (2026-04-28): swept residual green/purple tokens for true monochrome. 10 tokens swapped. */
/* R68GZ_PURE_MONOCHROME (2026-04-28): pure monochrome — onyx black + ivory cream + white/silver accent only. 66 tokens swapped from R68GY. */
/* R68GY_CLUBROOM_EDITORIAL (2026-04-28): 2026 luxury formula — onyx black + ivory cream + jewel emerald accent. 75 tokens swapped from R68GX. */
/* R68GX_NAVY_WITH_SAGE_ACCENT (2026-04-28): cinema-navy bg + sage accent only on buttons/highlights, 72 tokens swapped from R68GW. */
/* R68GW_DARK_FOREST (2026-04-28): dark forest green theme, 72 tokens swapped from R68GV. */
/* R68GV_OLIVE_BRAND (2026-04-28): olive + cinema-dark theme, 72 tokens swapped from R68GU champagne. */
/* R68GU_EXECUTIVE_LUXE (2026-04-28): midnight-blue + champagne-gold theme, 75 tokens swapped. */
/* ═══════════════════════════════════════════════════════════════════
   Brand Kit — landing page + wizard modal + kit detail overlay
   All classes are .bk-* to avoid collisions with the rest of the app.
   ═══════════════════════════════════════════════════════════════════ */

.bk-page {
  max-width: 1200px; margin: 0 auto; padding: 8px 18px 80px; /* WB-267: padding-top 24→8, kill the nav gap */
}

/* ═══ HERO SECTION ═══ */
.bk-hero {
  text-align: center; padding: 40px 16px 32px;
  background: radial-gradient(ellipse at top, rgba(255,255,255,.18) 0%, transparent 70%);
  border-radius: 20px;
}
.bk-hero-text { margin-bottom: 30px; }
.bk-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: #FFFFFF; margin-bottom: 10px;
}
.bk-hero-title {
  font-size: 34px; font-weight: 900; color: #fff; margin: 0 0 10px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.bk-hero-sub {
  font-size: 15px; color: rgba(255,255,255,.55);
  max-width: 560px; margin: 0 auto;
}

/* Feature cards (3 columns, landing only) */
/* R167b (صمومي 2026-05-06): bumped sizes AGAIN per Bilal "خليهن اكبر
   بعد". Cards are now hero-scale: media slot 4:3 (much taller), icon
   ~2× the previous size, title bumped to display-tier. The grid has
   wider gap + more vertical breathing room so the row feels intentional
   rather than utility-strip. */
.bk-feature-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin: 40px 0;
}
@media (max-width: 720px) { .bk-feature-cards { grid-template-columns: 1fr; } }
.bk-feature-card {
  padding: 0; border-radius: 22px;
  background: rgba(14,8,40,.6);
  border: 1px solid rgba(255,255,255,.22);
  text-align: center;
  overflow: hidden;
  transition: transform .2s, border-color .15s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.bk-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.45);
  box-shadow: 0 18px 44px rgba(0,0,0,0.40);
}
/* Media slot — taller frame so videos and images dominate the card.
   4:3 instead of 16:10 ≈ +33% vertical real estate. */
.bk-feature-media {
  width: 100%;
  aspect-ratio: 4/3;
  background: #0a0418;
  overflow: hidden;
}
.bk-feature-media img,
.bk-feature-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Emoji icon (text mode) — display-scale. Very generous vertical
   breathing room so text-mode cards still feel hero-sized. */
.bk-feature-icon {
  font-size: 96px;
  margin: 56px 0 18px;
  line-height: 1;
}
.bk-feature-title {
  font-size: 24px; font-weight: 800; color: #fff;
  margin: 6px 22px 12px;
  letter-spacing: -0.3px;
}
.bk-feature-desc {
  font-size: 15px; color: rgba(255,255,255,.68);
  line-height: 1.65;
  margin: 0 22px 32px;
}
/* When media renders, the legacy emoji icon below it would double up —
   defense in depth in case any future render path emits both. */
.bk-feature-card .bk-feature-media + .bk-feature-icon { display: none; }
/* Smaller icon + tighter spacing on phones so the card stays balanced
   when stacked vertically. */
@media (max-width: 720px) {
  .bk-feature-icon { font-size: 72px; margin: 36px 0 12px; }
  .bk-feature-title { font-size: 20px; }
}

/* R167d (صمومي 2026-05-06): Overlay variant for media cards. Bilal:
   "خلي الكتابة مو تكون هيج خط فاصل بيها وبين الفديو خليها تكون منسجمة"
   → text + media should feel like one tile, not stacked panels.
   R167d-v2 (صمومي 2026-05-06 same-day): Bilal "الكردات صارن شوية صغار
   و الكتابة دتصير بنص الفديو خلي نجرب نخليها جوة الفديو بس منسجمة وياه".
   Two issues with v1: (1) aspect-ratio 4/3 made the whole card the size
   of just the OLD media slot, dropping ~150px of total height vs the
   old layout; (2) overlay padding 60px-from-top pushed the text into
   the visual middle of short videos. v2 fixes:
     • Card aspect-ratio 4/5 (portrait) so the card has comparable
       vertical real-estate to the old media+text stack.
     • Overlay restricted to the bottom ~28% with a tighter gradient,
       so text never reaches the middle of the frame.
   Only applied when the card actually has media — text-only cards
   keep the centered emoji+title+desc layout. */
.bk-feature-card--media {
  position: relative;
  /* 4/5 portrait — width:height = 4:5, so a 320px-wide card is 400px
     tall (roughly matching the old 4/3 media + ~140px text section). */
  aspect-ratio: 4/5;
  padding: 0;
  overflow: hidden;
  /* Solid black bg shows through any gaps if media fails to load,
     so the card never looks like a broken empty box. */
  background: #000;
}
.bk-feature-media-fill {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* No own border-radius — parent's overflow:hidden + radius does it. */
}
.bk-feature-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Tighter padding from top — text sits in bottom band only, not
     middle of the frame. Was 60px; now 24px gradient run + 22px
     internal padding ≈ ~28% of card height. */
  padding: 24px 22px 22px;
  /* Tighter gradient stops — opaque dark at the very bottom, fully
     transparent by ~70% up. Middle/top of the media stays clean. */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.78) 35%,
    rgba(0,0,0,0.30) 75%,
    transparent 100%
  );
  text-align: right; /* RTL — descriptions read right-to-left */
  z-index: 1;
}
/* Inside the overlay we override the default centered/margin'd
   versions so the text hugs the bottom-right edge consistently. */
.bk-feature-overlay .bk-feature-title {
  font-size: 22px;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}
.bk-feature-overlay .bk-feature-desc {
  font-size: 14px;
  margin: 0;
  color: rgba(255,255,255,0.95);
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
/* Subtle zoom on hover so the tile feels interactive */
.bk-feature-card--media:hover .bk-feature-media-fill {
  transform: scale(1.03);
}
.bk-feature-media-fill { transition: transform .35s ease; }
@media (max-width: 720px) {
  /* On phone keep cards roughly square so they don't grow to full screen */
  .bk-feature-card--media { aspect-ratio: 1/1; }
  .bk-feature-overlay { padding: 20px 16px 16px; }
  .bk-feature-overlay .bk-feature-title { font-size: 19px; }
  .bk-feature-overlay .bk-feature-desc { font-size: 13px; }
}

/* Primary CTA on the landing */
/* R68GZ3_BTN_CONTRAST_FIX (2026-04-28): the white→gold gradient
   inherited from R68GY/Z made `color:#fff` text invisible on the
   white half. Going monochrome Apple-style — solid white button +
   onyx text + inverse onyx cost chip with white digits. */
.bk-start-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 32px; border-radius: 14px;
  background: #FFFFFF;
  color: #0A0A0A; border: none; font-size: 16px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255,255,255,.18);
  transition: transform .12s, box-shadow .15s;
}
.bk-start-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,255,255,.30); }
.bk-start-cost {
  background: #0A0A0A; color: #FFFFFF;
  padding: 4px 12px; border-radius: 14px;
  font-size: 13px; font-weight: 900;
}

/* ═══ GALLERY ═══ */
.bk-gallery { margin-top: 56px; }
.bk-gallery-title {
  font-size: 18px; font-weight: 700; color: rgba(255,255,255,.85);
  margin: 0 0 18px; display: flex; align-items: center; gap: 10px;
}
.bk-gallery-count {
  background: rgba(255,255,255,.25); color: #FFFFFF;
  padding: 2px 10px; border-radius: 12px; font-size: 12px;
}

/* Empty state */
.bk-empty {
  text-align: center; padding: 50px 20px;
  background: rgba(14,8,40,.4); border: 2px dashed rgba(255,255,255,.22);
  border-radius: 16px;
}
.bk-empty-icon { font-size: 56px; opacity: .5; }
.bk-empty-title { font-size: 16px; font-weight: 700; color: #fff; margin: 14px 0 6px; }
.bk-empty-sub { font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 20px; }
/* R68GZ3_BTN_CONTRAST_FIX: same monochrome rule as .bk-start-btn. */
.bk-empty-btn {
  padding: 10px 26px; border-radius: 10px; border: none;
  background: #FFFFFF;
  color: #0A0A0A; font-size: 13px; font-weight: 800; cursor: pointer;
}

/* Kit cards grid */
.bk-gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.bk-kit-card {
  background: rgba(14,8,40,.5); border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.bk-kit-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.bk-kit-cover {
  aspect-ratio: 1/1; position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bk-kit-emoji { font-size: 56px; opacity: .6; }
.bk-kit-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12); border-top-color: #FFFFFF;
  animation: spin .8s linear infinite;
}
.bk-kit-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: rgba(0,0,0,.4);
}
.bk-kit-progress-fill {
  height: 100%; background: linear-gradient(90deg, #FFFFFF, #FFFFFF);
  transition: width .4s ease;
}
.bk-kit-status {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; padding: 3px 10px; border-radius: 20px;
  font-weight: 800;
}
.bk-status-completed { background: rgba(250,250,250,.2); color: #FFFFFF; }
.bk-status-processing { background: rgba(212,212,212,.2); color: #FFFFFF; }
.bk-status-partial { background: rgba(212,212,212,.2); color: #FFFFFF; }
.bk-status-failed { background: rgba(239,68,68,.2); color: #fca5a5; }
.bk-kit-info { padding: 10px 12px; }
.bk-kit-name {
  font-size: 13px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-kit-meta { font-size: 10px; color: rgba(255,255,255,.4); margin-top: 4px; }

/* ═══ MODAL (wizard + detail share base styles) ═══ */
.bk-modal, .bk-detail-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.78); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bk-modal-panel, .bk-detail-panel {
  background: #0A0A0A; border-radius: 16px;
  width: 100%; max-height: 92vh;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.25);
  overflow: hidden;
}
.bk-modal-panel { max-width: 640px; }
.bk-detail-panel { max-width: 900px; }
.bk-modal-header, .bk-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.bk-modal-header h2, .bk-detail-header h2 {
  font-size: 17px; margin: 0; color: #fff;
}
.bk-modal-close {
  background: none; border: none; color: #aaa; font-size: 22px;
  cursor: pointer; padding: 4px 10px;
}
.bk-modal-body {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ═══ WIZARD STEPS ═══ */
.bk-step {
  background: rgba(7,4,24,.6);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 16px;
}
.bk-step-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.bk-step-num {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.3); color: #FFFFFF;
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}
.bk-step-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0; }
.bk-step-hint { font-size: 11px; color: rgba(255,255,255,.45); margin-right: auto; }

/* Upload area
   R150 (صمومي 2026-05-05): polished from the dashed-purple-border look
   per Bilal "رفع الصور شكلها مو حلو مو بروفشنل". Now: solid subtle
   border, gentler gradient backdrop, larger camera glyph in a tinted
   pill, tighter hint text, hover lift. Drag-over state pops with
   purple accent + slight scale. Thumbs become 88×88 with rounded
   corner accent so an existing upload reads as "selected" rather
   than as a small thumb badge. */
.bk-upload-area {
  position: relative;
  border: 1.5px solid rgba(34,197,94,.18);
  border-radius: 14px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(34,197,94,.04), rgba(34,197,94,.02));
  transition: background .18s, border-color .18s, transform .18s;
}
.bk-upload-area:hover {
  border-color: rgba(34,197,94,.32);
  background: linear-gradient(180deg, rgba(34,197,94,.07), rgba(34,197,94,.03));
}
.bk-upload-area.bk-drag-over {
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.6);
  transform: scale(1.005);
}
.bk-upload-cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 26px 14px; cursor: pointer; text-align: center;
  border-radius: 10px;
}
.bk-upload-cta > div:first-child {
  /* Camera glyph wrapped in a tinted pill */
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.28);
  font-size: 26px !important;
  opacity: 1 !important;
}
.bk-upload-title { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: .2px; }
.bk-upload-hint  { font-size: 11px; color: rgba(255,255,255,.50); }
.bk-upload-thumbs {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
  padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.08);
}
.bk-upload-thumbs:empty { display: none; }
.bk-thumb {
  position: relative; width: 88px; height: 88px; border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid rgba(34,197,94,.35);
  background: #000000;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.bk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-thumb.bk-thumb-loading img { opacity: .4; }
.bk-thumb-loader {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
}
.bk-thumb-loader::after {
  content: ''; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2); border-top-color: #FFFFFF;
  animation: spin .7s linear infinite;
}
.bk-thumb-x {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.7); color: #fff;
  border: none; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}

/* R153 (صمومي 2026-05-05): 3-slot upload grid replacing the previous
   big drop-zone-with-inset-thumbs layout. Bilal: "صايرة مربع بنص مربع
   المربع الجبير ما يحتاج و خلي 3 مربعات لان الزبون من حقه يدخل صورة او 3
   صور". Each slot is independently clickable, square aspect-ratio,
   dashed border when empty / solid when filled. The whole grid still
   accepts drag-drop. Visual hint moves below the grid as a single line. */
.bk-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  transition: background .18s, box-shadow .18s;
  padding: 4px;
  border-radius: 14px;
}
.bk-slot-grid--drag {
  background: rgba(34,197,94,.08);
  box-shadow: 0 0 0 2px rgba(34,197,94,.45) inset;
}
.bk-slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  overflow: hidden;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.bk-slot-empty {
  border: 1.5px dashed rgba(34,197,94,.32);
  background: linear-gradient(180deg, rgba(34,197,94,.05), rgba(34,197,94,.02));
  cursor: pointer;
}
.bk-slot-empty:hover {
  border-color: rgba(34,197,94,.60);
  background: linear-gradient(180deg, rgba(34,197,94,.10), rgba(34,197,94,.04));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(34,197,94,.12);
}
.bk-slot-grid--drag .bk-slot-empty {
  border-color: rgba(34,197,94,.65);
  background: rgba(34,197,94,.10);
}
.bk-slot-icon {
  font-size: 26px;
  opacity: .68;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
}
.bk-slot-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.30);
  font-size: 11px; font-weight: 800;
  color: rgba(255,255,255,.85);
}
.bk-slot-filled {
  border: 1.5px solid rgba(34,197,94,.55);
  background: #000;
  cursor: default;
  box-shadow: 0 4px 14px rgba(0,0,0,.30);
}
.bk-slot-filled img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 11px;
  display: block;
}
.bk-slot-loading {
  border: 1.5px solid rgba(34,197,94,.40);
  background: #000;
  cursor: progress;
}
.bk-slot-loading img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bk-slot-loader {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
  z-index: 1;
}
.bk-slot-loader::after {
  content: '';
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.22);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.bk-slot-x {
  position: absolute; top: 6px; left: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,.78);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, transform .12s;
  z-index: 2;
}
.bk-slot-x:hover {
  background: rgba(220,38,38,.85);
  transform: scale(1.08);
}
.bk-slot-hint {
  font-size: 11px;
  color: rgba(255,255,255,.50);
  text-align: center;
  margin-top: 10px;
  letter-spacing: .2px;
}

/* Form */
.bk-form { display: flex; flex-direction: column; }
.bk-label {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75);
  margin-bottom: 5px;
}
.bk-input, .bk-textarea {
  background: #000000; border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 14px; padding: 10px 13px; border-radius: 10px;
  font-family: inherit;
  direction: rtl; text-align: right; unicode-bidi: plaintext;
  transition: border-color .15s;
}
.bk-input:focus, .bk-textarea:focus {
  outline: none; border-color: rgba(255,255,255,.6);
}
.bk-textarea { resize: vertical; min-height: 60px; }

/* Distribution */
.bk-dist { display: flex; flex-direction: column; gap: 8px; }
.bk-dist-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}
.bk-dist-label { display: flex; align-items: center; gap: 10px; }
.bk-dist-emoji { font-size: 20px; }
.bk-dist-name { font-size: 13px; font-weight: 700; color: #fff; }
.bk-dist-meta { font-size: 10px; color: rgba(255,255,255,.4); }
.bk-dist-controls { display: flex; align-items: center; gap: 6px; }
.bk-dist-btn {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35);
  color: #FFFFFF; font-size: 16px; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bk-dist-btn:hover { background: rgba(255,255,255,.3); }
.bk-dist-value {
  min-width: 28px; text-align: center;
  font-size: 17px; font-weight: 900; color: #fff;
  font-family: 'SF Mono', Menlo, monospace;
}
.bk-dist-presets {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: 12px;
}
.bk-preset-btn {
  padding: 5px 11px; border-radius: 7px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.65); font-size: 11px; cursor: pointer;
}
.bk-preset-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Style grid */
.bk-style-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (max-width: 500px) { .bk-style-grid { grid-template-columns: repeat(2, 1fr); } }
.bk-style-card {
  padding: 12px 8px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.03);
  border: 2px solid rgba(255,255,255,.06);
  color: inherit; text-align: center;
  transition: background .15s, border-color .15s;
}
.bk-style-card:hover { background: rgba(255,255,255,.08); }
.bk-style-card.bk-style-active {
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.14));
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 0 14px rgba(255,255,255,.25);
}
.bk-style-emoji { font-size: 24px; }
.bk-style-name { font-size: 12px; font-weight: 800; color: #fff; margin-top: 3px; }
.bk-style-desc { font-size: 9px; color: rgba(255,255,255,.5); margin-top: 2px; line-height: 1.3; }

/* People toggle (بشر في الصور) */
.bk-people-section {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.bk-people-toggle {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
.bk-people-toggle input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: #FFFFFF;
  flex-shrink: 0; margin-top: 2px;
}
.bk-people-text { display: flex; flex-direction: column; gap: 3px; }
.bk-people-label {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85);
}
.bk-people-hint {
  font-size: 10px; color: rgba(255,255,255,.45);
  line-height: 1.5;
}

/* Creativity Dial (safe / bold / wild) */
.bk-creativity-section {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.bk-creativity-label {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75);
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.bk-creativity-hint {
  font-size: 10px; font-weight: 400; color: rgba(255,255,255,.4);
}
.bk-creativity-dial {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.bk-creativity-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 2px solid rgba(255,255,255,.06);
  color: inherit; cursor: pointer; text-align: center;
  transition: background .15s, border-color .15s;
}
.bk-creativity-btn:hover { background: rgba(255,255,255,.08); }
.bk-creativity-btn.bk-creativity-active {
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.14));
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 0 12px rgba(255,255,255,.2);
}
.bk-cr-emoji { font-size: 22px; }
.bk-cr-name { font-size: 12px; font-weight: 800; color: #fff; }
.bk-cr-desc { font-size: 9px; color: rgba(255,255,255,.5); line-height: 1.3; }

/* ═══════════════════════════════════════════════════════════════════
   Claude 2026-04-18 — Simplified Presets (replaces style + creativity).
   3 big clickable cards: نظيف / طبيعي / جريء. The AI auto-highlights one.
   ═══════════════════════════════════════════════════════════════════ */
.bk-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 4px;
}
.bk-preset-card {
  position: relative;
  padding: 22px 14px 18px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.10);
  background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,.25));
  color: #fff; cursor: pointer;
  transition: border-color .2s, transform .15s, background .2s, box-shadow .2s;
  text-align: center;
}
.bk-preset-card:hover {
  border-color: rgba(255,255,255,.45);
  transform: translateY(-2px);
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
}
.bk-preset-card.bk-preset-active {
  border-color: #FFFFFF;
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(79,70,229,.12));
  box-shadow: 0 0 0 2px rgba(255,255,255,.28), 0 8px 24px rgba(80,20,180,.32);
}
.bk-preset-card.bk-preset-active::after {
  content: '✓';
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; line-height: 22px;
  background: #FFFFFF; color: #fff; border-radius: 50%;
  font-size: 12px; font-weight: 800;
}
.bk-preset-emoji { font-size: 36px; margin-bottom: 6px; line-height: 1; }
.bk-preset-name { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.bk-preset-desc { font-size: 11px; color: rgba(255,255,255,.55); line-height: 1.5; }
.bk-preset-tag {
  display: inline-block; margin-top: 4px;
  font-size: 9px; font-weight: 700;
  letter-spacing: .5px;
  color: rgba(255,255,255,.85);
}

/* ─── Distribution section (restored full layout per user feedback) ─── */
.bk-dist-section {
  margin-top: 18px; padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
.bk-dist-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.bk-dist-title {
  font-size: 13px; font-weight: 700; color: #fff;
}
.bk-dist-hint {
  font-size: 12px; font-weight: 700; color: #FAFAFA;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(250,250,250,.08);
  border: 1px solid rgba(250,250,250,.22);
}

@media (max-width: 560px) {
  .bk-preset-grid { grid-template-columns: 1fr; gap: 8px; }
  .bk-preset-card { padding: 14px 12px 12px; }
  .bk-preset-emoji { font-size: 28px; }
  .bk-preset-name { font-size: 14px; margin-bottom: 3px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Claude 2026-04-18 Phase-3 — AI Creative Director panel.
   Appears between Upload and Info. Shows what Claude Vision understood
   from the uploaded images + the 9-scene campaign plan it picked.
   ═══════════════════════════════════════════════════════════════════ */
.bk-ai-panel {
  margin: 14px 0; padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(79,70,229,.04));
  border-radius: 14px;
}
.bk-ai-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.bk-ai-icon { font-size: 22px; }
.bk-ai-title {
  font-size: 15px; font-weight: 800; color: #fff; margin: 0;
}
.bk-ai-loading {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.72); font-size: 13px; padding: 12px 2px;
}
.bk-ai-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.2);
  border-top-color: #FAFAFA;
  animation: bkAiSpin 0.8s linear infinite;
}
@keyframes bkAiSpin { to { transform: rotate(360deg); } }
.bk-ai-result { padding: 4px 0; }
.bk-ai-ok {
  font-size: 11px; font-weight: 700; color: #FFFFFF;
  background: rgba(134,239,172,.08);
  padding: 4px 10px; border-radius: 6px;
  display: inline-block; margin-bottom: 10px;
  border: 1px solid rgba(134,239,172,.2);
}
.bk-ai-row {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13px; padding: 5px 0;
  border-bottom: 1px dashed rgba(255,255,255,.05);
}
.bk-ai-row:last-child { border-bottom: none; }
.bk-ai-label {
  flex: 0 0 85px; color: rgba(255,255,255,.55);
  font-weight: 600; font-size: 12px;
}
.bk-ai-val {
  flex: 1; color: #fff; line-height: 1.55;
}
.bk-ai-plan .bk-ai-val {
  font-style: italic; color: rgba(255,255,255,.95);
}
.bk-ai-tag {
  display: inline-block; margin-inline-start: 8px;
  background: rgba(255,255,255,.15);
  color: #FFFFFF; padding: 2px 8px; border-radius: 8px;
  font-size: 9px; font-weight: 700; vertical-align: middle;
  border: 1px solid rgba(255,255,255,.3);
}
.bk-ai-chip {
  display: inline-block; width: 20px; height: 20px;
  border-radius: 6px; margin: 0 2px;
  border: 1.5px solid rgba(255,255,255,.25);
  vertical-align: middle;
}
.bk-ai-dist {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 6px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.bk-ai-pill {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  color: #FFFFFF; font-size: 11px; font-weight: 700;
  padding: 5px 11px; border-radius: 16px;
}
.bk-ai-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap; gap: 8px;
}
.bk-ai-hint {
  font-size: 11px; color: rgba(255,255,255,.45);
}
.bk-ai-redo, .bk-ai-retry {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.4);
  color: #FFFFFF; padding: 5px 12px; font-size: 11px;
  font-weight: 700; border-radius: 8px; cursor: pointer;
}
.bk-ai-redo:hover, .bk-ai-retry:hover {
  background: rgba(255,255,255,.3);
}
.bk-ai-error {
  display: flex; align-items: center; gap: 12px;
  color: #fca5a5; font-size: 13px; padding: 8px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Claude 2026-04-18 Phase-2 — Brand Library (saved profiles strip).
   Shown at the top of the wizard modal when the user has saved profiles.
   ═══════════════════════════════════════════════════════════════════ */
.bk-library-strip {
  padding: 12px 0 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.05);
  margin-bottom: 10px;
}
.bk-library-chips {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 0 14px;
}
.bk-library-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; cursor: pointer; position: relative;
  max-width: 260px; min-width: 180px;
  transition: background .15s, border-color .15s, transform .12s;
}
.bk-library-chip:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.48);
  transform: translateY(-1px);
}
.bk-library-chip img {
  width: 36px; height: 36px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0;
}
.bk-chip-empty {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.bk-chip-body { text-align: right; flex: 1; min-width: 0; }
.bk-chip-name { font-size: 13px; font-weight: 700; color: #fff; }
.bk-chip-sub {
  font-size: 10px; color: rgba(255,255,255,.55);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-chip-del {
  background: rgba(248,113,113,.15);
  border: 1px solid rgba(248,113,113,.3);
  color: #fca5a5; width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
.bk-chip-del:hover { background: rgba(248,113,113,.3); }

.bk-save-profile-btn {
  margin-inline-start: auto;
  background: rgba(250,250,250,.12);
  border: 1px solid rgba(250,250,250,.32);
  color: #FFFFFF; padding: 5px 12px;
  font-size: 11px; font-weight: 700; border-radius: 8px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.bk-save-profile-btn:hover {
  background: rgba(250,250,250,.22);
  border-color: rgba(250,250,250,.52);
}

/* ═══════════════════════════════════════════════════════════════════
   Claude 2026-04-18 Phase-1 — Pro directive section.
   Brand voice + Campaign intent + Seasonal theme + Palette picker.
   ═══════════════════════════════════════════════════════════════════ */
.bk-pro-section {
  margin-top: 16px; padding: 14px 14px 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.04));
  border-radius: 12px;
}
.bk-pro-title {
  font-size: 13px; font-weight: 700; color: #fff;
  margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.bk-pro-hint {
  font-size: 10px; font-weight: 500; color: rgba(255,255,255,.5);
}
.bk-pro-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.bk-pro-label {
  flex: 0 0 130px; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.75);
}
.bk-pro-select {
  flex: 1; padding: 7px 12px; border-radius: 8px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12);
  color: #fff; font-size: 12px; font-family: inherit;
  cursor: pointer;
}
.bk-pro-select:focus { outline: none; border-color: rgba(255,255,255,.55); }
.bk-pro-palette-row { flex-direction: column; align-items: stretch; }
.bk-pro-palette-row .bk-pro-label { flex: unset; margin-bottom: 6px; }
.bk-pro-palette {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.bk-pal-swatch {
  width: 36px; height: 36px; border-radius: 8px;
  border: 2px solid rgba(255,255,255,.15); padding: 0;
  cursor: pointer; background: transparent;
}
.bk-pal-swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: 6px; }
.bk-pal-swatch::-webkit-color-swatch { border: none; border-radius: 6px; }
.bk-pal-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,.7);
  padding: 4px 10px; border-radius: 6px;
  background: rgba(255,255,255,.04); cursor: pointer;
  margin-right: auto;
}
.bk-pal-toggle input { accent-color: #FFFFFF; }

/* Arabic text */
.bk-text-section {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.bk-checkbox {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 13px; color: rgba(255,255,255,.75);
}
.bk-checkbox input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: #FFFFFF;
}
.bk-text-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.bk-text-row label {
  display: block; font-size: 12px; font-weight: 700; margin-bottom: 5px;
  color: rgba(255,255,255,.7);
}
.bk-text-hint { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 3px; }
.bk-suggest-btn {
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.15));
  border: 1px solid rgba(255,255,255,.4);
  color: #FFFFFF; padding: 9px 16px; border-radius: 9px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  align-self: flex-start;
}
.bk-suggest-btn:hover { filter: brightness(1.15); }

/* Modal footer (wizard submit bar) */
.bk-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.3);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bk-gen-summary { font-size: 11px; color: rgba(255,255,255,.55); flex: 1; min-width: 0; }
/* R68GZ3_BTN_CONTRAST_FIX: same monochrome rule. */
.bk-gen-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px; border-radius: 10px;
  background: #FFFFFF;
  color: #0A0A0A; border: none; font-size: 13px; font-weight: 800;
  cursor: pointer; white-space: nowrap;
}
.bk-gen-btn:hover:not(:disabled) { filter: brightness(.92); }
.bk-gen-btn:disabled { opacity: .5; cursor: not-allowed; }
.bk-gen-cost {
  background: #0A0A0A; color: #FFFFFF;
  padding: 3px 10px; border-radius: 14px;
  font-size: 12px; font-weight: 900;
}

/* ═══ DETAIL (9-image overlay) ═══ */
.bk-detail-meta {
  font-size: 11px; color: rgba(255,255,255,.5); margin-top: 4px;
}
.bk-detail-progress { padding: 12px 22px; }
.bk-progress-bar {
  height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden;
}
.bk-progress-fill {
  height: 100%; background: linear-gradient(90deg, #FFFFFF, #FFFFFF);
  transition: width .4s ease;
}
.bk-progress-text {
  font-size: 11px; color: rgba(255,255,255,.55);
  margin-top: 6px; text-align: center;
}
/* Sectioned detail view — one row per content type, each with its own
   uniform aspect ratio so nothing overlaps. */
.bk-detail-sections {
  flex: 1; overflow-y: auto; padding: 14px 22px;
  display: flex; flex-direction: column; gap: 22px;
}
.bk-detail-section {}
.bk-detail-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.bk-detail-section-title {
  font-size: 13px; font-weight: 800; color: rgba(255,255,255,.85);
}
.bk-detail-section-count {
  font-size: 10px; color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.05); padding: 2px 8px; border-radius: 10px;
}
.bk-detail-row {
  display: grid; gap: 10px; align-items: start;
}
/* Posts: square — 3 per row */
.bk-detail-section--post .bk-detail-row { grid-template-columns: repeat(3, 1fr); }
/* Stories & Reels: vertical — 3 per row so they fit nicely too */
.bk-detail-section--story .bk-detail-row,
.bk-detail-section--reel  .bk-detail-row { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
  .bk-detail-section--post .bk-detail-row { grid-template-columns: repeat(2, 1fr); }
  .bk-detail-section--story .bk-detail-row,
  .bk-detail-section--reel  .bk-detail-row { grid-template-columns: repeat(2, 1fr); }
}

.bk-detail-cell {
  position: relative; border-radius: 10px; overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  min-height: 120px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.bk-detail-cell:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.bk-detail-cell .bk-cell-img,
.bk-detail-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #0A0A0A;
}
.bk-cell-loader {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.1); border-top-color: #FFFFFF;
  animation: spin .8s linear infinite;
}
.bk-cell-badge {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 9px; padding: 3px 8px; border-radius: 10px;
  font-weight: 800; z-index: 2;
}
.bk-cell-actions {
  position: absolute; bottom: 6px; left: 6px;
  display: flex; gap: 6px; opacity: 0;
  transition: opacity .15s;
  z-index: 2;
}
.bk-detail-cell:hover .bk-cell-actions { opacity: 1; }
.bk-cell-btn {
  background: rgba(0,0,0,.75); color: #fff;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; text-decoration: none;
  padding: 0;
}
.bk-cell-btn:hover { background: rgba(255,255,255,.85); }
/* Pro action variants — color-coded so they're distinguishable at a glance */
.bk-cell-btn--reroll  { background: rgba(250,250,250,.75); }
.bk-cell-btn--reroll:hover  { background: rgba(22,163,74,.95); }
.bk-cell-btn--refine  { background: rgba(59,130,246,.75); }
.bk-cell-btn--refine:hover  { background: rgba(37,99,235,.95); }
.bk-cell-btn--animate { background: rgba(234,88,12,.80); }
.bk-cell-btn--animate:hover { background: rgba(194,65,12,.95); }
/* On mobile, always show actions (no hover). */
@media (hover: none) {
  .bk-cell-actions { opacity: 1; }
}

/* ═══ LIGHTBOX (full-size image view) ═══ */
.bk-lightbox {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(0,0,0,.94); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; flex-direction: column; gap: 18px;
}
.bk-lightbox img {
  max-width: 100%; max-height: 80vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.bk-lightbox-close {
  position: absolute; top: 18px; left: 18px;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bk-lightbox-close:hover { background: rgba(255,255,255,.2); }
.bk-lightbox-actions {
  display: flex; align-items: center; gap: 14px;
}
.bk-lightbox-btn {
  background: linear-gradient(135deg, #FFFFFF, #D4D4D4);
  color: #0A0A0A; padding: 10px 22px; border-radius: 10px;
  font-size: 13px; font-weight: 800; text-decoration: none;
  border: none; cursor: pointer;
}
.bk-lightbox-meta {
  color: rgba(255,255,255,.6); font-size: 12px;
  text-transform: uppercase; letter-spacing: 2px;
}

/* Detail footer */
.bk-detail-footer {
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.3);
  display: flex; justify-content: center;
}
.bk-download-btn {
  padding: 11px 26px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #FFFFFF, #D4D4D4);
  color: #0A0A0A; font-size: 13px; font-weight: 800; cursor: pointer;
}
.bk-download-btn:disabled {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.3); cursor: not-allowed;
}


/* ════════════════════════════════════════════════════════════════════════
   WB-237 BRANDKIT-BOLDER (وحش بلال 2026-05-13):
   Bolder cinema theme + green generate button. Appended last so it
   wins the cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* ── PRIMARY GENERATE BUTTON ──────────────────────────────────────── */
.bk-gen-btn {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: #03110a !important;
  box-shadow: 0 6px 22px rgba(34, 197, 94, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.10) inset !important;
}
.bk-gen-btn:hover:not(:disabled) {
  filter: none !important;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.60),
              0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;
  transform: translateY(-1px);
}
.bk-gen-cost {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #03110a !important;
}

/* ── UPLOAD BOXES — more visible green border ─────────────────────── */
.bk-image-slot,
.bk-image-upload-slot,
[class*="bk-upload"][class*="slot"],
[class*="bk-image"][class*="slot"] {
  border-color: rgba(134, 239, 172, 0.40) !important;
}
[class*="bk-image"][class*="slot"]:hover,
.bk-image-slot:hover {
  border-color: rgba(134, 239, 172, 0.65) !important;
  background: rgba(34, 197, 94, 0.06) !important;
}
.bk-image-slot.has-image,
.bk-image-slot--filled {
  border-color: rgba(134, 239, 172, 0.55) !important;
}

/* ── NUMBER CIRCLES (1, 2, 3 / step numbers) ──────────────────────── */
[class*="bk-step-num"],
[class*="bk-num"],
[class*="step-circle"],
.bk-section-num,
.bk-image-num,
[class*="bk-image"][class*="num"] {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #03110a !important;
  border-color: rgba(134, 239, 172, 0.50) !important;
}

/* ── "إضافة شخصية" chip + similar pills ───────────────────────────── */
[class*="bk-character"][class*="add"],
[class*="bk-add-character"],
[class*="character-pill"] {
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: rgba(134, 239, 172, 0.45) !important;
  color: #86efac !important;
}

/* ── INPUT FIELDS — green focus ───────────────────────────────────── */
.bk-input:focus,
.bk-textarea:focus,
input.bk-input:focus,
textarea.bk-textarea:focus {
  border-color: rgba(134, 239, 172, 0.60) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}

/* ── SECTION CARDS / WRAPS — slight green wash ────────────────────── */
.bk-section,
.bk-step-card,
[class*="bk-step"] {
  border-color: rgba(134, 239, 172, 0.18) !important;
}

/* ── "احفظ كملف علامة" (Save) button — outline cinema ─────────────── */
[class*="bk-save"],
[class*="save-as-kit"],
button[onclick*="saveAs"] {
  border-color: rgba(134, 239, 172, 0.45) !important;
  color: #86efac !important;
}
[class*="bk-save"]:hover,
[class*="save-as-kit"]:hover {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(134, 239, 172, 0.70) !important;
}

/* ── FOOTER summary chip ──────────────────────────────────────────── */
.bk-gen-summary {
  color: rgba(134, 239, 172, 0.85) !important;
}

/* ── Modal header accent ──────────────────────────────────────────── */
.bk-modal-header,
.bk-detail-header {
  border-bottom-color: rgba(134, 239, 172, 0.20) !important;
}

/* ── BOOST any rgba(34,197,94, <0.20) backgrounds for visibility ─── */
/* These were converted from purple .04/.05/.08 alphas which look invisible
   on the dark bg. Lift the floor to 0.10 for actual readability. */
[class*="bk-"][style*="rgba(34,197,94,0.04"],
[class*="bk-"][style*="rgba(34,197,94,.04"] {
  background-color: rgba(34, 197, 94, 0.10) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   WB-241 CP-PILL-BADGES (وحش بلال 2026-05-13):
   Embed Zain Z174's cp-pill style locally so the brandkit character
   picker shows the same gold PRO + purple NORMAL badges.
   ════════════════════════════════════════════════════════════════════════ */
.cp-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.6px;
  text-transform: uppercase; border: none;
  overflow: hidden; pointer-events: none;
}
.cp-pill--pro {
  color: #1a0f00;
  background: linear-gradient(110deg, #b07e1c 0%, #f6c565 22%, #fff7d2 35%,
              #f6c565 48%, #b07e1c 70%, #f6c565 92%, #b07e1c 100%);
  background-size: 280% 100%;
  animation: cpShineGold 4.5s linear infinite;
  box-shadow: 0 4px 14px rgba(200,162,78,0.55),
              inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -1px 0 rgba(120,80,0,0.45);
  text-shadow: 0 1px 0 rgba(255,247,210,0.6);
}
.cp-pill--normal {
  color: #fff;
  background: linear-gradient(110deg, #5b21b6 0%, #a78bfa 22%, #ede9fe 35%,
              #a78bfa 48%, #5b21b6 70%, #a78bfa 92%, #5b21b6 100%);
  background-size: 280% 100%;
  animation: cpShinePurple 5s linear infinite;
  box-shadow: 0 4px 14px rgba(124,58,237,0.5),
              inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -1px 0 rgba(60,30,130,0.45);
  text-shadow: 0 1px 0 rgba(50,20,110,0.45);
}
.cp-pill-verified {
  width: 13px; height: 13px;
  color: #1877F2;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1.5px rgba(0,0,0,0.35));
  flex-shrink: 0;
}
@keyframes cpShineGold   { 0% { background-position: 0% 50%; } 100% { background-position: 280% 50%; } }
@keyframes cpShinePurple { 0% { background-position: 0% 50%; } 100% { background-position: 280% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .cp-pill--pro, .cp-pill--normal { animation: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   WB-256 GEN-BTN-PARTICLES (وحش بلال 2026-05-14):
   Particle plumbing for the brandkit generate button (#bkGenBtn).
   Geometry-neutral — only position/isolation/overflow + z-index for
   the label. NO size/padding/shadow changes (Bilal: "بدون مايكبر حجمهن").
   Reuses the global .wb167-particle CSS from landing.css.
   ════════════════════════════════════════════════════════════════════════ */
.bk-gen-btn, #bkGenBtn {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}
.bk-gen-btn > span, .bk-gen-btn > svg, .bk-gen-btn > i,
#bkGenBtn > span, #bkGenBtn > svg, #bkGenBtn > i {
  position: relative;
  z-index: 3;
}
.bk-gen-btn .wb167-particle, #bkGenBtn .wb167-particle {
  animation-name: wb256-rise-short !important;
  bottom: -3px !important;
}
.bk-gen-btn .wb167-particle.spark, #bkGenBtn .wb167-particle.spark {
  width: 5px !important;
  height: 5px !important;
}

@keyframes wb256-rise-short {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  10%  { opacity: var(--p-peak, 0.55);
         transform: translate(calc(var(--p-drift, 0px) * 0.2), -6px) scale(1); }
  60%  { opacity: var(--p-peak, 0.55); }
  100% { transform: translate(var(--p-drift, 0px), -22px) scale(0.5); opacity: 0; }
}


/* ════════════════════════════════════════════════════════════════════════
   WB-257 BK-START-BTN-CINEMA (وحش بلال 2026-05-14):
   The landing-page "✨ ابدأ الآن" entry CTA (.bk-start-btn) was still
   white — WB-237 only recolored .bk-gen-btn (the wizard generate btn).
   Green gradient + cinema text + WB-167 particle plumbing. The button's
   padding/size are NOT changed.
   ════════════════════════════════════════════════════════════════════════ */
.bk-start-btn {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: #03110a !important;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.40) !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}
.bk-start-btn:hover {
  box-shadow: 0 12px 32px rgba(34, 197, 94, 0.55) !important;
}
.bk-start-cost {
  background: rgba(0, 0, 0, 0.22) !important;
  color: #03110a !important;
}
.bk-start-btn > span, .bk-start-btn > svg, .bk-start-btn > i {
  position: relative;
  z-index: 3;
}
.bk-start-btn .wb167-particle {
  animation-name: wb256-rise-short !important;
  bottom: -3px !important;
}
.bk-start-btn .wb167-particle.spark {
  width: 5px !important;
  height: 5px !important;
}


/* ════════════════════════════════════════════════════════════════════════
   WB-258 PARTICLE-BASE-CSS (وحش بلال 2026-05-14):
   WB-256/257 added the particle plumbing (wb256-rise-short keyframes, the
   scoped animation-name override, the JS injectors) but the BASE
   `.wb167-particle` rule — position/size/background/glow/rise — lives
   ONLY in landing.css, which this page does NOT load. So the injected
   <span class="wb167-particle"> spans were invisible AND, being
   position:static, stayed in the button's inline-flex flow → 14 phantom
   `gap` steps → the button rendered way too wide. This rule fixes both:
   the particles render, and position:absolute pulls them out of flow so
   the button returns to its true size. position/z-index are !important
   so they beat the WB-256/257 `> span` rules (which also match these
   spans, since particles are direct <span> children of the button).
   ════════════════════════════════════════════════════════════════════════ */
.wb167-particle {
  position: absolute !important;
  bottom: -6px;
  width: var(--p-size, 4px);
  height: var(--p-size, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #d1fae5 0%, #34d399 45%, transparent 75%);
  box-shadow: 0 0 8px #34d399;
  animation: wb256-rise-short var(--p-dur, 12s) linear infinite;
  animation-delay: var(--p-delay, 0s);
  opacity: 0;
  pointer-events: none;
  z-index: 1 !important;
}
.wb167-particle.spark {
  background: transparent;
  width: var(--p-size, 8px);
  height: var(--p-size, 8px);
  box-shadow: none;
}
.wb167-particle.spark::before,
.wb167-particle.spark::after {
  content: '';
  position: absolute !important;
  background: #34d399;
}
.wb167-particle.spark::before {
  top: 50%; left: 0; width: 100%; height: 1.4px;
  transform: translateY(-50%);
  box-shadow: 0 0 5px #34d399;
  border-radius: 1px;
}
.wb167-particle.spark::after {
  left: 50%; top: 0; width: 1.4px; height: 100%;
  transform: translateX(-50%);
  box-shadow: 0 0 5px #34d399;
  border-radius: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .wb167-particle { animation: none !important; opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════
   WB-259 BRANDKIT-BENTO (وحش بلال 2026-05-14):
   /create/brandkit hero redesigned to the "بنتو برو" direction
   Bilal picked from the mockups. Scoped under .bk-bento — the old
   .bk-hero / .bk-feature-* rules above are intact but no longer have
   matching elements. NO wired functionality touched (see template).
   WB-260 (وحش بلال 2026-05-14): grid reshaped to MATCH the
   /create/brand-identity bento exactly (Bilal: "سوي تصميم الحزمة
   البصرية نفس الهوية البصرية") — hero is now a full-width strip,
   card 1 is the big 2×2 main tile, cards 2+3 span 2, CTA centred.
   WB-261 (وحش بلال 2026-05-14): every value made 1:1 IDENTICAL to the
   .bi-bento-* block in create_brand_identity.html (Bilal: "ما صارت
   نفسها سويها نفسها") — eyebrow/h1/sub/card sizing, the corner badge
   (dim number → green pill, card 1 only), media flex-end, the h1 emoji
   dropped, and .bk-page max-width 1100→1200 so the bento width matches.
   ══════════════════════════════════════════════════════════════ */
.bk-bento { margin: 0 0 4px; padding: 0 0 4px; position: relative; } /* WB-267: top margin+padding → 0 */
.bk-bento-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.bk-bento-tile {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(134, 239, 172, 0.13);
  border-radius: 20px; padding: 26px;
  position: relative; overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.bk-bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.05);
}
.bk-bento-hero {
  grid-column: span 4;
  padding: 32px 34px;
  background:
    radial-gradient(520px 300px at 12% 0%, rgba(34,197,94,.15), transparent 70%),
    rgba(255,255,255,.035);
}
.bk-bento-glow {
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,.3), transparent 70%);
  top: -90px; inset-inline-end: -60px; pointer-events: none;
}
.bk-bento-eyebrow {
  font-family: 'Tajawal', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .24em;
  color: #5eead4; margin-bottom: 13px;
}
.bk-bento-h1 {
  font-family: 'Tajawal', sans-serif; font-weight: 900;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.2;
  letter-spacing: -1px; color: #eafff3; margin: 0;
}
.bk-bento-grad {
  background: linear-gradient(120deg, #86efac, #22c55e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bk-bento-sub {
  margin: 12px 0 0; font-size: 14px; line-height: 1.85;
  color: #9db9aa; max-width: 620px;
}
.bk-bento-card {
  /* WB-262 (وحش بلال 2026-05-14): min-height 150→230 — Bilal wanted the
     bento cards a bit taller ("تكبرهن بالارتفاع"). Mirrored in the
     brand-identity .bi-bento-card block. */
  display: flex; flex-direction: column; min-height: 230px;
}
.bk-bento-card-1 {
  grid-column: span 2; grid-row: span 2; min-height: 400px; /* WB-262: 280→400 */
  justify-content: flex-end;
  background: linear-gradient(155deg, rgba(34,197,94,.15), rgba(15,118,110,.07));
}
.bk-bento-card-2 { grid-column: span 2; }
.bk-bento-card-3 { grid-column: span 2; }
.bk-bento-card-1 .bk-bento-card-icon { width: 64px; height: 64px; font-size: 32px; }
.bk-bento-card-1 .bk-bento-card-title { font-size: 24px; }
.bk-bento-tag {
  position: absolute; top: 18px; inset-inline-end: 20px;
  font-family: 'Tajawal', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; color: #86efac;
  background: rgba(34,197,94,.14); padding: 4px 9px; border-radius: 7px;
}
.bk-bento-card-icon {
  width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; font-size: 27px;
  background: rgba(34, 197, 94, 0.13);
  border: 1px solid rgba(34, 197, 94, 0.26);
  margin-bottom: 16px;
}
.bk-bento-card-title {
  font-family: 'Tajawal', sans-serif; font-weight: 800; font-size: 19px;
  color: #eafff3; margin: 0 0 8px; letter-spacing: -.2px;
}
.bk-bento-card-desc {
  font-size: 13px; color: #88a796; line-height: 1.8; margin: 0;
}
.bk-bento-card--media { padding: 0; justify-content: flex-end; }
/* WB-264 (وحش بلال 2026-05-14): a media card takes the media's OWN aspect
   ratio so the uploaded image/video fills the tile edge-to-edge with no
   letterbox — Bilal: "سوي قياس الفديو 3:4 و الصور 16:9 حتة يترس الكارد
   كامل". cards 2 & 3 take the ratio directly (align-self:start so the
   aspect ratio — not the grid row track — drives the height). card 1 is
   the big 2×2 stretch tile so it keeps stretching + object-fit:cover. */
/* WB-266 (وحش بلال 2026-05-14): cards 2 & 3 sit at the EXACT media aspect
   ratio (video 3:4 / image 16:9) at a compact, controlled WIDTH — so
   object-fit:cover fills them with ZERO black bars AND zero crop (Bilal:
   "ما اريد يطلع خطوط سودة بالكارد ولا ينكص"). The fixed width also keeps
   them short ("صغر ارتفاعهن شوية"); justify-self:center centres them in
   the 2-col cell. The big card 1 stays a stretch tile (Bilal chose "أبقي
   الكارد الأول كبير") and just cover-fills — no bars, a slight crop is
   accepted. WB-265's video object-fit:contain rule is dropped — the
   general media-fill `cover` applies everywhere, and since cards 2 & 3
   ARE the media ratio, cover never crops them. */
.bk-bento-card--video {
  aspect-ratio: 3 / 4; width: 290px; max-width: 100%;
  justify-self: center; align-self: start; min-height: 0;
}
.bk-bento-card--image {
  aspect-ratio: 16 / 9; width: 480px; max-width: 100%;
  justify-self: center; align-self: start; min-height: 0;
}
/* card 1 = the big stretch tile — override the --video/--image width +
   justify-self so it keeps spanning its 2×2 area and cover-fills it. */
.bk-bento-card-1.bk-bento-card--media {
  aspect-ratio: auto; width: auto; max-width: none;
  justify-self: stretch; align-self: stretch; min-height: 400px;
}
.bk-bento-media-fill {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* WB-262→WB-264 (وحش بلال 2026-05-14): object-fit is COVER again so the
     upload fills the whole tile with no gap ("حتة يترس الكارد كامل").
     WB-262 used `contain` to avoid cropping; WB-264 instead makes the
     CARD take the media's aspect ratio (video 3:4 / image 16:9 — see
     .bk-bento-card--video/--image above) so `cover` needn't crop. The
     dark bg stays as a fallback while the media loads. */
  object-fit: cover; display: block; z-index: 0;
  background: #0a100c;
}
.bk-bento-overlay {
  position: relative; z-index: 2; width: 100%;
  padding: 54px 22px 22px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 55%, rgba(0,0,0,.86));
}
.bk-bento-card--media .bk-bento-card-desc { color: rgba(255,255,255,.82); }
/* CTA tile = the real <button class="bk-start-btn bk-bento-cta">. Green
   bg + particle plumbing come from WB-257/258 (!important); .bk-bento-cta
   only sets the bento LAYOUT (full-width tile, space-between). */
.bk-bento-cta {
  grid-column: span 4;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; width: 100%; padding: 20px 32px; border-radius: 20px;
  font-family: 'Tajawal', sans-serif; font-weight: 900; font-size: 21px;
}
.bk-bento-cta:hover { transform: translateY(-3px); }
.bk-bento-cta .bk-start-cost { font-size: 15px; font-weight: 800; }
@media (max-width: 880px) {
  .bk-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bk-bento-hero, .bk-bento-card-1, .bk-bento-card-2, .bk-bento-card-3,
  .bk-bento-cta { grid-column: span 2; }
  .bk-bento-card-1 { grid-row: auto; }
}
@media (max-width: 520px) {
  .bk-bento-grid { grid-template-columns: 1fr; }
  .bk-bento-hero, .bk-bento-card-1, .bk-bento-card-2,
  .bk-bento-card-3, .bk-bento-cta { grid-column: span 1; }
}