/* Kartio Page Builder v2 — WebPanel builder shell.
   Ported from docs/kartio-design/canvas/kd.css (".kb" builder section) + B1-States / B1-Mobile.
   Plain CSS (not Tailwind) so it needs no css:build. Panel dark mode = WebPanel `.dark` class. */

.kb-root {
  --ink: #17181C; --bg: #F4F4F1; --sf: #FFFFFF; --ln: #E3E2DD; --mut: #66655F;
  --pri: #0F6B66; --pri50: #E4F1EF; --sel: #0FA89D;
  --warn: #8A4B00; --warn50: #FDF3E3; --dng: #B42318; --dng50: #FDECEA; --ok: #1E7B45; --ok50: #E7F4EC; --gold: #8A5A00;
  --seg: #EAEAE5; --canvas: #ECECE7; --dot: #D6D5CF; --hover: rgba(0,0,0,.05); --mutfaint: #B5B4AE; --off: #9A9993;
  --chip: #F1F1ED; --sunk: #F6F6F3; --on-pri: #fff;
  font-family: Vazirmatn, IRANYekanXFaNum, Tahoma, sans-serif;
  color: var(--ink); background: var(--bg);
  position: fixed; inset: 0; overflow: hidden; display: flex; flex-direction: column; z-index: 40;
  font-size: 14px; line-height: 1.5;
}
.dark .kb-root {
  --ink: #F3EFFB; --bg: #15111C; --sf: #1E1829; --ln: #3A3350; --mut: #B7ADC9;
  --pri: #2FB5AA; --pri50: rgba(47,181,170,.16); --sel: #3DD6C8;
  --warn: #F3C77A; --warn50: rgba(243,199,122,.12); --dng: #FF8A80; --dng50: rgba(255,138,128,.12); --ok: #6FD59A; --ok50: rgba(111,213,154,.14); --gold: #F3D48B;
  --seg: #271F38; --canvas: #15111C; --dot: #2B2440; --hover: rgba(255,255,255,.07); --mutfaint: #6E6784; --off: #7E7794;
  --chip: #271F38; --sunk: #241D33; --on-pri: #0E1A19;
}
.kb-root *, .kb-root *::before, .kb-root *::after { box-sizing: border-box; }
.kb-root a { color: var(--pri); }
.kb-root button { font-family: inherit; }
.kb-root .i { flex: none; }
.kb-root :focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }

/* ── top bar ── */
.kb-top { height: 60px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--sf); border-bottom: 1px solid var(--ln); position: relative; z-index: 3; }
.kb-top--compact { height: 58px; gap: 6px; padding: 0 10px; }
.kb-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--sf); display: grid; place-items: center; font-weight: 800; flex: none; }
.kb-btn { all: unset; box-sizing: border-box; height: 36px; padding: 0 12px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; font-family: inherit; }
.kb-btn:focus-visible, .kb-ib:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.kb-btn[disabled], .kb-btn[aria-disabled="true"] { cursor: default; }
.kb-out { border: 1px solid var(--ln); background: var(--sf); }
.kb-out:hover { background: var(--hover); }
.kb-act { border: 1px solid var(--pri); background: var(--pri50); color: var(--pri); }
.kb-pri { background: var(--pri); color: var(--on-pri); }
.kb-pri:hover { filter: brightness(1.08); }
.kb-pri--done { background: #E0E0DB; color: #6E6D67; }
.dark .kb-pri--done { background: #2C2540; color: #8D86A3; }
.kb-pri--err { background: var(--dng50); color: var(--dng); border: 1px solid #F4C7C3; }
.dark .kb-pri--err { border-color: rgba(255,138,128,.4); }
.kb-ib { all: unset; box-sizing: border-box; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--ink); cursor: pointer; flex: none; position: relative; font-size: 18px; }
.kb-ib:hover { background: var(--hover); }
.kb-ib.on { background: var(--pri50); color: var(--pri); }
.kb-ib.dim { color: var(--mutfaint); cursor: default; }
.kb-ib.dim:hover { background: none; }
.kb-sep { width: 1px; height: 24px; background: var(--ln); flex: none; }
.kb-badge { min-width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 11px; padding: 0 4px; }
.kb-savechip { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); white-space: nowrap; }
.kb-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 10px; background: var(--sf); font-size: 12px; font-weight: 600; border: 1px solid var(--ln); }
.kb-pill--warn { border-color: #F1D9AE; background: var(--warn50); color: var(--warn); }
.kb-pill--err { border-color: #F4C7C3; background: var(--dng50); color: var(--dng); }
.dark .kb-pill--warn { border-color: rgba(243,199,122,.4); }
.dark .kb-pill--err { border-color: rgba(255,138,128,.4); }
.kb-pill a, .kb-pill button { all: unset; cursor: pointer; font-weight: 800; text-decoration: underline; }
.kb-sp { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #CFCEC8; border-top-color: var(--pri); flex: none; animation: kb-spin .8s linear infinite; }
.kb-sp--on { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes kb-spin { to { transform: rotate(360deg); } }
.kb-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.kb-nowrap { white-space: nowrap; }

/* ── segmented ── */
.kb-seg { display: flex; padding: 3px; background: var(--seg); border-radius: 10px; gap: 2px; }
.kb-seg.w { background: var(--sf); box-shadow: 0 0 0 1px var(--ln); }
.kb-seg button { all: unset; box-sizing: border-box; flex: 1; height: 30px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--mut); display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; cursor: pointer; font-family: inherit; }
.kb-seg button:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
.kb-seg button.on { background: var(--sf); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.kb-seg.w button.on { background: var(--pri50); color: var(--pri); box-shadow: none; }
.kb-seg button[disabled] { opacity: .45; cursor: default; }

/* ── body layout ── */
.kb-body { flex: 1; display: flex; min-height: 0; position: relative; }
.kb-outline { width: 280px; flex: none; background: var(--sf); border-inline-end: 1px solid var(--ln); display: flex; flex-direction: column; padding: 12px 8px; gap: 2px; overflow: hidden; min-height: 0; }
.kb-settings { width: 320px; flex: none; background: var(--sf); border-inline-start: 1px solid var(--ln); display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.kb-scroll { overflow-y: auto; flex: 1; min-height: 0; }
.kb-canvas { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; background-color: var(--canvas); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 18px 18px; overflow: hidden; }
.kb-ctool { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; flex: none; position: relative; z-index: 2; }
.kb-stage { flex: 1; min-height: 0; width: 100%; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 0 24px 24px; position: relative; }
.kb-stage--bleed { padding: 0; }
.kb-stage > .kb-frame { margin-inline: auto; }

/* ── outline ── */
.kb-olh { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 8px; font-size: 14px; font-weight: 800; flex: none; }
.kb-ol { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; border-radius: 10px; font-size: 13px; flex: none; position: relative; cursor: pointer; user-select: none; }
.kb-ol:hover { background: var(--hover); }
.kb-ol--lg { height: 52px; font-size: 14px; }
.kb-ol .v { margin-inline-start: auto; font-size: 11px; color: var(--mut); white-space: nowrap; }
.kb-ol .g { color: var(--mutfaint); }
.kb-ol.sel { background: var(--pri50); box-shadow: inset 0 0 0 1.5px var(--pri); font-weight: 700; }
.kb-ol.off { color: var(--off); }
.kb-ol--static { cursor: default; }
.kb-ol--static:hover { background: none; }
.kb-grip { all: unset; width: 26px; height: 32px; display: grid; place-items: center; color: var(--mutfaint); cursor: grab; touch-action: none; flex: none; border-radius: 6px; margin-inline-start: -4px; }
.kb-grip:hover { color: var(--ink); background: var(--hover); }
.kb-grip:active { cursor: grabbing; }
.kb-ol--drag { z-index: 30; background: var(--sf); box-shadow: 0 18px 30px -10px rgba(0,0,0,.3), 0 0 0 2px var(--pri); pointer-events: none; transform: rotate(-1deg); }
.kb-ol--dropb::before, .kb-ol--dropa::after { content: ""; position: absolute; right: 6px; left: 6px; height: 3px; border-radius: 3px; background: var(--pri); }
.kb-ol--dropb::before { top: -2px; }
.kb-ol--dropa::after { bottom: -2px; }
.kb-eye { all: unset; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; cursor: pointer; color: var(--mut); flex: none; }
.kb-eye:hover { background: var(--hover); color: var(--ink); }
.kb-olsep { margin: 12px 6px 4px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--mut); flex: none; }
.kb-olsep::after { content: ""; flex: 1; height: 1px; background: var(--ln); }
.kb-olsep button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.kb-olsep button:hover { color: var(--ink); }
.kb-tagc { height: 18px; padding: 0 6px; border-radius: 5px; background: #EEF0FF; color: #3B45A8; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; }
.kb-rail { width: 60px; flex: none; background: var(--sf); border-inline-end: 1px solid var(--ln); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; overflow-y: auto; }
.kb-rtip { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: #17181C; color: #fff; font-size: 11px; font-weight: 600; padding: 6px 9px; border-radius: 7px; white-space: nowrap; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .12s; }
.kb-ib:hover .kb-rtip, .kb-ib:focus-visible .kb-rtip { opacity: 1; }

/* ── settings ── */
.kb-ph { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ln); flex: none; }
.kb-ph .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--pri50); color: var(--pri); display: grid; place-items: center; flex: none; font-size: 18px; }
.kb-ph b { font-size: 14px; display: block; }
.kb-ph small { font-size: 11px; color: var(--mut); }
.kb-sec { display: flex; flex-direction: column; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--ln); }
.kb-sec:last-child { border-bottom: 0; }
.kb-lbl { font-size: 12px; font-weight: 700; color: var(--mut); }
.kb-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; min-height: 30px; }
.kb-tog { all: unset; box-sizing: border-box; width: 36px; height: 22px; border-radius: 22px; background: #D3D2CC; position: relative; flex: none; cursor: pointer; }
.dark .kb-tog { background: #4A4361; }
.kb-tog::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: right .12s; }
.kb-tog.on { background: var(--pri); }
.kb-tog.on::after { right: 17px; }
.kb-tog[disabled] { opacity: .45; cursor: default; }
.kb-ths { display: flex; gap: 8px; }
.kb-th { all: unset; flex: 1; display: flex; flex-direction: column; gap: 5px; align-items: center; font-size: 11px; font-weight: 600; color: var(--mut); cursor: pointer; }
.kb-th .t { width: 100%; height: 64px; border-radius: 10px; border: 1.5px solid var(--ln); background: var(--sunk); padding: 7px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.kb-th.on { color: var(--pri); }
.kb-th.on .t { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri50); }
.kb-th:focus-visible .t { outline: 2px solid var(--sel); outline-offset: 2px; }
.kb-ln { height: 5px; border-radius: 3px; background: #DAD9D3; }
.dark .kb-ln { background: #3A3350; }
.kb-deep { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 10px; background: var(--pri50); font-size: 13px; font-weight: 700; text-decoration: none; }
.kb-hint { display: flex; gap: 8px; padding: 9px 11px; border-radius: 9px; font-size: 12px; line-height: 1.7; background: var(--sunk); color: var(--mut); }
.kb-hint b { color: var(--ink); }
.kb-empty { padding: 28px 22px; text-align: center; color: var(--mut); font-size: 13px; line-height: 1.9; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kb-empty .ico { width: 44px; height: 44px; border-radius: 14px; background: var(--pri50); color: var(--pri); display: grid; place-items: center; font-size: 22px; }

/* ── frame (phone / tablet / desktop) ── */
.kb-frame { position: relative; flex: none; }
.kb-frame--mobile { padding: 10px; border-radius: 44px; background: #121214; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.kb-frame--mobile .kb-vp { border-radius: 34px; }
.kb-frame--tablet { padding: 12px; border-radius: 28px; background: #121214; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.kb-frame--tablet .kb-vp { border-radius: 16px; }
.kb-frame--desktop { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.08); }
.kb-frame--bleed { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.kb-frame--bleed .kb-vp { border-radius: 0; }
.kb-deskbar { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #F1F1EE; border-bottom: 1px solid #E3E2DD; font-size: 11px; color: #66655F; }
.dark .kb-deskbar { background: #241D33; border-color: #3A3350; color: #B7ADC9; }
.kb-vp { position: relative; overflow: hidden; background: #F3F1F7; }
.kb-vp iframe { position: absolute; top: 0; right: 0; border: 0; background: #fff; transform-origin: top right; }
.kb-vp--ro { outline: 2px dashed var(--ln); outline-offset: -2px; }
.kb-ovl { position: absolute; inset: 0; pointer-events: none; z-index: 5; direction: ltr; }
.kb-float { position: absolute; z-index: 9; display: flex; align-items: center; gap: 2px; padding: 4px; background: #17181C; border-radius: 10px; color: #fff; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); pointer-events: auto; direction: rtl; white-space: nowrap; }
.kb-float .nm { padding: 0 8px; font-weight: 700; color: #7FE0D6; }
.kb-float button { all: unset; height: 28px; min-width: 28px; display: grid; place-items: center; border-radius: 6px; padding: 0 4px; box-sizing: border-box; cursor: pointer; font-size: 15px; }
.kb-float button:hover { background: rgba(255,255,255,.14); }
.kb-float button[disabled] { opacity: .35; cursor: default; }
.kb-float button[disabled]:hover { background: none; }
.kb-float button.var { display: flex; align-items: center; gap: 4px; padding: 0 8px; background: rgba(255,255,255,.1); font-size: 12px; }
.kb-float .lk { width: 28px; height: 28px; display: grid; place-items: center; opacity: .55; font-size: 15px; }
.kb-ins { position: absolute; height: 22px; display: flex; align-items: center; justify-content: center; pointer-events: auto; opacity: 0; transition: opacity .12s; direction: rtl; }
.kb-ins:hover, .kb-ins:focus-within, .kb-ins--show { opacity: 1; }
.kb-ins::before { content: ""; position: absolute; right: 8px; left: 8px; top: 10px; height: 2px; background: var(--sel); border-radius: 2px; }
.kb-ins button { all: unset; position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--pri); color: var(--on-pri); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(15,107,102,.4); cursor: pointer; font-size: 15px; }
.kb-pop { position: absolute; z-index: 12; min-width: 230px; max-width: 300px; background: var(--sf); color: var(--ink); border: 1px solid var(--ln); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.25); padding: 8px; pointer-events: auto; direction: rtl; }
.kb-pop h4 { margin: 4px 8px 6px; font-size: 12px; font-weight: 800; color: var(--mut); }
.kb-pop button.row { all: unset; box-sizing: border-box; width: 100%; height: 40px; padding: 0 10px; border-radius: 9px; display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.kb-pop button.row:hover { background: var(--hover); }
.kb-pop .none { padding: 10px; font-size: 12px; color: var(--mut); line-height: 1.8; }
.kb-notice { position: absolute; z-index: 6; bottom: 14px; right: 50%; transform: translateX(50%); background: var(--sf); border: 1px solid var(--ln); border-radius: 12px; padding: 8px 12px; font-size: 12px; color: var(--mut); display: flex; gap: 8px; align-items: center; box-shadow: 0 8px 20px -8px rgba(0,0,0,.2); max-width: calc(100% - 24px); }
.kb-shim { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(255,255,255,.55); }
.dark .kb-shim { background: rgba(21,17,28,.6); }

/* ── drawers / sheets / scrim / modal ── */
.kb-scrim { position: absolute; inset: 0; background: rgba(15,15,15,.42); z-index: 20; }
.kb-scrim--soft { background: rgba(20,20,24,.28); z-index: 11; }
.kb-drawer { position: absolute; z-index: 12; top: 0; bottom: 0; background: var(--sf); box-shadow: 0 0 60px rgba(0,0,0,.22); display: flex; flex-direction: column; overflow: hidden; }
.kb-sheet { position: absolute; z-index: 12; right: 0; left: 0; bottom: 0; background: var(--sf); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; }
.kb-handle { width: 44px; height: 5px; border-radius: 5px; background: #D3D2CC; margin: 10px auto 4px; flex: none; }
.dark .kb-handle { background: #4A4361; }
.kb-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 6px 20px; overflow-y: auto; }
.kb-sheet-grid .kb-sec { padding: 12px 0; border: 0; }
.kb-modal { position: absolute; z-index: 21; background: var(--sf); color: var(--ink); border-radius: 20px; box-shadow: 0 40px 80px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: auto; max-height: calc(100% - 24px); top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100% - 24px)); padding: 24px; gap: 16px; }
.kb-modal--sm { width: min(400px, calc(100% - 24px)); padding: 22px; gap: 12px; }
.kb-toolbar { position: absolute; bottom: 22px; right: 50%; transform: translateX(50%); display: flex; gap: 2px; padding: 5px; border-radius: 18px; background: #17181C; color: #fff; z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.kb-toolbar button { all: unset; box-sizing: border-box; width: 66px; height: 52px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; gap: 2px; cursor: pointer; }
.kb-toolbar button:hover { background: rgba(255,255,255,.1); }
.kb-toolbar button.on { background: rgba(255,255,255,.14); }
.kb-toolbar button.add { background: #0F6B66; width: 60px; }
.kb-toolbar button svg { font-size: 19px; }
.kb-toolbar button:focus-visible { outline: 2px solid #7FE0D6; }

/* ── modal internals ── */
.kb-stp { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.kb-stp .ic { width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.kb-stp .ic--ok { border-radius: 50%; background: var(--ok50); color: var(--ok); font-size: 14px; }
.kb-stp .ic--idle { border-radius: 50%; border: 2px solid #DAD9D3; }
.kb-stp--idle { color: var(--off); }
.kb-bar { height: 6px; border-radius: 6px; background: var(--seg); overflow: hidden; }
.kb-bar > div { height: 100%; border-radius: 6px; background: var(--pri); transition: width .3s; }
.kb-err { display: flex; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid #F4C7C3; background: #FFFAF9; text-decoration: none; color: var(--ink); cursor: pointer; text-align: start; width: 100%; font-family: inherit; align-items: center; }
.dark .kb-err { background: rgba(255,138,128,.08); border-color: rgba(255,138,128,.35); }
.kb-err:hover { border-color: var(--dng); }
.kb-err--plan { border-color: #E8D3A0; background: #FFFCF3; }
.dark .kb-err--plan { background: rgba(243,212,139,.08); border-color: rgba(243,212,139,.35); }
.kb-err b { font-size: 13px; display: block; }
.kb-err small { font-size: 12px; color: var(--mut); }
.kb-shr { all: unset; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--mut); cursor: pointer; }
.kb-shr span { width: 48px; height: 48px; border-radius: 14px; background: var(--chip); display: grid; place-items: center; color: var(--ink); font-weight: 800; font-size: 15px; }
.kb-shr:hover span { background: var(--pri50); color: var(--pri); }
.kb-qr { background: #fff; padding: 8px; border-radius: 10px; box-shadow: 0 0 0 1px var(--ln); flex: none; display: grid; place-items: center; }
.kb-qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.kb-planbar { background: #1B1712; color: #F4EFE6; padding: 8px 16px; display: flex; align-items: center; gap: 12px; font-size: 12px; flex: none; flex-wrap: wrap; }
.kb-planbar b { color: #F3D48B; }
.kb-planbar a { background: #F3D48B; color: #1B1712; font-weight: 800; padding: 5px 12px; border-radius: 8px; text-decoration: none; margin-inline-start: auto; }
.kb-tag { height: 22px; padding: 0 8px; border-radius: 6px; background: var(--chip); font-size: 11px; font-weight: 600; color: var(--mut); display: inline-flex; align-items: center; }
.kb-start { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 8px; overflow: auto; background: radial-gradient(60% 50% at 50% 0%, var(--pri50), transparent), var(--bg); }
.kb-tplc { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; border-radius: 20px; background: var(--sf); overflow: hidden; border: 1px solid var(--ln); }
.kb-tplc:hover { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri50); }
.kb-tplc[disabled] { opacity: .6; cursor: default; }
.kb-tplc .pv { height: 180px; position: relative; }
.kb-tplc .mt { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }

/* published (read-only) view: editing surfaces are inert */
.kb-ro .kb-outline, .kb-ro .kb-settings, .kb-ro .kb-rail { opacity: .55; pointer-events: none; }

/* mobile outline sheet: white rows on the sheet background (B1-Mobile #3) */
.kb-outline--flush { background: transparent; }
.kb-sheet .kb-ol--lg:not(.sel):not(.off) { background: var(--sf); }
.kb-ins--show::before { opacity: .45; }

@media (max-width: 767px) {
  .kb-sheet-grid { grid-template-columns: 1fr; gap: 0; padding: 6px 18px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-sp { animation-duration: 2s; }
  .kb-bar > div, .kb-tog::after, .kb-ins, .kb-rtip { transition: none; }
}

/* ══════════ Step 1.10 - panels (block / theme / page settings), templates gallery ══════════ */

/* generic form bits */
.kb-fld { display: flex; flex-direction: column; gap: 6px; }
.kb-inp { width: 100%; border: 1px solid var(--ln); border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 13px; line-height: 1.7; color: var(--ink); background: var(--sf); resize: none; }
.kb-inp:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
.kb-inp.err { border-color: var(--dng); box-shadow: 0 0 0 3px var(--dng50); }
.kb-cnt { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--mut); }
.kb-cnt > span:last-child { white-space: nowrap; flex: none; }
.kb-cnt .ok { color: var(--ok); } .kb-cnt .warn { color: var(--warn); } .kb-cnt .err { color: var(--dng); }
.kb-step { display: flex; align-items: center; border: 1px solid var(--ln); border-radius: 9px; overflow: hidden; background: var(--sf); }
.kb-step button { all: unset; width: 34px; height: 32px; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.kb-step button:hover { background: var(--hover); }
.kb-step button[disabled] { opacity: .35; cursor: default; }
.kb-step button:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
.kb-step span { width: 40px; text-align: center; font-weight: 700; border-inline: 1px solid var(--ln); line-height: 32px; font-size: 13px; }
.kb-chk { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); cursor: pointer; }
.kb-chk input { width: 18px; height: 18px; accent-color: var(--pri); }
.kb-hint--warn { background: var(--warn50); color: var(--warn); }
.kb-linkbtn { all: unset; cursor: pointer; font-size: 12px; font-weight: 700; color: inherit; text-decoration: underline; font-family: inherit; }
.kb-linkbtn:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.kb-savestate { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mut); min-height: 16px; }
.kb-deep--solid { background: var(--pri); color: var(--on-pri) !important; }
.kb-deep--gold { background: #17181C; color: #F3D48B !important; }
.dark .kb-deep--gold { background: #0E0B14; }

/* data rows + empty-state invitation */
.kb-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; }
.kb-row .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--chip); display: grid; place-items: center; color: var(--mut); flex: none; }
.kb-row .val { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.kb-row .val b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-row .val bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-row .val small { font-size: 11px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-thumbimg { width: 54px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; background: var(--chip); }
.kb-invite { align-items: center; text-align: center; padding: 28px 22px; gap: 12px; }
.kb-invite .art { position: relative; width: 120px; height: 86px; }
.kb-invite .art .b { position: absolute; top: 8px; right: 6px; width: 70px; height: 70px; border-radius: 14px; background: var(--pri50); transform: rotate(8deg); }
.kb-invite .art .f { position: absolute; top: 4px; left: 8px; width: 70px; height: 70px; border-radius: 14px; background: var(--sf); border: 1.5px dashed var(--pri); transform: rotate(-6deg); display: grid; place-items: center; color: var(--pri); }
.kb-adprev { border-radius: 14px; padding: 14px; background: var(--sunk); border: 1px solid var(--ln); display: flex; align-items: center; gap: 10px; opacity: .85; }
.kb-adprev .k { width: 34px; height: 34px; border-radius: 10px; background: #17181C; color: #fff; display: grid; place-items: center; font-weight: 800; }
.kb-simfld { display: flex; align-items: center; height: 38px; border: 1px solid var(--ln); border-radius: 9px; padding: 0 10px; font-size: 12px; gap: 6px; background: var(--sf); overflow: hidden; }
.kb-simfld { direction: ltr; }
.kb-simfld > bdi { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-simfld.err { border-color: var(--dng); box-shadow: 0 0 0 3px var(--dng50); }
.kb-simfld input { color: var(--ink); direction: ltr; text-align: left; flex: 1; min-width: 56px; }

/* variant thumbnail mockups */
.kb-tgrid { display: grid; gap: 4px; }
.kb-tgrid i, .kb-tb { display: block; border-radius: 6px; background: #DAD9D3; min-height: 8px; }
.dark .kb-tgrid i, .dark .kb-tb { background: #3A3350; }

/* theme panel */
.kb-sws { display: flex; gap: 10px; flex-wrap: wrap; }
.kb-sw { all: unset; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--sf); box-shadow: 0 0 0 1px var(--ln); cursor: pointer; }
.kb-sw.on { box-shadow: 0 0 0 2px var(--ink); }
.kb-sw.warn { position: relative; }
.kb-sw.warn::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6); }
.kb-sw:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.kb-hex { flex: 1; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--ln); border-radius: 9px; font-size: 13px; background: var(--sf); min-width: 0; }
.kb-hex.err { border-color: var(--dng); box-shadow: 0 0 0 3px var(--dng50); }
.kb-hex .sw { position: relative; width: 20px; height: 20px; border-radius: 6px; flex: none; box-shadow: 0 0 0 1px var(--ln); overflow: hidden; }
.kb-hex .sw input { position: absolute; inset: -6px; width: 34px; height: 34px; opacity: 0; cursor: pointer; }
.kb-hex > input { all: unset; width: 90px; font-family: ui-monospace, monospace; font-size: 13px; direction: ltr; text-align: left; color: var(--ink); }
.kb-hex:focus-within { outline: 2px solid var(--sel); outline-offset: 1px; }
.kb-sugg { display: flex; flex-direction: column; gap: 6px; }
.kb-warn { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--warn50); border: 1px solid #F1D9AE; font-size: 12px; line-height: 1.7; color: var(--warn); }
.dark .kb-warn { border-color: rgba(243,199,122,.4); }
.kb-warn .fx { width: 18px; height: 18px; border-radius: 5px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.kb-warnbtn { height: 28px !important; background: var(--sf) !important; border: 1px solid #F1D9AE !important; color: var(--warn) !important; }
.kb-fontsel { position: relative; }
.kb-fontlist { position: absolute; z-index: 6; top: calc(100% + 4px); right: 0; left: 0; background: var(--sf); border: 1px solid var(--ln); border-radius: 12px; box-shadow: 0 14px 30px rgba(0,0,0,.2); padding: 6px; display: flex; flex-direction: column; }
.kb-fontlist button { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.kb-fontlist button small { font-size: 11px; color: var(--mut); }
.kb-fontlist button:hover, .kb-fontlist button.on { background: var(--pri50); }
.kb-fontlist button:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
.kb-tiles { display: flex; gap: 6px; }
.kb-tile { all: unset; box-sizing: border-box; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--mut); cursor: pointer; min-width: 0; }
.kb-tile .t { width: 100%; height: 40px; border-radius: 9px; border: 1.5px solid var(--ln); position: relative; display: grid; place-items: center; }
.kb-tile.on { color: var(--pri); }
.kb-tile.on .t { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri50); }
.kb-tile .lk { color: var(--gold); }
.kb-tile:focus-visible .t { outline: 2px solid var(--sel); outline-offset: 2px; }
.kb-imgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kb-imgs button { all: unset; box-sizing: border-box; cursor: pointer; border-radius: 9px; border: 1.5px solid var(--ln); overflow: hidden; display: flex; flex-direction: column; background: var(--sunk); }
.kb-imgs button.on { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri50); }
.kb-imgs img { width: 100%; height: 46px; object-fit: cover; display: block; }
.kb-imgs small { font-size: 10px; padding: 3px 5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-upsell { background: #1B1712; color: #F4EFE6; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 9px; }

/* page settings */
.kb-og { width: 112px; height: 59px; border-radius: 8px; flex: none; box-shadow: 0 0 0 1px var(--ln); }
.kb-fileln { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--pri); font-weight: 700; cursor: pointer; }
.kb-fileln .kb-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.kb-fileln:focus-within { outline: 2px solid var(--sel); outline-offset: 2px; border-radius: 4px; }
.kb-msgr { background: var(--sunk); flex: 1; }
.kb-bubble { align-self: flex-start; width: 100%; max-width: 300px; padding: 8px; border-radius: 16px 16px 4px 16px; background: var(--sf); box-shadow: 0 1px 2px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 6px; }
.kb-bubble * { overflow-wrap: anywhere; }
.kb-clamp2 { font-size: 12px; color: var(--mut); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-ogcard { height: 120px; border-radius: 8px; margin-top: 4px; display: flex; align-items: flex-end; padding: 12px; box-sizing: border-box; color: #fff; font-weight: 800; font-size: 17px; text-shadow: 0 1px 6px rgba(0,0,0,.45); }

/* templates gallery */
.kb-tplmodal { top: 40px; right: 60px; left: 60px; bottom: 40px; width: auto; max-height: none; transform: none; padding: 0; gap: 0; background: var(--bg); }
.kb-tplhead { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--ln); background: var(--sf); flex: none; flex-wrap: wrap; }
.kb-tplgrid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 22px 24px; align-content: start; overflow-y: auto; }
.kb-tplcard { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--ln); overflow: hidden; background: var(--sf); }
.kb-tplcard.cur { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri50); }
.kb-tplstage { height: 430px; position: relative; overflow: hidden; flex: none; }
.kb-tplmeta { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ln); }
.kb-tplbadge { position: absolute; top: 14px; right: 14px; height: 24px; padding: 0 10px; border-radius: 7px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 4px; z-index: 2; }
.kb-tplbadge--cur { background: var(--pri); color: var(--on-pri); }
.kb-tplbadge--gold { background: #1B1712; color: #F3D48B; font-weight: 800; }
.kb-tstage { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-top: 28px; box-sizing: border-box; overflow: hidden; }
.kb-tph { width: 176px; height: 380px; border-radius: 26px 26px 0 0; border: 6px solid #141416; border-bottom: 0; overflow: hidden; position: relative; box-sizing: border-box; flex: none; }
.kb-tph .b, .kb-tdesk .b { position: absolute; border-radius: 4px; }
.kb-tdesk { width: 86%; height: 78%; border-radius: 10px 10px 0 0; overflow: hidden; position: relative; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 12px 30px -12px rgba(0,0,0,.4); flex: none; }
.kb-prevmodal { top: 40px; bottom: 40px; right: 60px; left: 60px; width: auto; max-height: none; transform: none; }
.kb-prevstage { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; background: var(--canvas); border-radius: 14px; padding: 16px; }
.kb-prevphone { width: 344px; height: 640px; border-radius: 40px; background: #121214; padding: 10px; flex: none; overflow: hidden; position: relative; }
.kb-prevphone iframe { border: 0; background: #fff; border-radius: 30px; position: absolute; top: 10px; right: 10px; }
.kb-prevdesk { width: 760px; max-width: 100%; height: 560px; border-radius: 12px; overflow: hidden; position: relative; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1); flex: none; }
.kb-prevdesk iframe { border: 0; background: #fff; position: absolute; top: 0; right: 0; }

/* template cards (gallery) */
.kb-tplc.on { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri50); }
.kb-tplc .pv { height: 300px; }

@media (max-width: 1100px) {
  .kb-tplmodal, .kb-prevmodal { right: 16px; left: 16px; top: 16px; bottom: 16px; }
  .kb-tplgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .kb-tplmodal, .kb-prevmodal { right: 0; left: 0; top: 0; bottom: 0; border-radius: 0; }
  .kb-tplgrid { grid-template-columns: 1fr; padding: 14px; }
  .kb-tplstage { height: 380px; }
  .kb-prevphone { transform: scale(.9); transform-origin: top center; }
}

.kb-sheettabs { display: flex; padding: 10px 20px; flex: none; }
.kb-sheettabs .kb-seg { flex: 1; }
@media (max-width: 767px) {
  .kb-tplhead { position: relative; padding-inline-end: 56px; gap: 10px; }
  .kb-tplhead > .kb-ib { position: absolute; top: 12px; inset-inline-end: 10px; }
  .kb-tplhead > .kb-seg { margin-inline-start: 0 !important; }
}

/* step 1.11: pending-review banner (content text waits for moderation; public page keeps the old text) */
.kb-pendbar { background: var(--warn50); color: var(--warn); border-bottom: 1px solid #F1D9AE; padding: 7px 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; flex: none; }
.dark .kb-pendbar { border-bottom-color: rgba(243,199,122,.4); }

/* ───────────────── step 2.3: block library + custom block editors ───────────────── */

/* save-path pills can carry a validation message: keep them on one line, truncate */
.kb-savechip .kb-pill { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* library panel (replaces the settings column; B2-Library) */
.kb-settings--lib { width: clamp(420px, 34vw, 620px); }
.kb-lib { display: flex; flex-direction: column; min-height: 0; flex: 1; background: var(--sf); }
.kb-lib--panel { box-shadow: 20px 0 40px -20px rgba(0,0,0,.15); }
.kb-lib-h { display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px; flex: none; }
.kb-lib-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kb-lib-t b { font-size: 16px; }
.kb-lib-t span { font-size: 12px; color: var(--mut); line-height: 1.6; }
.kb-lib-f { padding: 0 20px 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--ln); flex: none; }
.kb-lib-q { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--ln); border-radius: 10px; color: var(--mut); background: var(--sf); }
.kb-lib-q:focus-within { outline: 2px solid var(--sel); outline-offset: 1px; }
.kb-lib-q input { all: unset; flex: 1; min-width: 0; font-size: 13px; color: var(--ink); font-family: inherit; }
.kb-lib-q input::placeholder { color: var(--mut); }
.kb-lib-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-cat { all: unset; box-sizing: border-box; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12px; font-weight: 600; color: var(--mut); background: var(--chip); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; }
.kb-cat:hover { background: var(--hover); }
.kb-cat:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.kb-cat.on { background: var(--ink); color: var(--sf); }
.kb-cat.gold { background: #FFF4E0; color: var(--gold); }
.dark .kb-cat.gold { background: rgba(243,212,139,.14); }
.kb-cat.gold.on { background: var(--gold); color: #fff; }
.kb-lib-g { grid-auto-rows: max-content; flex: 1; min-height: 0; padding: 14px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; align-content: start; }
.kb-bc { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ln); border-radius: 14px; overflow: hidden; background: var(--sf); cursor: pointer; user-select: none; touch-action: pan-y; }
.kb-bc:hover, .kb-bc:focus-visible { border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri50); outline: none; }
.kb-bc.busy { opacity: .55; pointer-events: none; }
.kb-bc .th { height: 104px; background: var(--sunk); padding: 14px; display: flex; flex-direction: column; gap: 6px; justify-content: center; position: relative; overflow: hidden; }
.kb-bc .mt { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-bc .mt b { font-size: 13px; }
.kb-bc .mt span { font-size: 11px; color: var(--mut); line-height: 1.6; }
.kb-bc-add { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); height: 32px; padding: 0 12px; border-radius: 9px; background: var(--pri); color: var(--on-pri); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 6px 16px rgba(15,107,102,.35); opacity: 0; transition: opacity .12s; pointer-events: none; }
.kb-bc:hover .kb-bc-add, .kb-bc:focus-visible .kb-bc-add { opacity: 1; }
.kb-bc--drag { opacity: .4; }
.kb-pro { position: absolute; top: 8px; left: 8px; z-index: 2; height: 20px; padding: 0 7px; border-radius: 5px; background: #1B1712; color: #F3D48B; font-size: 10px; font-weight: 800; display: flex; align-items: center; gap: 3px; }
.kb-lib-hid { grid-column: 1 / -1; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.kb-lib-hrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--ln); border-radius: 12px; font-size: 13px; }
.kb-lib-hrow .m { font-size: 11px; color: var(--mut); }
.kb-lib-note { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 12px; line-height: 1.7; background: #1B1712; color: #F4EFE6; }
.kb-lib-note--m { background: var(--sunk); color: var(--mut); font-size: 11px; padding: 6px 20px; }
.kb-lib-ghost { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; height: 34px; padding: 0 14px; border-radius: 10px; background: var(--pri); color: #fff; font: 700 13px/34px Vazirmatn, Tahoma, sans-serif; box-shadow: 0 12px 28px rgba(0,0,0,.3); direction: rtl; white-space: nowrap; }
body.kb-dragging, body.kb-dragging * { cursor: grabbing !important; user-select: none !important; }
.kb-vp--drop { outline: 3px dashed var(--sel); outline-offset: -3px; }
.kb-lib--sheet .kb-lib-g { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kb-lib--drawer .kb-lib-g { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 16px; gap: 10px; }
.kb-lib--drawer .kb-lib-h, .kb-lib--drawer .kb-lib-f, .kb-lib--drawer .kb-lib-note { padding-inline: 16px; }
.kb-lib--sheet .kb-bc .th, .kb-lib--drawer .kb-bc .th { height: 84px; padding: 11px; }
.kb-lib--sheet .kb-bc-add, .kb-lib--drawer .kb-bc-add { top: 26px; }

/* floating toolbar extras (custom blocks) */
.kb-float button.dng:hover { background: rgba(255,120,110,.35); }
.kb-fbadge { height: 20px; padding: 0 7px; border-radius: 6px; background: #F3D48B; color: #1B1712; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; margin-inline: 2px; }
.kb-fbadge.bad { background: #FFB4AB; }
.kb-fbadge.gold { background: #1B1712; color: #F3D48B; box-shadow: inset 0 0 0 1px rgba(243,212,139,.45); }

/* panel bits */
.kb-ib--dng { color: var(--dng); }
.kb-ib[disabled] { opacity: .4; cursor: default; }
.kb-hint--err { background: var(--dng50); color: var(--dng); }
.kb-hint--save { background: var(--pri50); color: var(--ink); }
.kb-custom { padding-bottom: 28px; }
.kb-errmsg { font-size: 11px; font-weight: 700; color: var(--dng); line-height: 1.7; }
.kb-cnt { font-size: 11px; color: var(--mut); line-height: 1.7; text-align: end; }
.kb-cnt.over { color: var(--dng); font-weight: 700; }
.kb-cnt--note { display: block; text-align: start; line-height: 1.9; }
.kb-inp[disabled] { opacity: .6; }
.kb-inp[dir="ltr"] { text-align: left; }

/* list editors (FAQ / links / testimonials) */
.kb-li { border: 1px solid var(--ln); border-radius: 10px; background: var(--sf); overflow: hidden; }
.kb-li.bad { border-color: #F4C7C3; background: var(--dng50); }
.dark .kb-li.bad { border-color: rgba(255,138,128,.4); }
.kb-li-h { display: flex; align-items: center; gap: 4px; padding: 6px 8px; min-height: 40px; }
.kb-li-grip { color: var(--mutfaint); flex: none; }
.kb-li-t { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.kb-li-tbtn { all: unset; box-sizing: border-box; flex: 1; min-width: 0; cursor: pointer; padding: 6px 4px; border-radius: 6px; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; }
.kb-li-tbtn:hover { background: var(--hover); }
.kb-li-tbtn:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
.kb-li-badtxt { color: var(--dng); font-weight: 700; }
.kb-li-b { display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 12px; }
.kb-ibs { all: unset; box-sizing: border-box; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; color: var(--mut); flex: none; }
.kb-ibs:hover { background: var(--hover); color: var(--ink); }
.kb-ibs:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
.kb-ibs[disabled] { opacity: .3; cursor: default; }
.kb-ibs[disabled]:hover { background: none; }
.kb-ibs.dng { color: var(--dng); }
.kb-addrow { all: unset; box-sizing: border-box; height: 38px; border-radius: 9px; border: 1px dashed var(--mutfaint); font-size: 12px; font-weight: 700; color: var(--pri); display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-family: inherit; }
.kb-addrow:hover { background: var(--pri50); }
.kb-addrow:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.kb-addrow[disabled] { opacity: .45; cursor: default; }
.kb-linkbtn { all: unset; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--pri); align-self: flex-start; padding: 3px 0; font-family: inherit; }
.kb-linkbtn:hover { text-decoration: underline; }
.kb-linkbtn:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; border-radius: 4px; }
.kb-linkbtn[disabled] { opacity: .45; cursor: default; text-decoration: none; }
.kb-stars { color: #E0A21B; font-size: 12px; font-weight: 700; flex: none; }
.kb-starpick { display: flex; gap: 2px; }
.kb-starpick button { all: unset; width: 30px; height: 30px; display: grid; place-items: center; font-size: 20px; color: var(--mutfaint); cursor: pointer; border-radius: 6px; }
.kb-starpick button.on { color: #E0A21B; }
.kb-starpick button:hover { background: var(--hover); }
.kb-starpick button:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }

/* hours editor */
.kb-hday { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--ln); border-radius: 10px; }
.kb-hday.off { background: var(--sunk); }
.kb-hday-h { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.kb-hday-h b { min-width: 62px; }
.kb-hclosed { font-size: 12px; color: var(--dng); font-weight: 700; }
.kb-hsum { font-size: 11px; color: var(--mut); margin-inline-start: auto; unicode-bidi: plaintext; }
.kb-hshift { display: flex; align-items: center; gap: 6px; }
.kb-time { width: 76px; text-align: center !important; padding: 7px 4px; font-variant-numeric: tabular-nums; }
.kb-hdash { font-size: 12px; color: var(--mut); }
.kb-htag { height: 20px; padding: 0 6px; border-radius: 5px; background: #EEF0FF; color: #3B45A8; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; }

/* image upload */
.kb-upl { display: flex; gap: 12px; align-items: center; }
.kb-upl-img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; border: 1px solid var(--ln); background: var(--sunk); flex: none; }
.kb-upl-ph { width: 84px; height: 84px; border-radius: 12px; border: 1.5px dashed var(--mutfaint); display: grid; place-items: center; color: var(--mut); flex: none; }
.kb-upl-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kb-upl-side small { font-size: 11px; color: var(--mut); }
.kb-upl-btn { position: relative; overflow: hidden; }
.kb-upl-btn.dis { opacity: .55; cursor: default; }
.kb-upl-in { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.kb-upl-btn:has(.kb-upl-in:focus-visible) { outline: 2px solid var(--sel); outline-offset: 2px; }

/* rich text editor */
.kb-rtb { display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--ln); border-radius: 10px; background: var(--sunk); position: sticky; top: 0; z-index: 2; }
.kb-rtb button { all: unset; width: 32px; height: 30px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.kb-rtb button:hover { background: var(--hover); }
.kb-rtb button.on { background: var(--pri50); color: var(--pri); }
.kb-rtb button[disabled] { opacity: .4; cursor: default; }
.kb-rtb button:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
.kb-rtb-sep { width: 1px; height: 18px; background: var(--ln); margin: 0 4px; }
.kb-rlink { display: flex; gap: 6px; align-items: center; }
.kb-rlink .kb-inp { flex: 1; min-width: 0; }
.kb-rrow { display: flex; gap: 6px; align-items: flex-start; }
.kb-rtype { width: 22px; text-align: center; padding-top: 9px; color: var(--mut); font-weight: 700; flex: none; font-size: 13px; }
.kb-rcell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kb-rcell textarea { resize: vertical; min-height: 56px; }
.kb-racts { display: flex; flex-direction: column; gap: 0; flex: none; }

@media (prefers-reduced-motion: reduce) { .kb-bc-add { transition: none; } }