/* ============================================================================
   ServeHub · Website builder — split editor + live preview
   "Rugged trade-built" look, imported from the Claude Design servehub project.

   Everything here is scoped under the `.wb` wrapper (never :root / bare element
   selectors) so the design system's tokens + hard-edged primitives cannot leak
   into the Tailwind-based rest of the dashboard. dashboard.css already @imports
   Barlow Condensed / Barlow / JetBrains Mono, so no font import is needed here.

   Loaded page-only via `content_for :head` in app/views/website_pages/show.
   The live preview is a REAL server-rendered iframe (public/websites templates);
   the mockup's client-side `.site*` renderer is intentionally not ported.
   ============================================================================ */

/* ---- design tokens (scoped, not :root) ------------------------------------ */
.wb{
  --paper:#f3efe6; --paper-2:#ece6d8; --paper-3:#e4ddcc; --white:#ffffff;
  --ink:#17191d; --ink-2:#22262c; --ink-3:#2b3038; --ink-soft:#3a3f47;
  --steel:#6a7079; --steel-2:#8b9099; --steel-3:#aab0b8;
  --line:#d9d3c4; --line-2:#cfc8b6; --line-ink:#2e333b;
  --blue:#0ea5e9; --blue-deep:#0b6fa3; --blue-press:#0284c7; --blue-ink:#063f5c; --blue-wash:#e3f1f9;
  --amber:#f5a31f; --green:#18794e; --green-wash:#e2efe7; --red:#c14034; --red-wash:#f6e3e0;
  --shadow:3px 3px 0 var(--ink); --shadow-sm:2px 2px 0 var(--ink);
  --r:14px; --r-sm:10px; --topbar:68px;
  --wb-rail-w:186px; --wb-preview-w:452px;

  color:var(--ink);
  font-family:"Barlow",system-ui,sans-serif;
  display:flex;flex-direction:column;
  /* Bound to the viewport so the editor panel and the (tall, scaled) preview
     scroll INTERNALLY instead of stretching the whole page to the site height. */
  height:calc(100vh - 118px);
  min-height:560px;
  -webkit-font-smoothing:antialiased;
}
.wb *{box-sizing:border-box}
.wb h1,.wb h2,.wb h3,.wb h4{font-family:"Barlow Condensed",sans-serif;font-weight:800;line-height:1;letter-spacing:-.005em;margin:0}
.wb .mono{font-family:"JetBrains Mono",monospace}

/* ---- primitives (scoped subset of dash.css) ------------------------------- */
.wb .btn{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 17px;border:2px solid var(--ink);border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);cursor:pointer;text-decoration:none;
  box-shadow:var(--shadow);transition:transform .05s,box-shadow .05s;white-space:nowrap;
}
.wb .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.wb .btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
.wb .btn-primary{background:var(--blue);color:#04222f}
.wb .btn-ink{background:var(--ink);color:var(--paper)}
.wb .btn-sm{font-size:14px;padding:8px 13px;box-shadow:var(--shadow-sm)}
.wb .btn-sm:active{transform:translate(2px,2px)}
.wb .btn-xs{font-size:13px;padding:6px 11px;border-radius:8px;box-shadow:var(--shadow-sm)}
.wb .btn-xs:active{transform:translate(2px,2px)}
.wb .btn-ghost{background:var(--white);color:var(--ink-soft);box-shadow:none;border-color:var(--line-2)}
.wb .btn-ghost:hover{border-color:var(--ink);color:var(--ink);box-shadow:var(--shadow-sm)}
.wb .btn-ghost:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.wb .btn[disabled]{opacity:.55;cursor:default;pointer-events:none}

.wb .inp,.wb select.inp,.wb textarea.inp{
  width:100%;border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--white);
  padding:11px 13px;font-family:"Barlow",sans-serif;font-size:14.5px;color:var(--ink);
  box-shadow:var(--shadow-sm);transition:.12s;
}
.wb .inp::placeholder{color:var(--steel-2)}
.wb .inp:focus,.wb select.inp:focus,.wb textarea.inp:focus{outline:none;border-color:var(--blue);box-shadow:2px 2px 0 var(--blue-ink)}
.wb textarea.inp{resize:vertical;min-height:96px}
.wb select.inp{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317191d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:38px}

/* toggle switch */
.wb .switch{position:relative;flex:0 0 auto;width:48px;height:28px;cursor:pointer;display:inline-block}
.wb .switch input{position:absolute;opacity:0;width:0;height:0}
.wb .switch .tk{position:absolute;inset:0;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);
  box-shadow:var(--shadow-sm);transition:background .14s}
.wb .switch .tk::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--white);border:2px solid var(--ink);transition:transform .16s cubic-bezier(.34,1.32,.5,1)}
.wb .switch input:checked + .tk{background:var(--blue)}
.wb .switch input:checked + .tk::after{transform:translateX(20px)}

