/* Page Builder (Event Management → Templates → Page Builder).
   Visual language ported from mock 318 v5; every rule is scoped under .pb. */

.pb {
    --pb-coral: #E85D4A;
    --pb-coral-dark: #C94A38;
    --pb-coral-soft: #FDEEEB;
    --pb-ink: #1E2532;
    --pb-slate: #5A6474;
    --pb-line: #E4E7EC;
    --pb-green: #1E8E5A;
    --pb-green-soft: #E7F5EE;
    --pb-amber: #B77A0B;
    --pb-amber-soft: #FBF3E1;
    --pb-blue-soft: #EAF0FE;
    --pb-grey: #7A8290;
    --pb-grey-soft: #EEF0F3;
    --pb-navy: #121C35;
    color: var(--pb-ink);
    font-size: 14px;
}

.pb *, .pb *::before, .pb *::after { box-sizing: border-box; }

/* ---------- shared controls ---------- */
.pb .pb-btn {
    border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer; line-height: 1.3; display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; white-space: nowrap;
}
.pb .pb-btn:disabled { opacity: .5; cursor: not-allowed; }
.pb .pb-btn.sec { background: #fff; color: var(--pb-ink); border: 1px solid var(--pb-line); }
.pb .pb-btn.sec:hover:not(:disabled) { background: #F7F8FA; }
.pb .pb-btn.pri { background: var(--pb-coral); color: #fff; }
.pb .pb-btn.pri:hover:not(:disabled) { background: var(--pb-coral-dark); }
.pb .pb-btn.sm { padding: 6px 11px; font-size: 12.5px; }
.pb .pb-btn.tiny { padding: 4px 9px; font-size: 11.5px; border-radius: 7px; }
.pb .pb-btn.block { width: 100%; justify-content: center; }

.pb .pb-count { color: var(--pb-slate); font-size: 13px; }
.pb .pb-crumb { font-size: 11.5px; color: var(--pb-slate); }
.pb .pb-crumb a { color: var(--pb-slate); text-decoration: none; }
.pb .pb-crumb a:hover { color: var(--pb-coral-dark); }
.pb .pb-help { font-size: 12.5px; color: var(--pb-slate); line-height: 1.55; }
.pb .pb-hint { font-size: 11.5px; color: var(--pb-slate); margin-top: 4px; line-height: 1.5; }

.pb .pb-pill {
    font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 5px;
    text-transform: uppercase; letter-spacing: .3px; display: inline-block;
}
.pb .pb-pill.am { background: var(--pb-amber-soft); color: var(--pb-amber); }
.pb .pb-pill.gr { background: var(--pb-green-soft); color: var(--pb-green); }

.pb .pb-fld { margin-bottom: 15px; }
.pb .pb-fld > label, .pb .pb-fld .pb-label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 5px; }
.pb .pb-fld label em { font-style: normal; color: #A33; margin-left: 2px; }
.pb .pb-input, .pb .pb-fld input[type=text], .pb .pb-fld input[type=url], .pb .pb-fld input[type=email],
.pb .pb-fld textarea, .pb .pb-fld select {
    width: 100%; border: 1px solid var(--pb-line); border-radius: 8px; padding: 9px 11px;
    font-size: 13px; background: #fff; color: var(--pb-ink); font-family: inherit;
}
.pb .pb-fld textarea { min-height: 60px; resize: vertical; }
.pb .pb-input:focus, .pb .pb-fld input:focus, .pb .pb-fld textarea:focus, .pb .pb-fld select:focus {
    outline: none; border-color: var(--pb-coral); box-shadow: 0 0 0 3px var(--pb-coral-soft);
}

.pb .pb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pb .pb-inline { display: flex; align-items: center; gap: 10px; }

.pb .pb-seg { display: inline-flex; border: 1px solid var(--pb-line); border-radius: 9px; overflow: hidden; background: #fff; }
.pb .pb-seg button {
    border: 0; background: none; padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--pb-slate);
    cursor: pointer; border-right: 1px solid var(--pb-line); font-family: inherit;
}
.pb .pb-seg button:last-child { border-right: none; }
.pb .pb-seg button.on { background: var(--pb-coral-dark); color: #fff; }
.pb .pb-seg.tiny button { padding: 3px 8px; font-size: 11px; }
.pb .pb-hpx { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--pb-slate); }
.pb .pb-hpx input {
    width: 92px; border: 1px solid var(--pb-line); border-radius: 8px; padding: 6px 9px;
    font-size: 13px; background: #fff; color: var(--pb-ink); font-family: inherit;
}

.pb .pb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pb-line); margin-bottom: 14px; }
.pb .pb-tabs button {
    border: 0; background: none; padding: 9px 16px; font-size: 13px; font-weight: 700; color: var(--pb-slate);
    border-bottom: 3px solid transparent; cursor: pointer; font-family: inherit;
}
.pb .pb-tabs button.on { color: var(--pb-coral-dark); border-bottom-color: var(--pb-coral); }

.pb .pb-subhd {
    display: flex; align-items: center; font-size: 11px; letter-spacing: .7px; text-transform: uppercase;
    font-weight: 800; color: var(--pb-slate); margin: 6px 0 8px;
}

.pb .pb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; background: #C6CBD4; }
.pb .pb-dot.a { background: var(--pb-amber); }
.pb .pb-dot.p { background: var(--pb-green); }

.pb .pb-errors {
    background: #FDF1F1; border: 1px solid #F3C9C9; border-radius: 10px; padding: 12px 15px;
    font-size: 12.5px; color: #8A1F1F; margin-bottom: 14px; line-height: 1.55;
}
.pb .pb-errors ul { margin: 6px 0 0 18px; padding: 0; }
.pb .pb-sec-errors { margin: 14px 0 0; }
.pb .pb-btn[aria-busy] { cursor: progress; justify-content: center; }
.pb .pb-btn[aria-busy]:disabled { opacity: .85; }

/* ---------- listing (mock A1) ---------- */
.pb .pb-toprow { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.pb .pb-toprow h1 { font-size: 18px; margin: 0 0 3px; font-weight: 700; }
.pb .pb-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.pb .pb-prow {
    background: #fff; border: 1px solid var(--pb-line); border-radius: 10px; display: flex; align-items: center;
    gap: 12px; padding: 11px 14px; margin-bottom: 7px;
}
.pb .pb-prow:hover { background: #FAFAFB; }
.pb .pb-prow .nm { flex: 1; min-width: 0; }
.pb .pb-prow .nm b { font-size: 13.5px; display: block; }
.pb .pb-prow .nm small { color: var(--pb-slate); font-size: 12px; display: block; margin-top: 2px; }
.pb .pb-prow .rt { display: flex; gap: 7px; align-items: center; margin-left: auto; }
.pb .pb-prow .when { font-size: 12px; color: var(--pb-slate); white-space: nowrap; text-align: right; }
.pb .pb-prow .rt form { margin: 0; }
.pb .pb-btn.danger { color: #B42318; }
.pb .pb-btn.danger:hover:not(:disabled) { background: #FDECEA; border-color: #F3B4AC; }
.pb .pb-evt { color: #1E3A8A; font-weight: 700; }
.pb .pb-empty {
    border: 1.5px dashed #C6CBD4; border-radius: 10px; padding: 34px 20px; text-align: center; color: var(--pb-slate);
    background: #FCFCFD;
}

.pb .pb-thumb {
    width: 74px; display: grid; grid-template-columns: repeat(60, 1fr); grid-auto-rows: 9px; row-gap: 2px;
    padding: 4px 3px; border: 1px solid var(--pb-line); border-radius: 6px; background: #FAFAFB; flex-shrink: 0;
}
.pb .pb-thumb i { background: #D7DCE3; border-radius: 2px; margin: 0 1px; }
.pb .pb-thumb i.im { background: repeating-linear-gradient(45deg, #C9D3E3, #C9D3E3 3px, #E6EBF2 3px, #E6EBF2 6px); }
.pb .pb-thumb i.ev { background: repeating-linear-gradient(135deg, #EAF0FE, #EAF0FE 3px, #C5D5FA 3px, #C5D5FA 6px); }
.pb .pb-thumb.blank { display: flex; align-items: center; justify-content: center; height: 38px; font-size: 10px; color: var(--pb-slate); border-style: dashed; }

/* ---------- builder page ---------- */
.pb .pb-name-input {
    font-size: 18px; font-weight: 700; border: 1px solid transparent; border-radius: 8px; padding: 2px 8px;
    margin-left: -8px; min-width: 280px; max-width: 520px; width: 100%; color: var(--pb-ink); background: transparent;
}
.pb .pb-name-input:hover { border-color: var(--pb-line); }
.pb .pb-name-input:focus { outline: none; border-color: var(--pb-coral); background: #fff; box-shadow: 0 0 0 3px var(--pb-coral-soft); }
.pb .pb-name-input.is-invalid { border-color: #DC3545; }

.pb .pb-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.pb .pb-split.no-preview { grid-template-columns: minmax(0, 1fr); }
.pb .pb-split.no-preview .pb-prev { display: none; }

/* section accordion (mock B2) */
.pb .pb-acc { border: 1px solid var(--pb-line); border-radius: 10px; background: #fff; margin-bottom: 8px; overflow: hidden; }
.pb .pb-acc.dragging { opacity: .45; }
.pb .pb-acc.drop-before { box-shadow: 0 -3px 0 var(--pb-coral); }
.pb .pb-acc.drop-after { box-shadow: 0 3px 0 var(--pb-coral); }
.pb .pb-ahd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 13.5px; cursor: pointer; user-select: none; }
.pb .pb-acc.open .pb-ahd { border-bottom: 1px solid var(--pb-line); background: #FCFCFD; }
.pb .pb-drag { color: #A7AEB9; cursor: grab; font-size: 14px; }
.pb .pb-chev { color: var(--pb-slate); width: 12px; }
.pb .pb-ahd .st { margin-left: auto; font-size: 12px; color: var(--pb-slate); white-space: nowrap; }
.pb .pb-aact { margin-left: 10px; color: var(--pb-slate); border: 0; background: none; cursor: pointer; padding: 2px 4px; }
.pb .pb-aact:hover { color: #A33; }
.pb .pb-abody { padding: 14px 16px; }
.pb .pb-abody-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pb-line); }

/* layout tab (mock A2) */
.pb .pb-toolbar {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; border: 1px solid var(--pb-line);
    border-radius: 10px; background: #FAFAFB; margin-bottom: 12px;
}
.pb .pb-toolbar .sep { width: 1px; height: 22px; background: var(--pb-line); margin: 0 4px; }
.pb .pb-toolbar .pb-help { margin: 0 0 0 auto; }

.pb .pb-tb { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.pb .pb-grid-ed {
    display: grid; grid-template-columns: 168px repeat(60, minmax(0, 1fr));
    grid-auto-rows: minmax(92px, auto); row-gap: 6px; column-gap: 0; align-content: start;
}
.pb .pb-rh {
    grid-column: 1; border: 1px solid var(--pb-line); border-radius: 8px; padding: 7px 9px; background: #FCFCFD;
    font-size: 11px; margin-right: 6px; cursor: pointer;
}
.pb .pb-rh.sel-r { border-color: var(--pb-coral); background: var(--pb-coral-soft); box-shadow: inset 3px 0 0 var(--pb-coral); }
.pb .pb-rh.sel-r > b { color: var(--pb-coral-dark); }
.pb .pb-rh > b { font-size: 12px; display: block; margin-bottom: 4px; }
.pb .pb-rl { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; }
.pb .pb-rl > span { color: var(--pb-slate); }
.pb .pb-rl.mv { justify-content: flex-end; }
.pb .pb-rl.mv button { border: 0; background: none; color: var(--pb-slate); cursor: pointer; padding: 0 2px; font-size: 12px; }
.pb .pb-rl.mv button:hover { color: #A33; }
.pb .pb-stepper { display: inline-flex; align-items: center; border: 1px solid var(--pb-line); border-radius: 6px; overflow: hidden; background: #fff; }
.pb .pb-stepper button { border: 0; background: none; padding: 1px 7px; color: var(--pb-slate); cursor: pointer; font-family: inherit; }
.pb .pb-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.pb .pb-stepper b { padding: 1px 7px; font-size: 11.5px; border-left: 1px solid var(--pb-line); border-right: 1px solid var(--pb-line); }
.pb .pb-hbox { border: 1px solid var(--pb-line); border-radius: 6px; padding: 1px 8px; background: #fff; font-weight: 700; }

.pb .pb-cell {
    border: 1.5px dashed #9AA3B1; border-radius: 8px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--pb-ink);
    background: #fff; cursor: pointer; padding: 6px; margin: 0 3px; min-width: 0; overflow: hidden;
}
.pb .pb-cell { gap: 6px; font-weight: 400; cursor: grab; }
.pb .pb-cell.al-left { align-items: flex-start; text-align: left; }
.pb .pb-cell.al-right { align-items: flex-end; text-align: right; }
.pb .pb-cell.v-top { justify-content: flex-start; }
.pb .pb-cell.v-bottom { justify-content: flex-end; }
.pb .pb-cell.evc { background: repeating-linear-gradient(135deg, #EAF0FE, #EAF0FE 6px, #DCE6FC 6px, #DCE6FC 12px); border-color: #7C9CE0; }
.pb .pb-cell.frm { background: #F7F5FF; border-color: #A99BE0; }
.pb .pb-cs-none { color: #9AA3B1; font-size: 11.5px; font-style: italic; }
.pb .pb-cs-text {
    max-width: 100%; font-size: calc(11.5px * min(var(--ts, 1), 2)); line-height: 1.4; color: var(--pb-ink); word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pb .pb-cs-img { display: block; width: 100%; max-width: 160px; height: 46px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.pb .pb-cs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb .pb-cs-img.empty { display: flex; align-items: center; justify-content: center; border: 1.5px dashed #C6CBD4; color: #9AA3B1; font-size: 16px; }
.pb .pb-cs-btns { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; }
.pb .pb-cell:not(.al-left):not(.al-right) .pb-cs-btns { justify-content: center; }
.pb .pb-cell.al-right .pb-cs-btns { justify-content: flex-end; }
.pb .pb-cs-btns i { max-width: 100%; font-size: 10.5px; padding: 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb .pb-cs-btns i.pb-cs-nobtn { color: #9AA3B1; border: 1px dashed #C6CBD4; border-radius: 6px; }
.pb .pb-cs-tag { max-width: 100%; font-size: 12.5px; font-weight: 700; color: #4B3BA6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb .pb-cs-tag.ev { color: #1E3A8A; }
.pb .pb-cs-tag i { margin-right: 3px; }
.pb .pb-grid-ed.cell-dragging .pb-cell:not(.drag-src) { outline: 2px dashed var(--pb-coral); outline-offset: -4px; }
.pb .pb-cell.drag-src { opacity: .45; }
.pb .pb-cell.drop-hover { background: var(--pb-coral-soft); box-shadow: inset 0 0 0 2px var(--pb-coral); }
.pb .pb-cell.sel { border: 2px solid var(--pb-coral); box-shadow: 0 0 0 3px var(--pb-coral-soft); position: relative; }
.pb .pb-cell.sel::after {
    content: '✓'; position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--pb-coral); color: #fff; font-size: 10px; line-height: 16px; text-align: center;
}

.pb .pb-side-set { border: 1px solid var(--pb-line); border-radius: 10px; padding: 12px 14px; background: #fff; align-self: start; }
.pb .pb-selname { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.pb .pb-selname small { display: block; font-weight: 400; color: var(--pb-slate); font-size: 11.5px; }
.pb .pb-radio { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; cursor: pointer; border: 0; background: none; font-family: inherit; color: inherit; width: 100%; text-align: left; }
.pb .pb-radio span { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #9AA3B1; flex-shrink: 0; }
.pb .pb-radio span.on { border: 4px solid var(--pb-coral); }
.pb .pb-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; cursor: pointer; border: 0; background: none; font-family: inherit; color: inherit; text-align: left; }
.pb .pb-chk span {
    width: 17px; height: 17px; border: 1.5px solid #9AA3B1; border-radius: 4px; display: flex; align-items: center;
    justify-content: center; font-size: 11px; color: #fff; flex-shrink: 0;
}
.pb .pb-chk span.on { background: var(--pb-coral); border-color: var(--pb-coral); }
.pb .pb-cs-text.big { line-height: 1.2; }
.pb .pb-pos { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.pb .pb-pospad {
    display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 22px); gap: 3px; padding: 4px;
    border: 1.5px dashed #9AA3B1; border-radius: 8px; background: #fff; flex-shrink: 0;
}
.pb .pb-pospad button { border: 0; border-radius: 5px; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pb .pb-pospad button i { width: 6px; height: 6px; border-radius: 50%; background: #C6CBD4; }
.pb .pb-pospad button:hover { background: var(--pb-coral-soft); }
.pb .pb-pospad button:hover i { background: var(--pb-coral); }
.pb .pb-pospad button.on { background: var(--pb-coral); }
.pb .pb-pospad button.on i { width: 14px; height: 4px; border-radius: 2px; background: #fff; }
.pb .pb-posaxes { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb .pb-posaxes small { font-size: 11px; color: var(--pb-slate); }
.pb .pb-posaxes .pb-seg button { padding: 4px 9px; font-size: 11.5px; }
.pb .pb-tsize { display: flex; align-items: center; gap: 6px; }
.pb .pb-tsize select { flex: 1; min-width: 0; }
.pb .pb-tsize .pb-btn { min-width: 34px; font-weight: 800; }
.pb .pb-tsize .pb-btn.up { font-size: 14px; }
.pb .pb-bstyles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pb .pb-bs { border: 1.5px solid var(--pb-line); border-radius: 8px; padding: 9px 4px 6px; text-align: center; cursor: pointer; background: #fff; font-family: inherit; }
.pb .pb-bs.on { border-color: var(--pb-coral); background: var(--pb-coral-soft); }
.pb .pb-bs small { display: block; font-size: 11px; color: var(--pb-slate); margin-top: 5px; font-weight: 700; }
.pb .b-solid, .pb .b-out, .pb .b-link { font-style: normal; display: inline-block; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 6px; }
.pb .b-solid { background: #5A6474; color: #fff; }
.pb .b-out { border: 1.5px solid #5A6474; color: #5A6474; }
.pb .b-link { color: #5A6474; text-decoration: underline; padding: 5px 2px; }
.pb .pb-evlist { display: flex; flex-wrap: wrap; gap: 5px; }
.pb .pb-evlist button { font-size: 12px; border: 1px solid var(--pb-line); border-radius: 6px; padding: 5px 8px; cursor: pointer; background: #fff; font-family: inherit; color: inherit; }
.pb .pb-evlist button.on { background: var(--pb-blue-soft); border-color: #7C9CE0; color: #1E3A8A; font-weight: 700; }

/* colors & content tab (mock B2) */
.pb .pb-editing {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px;
    border: 1.5px solid var(--pb-coral); border-radius: 10px; background: var(--pb-coral-soft);
}
.pb .pb-editing.none { border-style: dashed; border-color: #C6CBD4; background: #FAFAFB; }
.pb .pb-editing-name { flex: 1; min-width: 200px; }
.pb .pb-editing-name span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--pb-coral-dark); }
.pb .pb-editing.none .pb-editing-name span { color: var(--pb-slate); }
.pb .pb-editing-name b { display: block; font-size: 15px; }
.pb .pb-editing-name small { display: block; font-size: 11.5px; color: var(--pb-slate); }
.pb .pb-minimap { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); grid-auto-rows: 12px; row-gap: 3px; width: 150px; }
.pb .pb-minimap button { border: 1px solid #B5BCC7; border-radius: 3px; background: #fff; margin: 0 1.5px; padding: 0; cursor: pointer; }
.pb .pb-minimap button:hover { border-color: var(--pb-coral); }
.pb .pb-minimap button.on { background: var(--pb-coral); border-color: var(--pb-coral-dark); }
.pb .pb-subnote { margin-left: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.pb .pb-colgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 10px; }
.pb .pb-swrow { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pb .pb-swrow button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--pb-line); cursor: pointer; padding: 0; }
.pb .pb-swrow button.on { outline: 2px solid var(--pb-coral); outline-offset: 2px; }
.pb .pb-hex { font-size: 11.5px; color: var(--pb-slate); border: 1px solid var(--pb-line); border-radius: 6px; padding: 3px 7px; font-family: monospace; }
.pb .pb-evbox { border: 1.5px solid #C9D8FA; background: #F6F9FF; border-radius: 10px; padding: 12px 14px; margin-bottom: 15px; }
.pb .pb-evhd { font-weight: 800; font-size: 13px; color: #1E3A8A; margin-bottom: 8px; }
.pb .pb-evhd small { font-weight: 400; color: var(--pb-slate); margin-left: 6px; }
.pb .pb-seg button:disabled { opacity: .45; cursor: not-allowed; }
.pb .pb-optlist { max-height: 220px; overflow-y: auto; border: 1px solid var(--pb-line); border-radius: 8px; padding: 4px 10px; background: #fff; }
.pb .pb-upl {
    border: 1.5px dashed #B5BCC7; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; display: flex;
    align-items: center; gap: 12px; background: #FAFAFB; min-height: 58px;
}
.pb .pb-upl img { height: 56px; width: auto; max-width: 180px; object-fit: cover; border-radius: 6px; border: 1px solid var(--pb-line); background: #fff; flex-shrink: 0; }
.pb .pb-upl .grow { flex: 1; color: var(--pb-slate); min-width: 0; }
.pb .pb-upl .grow small { display: block; font-size: 11.5px; margin-top: 2px; }
.pb .pb-recsize { color: var(--pb-ink); font-size: 12.5px; }
.pb .pb-btnrow { display: flex; gap: 6px; }
.pb .pb-btnrow > * { flex: 1; min-width: 0; }

/* preview (mock B2, right) */
.pb .pb-prev { border: 1px solid var(--pb-line); border-radius: 10px; overflow: hidden; background: #fff; position: sticky; top: 10px; }
.pb .pb-pnav {
    background: var(--pb-navy); color: #fff; font-size: 11px; font-weight: 800; padding: 9px 12px; display: flex;
    justify-content: space-between; gap: 8px; flex-wrap: wrap; text-transform: uppercase; letter-spacing: .3px;
}
.pb .pb-pnav span { font-weight: 400; opacity: .8; text-transform: none; letter-spacing: 0; }
.pb .pb-pbody { max-height: calc(100vh - 150px); overflow-y: auto; }
.pb .pb-pfoot { font-size: 10.5px; color: var(--pb-slate); padding: 6px 12px; border-top: 1px solid var(--pb-line); background: #FAFAFB; }
.pb .pb-pfoot.stale { background: var(--pb-amber-soft); color: var(--pb-amber); }
.pb .pb-pempty { padding: 40px 16px; text-align: center; color: var(--pb-slate); font-size: 12px; }

.pb .pb-pv-sec { background: var(--pv-bg); color: var(--pv-text); padding: 14px 12px; }
.pb .pb-pv-grid { display: grid; grid-template-columns: repeat(60, minmax(0, 1fr)); row-gap: 8px; column-gap: 0; }
.pb .pb-pv-cell { display: flex; flex-direction: column; gap: 6px; padding: 0 5px; min-width: 0; font-size: 11.5px; line-height: 1.5; }
.pb .pb-pv-cell.al-left { align-items: flex-start; text-align: left; }
.pb .pb-pv-cell.al-center { align-items: center; text-align: center; }
.pb .pb-pv-cell.al-right { align-items: flex-end; text-align: right; }
.pb .pb-pv-cell.v-middle { justify-content: center; justify-content: safe center; }
.pb .pb-pv-cell.v-bottom { justify-content: flex-end; justify-content: safe flex-end; }
.pb .pb-pv-cell.hx { overflow: hidden; }
.pb .pb-pv-text { word-break: break-word; overflow-wrap: anywhere; max-width: 100%; font-size: calc(var(--ts, 1) * 1em); }
.pb .pb-pv-text.big { line-height: 1.2; }
.pb .pb-pv-text.ph { opacity: .45; font-style: italic; }
.pb .pb-pv-imgbox { width: 100%; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.pb .pb-pv-imgbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb .pb-pv-imgph {
    width: 100%; height: 100%; border: 1.5px dashed #C6CBD4; border-radius: 6px; display: flex;
    align-items: center; justify-content: center; font-size: 11px; color: #7A8290;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.7), rgba(255,255,255,.7) 6px, rgba(238,241,245,.7) 6px, rgba(238,241,245,.7) 12px);
}
.pb .pb-pv-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.pb .pb-pv-sec .b-solid { background: var(--pv-btn); color: #fff; }
.pb .pb-pv-sec .b-out { border-color: var(--pv-btn); color: var(--pv-btn); }
.pb .pb-pv-sec .b-link { color: var(--pv-btn); }
.pb .pb-pv-btns a { text-decoration: none; }
.pb .pb-pv-btns a.b-link { text-decoration: underline; }

/* an existing Form Builder form inside the template */
.pb .pb-pv-form { width: 100%; container-type: inline-size; text-align: left; }
.pb .pb-pv-form-title { font-weight: 700; font-size: 1.15em; margin-bottom: 4px; }
.pb .pb-pv-form-desc { margin: 0 0 8px; opacity: .8; }
.pb .pb-pv-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 10px; margin: 8px 0 10px; }
.pb .pb-pv-field { grid-column: span 6; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb .pb-pv-field.w-half { grid-column: span 3; }
.pb .pb-pv-field.w-third { grid-column: span 2; }
.pb .pb-pv-field label { font-weight: 600; font-size: .92em; margin: 0; }
.pb .pb-pv-field label em { color: #C94A38; font-style: normal; }
.pb .pb-pv-field input:not([type=radio]):not([type=checkbox]), .pb .pb-pv-field select, .pb .pb-pv-field textarea {
    width: 100%; border: 1px solid #D5DAE1; border-radius: 6px; padding: .45em .6em; font: inherit; font-size: .92em;
    background: #fff; color: #1E2532; min-width: 0;
}
.pb .pb-pv-field small { opacity: .75; font-size: .82em; }
.pb .pb-pv-choices { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .92em; }
.pb .pb-pv-submit { border: 0; cursor: default; font-family: inherit; }
@container (max-width: 420px) {
    .pb .pb-pv-field.w-half, .pb .pb-pv-field.w-third { grid-column: span 6; }
}
.pb .pb-pv-ev {
    width: 100%; flex: 1 1 auto; min-height: 60px; border: 1.5px solid #C9D8FA; border-radius: 7px; background: #F6F9FF;
    color: #1E3A8A; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 8px; font-weight: 700; font-size: 11px;
}
.pb .pb-pv-ev small { font-weight: 400; color: var(--pb-slate); margin-top: 2px; }

/* full page preview (opens in its own tab) */
.pb-full-body { margin: 0; background: #fff; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.pb.pb-full { font-size: 16px; min-height: 100vh; }
.pb.pb-full .pb-pv-sec { padding: 48px 24px; }
.pb.pb-full .pb-pv-grid { max-width: 1140px; margin: 0 auto; row-gap: 24px; }
.pb.pb-full .pb-pv-cell { padding: 0 12px; gap: 14px; font-size: 16px; line-height: 1.65; }
.pb.pb-full .pb-pv-imgbox, .pb.pb-full .pb-pv-imgph { border-radius: 10px; }
.pb.pb-full .pb-pv-imgph { font-size: 14px; }
.pb.pb-full .pb-pv-btns { gap: 10px; }
.pb.pb-full .b-solid, .pb.pb-full .b-out, .pb.pb-full .b-link { font-size: 14.5px; padding: 10px 20px; border-radius: 8px; }
.pb.pb-full .b-link { padding: 10px 4px; }
.pb.pb-full .pb-pv-ev { min-height: 160px; font-size: 15px; padding: 20px; border-radius: 10px; }
.pb.pb-full .pb-pv-ev small { font-size: 13px; margin-top: 6px; }
.pb.pb-full .pb-pempty { padding: 120px 24px; font-size: 15px; }
@media (max-width: 820px) {
    /* Phones: one column, content-sized rows (images keep their shape). Overrides the inline grid placement. */
    .pb .pb-pv-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none !important; }
    .pb .pb-pv-cell { grid-column: 1 / -1 !important; grid-row: auto !important; order: var(--pv-order, 0); }
    .pb .pb-pv-cell.hx { overflow: visible; }
    .pb.pb-full .pb-pv-grid { row-gap: 18px; }
    .pb.pb-full .pb-pv-sec { padding: 32px 14px; }
    .pb.pb-full .pb-pv-cell { padding: 0 6px; }
    .pb.pb-full .pb-pv-text { font-size: calc(min(var(--ts, 1), 2) * 1em); }
}

@media (max-width: 1400px) {
    .pb .pb-tb { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
    .pb .pb-split { grid-template-columns: minmax(0, 1fr); }
    .pb .pb-prev { position: static; }
}
@media (max-width: 820px) {
    .pb .pb-colgrid, .pb .pb-two { grid-template-columns: 1fr; }
    .pb .pb-prow { flex-wrap: wrap; }
    .pb .pb-prow .rt { flex-wrap: wrap; justify-content: flex-end; }
    .pb .pb-grid-ed { grid-template-columns: 130px repeat(60, minmax(0, 1fr)); }
}