XFEServerManager

:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #090c0b;
  --bg-raised: #0d1210;
  --surface: #111714;
  --surface-raised: #161e1a;
  --surface-hover: #1b2520;
  --border: #26322c;
  --border-strong: #35453d;
  --text: #edf5f0;
  --text-secondary: #9bac9f;
  --text-dim: #708078;
  --accent: #71e6a1;
  --accent-strong: #9ff5bd;
  --accent-ink: #092316;
  --cyan: #67d5dc;
  --warning: #f2bd63;
  --danger: #ff7e7b;
  --success: #71e6a1;
  --sidebar-width: 254px;
  --radius: 10px;
  --radius-small: 7px;
  --shadow: 0 16px 50px rgb(0 0 0 / 0.24);
}

* { box-sizing: border-box; }
html, body, #root { min-width: 320px; min-height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: var(--accent); }
code { color: #b6dac4; font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; font-size: .84em; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at 80% -10%, rgb(113 230 161 / .06), transparent 32%), var(--bg); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar-width); display: flex; flex-direction: column; padding: 20px 14px 14px; background: #0b100e; border-right: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 7px 20px; }
.brand strong { display: block; font-size: 14px; letter-spacing: .01em; }
.brand small { display: block; margin-top: 3px; color: var(--text-dim); font-size: 11px; }
.brand__mark { width: 34px; height: 34px; flex: none; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; padding: 6px; background: linear-gradient(145deg, #193526, #102018); border: 1px solid #31583e; border-radius: 7px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .03); }
.brand__mark span { display: block; background: var(--accent); border-radius: 1px; }
.brand__mark span:nth-child(1) { height: 9px; opacity: .62; }
.brand__mark span:nth-child(2) { height: 20px; }
.brand__mark span:nth-child(3) { height: 14px; opacity: .82; }
.sidebar__close { display: none; margin-left: auto; padding: 4px; border: 0; background: transparent; }
.connection-pill { display: flex; align-items: center; gap: 8px; margin: 0 5px 22px; padding: 9px 10px; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.connection-pill__dot, .topbar__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); }
.connection-pill--online .connection-pill__dot, .topbar__pulse { background: var(--success); box-shadow: 0 0 0 4px rgb(113 230 161 / .08); }
.connection-pill--offline .connection-pill__dot { background: var(--danger); }
.connection-pill--degraded .connection-pill__dot { background: var(--warning); }
.connection-pill--connecting .connection-pill__dot { animation: pulse 1.2s ease-in-out infinite; }
.sidebar__navigation { flex: 1; overflow-y: auto; }
.nav-section + .nav-section { margin-top: 23px; }
.nav-section__label { display: block; margin: 0 10px 8px; color: #607168; font-size: 9px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.nav-section nav { display: grid; gap: 3px; }
.nav-link { width: 100%; display: grid; grid-template-columns: 20px 1fr 15px; align-items: center; gap: 8px; padding: 9px 10px; color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-radius: 7px; text-align: left; font-size: 12px; cursor: pointer; transition: 140ms ease; }
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-link--active { color: var(--accent-strong); background: linear-gradient(90deg, rgb(113 230 161 / .12), rgb(113 230 161 / .04)); border-color: rgb(113 230 161 / .16); }
.nav-link__arrow { margin-left: auto; opacity: .65; }
.sidebar__footer { padding: 15px 5px 0; border-top: 1px solid var(--border); }
.actor { display: flex; align-items: center; min-width: 0; gap: 9px; margin-bottom: 11px; }
.actor__avatar, .player-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; color: var(--accent-strong); background: #182a20; border: 1px solid #2e503b; border-radius: 6px; font-size: 10px; font-weight: 750; }
.actor > div:last-child { min-width: 0; }
.actor strong, .actor small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actor strong { font-size: 11px; }
.actor small { margin-top: 2px; color: var(--text-dim); font-size: 9px; }
.language-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 7px 9px; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; cursor: pointer; }
.language-button:hover { color: var(--text); border-color: var(--border-strong); }

.workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { height: 58px; display: flex; align-items: center; padding: 0 28px; background: rgb(9 12 11 / .84); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; }
.topbar__server { display: flex; align-items: center; gap: 9px; color: var(--text-secondary); font-size: 11px; }
.topbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.language-button--top { width: auto; min-width: 48px; }
.menu-button { display: none; padding: 5px; margin-right: 10px; background: transparent; border: 0; }
.main-content { width: min(1500px, 100%); margin: 0 auto; padding: 30px 34px 60px; }
.offline-banner { display: flex; align-items: center; gap: 20px; margin: 20px 34px -7px; padding: 12px 14px; color: #ffd4d2; background: rgb(255 126 123 / .08); border: 1px solid rgb(255 126 123 / .24); border-radius: 8px; }
.offline-banner > div { flex: 1; }
.offline-banner strong, .offline-banner span { display: block; }
.offline-banner strong { font-size: 12px; }
.offline-banner span { margin-top: 3px; color: #caa7a6; font-size: 10px; }

.page { animation: reveal 220ms ease both; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.page-header h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.06; letter-spacing: -.035em; }
.page-header p { max-width: 720px; margin: 9px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
.page-header__eyebrow { margin-bottom: 7px; color: var(--accent); font-family: "Cascadia Code", Consolas, monospace; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.page-header__actions { flex: none; }
.sample-time { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 10px; }

.panel { min-width: 0; padding: 18px; background: linear-gradient(145deg, rgb(20 28 24 / .93), rgb(15 21 18 / .95)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 0 rgb(255 255 255 / .02); }
.panel + .panel { margin-top: 14px; }
.panel__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.panel__header h2 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; letter-spacing: -.01em; }
.panel-description { margin: -7px 0 15px; color: var(--text-dim); font-size: 10px; line-height: 1.5; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.metric-card { min-width: 0; padding: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); }
.metric-card--good { border-top-color: rgb(113 230 161 / .48); }
.metric-card--warn { border-top-color: rgb(242 189 99 / .54); }
.metric-card--danger { border-top-color: rgb(255 126 123 / .62); }
.metric-card__label { display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--text-dim); font-size: 9px; font-weight: 670; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.metric-card__label svg { width: 13px; }
.metric-card__value { margin-top: 8px; overflow: hidden; font-family: "Cascadia Code", Consolas, monospace; font-size: clamp(20px, 2vw, 27px); font-weight: 630; letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.metric-card__value small { margin-left: 5px; color: var(--text-dim); font-size: 9px; font-weight: 500; letter-spacing: 0; }
.metric-card__detail { display: block; min-height: 13px; margin-top: 7px; color: var(--text-dim); font-family: "Cascadia Code", Consolas, monospace; font-size: 8px; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(245px, .75fr); gap: 14px; margin-bottom: 14px; }
.overview-grid .panel { margin: 0; }
.sparkline { position: relative; height: 165px; overflow: hidden; border-bottom: 1px solid var(--border); }
.sparkline svg { width: 100%; height: 100%; overflow: visible; }
.sparkline::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgb(255 255 255 / .035) 40px); pointer-events: none; }
.sparkline__line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sparkline__range { position: absolute; inset: 5px 5px auto auto; display: flex; gap: 8px; color: var(--text-dim); font-size: 8px; }
.sparkline--empty { display: grid; place-items: center; color: var(--text-dim); }
.definition-list { margin: 0; }
.definition-list > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.definition-list > div:last-child { border: 0; }
.definition-list dt { color: var(--text-dim); font-size: 10px; }
.definition-list dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 0; font-size: 10px; text-align: right; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 12px; border: 1px solid transparent; border-radius: 6px; font-size: 10px; font-weight: 700; cursor: pointer; transition: 130ms ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.button:disabled { opacity: .42; cursor: not-allowed; }
.button--primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent-strong); }
.button--secondary { color: var(--text); background: var(--surface-raised); border-color: var(--border-strong); }
.button--danger { color: #260606; background: var(--danger); border-color: #ffaaa7; }
.button--ghost { color: var(--text-secondary); background: transparent; border-color: var(--border); }
.input { width: 100%; min-height: 37px; padding: 8px 10px; color: var(--text); background: #0b100e; border: 1px solid var(--border-strong); border-radius: 6px; outline: none; font-size: 11px; transition: 120ms ease; }
.input::placeholder { color: #506058; }
.input:focus { border-color: #4b8a65; box-shadow: 0 0 0 3px rgb(113 230 161 / .08); }
.textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
.select { appearance: auto; }
.field { display: grid; gap: 6px; }
.field__label { color: var(--text-secondary); font-size: 9px; font-weight: 690; letter-spacing: .02em; }
.field__hint { color: var(--text-dim); font-size: 8px; }
.form-stack { display: grid; gap: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coordinate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.button-row, .badge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }

.badge { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 4px 7px; color: var(--text-secondary); background: rgb(151 171 159 / .08); border: 1px solid rgb(151 171 159 / .14); border-radius: 999px; font-family: "Cascadia Code", Consolas, monospace; font-size: 8px; font-weight: 650; white-space: nowrap; }
.badge--good { color: #a9f5c3; background: rgb(113 230 161 / .09); border-color: rgb(113 230 161 / .22); }
.badge--warn { color: #f9d58f; background: rgb(242 189 99 / .09); border-color: rgb(242 189 99 / .22); }
.badge--danger { color: #ffaaa7; background: rgb(255 126 123 / .09); border-color: rgb(255 126 123 / .22); }
.badge--info { color: #a0e8ed; background: rgb(103 213 220 / .09); border-color: rgb(103 213 220 / .22); }

.table-shell { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 10px; }
th { padding: 7px 10px 10px; color: var(--text-dim); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 11px 10px; color: var(--text-secondary); border-top: 1px solid var(--border); vertical-align: middle; }
tbody tr { transition: background 120ms ease; }
tbody tr:hover { background: rgb(255 255 255 / .018); }
td strong { color: var(--text); }
.table-subline { display: block; max-width: 300px; margin-top: 4px; color: var(--text-dim); font-size: 8px; line-height: 1.4; }
.request-id { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-cell, .location-cell, .action-cell { display: flex; align-items: center; gap: 8px; }
.player-cell > span:last-child { min-width: 0; }
.player-cell strong, .player-cell small { display: block; }
.player-cell small { max-width: 200px; margin-top: 3px; overflow: hidden; color: var(--text-dim); font-family: monospace; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.location-cell { font-family: monospace; font-size: 9px; white-space: nowrap; }

.search-box { width: min(280px, 100%); display: flex; align-items: center; gap: 4px; padding-left: 10px; background: #0b100e; border: 1px solid var(--border-strong); border-radius: 7px; }
.search-box > svg { flex: none; color: var(--text-dim); }
.search-box .input { border: 0; background: transparent; box-shadow: none; }
.resource-state { min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--text-dim); font-size: 10px; }
.resource-state--error { flex-wrap: wrap; color: var(--danger); }
.resource-state--error > div { display: grid; gap: 3px; }
.resource-state--error span { color: var(--text-secondary); }
.empty-state { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 24px; color: var(--text-secondary); text-align: center; }
.empty-state__icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--text-dim); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 9px; }
.empty-state strong { font-size: 11px; }
.empty-state p { max-width: 480px; margin: 0; color: var(--text-dim); font-size: 9px; line-height: 1.55; }
.pixel-mark { width: 13px; height: 13px; background: var(--text-dim); clip-path: polygon(0 0, 38% 0, 38% 38%, 100% 38%, 100% 100%, 62% 100%, 62% 62%, 0 62%); }
.feature-unavailable { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 11px 13px; color: #f7cf84; background: rgb(242 189 99 / .07); border: 1px solid rgb(242 189 99 / .2); border-radius: 7px; font-size: 10px; }
.muted { color: var(--text-dim); }
.error-text, .form-error { color: var(--danger); font-size: 10px; }
.spin { animation: spin 900ms linear infinite; }

.policy-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr); gap: 14px; }
.policy-layout .panel, .console-layout .panel, .moderation-layout .panel, .rollback-layout .panel { margin: 0; }
.simulator-panel { align-self: start; }
.simulation-result { display: grid; gap: 9px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border); }
.simulation-result ol { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 9px; line-height: 1.5; }
.command-normalized { display: block; padding: 10px; background: #090d0b; border: 1px solid var(--border); border-radius: 5px; }
.policy-json-editor { min-height: 22rem; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; tab-size: 2; }

.modal-backdrop { position: fixed; inset: 0; z-index: 10000; width: 100vw; height: 100vh; height: 100dvh; display: flex; align-items: flex-start; justify-content: center; overflow: auto; overscroll-behavior: contain; isolation: isolate; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: rgb(2 4 3 / .78); backdrop-filter: blur(5px); }
.modal { width: min(520px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); flex: none; margin-block: auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px; background: #101714; border: 1px solid var(--border-strong); border-radius: 11px; box-shadow: var(--shadow); animation: modal-in 160ms ease both; }
.modal--player { width: min(880px, 100%); }
.modal__header { position: sticky; top: -20px; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: -20px -1px 16px; padding: 20px 1px 12px; background: #101714; border-bottom: 1px solid var(--border); }
.modal__header h2 { margin: 0; font-size: 17px; }
.modal__header button { padding: 3px; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; }
.totp-qr { display: grid; justify-items: center; gap: 9px; padding: 14px; color: var(--text-secondary); background: #fff; border-radius: 8px; text-align: center; }
.totp-qr img { width: min(240px, 100%); height: auto; image-rendering: pixelated; }
.totp-qr span { max-width: 300px; color: #183124; font-size: 10px; line-height: 1.5; }
.configuration-panel { grid-column: 1 / -1; }
.configuration-anchor { grid-column: 1 / -1; scroll-margin-top: 74px; }
.configuration-anchor > .panel { margin: 0; }
.configuration-form { margin-top: 14px; }
.configuration-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.configuration-flags label { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 10px; }
.feature-switch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin-bottom: 12px; }
.trigger-settings-inline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); align-items: end; gap: 14px; margin: 4px 0 12px; padding: 12px; background: rgb(113 230 161 / .025); border: 1px solid var(--border); border-radius: 7px; }
.trigger-settings-inline > div { display: grid; gap: 4px; }
.trigger-settings-inline strong { color: var(--text-secondary); font-size: 10px; }
.trigger-settings-inline p { margin: 0; color: var(--text-dim); font-size: 9px; line-height: 1.55; }
.feature-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 7px; }
.feature-switch > span { display: grid; gap: 3px; }
.feature-switch strong { font-size: 11px; font-weight: 650; }
.feature-switch small { color: var(--text-muted); font-size: 9px; }
.feature-switch input[role="switch"] { width: 34px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.feature-switch input:disabled { cursor: not-allowed; opacity: .5; }
.join-settings { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.join-settings h3 { margin: 0; font-size: 12px; }
.confirm-box { display: flex; align-items: flex-start; gap: 11px; padding: 11px; color: #f7cf84; background: rgb(242 189 99 / .07); border: 1px solid rgb(242 189 99 / .2); border-radius: 7px; }
.confirm-box--danger { color: #ffaaa7; background: rgb(255 126 123 / .07); border-color: rgb(255 126 123 / .2); }
.confirm-box > svg { width: 18px; flex: none; }
.confirm-box strong, .confirm-box p { display: block; margin: 0; font-size: 10px; line-height: 1.45; }
.confirm-box p { color: var(--text-secondary); }
.player-manage-tabs { display: flex; gap: 4px; margin: -7px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.player-manage-tabs button { padding: 7px 10px; color: var(--text-dim); background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 10px; cursor: pointer; }
.player-manage-tabs button:hover { color: var(--text); background: var(--surface); }
.player-manage-tabs button.is-active { color: var(--accent-strong); background: rgb(113 230 161 / .08); border-color: rgb(113 230 161 / .18); }
.inventory-editor { display: grid; gap: 13px; }
.inventory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.inventory-toolbar > div { display: grid; gap: 4px; }
.inventory-toolbar strong { font-size: 11px; }
.inventory-toolbar span { color: var(--text-dim); font-size: 9px; }
.inventory-editor > .panel-description { margin: -5px 0 0; }
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; max-height: 310px; overflow-y: auto; padding: 2px; }
.rich-text-editor { display: grid; gap: 11px; width: 100%; min-width: 0; max-width: 100%; }
.rich-text-preview { min-height: 48px; overflow: hidden; overflow-wrap: anywhere; color: #fff; background: #050806; border: 1px solid var(--border-strong); border-radius: 6px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 13px; line-height: 1.6; }
.rich-text-composer { display: flex; align-items: stretch; min-width: 0; max-width: 100%; transition: border-color 120ms ease, box-shadow 120ms ease; }
.rich-text-composer:focus-within { border-color: #4d8c66; box-shadow: 0 0 0 2px rgb(113 230 161 / .08); }
.rich-text-preview__prefix { flex: none; max-width: 45%; overflow: hidden; padding: 12px 0 12px 12px; color: var(--accent); text-overflow: ellipsis; white-space: pre; user-select: none; }
.rich-text-canvas { display: block; flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 12px; outline: none; caret-color: var(--accent-strong); overflow-wrap: anywhere; tab-size: 2; white-space: pre-wrap; word-break: break-word; }
.rich-text-preview__prefix + .rich-text-canvas { padding-left: 0; }
.rich-text-canvas:empty::before { color: var(--text-dim); content: attr(data-placeholder); pointer-events: none; }
.rich-text-canvas span { white-space: inherit; }
.rich-text-canvas > div, .rich-text-canvas > p { min-height: 1lh; margin: 0; }
.rich-text-selection-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; min-width: 0; padding: 9px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 7px; }
.rich-text-selection-toolbar > .rich-text-toolbar { min-width: 0; }
.rich-text-selection-toolbar > .field__hint { flex: 1 1 180px; min-width: 0; font-size: 9px; line-height: 1.45; text-align: right; overflow-wrap: anywhere; }
.rich-text-selection-details { display: grid; gap: 9px; padding: 10px; background: rgb(255 255 255 / .012); border: 1px solid var(--border); border-radius: 7px; }
.rich-text-selection-details .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.rich-text-selection-details .field, .rich-text-selection-details .input { min-width: 0; }
.rich-text-selection-details .field__label, .rich-text-sender__body .field__label { font-size: 10px; }
.rich-text-selection-details .input, .rich-text-sender__body .input, .variable-browser__filters .input { font-size: 12px; }
.rich-text-editor > .field__hint, .variable-picker-launcher > .field__hint { font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.rich-text-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.rich-text-toolbar > button { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }
.rich-text-toolbar > button.is-active { color: var(--accent-strong); background: rgb(113 230 161 / .12); border-color: #4d8c66; }
.rich-text-toolbar > button:disabled { cursor: not-allowed; opacity: .35; }
.color-control { min-width: 0; min-height: 32px; display: flex; align-items: center; gap: 6px; padding: 3px 8px; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; font-size: 10px; }
.color-control span { min-width: 0; overflow-wrap: anywhere; }
.color-control input { width: 24px; height: 20px; padding: 0; background: transparent; border: 0; cursor: pointer; }
.color-control input:disabled { cursor: not-allowed; opacity: .4; }
.color-control--field { height: auto; min-height: 54px; align-self: end; justify-content: space-between; padding: 8px 11px; }
.color-control--field input { width: 42px; height: 32px; }
.rich-text-sender { overflow: hidden; background: rgb(113 230 161 / .025); border: 1px solid var(--border); border-radius: 7px; }
.rich-text-sender > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 10px 11px; color: var(--text-secondary); cursor: pointer; font-size: 10px; list-style: none; }
.rich-text-sender > summary::-webkit-details-marker { display: none; }
.rich-text-sender > summary span { display: flex; align-items: center; gap: 6px; font-weight: 650; }
.rich-text-sender > summary small { min-width: 0; overflow: hidden; color: var(--text-dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.rich-text-sender__body { display: grid; gap: 9px; padding: 0 11px 11px; border-top: 1px solid var(--border); }
.rich-text-sender__body > .toggle-row { margin-top: 10px; }
.variable-picker-launcher { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; }
.variable-picker-launcher__button { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; padding: 8px 10px; color: var(--accent); background: rgb(113 230 161 / .055); border: 1px solid rgb(113 230 161 / .2); border-radius: 6px; cursor: pointer; }
.variable-picker-launcher__button:hover { color: var(--accent-strong); background: rgb(113 230 161 / .09); border-color: rgb(113 230 161 / .34); }
.variable-picker-launcher__button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.variable-picker-launcher__button > span { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 10px; font-weight: 700; }
.variable-picker-launcher__button > small { min-width: 0; color: var(--text-dim); font-family: monospace; font-size: 9px; overflow-wrap: anywhere; text-align: right; }
.variable-text-input { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.variable-text-input__button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 92px; padding: 0 9px; color: var(--accent); background: rgb(113 230 161 / .055); border: 1px solid rgb(113 230 161 / .2); border-radius: 6px; font-size: 9px; font-weight: 700; cursor: pointer; }
.variable-text-input__button:hover { color: var(--accent-strong); background: rgb(113 230 161 / .09); border-color: rgb(113 230 161 / .34); }
.variable-text-input__button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.variable-browser-backdrop { position: fixed; inset: 0; z-index: 10010; display: grid; place-items: center; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgb(2 4 3 / .8); backdrop-filter: blur(5px); }
.variable-browser { width: min(1060px, 100%); max-height: min(780px, calc(100vh - 36px)); max-height: min(780px, calc(100dvh - 36px)); display: grid; grid-template-rows: auto auto minmax(220px, 1fr); overflow: hidden; background: #101714; border: 1px solid var(--border-strong); border-radius: 11px; box-shadow: var(--shadow); animation: modal-in 160ms ease both; }
.variable-browser__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 18px 14px; border-bottom: 1px solid var(--border); }
.variable-browser__header > div { display: grid; gap: 4px; }
.variable-browser__header > div > span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 750; }
.variable-browser__header small { color: var(--text-dim); font-size: 10px; line-height: 1.45; }
.variable-browser__header > button { display: grid; flex: none; place-items: center; width: 30px; height: 30px; color: var(--text-secondary); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; }
.variable-browser__header > button:hover { color: var(--text); border-color: var(--border-strong); }
.variable-browser__format-help { display: flex; align-items: flex-start; gap: 10px; margin: 13px 18px 0; padding: 10px 12px; color: #a8d8ff; background: rgb(76 165 255 / .065); border: 1px solid rgb(76 165 255 / .18); border-radius: 7px; }
.variable-browser__format-help > svg { flex: none; margin-top: 1px; }
.variable-browser__format-help > div { display: grid; gap: 3px; min-width: 0; }
.variable-browser__format-help strong { font-size: 11px; }
.variable-browser__format-help p { margin: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.6; }
.variable-browser__format-help small { color: var(--text-dim); font-size: 9px; }
.variable-browser__format-help code, .variable-browser__item code { color: var(--accent-strong); font-family: "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
.variable-browser__workspace { min-width: 0; min-height: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); margin-top: 13px; border-top: 1px solid var(--border); }
.variable-browser__categories { min-width: 0; min-height: 0; display: grid; align-content: start; gap: 5px; overflow-y: auto; overscroll-behavior: contain; padding: 13px 10px 18px; background: rgb(0 0 0 / .11); border-right: 1px solid var(--border); scrollbar-gutter: stable; }
.variable-browser__categories > strong { display: grid; gap: 2px; padding: 2px 8px 8px; color: var(--text-secondary); font-size: 10px; }
.variable-browser__categories > strong > small { color: var(--text-dim); font-size: 8px; font-weight: 500; }
.variable-browser__categories > button { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 8px; color: var(--text-secondary); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.variable-browser__categories > button:hover { color: var(--text); background: rgb(255 255 255 / .025); border-color: var(--border); }
.variable-browser__categories > button.is-active { color: var(--accent-strong); background: rgb(113 230 161 / .09); border-color: rgb(113 230 161 / .24); box-shadow: inset 2px 0 0 var(--accent); }
.variable-browser__categories > button > span { min-width: 0; display: grid; gap: 1px; font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
.variable-browser__categories > button small { color: var(--text-dim); font-size: 8px; font-weight: 500; }
.variable-browser__categories > button em { flex: none; min-width: 23px; padding: 2px 5px; color: var(--text-dim); text-align: center; font-size: 8px; font-style: normal; background: rgb(255 255 255 / .035); border-radius: 999px; }
.variable-browser__categories > button.is-active em { color: var(--accent-strong); background: rgb(113 230 161 / .1); }
.variable-browser__catalog { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(160px, 1fr); }
.variable-browser__filters { padding: 13px 18px 8px; }
.variable-browser__search { display: flex; align-items: center; padding-left: 10px; background: #0b100e; border: 1px solid var(--border-strong); border-radius: 7px; }
.variable-browser__search:focus-within { border-color: #4d8c66; box-shadow: 0 0 0 2px rgb(113 230 161 / .08); }
.variable-browser__search > svg { flex: none; color: var(--text-dim); }
.variable-browser__search .input { border: 0; background: transparent; box-shadow: none; }
.variable-browser__summary { padding: 0 18px 8px; color: var(--text-dim); font-size: 9px; }
.variable-browser__results { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 7px; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 18px; scrollbar-gutter: stable; }
.variable-browser__item { min-width: 0; display: grid; align-content: start; gap: 7px; padding: 11px; color: var(--text); text-align: left; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; }
.variable-browser__item:hover { background: rgb(113 230 161 / .055); border-color: rgb(113 230 161 / .28); }
.variable-browser__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.variable-browser__item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.variable-browser__item-heading > span { display: grid; gap: 2px; min-width: 0; }
.variable-browser__item-heading strong { font-size: 11px; }
.variable-browser__item-heading small { color: var(--text-dim); font-size: 9px; }
.variable-browser__item-heading code { max-width: 58%; padding: 3px 5px; background: rgb(113 230 161 / .055); border: 1px solid rgb(113 230 161 / .14); border-radius: 4px; font-size: 9px; text-align: right; }
.variable-browser__item-description { display: grid; gap: 2px; color: var(--text-secondary); font-size: 10px; line-height: 1.5; }
.variable-browser__item-description small { color: var(--text-dim); font-size: 9px; }
.variable-browser__item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.variable-browser__item-meta > span { max-width: 100%; padding: 2px 5px; color: var(--text-dim); background: rgb(255 255 255 / .025); border: 1px solid var(--border); border-radius: 999px; font-size: 8px; overflow-wrap: anywhere; }
.variable-browser__item-meta code { font-size: inherit; }
.variable-browser__item-hint { color: #a8d8ff; font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }
.variable-browser__empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 5px; padding: 38px 15px; color: var(--text-dim); text-align: center; }
.variable-browser__empty strong { color: var(--text-secondary); font-size: 11px; }
.variable-browser__empty span { font-size: 10px; }
.rich-text-editor--compact .rich-text-canvas { min-height: 42px; padding-block: 9px; }
.rich-text-editor--compact .rich-text-preview__prefix { padding-block: 9px; }
.rich-text-editor--compact .rich-text-selection-details { padding: 8px; }
.daily-announcement-list { display: grid; gap: 9px; }
.daily-announcement-list__heading, .daily-announcement__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.daily-announcement-list__heading strong { color: var(--text-secondary); font-size: 10px; }
.daily-announcement { display: grid; gap: 9px; padding: 11px; background: rgb(255 255 255 / .015); border: 1px solid var(--border); border-radius: 7px; }
.daily-announcement__heading { color: var(--text-dim); font-size: 9px; }
.message-workspace { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); align-items: start; gap: 14px; }
.message-section-nav { position: sticky; top: 78px; display: grid; gap: 5px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.message-section-nav button { display: grid; grid-template-columns: 18px minmax(0, 1fr) 7px; align-items: center; gap: 8px; width: 100%; padding: 10px; color: var(--text-secondary); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.message-section-nav button:hover { color: var(--text); background: var(--bg-raised); }
.message-section-nav button.is-active { color: var(--accent-strong); background: rgb(113 230 161 / .08); border-color: rgb(113 230 161 / .2); }
.message-section-nav button span { overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.message-section-nav button i { width: 6px; height: 6px; background: var(--text-dim); border-radius: 50%; }
.message-section-nav button i.is-enabled { background: var(--success); box-shadow: 0 0 7px rgb(113 230 161 / .5); }
.message-section-content, .message-section-content > .panel { min-width: 0; margin: 0; }
.trigger-layout { display: grid; grid-template-columns: minmax(200px, 245px) minmax(0, 1fr); align-items: start; gap: 14px; }
.trigger-sidebar { position: sticky; top: 78px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }
.trigger-sidebar__heading { display: flex; align-items: center; justify-content: space-between; padding: 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.trigger-group-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 12px; color: var(--text-secondary); background: transparent; border: 0; border-bottom: 1px solid var(--border); text-align: left; cursor: pointer; }
.trigger-group-item:hover { background: var(--surface-hover); }
.trigger-group-item.is-active { color: var(--accent); background: rgb(113 230 161 / .07); }
.trigger-group-item:disabled, .trigger-list button:disabled { opacity: .58; cursor: wait; }
.trigger-group-item > span:nth-child(2), .trigger-list button > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.trigger-group-item strong, .trigger-group-item small, .trigger-list strong, .trigger-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trigger-group-item strong, .trigger-list strong { color: var(--text); font-size: 10px; }
.trigger-group-item small, .trigger-list small { color: var(--text-dim); font-family: monospace; font-size: 8px; }
.status-dot { width: 7px; height: 7px; background: #45524b; border-radius: 50%; }
.status-dot.is-on { background: var(--success); box-shadow: 0 0 7px rgb(113 230 161 / .45); }
.trigger-content { min-width: 0; }
.trigger-group-panel { margin: 0 0 14px; }
.trigger-group-panel .toggle-row { align-self: end; }
.trigger-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.trigger-fieldset:disabled { opacity: .76; }
.trigger-editor__fields { display: block; }
.trigger-workspace { display: grid; grid-template-columns: minmax(195px, 245px) minmax(0, 1fr); align-items: start; gap: 14px; }
.trigger-list-panel, .trigger-editor-wrap > .panel { margin: 0; }
.trigger-list { display: grid; gap: 5px; }
.trigger-list button { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 10px; color: var(--text-secondary); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; text-align: left; cursor: pointer; }
.trigger-list button:hover, .trigger-list button.is-active { border-color: rgb(113 230 161 / .3); background: rgb(113 230 161 / .055); }
.trigger-empty { padding: 14px; color: var(--text-dim); background: var(--bg-raised); border: 1px dashed var(--border-strong); border-radius: 7px; text-align: center; font-size: 9px; line-height: 1.5; }
.trigger-empty.is-danger { color: var(--danger); border-color: rgb(255 126 123 / .25); }
.trigger-empty--large { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 8px; }
.trigger-empty--large svg { color: var(--accent); }
.trigger-empty--large strong { color: var(--text); font-size: 12px; }
.trigger-editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 15px 0; padding: 8px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; }
.segmented { display: flex; gap: 3px; padding: 3px; background: #090d0b; border: 1px solid var(--border); border-radius: 6px; }
.segmented button { display: flex; align-items: center; gap: 6px; padding: 7px 10px; color: var(--text-dim); background: transparent; border: 0; border-radius: 4px; font-size: 9px; cursor: pointer; }
.segmented button.is-active { color: var(--accent-strong); background: rgb(113 230 161 / .12); }
.segmented button:disabled { cursor: not-allowed; opacity: .5; }
.trigger-flow { display: grid; gap: 12px; }
.trigger-step { display: grid; gap: 12px; padding: 14px; background: rgb(7 11 9 / .45); border: 1px solid var(--border); border-radius: 8px; }
.trigger-step-heading { display: flex; align-items: center; gap: 9px; }
.trigger-step-heading > span:not(.trigger-step-number) { display: grid; gap: 3px; }
.trigger-step-heading strong { font-size: 10px; }
.trigger-step-heading small { color: var(--text-dim); font-size: 8px; }
.trigger-step-heading > :last-child:not(:first-child) { margin-left: auto; }
.trigger-step-number { display: grid; place-items: center; width: 29px; height: 25px; color: var(--accent); background: rgb(113 230 161 / .08); border: 1px solid rgb(113 230 161 / .17); border-radius: 5px; font-family: monospace; font-size: 9px; }
.trigger-step-heading .select { width: auto; min-width: 115px; }
.trigger-interval-editor { display: grid; grid-column: 1 / -1; gap: 7px; }
.trigger-protection-editor { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; padding: 11px; background: rgb(242 189 99 / .035); border: 1px solid rgb(242 189 99 / .18); border-radius: 7px; }
.trigger-protection-editor > .field__hint { grid-column: 1 / -1; }
.crash-protection-panel { grid-column: 1 / -1; }
.crash-protection-master { margin-bottom: 12px; }
.crash-protection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 9px; margin-bottom: 12px; }
.trigger-block-list { display: grid; gap: 8px; }
.trigger-condition-row { display: grid; grid-template-columns: auto minmax(120px, 1fr) minmax(110px, .65fr) minmax(120px, 1fr) auto; align-items: center; gap: 7px; padding: 8px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 7px; }
.trigger-condition-row > svg, .trigger-action-card__head > svg { color: var(--text-dim); }
.trigger-row-actions { display: flex; align-items: center; gap: 4px; }
.trigger-row-actions .button { min-width: 30px; min-height: 30px; padding: 5px; }
.trigger-action-card { overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; }
.trigger-action-card__head { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border); }
.trigger-action-card__head .select { max-width: 310px; }
.trigger-action-card__body { display: grid; gap: 10px; padding: 11px; }
.trigger-action-tree { display: grid; gap: 8px; min-width: 0; padding: 10px; background: rgb(4 8 6 / .38); border: 1px solid var(--border); border-radius: 7px; }
.trigger-action-tree--root { padding: 0; background: transparent; border: 0; }
.trigger-action-tree__toolbar { min-height: 34px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; color: var(--text-dim); font-size: 9px; }
.trigger-action-condition { min-width: 0; overflow: hidden; background: rgb(113 230 161 / .025); border: 1px solid rgb(113 230 161 / .22); border-left: 3px solid rgb(113 230 161 / .42); border-radius: 8px; }
.trigger-action-condition__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; background: rgb(113 230 161 / .035); border-bottom: 1px solid rgb(113 230 161 / .14); }
.trigger-action-condition__head > svg { color: var(--accent); }
.trigger-action-condition__head > span { display: grid; gap: 2px; min-width: 0; }
.trigger-action-condition__head strong { color: var(--text); font-size: 10px; }
.trigger-action-condition__head small { color: var(--text-dim); font-size: 8px; }
.trigger-action-condition__fields { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(150px, .8fr) minmax(140px, 1fr); gap: 7px; padding: 10px; border-bottom: 1px solid var(--border); }
.trigger-action-condition > .trigger-action-tree { margin: 10px; }
.trigger-command-editor { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(190px, .7fr) minmax(250px, 1.3fr); gap: 10px; padding: 11px; background: rgb(113 230 161 / .025); border: 1px solid var(--border); border-radius: 7px; }
.trigger-command-arguments { display: grid; gap: 6px; }
.trigger-command-arguments__heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.trigger-command-arguments__heading > span { display: grid; gap: 2px; }
.trigger-command-arguments__heading strong { color: var(--text-secondary); font-size: 9px; }
.trigger-command-arguments__heading small { color: var(--text-dim); font-size: 8px; }
.trigger-command-argument { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.trigger-command-preview { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text-dim); font-size: 8px; }
.trigger-command-preview code { padding: 5px 7px; color: var(--accent); background: #070b09; border: 1px solid var(--border); border-radius: 4px; font-size: 9px; }
.trigger-argument-tree { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; margin: 8px; padding: 9px; background: rgb(4 8 6 / .4); border: 1px solid var(--border); border-radius: 7px; }
.trigger-argument-tree--root { margin: 0; }
.trigger-argument-list { display: grid; gap: 8px; }
.trigger-argument-card { min-width: 0; overflow: hidden; background: rgb(113 230 161 / .025); border: 1px solid rgb(113 230 161 / .2); border-left: 3px solid rgb(113 230 161 / .38); border-radius: 8px; }
.trigger-argument-card__body { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 9px; padding: 10px; }
.trigger-variable-step { border-color: rgb(89 169 255 / .2); }
.trigger-variable-editor, .trigger-variable-list, .trigger-variable-group { display: grid; gap: 8px; }
.trigger-variable-group { padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: rgb(89 169 255 / .018); }
.trigger-variable-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; }
.trigger-variable-card__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; align-items: end; }
.trigger-variable-card .textarea { min-height: 68px; font-family: "Cascadia Code", Consolas, monospace; }
.trigger-variable-type-editor { display: grid; gap: 6px; min-width: 0; }
.trigger-variable-generic, .trigger-variable-generic-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px; padding: 6px 0 0 8px; border-left: 2px solid rgb(113 230 161 / .2); }
.trigger-variable-generic-grid { row-gap: 8px; }
.trigger-variable-generic > span, .trigger-variable-generic-grid > span { padding-top: 8px; color: var(--text-dim); font-size: 8px; }
.trigger-variable-current { min-width: 0; display: grid; gap: 4px; }
.trigger-variable-current > span { color: var(--text-dim); font-size: 8px; }
.trigger-variable-current code { min-height: 31px; display: flex; align-items: center; overflow: hidden; padding: 6px 8px; color: var(--accent); background: #070b09; border: 1px solid var(--border); border-radius: 5px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.trigger-code-editor { display: grid; gap: 11px; }
.trigger-code-editor .textarea { min-height: 440px; resize: vertical; color: #c8f5d9; background: #060907; font-family: "Cascadia Code", Consolas, monospace; font-size: 10px; line-height: 1.65; tab-size: 2; }
.trigger-code-editor > code { padding: 9px; color: var(--text-dim); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; font-size: 8px; line-height: 1.55; white-space: pre-wrap; }
.keyboard-hint { display: inline-flex; align-items: center; gap: 3px; color: var(--text-dim); font-size: 8px; }
.keyboard-hint kbd { min-width: 21px; padding: 3px 5px; color: var(--text-secondary); text-align: center; background: var(--bg-raised); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; font-family: inherit; }

.policy-rule-editor { display: grid; gap: 12px; }
.policy-rule-editor__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.policy-rule-editor__header > div { display: grid; gap: 3px; }
.policy-rule-editor__header strong { font-size: 11px; }
.policy-rule-editor__header small { color: var(--text-dim); font-size: 8px; }
.policy-rule-empty { padding: 24px; color: var(--text-dim); background: var(--bg-raised); border: 1px dashed var(--border-strong); border-radius: 7px; text-align: center; font-size: 10px; }
.policy-group-card { overflow: hidden; background: rgb(113 230 161 / .018); border: 1px solid rgb(113 230 161 / .2); border-radius: 9px; }
.policy-group-card--disabled { opacity: .68; }
.policy-group-card > summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; color: var(--accent); cursor: pointer; list-style: none; }
.policy-group-card > summary::-webkit-details-marker { display: none; }
.policy-group-card > summary > span { display: grid; gap: 3px; min-width: 0; }
.policy-group-card > summary strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; font-size: 11px; }
.policy-group-card > summary small { color: var(--text-dim); font-family: monospace; font-size: 8px; }
.policy-group-card[open] > summary .policy-rule-card__chevron { transform: rotate(180deg); }
.policy-group-card__body { display: grid; gap: 12px; padding: 14px; border-top: 1px solid rgb(113 230 161 / .14); }
.policy-group-card__rules-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 3px; color: var(--text-secondary); font-size: 10px; }
.policy-rule-card { overflow: hidden; background: rgb(255 255 255 / .012); border: 1px solid var(--border-strong); border-radius: 8px; }
.policy-rule-card--disabled { opacity: .7; }
.policy-rule-card > summary { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; list-style: none; }
.policy-rule-card > summary::-webkit-details-marker { display: none; }
.policy-rule-card > summary > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.policy-rule-card > summary strong { overflow: hidden; text-overflow: ellipsis; font-family: monospace; font-size: 10px; }
.policy-rule-card > summary small { color: var(--text-dim); font-size: 8px; }
.policy-rule-card__index { display: grid; place-items: center; width: 24px; height: 24px; flex: none; color: var(--accent); background: rgb(113 230 161 / .07); border: 1px solid rgb(113 230 161 / .15); border-radius: 5px; font-family: monospace; font-size: 9px; }
.policy-rule-card__chevron { width: 15px; margin-left: auto; color: var(--text-dim); transition: transform 150ms ease; }
.policy-rule-card[open] .policy-rule-card__chevron { transform: rotate(180deg); }
.policy-rule-card__body { display: grid; gap: 13px; padding: 13px; border-top: 1px solid var(--border); }
.policy-rule-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.policy-rule-actions .toggle-row { margin-right: auto; }
.policy-rule-section { display: grid; gap: 11px; padding: 12px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 7px; }
.policy-rule-section h4 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--text-secondary); font-size: 10px; }
.policy-command-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.policy-command-heading > div { min-width: 0; display: grid; gap: 4px; }
.policy-command-heading small { color: var(--text-dim); font-size: 9px; line-height: 1.45; }
.command-catalog-launcher { flex: none; }
.command-catalog-backdrop { position: fixed; inset: 0; z-index: 10010; width: 100vw; height: 100vh; height: 100dvh; display: grid; place-items: center; overflow: hidden; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgb(2 4 3 / .8); backdrop-filter: blur(5px); }
.command-catalog { width: min(940px, 100%); max-height: min(780px, calc(100vh - 36px)); max-height: min(780px, calc(100dvh - 36px)); display: grid; grid-template-rows: auto auto auto minmax(160px, 1fr); overflow: hidden; color: var(--text); background: #101714; border: 1px solid var(--border-strong); border-radius: 11px; box-shadow: var(--shadow); animation: modal-in 160ms ease both; }
.command-catalog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 18px 14px; border-bottom: 1px solid var(--border); }
.command-catalog__header > div:first-child { min-width: 0; display: grid; gap: 4px; }
.command-catalog__header > div:first-child > span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 750; }
.command-catalog__header small { color: var(--text-dim); font-size: 10px; line-height: 1.45; }
.command-catalog__header-actions { display: flex; align-items: center; gap: 6px; }
.command-catalog__header-actions > button:last-child { width: 30px; height: 30px; display: grid; flex: none; place-items: center; padding: 0; color: var(--text-secondary); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; }
.command-catalog__header-actions > button:last-child:hover { color: var(--text); border-color: var(--border-strong); }
.command-catalog__filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .32fr); gap: 9px; padding: 13px 18px 8px; }
.command-catalog__search { display: flex; align-items: center; padding-left: 10px; background: #0b100e; border: 1px solid var(--border-strong); border-radius: 7px; }
.command-catalog__search:focus-within { border-color: #4d8c66; box-shadow: 0 0 0 2px rgb(113 230 161 / .08); }
.command-catalog__search > svg { flex: none; color: var(--text-dim); }
.command-catalog__search .input { border: 0; background: transparent; box-shadow: none; }
.command-catalog__summary { display: flex; align-items: center; gap: 10px; padding: 0 18px 8px; color: var(--text-dim); font-size: 9px; }
.command-catalog__summary span { display: inline-flex; align-items: center; gap: 4px; }
.command-catalog__results { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 18px; scrollbar-gutter: stable; }
.command-catalog__item { min-width: 0; display: grid; align-content: start; gap: 8px; padding: 12px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; }
.command-catalog__item:hover { border-color: rgb(113 230 161 / .28); }
.command-catalog__item.is-selected { background: rgb(113 230 161 / .035); border-color: rgb(113 230 161 / .25); }
.command-catalog__item > .button { justify-self: end; margin-top: auto; }
.command-catalog__item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.command-catalog__root { min-width: 0; display: flex; align-items: center; gap: 6px; color: var(--accent-strong); }
.command-catalog__root svg { flex: none; }
.command-catalog__root strong { overflow-wrap: anywhere; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.command-catalog__source { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px 6px; color: var(--text-dim); background: rgb(255 255 255 / .025); border: 1px solid var(--border); border-radius: 999px; font-size: 8px; }
.command-catalog__source--trigger { color: #a8d8ff; background: rgb(76 165 255 / .055); border-color: rgb(76 165 255 / .18); }
.command-catalog__canonical, .command-catalog__usages { min-width: 0; display: grid; gap: 4px; }
.command-catalog__canonical > span, .command-catalog__usages > span { color: var(--text-dim); font-size: 8px; }
.command-catalog__canonical code, .command-catalog__usages code, .command-catalog__trigger code, .command-catalog__arguments code, .command-catalog__aliases code { max-width: 100%; color: var(--text-secondary); font-family: "Cascadia Mono", Consolas, monospace; font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }
.command-catalog__canonical code { padding: 4px 6px; color: var(--accent); background: rgb(113 230 161 / .045); border: 1px solid rgb(113 230 161 / .12); border-radius: 4px; }
.command-catalog__usages code { padding: 4px 6px; background: #080c0a; border: 1px solid var(--border); border-radius: 4px; }
.command-catalog__usages small { color: var(--text-dim); font-size: 8px; }
.command-catalog__trigger { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 0; color: var(--text-dim); font-size: 9px; }
.command-catalog__trigger strong { color: var(--text-secondary); }
.command-catalog__arguments, .command-catalog__aliases { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: var(--text-dim); font-size: 8px; }
.command-catalog__arguments code, .command-catalog__aliases code { padding: 2px 5px; background: rgb(255 255 255 / .025); border: 1px solid var(--border); border-radius: 999px; }
.command-catalog__state { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 42px 16px; color: var(--text-dim); text-align: center; }
.command-catalog__state strong { color: var(--text-secondary); font-size: 11px; }
.command-catalog__state span { max-width: 560px; font-size: 10px; overflow-wrap: anywhere; }
.command-catalog__state--error > svg { color: var(--danger); }
.command-catalog__stale-warning { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; color: #f4cf8b; background: rgb(242 189 99 / .055); border: 1px solid rgb(242 189 99 / .18); border-radius: 6px; font-size: 9px; overflow-wrap: anywhere; }
.command-catalog__stale-warning svg { flex: none; }
.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.checkbox-set { min-width: 0; margin: 0; padding: 9px 10px 10px; border: 1px solid var(--border); border-radius: 6px; }
.checkbox-set legend { padding: 0 4px; color: var(--text-dim); font-size: 8px; }
.checkbox-set > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.checkbox-set label { display: flex; align-items: center; gap: 5px; padding: 5px 7px; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; font-size: 8px; cursor: pointer; }
.checkbox-set input, .constraint-toggles input { accent-color: var(--accent); }
.constraint-toggles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.toggle-row--compact { min-height: 34px; padding: 7px 9px; }
.policy-json-preview { overflow: hidden; border: 1px solid var(--border); border-radius: 7px; }
.policy-json-preview summary { padding: 9px 11px; color: var(--text-dim); cursor: pointer; font-size: 8px; }
.policy-json-preview pre { max-height: 360px; margin: 0; padding: 12px; overflow: auto; color: var(--text-secondary); background: #060907; border-top: 1px solid var(--border); font-size: 8px; line-height: 1.5; }
.inventory-slot { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 6px; padding: 8px; color: var(--text-secondary); background: #0b100e; border: 1px solid var(--border); border-radius: 6px; text-align: left; cursor: pointer; }
.inventory-slot:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.inventory-slot.is-selected { border-color: #4b8a65; box-shadow: 0 0 0 2px rgb(113 230 161 / .07); }
.inventory-slot.has-opaque { border-color: rgb(242 189 99 / .28); }
.inventory-slot > span { grid-row: 1 / span 2; align-self: center; color: var(--text-dim); font-family: monospace; font-size: 8px; }
.inventory-slot strong, .inventory-slot small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-slot strong { color: var(--text); font-family: monospace; font-size: 8px; }
.inventory-slot small { color: var(--text-dim); font-size: 8px; }
.inventory-slot-form { margin-top: 3px; padding-top: 15px; border-top: 1px solid var(--border); }
.inventory-slot-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; }
.toast-viewport { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 10020; width: min(460px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.toast { --toast-tone: var(--success); position: relative; width: 100%; min-height: 74px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; overflow: hidden; padding: 16px 15px 18px 18px; color: var(--text); background: #202622; border: 1px solid #3a463f; border-left: 6px solid var(--toast-tone); border-radius: 10px; box-shadow: 0 18px 55px rgb(0 0 0 / .4); pointer-events: auto; animation: toast-in 180ms ease-out both; }
.toast--danger { --toast-tone: var(--danger); }
.toast--warn { --toast-tone: var(--warning); }
.toast__icon { width: 24px; height: 24px; color: var(--toast-tone); stroke-width: 2.2; }
.toast__content { min-width: 0; display: grid; gap: 5px; padding-top: 1px; }
.toast__content strong { overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; }
.toast__content span { overflow-wrap: anywhere; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.toast__close { width: 30px; height: 30px; display: grid; place-items: center; margin: -3px -3px 0 0; padding: 0; color: var(--text-secondary); background: rgb(255 255 255 / .035); border: 1px solid rgb(255 255 255 / .08); border-radius: 50%; cursor: pointer; transition: 140ms ease; }
.toast__close:hover { color: var(--text); background: rgb(255 255 255 / .09); border-color: rgb(255 255 255 / .15); }
.toast__close svg { width: 17px; height: 17px; }
.toast__countdown { position: absolute; inset: auto 0 0; height: 3px; background: var(--toast-tone); transform-origin: left center; animation: toast-countdown var(--toast-duration) linear forwards; }

.console-layout { display: grid; grid-template-columns: minmax(360px, 1.2fr) minmax(260px, .8fr); gap: 14px; }
.security-strip { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 9px 11px; color: var(--text-secondary); background: rgb(113 230 161 / .05); border: 1px solid rgb(113 230 161 / .13); border-radius: 7px; font-size: 9px; }
.security-strip .badge { margin-left: auto; }
.command-input { display: flex; align-items: center; padding-left: 10px; color: var(--accent); background: #080c0a; border: 1px solid var(--border-strong); border-radius: 6px; font-family: monospace; }
.command-input .input { font-family: monospace; border: 0; background: transparent; box-shadow: none; }
.operation-list { display: grid; gap: 0; }
.operation-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.operation-list article:last-child { border: 0; }
.operation-list article > div { display: grid; gap: 4px; }
.operation-list article > div:last-child { justify-items: end; }
.operation-list strong { font-size: 10px; }
.operation-list small { color: var(--text-dim); font-size: 8px; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-grid .panel { margin: 0; }
.feature-panel { grid-column: 1 / -1; }
.accounts-panel { grid-column: 1 / -1; }
.accounts-locked { margin: 0; }
.account-create { grid-template-columns: 1fr 1.35fr .8fr auto; align-items: end; margin-bottom: 17px; padding: 13px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 7px; }
.account-create__action { display: flex; align-items: end; height: 100%; }
.account-create__action .button { width: 100%; }
.accounts-table-shell .select { min-width: 125px; }
.account-disabled { display: flex; align-items: center; gap: 7px; min-width: 78px; cursor: pointer; }
.account-disabled input { accent-color: var(--accent); }
.account-actions { min-width: 155px; display: grid; justify-items: end; gap: 6px; }
.account-actions small { max-width: 250px; color: var(--warning); font-size: 8px; line-height: 1.4; text-align: right; }
.integration-grid { display: grid; gap: 8px; }
.integration-grid > div { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; font-size: 10px; }
.switch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.switch-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; }
.switch-row > span:first-child { flex: 1; min-width: 0; }
.switch-row strong, .switch-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-row strong { font-family: monospace; font-size: 9px; }
.switch-row small { margin-top: 3px; color: var(--text-dim); font-size: 8px; }
.switch-row input { position: absolute; opacity: 0; }
.switch { position: relative; width: 29px; height: 17px; flex: none; background: #27312c; border: 1px solid var(--border-strong); border-radius: 999px; transition: 140ms ease; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; background: #87978e; border-radius: 50%; transition: 140ms ease; }
.switch-row input:checked + .switch { background: rgb(113 230 161 / .22); border-color: #4d8c66; }
.switch-row input:checked + .switch::after { left: 14px; background: var(--accent); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }

.security-session { display: grid; gap: 13px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.security-form h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 11px; }
.security-form > p { margin: -4px 0 2px; color: var(--text-dim); font-size: 9px; line-height: 1.5; }
.recovery-codes { display: grid; gap: 10px; padding: 11px; color: #f7cf84; background: rgb(242 189 99 / .07); border: 1px solid rgb(242 189 99 / .2); border-radius: 7px; font-size: 9px; line-height: 1.5; }
.recovery-codes > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.recovery-codes code { padding: 6px; color: var(--text); background: #090d0b; border: 1px solid var(--border); border-radius: 4px; user-select: all; }
.form-success { color: var(--success); font-size: 10px; }

.moderation-layout { display: grid; grid-template-columns: minmax(290px, .58fr) minmax(0, 1.42fr); gap: 14px; }
.rollback-layout { display: grid; grid-template-columns: minmax(330px, .68fr) minmax(0, 1.32fr); gap: 14px; }
.rollback-preview { display: grid; gap: 13px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.rollback-preview__title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rollback-preview h3 { margin: 0; font-size: 14px; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.preview-metrics > div { padding: 9px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 5px; }
.preview-metrics strong, .preview-metrics span { display: block; }
.preview-metrics strong { font-family: monospace; font-size: 16px; }
.preview-metrics span { margin-top: 3px; color: var(--text-dim); font-size: 8px; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 50% 0%, rgb(113 230 161 / .09), transparent 36%), linear-gradient(135deg, #080b0a, #0c110f); }
.login-language { position: fixed; top: 20px; right: 20px; width: auto; }
.login-card { width: min(410px, 100%); padding: 32px; background: rgb(16 23 20 / .94); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 28px 80px rgb(0 0 0 / .35); }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; font-size: 12px; font-weight: 700; }
.login-brand .brand__mark { width: 30px; height: 30px; }
.login-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--accent); background: rgb(113 230 161 / .07); border: 1px solid rgb(113 230 161 / .18); border-radius: 9px; }
.login-card h1 { margin: 15px 0 7px; font-size: 23px; letter-spacing: -.03em; }
.login-card > p { margin: 0 0 22px; color: var(--text-secondary); font-size: 10px; line-height: 1.55; }
.bootstrap-note { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 17px; padding: 10px; color: #f7cf84; background: rgb(242 189 99 / .07); border: 1px solid rgb(242 189 99 / .18); border-radius: 7px; font-size: 9px; line-height: 1.5; }
.bootstrap-note svg { flex: none; width: 16px; }
.auth-mode-toggle { justify-self: start; margin-top: -5px; padding: 0; color: var(--accent); background: transparent; border: 0; font-size: 9px; cursor: pointer; }
.auth-mode-toggle:hover { color: var(--accent-strong); text-decoration: underline; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
@keyframes modal-in { from { opacity: 0; transform: scale(.985) translateY(5px); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes toast-countdown { to { transform: scaleX(0); } }

.menus-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
.menus-list { position: sticky; top: 76px; padding: 0; overflow: hidden; }
.menus-list > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); }
.menus-list > header > div { display: grid; gap: 2px; }
.menus-list > header small { color: var(--text-dim); font-size: 10px; }
.menus-list > div { display: grid; max-height: calc(100vh - 210px); overflow-y: auto; }
.menus-list > div > button { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 12px; color: var(--text-dim); text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); }
.menus-list > div > button:hover, .menus-list > div > button.is-active { color: var(--text); background: var(--accent-soft); }
.menus-list > div > button > span:first-child { display: grid; gap: 4px; min-width: 0; }
.menus-list > div > button strong, .menus-list > div > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menus-list > div > button small { color: var(--text-dim); font-size: 10px; }
.menu-workbench { display: grid; gap: 14px; min-width: 0; }
.menu-document-settings { display: grid; gap: 13px; }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.menu-builder-grid { display: grid; grid-template-columns: minmax(430px, 1.35fr) minmax(330px, .65fr); gap: 14px; align-items: start; }
.menu-canvas-panel { min-width: 0; overflow: hidden; }
.menu-control-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-bottom: 12px; }
.menu-control-palette button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 8px; color: var(--text-dim); background: #0d1511; border: 1px solid var(--border); border-radius: 5px; font-size: 11px; }
.menu-control-palette button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }
.menu-canvas-scroll { overflow: auto; padding: 18px; background: #070b09; border: 1px solid var(--border); border-radius: 7px; }
.menu-canvas { position: relative; isolation: isolate; width: min(100%, calc(var(--menu-width) * 1px)); min-width: 320px; margin: auto; overflow: hidden; border: 1px solid #3b5849; border-radius: 5px; box-shadow: 0 18px 55px rgb(0 0 0 / .4); user-select: none; }
.menu-canvas__grid { position: absolute; inset: 0; z-index: -1; opacity: .23; pointer-events: none; background-image: linear-gradient(to right, #6b8b7a 1px, transparent 1px), linear-gradient(to bottom, #6b8b7a 1px, transparent 1px); background-size: 16px 16px; }
.menu-canvas__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--text-dim); text-align: center; pointer-events: none; }
.menu-canvas__empty svg { color: var(--accent); }
.menu-canvas__empty span { font-size: 11px; }
.menu-control { position: absolute; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 4px; min-height: 3px; overflow: hidden; border: 1px solid transparent; cursor: grab; box-sizing: border-box; }
.menu-control:active { cursor: grabbing; }
.menu-control.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; overflow: visible; }
.menu-control__tag { display: none; position: absolute; left: 0; top: -18px; padding: 2px 5px; color: #07100b; background: var(--accent); border-radius: 3px; font: 9px/1.2 ui-monospace, monospace; white-space: nowrap; }
.menu-control.is-selected > .menu-control__tag { display: block; }
.menu-control--button, .menu-control--icon_button { border-color: #315644; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .025); }
.menu-control--image { display: grid; place-items: center; color: var(--text-dim); background: #0b100e; border-color: #294436; }
.menu-control--image img { width: 100%; height: 100%; object-fit: contain; }
.menu-control--icon_button img { width: min(60%, 24px); height: min(80%, 24px); object-fit: contain; image-rendering: pixelated; }
.menu-control--image small, .menu-control--item_slot small { max-width: 92%; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.menu-control--panel { border-color: #20382c; }
.menu-control--border { background: transparent !important; }
.menu-control__border { position: absolute; inset: 0; border-style: solid; border-radius: inherit; }
.menu-control--progress { position: absolute; background: #16231c; border-color: #315644; }
.menu-control__progress { position: absolute; inset: 0 auto 0 0; z-index: -1; }
.menu-control__input { width: 100%; height: 100%; display: flex; align-items: center; padding: 0 8px; color: var(--text-dim); border: 1px solid #315644; }
.menu-control__check { display: inline-grid; place-items: center; width: 15px; height: 15px; color: transparent; border: 1px solid #486354; }
.menu-control__check.is-checked { color: #07100b; background: var(--accent); }
.menu-control--slider { flex-direction: column; align-items: stretch; padding-inline: 5px; }
.menu-control__track { position: relative; height: 3px; background: #315644; }
.menu-control__track i { position: absolute; top: 50%; width: 9px; height: 13px; background: var(--accent); border-radius: 2px; transform: translate(-50%, -50%); }
.menu-control--item_slot { position: absolute; background: #111916; border: 2px ridge #52665b; }
.menu-control--item_slot b { position: absolute; right: 2px; bottom: 1px; font-size: 9px; }
.menu-control__separator { display: block; }
.menu-control--spacer { color: #728078; background: repeating-linear-gradient(135deg, transparent 0 5px, rgb(113 230 161 / .08) 5px 10px); border: 1px dashed #486354; font-size: 9px; }
.menu-inspector { position: sticky; top: 76px; display: grid; gap: 12px; max-height: calc(100vh - 95px); overflow-y: auto; }
.menu-inspector__actions, .menu-inspector__heading, .menu-events > header, .menu-image-picker header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-inspector__heading code { color: var(--text-dim); font-size: 10px; }
.menu-resource-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.menu-events { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--border); }
.menu-events header > div { display: grid; gap: 2px; }
.menu-events header small { color: var(--text-dim); font-size: 10px; }
.menu-event { display: grid; gap: 8px; padding: 10px; background: #0b110e; border: 1px solid var(--border); border-radius: 6px; }
.menu-event > .button { justify-self: end; }
.menu-image-backdrop { z-index: 120; }
.menu-image-picker { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); width: min(930px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); overflow: hidden; color: var(--text); background: #0c120f; border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); }
.menu-image-picker header { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.menu-image-picker header > div { display: grid; gap: 3px; }
.menu-image-picker header small { color: var(--text-dim); font-size: 10px; }
.menu-image-picker header button { color: var(--text-dim); background: transparent; border: 0; }
.menu-image-picker__toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 12px 16px; }
.menu-image-picker__search { display: flex; align-items: center; gap: 6px; }
.menu-upload-button { position: relative; }
.menu-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.menu-image-picker > .form-error { margin: 0 16px 10px; }
.menu-image-picker__results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 7px; padding: 0 16px 16px; overflow-y: auto; }
.menu-image-picker__results > button { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px; color: var(--text); text-align: left; background: #0b100e; border: 1px solid var(--border); border-radius: 6px; }
.menu-image-picker__results > button:hover, .menu-image-picker__results > button.is-selected { border-color: var(--accent-border); background: var(--accent-soft); }
.menu-image-picker__results > button > span:last-child { display: grid; gap: 2px; min-width: 0; }
.menu-image-picker__results code, .menu-image-picker__results small { overflow: hidden; color: var(--text-dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.menu-image-picker__preview { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; color: var(--accent); background: #101914; border: 1px solid #294436; border-radius: 5px; }
.menu-image-picker__preview img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* Economy */
.economy-page { gap: 16px; }
.economy-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.economy-metrics .panel { display: grid; gap: 5px; min-height: 112px; padding: 16px; }
.economy-metrics .panel > span, .economy-metrics .panel > small { color: var(--text-dim); }
.economy-metrics .panel > strong { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 21px; }
.economy-icon { display: inline-grid; flex: 0 0 auto; place-items: center; overflow: hidden; color: var(--accent); background: linear-gradient(145deg, #19281f, #0b110e); border: 1px solid #345a45; border-radius: 9px; }
.economy-icon strong { max-width: 100%; overflow: hidden; font-size: 15px; text-overflow: ellipsis; }
.economy-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.economy-tabs { display: flex; gap: 4px; padding: 4px; overflow-x: auto; background: #0a100d; border: 1px solid var(--border); border-radius: 8px; }
.economy-tabs button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 150px; padding: 9px 13px; color: var(--text-dim); background: transparent; border: 0; border-radius: 6px; }
.economy-tabs button:hover { color: var(--text); background: #111a15; }
.economy-tabs button.is-active { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }
.economy-currency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.economy-currency-card { display: grid; gap: 15px; padding: 17px; }
.economy-currency-card.is-disabled { opacity: .67; }
.economy-currency-card__heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.economy-currency-card__heading h2 { margin: 0 0 2px; font-size: 16px; }
.economy-currency-card__heading code { color: var(--text-dim); font-size: 10px; }
.economy-currency-card__amount { display: grid; grid-template-columns: auto 1fr; align-items: baseline; padding: 13px; background: #0a100d; border: 1px solid var(--border); border-radius: 7px; }
.economy-currency-card__amount > span { margin-right: 7px; color: var(--accent); font-size: 19px; }
.economy-currency-card__amount > strong { min-width: 0; overflow: hidden; font-size: 23px; text-overflow: ellipsis; }
.economy-currency-card__amount > small { grid-column: 2; color: var(--text-dim); }
.economy-currency-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; }
.economy-currency-card dl > div { display: grid; gap: 3px; min-width: 0; }
.economy-currency-card dt { color: var(--text-dim); font-size: 10px; }
.economy-currency-card dd { min-width: 0; margin: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.economy-currency-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 11px; border-top: 1px solid var(--border); }
.economy-currency-card > footer > span { min-width: 0; overflow: hidden; color: var(--text-dim); font: 9px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.economy-currency-modal { width: min(900px, calc(100vw - 30px)); }
.economy-currency-form { display: grid; gap: 15px; }
.economy-icon-field { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.economy-toggle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.economy-toggle-grid > label { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 9px; padding: 11px; background: #0a100d; border: 1px solid var(--border); border-radius: 6px; }
.economy-toggle-grid input { margin-top: 2px; accent-color: var(--accent); }
.economy-toggle-grid span { display: grid; gap: 4px; }
.economy-toggle-grid small { color: var(--text-dim); line-height: 1.45; }
.economy-filter-panel { padding: 10px; }
.economy-filter-panel > form { display: flex; align-items: center; gap: 8px; }
.economy-filter-panel .search-box { flex: 1; width: auto; min-width: 220px; }
.economy-operation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.economy-operation-grid .panel__header h2, .economy-page > .panel > .panel__header h2 { display: flex; align-items: center; gap: 7px; }
.economy-operation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.economy-operation-form > .button { align-self: end; min-height: 38px; }
.economy-page td > .badge { margin-left: 7px; }
.table-subline { display: block; margin-top: 4px; color: var(--text-dim); }
.economy-page td svg { vertical-align: middle; }
.economy-ledger-reason { display: block; max-width: 310px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) {
  .economy-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .economy-operation-grid { grid-template-columns: 1fr; }
  .menu-builder-grid { grid-template-columns: 1fr; }
  .menu-inspector { position: static; max-height: none; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-layout, .rollback-layout { grid-template-columns: 1fr; }
  .switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trigger-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .trigger-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .menus-layout { grid-template-columns: 1fr; }
  .menus-list { position: static; }
  .menus-list > div { display: flex; max-height: none; overflow-x: auto; }
  .menus-list > div > button { min-width: 190px; border-right: 1px solid var(--border); }
  .sidebar { transform: translateX(-100%); transition: transform 180ms ease; box-shadow: var(--shadow); }
  .sidebar--open { transform: translateX(0); }
  .sidebar__close, .menu-button { display: inline-grid; place-items: center; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 29; display: block; background: rgb(0 0 0 / .55); border: 0; }
  .workspace { margin-left: 0; }
  .main-content { padding: 25px 22px 50px; }
  .topbar { padding: 0 22px; }
  .offline-banner { margin-inline: 22px; }
  .overview-grid, .console-layout, .moderation-layout { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .feature-panel { grid-column: auto; }
  .accounts-panel { grid-column: auto; }
  .account-create { grid-template-columns: 1fr 1fr; }
  .message-workspace { grid-template-columns: 1fr; }
  .message-section-nav { position: static; grid-template-columns: repeat(5, minmax(145px, 1fr)); overflow-x: auto; }
  .trigger-layout { grid-template-columns: 1fr; }
  .trigger-sidebar { position: static; display: flex; align-items: stretch; overflow-x: auto; }
  .trigger-sidebar__heading { flex: 0 0 145px; }
  .trigger-group-item { flex: 0 0 190px; border-right: 1px solid var(--border); border-bottom: 0; }
}

@media (max-width: 620px) {
  .economy-metrics, .economy-toggle-grid, .economy-operation-form { grid-template-columns: 1fr; }
  .economy-currency-grid { grid-template-columns: 1fr; }
  .economy-currency-card__heading { grid-template-columns: auto minmax(0, 1fr); }
  .economy-currency-card__heading > .badge-row { grid-column: 1 / -1; }
  .economy-filter-panel > form { align-items: stretch; flex-direction: column; }
  .economy-filter-panel .search-box { width: 100%; min-width: 0; }
  .economy-icon-field { grid-template-columns: auto minmax(0, 1fr); }
  .economy-icon-field > .button { grid-column: 1 / -1; }
  .form-grid--4, .menu-events .form-grid--2 { grid-template-columns: 1fr; }
  .menu-canvas-scroll { padding: 8px; }
  .menu-control-palette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu-image-picker { width: 100%; max-height: calc(100dvh - 8px); margin-top: auto; border-radius: 14px 14px 0 0; }
  .menu-image-picker__toolbar { grid-template-columns: 1fr; }
  .menu-image-picker__results { grid-template-columns: 1fr; }
  .toast-viewport { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); }
  .toast { min-height: 68px; padding: 14px 13px 16px 15px; }
  .main-content { padding: 20px 14px 42px; }
  .topbar { height: 52px; padding: 0 14px; }
  .topbar__server { display: none; }
  .offline-banner { align-items: flex-start; margin: 12px 14px -4px; }
  .page-header { display: block; }
  .page-header__actions { margin-top: 15px; }
  .search-box { width: 100%; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .metric-card { padding: 12px; }
  .metric-card__value { font-size: 19px; }
  .panel { padding: 14px; }
  .switch-grid, .form-grid, .form-grid--three, .constraint-toggles { grid-template-columns: 1fr; }
  .trigger-settings-inline { grid-template-columns: 1fr; }
  .account-create { grid-template-columns: 1fr; }
  .preview-metrics { grid-template-columns: repeat(2, 1fr); }
  .trigger-condition-row { grid-template-columns: 1fr; }
  .trigger-condition-row > svg { display: none; }
  .trigger-condition-row .trigger-row-actions { justify-self: end; }
  .trigger-command-editor, .trigger-action-condition__fields { grid-template-columns: 1fr; }
  .trigger-action-condition__head { grid-template-columns: minmax(0, 1fr) auto; }
  .trigger-action-condition__head > svg { display: none; }
  .trigger-action-condition > .trigger-action-tree { margin: 7px; }
  .trigger-action-card__head { grid-template-columns: minmax(0, 1fr); }
  .trigger-action-card__head > svg { display: none; }
  .trigger-action-card__head .select { max-width: none; }
  .trigger-action-card__head .trigger-row-actions { justify-self: end; }
  .variable-picker-launcher { align-items: stretch; display: grid; }
  .variable-picker-launcher__button { justify-content: space-between; }
  .variable-browser-backdrop { align-items: end; padding: max(8px, env(safe-area-inset-top)) 0 0; }
  .variable-browser { width: 100%; max-height: calc(100vh - 8px); max-height: calc(100dvh - max(8px, env(safe-area-inset-top))); border-radius: 14px 14px 0 0; }
  .variable-browser__header { padding: 14px; }
  .variable-browser__format-help { margin: 10px 14px 0; }
  .variable-browser__workspace { grid-template-columns: minmax(112px, 31vw) minmax(0, 1fr); margin-top: 10px; }
  .variable-browser__categories { padding: 10px 6px max(14px, env(safe-area-inset-bottom)); }
  .variable-browser__categories > button { padding: 7px 6px; }
  .variable-browser__categories > button em { min-width: 20px; padding-inline: 4px; }
  .variable-browser__filters { padding: 10px 14px 7px; }
  .variable-browser__summary { padding-inline: 14px; }
  .variable-browser__results { grid-template-columns: 1fr; padding: 0 14px max(14px, env(safe-area-inset-bottom)); }
  .variable-browser__item-heading { display: grid; }
  .variable-browser__item-heading code { max-width: 100%; text-align: left; }
  .policy-command-heading { align-items: stretch; flex-direction: column; }
  .command-catalog-launcher { align-self: flex-start; }
  .command-catalog-backdrop { align-items: end; padding: max(8px, env(safe-area-inset-top)) 0 0; }
  .command-catalog { width: 100%; max-height: calc(100vh - 8px); max-height: calc(100dvh - max(8px, env(safe-area-inset-top))); border-radius: 14px 14px 0 0; }
  .command-catalog__header { padding: 14px; }
  .command-catalog__filters { grid-template-columns: 1fr; padding: 10px 14px 7px; }
  .command-catalog__summary { padding-inline: 14px; }
  .command-catalog__results { grid-template-columns: 1fr; padding: 0 14px max(14px, env(safe-area-inset-bottom)); }
  .trigger-editor-toolbar { align-items: stretch; flex-direction: column; }
  .trigger-editor > .panel__header, .trigger-step-heading { align-items: flex-start; flex-wrap: wrap; }
  .trigger-editor > .panel__header > .button-row, .trigger-step-heading > .button-row {
    width: 100%; margin-left: 0;
  }
  .trigger-step-heading > .button, .trigger-step-heading > .select { margin-left: 0; }
  .trigger-step-heading .select { min-width: 0; flex: 1; }
  .modal-backdrop { padding: max(8px, env(safe-area-inset-top)) 0 0; align-items: flex-start; }
  .modal { width: 100%; max-height: calc(100vh - 8px); max-height: calc(100dvh - max(8px, env(safe-area-inset-top))); margin-block: auto 0; border-radius: 14px 14px 0 0; }
  .player-manage-tabs { overflow-x: auto; }
  .inventory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .login-page { padding: 15px; }
  .login-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .toast__countdown { animation: none !important; }
}