/* ============ PAGE HEADER / PUBLISH BAR ============ */
.wb-top{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:20px}
.wb-top h1{font-size:40px;line-height:.98;text-transform:none}
.wb-top .sub{font-size:14px;color:var(--steel);margin-top:7px;max-width:60ch}
.wb-top-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:wrap}

.wb .status-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  padding:9px 13px;border:2px solid var(--ink);border-radius:var(--r-sm);
  background:var(--green-wash);color:#136a45;box-shadow:var(--shadow-sm);
}
.wb .status-pill .d{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(24,121,78,.18)}
.wb .status-pill.draft{background:var(--paper-2);color:var(--steel)}
.wb .status-pill.draft .d{background:var(--steel);box-shadow:none}

.wb .save-state{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--steel);
  display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.04em}
.wb .save-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
.wb .save-state.saving::before{background:var(--amber);animation:pvpulse 1s ease-in-out infinite}
.wb .save-state.error{color:var(--red)}
.wb .save-state.error::before{background:var(--red)}

.wb .btn.preview-toggle.on{background:var(--ink);color:var(--paper)}
.wb .btn.preview-toggle.on svg{color:var(--blue)}

/* This sheet loads only on /website_page, so widening the shared max-w-7xl layout
   container here is safe and lets the builder (and its preview) use large screens.
   Capped where the desktop preview reaches ~100% scale; degrades gracefully if
   :has() is unsupported (builder just stays at the default width). */
#page-content > .max-w-7xl:has(.wb){max-width:2100px}

/* ============ WORKSPACE GRID ============ */
.wb-work{
  flex:1 1 auto;min-height:0;
  /* Editor caps at a comfortable width but can shrink (min 0 → never overflows a
     narrow desktop); the PREVIEW column absorbs all remaining space, so a bigger
     screen means a bigger, higher-scale live preview. */
  display:grid;grid-template-columns:var(--wb-rail-w) minmax(0,620px) minmax(var(--wb-preview-w),1fr);gap:0;
  border:2px solid var(--ink);border-radius:var(--r);background:var(--white);box-shadow:var(--shadow);overflow:hidden;
  transition:grid-template-columns .34s cubic-bezier(.4,0,.2,1);
}
.wb-work.preview-closed{grid-template-columns:var(--wb-rail-w) minmax(0,1fr) 0px}

/* ---- left tab rail ---- */
.wb-rail{border-right:2px solid var(--ink);background:var(--paper-2);padding:14px 12px;display:flex;flex-direction:column;gap:5px;overflow-y:auto}
.wb-rail .rail-cap{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);padding:4px 10px 8px;display:flex;align-items:center;gap:8px}
.wb-rail .rail-cap::before{content:"";width:14px;height:2px;background:var(--amber)}
.wb-tab{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:2px solid transparent;border-radius:var(--r-sm);
  background:transparent;cursor:pointer;color:var(--ink-soft);text-align:left;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.01em;line-height:1;
  transition:background .13s,color .13s,border-color .13s}
.wb-tab .ico{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;color:var(--steel)}
.wb-tab .ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9}
.wb-tab .lbl{flex:1 1 auto}
.wb-tab:hover{background:var(--paper-3);color:var(--ink)}
.wb-tab:hover .ico{color:var(--ink)}
.wb-tab.active{background:var(--ink);color:var(--paper);border-color:#04222f;box-shadow:2px 2px 0 var(--blue-ink)}
.wb-tab.active .ico{color:var(--blue)}
.wb-tab.ai.active{background:linear-gradient(120deg,#3a1d6e,#5b2ea6 55%,#7c3aed);border-color:#2a0f52}
.wb-tab.ai.active .ico{color:#fff}
.wb-rail .rail-foot{margin-top:auto;padding-top:12px;border-top:2px solid var(--line-2)}
.wb-rail .rail-hint{font-size:11.5px;color:var(--steel);line-height:1.45;padding:2px 10px}

/* ---- editor panel ---- */
.wb-panel{overflow-y:auto;min-width:0;background:var(--white);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;position:relative}
.wb-panel::-webkit-scrollbar{width:9px}
.wb-panel::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px;border:2px solid var(--white)}
.wb-pane{display:none;padding:24px 26px 40px}
.wb-pane.active{display:block;animation:paneIn .22s ease}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pane-head{margin-bottom:20px}
.pane-head h2{font-size:28px;line-height:1;text-transform:none}
.pane-head p{font-size:13.5px;color:var(--steel);margin-top:6px;max-width:60ch}

/* editor section block */
.wb-sec{border:2px solid var(--line-2);border-radius:var(--r);background:var(--white);margin-bottom:18px;overflow:hidden}
.wb-sec-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--paper-2);border-bottom:2px solid var(--line-2);cursor:pointer;user-select:none}
.wb-sec-head .sh-caret{color:var(--steel);transition:transform .2s;flex:0 0 auto}
.wb-sec-head .sh-caret svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4}
.wb-sec.collapsed .sh-caret{transform:rotate(-90deg)}
.wb-sec-head .sh-ico{width:34px;height:34px;flex:0 0 auto;border:2px solid var(--ink);border-radius:9px;display:grid;place-items:center;background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}
.wb-sec-head .sh-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.wb-sec-head .sh-txt{flex:1 1 auto;min-width:0}
.wb-sec-head .sh-txt b{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.01em;line-height:1;display:block}
.wb-sec-head .sh-txt span{font-size:12px;color:var(--steel);display:block;margin-top:3px}
.wb-sec-head .sh-count{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;color:var(--steel);background:var(--white);border:1.5px solid var(--line-2);border-radius:6px;padding:2px 7px}
.wb-sec-body{padding:16px;display:grid;gap:14px}
.wb-sec.collapsed .wb-sec-body{display:none}
.sec-add{margin-left:auto;flex:0 0 auto}

