/* utility helpers to avoid inline styles (CSP friendly) */
.flex{display:flex}
.flexCol{display:flex;flex-direction:column}
.alignCenter{align-items:center}
.alignStart{align-items:flex-start}
.itemsCenter{align-items:center;}
.justifyBetween{justify-content:space-between;}
.justifyEnd{justify-content:flex-end;}
.justifyStart{justify-content:flex-start}
.gap8{gap:8px}
.gap10{gap:10px}
.gap12{gap:12px}
.gap14{gap:14px}

.pad10{padding:10px;}
.pad10x14{padding:10px 14px}
.pad12x14{padding:12px 14px}
.pad14{padding:14px}
.pad16{padding:16px}
.pad18{padding:18px}
.pad24{padding:24px}

.mt3{margin-top:3px;}
.mt6{margin-top:6px;}
.mt8{margin-top:8px;}
.mt10{margin-top:10px;}
.mt12{margin-top:12px;}
.mt14{margin-top:14px}
.mt16{margin-top:16px}
.mt40{margin-top:40px}
.mb10{margin-bottom:10px;}
.my18{margin:18px 0}
.my12{margin:12px 0}
.my10{margin:10px 0}
.m0{margin:0}
.m0mb8{margin:0 0 8px 0}

.ml8{margin-left:8px;}
.pl18{padding-left:18px}

.center{text-align:center}
.textRight{text-align:right}
.lh17{line-height:1.7}
.fs18{font-size:18px}
.opacity80{opacity:.8}

.sp10{height:10px}
.sp12{height:12px}
.sp14{height:14px}
.sp16{height:16px}
.sp18{height:18px}
.sp24{height:24px}

.wrapRow{display:flex;justify-content:flex-start;gap:8px;flex-wrap:wrap}
.wrap{flex-wrap:wrap;}

.flex1{flex:1}
.w70{width:70%}
.w100{width:100%;}
.h120{height:120px;}
.hAuto{height:auto;}
.minH34{min-height:34px;}
.minH120{min-height:120px;}
.minH360{min-height:360px;}
.maxH60vh{max-height:60vh;}
.overflowAuto{overflow:auto;}

.minW90{min-width:90px;}
.minW140{min-width:140px;}
.minW160{min-width:160px;}
.minW240{min-width:240px;}
.minW260{min-width:260px;}
.maxW920{max-width:920px;}

.br12{border-radius:12px;}
.bgSoft{background:rgba(0,0,0,0.03);}
.bdSoft{border:1px solid rgba(0,0,0,.15);}

.cardInset{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff}

.muted6{margin-top:6px;color:var(--muted)}
.muted10{margin-top:10px;color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

.hidden{display:none !important;}
.hide{display:none !important}
.block{display:block;}

.gridSpanAll{grid-column:1 / -1}
.labelRow{display:flex; gap:8px; align-items:flex-start;}
.colorSwatch{width:44px; padding:0;}
.logo16{height:16px; width:auto; border-radius:4px;}
.preWrap{white-space:pre-wrap;}

.opsHighlight{ padding:12px; margin-bottom:12px; }