/* ── Utility classes — generated to replace inline style="" attrs ── */

/* Display */
.u-dn  { display: none }
.u-df  { display: flex }
.u-dib { display: inline-block }

/* Visibility */
.u-empty { padding: 24px; opacity: 0.65 }
.u-empty2 { padding: 24px; opacity: 0.6 }

/* Width / height */
.u-w100  { width: 100% }
.u-wauto { width: auto }
.u-w400  { width: 400px }
.u-w420  { width: 420px }
.u-w440  { width: 440px }
.u-w480  { width: 480px }
.u-w540  { width: 540px }
.u-w560  { width: 560px }
.u-w640  { width: 640px }
.u-w700  { width: 700px }
.u-w740  { width: 740px; max-width: 96vw }

/* Max-width */
.u-mw200 { max-width: 200px }
.u-mw360 { max-width: 360px; text-align: center }
.u-mw420 { max-width: 420px }
.u-mw440 { max-width: 440px }
.u-mw480 { max-width: 480px }
.u-mw500 { max-width: 500px }
.u-mw520 { max-width: 520px }
.u-mw560 { max-width: 560px }
.u-mw640 { max-width: 640px }

/* Margin */
.u-m0      { margin: 0 }
.u-mt4     { margin-top: 4px }
.u-mt6     { margin-top: 6px }
.u-mt8     { margin-top: 8px }
.u-mt12    { margin-top: 12px }
.u-mt16    { margin-top: 16px }
.u-mb4     { margin-bottom: 4px }
.u-mb8     { margin-bottom: 8px }
.u-mb10    { margin-bottom: 10px }
.u-mb12    { margin-bottom: 12px }
.u-mb14    { margin-bottom: 14px }
.u-mb16    { margin-bottom: 16px }
.u-mb20    { margin-bottom: 20px }
.u-mb24    { margin-bottom: 24px }
.u-m0-end  { margin: 0; align-self: flex-end }
.u-m0-click { margin: 0; cursor: pointer }
.u-m0-min140 { margin: 0; min-width: 140px }
.u-m0-min160 { margin: 0; min-width: 160px }
.u-m0-min180 { margin: 0; min-width: 180px }
.u-m0-min200 { margin: 0; min-width: 200px }

/* Padding */
.u-p16    { padding: 16px }
.u-p20    { padding: 20px }
.u-p24    { padding: 24px }
.u-p14-16 { padding: 14px 16px }
.u-p14-20 { padding: 14px 20px }
.u-p16-20 { padding: 16px 20px }
.u-p18-20 { padding: 18px 20px }
.u-p20-blk { padding: 20px; display: block }
.u-p8-20-16 { padding: 8px 20px 16px }
.u-pr110  { padding-right: 110px }

/* Font size */
.u-fs11 { font-size: 11px }
.u-fs12 { font-size: 12px }
.u-fs13 { font-size: 13px }
.u-fs15 { font-size: 15px }
.u-fs16 { font-size: 16px }

/* Font weight */
.u-fw6 { font-weight: 600 }

/* Combos — font */
.u-fw6-sm    { font-weight: 600; font-size: 13px }
.u-meta      { font-size: 12px; color: var(--muted) }
.u-meta-xs   { font-size: 11px; color: var(--text-3); margin-left: 8px }
.u-meta-fw6  { font-size: 12px; font-weight: 600; color: var(--muted) }
.u-fs16-m0   { font-size: 16px; margin: 0 }
.u-fs15-mb14 { font-size: 15px; margin-bottom: 14px }
.u-fs13-p6   { font-size: 13px; padding: 6px 0 }

/* Color */
.u-tc      { color: var(--text) }
.u-accent  { color: var(--accent) }
.u-yellow  { color: var(--yellow) }
.u-red     { color: var(--red) }
.u-muted2  { color: var(--muted2) }
.u-accent-mt6 { color: var(--accent); margin-top: 6px }