/* repeater card */
.wb .rep-list{display:grid;gap:12px}
.wb .rep{border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--white);box-shadow:var(--shadow-sm);padding:14px;display:grid;gap:11px;position:relative}
.wb .rep-two{display:grid;grid-template-columns:1fr 168px;gap:10px}
.wb .rep-two.even{grid-template-columns:1fr 1fr}
.wb .rep-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:1px}
.wb .rep-del{display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;
  color:var(--red);padding:6px 8px;border-radius:7px;transition:background .12s}
.wb .rep-del:hover{background:var(--red-wash)}
.wb .rep-del svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.wb .rep-empty{font-size:12.5px;color:var(--steel);font-family:"JetBrains Mono",monospace;padding:2px}

/* labelled field cluster */
.wb .f{display:grid;gap:6px}
.wb .f > label,.wb .f .flab{font-family:"Barlow",sans-serif;font-weight:600;font-size:13px;color:var(--ink)}
.wb .f .hint{font-size:11.5px;color:var(--steel);font-family:"JetBrains Mono",monospace}
.wb .f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wb .inp.sm{padding:9px 11px;font-size:13.5px}
.wb textarea.inp.sm{min-height:70px}
.wb .charc{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--steel);text-align:right}
.wb .charc.over{color:var(--red)}

/* ============ AI STRIP ============ */
.wb .ai-strip{border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(120deg,#3a1d6e,#5b2ea6 55%,#7c3aed);box-shadow:var(--shadow);
  margin-bottom:20px;display:flex;align-items:center;gap:16px;padding:16px 18px;color:#fff;flex-wrap:wrap}
.wb .ai-strip .ai-ico{width:44px;height:44px;flex:0 0 auto;border:2px solid rgba(255,255,255,.35);border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.wb .ai-strip .ai-ico svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}
.wb .ai-strip .ai-tx{flex:1 1 240px;min-width:0}
.wb .ai-strip .ai-tx b{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.01em;display:block;line-height:1}
.wb .ai-strip .ai-tx span{font-size:12.5px;color:rgba(255,255,255,.82);display:block;margin-top:4px;line-height:1.4}
.wb .ai-strip .ai-acts{display:flex;gap:9px;flex:0 0 auto;flex-wrap:wrap}
.wb .ai-strip .btn{box-shadow:2px 2px 0 rgba(0,0,0,.4)}
.wb .btn.on-ai{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5)}
.wb .btn.on-ai:hover{background:rgba(255,255,255,.24)}
.wb .btn.ai-primary{background:#fff;color:#4c1d95;border-color:#2a0f52}

/* ============ DESIGN — theme gallery ============ */
.wb .theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}
.wb .theme-card{border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--white);box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden;text-align:left;padding:0;transition:transform .08s,box-shadow .08s}
.wb .theme-card:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.wb .theme-card.active{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash),3px 3px 0 var(--blue-ink)}
.wb .theme-thumb{height:88px;position:relative;overflow:hidden;border-bottom:2px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:10px}
.wb .theme-thumb .tt-bar{height:8px;width:52px;border-radius:3px}
.wb .theme-thumb .tt-h{font-weight:800;line-height:.9;letter-spacing:-.01em;font-size:19px}
.wb .theme-thumb .tt-chip{align-self:flex-start;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 7px;border-radius:20px;color:#fff}
.wb .theme-meta{display:flex;align-items:center;gap:9px;padding:10px 12px}
.wb .theme-meta .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;border:1.5px solid rgba(0,0,0,.25)}
.wb .theme-meta .nm{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.01em;flex:1 1 auto;line-height:1}
.wb .theme-meta .ck{width:20px;height:20px;border-radius:50%;background:var(--blue);color:#04222f;display:none;place-items:center;flex:0 0 auto}
.wb .theme-meta .ck svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:3}
.wb .theme-card.active .ck{display:grid}

