/* SocialStudio v3 (sx-): channel rail, per-scope sections (overview / inbox / compose / queue), on-demand preview carousel,
   bottom problems bar. Reuses .so-net / .so-phone / .so-av / .pv-* / .so-perm from widgets4.css. */
.sx .toast { pointer-events: auto; }
.sx .w-actions:empty { padding: 0; }
.sx-body { flex-direction: row !important; gap: 0 !important; padding: 0 !important; }
.sx [hidden] { display: none !important; }

/* rail */
.sx-rail { width: 228px; flex: none; border-top: 1px solid var(--border); border-inline-end: 1px solid var(--border); background: var(--muted); padding: 8px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.sx-rh { font-size: 11.5px; color: var(--muted-foreground); padding: 10px 6px 4px; }
.sx-con { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; cursor: pointer; transition: background .15s; outline: 0; }
.sx-con:hover { background: color-mix(in srgb, var(--foreground) 5%, transparent); }
.sx-con:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.sx-con.on { background: var(--card); box-shadow: 0 0 0 1px var(--border); }
.sx-con.off .so-net { filter: grayscale(.85); opacity: .7; }
.sx-cn { flex: 1; min-width: 0; display: grid; }
.sx-cn b { font-size: 12.5px; font-weight: 600; }
.sx-cn small { font-size: 10.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-allic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--border); flex: none; }
.sx-allic .i { width: 15px; height: 15px; }
.sx-con .switch { transform: scale(.82); }
.sx-cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--primary); color: var(--primary-foreground); font-size: 10.5px; font-weight: 600; display: inline-grid; place-items: center; flex: none; }
.sx-rdot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .sx-rdot.bad { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); }
.sx-addc { margin-top: auto; justify-content: flex-start; color: var(--primary); }
.so-net.wide { width: auto; min-width: 26px; padding: 0 4px; font-size: 9.5px; letter-spacing: .3px; }
.so-net.sm.wide { min-width: 22px; font-size: 8px; padding: 0 3px; }

/* main */
.sx-main { flex: 1; min-width: 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; position: relative; }
.sx-hd { padding: 10px 14px 0; flex: none; }
.sx-sc { display: flex; align-items: center; gap: 10px; }
.sx-sc > div { display: grid; } .sx-sc b { font-size: 14.5px; } .sx-sc small { font-size: 11.5px; color: var(--muted-foreground); }
.sx-tabs { display: flex; gap: 2px; padding: 4px 14px 0; border-bottom: 1px solid var(--border); flex: none; }
.sx-tc { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--muted); font-size: 11px; margin-inline-start: 5px; }
.sx-tabs .tab[aria-selected="true"] .sx-tc { background: var(--primary); color: var(--primary-foreground); }
.sx-view { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sx-at { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--c, var(--blue)) 13%, var(--card)); color: var(--c, var(--blue)); }
.sx-at.ok { --c: var(--green); } .sx-at.warn { --c: var(--amber); } .sx-at.bad { --c: var(--red); } .sx-at.info { --c: var(--blue); } .sx-at.mute { --c: var(--gray); }
.sx .up { color: var(--green) !important; } .sx .dn { color: var(--red) !important; }
.sx-h { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); }
.sx .btn.link { background: none; color: var(--primary); height: 22px; padding: 0 2px; }
.sx-pad { padding: 14px; font-size: 12.5px; text-align: center; }
.sx-note { display: flex; gap: 6px; font-size: 11.5px; color: var(--muted-foreground); line-height: 1.8; }
.sx-note .i { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.sx-alert { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; background: color-mix(in srgb, var(--amber) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--border)); flex: none; }
.sx-alert > span { flex: 1; } .sx-alert .i { color: var(--amber); width: 16px; height: 16px; flex: none; }
.sx-empty { flex: 1; display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; color: var(--muted-foreground); font-size: 12.5px; padding: 30px; max-width: 440px; margin: 0 auto; line-height: 1.9; }
.sx-empty b { color: var(--foreground); font-size: 15px; }
.sx-empty .so-net { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }

/* overview */
.sx-kp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: none; }
.sx-kp > div { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; display: grid; gap: 1px; min-width: 0; }
.sx-kp > div.warn { border-color: color-mix(in srgb, var(--amber) 50%, var(--border)); background: color-mix(in srgb, var(--amber) 6%, var(--card)); }
.sx-kp small { font-size: 11px; color: var(--muted-foreground); }
.sx-kp b { font-family: Morabba; font-size: 20px; font-weight: 500; line-height: 1.3; }
.sx-kp b.sx-sm { font-family: inherit; font-size: 13px; font-weight: 600; }
.sx-kp em { font-style: normal; font-size: 11px; color: var(--muted-foreground); }
.sx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: none; }
.sx-card { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; cursor: pointer; background: var(--card); transition: border-color .15s; position: relative; min-width: 0; }
.sx-card:hover, .sx-card:focus-visible { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.sx-card.off { opacity: .7; }
.sx-card .sx-cnt { position: absolute; top: -7px; inset-inline-end: 8px; }
.sx-cdt { flex: 1; min-width: 0; display: grid; } .sx-cdt b { font-size: 13px; } .sx-cdt small { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-sp { width: 70px; height: 24px; flex: none; }
.sx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sx-two > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sx-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex: none; }
.sx-li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12.5px; border-bottom: 1px solid var(--border); min-width: 0; }
.sx-li:last-child { border-bottom: 0; }
.sx-lb { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 12.5px; border-bottom: 1px solid var(--border); cursor: pointer; }
.sx-lb:last-child { border-bottom: 0; } .sx-lb:hover { background: var(--muted); }
.sx-lt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-li .muted, .sx-lb .muted { font-size: 11.5px; white-space: nowrap; }
.sx-th { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.sx-dl { width: 56px; height: 6px; border-radius: 6px; background: var(--muted); overflow: hidden; flex: none; } .sx-dl i { display: block; height: 100%; background: var(--green); border-radius: 6px; }
.sx-shorts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: none; }
.sx-short { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.sx-short:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.sx-short .i { grid-row: span 2; width: 18px; height: 18px; color: var(--primary); }
.sx-short b { font-size: 14px; } .sx-short span { font-size: 11px; color: var(--muted-foreground); }

/* inbox */
.sx-ib { flex: 1; min-height: 340px; display: grid; grid-template-columns: 250px minmax(0, 1fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sx-cvs { display: flex; flex-direction: column; border-inline-end: 1px solid var(--border); min-height: 0; }
.sx-cvf { margin: 8px; } .sx-cvf button { flex: 1; font-size: 12px; }
.sx-cvl { flex: 1; overflow: auto; }
.sx-cv { all: unset; box-sizing: border-box; display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 9px 10px; border-top: 1px solid var(--border); cursor: pointer; font-size: 12.5px; position: relative; }
.sx-cv:hover { background: var(--muted); }
.sx-cv.on { background: color-mix(in srgb, var(--primary) 8%, var(--card)); }
.sx-cv.new::after { content: ""; position: absolute; top: 14px; inset-inline-end: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.sx-cv > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sx-cv .row { justify-content: space-between; gap: 6px; padding-inline-end: 12px; } .sx-cv .row small { font-size: 10.5px; color: var(--muted-foreground); white-space: nowrap; }
.sx-cv.new b { font-weight: 700; }
.sx-cvc { font-size: 10.5px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-cv > div > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted-foreground); }
.sx-cv.new > div > span { color: var(--foreground); }
.sx-th2 { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sx-thh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.sx-thh > div { display: grid; } .sx-thh b { font-size: 13px; } .sx-thh small { font-size: 11px; color: var(--muted-foreground); }
.sx-msgs { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: color-mix(in srgb, var(--muted) 45%, var(--card)); }
.sx-bub { max-width: 78%; align-self: flex-start; display: grid; gap: 2px; padding: 7px 11px; border-radius: 14px; border-start-start-radius: 4px; background: var(--card); border: 1px solid var(--border); font-size: 12.5px; line-height: 1.8; }
.sx-bub.me { align-self: flex-end; background: var(--primary); color: var(--primary-foreground); border-color: transparent; border-radius: 14px; border-start-end-radius: 4px; }
.sx-bub small { font-size: 10px; opacity: .65; }
.sx-qrs { display: flex; gap: 5px; flex-wrap: wrap; padding: 8px 12px 0; }
.sx-qrs .chip { height: 26px; font-size: 11.5px; }
.sx-rbox { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px; }
.sx-rbox textarea { flex: 1; resize: none; border: 1px solid var(--input); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; background: var(--field-empty); color: inherit; outline: 0; line-height: 1.7; }
.sx-rbox textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.sx-rnote { padding: 0 12px 8px; font-size: 11px; }

/* composer */
.sx-cmp { display: flex; flex-direction: column; gap: 10px; max-width: 760px; width: 100%; margin: 0 auto; flex: 1; }
.sx-eb { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; background: color-mix(in srgb, var(--blue) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border)); }
.sx-eb.bad { background: color-mix(in srgb, var(--red) 7%, var(--card)); border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.sx-eb > .i { width: 16px; height: 16px; flex: none; color: var(--blue); } .sx-eb.bad > .i { color: var(--red); }
.sx-eb > div { flex: 1; display: grid; gap: 2px; } .sx-eb span { color: var(--muted-foreground); line-height: 1.7; } .sx-eb.bad span { color: var(--red); }
.sx-to { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sx-tol { font-size: 12px; color: var(--muted-foreground); margin-inline-end: 2px; }
.sx-ch { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 6px 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--card); font: inherit; font-size: 12.5px; color: inherit; cursor: pointer; }
.sx-ch.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--card)); }
.sx-ch.dis { opacity: .45; cursor: not-allowed; }
.sx-ch.fixed { cursor: default; }
.sx-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.sx-dot.ok { background: var(--green); } .sx-dot.warn { background: var(--amber); } .sx-dot.bad { background: var(--red); }
.sx-ct { display: flex; gap: 0; border-bottom: 1px solid var(--border); overflow-x: auto; flex: none; scrollbar-width: none; }
.sx-ct::-webkit-scrollbar { display: none; }
.sx-ct button { all: unset; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; font-size: 12.5px; color: var(--muted-foreground); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.sx-ct button[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--primary); font-weight: 600; }
.sx-own { font-size: 10px; padding: 0 5px; border-radius: 99px; background: var(--muted); color: var(--muted-foreground); font-weight: 500; }
.sx-edc { border: 1px solid var(--input); border-radius: 12px; background: var(--card); display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.sx-edc:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); }
.sx-edh { display: flex; align-items: center; gap: 10px; padding: 8px 12px 0; font-size: 12.5px; }
.sx-ta { border: 0; outline: 0; background: transparent; resize: none; font: inherit; font-size: 14px; line-height: 1.95; padding: 10px 12px; color: inherit; min-height: 120px; }
.sx-ta[readonly] { color: var(--muted-foreground); }
.sx-med { display: grid; gap: 6px; padding: 0 12px 8px; }
.sx-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.sx-img { width: 56px; height: 56px; border-radius: 9px; position: relative; }
.sx-img em { position: absolute; bottom: 3px; inset-inline-start: 3px; font-style: normal; font-size: 9.5px; background: rgb(0 0 0 / .55); color: #fff; border-radius: 4px; padding: 0 4px; }
.sx-addimg { width: 56px; height: 56px; border-radius: 9px; border: 1px dashed var(--border); background: transparent; color: var(--muted-foreground); display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; font: inherit; }
.sx-addimg:hover { border-color: var(--primary); color: var(--primary); }
.sx-addimg small { font-size: 10.5px; }
.sx-cnt2 { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 12px; border-top: 1px solid var(--border); }
.sx-opts { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.sx-opts .field { margin: 0; } .sx-opts .seg { flex-wrap: wrap; }
.sx-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.sx-opt .switch { transform: scale(.82); }
.sx-ft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 2px; border-top: 1px solid var(--border); margin-top: auto; position: sticky; bottom: -12px; background: var(--card); }
.sx-at2 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .sx-at2 .chip { height: 26px; font-size: 12px; padding: 0 9px; } .sx-at2 .muted { font-size: 11.5px; margin-inline: 4px; }
.sx-sum { all: unset; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 6px; height: 26px; border-radius: 8px; }
.sx-sum .i { width: 14px; height: 14px; }
.sx-sum.bad { color: var(--red); } .sx-sum.warn { color: var(--amber); } .sx-sum.ok { color: var(--green); }
.sx-sum:hover { background: var(--muted); }

/* preview dialog: one channel at a time */
.dlg.sx-pvd { width: 520px; max-height: 94%; display: flex; flex-direction: column; outline: 0; }
.sx-pvw { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.sx-pvr { display: flex; gap: 6px; align-items: center; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; background: color-mix(in srgb, var(--red) 8%, var(--card)); color: var(--red); }
.sx-pvr .i { width: 14px; height: 14px; flex: none; }
.sx-pvtabs { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.sx-pvtabs button { all: unset; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--border); font-size: 12px; cursor: pointer; }
.sx-pvtabs button[aria-selected="true"] { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
.sx-pvst { display: flex; align-items: center; gap: 10px; justify-content: center; }
.sx-pvnav { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); display: grid; place-items: center; cursor: pointer; flex: none; color: inherit; }
.sx-pvnav:hover { background: var(--muted); }
.sx-pvph { width: 280px; touch-action: pan-y; user-select: none; }
.sx-pvph .so-phone { height: 360px; }
.sx-pvph.in-l { animation: sx-in-l .28s var(--ease, ease) both; } .sx-pvph.in-r { animation: sx-in-r .28s var(--ease, ease) both; }
@keyframes sx-in-l { from { opacity: 0; transform: translateX(-28px); } } @keyframes sx-in-r { from { opacity: 0; transform: translateX(28px); } }
.sx-pvinfo { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.sx-pvinfo .row { gap: 8px; } .sx-pvinfo .row b { font-size: 13px; } .sx-pvinfo .row small { margin-inline-start: auto; }
.sx-pvbad { display: inline-flex; align-items: center; gap: 4px; color: var(--red); font-size: 12px; margin-inline-start: auto; } .sx-pvbad .i { width: 13px; height: 13px; }
.sx-chk { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.sx-chk li { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; line-height: 1.6; }
.sx-chk li > span { flex: 1; min-width: 0; }
.sx-chk .i { width: 13px; height: 13px; flex: none; }
.sx-chk .bad { color: var(--red); } .sx-chk .warn { color: var(--amber); } .sx-chk .info { color: var(--muted-foreground); } .sx-chk .ok { color: var(--green); }
.sx-chk .btn.link { background: none; color: var(--primary); height: 20px; padding: 0; font-size: 12px; }
.pv-miss { color: #b42318; font-size: 11px; }
.pv-n { position: absolute; top: 8px; left: 8px; font-size: 10px; background: rgb(0 0 0 / .55); color: #fff; border-radius: 99px; padding: 0 6px; }
.pv-img { position: relative; }
.pv-dots { display: flex; gap: 3px; justify-content: center; padding-top: 6px; } .pv-dots i { width: 5px; height: 5px; border-radius: 50%; background: #c7c7c7; } .pv-dots i.on { background: #0095f6; }
.pv-alb { display: grid; gap: 2px; height: 150px; } .pv-alb.n1 { grid-template-columns: 1fr; } .pv-alb.n2 { grid-template-columns: 1fr 1fr; } .pv-alb.n3, .pv-alb.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .pv-alb.n3 i:first-child { grid-row: span 2; }
.pv-xg { display: grid; gap: 2px; height: 140px; margin: 0 12px 10px; border-radius: 12px; overflow: hidden; } .pv-xg.n1 { grid-template-columns: 1fr; } .pv-xg.n2 { grid-template-columns: 1fr 1fr; } .pv-xg.n3, .pv-xg.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .pv-xg.n3 i:first-child { grid-row: span 2; }
.pv-sms { background: #f2f2f7; min-height: 100%; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pv-smsh { display: grid; text-align: center; padding-bottom: 6px; border-bottom: 1px solid #ddd; } .pv-smsh b { font-size: 12px; } .pv-smsh small { font-size: 10px; color: #888; }
.pv-smsb { align-self: flex-start; max-width: 88%; background: #e5e5ea; border-radius: 14px; border-end-start-radius: 4px; padding: 7px 10px; font-size: 12px; line-height: 1.7; }

/* connect dialogs */
.sx-test:empty { display: none; }
.sx-test { display: grid; gap: 10px; margin-top: 4px; }
.sx-ok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, var(--green) 10%, var(--card)); color: var(--green); }
.sx-ok span { color: var(--foreground); font-size: 12.5px; margin-inline-start: auto; }
.sx-lines { display: grid; gap: 6px; }
.sx-lines .radio { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 13px; }
.sx-lines .radio.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--card)); }
.sx-lines .radio div { display: grid; } .sx-lines .radio div span { font-size: 11.5px; color: var(--muted-foreground); }
.sx-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; color: var(--muted-foreground); }
.sx-caps span { display: flex; gap: 5px; align-items: center; } .sx-caps .i { width: 13px; height: 13px; color: var(--green); }
.sx-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sx-gi { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; }
.sx-gi > div { flex: 1; min-width: 0; display: grid; } .sx-gi b { font-size: 13px; } .sx-gi small { font-size: 11px; color: var(--muted-foreground); }

/* queue */
.sx-qbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
.sx-qfs button { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.sx-qfs button small { font-size: 10.5px; color: var(--muted-foreground); }
.sx-qfs button.bad { color: var(--red); } .sx-qfs button.bad small { color: var(--red); }
.sx-qcs { display: flex; gap: 5px; flex-wrap: wrap; flex: none; }
.sx-qcs .chip { height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px 0 6px; font-size: 12px; }
.sx-q { display: flex; flex-direction: column; gap: 12px; }
.sx-day { display: flex; flex-direction: column; gap: 5px; }
.sx-dh { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600; }
.sx-dh small { font-weight: 400; color: var(--muted-foreground); font-size: 11.5px; }
.sx-qi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; outline: 0; }
.sx-qi:hover, .sx-qi:focus-visible { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.sx-qi.done { background: color-mix(in srgb, var(--muted) 50%, var(--card)); }
.sx-qi.paused { opacity: .7; border-style: dashed; }
.sx-qi.draft { border-style: dashed; }
.sx-qi.failed { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); background: color-mix(in srgb, var(--red) 4%, var(--card)); }
.sx-qi.approval { border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.sx-qt { font-size: 12.5px; min-width: 42px; font-variant-numeric: tabular-nums; display: inline-flex; }
.sx-qt .i { width: 16px; height: 16px; color: var(--muted-foreground); }
.sx-qim { width: 36px; height: 36px; border-radius: 7px; flex: none; position: relative; }
.sx-qim em { position: absolute; bottom: 2px; inset-inline-end: 2px; font-style: normal; font-size: 9px; background: rgb(0 0 0 / .55); color: #fff; border-radius: 4px; padding: 0 3px; }
.sx-qb { flex: 1; min-width: 0; display: grid; gap: 3px; font-size: 12.5px; }
.so-qc { display: flex; gap: 3px; align-items: center; } .so-qc small { margin-inline-start: 4px; }
.sx-why { display: flex; gap: 4px; align-items: flex-start; color: var(--red); font-size: 11.5px; line-height: 1.6; } .sx-why .i { width: 12px; height: 12px; flex: none; margin-top: 3px; }
.sx-qa { display: flex; align-items: center; gap: 2px; color: var(--muted-foreground); }
.sx-qa .btn { opacity: 0; transition: opacity .15s; } .sx-qi:hover .sx-qa .btn, .sx-qi:focus-within .sx-qa .btn, .sx-qi.approval .sx-qa .btn { opacity: 1; }
.sx-qa > .i { width: 15px; height: 15px; }

/* bottom problems bar */
.sx-err { flex: none; }
.sx-err.show { border-top: 1px solid var(--border); }
.sx-errb { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; font-size: 12.5px; }
.sx-err.bad .sx-errb { background: color-mix(in srgb, var(--red) 8%, var(--card)); color: var(--red); }
.sx-err.warn .sx-errb { background: color-mix(in srgb, var(--amber) 10%, var(--card)); color: var(--amber); }
.sx-errb > .i { width: 15px; height: 15px; flex: none; }
.sx-errb b { white-space: nowrap; }
.sx-errf { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--foreground); opacity: .75; }
.sx-errc .i { width: 15px; height: 15px; }
.sx-errl { display: flex; flex-direction: column; max-height: 180px; overflow: auto; border-bottom: 1px solid var(--border); animation: reveal .2s both; }
.sx-erri { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 12.5px; cursor: pointer; border-top: 1px solid var(--border); }
.sx-erri:first-child { border-top: 0; }
.sx-erri:hover { background: var(--muted); }
.sx-erri > span { flex: 1; min-width: 0; }
.sx-erri > .i { width: 14px; height: 14px; color: var(--muted-foreground); }
.sx-erri.bad > span { color: var(--red); } .sx-erri.warn > span { color: var(--amber); }