/* Socialteria Studio — inherits the theme's design tokens (with fallbacks). */
.sts-bar, .sts-panel, .sts-viewer, .sts-compose, .sts-dialog, .sts-toast {
	--s-surface: var(--surface, #fff);
	--s-surface-2: var(--surface-2, #f6f5fb);
	--s-surface-3: var(--surface-3, #eeecf6);
	--s-border: var(--border, #e7e4f0);
	--s-text: var(--text, #15121f);
	--s-text-2: var(--text-2, #57526b);
	--s-text-3: var(--text-3, #8e89a3);
	--s-accent: var(--accent, #7c3aed);
	--s-red: var(--red, #e11d48);
	--s-grad: var(--grad, linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #f59e0b 100%));
	--s-ring: var(--ring, conic-gradient(from 210deg, #f59e0b, #db2777, #7c3aed, #06b6d4, #f59e0b));
	--s-r: var(--r, 16px);
	--s-r-sm: var(--r-sm, 10px);
	--s-shadow: var(--shadow-3, 0 24px 60px -20px rgba(55,20,110,.35));
	font-family: var(--font, Inter, system-ui, sans-serif);
	box-sizing: border-box;
}
.sts-bar *, .sts-panel *, .sts-viewer *, .sts-compose *, .sts-dialog * { box-sizing: border-box; }
html.sts-lock, html.sts-lock body { overflow: hidden; }
.sts-panel [hidden], .sts-viewer [hidden], .sts-compose [hidden], .sts-dialog [hidden] { display: none !important; }
.sts-panel svg, .sts-viewer svg, .sts-compose svg, .sts-dialog svg, .sts-bar svg, .sts-promo svg {
	width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none;
}

/* ---------- Stories bar ---------- */
.sts-bar { padding: 14px 6px 10px; margin-bottom: 16px; overflow: hidden; }
.sts-track { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 8px; scroll-snap-type: x proximity; }
.sts-track::-webkit-scrollbar { display: none; }
.sts-bubble { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; flex: none; scroll-snap-align: start; }
.sts-av { all: unset; cursor: pointer; position: relative; border-radius: 50%; display: block; }
.sts-av:focus-visible { box-shadow: var(--focus, 0 0 0 3px rgba(124,58,237,.35)); }
.sts-ring { display: block; width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: var(--s-ring); transition: transform .15s; }
.sts-av:hover .sts-ring { transform: scale(1.04); }
.sts-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--s-surface); background: var(--s-surface-3); display: block; }
.sts-ring.is-seen { background: var(--s-border); }
.sts-ring.is-empty { background: transparent; padding: 0; }
.sts-ring.is-empty img { border: 0; }
.sts-ring-live { display: grid; place-items: center; background: var(--s-surface-2); border: 1.5px dashed var(--s-border); padding: 0; color: var(--s-text-2); }
.sts-ring-live.is-on { background: linear-gradient(135deg, #e11d48, #f97316); border: 0; color: #fff; }
.sts-ring-live .sts-live-ico svg { width: 26px; height: 26px; }
.sts-livecount { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); background: var(--s-red); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; border: 2px solid var(--s-surface); white-space: nowrap; }
.sts-plus { all: unset; cursor: pointer; position: absolute; top: 46px; left: 50%; margin-left: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--s-accent); color: #fff; border: 2.5px solid var(--s-surface); }
.sts-plus svg { width: 13px; height: 13px; stroke-width: 3; }
.sts-name { font-size: 12px; color: var(--s-text-2); max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Sidebar + promo ---------- */
.sts-promo-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sts-chip { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--surface, #fff); color: var(--accent, #7c3aed); border: 1px solid var(--border, #e7e4f0); }
.sts-chip:hover { border-color: var(--accent, #7c3aed); }

/* ---------- Buttons ---------- */
.sts-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 12px; background: var(--s-surface-2); color: var(--s-text); border: 1px solid var(--s-border); white-space: nowrap; }
.sts-btn:hover { background: var(--s-surface-3); }
.sts-btn:disabled { opacity: .55; cursor: default; }
.sts-btn svg { width: 18px; height: 18px; }
.sts-btn-grad { background: var(--s-grad); color: #fff; border: 0; }
.sts-btn-grad:hover { background: var(--s-grad); filter: brightness(1.06); }
.sts-btn-danger { background: var(--s-red); color: #fff; border: 0; }
.sts-btn-danger:hover { background: var(--s-red); filter: brightness(1.08); }
.sts-btn-ghost { background: transparent; }
.sts-iconbtn { all: unset; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: inherit; }
.sts-iconbtn:hover { background: rgba(127,127,127,.15); }
.sts-linkbtn { all: unset; cursor: pointer; color: var(--s-accent); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.sts-linkbtn svg { width: 16px; height: 16px; }
.sts-btn:focus-visible, .sts-iconbtn:focus-visible, .sts-linkbtn:focus-visible, .sts-chip:focus-visible, .sts-pill:focus-visible { box-shadow: 0 0 0 3px rgba(124,58,237,.45); }

/* ---------- Panel ---------- */
.sts-panel { position: fixed; inset: 0; z-index: 100000; background: var(--overlay, rgba(14,10,24,.55)); display: none; align-items: center; justify-content: center; padding: 24px; color: var(--s-text); }
.sts-panel.is-open { display: flex; animation: sts-fade .15s ease; }
.sts-sheet { width: min(1100px, 100%); height: min(860px, 100%); background: var(--s-surface); border-radius: 22px; box-shadow: var(--s-shadow); display: flex; flex-direction: column; overflow: hidden; }
.sts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--s-border); }
.sts-tabs { display: flex; gap: 4px; background: var(--s-surface-2); padding: 4px; border-radius: 14px; }
.sts-tabs button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--s-text-2); }
.sts-tabs button svg { width: 18px; height: 18px; }
.sts-tabs button.is-active { background: var(--s-surface); color: var(--s-text); box-shadow: 0 1px 3px rgba(21,18,31,.1); }
.sts-body { flex: 1; overflow-y: auto; }
.sts-pad { padding: 20px 24px 32px; }
.sts-h { font-size: 16px; font-weight: 700; margin: 26px 0 12px; }
.sts-muted { color: var(--s-text-3); font-size: 13px; margin: 0; }
.sts-empty { color: var(--s-text-3); font-size: 14px; margin: 4px 0; }
.sts-empty-big { text-align: center; padding: 36px 16px; color: var(--s-text-3); }
.sts-empty-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--s-surface-2); margin-bottom: 8px; }
.sts-empty-ico svg { width: 26px; height: 26px; }
.sts-loading { height: 160px; display: grid; place-items: center; }
.sts-loading::after, .sts-spin { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(127,127,127,.25); border-top-color: var(--s-accent, #7c3aed); animation: sts-rot .8s linear infinite; }

/* Go live */
.sts-golive { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px 24px; padding: 20px; border-radius: var(--s-r); background: var(--grad-soft, var(--s-surface-2)); border: 1px solid var(--s-border); align-items: end; }
.sts-golive-intro { grid-row: span 3; align-self: start; }
.sts-golive h3 { margin: 0 0 8px; font-size: 18px; }
.sts-golive ol { margin: 0; padding-left: 18px; color: var(--s-text-2); font-size: 14px; line-height: 1.6; }
.sts-golive label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--s-text-2); }
.sts-golive input, .sts-compose input, .sts-chat-form input {
	font: inherit; font-size: 14px; color: var(--s-text); background: var(--s-surface); border: 1px solid var(--s-border); border-radius: 12px; padding: 10px 12px; outline: none; width: 100%;
}
.sts-golive input:focus, .sts-chat-form input:focus { border-color: var(--s-accent); box-shadow: 0 0 0 3px rgba(124,58,237,.18); }
.sts-golive.is-on { grid-template-columns: 1fr auto; align-items: center; }

/* Live grid */
.sts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.sts-lcard { color: inherit; text-decoration: none; display: block; }
.sts-thumb { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: var(--s-grad); display: grid; place-items: center; }
.sts-thumb.prov-twitch { background: linear-gradient(135deg, #9146ff, #5c16c5); }
.sts-thumb.prov-kick { background: linear-gradient(135deg, #0b0e0f, #1f3d10); }
.sts-thumb.prov-facebook { background: linear-gradient(135deg, #1877f2, #0b4bb3); }
.sts-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sts-thumb-av { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); object-fit: cover; }
.sts-lcard:hover .sts-thumb { filter: brightness(1.05); }
.sts-badge-live, .sts-badge-ended { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 3px 7px; border-radius: 6px; color: #fff; background: var(--s-red, #e11d48); vertical-align: middle; }
.sts-badge-ended { background: rgba(60,56,75,.85); letter-spacing: 0; font-weight: 700; }
.sts-thumb .sts-badge-live, .sts-thumb .sts-badge-ended { position: absolute; top: 10px; left: 10px; }
.sts-eye { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 6px; }
.sts-eye svg { width: 14px; height: 14px; }
.sts-lmeta { display: flex; gap: 10px; padding: 10px 2px; }
.sts-lmeta img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.sts-lmeta b { display: block; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sts-lmeta span { font-size: 12.5px; color: var(--s-text-3); }

/* Watch */
.sts-watch { display: grid; grid-template-columns: 1fr 340px; height: 100%; min-height: 0; }
.sts-stage { overflow-y: auto; padding: 20px; }
.sts-player { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; }
.sts-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sts-winfo { padding: 14px 2px; }
.sts-host { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.sts-host img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sts-host b { display: block; font-size: 17px; }
.sts-host span { color: var(--s-text-3); font-size: 13px; }
.sts-wstats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.sts-viewers { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--s-text-2); }
.sts-viewers svg { width: 18px; height: 18px; }
.sts-wstats .sts-btn { padding: 8px 14px; font-size: 13px; }
.sts-hint { margin: 12px 0 0; font-size: 13px; color: var(--s-text-2); background: var(--s-surface-2); padding: 10px 12px; border-radius: 10px; }
.sts-chat { border-left: 1px solid var(--s-border); display: flex; flex-direction: column; min-height: 0; }
.sts-chat-head { padding: 14px 16px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--s-border); }
.sts-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.sts-msg { display: flex; gap: 8px; align-items: flex-start; }
.sts-msg img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.sts-msg p { margin: 0; font-size: 13.5px; line-height: 1.4; word-break: break-word; }
.sts-msg b { color: var(--s-text-2); margin-right: 2px; }
.sts-msg.is-host b { color: var(--s-accent); }
.sts-chat-empty { text-align: center; margin: auto; }
.sts-chat-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--s-border); }
.sts-chat-form .sts-iconbtn { color: var(--s-accent); }

/* Creator */
.sts-creator-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sts-creator-head h3 { margin: 0 0 2px; font-size: 20px; }
.sts-seg { display: flex; background: var(--s-surface-2); padding: 3px; border-radius: 10px; }
.sts-seg button { all: unset; cursor: pointer; padding: 6px 12px; font-size: 13px; font-weight: 600; border-radius: 8px; color: var(--s-text-2); }
.sts-seg button.is-active { background: var(--s-surface); color: var(--s-text); box-shadow: 0 1px 3px rgba(21,18,31,.1); }
.sts-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.sts-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.sts-kpi { padding: 14px 16px; border-radius: 14px; background: var(--s-surface-2); border: 1px solid var(--s-border); display: flex; flex-direction: column; gap: 4px; }
.sts-kpi span { font-size: 12.5px; color: var(--s-text-3); font-weight: 600; }
.sts-kpi b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sts-kpi small { font-size: 12px; color: var(--s-text-3); }
.sts-kpi em { font-style: normal; font-weight: 700; }
.sts-kpi em.up { color: var(--green, #059669); }
.sts-kpi em.down { color: var(--s-red); }
.sts-card { margin-top: 16px; padding: 16px; border-radius: 16px; border: 1px solid var(--s-border); }
.sts-card h4 { margin: 0 0 12px; font-size: 14px; }
.sts-panel svg.sts-chart { width: 100%; height: auto; display: block; fill: initial; stroke: none; }
.sts-chart rect { fill: var(--s-accent); }
.sts-chart rect:hover { fill: var(--pink, #db2777); }
.sts-chart line { stroke: var(--s-border); }
.sts-chart text { fill: var(--s-text-3); font-size: 11px; }
.sts-tops { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.sts-top-media { all: unset; display: block; aspect-ratio: 9/16; border-radius: 12px; overflow: hidden; background: var(--s-surface-3); cursor: default; width: 100%; }
button.sts-top-media { cursor: pointer; }
.sts-top-media img, .sts-top-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sts-expired { height: 100%; display: grid; place-items: center; font-size: 12px; color: var(--s-text-3); }
.sts-top-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--s-text-3); padding-top: 6px; }
.sts-table-wrap { overflow-x: auto; }
.sts-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sts-table th { text-align: left; font-size: 12px; color: var(--s-text-3); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--s-border); }
.sts-table td { padding: 10px 8px; border-bottom: 1px solid var(--s-border); white-space: nowrap; }
.sts-table td:first-child { white-space: normal; }
.sts-table a { color: var(--s-text); font-weight: 600; text-decoration: none; }
.sts-table a:hover { color: var(--s-accent); }
.sts-table tr:last-child td { border-bottom: 0; }

/* ---------- Story viewer + composer ---------- */
.sts-viewer, .sts-compose { position: fixed; inset: 0; z-index: 100010; background: rgba(8,6,14,.94); display: flex; align-items: center; justify-content: center; gap: 18px; color: #fff; animation: sts-fade .15s ease; }
.sts-compose { z-index: 100020; }
.sts-vframe { position: relative; height: min(92vh, 860px); aspect-ratio: 9/16; max-width: 100vw; background: #111; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.sts-media { position: absolute; inset: 0; display: grid; place-items: center; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.sts-media img, .sts-media video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.sts-compose .sts-media img, .sts-compose .sts-media video { object-fit: cover; }
.sts-gone { color: rgba(255,255,255,.7); font-size: 14px; }
.sts-prog { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.sts-prog i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.sts-prog b { display: block; height: 100%; background: #fff; }
.sts-vhead { position: absolute; top: 18px; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 18px 12px; background: linear-gradient(rgba(0,0,0,.45), transparent); }
.sts-compose .sts-vhead { top: 0; padding-top: 12px; }
.sts-vuser { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; min-width: 0; }
.sts-vuser img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.sts-vuser b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sts-vuser time { font-size: 13px; opacity: .75; }
.sts-vbtns { display: flex; }
.sts-cap { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 2; text-align: center; padding: 10px 18px; font-size: 15px; line-height: 1.4; text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
.sts-vfoot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; gap: 8px; padding: 14px; background: linear-gradient(transparent, rgba(0,0,0,.5)); }
.sts-vfoot:empty { display: none; }
.sts-pill { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); }
.sts-pill:hover { background: rgba(255,255,255,.26); }
.sts-pill svg { width: 16px; height: 16px; }
.sts-arrow { all: unset; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; }
.sts-arrow:hover { background: rgba(255,255,255,.26); }
.sts-compose-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(transparent, rgba(0,0,0,.7) 30%); }
.sts-compose-foot input { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }
.sts-compose-foot input::placeholder { color: rgba(255,255,255,.7); }
.sts-compose-foot .sts-btn { width: 100%; }
.sts-compose-foot .sts-muted { color: rgba(255,255,255,.7); text-align: center; }
.sts-progress { height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.sts-progress i { display: block; height: 100%; width: 0; background: #fff; transition: width .2s; }
.sts-media .sts-spin { border-top-color: #fff; }

/* ---------- Dialog + toast ---------- */
.sts-dialog { position: fixed; inset: 0; z-index: 100030; display: grid; place-items: center; background: rgba(8,6,14,.5); padding: 16px; color: var(--s-text); }
.sts-dialog-card { width: min(400px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: var(--s-surface); border-radius: 18px; box-shadow: var(--s-shadow); overflow: hidden; }
.sts-dialog-card header { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--s-border); }
.sts-dialog-card h3 { margin: 0; font-size: 16px; }
.sts-dialog-body { padding: 14px 18px 18px; overflow-y: auto; }
.sts-people { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sts-people li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sts-people a { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; font-size: 14px; }
.sts-people img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.sts-people time { color: var(--s-text-3); font-size: 12px; }
.sts-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100050; transform: translate(-50%, 20px); opacity: 0; transition: .25s; background: #15121f; color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }
.sts-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.sts-toast.is-bad { background: #9f1239; }

@keyframes sts-fade { from { opacity: 0; } }
@keyframes sts-rot { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.sts-panel { padding: 0; }
	.sts-sheet { width: 100%; height: 100%; border-radius: 0; }
	.sts-pad { padding: 16px; }
	.sts-golive, .sts-golive.is-on { grid-template-columns: 1fr; }
	.sts-golive-intro { grid-row: auto; }
	.sts-watch { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
	.sts-stage { padding: 0; overflow: visible; }
	.sts-player { border-radius: 0; }
	.sts-winfo { padding: 12px 16px; }
	.sts-chat { border-left: 0; border-top: 1px solid var(--s-border); min-height: 320px; }
	.sts-tabs button { padding: 8px 10px; font-size: 13px; }
}
@media (max-width: 600px) {
	.sts-viewer .sts-arrow { display: none; }
	.sts-vframe { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; }
	.sts-bubble { width: 70px; }
	.sts-ring { width: 62px; height: 62px; }
	.sts-plus { top: 42px; }
}
@media (prefers-reduced-motion: reduce) {
	.sts-panel.is-open, .sts-viewer, .sts-compose { animation: none; }
	.sts-toast { transition: none; }
}

/* ---------- Blue tick (used everywhere, incl. theme) ---------- */
.sts-tick { display: inline-flex; vertical-align: -0.16em; margin-left: 4px; width: 1.05em; height: 1.05em; flex: none; }
.sts-tick svg { width: 100% !important; height: 100% !important; display: block; stroke: none !important; }
.sts-tick path { fill: #1d9bf0; stroke: none; }
.sts-tick-p path { fill: #7c3aed; }
.sts-tick path.sts-tick-check { fill: #fff; }
a.name .sts-tick { margin-left: 3px; }
.profile-info h1 .sts-tick { width: .8em; height: .8em; vertical-align: -0.08em; margin-left: 6px; }

/* ---------- Premium / Help ---------- */
.sts-narrow { max-width: 760px; margin: 0 auto; }
.sts-hero { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: 20px; color: #fff; background: var(--s-grad); box-shadow: 0 20px 40px -24px rgba(124,58,237,.7); }
.sts-hero h3 { margin: 0 0 4px; font-size: 22px; display: flex; align-items: center; gap: 4px; }
.sts-hero p { margin: 0; opacity: .95; font-size: 14.5px; line-height: 1.5; }
.sts-hero .sts-tick path { fill: #fff; }
.sts-hero .sts-tick path.sts-tick-check { fill: #7c3aed; }
.sts-hero-badge { flex: none; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.sts-panel .sts-hero-badge svg { width: 32px; height: 32px; fill: #fff; stroke: #fff; }
.sts-price { margin-top: 8px !important; font-size: 20px; font-weight: 800; }
.sts-perks { list-style: none; padding: 0; margin: 18px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sts-perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: var(--s-surface-2); }
.sts-panel .sts-perks svg { width: 18px; height: 18px; color: var(--green, #059669); stroke-width: 2.6; margin-top: 1px; }
.sts-howto { font-size: 14px; line-height: 1.6; background: var(--s-surface-2); border: 1px dashed var(--s-border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.sts-card h4 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sts-card p { font-size: 14px; line-height: 1.5; margin: 6px 0; }
.sts-card-warn { border-color: #fecdd3; background: #fff1f2; }
.sts-verified-card { border-color: #bfdbfe; }
.sts-form { display: flex; flex-direction: column; gap: 12px; }
.sts-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--s-text-2); }
.sts-form input, .sts-form select, .sts-form textarea {
	font: inherit; font-size: 14px; font-weight: 400; color: var(--s-text); background: var(--s-surface); border: 1px solid var(--s-border); border-radius: 12px; padding: 10px 12px; outline: none; width: 100%; resize: vertical;
}
.sts-form input:focus, .sts-form select:focus, .sts-form textarea:focus { border-color: var(--s-accent); box-shadow: 0 0 0 3px rgba(124,58,237,.18); }
.sts-form .sts-btn { align-self: flex-start; }
.sts-form .sts-actions { margin: 0; }
.sts-status-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--s-surface-3); color: var(--s-text-2); white-space: nowrap; }
.sts-status-pill.is-pending { background: #fef3c7; color: #92400e; }
.sts-status-pill.is-ok { background: #d1fae5; color: #065f46; }
.sts-status-pill.is-bad { background: #ffe4e6; color: #9f1239; }
.sts-admin-link { margin-top: 16px; }
.sts-admin-link a, .sts-card a { color: var(--s-accent); }
.sts-faq { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sts-faq details { border: 1px solid var(--s-border); border-radius: 14px; padding: 0 16px; background: var(--s-surface); }
.sts-faq summary { cursor: pointer; font-weight: 600; font-size: 14.5px; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.sts-faq summary::-webkit-details-marker { display: none; }
.sts-faq summary::after { content: "+"; color: var(--s-text-3); font-size: 18px; line-height: 1; }
.sts-faq details[open] summary::after { content: "–"; }
.sts-faq details p { margin: 0 0 14px; color: var(--s-text-2); font-size: 14px; line-height: 1.55; }
.sts-tickets { display: flex; flex-direction: column; gap: 8px; }
.sts-ticket { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--s-border); border-radius: 14px; color: inherit; text-decoration: none; }
.sts-ticket:hover { background: var(--s-surface-2); }
.sts-ticket b { display: block; font-size: 14.5px; }
.sts-ticket span:not(.sts-status-pill) { font-size: 12.5px; color: var(--s-text-3); }
.sts-prio { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--s-accent); font-weight: 600; margin: -4px 0 10px; }
.sts-panel .sts-prio svg { width: 18px; height: 18px; fill: currentColor; }
.sts-ticket-head { margin: 14px 0 16px; }
.sts-ticket-head h3 { margin: 0 0 6px; font-size: 19px; }
.sts-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.sts-tmsg { display: flex; gap: 10px; }
.sts-tmsg > img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: var(--s-surface-3); }
.sts-tmsg > div { flex: 1; min-width: 0; background: var(--s-surface-2); border-radius: 4px 14px 14px 14px; padding: 10px 14px; }
.sts-tmsg.is-staff > div { background: var(--grad-soft, #f3efff); border: 1px solid rgba(124,58,237,.18); }
.sts-tmsg header { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 4px; }
.sts-tmsg time { color: var(--s-text-3); font-size: 12px; }
.sts-tmsg p { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.sts-linkbtn svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
	.sts-tabs button span { display: none; }
	.sts-tabs button { padding: 8px 12px; }
	.sts-tabs button.is-active span { display: inline; }
	.sts-hero { flex-direction: column; align-items: flex-start; }
}

/* ---------- Safety ---------- */
.sts-dialog .sts-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--s-text-2); }
.sts-dialog .sts-form textarea { font: inherit; font-size: 14px; border: 1px solid var(--s-border); border-radius: 12px; padding: 10px 12px; background: var(--s-surface); color: var(--s-text); width: 100%; }
.sts-reasons { display: flex; flex-direction: column; gap: 6px; }
.sts-dialog .sts-form label.sts-reason, .sts-dialog .sts-form label.sts-check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; color: var(--s-text); cursor: pointer; }
.sts-reason { padding: 10px 12px; border: 1px solid var(--s-border); border-radius: 12px; }
.sts-reason:has(input:checked) { border-color: var(--s-red); background: #fff1f2; }
.sts-reason input, .sts-check input { accent-color: var(--s-red); width: 18px; height: 18px; margin: 0; }
.sts-prof-safety { display: flex; gap: 6px; margin-top: 10px; }
.sts-prof-safety .sts-chip { color: var(--text-2, #57526b); }
.sts-prof-safety .sts-chip:hover { color: var(--red, #e11d48); border-color: var(--red, #e11d48); }
.sts-sessions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sts-session { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--s-surface-2); }
.sts-session b { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.sts-session span:not(.sts-status-pill) { font-size: 12.5px; color: var(--s-text-3); }
.sts-session .sts-btn { padding: 7px 12px; font-size: 13px; }
.sts-people li .sts-btn { padding: 6px 12px; font-size: 13px; }
.sts-legal { text-align: center; font-size: 13px; margin-top: 18px; }
.sts-legal a { color: var(--s-text-3); }
.sts-wstats .sts-btn svg { width: 16px; height: 16px; }