/* accent swatches */
.wb .swatch-wrap{display:flex;flex-wrap:wrap;gap:10px 16px;padding-bottom:22px}
.wb .swatch-cell{text-align:center}
.wb .swatch{width:46px;height:46px;border-radius:11px;border:2px solid var(--ink);cursor:pointer;box-shadow:var(--shadow-sm);position:relative;transition:transform .08s}
.wb .swatch:hover{transform:translate(-1px,-1px)}
.wb .swatch.active{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.wb .swatch.active::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.wb .swatch-lab{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--steel);margin-top:6px;text-transform:uppercase;letter-spacing:.04em}

/* hero style option cards */
.wb .opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.wb .opt-card{border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--white);cursor:pointer;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .08s,box-shadow .08s}
.wb .opt-card:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.wb .opt-card.active{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash),2px 2px 0 var(--blue-ink)}
.wb .opt-thumb{height:66px;background:var(--paper-2);border-bottom:2px solid var(--ink);position:relative;overflow:hidden}
.wb .opt-name{padding:8px 10px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.01em}
.wb .hd{position:absolute;inset:8px;display:flex;gap:5px}
.wb .hd .txts{display:flex;flex-direction:column;gap:4px;justify-content:center;flex:1}
.wb .hd .txts b{height:9px;background:var(--ink);border-radius:2px;width:80%}
.wb .hd .txts s{height:5px;background:var(--steel-3);border-radius:2px;width:60%}
.wb .hd .img{background:var(--blue);border-radius:3px;flex:1}
.wb .hd.center{flex-direction:column;align-items:center;justify-content:center}
.wb .hd.center b{height:9px;background:var(--ink);border-radius:2px;width:70%}
.wb .hd.center s{height:5px;background:var(--steel-3);border-radius:2px;width:50%;margin-top:4px}

/* ============ SECTIONS (build your page) ============ */
.wb .sec-list{display:flex;flex-direction:column;gap:9px}
.wb .sec-item{display:flex;align-items:center;gap:13px;padding:12px 14px;border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--white);box-shadow:var(--shadow-sm)}
.wb .sec-item.off{background:var(--paper-2);border-style:dashed;box-shadow:none}
.wb .sec-item .grip{color:var(--steel-2);cursor:grab;flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:6px}
.wb .sec-item .grip:hover{background:var(--paper-2);color:var(--ink)}
.wb .sec-item .grip svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.wb .sec-item .s-ico{width:34px;height:34px;flex:0 0 auto;border:2px solid var(--ink);border-radius:9px;display:grid;place-items:center;background:var(--white);color:var(--ink)}
.wb .sec-item.off .s-ico{background:var(--paper-2);color:var(--steel-2);border-color:var(--line-2)}
.wb .sec-item .s-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.wb .sec-item .s-tx{flex:1 1 auto;min-width:0}
.wb .sec-item .s-tx b{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:18px;line-height:1;display:block}
.wb .sec-item .s-tx span{font-size:12px;color:var(--steel);display:block;margin-top:3px}
.wb .sec-item.opacity-50{opacity:.5;box-shadow:4px 4px 0 var(--blue-ink);border-color:var(--blue)}

/* ============ MEDIA ============ */
.wb .thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.wb .thumb{aspect-ratio:1;border:2px solid var(--ink);border-radius:var(--r-sm);overflow:hidden;position:relative;box-shadow:var(--shadow-sm);background:var(--paper-2)}
.wb .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wb .thumb .rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:6px;border:2px solid var(--ink);background:var(--white);color:var(--red);display:grid;place-items:center;cursor:pointer;box-shadow:1px 1px 0 var(--ink)}
.wb .thumb .rm svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6}
.wb .thumb.add{border-style:dashed;cursor:pointer;color:var(--steel);display:grid;place-items:center;background:var(--white);gap:4px;text-align:center}
.wb .thumb.add:hover{border-color:var(--blue);color:var(--blue-deep)}
.wb .thumb.add svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.wb .thumb.add span{font-family:"JetBrains Mono",monospace;font-size:9px;text-transform:uppercase;letter-spacing:.04em}

.wb .img-drop{border:2px dashed var(--line-2);border-radius:var(--r-sm);background:var(--paper-2);padding:20px;display:flex;align-items:center;gap:16px;position:relative;cursor:pointer}
.wb .img-drop:hover{border-color:var(--blue)}
.wb .img-drop .id-ico{width:48px;height:48px;flex:0 0 auto;border:2px solid var(--ink);border-radius:11px;display:grid;place-items:center;background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}
.wb .img-drop .id-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9}
.wb .img-drop .id-tx{flex:1 1 auto;min-width:0}
.wb .img-drop .id-tx b{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;text-transform:uppercase;display:block;line-height:1}
.wb .img-drop .id-tx span{font-size:12px;color:var(--steel);display:block;margin-top:4px}
.wb .img-drop.filled{border-style:solid;border-color:var(--ink);background:var(--white)}
.wb .img-drop .id-prev{width:64px;height:64px;flex:0 0 auto;border:2px solid var(--ink);border-radius:9px;overflow:hidden;box-shadow:var(--shadow-sm)}
.wb .img-drop .id-prev img{width:100%;height:100%;object-fit:cover}
.wb .img-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.wb .img-remove{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:var(--red);font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em;padding:4px 6px;border-radius:6px}
.wb .img-remove:hover{background:var(--red-wash)}
.wb .img-remove svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2}

