/* =========================================================================
   Прототип №3 «Сервисная книжка» (web) — надстройки над стилями клона.
   Всё, что здесь, либо новые компоновки на примитивах дизайн-системы
   (сводка вкладки, карточка книжки в «Общем», подытоги групп, полоски
   долей), либо панель-объяснение прототипа. Токены — только из tokens.css.
   ========================================================================= */

/* ---------- сцена: клон слева, панель прототипа справа ---------- */
body.sb-proto{display:flex;overflow:hidden}
body.sb-proto #app{flex:1;min-width:0;width:auto}
body.sb-proto.proto-open .preview-master{right:380px}
body.sb-proto.proto-open .ao-snackbar{right:396px}
body.sb-proto.proto-open .sb-overlay{right:380px}
.sb-overlay{z-index:5000}
.proto-panel{
  flex:0 0 380px;width:380px;height:100vh;overflow-y:auto;scrollbar-width:none;
  background:#151B22;border-left:1px solid rgba(255,255,255,.08);padding:22px 22px 60px;color:#E7EAEE;
  font-family:var(--font-body);
}
.proto-panel::-webkit-scrollbar{display:none}
body.sb-proto:not(.proto-open) .proto-panel{display:none}
.proto-toggle{
  position:fixed;right:380px;top:50%;z-index:3000;transform:translateY(-50%);
  width:22px;height:64px;border-radius:8px 0 0 8px;background:#151B22;color:#B8BFC8;
  display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;
  box-shadow:-2px 0 8px rgba(0,0,0,.2);transition:right .2s ease;
}
body.sb-proto:not(.proto-open) .proto-toggle{right:0}
.proto-toggle .ao-icon{font-size:12px}
.proto-panel__eyebrow{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#8CABCD;margin-bottom:6px}
.proto-panel__title{font-size:20px;font-weight:600;line-height:1.25;color:#fff}
.proto-panel__lead{font-size:12.5px;font-weight:400;line-height:1.5;color:#B8BFC8;margin:8px 0 0}
.proto-panel__lead b,.proto-panel__list b,.proto-flow b{color:#fff;font-weight:600}
.proto-panel__lead code,.proto-panel__list code{font-family:ui-monospace,Consolas,monospace;font-size:11px;background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;color:#DCE4EC}
.proto-panel__now{margin-top:14px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:500;background:rgba(74,134,199,.14);border:1px solid rgba(74,134,199,.4);color:#BFD6EE}
.proto-panel__now b{color:#fff;font-weight:600}
.proto-panel__section{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#7E8894;margin:20px 0 10px}
.proto-flow{display:flex;gap:10px;padding:9px 11px;border-radius:10px;margin-bottom:6px;font-size:12px;line-height:1.5;color:#C7CDD5;border:1px solid transparent;transition:background .25s ease,border-color .25s ease}
.proto-flow__num{width:20px;height:20px;border-radius:50%;flex:0 0 20px;margin-top:1px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff}
.proto-flow--active{background:rgba(74,134,199,.14);border-color:rgba(74,134,199,.45)}
.proto-flow--active .proto-flow__num{background:#4A86C7;color:#fff}
.proto-panel__list{margin:0;padding:0 0 0 14px;display:flex;flex-direction:column;gap:8px;font-size:12px;line-height:1.5;color:#C7CDD5}
.proto-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4A86C7;box-shadow:0 0 6px rgba(74,134,199,.8);margin-right:4px;vertical-align:baseline}
.proto-var{margin-bottom:12px}
.proto-var__t{font-size:12px;font-weight:600;color:#E7EAEE;margin-bottom:6px}
.proto-var__chips{display:flex;flex-wrap:wrap;gap:6px}
.proto-var__chip{padding:4px 9px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:500;line-height:1.3;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#C7CDD5}
.proto-var__chip:hover{background:rgba(255,255,255,.12);color:#fff}
.proto-var__chip.is-on{background:rgba(74,134,199,.28);border-color:#4A86C7;color:#fff}
.proto-var__hint{margin-top:6px;font-size:11px;line-height:1.45;color:#8FA0B4}
.proto-check{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#C7CDD5;font-size:11px;cursor:pointer}
.proto-check:hover{color:#fff;background:rgba(255,255,255,.12)}
.proto-check__res{margin-top:8px;font-size:11px;color:#8FA0B4;white-space:pre-line}

/* ---------- таблицы реестров ---------- */
.sb-table th{white-space:nowrap}
.sb-table td{white-space:normal;max-width:320px}
.sb-table td.cell-what{min-width:220px;max-width:360px}
.sb-table td.cell-desc{min-width:220px;max-width:360px;white-space:normal;line-height:1.35;padding-top:6px;padding-bottom:6px;font-size:12px}
.sb-thgroups th{height:26px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-600);border-bottom:1px solid var(--border-soft);background:var(--light-grey);position:sticky;top:0;z-index:3}
.sb-thgroups th.has-group{border-left:1px solid var(--border-soft)}
.sb-thgroups th:first-child{border-left:none}
.sb-table thead tr:nth-child(2) th{top:26px}
.sb-table:not(:has(.sb-thgroups)) thead tr th{top:0}
.sb-table tfoot td{white-space:nowrap;font-size:12px}
.sb-table tbody tr.is-stale td,.sb-bd-table tbody tr.is-stale td{background:var(--status-danger-bg)}
.sb-table .ao-btn--x-small{white-space:nowrap}
.text-nowrap{white-space:nowrap}
.sb-ellipsis{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-wrap{white-space:normal}
.sb-link{color:var(--primary);cursor:pointer;font-weight:500;white-space:nowrap}
.sb-table td .sb-link + .cell-sub{white-space:nowrap}
.sb-link:hover{text-decoration:underline}
.sb-group-sum{margin-left:8px;font-weight:500;color:var(--text-700)}
.sb-table-wrap .ao-fab{position:absolute;right:24px;bottom:24px}
.masters-header .presets .ao-btn--preset-tab{white-space:nowrap}

/* ---------- превью ---------- */
.sb-statuses{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.sb-author .pict .ao-avatar{width:32px;height:32px;font-size:12px}
.sb-author .pict{margin-right:8px}
.sb-hero{margin-bottom:16px}
.sb-hero .preview-info-card .v{font-size:16px;font-weight:600;min-height:24px}
.sb-hero .preview-info-card .v small{font-size:10px;font-weight:500;color:var(--text-600)}
.sb-hero__s{font-size:10px;font-weight:400;line-height:1.4;color:var(--text-600);margin-top:2px}
.sb-hero-empty{font-size:12px;font-weight:500;color:var(--text-600)}
.sb-item-row{cursor:pointer}
.sb-item-row:hover .dinline{background:var(--primary-50)}
.sb-total{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:8px 8px 0;border-top:1px dashed var(--border-dashed);margin-top:4px}
.sb-obj{padding:10px 12px;border:1px solid var(--border-soft);border-radius:var(--r);margin-bottom:8px;cursor:pointer;transition:background .15s ease}
.sb-obj:hover{background:var(--light-grey)}
.sb-obj__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.sb-obj__head .t{font-size:12px;font-weight:500;line-height:1.35}
.sb-obj__head .s{font-size:12px;font-weight:500;white-space:nowrap}
.sb-obj__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px;font-weight:500}
.sb-subt{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--text-600);margin:10px 0 8px}
.sb-text{font-size:12px;font-weight:400;line-height:1.5;margin-bottom:8px}
.sb-hint{font-size:10px;font-weight:500;line-height:1.45;margin:6px 0 4px}
.sb-btn-row{display:flex;gap:8px;margin-bottom:16px}
.sb-btn-row .preview-open-card{margin-bottom:0;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.sb-btn-primary .ao-icon{font-size:14px}
.sb-btn-outline{background:none !important;border:1px solid var(--primary);color:var(--primary) !important}
.sb-btn-outline:hover{background:var(--primary-50) !important}
.preview-photos .ph{display:flex;overflow:hidden;background:var(--panel-grey)}
.preview-photos .ph img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- дашборд ---------- */
.sb-kpis{grid-column:span 12;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.sb-kpi.is-money .dash-kpi{font-size:22px;line-height:32px}
.sb-bd{display:flex;gap:16px;align-items:flex-start}
.sb-bd__chart{width:44%;min-width:200px;height:220px;flex:0 0 auto}
.sb-bd__table{flex:1;min-width:0}
.sb-bd-table{margin:0 -16px;width:calc(100% + 32px);font-size:12px}
.sb-bd-table th{height:32px;font-size:11px}
.sb-bd-table td{height:32px;white-space:normal}
.sb-bd-table tfoot td{position:static}
.sb-bar{display:inline-flex;align-items:center;gap:8px;width:100%}
.sb-bar i{display:block;height:8px;border-radius:4px;background:var(--primary);min-width:3px;flex:0 0 auto;max-width:calc(100% - 44px)}
.sb-bar span{font-size:11px;color:var(--text-700);white-space:nowrap}
.sb-dash .dash-card .ao-p4-regular{margin-top:auto}

/* ---------- паспорт: период, вкладки, сводка ---------- */
.sb-period{position:relative}
.sb-period__menu{top:calc(100% + 4px);right:0;left:auto;width:250px;padding:4px;z-index:120}
.sb-period__menu .ao-menu__item{font-size:12px;padding:6px 10px;gap:8px}
.sb-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:8px;background:var(--status-cancel-bg);color:#c99a1d;font-size:10px;font-weight:600;line-height:1}
.sb-tab-badge.is-stop{background:var(--status-danger-bg);color:var(--status-danger-fg)}
.sb-chip-link{cursor:pointer}
.sb-chip-link:hover{filter:brightness(.96)}
.sb-tab{padding:12px;min-height:62vh;display:flex;flex-direction:column;gap:12px}
.sb-tab__bar{display:flex;align-items:flex-start;gap:16px}
.sb-stats{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:8px;flex:1;min-width:0}
@media (max-width:1400px){.sb-stats{grid-template-columns:repeat(2,1fr)}}
.sb-stats .preview-info-card .v{font-size:18px;font-weight:600;line-height:1.3;margin-top:4px;min-height:24px}
.sb-stats .preview-info-card .v small{font-size:10px;font-weight:500;color:var(--text-600)}
.sb-stats .preview-info-card .v.text-error small,.sb-stats .preview-info-card .v.text-warning small{color:inherit;opacity:.7}
.sb-tab__actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto;padding-top:2px}
.sb-tab__note{white-space:nowrap}
.sb-card-table{margin:0 -12px;width:calc(100% + 24px)}
.sb-card-table th{top:0}
.sb-tab-empty{margin:auto;padding:24px 16px 32px}
.sb-hidden{padding:4px 0 0}

/* ---------- карточка книжки в «Общем» ---------- */
.mc-w-service .dw-body{padding:12px}
.sb-gw-stats{display:flex;gap:4px}
.sb-gw-stat{width:33.33%;min-width:0;padding:6px 8px;border-radius:var(--r);cursor:pointer;transition:background .15s ease}
.sb-gw-stat:hover{background:var(--light-grey)}
.sb-gw-stat .h{color:var(--text-700);margin-bottom:2px}
.sb-gw-stat .ao-h4{font-size:16px;line-height:1.3}
.sb-gw-stat .sub{color:var(--text-700);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-gw-chart-title{margin-bottom:2px}
.sb-gw-feed td{padding:8px 6px;font-size:12px;vertical-align:middle}
.sb-gw-feed .ao-status{font-size:9px;padding:3px 6px}
.sb-gw-feed tr:hover td{background:var(--light-grey)}
.mc-w-service .mc-empty{padding:16px}
.mc-w-service .mc-empty > .ao-icon{font-size:40px;margin-bottom:12px}

/* ---------- дашборд isSingleScreen: сетка 10 колонок, ряд KPI 94px, страница не скроллится ---------- */
/* второй ряд — не меньше 268px: шапка карточки + заголовок таблицы + 4 строки по 32px + итог;
   на низких экранах сетка получает вертикальный скролл вместо обрезания */
.sb-dash{display:grid;grid-template-columns:repeat(20,1fr);grid-template-rows:94px max(calc((100% - 94px - 32px) * .40), 268px) minmax(240px,1fr);gap:16px;padding:16px;overflow:hidden auto;align-content:stretch}
.sb-dash .sb-kpis{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;min-height:0}
.sb-dash .sb-kpi{padding:10px 16px;gap:2px;justify-content:center;min-height:0;overflow:hidden}
.sb-dash .dash-kpi{font-size:24px;line-height:30px}
.sb-dash .sb-kpi.is-money .dash-kpi{font-size:20px;line-height:30px}
.sb-dash .sb-kpi .ao-p4-regular{margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* классы в десятых долях ширины; сетка 20 колонок, чтобы делить 30 / 35 / 35 */
.sb-dash .span2{grid-column:span 4}.sb-dash .span3{grid-column:span 6}.sb-dash .span25{grid-column:span 5}.sb-dash .span35{grid-column:span 7}.sb-dash .span45{grid-column:span 9}.sb-dash .span4{grid-column:span 8}.sb-dash .span5{grid-column:span 10}.sb-dash .span6{grid-column:span 12}.sb-dash .span7{grid-column:span 14}.sb-dash .span10{grid-column:1/-1}
.sb-dash .row3{grid-row:3}
.sb-dcard{min-height:0;overflow:hidden;padding:12px 16px;gap:8px}
.sb-dcard .dash-card__head{flex:0 0 auto;min-height:24px}
.sb-dcard__note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.sb-scroll{flex:1;min-height:0;overflow:auto;position:relative;margin:0 -16px}
.sb-scroll .sb-bd-table{margin:0;width:100%}
.sb-dash .sb-bd-table tfoot td{position:sticky;bottom:0;background:var(--light-grey);z-index:2}
.sb-chart{position:absolute;inset:0 12px}
.sb-dcard__foot{flex:0 0 auto}
.sb-expand{width:24px;height:24px}
/* меню группировки — DashboardCardGroupingMenu + ao-draggable-checkboxes */
.sb-grp{position:relative}
.sb-grp__btn{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:var(--r);font-size:12px;font-weight:400;color:var(--text-body);white-space:nowrap}
.sb-grp__btn:hover{background:rgba(0,0,0,.04)}
.sb-grp__btn .ao-icon{font-size:10px;color:var(--text-600)}
.sb-grp__menu{top:calc(100% + 4px);right:0;left:auto;width:240px;padding:12px;z-index:150;cursor:default}
.sb-grp__menu .af-dnd-row{cursor:grab;border-radius:var(--r);padding:0 4px}
.sb-grp__menu .af-dnd-row:hover{background:var(--light-grey)}
.sb-grp__menu .af-dnd-row.is-dragging{opacity:.4}
.sb-grp__menu .af-checkbox{margin-bottom:0}
/* пивот «Проведённые работы» (TablePivotMaster) */
.sb-pivot th,.sb-pivot td{white-space:nowrap}
.sb-pivot__group td{background:var(--light-grey);font-weight:500;cursor:pointer;height:32px}
.sb-pivot__group.level-1 td{background:#F4F6F8}
.sb-pivot__group:hover td{background:#EDF1F4}
.sb-pivot__group.is-stale td{background:var(--status-danger-bg)}
.sb-pivot__chev{display:inline-flex;width:16px;height:16px;border-radius:50%;background:#D9E4EC;align-items:center;justify-content:center;margin-right:6px;vertical-align:middle;flex:0 0 auto}
.sb-pivot__chev .ao-icon{font-size:9px;color:var(--text-700);transform:rotate(90deg);transition:transform .2s ease}
.sb-pivot__group.is-open .sb-pivot__chev .ao-icon{transform:rotate(90deg) scale(-1,1)}
.sb-pivot__leaf td{font-weight:400}
.sb-pivot__leafrow{display:inline-flex;align-items:center;gap:8px;max-width:440px;vertical-align:middle}
.sb-pivot__leafrow .sb-ellipsis{display:inline-block;max-width:300px}
.sb-pivot__list{max-width:260px;font-size:11px;color:var(--text-700)}
.sb-pivot__list .sb-ellipsis{max-width:260px}
.sb-pivot td .sb-ellipsis{max-width:260px}
/* однострочные таблицы: фиксированная раскладка по ширине карточки — длинное режется, а не выталкивает скролл */
.sb-oneline{table-layout:fixed;width:100%}
.sb-oneline th,.sb-oneline td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-oneline td{height:32px;padding-top:0;padding-bottom:0}
.sb-oneline th{height:32px}
.sb-oneline td .sb-ellipsis,.sb-planned td .sb-ellipsis,.sb-pivot td .sb-ellipsis,.sb-pivot__list .sb-ellipsis{max-width:100%}
.sb-oneline .sb-pivot__leafrow{max-width:100%}
.sb-scroll{overflow-x:hidden}
/* многострочные таблицы-разрезы: та же фиксированная раскладка, но с переносом текста */
.sb-fixed{table-layout:fixed;width:100%}
.sb-fixed th,.sb-fixed td{overflow:hidden;text-overflow:ellipsis;white-space:normal}
.sb-fixed th{white-space:nowrap}
.sb-line{white-space:nowrap}
.sb-details td{white-space:nowrap}
.sb-details td .cell-sub{display:none}
/* полноэкранный диалог карточки */
.sb-modal{position:fixed;inset:0;z-index:4000;background:#fff;display:flex;flex-direction:column}
body.sb-proto.proto-open .sb-modal{right:380px}
.sb-modal__head{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border-soft);font-size:18px;font-weight:600}
.sb-modal__actions{margin-left:auto}
.sb-modal__head .x{flex:0 0 auto;margin-left:8px}
.sb-modal__head .sb-grp__menu{right:0;left:auto}
.sb-modal__body{flex:1;min-height:0;overflow:auto;padding:16px 24px}
.sb-modal__body .sb-bd-table{margin:0;width:100%}
.sb-modal__body .sb-bd-table tfoot td{position:sticky;bottom:0;background:var(--light-grey)}
.sb-modal__foot{padding:16px 24px;border-top:1px solid var(--border-soft);display:flex;justify-content:flex-end}
/* превью: фото машины на месте мини-карты */
.sb-photo{height:200px;margin-bottom:4px;background:var(--light-grey);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center}
.sb-photo img{height:140px;width:auto;max-width:70%;object-fit:contain}
.sb-planned td{font-size:12px}
.sb-planned td .sb-ellipsis{max-width:320px}
.sb-planned .sb-pivot__group td{height:32px}

/* ---------- формы: диалог AoDialogLayout с underlined-полями ---------- */
.sb-form-overlay{z-index:4500}
.sb-form{width:560px}
.sb-form--record{width:680px}
.sb-form__content{padding-top:16px;display:flex;flex-direction:column;gap:12px}
.sb-form .ao-field__control input[type=date]{font-size:13px}
.sb-form .ao-field__control select{appearance:none;-webkit-appearance:none;padding-right:20px;cursor:pointer}
.sb-form .ao-field__control.is-textarea{height:auto;padding:6px 0}
.sb-form .ao-field__control textarea{flex:1;min-width:0;border:none;outline:none;background:none;resize:vertical;font:inherit;font-size:14px;line-height:1.4;color:var(--text-body);min-height:44px;padding:0}
.sb-form__static{font-size:14px;line-height:32px}
.sb-form__grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;align-items:start}
.sb-form__grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px 16px;align-items:start}
.sb-form__toggler{align-self:flex-start;margin-top:2px}
.sb-form__block{border:1px solid var(--border-soft);border-radius:var(--r);padding:10px 12px 12px}
.sb-form__block-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;color:var(--text-700)}
.sb-form__chips{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.sb-form__defect{align-items:flex-start;padding:6px 8px;border-radius:var(--r)}
.sb-form__defect.is-on{background:var(--primary-50)}
.sb-form__defect .checkmark{margin-top:2px}
.sb-form__defect-text{display:flex;flex-direction:column;font-size:12px;line-height:1.35}
.sb-form__defect-text .s{font-size:10px;color:var(--text-600)}
.sb-form__item{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid var(--border-soft)}
.sb-form__item.is-editing{opacity:.45}
.sb-form__item > .ao-icon{font-size:16px;flex:0 0 auto}
.sb-form__item-body{flex:1;min-width:0}
.sb-form__item-body .t{font-size:12px;font-weight:500}
.sb-form__item-body .s{font-size:10px;color:var(--text-600)}
.sb-form__item b{font-size:12px;white-space:nowrap}
.sb-form__item .ao-icon-btn{opacity:.6}
.sb-form__item:hover .ao-icon-btn{opacity:1}
.sb-form__item-form{margin-top:8px;padding:10px 12px 12px;border-radius:var(--r);background:var(--light-grey);display:flex;flex-direction:column;gap:8px}
.sb-form__item-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.sb-form__total{display:flex;justify-content:space-between;font-size:12px;padding-top:8px}
.sb-form__suggest-wrap{position:relative}
.sb-form__suggest{position:absolute;left:0;right:0;top:100%;z-index:20;padding:4px;max-height:240px;overflow:auto}
.sb-form__suggest .ao-menu__item{font-size:12px;padding:6px 12px;gap:8px}
.sb-form__more{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--primary);padding:4px 0;align-self:flex-start}
.sb-form__more .ao-icon{font-size:10px}
.sb-form__file{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0}
.sb-form__file > .ao-icon{font-size:14px;color:var(--text-600)}
.sb-form__file .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-form__photos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.sb-form__photos .ph{position:relative;width:96px;height:72px;border-radius:var(--r);overflow:hidden;background:var(--panel-grey);display:flex;align-items:center;justify-content:center}
.sb-form__photos .ph img{width:100%;height:100%;object-fit:cover}
.sb-form__photos .ph .x{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:rgba(13,23,34,.6);color:#fff;display:flex;align-items:center;justify-content:center}
.sb-form__photos .ph .x .ao-icon{font-size:8px}
.sb-form__photos .ph.add{flex-direction:column;gap:2px;border:1px dashed var(--border-dashed);background:none;color:var(--text-700);font-size:10px;cursor:pointer}
.sb-form__photos .ph.add .ao-icon{font-size:16px}
.sb-form .ao-dialog__footer{align-items:center}
.sb-cell-actions{display:inline-flex;gap:4px}
.sb-link-btn{margin-top:8px}
.sb-btn-row + .preview-open-card{margin-top:-8px}
.sb-form__catbtn{flex:0 0 auto;color:var(--text-600)}
.sb-form__catbtn.is-on{color:var(--primary)}
.sb-form__suggest.is-all{max-height:300px}
.sb-form__suggest-head{display:flex;flex-direction:column;gap:1px;padding:6px 12px 8px;border-bottom:1px solid var(--border-soft);margin-bottom:4px}