/* Hint / description blocks */
.u-hint     { color: var(--muted); font-size: 13px; margin-bottom: 16px }
.u-hint-sm  { font-size: 13px; color: var(--muted); margin-bottom: 12px }
.u-hint-sm2 { font-size: 13px; color: var(--muted); margin-bottom: 14px }
.u-hint-sm3 { font-size: 13px; color: var(--muted); margin-bottom: 20px }
.u-hint-line { color: var(--muted); line-height: 1.6; margin: 12px 0 24px }
.u-sub-hint  { font-size: 13px; color: var(--muted2); margin-bottom: 14px }
.u-sub-hint2 { font-size: 13px; color: var(--muted2); margin-bottom: 16px }
.u-sub-hint3 { font-size: 13px; color: var(--muted2); margin-bottom: 18px }
.u-list-hint { color: var(--muted2); font-size: 12px; line-height: 1.9; padding-left: 16px }
.u-list-hint2 { color: var(--muted2); font-size: 12px; line-height: 1.9 }
.u-note-sm   { font-size: 12px; color: var(--muted2); margin-bottom: 12px }
.u-note-sm2  { font-size: 12px; color: var(--muted2); margin-bottom: 14px }
.u-note-sm3  { font-size: 12px; color: var(--muted2); margin-bottom: 16px }
.u-note-tc   { font-size: 12px; color: var(--text-3) }
.u-meta-row  { display: flex; gap: 14px; font-size: 11px; color: var(--muted) }
.u-meta-row2 { margin-top: 8px; display: flex; gap: 20px; font-size: 11px; color: var(--muted) }
.u-empty-msg  { color: var(--muted); text-align: center; padding: 20px }
.u-hint-mb16  { font-size: 12px; color: var(--muted); margin-bottom: 12px }

/* Flex rows */
.u-row-mb16   { display: flex; align-items: center; gap: 12px; margin-bottom: 16px }
.u-row-mb10   { display: flex; align-items: center; gap: 8px; margin-bottom: 10px }
.u-row-mb12   { display: flex; gap: 8px; align-items: center; margin-bottom: 12px }
.u-row-click  { display: flex; align-items: center; gap: 8px; cursor: pointer }
.u-row6       { display: flex; gap: 6px }
.u-row8       { display: flex; gap: 8px }
.u-row8-ac    { display: flex; gap: 8px; align-items: center }
.u-row16      { display: flex; align-items: center; gap: 16px }
.u-row6-ae    { display: flex; gap: 6px; align-self: end }
.u-row6-ac    { display: flex; gap: 6px; align-items: center }
.u-filter-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; align-items: flex-end }
.u-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px }
.u-header-row2 { display: flex; align-items: center; justify-content: space-between }
.u-stat-row   { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px }
.u-jcc        { justify-content: center }
.u-row-tabs   { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid var(--b2); padding-bottom: 0 }
.u-section-head { font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px }
.u-row-w100-jcc { width: 100%; justify-content: center }
.u-row-center { display: flex; justify-content: center; padding: 16px; gap: 8px }

/* Flex column */
.u-col12-mb20 { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; min-height: 60px }
.u-col12      { display: flex; flex-direction: column; gap: 12px }
.u-col14      { display: flex; flex-direction: column; gap: 14px }
.u-col16      { display: flex; flex-direction: column; gap: 16px }
.u-col8       { display: flex; flex-direction: column; gap: 8px }
.u-col8-mt4   { display: flex; flex-direction: column; gap: 8px; margin-top: 4px }
.u-flex1-m0   { flex: 1; margin: 0 }

/* Grid */
.u-grid2      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.u-grid2-16   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px }
.u-grid2-12   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px }
.u-grid2-10   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.u-grid2-1    { display: grid; grid-template-columns: 2fr 1fr; gap: 12px }
.u-grid4-10   { display: grid; grid-template-columns: 160px 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 10px }
.u-full-col   { grid-column: 1 / -1 }
.u-full-row8  { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px }
.u-grid-auto-280 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 24px }
.u-grid-auto-320 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px }
.u-grid-auto-320-mb { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px }
.u-grid-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px }