/* ============ CALLOUTS / URL / LANGS ============ */
.wb .wb-callout{display:flex;align-items:center;gap:13px;padding:14px 16px;border:2px solid;border-radius:var(--r-sm)}
.wb .wb-callout.ok{background:var(--green-wash);border-color:#bcdcc9;color:#136a45}
.wb .wb-callout.info{background:var(--blue-wash);border-color:#bfe0f1;color:var(--blue-ink)}
.wb .wb-callout.muted{background:var(--paper-2);border-color:var(--line-2);color:var(--ink-soft)}
/* Amber: something the owner did is silently not taking effect. Used by the
   generation-failed notice inside .wb-cd AND by the "your photo picks aren't
   showing" summary at the top of the Photos tab — which is NOT inside .wb-cd, so
   this has to live with the other variants and not nested under the panel. The
   base .wb-callout sets `border:2px solid` with no colour, so a variant that
   doesn't match renders as a plain box in the inherited ink: a warning about
   invisible photos, itself rendered invisibly. */
.wb .wb-callout.cd-alert{background:#fdf3e6;border-color:#ecd08a;color:#7a5b12}
.wb .wb-callout .co-ic{width:22px;height:22px;flex:0 0 auto}
.wb .wb-callout .co-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.wb .wb-callout .co-tx{flex:1 1 auto;min-width:0}
.wb .wb-callout .co-tx b{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:16px;text-transform:uppercase;display:block;line-height:1}
.wb .wb-callout .co-tx span{font-size:12.5px;display:block;margin-top:3px}
.wb .wb-callout .co-tx span b{display:inline;font-size:inherit;text-transform:none}
.wb .wb-callout .co-act{flex:0 0 auto;margin-left:auto}

.wb .copy-row{display:flex;gap:0;border:2px solid var(--ink);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm)}
.wb .copy-row input{flex:1 1 auto;border:none;padding:12px 14px;font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--ink);background:var(--white);min-width:0}
.wb .copy-row input:focus{outline:none}
.wb .copy-row button{border:none;border-left:2px solid var(--ink);background:var(--paper-2);cursor:pointer;padding:0 16px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:7px;transition:.12s}
.wb .copy-row button:hover{background:var(--blue);color:#04222f}
.wb .copy-row button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

.wb .lang-row{display:flex;flex-wrap:wrap;gap:10px}
.wb .lang-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:2px solid var(--line-2);border-radius:var(--r-sm);background:var(--white);cursor:pointer;font-weight:600;font-size:13.5px;transition:.12s}
.wb .lang-chip:hover{border-color:var(--ink)}
.wb .lang-chip input{width:18px;height:18px;border:2px solid var(--ink);border-radius:5px;appearance:none;-webkit-appearance:none;cursor:pointer;background:var(--white);display:grid;place-items:center;flex:0 0 auto}
.wb .lang-chip input:checked{background:var(--blue)}
.wb .lang-chip input:checked::after{content:"✓";color:#04222f;font-weight:800;font-size:12px}
.wb .lang-chip:has(input:checked){border-color:var(--ink);background:var(--blue-wash)}
.wb .lang-list{margin-top:6px;display:grid;gap:9px}
.wb .lang-list .lr{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:2px solid var(--line-2);padding-top:9px}
.wb .lang-list .lr .st{font-size:11px;font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.04em}
.wb .lang-list .lr .st.done{color:#136a45}
.wb .lang-list .lr .st.todo{color:var(--amber)}

/* ============ AI-DESIGNED SITE (Design tab, first block) ============ */
/* The entry point for freeform generation. Loud on purpose: the feature shipped
   with no UI at all and the owner could not find it, so it is the first thing in
   the tab that opens by default and it reads as a mode choice, not a setting. */
.wb .wb-cd{border:2px solid var(--ink);border-radius:var(--r);background:var(--white);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.wb .wb-cd.on{border-color:var(--blue-ink);box-shadow:3px 3px 0 var(--blue-ink)}
.wb .wb-cd .cd-head{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:2px solid var(--ink);
  background:linear-gradient(120deg,#3a1d6e,#5b2ea6 55%,#7c3aed);color:#fff}
.wb .wb-cd .cd-ico{width:40px;height:40px;flex:0 0 auto;border:2px solid rgba(255,255,255,.35);border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.wb .wb-cd .cd-ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.wb .wb-cd .cd-tx{flex:1 1 auto;min-width:0}
.wb .wb-cd .cd-tx b{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.01em;display:block;line-height:1}
.wb .wb-cd .cd-tx span{font-size:12.5px;color:rgba(255,255,255,.86);display:block;margin-top:4px;line-height:1.45}
.wb .wb-cd .cd-pill{flex:0 0 auto;align-self:flex-start;font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;padding:5px 9px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);color:#fff}
.wb .wb-cd .cd-pill.on{background:#fff;color:#4c1d95;border-color:#fff}

.wb .wb-cd .cd-body{padding:16px;display:grid;gap:14px}
.wb .wb-cd .cd-body[hidden]{display:none}

/* The three things the owner needs BEFORE clicking: how long it takes, what it
   keeps, and how many they have left today. */
.wb .wb-cd .cd-facts{display:flex;flex-wrap:wrap;gap:8px 16px}
.wb .wb-cd .cd-fact{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft)}
.wb .wb-cd .cd-fact svg{width:16px;height:16px;flex:0 0 auto;stroke:var(--steel);fill:none;stroke-width:2}
.wb .wb-cd .cd-fact.cd-left{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--steel);margin-left:auto}

.wb .wb-cd .cd-acts{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.wb .wb-cd .btn.cd-primary{background:#5b2ea6;color:#fff;border-color:#2a0f52;box-shadow:2px 2px 0 #2a0f52}
.wb .wb-cd .btn.cd-primary:hover{background:#6b37c4}
.wb .wb-cd .cd-saved{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#136a45;font-weight:600;flex:1 1 100%}
.wb .wb-cd .cd-saved svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none}

/* Progress. An INDETERMINATE bar — a percentage would be an invention, since the
   job reports nothing between "queued" and "done". Elapsed time is real, so that
   is the number on screen. */
.wb .wb-cd .cd-working{gap:12px}
.wb .wb-cd .cd-bar{height:8px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);overflow:hidden;position:relative}
.wb .wb-cd .cd-bar span{position:absolute;top:0;bottom:0;width:38%;border-radius:999px;
  background:linear-gradient(90deg,#5b2ea6,#7c3aed);animation:cdSlide 1.6s ease-in-out infinite}
@keyframes cdSlide{0%{left:-40%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){ .wb .wb-cd .cd-bar span{animation:none;left:0;width:100%;opacity:.55} }
.wb .wb-cd .cd-work-tx b{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:19px;text-transform:uppercase;display:block;line-height:1}
.wb .wb-cd .cd-work-tx span{font-size:12.5px;color:var(--steel);display:block;margin-top:4px;line-height:1.45}
.wb .wb-cd .cd-timer{display:flex;align-items:baseline;gap:10px}
.wb .wb-cd .cd-elapsed{font-family:"JetBrains Mono",monospace;font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.wb .wb-cd .cd-usual{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em}

/* ============ STOCK PHOTO PICKER (Photos tab) ============ */
/* Slot list: pick the spot, then the photo. A picked slot gets the blue treatment
   the rest of the builder uses for "this is your choice, not the default". */
.wb .pp-slots{display:grid;gap:9px}
.wb .pp-slot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border:2px solid var(--line-2);border-radius:var(--r-sm);background:var(--white);padding:9px 11px}
.wb .pp-slot.picked{border-color:var(--ink);box-shadow:var(--shadow-sm)}
/* An upload is winning over this slot, so anything picked for it is invisible on
   the page. Amber, full row, impossible to miss — the previous quiet grey span is
   the bug being fixed. */
.wb .pp-slot.overridden{border-color:#ecd08a;background:#fdf9f0}
.wb .pp-slot-pick{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0;cursor:pointer}
.wb .pp-slot-pick input[type=radio]{width:19px;height:19px;flex:0 0 auto;appearance:none;-webkit-appearance:none;border:2px solid var(--ink);border-radius:50%;background:var(--white);cursor:pointer;display:grid;place-items:center}
.wb .pp-slot-pick input[type=radio]:checked{background:var(--blue)}
.wb .pp-slot-pick input[type=radio]:checked::after{content:"";width:7px;height:7px;border-radius:50%;background:#04222f}
.wb .pp-slot-thumb{width:60px;height:44px;flex:0 0 auto;border:2px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--paper-2);display:grid;place-items:center}
.wb .pp-slot.picked .pp-slot-thumb{border-color:var(--ink)}
.wb .pp-slot-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wb .pp-auto{font-family:"JetBrains Mono",monospace;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--steel)}
.wb .pp-slot-tx{flex:1 1 auto;min-width:0}
.wb .pp-slot-name{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;line-height:1;display:block}
.wb .pp-slot-by{font-size:11.5px;color:var(--steel);display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb .pp-slot-thumb{position:relative}
.wb .pp-ovbadge{position:absolute;left:0;right:0;bottom:0;text-align:center;background:rgba(23,25,29,.82);color:#f5d78a;
  font-family:"JetBrains Mono",monospace;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:2px 0}
.wb .pp-slot-warn{flex:1 1 100%;display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  border-top:2px solid #ecd08a;margin-top:2px;padding-top:9px}
.wb .pp-warn-tx{flex:1 1 220px;min-width:0;font-size:12px;color:#7a5b12;line-height:1.45}
.wb .pp-warn-tx b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.01em;line-height:1;margin-bottom:3px}
.wb .btn.pp-usestock{flex:0 0 auto;border-color:#d9b25c;color:#7a5b12;background:#fff}
.wb .btn.pp-usestock:hover{border-color:#7a5b12;color:#7a5b12}
.wb .pp-reset{flex:0 0 auto;background:none;border:none;cursor:pointer;color:var(--steel);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;padding:5px 7px;border-radius:6px}
.wb .pp-reset:hover{background:var(--paper-2);color:var(--ink)}
.wb .pp-more{margin-top:12px;border-top:2px solid var(--line-2);padding-top:11px}
.wb .pp-more summary{cursor:pointer;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--steel);margin-bottom:10px}
.wb .pp-more summary:hover{color:var(--ink)}

/* Search row + suggestion chips */
.wb .pp-searchrow{display:flex;gap:9px;align-items:center}
.wb .pp-searchrow .inp{flex:1 1 auto;min-width:0}
.wb .pp-chips{display:flex;flex-wrap:wrap;gap:7px}
.wb .pp-chip{border:2px solid var(--line-2);border-radius:999px;background:var(--white);cursor:pointer;padding:5px 12px;
  font-size:12.5px;color:var(--ink-soft);transition:.12s}
.wb .pp-chip:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-2)}
.wb .pp-statusrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.wb .pp-status{font-size:12.5px;color:var(--steel)}
.wb .pp-status.ok{color:#136a45}
.wb .pp-status.warn{color:var(--red)}
.wb .pp-status.busy{color:var(--blue-deep)}
.wb .pp-remaining{font-family:"JetBrains Mono",monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel-2);flex:0 0 auto}

/* Results grid. Credit is not decoration — it is the licence, so it sits under
   every tile, always visible, and links to the photographer. */
.wb .pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.wb .pp-tile{position:relative;border:2px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden;background:var(--paper-2)}
.wb .pp-tile:hover{border-color:var(--ink);box-shadow:var(--shadow-sm)}
.wb .pp-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.wb .pp-use{position:absolute;top:6px;right:6px;border:2px solid var(--ink);border-radius:7px;background:var(--blue);color:#04222f;cursor:pointer;
  padding:4px 10px;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;box-shadow:1px 1px 0 var(--ink)}
.wb .pp-use:hover{background:var(--blue-press)}
.wb .pp-use:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--ink)}
.wb .pp-use[disabled]{opacity:.55;cursor:default}
.wb .pp-credit{padding:6px 8px;font-size:11px;color:var(--steel);background:var(--white);border-top:2px solid var(--line-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb .pp-credit a{color:var(--steel);text-decoration:underline}
.wb .pp-credit a:hover{color:var(--ink)}

/* ============ SEO PREVIEW ============ */
.wb .seo-preview{border:2px solid var(--line-2);border-radius:10px;padding:14px 16px;background:var(--white)}
.wb .seo-preview .u{font-family:"JetBrains Mono",monospace;font-size:12px;color:#136a45}
.wb .seo-preview .t{font-family:"Barlow",sans-serif;font-size:19px;color:#1a0dab;margin-top:3px;font-weight:600}
.wb .seo-preview .d{font-size:13px;color:var(--steel);margin-top:4px;line-height:1.45}

/* ============ LIVE PREVIEW PANE ============ */
.wb-preview{border-left:2px solid var(--ink);background:var(--paper-3);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.wb-work.preview-closed .wb-preview{border-left-width:0}
.wb-preview-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:2px solid var(--ink);background:var(--paper-2);flex:0 0 auto;flex-wrap:wrap}
.wb-preview-bar .pv-cap{font-family:"JetBrains Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wb-preview-bar .pv-cap .live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(24,121,78,.2);animation:pvpulse 2.4s ease-in-out infinite}
@keyframes pvpulse{0%,100%{opacity:1}50%{opacity:.45}}
.wb-preview-bar .grow{flex:1 1 auto}
.wb-preview-bar .pv-x{width:34px;height:34px;flex:0 0 auto;border:2px solid var(--ink);border-radius:8px;background:var(--white);display:grid;place-items:center;cursor:pointer;color:var(--ink);box-shadow:var(--shadow-sm);transition:.1s}
.wb-preview-bar .pv-x:hover{background:var(--ink);color:var(--paper)}
.wb-preview-bar .pv-x:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.wb-preview-bar .pv-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

/* "Open ↗" — view unpublished changes full-page in a new tab */
.wb-preview-bar .pv-open{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;border:2px solid var(--ink);border-radius:8px;
  background:var(--white);color:var(--ink);padding:6px 11px;cursor:pointer;text-decoration:none;box-shadow:var(--shadow-sm);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em;transition:.1s}
.wb-preview-bar .pv-open:hover{background:var(--blue);color:#04222f}
.wb-preview-bar .pv-open:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.wb-preview-bar .pv-open svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

.wb .device-toggle{display:inline-flex;border:2px solid var(--ink);border-radius:9px;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--white);flex:0 0 auto}
.wb .device-toggle button{border:none;background:var(--white);cursor:pointer;padding:7px 12px;display:inline-flex;align-items:center;gap:7px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-soft);border-right:2px solid var(--ink);transition:.12s}
.wb .device-toggle button:last-child{border-right:none}
.wb .device-toggle button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.wb .device-toggle button.active{background:var(--ink);color:var(--paper)}

/* stage that letterboxes + scales the iframe frame */
.wb-stage{flex:1 1 auto;min-height:0;position:relative;overflow:auto;
  background:radial-gradient(circle at 1px 1px, rgba(23,25,29,.10) 1px, transparent 0) 0 0/16px 16px,var(--paper-3);
  display:flex;align-items:flex-start;justify-content:center;padding:20px}
.wb-frame-wrap{position:relative;transform-origin:top center;flex:0 0 auto}
.wb-frame{background:#fff;overflow:hidden;box-shadow:0 20px 50px -18px rgba(0,0,0,.55),0 0 0 2px var(--ink)}
.wb-frame.desktop{width:1200px;border-radius:12px}
.wb-frame.mobile{width:390px;border-radius:34px;border:12px solid #17191d;box-shadow:0 24px 60px -18px rgba(0,0,0,.6)}
.wb-frame iframe{display:block;width:100%;border:0;background:#fff}
.wb-scale-note{position:absolute;left:14px;bottom:12px;z-index:5;font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--steel);
  background:var(--white);border:1.5px solid var(--line-2);border-radius:6px;padding:3px 8px;text-transform:uppercase;letter-spacing:.05em;pointer-events:none}

/* reopen handle */
.pv-reopen{position:absolute;top:50%;right:0;transform:translateY(-50%);z-index:6;writing-mode:vertical-rl;
  border:2px solid var(--ink);border-right:none;border-radius:10px 0 0 10px;background:var(--blue);color:#04222f;padding:16px 9px;cursor:pointer;
  box-shadow:-2px 2px 0 var(--blue-ink);font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.08em;display:none;align-items:center;gap:9px}
.wb-work.preview-closed .pv-reopen{display:inline-flex}
.pv-reopen svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ============ EMBEDDED AI CHAT PANE ============
   Reuses the .we-* chat styles from dashboard.css; here we just make the pane
   fill the editor column so the messages list scrolls and the input bar pins. */
/* Fill the panel reliably (grid height:100% is unreliable when sibling panes
   collapse), so pin the pane to the panel's box and let the chat flex inside. */
.wb-pane.assistant{padding:0}
.wb-pane.assistant.active{display:flex;flex-direction:column;position:absolute;inset:0}
.wb-pane.assistant .we-chat{flex:1 1 auto;min-height:0;height:100%;border:0;border-radius:0}
.wb-pane.assistant .we-inputbar{border-top:2px solid var(--line-2)}
.wb-pane.assistant .we-preview-wrap{display:none} /* preview lives in the shared right pane */

/* ============ TOAST ============ */
.wb-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:120;
  background:var(--ink);color:var(--paper);border:2px solid #04222f;border-radius:12px;box-shadow:4px 4px 0 rgba(0,0,0,.3);
  padding:13px 18px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.02em;
  opacity:0;transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:10px;pointer-events:none}
.wb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.wb-toast .ok{color:#33b87c}

/* ============ RESPONSIVE ============ */
@media(max-width:1320px){ .wb{--wb-preview-w:400px} }
@media(max-width:1080px){
  .wb-work,.wb-work.preview-open,.wb-work.preview-closed{grid-template-columns:var(--wb-rail-w) minmax(0,1fr)}
  .wb-preview{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);z-index:60;border-left:2px solid var(--ink);
    box-shadow:-10px 0 50px rgba(0,0,0,.4);transition:transform .32s cubic-bezier(.4,0,.2,1)}
  .wb-work.preview-closed .wb-preview{transform:translateX(101%)}
  .wb-work.preview-open .wb-preview{transform:none}
}
@media(max-width:820px){
  .wb-work,.wb-work.preview-open,.wb-work.preview-closed{grid-template-columns:60px minmax(0,1fr)}
  .wb-tab .lbl,.wb-rail .rail-cap,.wb-rail .rail-foot{display:none}
  .wb-tab{justify-content:center;padding:11px 0}
}
@media(max-width:720px){
  .wb-top h1{font-size:32px}
  .wb-top-actions{width:100%}
  .wb .rep-two,.wb .rep-two.even,.wb .f-row{grid-template-columns:1fr}
}