/* ROBLIX Studio — always dark, like a pro creative tool */
.st-root { --s-bg: #1e2127; --s-panel: #262a31; --s-panel2: #2e333b; --s-line: #3a404a; --s-text: #e7e9ee; --s-muted: #9aa1ad; --s-blue: #3d8bff; --s-sel: #2b5797; --s-green: #23b05f;
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--s-bg); color: var(--s-text); font: 13px/1.35 "Figtree", system-ui, sans-serif; color-scheme: dark; overflow: hidden; }
.st-root .hidden { display: none !important; }
.st-root button { font: inherit; color: inherit; }
.st-root kbd { font: 600 11px "Figtree", sans-serif; color: var(--s-muted); background: none; border: 0; min-width: 0; padding: 0; margin: 0; }
.st-menubar { height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 10px; background: #17191e; border-bottom: 1px solid #0d0e11; flex: none; }
.st-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.st-logo { width: 20px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #ff5a4e, #b32319); transform: rotate(12deg); }
.st-menus { display: flex; }
.st-menus button { background: none; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.st-menus button:hover { background: var(--s-panel2); }
.st-title { flex: 1; display: flex; justify-content: center; min-width: 0; }
.st-gamename { background: transparent; border: 1px solid transparent; color: var(--s-text); font: 700 14px "Figtree", sans-serif; text-align: center; padding: 5px 10px; border-radius: 6px; width: min(320px, 100%); }
.st-gamename:hover, .st-gamename:focus { border-color: var(--s-line); outline: none; background: var(--s-panel); }
.st-right { display: flex; gap: 6px; }
.st-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 7px; padding: 7px 12px; background: var(--s-panel2); cursor: pointer; font-weight: 700; color: var(--s-text); }
.st-btn svg { width: 16px; height: 16px; }
.st-btn:hover { filter: brightness(1.15); }
.st-btn.st-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--s-line); }
.st-btn.st-publish, .st-btn.st-primary { background: var(--s-blue); color: #fff; }
.st-btn.st-wide { width: 100%; justify-content: center; margin: 6px 0; }
.st-mini { background: var(--s-panel2); border: 0; border-radius: 5px; padding: 2px 7px; cursor: pointer; color: var(--s-text); font-size: 12px; }
.st-mini:hover { background: var(--s-line); }
/* ribbon */
.st-ribbon { display: flex; gap: 2px; padding: 6px 8px 4px; background: var(--s-panel); border-bottom: 1px solid #14161a; overflow-x: auto; flex: none; }
.st-group { display: flex; flex-direction: column; padding: 0 8px; border-right: 1px solid var(--s-line); flex: none; }
.st-gbody { display: flex; gap: 2px; align-items: stretch; flex: 1; }
.st-gbody.st-col { flex-direction: column; gap: 3px; justify-content: center; font-size: 12px; }
.st-gbody.st-col label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.st-gbody.st-col input[type=number] { width: 52px; background: var(--s-bg); border: 1px solid var(--s-line); color: var(--s-text); border-radius: 4px; padding: 1px 4px; font: 12px "Figtree", sans-serif; }
.st-glabel { font-size: 11px; color: var(--s-muted); text-align: center; padding-top: 3px; }
.st-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 50px; padding: 5px 6px; border: 0; background: none; border-radius: 6px; cursor: pointer; font-size: 11.5px; }
.st-tool svg { width: 24px; height: 24px; }
.st-tool:hover { background: var(--s-panel2); }
.st-tool.on { background: var(--s-sel); }
.st-tool:disabled { opacity: .4; cursor: default; }
.st-playbtn svg { color: var(--s-green); }
.st-split { display: flex; align-items: stretch; }
.st-dd { border: 0; background: none; cursor: pointer; border-radius: 6px; padding: 0 4px; color: var(--s-muted); }
.st-dd:hover { background: var(--s-panel2); }
/* layout */
.st-main { flex: 1; display: grid; grid-template-columns: 230px minmax(0, 1fr) 290px; min-height: 0; }
.st-root.st-hide-left .st-main { grid-template-columns: 0 minmax(0, 1fr) 290px; }
.st-root.st-hide-right .st-main { grid-template-columns: 230px minmax(0, 1fr) 0; }
.st-root.st-hide-left.st-hide-right .st-main { grid-template-columns: 0 minmax(0, 1fr) 0; }
.st-left, .st-right-panel { background: var(--s-panel); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.st-left { border-right: 1px solid #14161a; }
.st-right-panel { border-left: 1px solid #14161a; }
.st-ph { padding: 6px 10px; font-weight: 700; font-size: 12px; background: #23262c; border-bottom: 1px solid #14161a; display: flex; align-items: center; gap: 8px; flex: none; }
.st-ph .st-mini { margin-left: auto; }
.st-propsel { color: var(--s-muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-search { margin: 6px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--s-line); background: var(--s-bg); color: var(--s-text); font: 12.5px "Figtree", sans-serif; outline: none; flex: none; }
.st-search:focus { border-color: var(--s-blue); }
.st-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.st-tabs { display: flex; background: #1a1c21; flex: none; overflow-x: auto; scrollbar-width: none; }
.st-tab { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 12px; cursor: pointer; color: var(--s-muted); border-top: 2px solid transparent; white-space: nowrap; }
.st-tab.on { background: var(--s-bg); color: var(--s-text); border-color: var(--s-blue); }
.st-tab i { font-style: normal; opacity: .6; padding: 0 2px; border-radius: 4px; }
.st-tab i:hover { background: var(--s-line); opacity: 1; }
.st-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.st-canvas { position: absolute; inset: 0; width: 100%; height: 100%; outline: none; display: block; }
.st-vhint { position: absolute; left: 10px; bottom: 8px; color: rgba(255, 255, 255, .75); font-size: 11.5px; text-shadow: 0 1px 2px #000; pointer-events: none; }
.st-play { position: absolute; inset: 0; z-index: 5; }
.st-guipreview, .st-guipreview * { pointer-events: none !important; }
.st-editor { flex: 1; min-height: 0; position: relative; background: #1b1d22; }
.st-codepane { position: absolute; inset: 0; }
.st-codepane .CodeMirror { height: 100%; font: 13.5px/1.5 "JetBrains Mono", ui-monospace, monospace; }
.st-codefallback { width: 100%; height: 100%; box-sizing: border-box; background: #1b1d22; color: #e7e9ee; border: 0; padding: 12px; font: 13.5px/1.5 "JetBrains Mono", monospace; resize: none; outline: none; tab-size: 4; }
.st-bottom { height: 170px; display: flex; flex-direction: column; background: var(--s-panel); border-top: 1px solid #14161a; flex: none; }
.st-root.st-hide-bottom .st-bottom { display: none; }
.st-output { flex: 1; overflow-y: auto; padding: 4px 10px; font: 12px/1.45 "JetBrains Mono", monospace; white-space: pre-wrap; user-select: text; }
.st-log-warn { color: #ffb74d; } .st-log-error { color: #ff6b6b; } .st-log-info { color: #64b5f6; } .st-log-cmd { color: var(--s-muted); }
.st-cmd { margin: 4px 6px 6px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--s-line); background: var(--s-bg); color: var(--s-text); font: 12.5px "JetBrains Mono", monospace; outline: none; }
/* explorer */
.st-explorer { flex: 1 1 50%; overflow: auto; min-height: 80px; outline: none; padding-bottom: 8px; }
.st-row { display: flex; align-items: center; gap: 4px; height: 22px; cursor: default; white-space: nowrap; padding-right: 6px; position: relative; }
.st-row:hover { background: #333944; }
.st-row.sel { background: var(--s-sel); }
.st-row.drop { box-shadow: inset 0 0 0 1px var(--s-blue); }
.st-exp { width: 12px; color: var(--s-muted); text-align: center; flex: none; cursor: pointer; font-size: 10px; }
.st-ico { width: 16px; height: 16px; flex: none; display: grid; place-items: center; }
.st-name { overflow: hidden; text-overflow: ellipsis; }
.st-plus { margin-left: auto; display: none; border: 0; background: var(--s-panel2); border-radius: 4px; width: 18px; height: 18px; line-height: 16px; cursor: pointer; padding: 0; color: var(--s-text); }
.st-row:hover .st-plus { display: block; }
.st-rename { height: 18px; background: var(--s-bg); color: var(--s-text); border: 1px solid var(--s-blue); border-radius: 3px; font: 13px "Figtree", sans-serif; padding: 0 4px; width: 140px; }
/* properties */
.st-props { flex: 1 1 50%; overflow: auto; min-height: 80px; padding-bottom: 12px; border-top: 1px solid #14161a; }
.st-empty { padding: 16px; color: var(--s-muted); }
.st-pcat { padding: 4px 8px; background: #2b3038; font-weight: 700; font-size: 12px; color: #c9cfd9; position: sticky; top: 0; z-index: 1; }
.st-prow { display: grid; grid-template-columns: 42% 58%; align-items: center; min-height: 24px; border-bottom: 1px solid #2b2f36; }
.st-prow label { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cfd4dc; }
.st-pval { display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 0; min-width: 0; }
.st-pin { flex: 1; min-width: 0; height: 22px; background: transparent; border: 1px solid transparent; color: var(--s-text); font: 12.5px "Figtree", sans-serif; padding: 0 5px; border-radius: 4px; outline: none; box-sizing: border-box; }
.st-pin:hover { border-color: var(--s-line); }
.st-pin:focus { border-color: var(--s-blue); background: var(--s-bg); }
select.st-pin { background: var(--s-bg); }
.st-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .3); cursor: pointer; flex: none; padding: 0; }
.st-refbtn { flex: 1; text-align: left; background: var(--s-bg); border: 1px solid var(--s-line); border-radius: 4px; padding: 1px 6px; cursor: pointer; color: var(--s-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* toolbox */
.st-tbtabs { display: flex; padding: 6px 6px 0; gap: 4px; flex: none; }
.st-tbtabs button { flex: 1; border: 0; background: var(--s-panel2); padding: 5px 2px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; min-width: 0; }
.st-tbtabs button.on { background: var(--s-blue); color: #fff; }
.st-toolbox { flex: 1; overflow-y: auto; padding: 0 6px 10px; }
.st-tbcat { font-weight: 700; color: var(--s-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; margin: 10px 2px 6px; }
.st-tbgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.st-tbdecals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-tbitem { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--s-panel2); border: 0; border-radius: 8px; padding: 6px; cursor: pointer; font-size: 11.5px; text-align: center; min-width: 0; }
.st-tbitem:hover { background: var(--s-line); }
.st-tbitem img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; background: radial-gradient(circle, #3a404a, #2a2e35); }
.st-tbitem span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sndrow { display: flex; align-items: center; gap: 6px; padding: 4px 2px; font-size: 12px; }
.st-sndrow span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-upl { display: inline-flex; margin-top: 8px; cursor: pointer; }
/* popovers & menus */
.st-pop, .st-ctx { position: absolute; z-index: 50; background: #2a2e35; border: 1px solid #3c424c; border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); padding: 6px; max-width: 360px; max-height: 70vh; overflow: auto; }
.st-list { display: flex; flex-direction: column; min-width: 190px; }
.st-list button, .st-ctxi { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; text-align: left; width: 100%; color: var(--s-text); }
.st-list button:hover, .st-ctxi:hover { background: var(--s-sel); }
.st-list button kbd, .st-ctxi kbd { margin-left: auto; }
.st-ctx { min-width: 220px; }
.st-sep { height: 1px; background: var(--s-line); margin: 4px 2px; }
.st-palette { display: grid; grid-template-columns: repeat(10, 22px); gap: 4px; }
.st-palette button { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .3); cursor: pointer; padding: 0; }
.st-palette button:hover { transform: scale(1.15); }
.st-mats { display: grid; grid-template-columns: repeat(4, 76px); gap: 6px; }
.st-mats button { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: var(--s-panel2); border-radius: 8px; padding: 6px 2px; cursor: pointer; font-size: 10.5px; }
.st-mats button:hover { background: var(--s-sel); }
.st-mats canvas { border-radius: 6px; }
.st-assets { display: grid; grid-template-columns: repeat(5, 52px); gap: 5px; }
.st-assets button { border: 0; background: var(--s-panel2); border-radius: 6px; padding: 3px; cursor: pointer; }
.st-assets img { width: 46px; height: 46px; }
.st-assets .st-asnd { grid-column: span 5; text-align: left; padding: 5px 8px; color: var(--s-text); }
/* modal */
.st-modal { position: absolute; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5); display: grid; place-items: center; padding: 16px; }
.st-mbox { background: #262a31; border-radius: 14px; width: min(460px, 100%); max-height: 90%; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); border: 1px solid #3c424c; }
.st-mbox.st-wide { width: min(760px, 100%); }
.st-mbody { padding: 18px 20px 6px; display: flex; flex-direction: column; gap: 10px; }
.st-mbody h3 { margin: 0; font-size: 18px; }
.st-mbody h3 small { color: var(--s-muted); font-weight: 500; font-size: 13px; }
.st-mactions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; }
.st-muted { color: var(--s-muted); margin: 0; }
.st-field { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 12.5px; flex: 1; }
.st-field input, .st-field textarea, .st-field select { background: var(--s-bg); border: 1px solid var(--s-line); color: var(--s-text); border-radius: 7px; padding: 7px 9px; font: 13px "Figtree", sans-serif; outline: none; }
.st-field input:focus, .st-field textarea:focus { border-color: var(--s-blue); }
.st-row2 { display: flex; gap: 12px; align-items: flex-end; }
.st-check { display: flex; gap: 8px; align-items: center; }
.st-thumbrow { display: flex; gap: 10px; align-items: center; }
.st-thumbrow img { width: 192px; aspect-ratio: 16/9; border-radius: 8px; background: var(--s-bg); object-fit: cover; }
.st-pubcard { display: flex; gap: 12px; background: var(--s-bg); border-radius: 10px; padding: 10px; }
.st-pubcard img { width: 180px; aspect-ratio: 16/9; border-radius: 8px; object-fit: cover; background: #111; flex: none; }
.st-pubcard div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-pubcard span { color: var(--s-muted); }
.st-pubcard p { margin: 4px 0 0; color: #c9cfd9; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.st-inslist { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.st-insg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.st-insg b { grid-column: 1 / -1; color: var(--s-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.st-insg button { display: flex; align-items: center; gap: 7px; border: 0; background: var(--s-panel2); border-radius: 6px; padding: 5px 8px; cursor: pointer; text-align: left; color: var(--s-text); }
.st-insg button:hover { background: var(--s-sel); }
.st-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.st-tpls button { display: flex; flex-direction: column; gap: 4px; border: 0; background: var(--s-panel2); border-radius: 10px; padding: 8px; cursor: pointer; text-align: left; color: var(--s-text); }
.st-tpls button:hover { background: var(--s-sel); }
.st-tpls img { width: 100%; aspect-ratio: 16/9; border-radius: 7px; background: var(--s-bg); object-fit: cover; }
.st-tpls span { color: var(--s-muted); font-size: 12px; }
.st-keys td { padding: 4px 10px 4px 0; }
.st-keys kbd { color: var(--s-text); background: var(--s-panel2); padding: 2px 6px; border-radius: 4px; }
.st-code { background: #1b1d22; border-radius: 8px; padding: 10px 12px; font: 12.5px/1.5 "JetBrains Mono", monospace; overflow-x: auto; white-space: pre; margin: 0; }
.st-toasts { position: absolute; left: 50%; bottom: 190px; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.st-toast { background: #e7e9ee; color: #17191e; padding: 7px 14px; border-radius: 8px; font-weight: 700; transition: opacity .4s; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.st-toast.out { opacity: 0; }
.st-root.st-playing .st-ribbon .st-group:not(:has(.st-playbtn)) { opacity: .45; pointer-events: none; }
/* CodeMirror theme */
.cm-s-rx.CodeMirror { background: #1b1d22; color: #e7e9ee; }
.cm-s-rx .CodeMirror-gutters { background: #1b1d22; border-right: 1px solid #2b2f36; }
.cm-s-rx .CodeMirror-linenumber { color: #5c6370; }
.cm-s-rx .CodeMirror-cursor { border-left: 2px solid #3d8bff; }
.cm-s-rx .CodeMirror-selected, .cm-s-rx.CodeMirror-focused .CodeMirror-selected { background: #2b4b7a; }
.cm-s-rx .CodeMirror-activeline-background { background: #23262d; }
.cm-s-rx .cm-keyword { color: #f86d7c; } .cm-s-rx .cm-builtin { color: #84d6f7; } .cm-s-rx .cm-string { color: #adf195; } .cm-s-rx .cm-number { color: #ffc600; }
.cm-s-rx .cm-comment { color: #666e7a; font-style: italic; } .cm-s-rx .cm-variable { color: #e7e9ee; } .cm-s-rx .cm-variable-2 { color: #9cdcfe; } .cm-s-rx .cm-operator { color: #cc7832; }
.cm-s-rx .CodeMirror-matchingbracket { color: #fff !important; outline: 1px solid #3d8bff; }
@media (max-width: 900px) {
  .st-main { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .st-root.st-show-panels .st-main { grid-template-columns: 0 minmax(0, 1fr) 240px; }
  .st-root.st-show-left .st-main { grid-template-columns: 200px minmax(0, 1fr) 0; }
  .st-root.st-show-left.st-show-panels .st-main { grid-template-columns: 170px minmax(0, 1fr) 200px; }
  .st-menus button[data-menu="help"], .st-btn span { display: none; }
  .st-bottom { height: 110px; }
}
/* autocomplete */
.CodeMirror-hints { position: absolute; z-index: 1000; overflow: hidden; list-style: none; margin: 0; padding: 3px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); border-radius: 8px; border: 1px solid #3c424c; background: #262a31; font: 12.5px "JetBrains Mono", monospace; max-height: 18em; overflow-y: auto; box-sizing: border-box; }
.CodeMirror-hint { margin: 0; padding: 2px 8px; border-radius: 5px; white-space: pre; color: #e7e9ee; cursor: pointer; }
li.CodeMirror-hint-active { background: #2b5797; color: #fff; }
.rx-hint-kind { color: #8b93a1; font-size: 11px; margin-left: 10px; }

.st-guiov { position: absolute; z-index: 4; box-shadow: 0 0 0 2px #3d8bff, 0 0 0 4px rgba(61, 139, 255, .25); cursor: move; pointer-events: auto; }
.st-guiov[hidden] { display: none; }
.st-guih { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #fff; border: 2px solid #3d8bff; border-radius: 3px; cursor: nwse-resize; }

/* terrain editor */
.st-left.st-ted-on > :not(.st-ted) { display: none !important; }
.st-left:not(.st-ted-on) > .st-ted { display: none; }
.st-ted { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.st-tbody { flex: 1; overflow-y: auto; padding: 4px 10px 14px; }
.st-tsec { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--s-muted); margin: 12px 0 6px; }
.st-trow { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; }
.st-trow > span { width: 62px; flex: none; color: var(--s-muted); }
.st-trow select, .st-trow input[type=number] { flex: 1; min-width: 0; background: var(--s-bg); border: 1px solid var(--s-line); color: var(--s-text); border-radius: 6px; padding: 4px 6px; font: 12px "Figtree", sans-serif; }
.st-trow input[type=range] { flex: 1; min-width: 0; accent-color: var(--s-blue); }
.st-trow b { width: 58px; flex: none; text-align: right; font-weight: 600; font-size: 11.5px; }
.st-tchk { display: flex; align-items: center; gap: 7px; margin: 6px 0; font-size: 12px; cursor: pointer; }
.st-tbtns { display: flex; gap: 6px; }
.st-tbtns .st-btn { flex: 1; justify-content: center; }
.st-tdanger { background: #4a2326 !important; color: #ffb4ad !important; }
.st-tinfo { font-size: 11.5px; color: var(--s-muted); margin: 6px 0; line-height: 1.4; }
.st-thint { font-size: 11px; color: var(--s-muted); margin-top: 14px; padding: 8px; background: var(--s-bg); border-radius: 7px; line-height: 1.5; }
.st-ttools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; }
.st-ttool { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border: 0; border-radius: 7px; background: var(--s-panel2); cursor: pointer; font-size: 11px; }
.st-ttool svg { width: 22px; height: 22px; }
.st-ttool:hover { background: var(--s-line); }
.st-ttool.on { background: var(--s-sel); box-shadow: inset 0 0 0 1px var(--s-blue); }
.st-tmats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.st-tsw { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border: 0; border-radius: 7px; background: none; cursor: pointer; font-size: 10.5px; color: var(--s-muted); }
.st-tsw i { width: 34px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.st-tsw:hover { background: var(--s-panel2); }
.st-tsw.on { background: var(--s-sel); color: var(--s-text); }

.st-badges { display: flex; flex-direction: column; gap: 6px; }
.st-brow { display: flex; gap: 6px; align-items: center; }
.st-brow input { min-width: 0; background: var(--s-bg); border: 1px solid var(--s-line); color: var(--s-text); border-radius: 6px; padding: 5px 7px; font: 12.5px "Figtree", sans-serif; }
.st-brow .b-ic { width: 44px; text-align: center; flex: none; }
.st-brow .b-nm { flex: 1; }
.st-brow .b-ds { flex: 1.6; }
.st-bid { flex: none; font-size: 11px; font-weight: 800; color: #fff; padding: 3px 7px; border-radius: 10px; }
.st-muted { color: var(--s-muted); font-weight: 400; }
.st-muted code { font-size: 11px; }
.st-brow .b-pr { width: 64px; flex: none; }

.st-tbitem .st-cs-meta { display: block; font-size: 10px; color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-tbitem .st-cs-del { position: absolute; top: 3px; right: 3px; display: none; }
.st-tbitem:hover .st-cs-del { display: block; }
.st-tbitem { position: relative; }
.st-cs-empty { padding: 14px 8px; color: var(--s-muted); font-size: 12px; line-height: 1.5; }
.st-cs-prev { display: flex; gap: 12px; align-items: center; }
.st-cs-prev img { width: 110px; height: 110px; border-radius: 10px; background: #1b1e24; object-fit: contain; flex: none; }
.st-cs-prev .st-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* team create */
.st-collab { display: flex; gap: 4px; align-items: center; }
.st-cav { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #111; box-shadow: 0 0 0 2px #17191e; }
.st-cav i { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 10px; color: #ffd740; text-shadow: 0 0 2px #000; }
.st-tcveil { position: absolute; inset: 0; z-index: 80; background: rgba(15, 17, 21, .82); display: grid; place-items: center; }
.st-tcveil > div { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 20px; }
.st-tcveil span { color: var(--s-muted); font-size: 12.5px; }

/* ===================== Studio v2: refreshed design + responsive docks ===================== */
.st-root { --s-bg: #14161b; --s-panel: #1d2026; --s-panel2: #272b33; --s-panel3: #2f343d; --s-line: #333944; --s-line2: #262a31; --s-text: #e9ecf2; --s-muted: #9ba4b4; --s-blue: #4c8dff; --s-blue2: #76a8ff; --s-sel: rgba(76, 141, 255, .24); --s-green: #2fbf71; --s-red: #ff5d5d; --s-amber: #ffb547;
  --lw: 250px; --rw: 300px; --gl: 5px; --gr: 5px; --bh: 190px; --exh: 48%; }
.st-menubar { height: 44px; gap: 10px; padding: 0 10px; background: #111317; border-bottom: 1px solid #0b0c0f; }
.st-brand b { font-weight: 800; }
.st-ibtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--s-muted); cursor: pointer; flex: none; padding: 0; }
.st-ibtn:hover { background: var(--s-panel2); color: var(--s-text); }
.st-ibtn svg { width: 18px; height: 18px; }
.st-only-narrow { display: none; }
.st-rtabs { display: flex; align-items: center; gap: 2px; padding: 4px 8px 0; height: 36px; box-sizing: border-box; background: #17191e; flex: none; }
.st-rtabs [data-rtab] { border: 0; background: none; color: var(--s-muted); font: 700 12.5px "Figtree", sans-serif; padding: 7px 14px; border-radius: 8px 8px 0 0; cursor: pointer; position: relative; height: 32px; }
.st-rtabs [data-rtab]:hover { color: var(--s-text); }
.st-rtabs [data-rtab].on { color: #fff; background: var(--s-panel); }
.st-rtabs [data-rtab].on::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 2px; background: var(--s-blue); }
.st-fill { flex: 1; }
.st-quickplay { color: var(--s-green); }
.st-root.st-playing .st-quickplay { color: var(--s-red); }
.st-quickplay svg:last-child, .st-dock-play svg:nth-of-type(2) { display: none; }
.st-root.st-playing .st-quickplay svg:first-child, .st-root.st-playing .st-dock-play svg:first-of-type { display: none; }
.st-root.st-playing .st-quickplay svg:last-child, .st-root.st-playing .st-dock-play svg:nth-of-type(2) { display: block; }
.st-ribtoggle svg { transition: transform .2s; }
.st-root.st-no-ribbon .st-ribtoggle svg { transform: rotate(180deg); }
.st-ribbon { gap: 2px; padding: 6px 8px 5px; background: var(--s-panel); border-bottom: 1px solid #101216; }
.st-root.st-no-ribbon .st-ribbon { display: none; }
.st-group { padding: 0 6px; border-right: 1px solid var(--s-line2); }
.st-group[hidden] { display: none; }
.st-tool { min-width: 54px; padding: 6px 7px 5px; border-radius: 8px; color: var(--s-text); gap: 4px; font-size: 11.5px; }
.st-tool:hover { background: var(--s-panel2); }
.st-tool.on { background: rgba(76, 141, 255, .16); box-shadow: inset 0 0 0 1px rgba(76, 141, 255, .55); color: #fff; }
.st-glabel { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #7a8292; padding-top: 4px; }
.st-main { position: relative; display: grid; grid-template-columns: var(--lw) var(--gl) minmax(0, 1fr) var(--gr) var(--rw); grid-template-rows: minmax(0, 1fr); min-height: 0; flex: 1; }
.st-main > * { grid-row: 1; min-width: 0; }
.st-main > .st-left { grid-column: 1; }
.st-main > .st-gutter-l { grid-column: 2; }
.st-main > .st-center { grid-column: 3; }
.st-main > .st-gutter-r { grid-column: 4; }
.st-main > .st-right-panel { grid-column: 5; }
.st-left, .st-right-panel { background: var(--s-panel); border: 0; }
.st-gutter { background: #101216; cursor: col-resize; position: relative; z-index: 3; touch-action: none; }
.st-gutter::after { content: ""; position: absolute; inset: 0 1px; border-radius: 2px; transition: background .15s; }
.st-gutter:hover::after, .st-gutter.on::after { background: var(--s-blue); }
.st-gutter-h { height: 5px; cursor: row-resize; flex: none; }
.st-gutter-h::after { inset: 1px 0; }
.st-root.st-resizing, .st-root.st-resizing * { user-select: none !important; }
.st-root.st-resizing .st-canvas, .st-root.st-resizing .CodeMirror { pointer-events: none; }
.st-ph { height: 32px; padding: 0 6px 0 10px; gap: 7px; background: var(--s-panel); border-bottom: 1px solid var(--s-line2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #c6ccd7; box-sizing: border-box; }
.st-ph > svg { width: 15px; height: 15px; color: var(--s-blue2); flex: none; }
.st-ph .st-pclose { width: 24px; height: 24px; margin-left: auto; font-size: 12px; }
.st-ph .st-propsel { text-transform: none; letter-spacing: 0; font-weight: 600; }
.st-right-panel > .st-explorer { flex: 0 0 var(--exh); min-height: 50px; }
.st-right-panel > .st-props { flex: 1 1 0; border-top: 0; }
.st-search { background: #15171c; border-color: #2c313a; border-radius: 7px; }
.st-row { border-radius: 5px; margin: 0 4px; }
.st-row.sel { background: var(--s-sel); box-shadow: inset 2px 0 0 var(--s-blue); }
.st-pcat { background: #23272e; color: #aeb6c4; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.st-prow { border-bottom-color: #23272e; }
.st-bottom { height: var(--bh); border-top: 0; background: var(--s-panel); }
.st-root.st-no-bottom .st-bottom, .st-root.st-no-bottom .st-gutter-b { display: none; }
.st-btabs { padding-left: 4px; gap: 2px; }
.st-btabs [data-btab] { display: inline-flex; align-items: center; gap: 6px; height: 26px; border: 0; background: none; color: var(--s-muted); font: 800 11px "Figtree", sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 0 10px; border-radius: 7px; cursor: pointer; }
.st-btabs [data-btab] svg { width: 14px; height: 14px; }
.st-btabs [data-btab].on { background: var(--s-panel2); color: #fff; }
.st-btabs .st-mini { margin-left: 0; }
.st-acount { font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 9px; background: var(--s-panel3); color: var(--s-text); letter-spacing: 0; }
.st-acount:empty { display: none; }
.st-acount.err { background: #5a2427; color: #ffb3b3; }
.st-acount.warn { background: #54401c; color: #ffd48a; }
.st-analysis { flex: 1; overflow: auto; padding: 4px 6px; }
.st-analysis.hidden, .st-output.hidden, .st-cmd.hidden, .st-btabs .st-mini.hidden { display: none !important; }
.st-arow { display: grid; grid-template-columns: 18px minmax(0, max-content) minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; border: 0; background: none; color: var(--s-text); text-align: left; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.st-arow:hover { background: var(--s-panel2); }
.st-arow i { font-style: normal; text-align: center; }
.st-a-error i { color: var(--s-red); }
.st-a-warn i { color: var(--s-amber); }
.st-a-info i { color: var(--s-blue2); }
.st-arow b { font-weight: 700; color: #c6ccd7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.st-arow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-arow em { font-style: normal; color: var(--s-muted); font-size: 11.5px; }
.st-status { display: flex; align-items: center; gap: 16px; height: 24px; padding: 0 10px; background: #111317; border-top: 1px solid #0b0c0f; color: var(--s-muted); font-size: 11.5px; flex: none; white-space: nowrap; overflow: hidden; }
.st-status .err { color: var(--s-red); }
.st-status .warn { color: var(--s-amber); }
.st-s-sel { color: var(--s-text); overflow: hidden; text-overflow: ellipsis; }
.st-tip { position: absolute; z-index: 90; max-width: 280px; background: #0e1014; color: var(--s-text); border: 1px solid var(--s-line); border-radius: 9px; padding: 7px 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity .12s, transform .12s; font-size: 12px; left: 0; top: 0; }
.st-tip.on { opacity: 1; transform: none; }
.st-tip b { font-weight: 800; }
.st-tip kbd { margin-left: 8px; color: var(--s-text); background: var(--s-panel2); border-radius: 4px; padding: 1px 5px; font: 600 11px "Figtree", sans-serif; }
.st-tip p { margin: 4px 0 0; color: var(--s-muted); line-height: 1.4; }
.st-dock, .st-scrim { display: none; }
.st-devframe { position: absolute; z-index: 3; pointer-events: none; border-radius: 12px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8), 0 0 0 9999px rgba(8, 10, 14, .5); }
.st-devframe::before { content: attr(data-label); position: absolute; left: 50%; top: -24px; transform: translateX(-50%); font: 700 11px "Figtree", sans-serif; color: #fff; background: rgba(0, 0, 0, .6); padding: 2px 9px; border-radius: 6px; white-space: nowrap; }
.st-root.st-w-mid .st-main > .st-left, .st-root.st-w-narrow .st-main > .st-left, .st-root.st-w-narrow .st-main > .st-right-panel { position: absolute; top: 0; bottom: 0; grid-column: 1 / -1; z-index: 40; width: min(320px, 88%); box-shadow: 0 0 40px rgba(0, 0, 0, .55); transition: transform .22s ease; }
.st-root.st-w-mid .st-main > .st-left, .st-root.st-w-narrow .st-main > .st-left { left: 0; transform: translateX(-105%); }
.st-root.st-w-narrow .st-main > .st-right-panel { right: 0; left: auto; transform: translateX(105%); }
.st-root.st-drawer-left .st-main > .st-left, .st-root.st-drawer-right .st-main > .st-right-panel { transform: none; }
.st-root.st-drawer-left .st-scrim, .st-root.st-drawer-right .st-scrim { display: block; position: absolute; inset: 0; grid-column: 1 / -1; z-index: 35; background: rgba(0, 0, 0, .38); }
.st-root.st-w-narrow .st-menus, .st-root.st-w-narrow .st-brand b, .st-root.st-w-narrow .st-btn span { display: none; }
.st-root.st-w-narrow .st-only-narrow { display: inline-grid; }
.st-root.st-w-narrow .st-menubar { gap: 6px; padding: 0 6px; }
.st-root.st-w-narrow .st-btn { padding: 7px 9px; }
.st-root.st-w-narrow .st-tool span, .st-root.st-w-narrow .st-glabel, .st-root.st-w-narrow .st-snapgroup { display: none; }
.st-root.st-w-narrow .st-tool { min-width: 42px; padding: 7px; }
.st-root.st-w-narrow .st-group { padding: 0 3px; }
.st-root.st-w-narrow .st-rtabs [data-rtab] { padding: 7px 10px; }
.st-root.st-w-narrow .st-dock { display: flex; height: 54px; background: #111317; border-top: 1px solid #0b0c0f; flex: none; padding-bottom: env(safe-area-inset-bottom); }
.st-root.st-w-narrow .st-dock button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--s-muted); font: 600 10.5px "Figtree", sans-serif; min-width: 0; }
.st-root.st-w-narrow .st-dock button svg { width: 20px; height: 20px; }
.st-root.st-w-narrow .st-dock button.on { color: var(--s-blue2); }
.st-root.st-w-narrow .st-dock .st-dock-play { color: var(--s-green); }
.st-root.st-playing .st-dock .st-dock-play { color: var(--s-red); }
.st-root.st-w-narrow .st-status, .st-root.st-w-narrow .st-vhint, .st-root.st-w-narrow .st-collab { display: none; }
.st-root.st-w-narrow .st-bottom { height: min(var(--bh), 36vh); }
.st-root.st-w-narrow .st-row { height: 30px; }
.st-root.st-w-narrow .st-prow { min-height: 34px; }
.st-root.st-w-narrow .st-toasts { bottom: 80px; }
.st-root.st-w-mid .st-snapgroup label { font-size: 11px; }
.CodeMirror-hints { font: 12.5px/1.5 "JetBrains Mono", monospace; max-height: 270px; min-width: 250px; overflow-y: auto; }
.CodeMirror-hint { display: flex; align-items: center; gap: 7px; padding: 3px 8px; }
.rx-hk { font-style: normal; width: 16px; height: 16px; border-radius: 4px; display: inline-grid; place-items: center; font: 800 10px "Figtree", sans-serif; flex: none; background: #394150; color: #cfd6e4; }
.rx-hk-method, .rx-hk-function { background: #3b2f63; color: #c7b5ff; }
.rx-hk-property, .rx-hk-field { background: #1f4b63; color: #9ddcff; }
.rx-hk-event { background: #5c4218; color: #ffd27d; }
.rx-hk-snippet { background: #1e5a3c; color: #9ef0c2; }
.rx-hk-keyword { background: #5a2430; color: #ff9db0; }
.rx-hk-class, .rx-hk-service, .rx-hk-child { background: #2b4d2b; color: #b4f0a0; }
.rx-hk-enum, .rx-hk-enumitem { background: #4a3a20; color: #f3c98b; }
.CodeMirror-hint .rx-hint-kind { margin-left: auto; padding-left: 14px; font-style: normal; }
.rx-hint-doc, .rx-sig { position: fixed; z-index: 1001; max-width: 360px; background: #1b1e24; color: #e9ecf2; border: 1px solid #3a404b; border-radius: 9px; padding: 8px 11px; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); font: 12px/1.45 "Figtree", sans-serif; display: none; pointer-events: none; }
.rx-hint-doc code, .rx-sig code { display: block; font: 12px/1.45 "JetBrains Mono", monospace; color: #9ddcff; white-space: pre-wrap; word-break: break-word; }
.rx-sig code span.on { color: #fff; background: rgba(76, 141, 255, .35); border-radius: 3px; padding: 0 2px; font-weight: 700; }
.rx-hint-doc p, .rx-sig p { margin: 5px 0 0; color: #b4bccb; white-space: pre-wrap; }
.rx-hover p { margin: 0 0 4px; }
.rx-hover p.rx-hover-error { color: #ff9b9b; }
.rx-hover p.rx-hover-warn { color: #ffd27d; }
.rx-hover p.rx-hover-info { color: #9ddcff; }
.CodeMirror .rx-lint { width: 16px; }
.rx-gut { width: 14px; text-align: center; font-size: 11px; cursor: help; }
.rx-gut-error { color: #ff6b6b; }
.rx-gut-warn { color: #ffb547; }
.rx-gut-info { color: #76a8ff; }
.rx-err-line { background: rgba(255, 93, 93, .1); }
.rx-sq-error { text-decoration: underline wavy #ff6b6b; text-underline-offset: 3px; }
.rx-sq-warn { text-decoration: underline wavy #ffb547; text-underline-offset: 3px; }
.rx-sq-info { text-decoration: underline dotted #76a8ff; text-underline-offset: 3px; }
.CodeMirror-dialog { position: absolute; left: 0; right: 0; z-index: 15; background: #20242b; color: #e9ecf2; padding: 6px 10px; border-bottom: 1px solid #343a45; font: 12.5px "Figtree", sans-serif; }
.CodeMirror-dialog-top { top: 0; }
.CodeMirror-dialog-bottom { bottom: 0; border-top: 1px solid #343a45; }
.CodeMirror-dialog input { border: 1px solid #3a404b; background: #14161b; color: #e9ecf2; border-radius: 6px; padding: 3px 6px; outline: none; font: 12.5px "JetBrains Mono", monospace; width: 18em; }
.cm-searching { background: rgba(255, 213, 79, .25); outline: 1px solid rgba(255, 213, 79, .5); }
.CodeMirror-foldgutter { width: 12px; }
.CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { cursor: pointer; color: #6b7384; }
.CodeMirror-foldgutter-open:after { content: "▾"; }
.CodeMirror-foldgutter-folded:after { content: "▸"; }
.CodeMirror-foldmarker { color: #fff; background: #3a404b; border-radius: 4px; padding: 0 4px; cursor: pointer; font-family: sans-serif; }
.st-root.st-w-narrow .st-ribbon { scrollbar-width: none; }
.st-root.st-w-narrow .st-ribbon::-webkit-scrollbar { display: none; }

/* ROBLIX MCP: easy to find */
.st-btn.st-ai { background: linear-gradient(135deg, #e58a68, #c4603f); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 4px 14px rgba(217, 119, 87, .35); }
.st-btn.st-ai svg { width: 16px; height: 16px; }
.st-btn.st-ai:hover { filter: brightness(1.08); }
.st-root.st-w-narrow .st-btn.st-ai span { display: none; }
.st-root.st-w-narrow .st-dock button.st-dock-ai { color: #e58a68; }
.st-root:not(.st-w-narrow) .st-btn.st-ai span { display: inline !important; }

/* ===================== Studio v3: the Roblox Studio look (dark theme) =====================
   Neutral greys (#2e2e2e panels, #252525 fields), #cccccc text, #0b5aaf selection, Source Sans + Roboto Mono,
   square corners, ribbon with FILE / HOME / MODEL / TEST / VIEW / PLUGINS and grouped big + small buttons. */
.st-root { --s-bg: #252525; --s-panel: #2e2e2e; --s-panel2: #3c3c3c; --s-panel3: #464646; --s-line: #1a1a1a; --s-line2: #222222; --s-text: #cccccc; --s-muted: #aaaaaa; --s-dim: #858585;
  --s-blue: #00a2ff; --s-blue2: #4fb8ff; --s-sel: #0b5aaf; --s-hover: #424242; --s-head: #353535; --s-green: #00b06f; --s-red: #ff4444; --s-amber: #ff8e3c;
  font: 13px/1.3 "Source Sans 3", "Segoe UI", system-ui, sans-serif; background: var(--s-panel); color: var(--s-text); }
.st-root kbd { font-family: "Source Sans 3", sans-serif; }
/* title bar + quick access toolbar */
.st-menubar { height: 32px; background: #252525; border-bottom: 1px solid #1a1a1a; gap: 6px; padding: 0 8px; }
.st-brand { font-size: 13px; gap: 7px; }
.st-brand b { font-weight: 600; color: #e6e6e6; }
.st-logo { width: 16px; height: 16px; border-radius: 2px; background: #e2231a; transform: rotate(15deg); box-shadow: inset 0 0 0 4.5px #e2231a, inset 0 0 0 6px #fff; }
.st-qat { display: flex; gap: 1px; padding-left: 6px; margin-left: 2px; border-left: 1px solid #3a3a3a; }
.st-qbtn { width: 26px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 2px; background: none; color: #cccccc; cursor: pointer; padding: 0; }
.st-qbtn:hover { background: var(--s-hover); }
.st-qbtn svg { width: 15px; height: 15px; }
.st-menus { display: none; }
.st-title { gap: 5px; align-items: center; color: var(--s-dim); font-size: 12.5px; }
.st-gamename { font: 600 12.5px "Source Sans 3", sans-serif; color: #e6e6e6; width: auto; field-sizing: content; min-width: 60px; max-width: 280px; text-align: right; border-radius: 2px; padding: 2px 6px; }
.st-gamename:hover, .st-gamename:focus { background: #1e1e1e; border-color: #3a3a3a; }
.st-title-sfx { white-space: nowrap; }
.st-btn { border-radius: 3px; padding: 4px 10px; font-weight: 600; font-size: 12.5px; background: var(--s-panel2); color: #e6e6e6; }
.st-btn svg { width: 14px; height: 14px; }
.st-btn.st-ghost { box-shadow: inset 0 0 0 1px #4a4a4a; background: transparent; }
.st-btn.st-publish, .st-btn.st-primary { background: #00a2ff; color: #fff; }
.st-btn.st-publish:hover, .st-btn.st-primary:hover { background: #32b5ff; filter: none; }
.st-btn.st-ai { border-radius: 3px; box-shadow: none; background: #c4603f; }
.st-ibtn { width: 26px; height: 26px; border-radius: 2px; color: var(--s-muted); }
.st-ibtn:hover { background: var(--s-hover); color: #fff; }
.st-ibtn svg { width: 16px; height: 16px; }
/* ribbon tabs: FILE (blue) + HOME MODEL TEST VIEW PLUGINS */
.st-rtabs { height: 26px; padding: 0 6px 0 0; gap: 0; background: #252525; align-items: stretch; }
.st-rtabs [data-rtab], .st-filetab { height: 26px; border-radius: 0; padding: 0 13px; font: 600 11.5px "Source Sans 3", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #aaaaaa; }
.st-rtabs [data-rtab]:hover { color: #fff; background: #2a2a2a; }
.st-rtabs [data-rtab].on { background: var(--s-panel); color: #fff; box-shadow: inset 1px 0 0 #1a1a1a, inset -1px 0 0 #1a1a1a; }
.st-rtabs [data-rtab].on::after { display: none; }
.st-filetab { border: 0; background: #0074bd; color: #fff; cursor: pointer; margin-right: 2px; }
.st-filetab:hover { background: #0a86d6; }
.st-rtabs .st-ibtn { height: 26px; width: 26px; align-self: center; }
/* ribbon body */
.st-ribbon { padding: 3px 4px 0; gap: 0; background: var(--s-panel); border-bottom: 1px solid #1a1a1a; min-height: 86px; box-sizing: border-box; align-items: stretch; }
.st-group { padding: 0 4px; border-right: 1px solid #3f3f3f; display: flex; flex-direction: column; }
.st-gbody { gap: 1px; align-items: stretch; }
.st-glabel { font: 400 11px "Source Sans 3", sans-serif; letter-spacing: 0; text-transform: none; color: #aaaaaa; padding: 1px 0 3px; }
.st-tool { min-width: 44px; padding: 3px 5px 2px; gap: 2px; border-radius: 2px; color: #cccccc; font: 400 12px/1.15 "Source Sans 3", sans-serif; justify-content: flex-start; border: 1px solid transparent; }
.st-tool svg { width: 32px; height: 32px; padding: 1px; box-sizing: border-box; flex: none; }
.st-tool span { max-width: 74px; text-align: center; white-space: normal; }
.st-tool:hover { background: var(--s-hover); }
.st-tool.on { background: rgba(11, 90, 175, .55); border-color: #0b5aaf; box-shadow: none; color: #fff; }
.st-tool:disabled { opacity: .35; }
.st-stack { display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; padding-top: 1px; }
.st-tool.st-sm { flex-direction: row; justify-content: flex-start; min-width: 0; height: 20px; padding: 0 8px 0 3px; gap: 5px; }
.st-tool.st-sm svg { width: 16px; height: 16px; padding: 0; }
.st-tool.st-sm span { max-width: none; white-space: nowrap; text-align: left; }
.st-split { align-items: stretch; }
.st-split .st-tool { padding-right: 2px; }
.st-dd { border-radius: 2px; padding: 0 2px; color: #aaaaaa; font-size: 10px; }
.st-dd:hover { background: var(--s-hover); color: #fff; }
.st-gbody.st-col { gap: 2px; font-size: 12px; justify-content: flex-start; padding-top: 3px; }
.st-gbody.st-col input[type=number] { width: 44px; background: #252525; border: 1px solid #1a1a1a; border-radius: 2px; font: 12px "Source Sans 3", sans-serif; color: #cccccc; }
.st-gbody.st-col kbd { color: var(--s-dim); margin-left: 2px; }
.st-root input[type=checkbox] { accent-color: #00a2ff; }
.st-playbtn svg { color: inherit; }
/* docks */
.st-gutter { background: #1a1a1a; }
.st-gutter::after { inset: 0 2px; }
.st-left, .st-right-panel, .st-bottom { background: var(--s-panel); }
.st-ph { height: 24px; padding: 0 2px 0 8px; background: var(--s-head); border-bottom: 1px solid #1a1a1a; font: 600 12.5px "Source Sans 3", sans-serif; letter-spacing: 0; text-transform: none; color: #e6e6e6; }
.st-ph > svg { width: 14px; height: 14px; color: #aaaaaa; }
.st-ph .st-pclose { width: 20px; height: 20px; font-size: 11px; color: #aaaaaa; }
.st-ph .st-propsel { color: #aaaaaa; font-weight: 400; }
.st-search { margin: 4px; padding: 3px 7px; border-radius: 2px; background: #252525; border: 1px solid #1a1a1a; color: #cccccc; font: 12.5px "Source Sans 3", sans-serif; }
.st-search::placeholder, .st-cmd::placeholder { color: #6e6e6e; }
.st-search:focus { border-color: #00a2ff; }
/* explorer */
.st-explorer { padding-bottom: 4px; }
.st-row { height: 20px; margin: 0; border-radius: 0; gap: 3px; font-size: 13px; color: #cccccc; }
.st-row:hover { background: var(--s-hover); }
.st-row.sel, .st-row.sel:hover { background: #0b5aaf; box-shadow: none; color: #fff; }
.st-row.hov:not(.sel) { background: #383838; }
.st-row.drop { box-shadow: inset 0 0 0 1px #00a2ff; }
.st-exp { color: #aaaaaa; font-size: 9px; }
.st-plus { border-radius: 2px; background: #4a4a4a; color: #e6e6e6; width: 16px; height: 16px; line-height: 15px; }
.st-rename { border-radius: 0; border-color: #00a2ff; background: #252525; font: 13px "Source Sans 3", sans-serif; }
/* properties */
.st-props { background: var(--s-panel); }
.st-pcat { position: sticky; top: 0; z-index: 1; height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 6px; background: var(--s-head); color: #e6e6e6; font: 600 12.5px "Source Sans 3", sans-serif; letter-spacing: 0; text-transform: none; border-bottom: 1px solid #1a1a1a; cursor: pointer; user-select: none; }
.st-pcat::before { content: "▾"; font-size: 9px; color: #aaaaaa; width: 10px; }
.st-psec.closed > .st-pcat::before { content: "▸"; }
.st-psec.closed > :not(.st-pcat) { display: none !important; }
.st-prow { grid-template-columns: 45% 55%; min-height: 22px; border-bottom: 1px solid #222222; }
.st-prow label { padding: 0 6px 0 16px; color: #cccccc; font-size: 12.5px; align-self: stretch; display: flex; align-items: center; border-right: 1px solid #222222; }
.st-prow:hover { background: #333333; }
.st-pval { padding: 0 4px; }
.st-pin { height: 20px; border-radius: 0; font: 12.5px "Source Sans 3", sans-serif; color: #cccccc; padding: 0 3px; }
.st-pin:hover { border-color: transparent; }
.st-pin:focus { border-color: #00a2ff; background: #252525; }
select.st-pin { background: transparent; }
select.st-pin option { background: #2e2e2e; }
.st-swatch { width: 14px; height: 14px; border-radius: 0; border: 1px solid #111; }
.st-refbtn { border-radius: 0; background: transparent; border-color: transparent; color: #cccccc; }
.st-refbtn:hover { border-color: #4a4a4a; }
.st-empty { color: var(--s-dim); font-size: 12.5px; }
.st-btn.st-wide { border-radius: 2px; margin: 4px 6px; width: calc(100% - 12px); }
/* viewport document tabs */
.st-tabs { background: #252525; border-bottom: 1px solid #1a1a1a; }
.st-tab { padding: 4px 12px; border-top: 0; font: 12.5px "Source Sans 3", sans-serif; color: #aaaaaa; border-right: 1px solid #1a1a1a; }
.st-tab.on { background: var(--s-panel); color: #fff; box-shadow: inset 0 2px 0 #00a2ff; }
.st-vhint { font-family: "Source Sans 3", sans-serif; }
/* output + command bar */
.st-btabs [data-btab] { height: 24px; border-radius: 0; font: 600 12.5px "Source Sans 3", sans-serif; letter-spacing: 0; text-transform: none; color: #aaaaaa; padding: 0 10px; }
.st-btabs [data-btab].on { background: var(--s-panel); color: #fff; }
.st-output { font: 12.5px/1.45 "Roboto Mono", ui-monospace, monospace; color: #cccccc; padding: 2px 8px; }
.st-log-warn { color: #ff8e3c; } .st-log-error { color: #ff4444; } .st-log-info { color: #00a2ff; } .st-log-cmd { color: #858585; }
.st-cmd { margin: 0; border-radius: 0; border: 0; border-top: 1px solid #1a1a1a; background: #252525; font: 12.5px "Roboto Mono", monospace; padding: 5px 8px; color: #cccccc; }
.st-cmd:focus { box-shadow: inset 0 0 0 1px #00a2ff; }
.st-analysis .st-arow { border-radius: 0; }
.st-status { height: 22px; background: #252525; border-top: 1px solid #1a1a1a; color: #aaaaaa; font-size: 12px; }
/* toolbox (like the Studio Toolbox: tabs + thumbnail grid) */
.st-tbtabs { padding: 0 4px; gap: 0; border-bottom: 1px solid #1a1a1a; }
.st-tbtabs button { border-radius: 0; background: none; color: #aaaaaa; font: 600 12.5px "Source Sans 3", sans-serif; padding: 5px 2px; box-shadow: inset 0 -2px 0 transparent; }
.st-tbtabs button:hover { color: #fff; }
.st-tbtabs button.on { background: none; color: #fff; box-shadow: inset 0 -2px 0 #00a2ff; }
.st-toolbox { padding: 0 4px 8px; }
.st-tbcat { font: 600 12px "Source Sans 3", sans-serif; letter-spacing: 0; text-transform: none; color: #aaaaaa; margin: 8px 2px 4px; }
.st-tbgrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; }
.st-tbitem { background: none; border-radius: 2px; padding: 3px; font: 12px "Source Sans 3", sans-serif; color: #cccccc; gap: 2px; }
.st-tbitem:hover { background: var(--s-hover); }
.st-tbitem img { border-radius: 2px; background: #3a3a3a; }
/* menus, popovers, dialogs, tooltips */
.st-pop, .st-ctx { background: #2e2e2e; border: 1px solid #1a1a1a; border-radius: 2px; box-shadow: 0 4px 16px rgba(0, 0, 0, .6); padding: 2px 0; }
.st-list button, .st-ctxi { border-radius: 0; padding: 4px 14px 4px 10px; color: #cccccc; font: 13px "Source Sans 3", sans-serif; }
.st-list button:hover, .st-ctxi:hover { background: #0b5aaf; color: #fff; }
.st-list button kbd, .st-ctxi kbd { color: #858585; }
.st-list button:hover kbd, .st-ctxi:hover kbd { color: #dfe8f5; }
.st-sep { background: #3f3f3f; margin: 3px 0; }
.st-palette button, .st-mats button, .st-assets button { border-radius: 2px; }
.st-mats button { background: #3a3a3a; font-family: "Source Sans 3", sans-serif; }
.st-mats button:hover { background: #0b5aaf; }
.st-mbox { background: #2e2e2e; border: 1px solid #1a1a1a; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.st-mbody h3 { font: 600 17px "Source Sans 3", sans-serif; color: #e6e6e6; }
.st-field { font: 600 12.5px "Source Sans 3", sans-serif; }
.st-field input, .st-field textarea, .st-field select { border-radius: 2px; background: #252525; border-color: #1a1a1a; font: 13px "Source Sans 3", sans-serif; color: #cccccc; }
.st-field input:focus, .st-field textarea:focus { border-color: #00a2ff; }
.st-tpls button, .st-insg button, .st-pubcard { border-radius: 3px; }
.st-tpls button { background: #3a3a3a; }
.st-tpls button:hover, .st-insg button:hover { background: #0b5aaf; }
.st-insg button { background: #3a3a3a; font-family: "Source Sans 3", sans-serif; }
.st-tip { background: #3c3c3c; border-color: #1a1a1a; border-radius: 2px; font: 12.5px "Source Sans 3", sans-serif; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.st-tip kbd { background: #2e2e2e; font-family: "Source Sans 3", sans-serif; }
.st-toast { border-radius: 3px; background: #3c3c3c; color: #e6e6e6; font: 600 13px "Source Sans 3", sans-serif; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
/* terrain editor in the Studio palette */
.st-ttool, .st-tsw, .st-trow select, .st-trow input[type=number], .st-thint { border-radius: 2px; }
.st-ttool { background: #3a3a3a; }
.st-ttool.on, .st-tsw.on { background: #0b5aaf; box-shadow: none; }
/* script editor: Roblox Studio's default dark script colors */
.cm-s-rx.CodeMirror { background: #252525; color: #cccccc; }
.st-codepane .CodeMirror { font: 14px/1.45 "Roboto Mono", ui-monospace, monospace; }
.st-editor, .st-codefallback { background: #252525; }
.cm-s-rx .CodeMirror-gutters { background: #252525; border-right: 0; }
.cm-s-rx .CodeMirror-linenumber { color: #858585; }
.cm-s-rx .CodeMirror-cursor { border-left: 1.5px solid #cccccc; }
.cm-s-rx .CodeMirror-selected, .cm-s-rx.CodeMirror-focused .CodeMirror-selected { background: #0b5aaf; }
.cm-s-rx .CodeMirror-activeline-background { background: #2d3236; }
.cm-s-rx .cm-keyword { color: #f86d7c; } .cm-s-rx .cm-builtin { color: #84d6f7; } .cm-s-rx .cm-string { color: #adf195; } .cm-s-rx .cm-number, .cm-s-rx .cm-atom { color: #ffc600; }
.cm-s-rx .cm-comment { color: #666666; font-style: normal; } .cm-s-rx .cm-variable, .cm-s-rx .cm-variable-2 { color: #cccccc; } .cm-s-rx .cm-operator { color: #cccccc; }
.cm-s-rx .cm-def, .cm-s-rx .cm-variable-3 { color: #fdfbac; } .cm-s-rx .cm-property { color: #61a1f1; }
.cm-s-rx .CodeMirror-matchingbracket { color: #fff !important; outline: 1px solid #6e6e6e; background: #3a3a3a; }
.CodeMirror-hints { background: #2e2e2e; border-color: #1a1a1a; border-radius: 2px; font-family: "Roboto Mono", monospace; }
li.CodeMirror-hint-active { background: #0b5aaf; }
.CodeMirror-dialog { background: #2e2e2e; border-color: #1a1a1a; font-family: "Source Sans 3", sans-serif; }
/* narrow screens keep the drawers and dock, in the Studio palette */
.st-root.st-w-narrow .st-dock { background: #252525; border-top-color: #1a1a1a; }
.st-root.st-w-narrow .st-qat, .st-root.st-w-narrow .st-title-sfx { display: none; }
.st-root.st-w-narrow .st-filetab { padding: 0 9px; }
.st-root.st-w-narrow .st-tool.st-sm span { display: none; }
.st-root.st-w-narrow .st-tool svg { width: 24px; height: 24px; }
.st-root.st-w-narrow .st-tool.st-sm { height: 22px; padding: 0 4px; }
.st-root.st-w-narrow .st-tool.st-sm svg { width: 16px; height: 16px; }
.st-root.st-w-narrow .st-ribbon { min-height: 0; }
/* command bar: a growing multi-line box (pasted scripts keep their lines) */
.st-cmd { display: block; width: 100%; box-sizing: border-box; resize: none; overflow-y: auto; min-height: 28px; max-height: 180px; line-height: 1.45; white-space: pre; tab-size: 4; flex: none; }
.st-cmd.hidden { display: none !important; }

/* ROBLIX AI chat (left dock, like Roblox Assistant) */
.st-left.st-ai-on > :not(.st-aipanel) { display: none !important; }
.st-left:not(.st-ai-on) > .st-aipanel { display: none; }
.st-aipanel { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--s-panel); }
.st-ai-head > svg { color: #e58a68 !important; }
.st-ai-model { font-style: normal; font-weight: 400; font-size: 11px; color: var(--s-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ai-mcp { border: 1px solid #4a4a4a; background: #3a3a3a; color: #e6e6e6; font: 700 11px "Source Sans 3", sans-serif; letter-spacing: .05em; padding: 2px 7px; border-radius: 3px; cursor: pointer; }
.st-ai-mcp:hover { background: #0b5aaf; border-color: #0b5aaf; }
.st-ai-log { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 7px; user-select: text; }
.st-ai-empty { margin: auto 4px; text-align: center; color: var(--s-muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.st-ai-empty > svg { width: 34px; height: 34px; color: #e58a68; }
.st-ai-empty h3 { margin: 0; color: #e6e6e6; font: 600 16px "Source Sans 3", sans-serif; }
.st-ai-empty p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; }
.st-ai-sugs { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.st-ai-empty p.st-ai-note { margin: 10px 0 0; font-size: 11px; opacity: .62; }   /* chats are saved; the owner can read them (Owner panel → ROBLIX AI) */
.st-ai-sugs button { text-align: left; border: 1px solid #3f3f3f; background: #353535; color: #d6d6d6; border-radius: 6px; padding: 7px 9px; cursor: pointer; font: 12.5px "Source Sans 3", sans-serif; }
.st-ai-sugs button:hover { border-color: #0b5aaf; background: #3a3a3a; color: #fff; }
.st-ai-msg { font-size: 13px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.st-ai-msg.user { align-self: flex-end; max-width: 88%; background: #0b5aaf; color: #fff; padding: 6px 10px; border-radius: 10px 10px 2px 10px; white-space: normal; }
.st-ai-msg.bot { color: #dcdcdc; padding: 0 2px; }
.st-ai-msg.bot ul { margin: 3px 0; padding-left: 18px; }
.st-ai-msg.bot code { font: 12px "Roboto Mono", monospace; background: #3a3a3a; padding: 0 4px; border-radius: 3px; }
.st-ai-msg.err { color: #ffb4a8; background: rgba(255, 68, 68, .12); border: 1px solid rgba(255, 68, 68, .3); padding: 6px 9px; border-radius: 6px; font-size: 12.5px; }
.st-ai-h { color: #fff; }
.st-ai-code { position: relative; margin: 5px 0; }
.st-ai-code pre { margin: 0; background: #252525; border: 1px solid #1a1a1a; border-radius: 4px; padding: 8px 9px; font: 12px/1.45 "Roboto Mono", monospace; color: #cccccc; overflow-x: auto; white-space: pre; }
.st-ai-copy { position: absolute; top: 4px; right: 4px; border: 0; background: #3c3c3c; color: #ccc; font: 600 11px "Source Sans 3", sans-serif; padding: 2px 7px; border-radius: 3px; cursor: pointer; opacity: .8; }
.st-ai-copy:hover { opacity: 1; background: #0b5aaf; color: #fff; }
.st-ai-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #bdbdbd; background: #333333; border: 1px solid #3c3c3c; border-radius: 5px; padding: 4px 8px; cursor: pointer; }
.st-ai-act:hover { border-color: #4a4a4a; }
.st-ai-act.bad { border-color: rgba(255, 68, 68, .35); }
.st-ai-what { color: #8fc6ff; font-family: "Roboto Mono", monospace; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.st-ai-ok { color: #00b06f; font-weight: 700; } .st-ai-bad { color: #ff4444; font-weight: 800; }
.st-ai-spin { width: 11px; height: 11px; border: 2px solid #555; border-top-color: #00a2ff; border-radius: 50%; animation: stAiSpin .7s linear infinite; }
@keyframes stAiSpin { to { transform: rotate(360deg); } }
.st-ai-det { display: none; width: 100%; flex-direction: column; gap: 4px; margin-top: 3px; cursor: text; }
.st-ai-act.open .st-ai-det { display: flex; }
.st-ai-det pre { margin: 2px 0 0; max-height: 160px; overflow: auto; background: #252525; border-radius: 3px; padding: 5px 7px; font: 11px/1.4 "Roboto Mono", monospace; white-space: pre-wrap; word-break: break-word; color: #c8c8c8; }
.st-ai-det img { max-width: 100%; border-radius: 3px; }
.st-ai-think { display: flex; gap: 4px; padding: 4px 2px; }
.st-ai-think i { width: 6px; height: 6px; border-radius: 50%; background: #e58a68; animation: stAiDot 1s ease-in-out infinite; }
.st-ai-think i:nth-child(2) { animation-delay: .15s; } .st-ai-think i:nth-child(3) { animation-delay: .3s; }
@keyframes stAiDot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.st-ai-foot { flex: none; padding: 6px 8px 7px; border-top: 1px solid #1a1a1a; }
.st-ai-box { display: flex; align-items: flex-end; gap: 6px; background: #252525; border: 1px solid #1a1a1a; border-radius: 6px; padding: 5px 5px 5px 9px; }
.st-ai-box:focus-within { border-color: #00a2ff; }
.st-ai-box textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: none; color: #e6e6e6; font: 13px/1.4 "Source Sans 3", sans-serif; max-height: 160px; padding: 2px 0; }
.st-ai-send { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; border-radius: 5px; background: #00a2ff; color: #fff; cursor: pointer; padding: 0; }
.st-ai-send svg { width: 15px; height: 15px; }
.st-ai-send.stop { background: #4a4a4a; }
.st-ai-usage { font-size: 11px; color: var(--s-dim); margin-top: 5px; text-align: center; }
.st-ai-usage b { color: #cccccc; }
.st-ai-usage.low b { color: #ff8e3c; }
.st-ai-usage.out b { color: #ff5a5a; }
/* ROBLIX AI on Claude (api/ai.js CLAUDE_MODEL) */
.st-ai-model.claude { color: #fff; background: linear-gradient(135deg, #c15f3c, #e08a5f); padding: 2px 7px; border-radius: 999px; font-weight: 800; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.st-tool.st-aibtn.on, .st-btn.st-ai.on { box-shadow: inset 0 0 0 1px #e58a68; }

/* Team Test */
.st-ttbar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; background: #2e2e2e; border: 1px solid #1a1a1a; border-radius: 6px; padding: 5px 6px 5px 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); font-size: 13px; color: #e6e6e6; white-space: nowrap; max-width: calc(100% - 16px); }
.st-ttbar b { font-weight: 700; color: #fff; }
.st-ttbar .st-btn { padding: 3px 12px; }
.st-ttdot { width: 8px; height: 8px; border-radius: 50%; background: #00b06f; box-shadow: 0 0 0 3px rgba(0, 176, 111, .25); animation: stAiDot 1.4s ease-in-out infinite; }
.st-root.st-playing .st-ribbon .st-group:has([data-act="teamtest"]) { opacity: 1; pointer-events: auto; }

/* NPC from username */
.st-npcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 46vh; overflow-y: auto; }
.st-npcs button { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; border: 1px solid #3a3a3a; background: #333; color: #e6e6e6; border-radius: 4px; padding: 6px; cursor: pointer; }
.st-npcs button:hover { border-color: #0b5aaf; background: #3a3a3a; }
.st-npcs img { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 4px; background: #252525; }
.st-npcs b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-npcs span { font-size: 11.5px; color: #aaa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= Studio on any screen (after the v3 theme so it wins) ================= */
/* notches / rounded corners */
.st-root { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); box-sizing: border-box; }
/* ribbon tabs scroll sideways instead of pushing Play / Help off the screen */
.st-rtabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.st-rtabs::-webkit-scrollbar { display: none; }
.st-rtabs > * { flex: none; }
.st-root.st-w-narrow .st-rtabs [data-rtab], .st-root.st-w-narrow .st-filetab { padding: 0 9px; }
.st-root.st-w-narrow .st-rtabs .st-quickplay { display: none; }   /* the bottom dock has Play */
/* dialogs fit any screen */
.st-modal { padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
.st-mbox { max-height: 100%; }
.st-mactions { flex-wrap: wrap; }
.st-pop { max-width: min(360px, calc(100% - 8px)); }
.st-mats { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
/* 45 materials: the picker scrolls instead of running off the screen */
.st-mats { max-height: min(60vh, 470px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.st-ttbar { overflow: hidden; text-overflow: ellipsis; }
.st-root.st-w-narrow .st-row2, .st-root.st-w-narrow .st-thumbrow, .st-root.st-w-narrow .st-pubcard { flex-direction: column; align-items: stretch; }
.st-root.st-w-narrow .st-thumbrow img, .st-root.st-w-narrow .st-pubcard img { width: 100%; }
.st-root.st-w-narrow .st-mbody { padding: 14px 14px 6px; }
.st-root.st-w-narrow .st-mactions { padding: 10px 14px 14px; }
.st-root.st-w-narrow .st-mactions > * { flex: 1 1 auto; }
/* touch screens: hover-only buttons are always shown, and small buttons get finger-sized */
@media (hover: none) {
  .st-plus, .st-tbitem .st-cs-del { display: block; }
}
@media (pointer: coarse) {
  .st-qbtn, .st-ibtn { width: 36px; height: 34px; }
  .st-rtabs { height: 34px; }
  .st-rtabs [data-rtab], .st-filetab, .st-rtabs .st-ibtn { height: 34px; }
  .st-ph .st-pclose { width: 34px; height: 34px; font-size: 13px; }
  .st-tool.st-sm, .st-root.st-w-narrow .st-tool.st-sm { height: 30px; }
  .st-plus { width: 26px; height: 26px; line-height: 24px; }
  .st-menubar { height: 40px; }
}
/* landscape phones: more of the height goes to the 3D view (the ribbon keeps icons only) */
@media (max-height: 500px) {
  .st-root .st-glabel { display: none; }
  .st-root .st-ribbon { min-height: 0; }
  .st-root.st-w-narrow .st-dock { height: 46px; }
  .st-root.st-w-narrow .st-bottom { height: min(var(--bh), 42vh); }
}


/* ROBLIX AI header: POWERED BY ROBLIX AI v1 */
.st-ai-model.v1 { color: #fff; background: linear-gradient(135deg, #e2231a, #ff7a1a); padding: 2px 7px; border-radius: 999px; font-style: normal; font-weight: 800; font-size: 10px; letter-spacing: .04em; }

/* touch: the bar of keyboard shortcuts as buttons (js/studio/touch.js) */
.st-touchbar { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 14px; background: rgba(23, 25, 30, .88); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); backdrop-filter: blur(8px); z-index: 6; }
.st-touchbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; padding: 7px 6px 5px; border: 0; border-radius: 10px; background: transparent; color: var(--s-text); cursor: pointer; touch-action: manipulation; }
.st-touchbar button:active:not(:disabled) { background: var(--s-panel2); }
.st-touchbar button:disabled { opacity: .35; }
.st-touchbar svg { width: 22px; height: 22px; }
.st-touchbar span { font-size: 10.5px; font-weight: 700; color: var(--s-muted); }
.st-root.st-playing .st-touchbar { display: none; }
@media (max-width: 420px) { .st-touchbar span { display: none; } .st-touchbar button { min-width: 44px; padding: 9px 6px; } }

/* New Place → "describe a game" (js/studio/aigame.js) */
.st-aigame { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; padding: 6px 6px 6px 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 138, 0, .16), rgba(61, 139, 255, .16)); box-shadow: inset 0 0 0 1px rgba(255, 160, 60, .45); }
.st-aigame-ic { color: #ffa53a; font-size: 18px; flex: none; }
.st-aigame input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--s-text); font: 600 14px "Figtree", sans-serif; padding: 8px 2px; outline: none; }
.st-aigame input::placeholder { color: var(--s-muted); font-weight: 500; }
.st-aigame .st-btn { flex: none; padding: 9px 14px; }
@media (max-width: 560px) { .st-aigame { flex-wrap: wrap; } .st-aigame input { flex-basis: calc(100% - 30px); } .st-aigame .st-btn { width: 100%; justify-content: center; } }

/* Animation Editor (js/studio/animator.js) */
.st-root.st-animating .st-touchbar { display: none; }
.anm { position: absolute; left: 0; right: 0; bottom: 0; height: min(300px, 58%); display: flex; flex-direction: column; background: #1b1d22; border-top: 1px solid #0d0e11; box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); z-index: 7; font-size: 12.5px; }
.anm-top { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--s-line); flex-wrap: wrap; }
.anm-name { width: 150px; background: var(--s-panel); border: 1px solid var(--s-line); color: var(--s-text); border-radius: 6px; padding: 5px 8px; font: 700 13px "Figtree", sans-serif; }
.anm-tr { display: flex; gap: 2px; }
.anm-tr button, .anm-x { width: 30px; height: 28px; border: 0; border-radius: 6px; background: var(--s-panel2); color: var(--s-text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.anm-tr button svg, .anm-x svg { width: 15px; height: 15px; }
.anm-tr button.on { background: var(--s-blue); color: #fff; }
.anm-tr .anm-play { background: #23b05f; color: #fff; }
.anm-time { font: 600 12px "JetBrains Mono", monospace; color: var(--s-muted); min-width: 120px; }
.anm-f { display: flex; align-items: center; gap: 5px; color: var(--s-muted); }
.anm-f input, .anm-f select, .anm-load { background: var(--s-panel); border: 1px solid var(--s-line); color: var(--s-text); border-radius: 6px; padding: 4px 6px; font: 600 12px "Figtree", sans-serif; }
.anm-f input { width: 58px; }
.anm-top .st-btn { padding: 5px 10px; }
.anm-x { background: transparent; }
.anm-x:hover { background: var(--s-panel2); }
.anm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 116px 1fr 250px; overflow: hidden; }
.anm-joints { border-right: 1px solid var(--s-line); overflow-y: auto; }
.anm-jh, .anm-j { height: 24px; line-height: 24px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anm-jh { color: var(--s-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--s-line); }
.anm-j { cursor: pointer; border-bottom: 1px solid #23262c; }
.anm-j:hover { background: #24272e; }
.anm-j.on { background: var(--s-sel); color: #fff; }
.anm-all { color: var(--s-muted); cursor: default; font-style: italic; }
.anm-tl { position: relative; overflow: hidden; cursor: col-resize; user-select: none; }
.anm-rows { position: absolute; inset: 0; overflow-y: auto; }
.anm-ruler { position: relative; height: 24px; border-bottom: 1px solid var(--s-line); background: #202228; }
.anm-ruler i { position: absolute; bottom: 0; width: 1px; height: 6px; background: #4a505b; }
.anm-ruler i.big { height: 11px; background: #8f96a3; }
.anm-ruler b { position: absolute; bottom: 11px; left: 3px; font: 600 10px "JetBrains Mono", monospace; color: var(--s-muted); }
.anm-row { position: relative; height: 24px; border-bottom: 1px solid #23262c; }
.anm-row.on { background: rgba(61, 139, 255, .08); }
.anm-allrow { background: #1f2126; }
.anm-k { position: absolute; top: 6px; width: 11px; height: 11px; margin-left: -6px; transform: rotate(45deg); background: #e7c14a; border: 1px solid #15171c; cursor: grab; }
.anm-k.e-smooth { background: #ffd23a; border-radius: 50%; transform: none; width: 12px; height: 12px; top: 5px; }
.anm-k.e-constant { background: #8f96a3; } .anm-k.e-cubic { background: #6ad1ff; } .anm-k.e-elastic { background: #c58bff; } .anm-k.e-bounce { background: #6fe08a; }
.anm-allrow .anm-k { background: #9aa1ad; }
.anm-k.sel { outline: 2px solid #fff; outline-offset: 1px; }
.anm-head { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.anm-head i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #ff5a4e; }
.anm-head::before { content: ""; position: absolute; top: 0; left: -6px; border: 6px solid transparent; border-top-color: #ff5a4e; }
.anm-insp { border-left: 1px solid var(--s-line); padding: 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.anm-ih { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.anm-ih b { font-size: 13px; }
.anm-ih span { color: var(--s-muted); font-size: 11px; }
.anm-sub { color: var(--s-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin-top: 2px; }
.anm-rot { display: grid; grid-template-columns: 16px 1fr 64px; align-items: center; gap: 6px; }
.anm-rot input[type=range] { width: 100%; accent-color: var(--s-blue); }
.anm-insp input[type=number] { width: 100%; box-sizing: border-box; background: var(--s-panel); border: 1px solid var(--s-line); color: var(--s-text); border-radius: 5px; padding: 3px 5px; font: 600 12px "JetBrains Mono", monospace; }
.anm-pos { display: grid; grid-template-columns: 14px 1fr 14px 1fr 14px 1fr; gap: 4px; align-items: center; }
.anm-ax { font-weight: 800; font-size: 11px; text-align: center; }
.ax-x { color: #ff6a6a; } .ax-y { color: #5fd65f; } .ax-z { color: #6aa2ff; }
.anm-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.anm-btns .st-btn, .anm-ease .st-btn { padding: 4px 8px; font-size: 12px; }
.anm-btns .st-btn svg { width: 12px; height: 12px; }
.anm-ease { display: flex; gap: 4px; }
.anm-ease select { flex: 1; min-width: 0; background: var(--s-panel); border: 1px solid var(--s-line); color: var(--s-text); border-radius: 5px; padding: 3px 4px; }
.anm-pop { position: fixed; z-index: 2147483000; min-width: 170px; padding: 5px; border-radius: 9px; background: #23262d; border: 1px solid #3a404a; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); display: flex; flex-direction: column; font: 13px "Figtree", sans-serif; color: #e7e9ee; }
.anm-pop button { text-align: left; border: 0; background: transparent; color: inherit; padding: 6px 10px; border-radius: 6px; cursor: pointer; font: inherit; }
.anm-pop button:hover { background: #2f343d; }
.anm-pop button.on { color: #6ad1ff; font-weight: 700; }
.anm-pop-h { padding: 4px 10px; color: #9aa1ad; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.anm-pop-sep { height: 1px; background: #3a404a; margin: 4px 0; }
.anm-rigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 10px; }
.anm-rigs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; border-radius: 8px; border: 1px solid var(--s-line); background: var(--s-panel); color: var(--s-text); cursor: pointer; text-align: left; }
.anm-rigs button:hover { border-color: var(--s-blue); }
.anm-rigs button span { color: var(--s-muted); font-size: 11px; }
.anm-rigs svg { width: 18px; height: 18px; }
.anm-code { max-height: 260px; overflow: auto; }
@media (max-width: 860px) { .anm { height: min(380px, 62%); } .anm-body { grid-template-columns: 92px 1fr; grid-template-rows: 1fr auto; } .anm-insp { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--s-line); max-height: 150px; } .anm-name { width: 110px; } .anm-time { min-width: 0; } }

/* Publish as: you or a community */
.st-pubas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.st-pubas select { background: #252525; color: #cccccc; border: 1px solid #1a1a1a; border-radius: 2px; padding: 6px 8px; font: 13px "Source Sans 3", sans-serif; min-width: 240px; max-width: 100%; outline: none; }
.st-pubas select:focus { border-color: #0b5aaf; }
.st-pubtag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #0b5aaf; color: #fff; }
.st-pubnote { margin: 6px 0 0; font-size: 12.5px; color: var(--s-muted); }
.st-pubnote.warn { color: #ffb74d; }

/* "ROBLIX was updated" bar in Studio */
.st-updbar { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 8px 8px 14px; background: #2e2e2e; color: #cccccc; border: 1px solid #0b5aaf; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); font: 13px "Source Sans 3", sans-serif; }
.st-updbar span { flex: 1; min-width: 0; }
.st-updbar b { color: #fff; }
.st-updx { border: 0; background: none; color: #999; cursor: pointer; padding: 4px 6px; }

/* ---------- reopen a closed game (js/studio/recover.js) ---------- */
.st-toast.st-rtoast { display: flex; align-items: center; gap: 10px; pointer-events: auto; padding: 6px 6px 6px 14px; }
.st-rtoast .st-btn { padding: 5px 14px; }
.st-rtoast b { font-weight: 800; }
.st-rtx { border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; font-size: 13px; padding: 4px 6px; }
.st-rtx:hover { opacity: 1; }
.st-recsec { margin: 4px 0 14px; padding: 10px; border-radius: 10px; background: rgba(80, 140, 255, .08); box-shadow: inset 0 0 0 1px rgba(80, 140, 255, .25); }
.st-rech { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.st-recsec .st-linkbtn { border: 0; background: transparent; color: #6aa3ff; cursor: pointer; font: inherit; font-weight: 700; }
.st-rec img { background: var(--s-bg) center / 40% no-repeat; }
.st-rec-u { font-style: normal; color: #ffb454; font-weight: 700; }

/* ---------- Team chat (js/studio/teamchat.js) ---------- */
.st-tchat-fab { position: absolute; right: 14px; bottom: 14px; z-index: 45; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--s-blue, #3d8bff); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); transition: transform .15s, filter .15s; }
.st-tchat-fab:hover { transform: translateY(-2px); filter: brightness(1.1); }
.st-tchat-fab.on { background: #2b3038; }
.st-tchat-fab svg { width: 22px; height: 22px; }
.st-tch-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #e5484d; color: #fff; font: 800 11px/18px "Figtree", sans-serif; font-style: normal; box-shadow: 0 0 0 2px #14161b; }
.st-tch-badge.ping { background: #ffb703; color: #2a1600; }
.st-tchat { position: absolute; right: 14px; bottom: 70px; z-index: 45; width: min(340px, calc(100% - 28px)); height: min(430px, calc(100% - 90px)); display: flex; flex-direction: column; background: var(--s-panel, #1d2026); color: var(--s-text, #e9ecf2); border: 1px solid var(--s-line, #333944); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); overflow: hidden; font: 13px "Figtree", "Source Sans 3", sans-serif; }
.st-tchat[hidden] { display: none; }
.st-tch-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--s-line, #333944); }
.st-tch-who { flex: 1; color: var(--s-muted, #9ba4b4); font-size: 12px; }
.st-tch-x { border: 0; background: transparent; color: var(--s-muted, #9ba4b4); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }
.st-tch-x:hover { background: var(--s-panel2, #272b33); color: var(--s-text, #fff); }
.st-tch-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.st-tch-m { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 6px 9px; border-radius: 10px; background: var(--s-panel2, #272b33); }
.st-tch-m b { grid-column: 1; font-size: 12px; }
.st-tch-m span { grid-column: 1 / -1; word-break: break-word; line-height: 1.35; }
.st-tch-m time { grid-column: 2; grid-row: 1; color: var(--s-muted, #9ba4b4); font-size: 10.5px; }
.st-tch-m.me { background: color-mix(in srgb, var(--s-blue, #3d8bff) 22%, var(--s-panel2, #272b33)); }
.st-tch-m.ping { box-shadow: inset 3px 0 0 #ffb703; background: color-mix(in srgb, #ffb703 14%, var(--s-panel2, #272b33)); }
.st-tch-m em { font-style: normal; font-weight: 700; color: var(--s-blue2, #7fb0ff); }
.st-tch-m em.me { color: #ffb703; }
.st-tch-sys { align-self: center; color: var(--s-muted, #9ba4b4); font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .04); }
.st-tch-empty { margin: auto; text-align: center; color: var(--s-muted, #9ba4b4); line-height: 1.6; }
.st-tch-typing { min-height: 18px; padding: 0 12px; color: var(--s-muted, #9ba4b4); font-size: 11.5px; font-style: italic; }
.st-tch-f { display: flex; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--s-line, #333944); }
.st-tch-f input { flex: 1; min-width: 0; border: 1px solid var(--s-line, #333944); background: var(--s-bg, #14161b); color: var(--s-text, #fff); border-radius: 8px; padding: 8px 10px; font: inherit; outline: none; }
.st-tch-f input:focus { border-color: var(--s-blue, #3d8bff); }
.st-tch-f .st-btn { padding: 0 12px; }
.st-tch-peek { position: absolute; right: 70px; bottom: 18px; z-index: 46; max-width: min(300px, calc(100% - 100px)); padding: 8px 12px; border-radius: 12px; background: #0e1014; color: #e9ecf2; border: 1px solid #333944; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); font: 13px "Figtree", sans-serif; cursor: pointer; animation: tchIn .2s ease-out; transition: opacity .3s; }
.st-tch-peek.ping { border-color: #ffb703; }
.st-tch-peek.out { opacity: 0; }
@keyframes tchIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (pointer: coarse) { .st-tchat-fab { bottom: 74px; } .st-tchat { bottom: 130px; height: min(400px, calc(100% - 150px)); } .st-tch-peek { bottom: 78px; } .st-tch-f input { font-size: 16px; } }

/* the Chat button in the ribbon (Home → Collaborate) */
.st-tchat-rib { position: relative; }
.st-tchat-rib svg { width: 24px; height: 24px; }
.st-rib-badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #e5484d; color: #fff; font: 800 10px/16px "Figtree", sans-serif; font-style: normal; }
.st-rib-badge.ping { background: #ffb703; color: #2a1600; }

/* ---------- Team chat, drawn like Chats (bubbles, faces, reactions, replies, @ suggestions) ---------- */
.st-tchat { width: min(360px, calc(100% - 28px)); height: min(480px, calc(100% - 90px)); border-radius: 16px; background: #181b20; }
.st-tch-h { gap: 10px; padding: 10px 12px; background: #1d2026; }
.st-tch-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(61, 139, 255, .18); font-size: 17px; flex: none; }
.st-tch-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-tch-t b { font-size: 14px; } .st-tch-t small { color: var(--s-muted, #9ba4b4); font-size: 11.5px; }
.st-tch-list { padding: 10px 10px 4px; gap: 4px; }
.tcm { display: flex; align-items: flex-end; gap: 6px; max-width: 86%; position: relative; }
.tcm.me { align-self: flex-end; flex-direction: row-reverse; }
.tcm.cont { margin-top: -1px; }
.tcm-face { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c, #40c4ff); color: #111; font-weight: 800; font-size: 12px; }
.tcm-face img { width: 100%; height: 100%; background: #2a2e36; }
.tcm-face.gap { background: transparent; }
.tcm-b { background: #272b33; color: #e9ecf2; border-radius: 15px 15px 15px 5px; padding: 6px 10px 4px; display: flex; flex-direction: column; min-width: 0; }
.tcm.cont .tcm-b { border-top-left-radius: 8px; }
.tcm.me .tcm-b { background: #3d8bff; color: #fff; border-radius: 15px 15px 5px 15px; }
.tcm.me.cont .tcm-b { border-top-right-radius: 8px; }
.tcm.ping .tcm-b { box-shadow: inset 3px 0 0 #ffb703; background: color-mix(in srgb, #ffb703 16%, #272b33); }
.tcm-who { font-style: normal; font-size: 11.5px; font-weight: 800; margin-bottom: 1px; }
.tcm-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; font-size: 13.5px; }
.tcm-at { font-style: normal; font-weight: 800; color: #8fbcff; } .tcm.me .tcm-at { color: #fff; text-decoration: underline; }
.tcm-at.me { color: #ffb703; }
.tcm-b time { align-self: flex-end; font-size: 10px; opacity: .6; margin-top: 1px; }
.tcm-reacts { display: flex; flex-wrap: wrap; gap: 3px; } .tcm-reacts:not(:empty) { margin-top: 3px; }
.tcm-rx { display: inline-flex; align-items: center; gap: 2px; border: 0; border-radius: 99px; padding: 0 6px; font-size: 13px; line-height: 19px; cursor: pointer; background: rgba(255, 255, 255, .1); color: inherit; }
.tcm-rx b { font-size: 10.5px; } .tcm-rx.on { background: rgba(61, 139, 255, .35); box-shadow: inset 0 0 0 1.5px #3d8bff; }
.tcm.me .tcm-rx { background: rgba(255, 255, 255, .2); } .tcm.me .tcm-rx.on { background: rgba(255, 255, 255, .38); box-shadow: inset 0 0 0 1.5px #fff; }
.tcm-rep { display: flex; flex-direction: column; margin: 1px 0 4px; padding: 3px 7px; border-radius: 7px; background: rgba(0, 0, 0, .2); box-shadow: inset 3px 0 0 #8fbcff; color: inherit; text-decoration: none !important; cursor: pointer; }
.tcm.me .tcm-rep { background: rgba(255, 255, 255, .16); box-shadow: inset 3px 0 0 #fff; }
.tcm-rep b { font-size: 11px; color: #8fbcff; } .tcm.me .tcm-rep b { color: #fff; }
.tcm-rep span { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcm.flash .tcm-b { animation: tcmFlash 1.2s ease-out; }
@keyframes tcmFlash { 0%, 40% { box-shadow: 0 0 0 3px #ffb703; } 100% { box-shadow: 0 0 0 3px transparent; } }
.tcm-acts { align-self: center; display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .12s; flex: none; }
.tcm:hover .tcm-acts { opacity: 1; pointer-events: auto; }
.tcm-acts button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #272b33; color: #e9ecf2; cursor: pointer; font-size: 12px; display: grid; place-items: center; }
.tcm-acts button:hover { background: #333944; }
@media (hover: none) { .tcm-acts { display: none; } }
.tcm-sys { align-self: center; color: var(--s-muted, #9ba4b4); font-size: 11.5px; padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .05); margin: 3px 0; }
.tcm-picker { position: absolute; z-index: 5; display: flex; align-items: center; gap: 1px; padding: 3px; border-radius: 99px; background: #1d2026; box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px #333944; }
.tcm-picker button { border: 0; background: transparent; font-size: 19px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; transition: transform .1s; }
.tcm-picker button:hover { transform: scale(1.2); background: #272b33; } .tcm-picker button.on { background: rgba(61, 139, 255, .3); }
.tcm-picker .tcm-pr { width: auto; padding: 0 10px; font: 700 12px "Figtree", sans-serif; color: #e9ecf2; border-radius: 99px; background: #272b33; margin-left: 3px; }
.st-tch-reply { display: flex; align-items: center; gap: 8px; margin: 0 10px; padding: 6px 8px; border-radius: 10px 10px 0 0; background: #222630; box-shadow: inset 3px 0 0 #3d8bff; }
.st-tch-reply[hidden], .st-tch-sugg[hidden] { display: none; }
.st-tch-reply > i { font-style: normal; color: #3d8bff; } .st-tch-reply > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-tch-reply b { font-size: 11.5px; color: #3d8bff; } .st-tch-reply span { font-size: 12px; color: var(--s-muted, #9ba4b4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tch-reply button { border: 0; background: transparent; color: var(--s-muted, #9ba4b4); cursor: pointer; }
.st-tch-sugg { display: flex; flex-direction: column; gap: 1px; margin: 0 10px 4px; padding: 4px; border-radius: 10px; background: #222630; box-shadow: inset 0 0 0 1px #333944; }
.st-tch-sugg button { display: flex; align-items: baseline; gap: 8px; border: 0; background: transparent; color: #e9ecf2; text-align: left; padding: 5px 8px; border-radius: 7px; cursor: pointer; font: 700 13px "Figtree", sans-serif; }
.st-tch-sugg button.on, .st-tch-sugg button:hover { background: rgba(61, 139, 255, .22); }
.st-tch-sugg small { color: var(--s-muted, #9ba4b4); font-weight: 600; }
.st-tch-f { align-items: flex-end; }
.st-tch-f textarea { flex: 1; min-width: 0; resize: none; border: 1px solid #333944; background: #14161b; color: #e9ecf2; border-radius: 18px; padding: 8px 12px; font: 13.5px "Figtree", sans-serif; outline: none; max-height: 110px; }
.st-tch-f textarea:focus { border-color: #3d8bff; }
.st-tch-send { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 50%; background: #3d8bff; color: #fff; font-size: 15px; cursor: pointer; }
.st-tch-send:hover { filter: brightness(1.1); }
@media (pointer: coarse) { .st-tch-f textarea { font-size: 16px; } }

/* Places dialog (js/studio/places.js) */
.st-places { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; max-height: min(52vh, 420px); overflow-y: auto; }
.st-place { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; background: #2c2c2c; box-shadow: inset 0 0 0 1px #3a3a3a; }
.st-place.on { box-shadow: inset 0 0 0 1.5px #3d8bff; background: #26303f; }
.st-pl-i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-pl-i b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pl-i small { color: #9aa0a6; font-size: 11.5px; } .st-pl-i code { color: #d6e4ff; }
.st-pl-a { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.st-pl-a em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #3d8bff; padding: 0 6px; }
.st-pl-a .st-btn { padding: 4px 9px; font-size: 12px; }
.st-pl-a .st-danger { color: #ff7b7b; }

/* Game Settings: the square game icon next to the wide thumbnail */
.st-root .st-thumbrow img.st-gicon, .st-thumbrow img.st-gicon { width: 96px; height: 96px; aspect-ratio: 1 / 1; object-fit: cover; }
.st-thumbrow { flex-wrap: wrap; }