/* Icons */
.u-icon-box  { width: 40px; height: 40px; background: var(--accent2); border-radius: 10px; display: flex; align-items: center; justify-content: center }
.u-icon-box2 { width: 40px; height: 40px; background: #1a2e22; border-radius: 10px; display: flex; align-items: center; justify-content: center }
.u-icon-sm   { width: 20px; height: 20px; color: var(--accent) }
.u-icon-sm2  { width: 20px; height: 20px; color: #25D366 }
.u-icon-xs   { width: 14px; height: 14px; vertical-align: middle; margin-right: 4px }
.u-icon-11   { width: 11px; height: 11px; vertical-align: middle }
.u-sz16      { width: 16px; height: 16px }
.u-check16   { width: 16px; height: 16px; accent-color: var(--accent) }
.u-va-2      { vertical-align: -2px; margin-right: 4px }

/* Position / overflow */
.u-rel        { position: relative }
.u-chart      { position: relative; height: 200px }
.u-overflow-x { overflow-x: auto }
.u-overflow-xy { overflow-x: auto; max-height: 400px; overflow-y: auto }
.u-overflow-y { max-height: 420px; overflow-y: auto }
.u-p0-overflow { padding: 0; overflow: hidden }

/* Borders */
.u-divider-top { border-top: 1px solid var(--b1); padding-top: 16px }
.u-mb20-warn   { margin-bottom: 20px; border: 1px solid rgba(212,144,10,.35) }
.u-mb20-warn2  { margin-bottom: 20px; border: 1px solid rgba(212,144,10,.25) }

/* Misc */
.u-cursor-pointer { cursor: pointer }
.u-text-right     { text-align: right }
.u-resize-v       { resize: vertical }
.u-ib-mb4         { display: inline-block; margin-bottom: 4px }
.u-dn-mt12        { display: none; margin-top: 12px }
.u-dn-mb12        { display: none; margin-bottom: 12px }
.u-dn-mb16        { display: none; margin-bottom: 16px }
.u-dn-mb20        { display: none; margin-bottom: 20px }
.u-w100-mt8       { width: 100%; margin-top: 8px }
.u-w100-mt4       { width: 100%; margin-top: 4px }

/* Complex one-off components */
.u-code-input  { width: 100%; font-family: var(--mono); font-size: 11px; background: var(--bg); border: 1px solid var(--b2); border-radius: 7px; padding: 10px; color: var(--muted2); resize: none }
.u-flex1-mono  { flex: 1; font-size: 11px; font-family: var(--mono); background: var(--s1); border: 1px solid var(--b1); border-radius: 6px; padding: 6px 8px; color: var(--muted) }
.u-copy-input  { font-size: 12px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--b2); border-radius: 6px; color: var(--text); flex: 1 }
.u-bg-box      { background: var(--s2); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: 12px; color: var(--muted2) }
.u-warn-box    { display: none; background: rgba(212,144,10,.08); border: 1px solid rgba(212,144,10,.2); border-radius: 7px; padding: 10px 12px; font-size: 12px; color: var(--yellow); margin-top: 4px }
.u-hint-p16    { padding: 16px; font-size: 13px; line-height: 1.7; color: var(--text-2) }
.u-qr-container { background: #fff; border-radius: 12px; padding: 16px; display: inline-block; margin-bottom: 16px }
.u-dropdown    { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--s2); border: 1px solid var(--b1); border-radius: 6px; z-index: 200; min-width: 110px; box-shadow: 0 4px 16px rgba(0,0,0,.4) }
.u-dd-wrap     { position: relative; display: inline-block; width: 100% }
.u-dd-btn      { width: 100%; justify-content: space-between; display: flex }
.u-dd-menu     { left: 0; right: 0; max-height: 260px; overflow-y: auto; padding: 4px 0 }
.u-dd-menu .sc-menu-item { padding: 6px 12px; cursor: default; white-space: normal }
.u-dd-menu .sc-menu-item:hover { background: transparent }
.u-tooltip     { display: none; position: fixed; background: var(--s2); border: 1px solid var(--b1); border-radius: 6px; padding: 8px 12px; font-size: 12px; pointer-events: none; z-index: 300; max-width: 220px; box-shadow: 0 4px 12px rgba(0,0,0,.5) }
.u-mono-sm     { font-family: monospace; font-size: 11px }
.u-p14-flex    { padding: 14px 16px; display: flex; gap: 10px; align-items: flex-end }
.u-p14-row-stats { padding: 14px 16px; display: flex; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--b1); font-size: 13px }
.u-p14-row-btns { padding: 14px 16px; display: flex; gap: 10px; border-top: 1px solid var(--b1) }

/* Extra classes to complete inline-style elimination */
.u-empty-img  { width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; color: #666 }
.u-bg-warn    { background: rgba(212,144,10,.08) }
.u-bg-warn2   { background: rgba(212,144,10,.07) }
.u-label-click { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: 12px; cursor: pointer }
.u-row12      { display: flex; align-items: center; gap: 12px }
.u-mt8        { margin-top: 8px }
.u-mb8        { margin-bottom: 8px }
.u-mb4        { margin-bottom: 4px }
.u-mb12       { margin-bottom: 12px }
.u-mb14       { margin-bottom: 14px }
.u-mt6        { margin-top: 6px }
.u-mt16-tr    { margin-top: 16px; text-align: right }
.u-mb16-fs16  { margin-bottom: 16px; font-size: 16px }
.u-fs11-badge { font-size: 11px; padding: 4px 10px; flex-shrink: 0 }
.u-fs11-mb10  { font-size: 11px; color: var(--muted); margin-bottom: 10px }
.u-mono-flex  { font-family: monospace; font-size: 11px; flex: 1 }
.u-dn-mt8     { display: none; margin-top: 8px }
.u-fw6-mb8    { font-weight: 600; margin-bottom: 8px }
.u-fw6-mb12   { font-weight: 600; margin-bottom: 12px }
.u-btn-danger  { background: var(--red, #e53e3e); color: #fff; margin-left: auto }
.u-repo-badge  { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; font-family: var(--mono); padding: 2px 7px; border-radius: 99px; display: none }
.u-ssh-textarea { width: 100%; background: var(--bg); border: 1px solid var(--b2); border-radius: 8px; padding: 12px 14px; font-family: var(--mono); font-size: 11px; color: var(--muted2); resize: none; height: 72px; word-break: break-all; line-height: 1.5 }

/* JS template string utility classes */
.u-td-ts        { white-space: nowrap; font-size: 12px; color: var(--muted2) }
.u-td-meta      { font-size: 12px; color: var(--muted2) }
.u-td-meta-r    { font-size: 12px; color: var(--muted2); text-align: right }
.u-link-accent  { color: var(--accent); text-decoration: none }
.u-svc-url      { color: var(--accent); text-decoration: none; font-family: var(--mono); font-size: 12px }
.u-svc-badge    { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px }
.u-disk-badge   { background: rgba(232,56,56,.15); color: var(--red); font-size: 10px }
.u-dot-status   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0 }
.u-inst-card    { background: var(--s1); border: 1px solid var(--b1); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 12px }
.u-inst-info    { flex: 1; min-width: 0 }
.u-inst-name    { font-weight: 600; font-size: 14px }
.u-inst-badge   { font-size: 11px; background: var(--accent2); color: var(--accent); border-radius: 4px; padding: 1px 6px }
.u-inst-sub     { font-size: 12px; color: var(--muted) }
.u-inst-actions { display: flex; gap: 6px; flex-shrink: 0 }
.u-orphan-row   { background: var(--s2); border-radius: 8px; padding: 12px 14px; margin-bottom: 8px }
.u-orphan-hdr   { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.u-orphan-id    { font-size: 12px; font-family: var(--mono); color: var(--muted2) }
.u-orphan-mt    { font-size: 12px; margin-top: 2px }
.u-orphan-sel   { font-size: 12px; padding: 4px 8px; background: var(--bg); border: 1px solid var(--b2); border-radius: 6px; color: var(--text) }
.u-tbl-full     { width: 100%; min-width: 800px }
.u-row5         { display: flex; gap: 5px }
.u-row8-ac      { display: flex; align-items: center; gap: 8px }
.u-fs14-fw6     { font-weight: 600; font-size: 14px }
.u-fl1-mw0      { flex: 1; min-width: 0 }
.u-svc-actions  { display: flex; align-items: center; gap: 5px; flex-wrap: wrap }
.u-accent-ml4   { color: var(--accent); margin-left: 4px }
.u-red-fs12     { color: var(--red); font-size: 12px }
.u-action-label { font-family: var(--mono); font-size: 12px }
.u-subs-type    { font-size: 11px; color: var(--muted) }
.u-subs-id      { font-family: var(--mono); font-size: 11px; color: var(--muted); word-break: break-all; margin-top: 2px }
.u-subs-meta    { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted) }
.u-subs-hdr     { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap }
.u-subs-status  { font-size: 12px; font-weight: 600; white-space: nowrap }
.u-subs-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap }
.u-subs-del     { margin-top: 8px; display: flex; gap: 8px }
.u-qr-wait      { width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #666 }
.u-qr-img       { width: 200px; height: 200px; display: block }