:root {
  --bg: #09090b;
  --panel: #121214;
  --panel-2: #18181b;
  --panel-3: #1f1f23;
  --border: #26262a;
  --border-2: #323238;
  --text: #f4f4f5;
  --muted: #8e8e96;
  --faint: #5f5f68;
  --green: #1fd17a;
  --green-dim: rgba(31, 209, 122, .12);
  --red: #f87171;
  --red-dim: rgba(248, 113, 113, .12);
  --amber: #fbbf24;
  --blue: #60a5fa;
  --violet: #a78bfa;
  --radius: 8px;
  --sidebar-w: 356px;
  color-scheme: dark;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
code, .mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.bold { font-weight: 600; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- icons (lucide via CSS mask) ---------- */
.i { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; vertical-align: middle; }
.i.sm { width: 14px; height: 14px; }
.i.lg { width: 20px; height: 20px; }
.i.xl { width: 28px; height: 28px; }

/* ---------- buttons & inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 5px; border: 1px solid transparent;
  background: var(--panel-3); color: var(--text); font-weight: 500; font-size: 13px;
  cursor: pointer; white-space: nowrap; user-select: none; transition: filter .12s, background .12s;
}
.btn:hover { filter: brightness(1.15); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn.primary { background: var(--green); color: var(--on-primary); }
.btn.danger { background: var(--red); color: #1d0707; }
.btn.danger-ghost { background: var(--red-dim); color: var(--red); border-color: rgba(248,113,113,.25); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--panel-3); filter: none; }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn.icon { width: 30px; padding: 0; }
.btn.icon.sm { width: 26px; }
.icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 5px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--panel-3); color: var(--text); }
.icon-btn.red { color: var(--red); }
.icon-btn.green { color: var(--green); }

input, select, textarea {
  width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 0 10px; height: 32px; font: inherit; font-size: 13px; outline: none;
}
textarea { height: auto; padding: 8px 10px; resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--green); }
input::placeholder, textarea::placeholder { color: var(--faint); }
select { appearance: none; background-image: url("/icons/chevron-down.svg"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; padding-right: 28px; filter: none; }
label.field { display: flex; flex-direction: column; gap: 4px; }
label.field > span { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.info { color: var(--faint); cursor: help; }
.input-group { display: flex; align-items: stretch; }
.input-group input { border-radius: 5px 0 0 5px; }
.input-group select { width: 92px; border-radius: 0 5px 5px 0; border-left: 0; }

input[type=checkbox] {
  appearance: none; width: 15px; height: 15px; padding: 0; border-radius: 3px; margin: 0;
  border: 1px solid var(--border-2); background: var(--panel-2); cursor: pointer; flex: none; display: inline-grid; place-items: center;
}
input[type=checkbox]:checked { background: var(--green); border-color: var(--green); }
input[type=checkbox]:checked::after { content: ""; width: 10px; height: 10px; background: #06130c; -webkit-mask: url("/icons/check.svg") center/contain no-repeat; mask: url("/icons/check.svg") center/contain no-repeat; }
label.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); font-size: 12.5px; }
label.check:hover { color: var(--text); }

.toggle { position: relative; display: inline-block; vertical-align: middle; width: 34px; height: 19px; flex: none; }
.toggle input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.toggle span { position: absolute; inset: 0; border-radius: 99px; background: var(--border-2); transition: background .15s; }
.toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #18181b; transition: transform .15s; }
.toggle input:checked + span { background: var(--green); }
.toggle input:checked + span::after { transform: translateX(15px); }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100%; }
.sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 14px 10px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; padding: 0 2px 14px; }
.logo { width: 18px; height: 18px; border-radius: 3px; background: linear-gradient(135deg, #3c8d2f 0 50%, #2c6b22 50%); box-shadow: inset 0 -6px 0 #6b4a2b; flex: none; }
.nav { display: flex; flex-direction: column; gap: 7px; }
.nav-item {
  display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; border-radius: 6px;
  background: var(--panel-2); color: var(--text); font-weight: 500; cursor: pointer; position: relative; border: 0; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--panel-3); text-decoration: none; }
.nav-item.active { background: var(--green); color: var(--on-primary); }
.nav-item .count { margin-left: auto; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.nav-item .dot-badge { position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 8px; padding: 0 2px; font-size: 12px; font-weight: 500; }
.subnav { display: flex; flex-direction: column; gap: 7px; margin: 7px 0 4px 22px; }
.favicon { width: 16px; height: 16px; border-radius: 3px; flex: none; image-rendering: pixelated; object-fit: cover; }
.favicon.ph { display: inline-grid; place-items: center; background: var(--panel-3); color: var(--muted); font-size: 10px; font-weight: 700; }
.sidebar-footer { border-top: 1px solid var(--border); padding: 12px 10px; }
.user-chip { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 6px; background: var(--panel-2); cursor: pointer; position: relative; }
.user-chip .avatar { width: 18px; height: 18px; border-radius: 4px; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { height: 60px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 22px; border-bottom: 1px solid var(--border); }
.topbar h1 { font-size: 14.5px; font-weight: 600; margin: 0; }
.topbar .crumb { color: var(--muted); font-weight: 500; }
.menu-toggle { display: none; }
.content { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- panels & tables ---------- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; }
.panel h2 { font-size: 16px; font-weight: 600; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.panel-head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.panel-head .filter { margin-left: auto; width: 180px; }
.panel-head.plain { border-bottom: 0; padding-bottom: 6px; }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 600; padding: 13px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; }
.table th.sortable { cursor: pointer; }
.table th.sortable:hover { color: var(--green); }
.table th .i { margin-right: 4px; }
.table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(255,255,255,.015); }
.table .num { width: 34px; text-align: center; color: var(--text); font-weight: 600; }
.table .shrink { width: 1%; white-space: nowrap; }
.table .empty { text-align: center; color: var(--muted); padding: 22px; }
.table input.inline { height: 28px; background: transparent; border-color: transparent; }
.table input.inline:hover { border-color: var(--border); }
.table input.inline:focus { background: var(--panel-2); border-color: var(--green); }
.clickable { cursor: pointer; }

.acc { display: flex; align-items: center; gap: 9px; min-width: 0; }
.head { width: 22px; height: 22px; border-radius: 4px; flex: none; image-rendering: pixelated; background: var(--panel-3); }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--panel-3); color: var(--muted); white-space: nowrap; }
.badge.green { background: var(--green-dim); color: var(--green); }
.badge.red { background: var(--red-dim); color: var(--red); }
.badge.amber { background: rgba(251,191,36,.12); color: var(--amber); }
.badge.blue { background: rgba(96,165,250,.12); color: var(--blue); }

.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.status.online .dot { background: var(--online); box-shadow: 0 0 8px var(--online); }
.status.connecting .dot, .status.reconnecting .dot { background: var(--amber); animation: pulse 1.2s infinite; }
.status.auth .dot { background: var(--blue); }
.status.banned .dot, .status.error .dot { background: var(--red); }
.status-sub { color: var(--muted); font-size: 11.5px; max-width: 360px; }
.status-sub.red { color: var(--red); }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* ---------- account picker (chat, movement, ...) ---------- */
.picker { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 6px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); cursor: pointer; user-select: none; }
.chip:hover { border-color: var(--border-2); }
.chip.on { border-color: var(--green); background: var(--green-dim); }
.chip.off { opacity: .5; }
.chip .head { width: 18px; height: 18px; }

/* ---------- console ---------- */
.console { background: #070708; border: 1px solid var(--border); border-radius: 8px; height: calc(100vh - 330px); min-height: 260px; overflow-y: auto; padding: 10px 12px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.console .line { white-space: pre-wrap; word-break: break-word; padding: 1px 0; }
.console .time { color: #4b4b52; margin-right: 8px; }
.console .who { color: var(--violet); margin-right: 6px; }
.console .system { color: #8fb8de; }
.console .error { color: #ff8a84; }
.console .out { color: #a5d6a7; }
.console .screen { color: #d7b56d; font-style: italic; }

/* ---------- movement ---------- */
.control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.dpad { display: grid; grid-template-columns: repeat(3, 58px); gap: 6px; }
.key { height: 58px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); font-weight: 700; font-size: 16px; cursor: pointer; touch-action: none; user-select: none; }
.key.pressed, .btn.pressed { background: var(--green); color: var(--on-primary); border-color: var(--green); }
[data-control] { touch-action: none; }

/* ---------- inventory ---------- */
.inv { display: inline-flex; flex-direction: column; gap: 10px; padding: 14px; background: #1b1b1f; border: 1px solid var(--border); border-radius: 8px; }
.inv-grid { display: grid; grid-template-columns: repeat(9, 44px); gap: 3px; }
.inv-row { display: flex; gap: 14px; align-items: flex-start; }
.slot { width: 44px; height: 44px; background: #2a2a2f; border: 1px solid #36363c; border-radius: 4px; position: relative; display: grid; place-items: center; cursor: pointer; }
.slot:hover { border-color: var(--green); background: #303036; }
.slot.held { box-shadow: inset 0 0 0 2px var(--green); }
.slot img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.slot .cnt { position: absolute; right: 3px; bottom: 1px; font-size: 12px; font-weight: 700; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.slot .txt { font-size: 8.5px; line-height: 1.1; text-align: center; padding: 2px; color: var(--muted); overflow: hidden; pointer-events: none; word-break: break-all; }
.slot .dur { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 2px; background: #111; pointer-events: none; }
.slot .dur i { display: block; height: 100%; background: var(--green); }
.slot .ph { opacity: .18; width: 24px; height: 24px; }

/* ---------- welcome ---------- */
.welcome { flex: 1; display: grid; place-items: center; text-align: center; }
.welcome h2 { font-size: 17px; margin: 0 0 2px; }
.carousel { display: flex; gap: 12px; overflow-x: auto; padding: 18px 4px; max-width: calc(100vw - var(--sidebar-w) - 60px); scrollbar-width: thin; }
.preset { position: relative; flex: none; width: 150px; height: 110px; border-radius: 6px; border: 1px solid var(--border-2); background: var(--panel-2); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.preset:hover { border-color: var(--green); }
.preset .bg { position: absolute; inset: -20px; background-size: 34px; opacity: .13; image-rendering: pixelated; transform: rotate(-12deg); }
.preset img, .preset .favicon { width: 34px; height: 34px; position: relative; image-rendering: pixelated; border-radius: 6px; }
.preset strong { position: relative; margin-top: 6px; }
.preset span { position: relative; font-size: 11px; color: var(--muted); }

/* ---------- macro library ---------- */
.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.lib-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.lib-card .ico { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; background: var(--green-dim); color: var(--green); flex: none; }

/* ---------- settings ---------- */
.settings-panel h2 { margin-bottom: 14px; }
.setting-row { display: flex; align-items: center; gap: 12px; }
.setting-row .grow input { flex: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.danger-list { display: flex; flex-direction: column; }
.danger-item { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.danger-item:last-child { border-bottom: 0; }
.danger-item h4 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.danger-item p { margin: 0; color: var(--muted); font-size: 12px; }
.warn { display: flex; align-items: center; gap: 6px; margin-top: 6px !important; color: var(--muted); }

/* ---------- modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fade .12s; }
.modal { background: #0d0d0f; border: 1px solid var(--border); border-radius: 10px; width: min(520px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal.wide { width: min(720px, 100%); }
.modal-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-head p { margin: 4px 0 0; color: var(--muted); }
.modal-body { padding: 18px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.modal .error { color: var(--red); margin: 0; min-height: 0; }
@keyframes fade { from { opacity: 0; } }
.choice { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--panel-2); text-align: left; width: 100%; }
.choice:hover { border-color: var(--green); }
.choice .ico { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-3); flex: none; }
.waiting { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 30px 10px; }
.waiting h4 { margin: 10px 0 0; font-size: 18px; }
.code-box { font-family: ui-monospace, Consolas, monospace; font-size: 22px; letter-spacing: .18em; font-weight: 700; padding: 6px 14px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border); }

/* ---------- dropdown menu ---------- */
.menu { position: fixed; z-index: 60; min-width: 170px; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 8px; padding: 5px; box-shadow: var(--shadow); }
.menu button { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 9px; border: 0; border-radius: 5px; background: none; cursor: pointer; text-align: left; }
.menu button:hover { background: var(--panel-3); }
.menu button.red { color: var(--red); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 36px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--border-2); border-left: 3px solid var(--green); border-radius: 8px; padding: 10px 12px; box-shadow: var(--shadow); animation: fade .15s; }
.toast.error { border-left-color: var(--red); }
.toast .grow { word-break: break-word; }

/* ---------- login ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }

/* ---------- macro editor ---------- */
.editor { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: grid; grid-template-rows: 48px 1fr; }
.editor-top { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.editor-top #name { width: 220px; height: 28px; }
.editor-body { display: grid; grid-template-columns: 1fr 390px; min-height: 0; }
.canvas { position: relative; overflow: hidden; cursor: grab; background-color: var(--bg); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 22px 22px; }
.canvas.dragging { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; align-items: center; padding: 60px; }
.flow { display: flex; align-items: center; }
.trigger-group { position: relative; border: 1px dashed var(--border-2); border-radius: 12px; padding: 50px 30px 30px; display: flex; flex-direction: column; gap: 10px; }
.stop-pill { position: absolute; top: -14px; left: 20px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 14px; }
.stop-pill:hover { color: var(--text); border-color: var(--border-2); }
.stops { display: flex; flex-direction: column; gap: 6px; }
.stop-card { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: var(--red-dim); color: #fca5a5; cursor: pointer; border: 1px solid transparent; font-size: 12px; }
.stop-card.sel { border-color: var(--red); }
.node { width: 300px; background: var(--panel-2); border: 2px solid var(--border); border-radius: 10px; padding: 14px 16px; cursor: pointer; position: relative; flex: none; }
.node:hover { border-color: var(--border-2); }
.node.sel { border-color: var(--green); }
.node .kind { font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; display: flex; justify-content: space-between; }
.node .body { display: flex; align-items: center; gap: 12px; }
.node .ico { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.node strong { font-size: 17px; font-weight: 600; display: block; }
.node .desc { color: var(--muted); font-size: 13px; }
.node.trigger { width: 300px; }
.connector { width: 36px; height: 2px; background: var(--border-2); flex: none; position: relative; }
.connector.green { background: var(--green); }
.connector.green::before { content: ""; position: absolute; left: -6px; top: -5px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--green); background: var(--bg); }
.add-node { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel-2); display: grid; place-items: center; cursor: pointer; flex: none; color: var(--muted); }
.add-node:hover { border-color: var(--green); color: var(--green); }
.canvas-tools { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
.canvas-tools button { width: 26px; height: 26px; border: 0; background: none; border-radius: 4px; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.canvas-tools button:hover { background: var(--panel-3); color: var(--text); }
.canvas-tools .sep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.side { border-left: 1px solid var(--border); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #0b0b0d; }
.side-head { display: flex; align-items: center; gap: 10px; }
.side-head .ico { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; }
.trig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.trig { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px; border-radius: 6px; border: 1px solid transparent; background: var(--panel-2); cursor: pointer; font-size: 12px; text-align: left; width: 100%; }
.trig:hover { background: var(--panel-3); }
.trig.sel { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--panel-2)); }
.trig .ico { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; flex: none; }
.opt-box { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.opt { display: flex; gap: 10px; align-items: flex-start; }
.opt h5 { margin: 0; font-size: 13px; font-weight: 600; }
.opt p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.picker-pop { position: absolute; z-index: 5; width: 260px; max-height: 300px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border-2); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.6); cursor: default; }
.picker-pop input { border: 0; border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; background: transparent; }
.picker-pop .list { overflow-y: auto; padding: 6px; }
.picker-pop .cat { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 8px 6px 4px; }
.picker-pop button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border: 1px solid transparent; border-radius: 6px; background: none; cursor: pointer; text-align: left; }
.picker-pop button:hover, .picker-pop button.hl { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--panel-2)); }
.picker-pop button .ico { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; flex: none; }
.picker-pop button strong { display: block; font-size: 12px; font-weight: 600; }
.picker-pop button span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }

/* trigger/step accent colours */
.c-green { background: rgba(34,197,94,.18); color: #4ade80; }
.c-teal { background: rgba(20,184,166,.18); color: #2dd4bf; }
.c-blue { background: rgba(59,130,246,.18); color: #60a5fa; }
.c-indigo { background: rgba(99,102,241,.2); color: #818cf8; }
.c-violet { background: rgba(139,92,246,.2); color: #a78bfa; }
.c-amber { background: rgba(245,158,11,.18); color: #fbbf24; }
.c-orange { background: rgba(249,115,22,.18); color: #fb923c; }
.c-red { background: rgba(239,68,68,.18); color: #f87171; }
.c-slate { background: rgba(148,163,184,.14); color: #94a3b8; }
.node .ico.c-green, .side-head .ico.c-green { background: #22c55e; color: #06130c; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  :root { --sidebar-w: 280px; }
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .app.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.6); }
  .menu-toggle { display: inline-grid; }
  .content { padding: 14px; }
  .panel { padding: 14px; }
  .panel-head .filter { width: 100%; margin-left: 0; }
  .table-wrap { overflow-x: auto; }
  .carousel { max-width: calc(100vw - 30px); }
  .grid-2 { grid-template-columns: 1fr; }
  .editor-body { grid-template-columns: 1fr; grid-template-rows: 1fr 45%; }
  .side { border-left: 0; border-top: 1px solid var(--border); }
  .inv-grid { grid-template-columns: repeat(9, 34px); }
  .slot { width: 34px; height: 34px; }
  .slot img { width: 26px; height: 26px; }
}

/* ---------- connect rows ---------- */
.pill { height: 24px; padding: 0 9px; border-radius: 5px; border: 0; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--panel-3); color: var(--muted); white-space: nowrap; }
.pill:hover { filter: brightness(1.15); }
.pill.online { background: var(--online); color: #06130c; }
.pill.connecting, .pill.reconnecting { background: rgba(251,191,36,.16); color: var(--amber); }
.pill.auth { background: rgba(96,165,250,.16); color: var(--blue); }
.pill.banned { background: var(--red-dim); color: var(--red); }
.pill.offline, .pill.error { background: var(--red); color: #1d0707; }
.table input.inline.note { background: var(--panel-3); border-color: var(--border); min-width: 160px; }
.table input.inline.note:focus { border-color: var(--green); }
.icon-btn.minus { background: var(--red-dim); width: 24px; height: 24px; }

/* ---------- POV ---------- */
.search-box { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; width: 220px; border: 1px solid var(--border); border-radius: 5px; background: var(--panel-2); color: var(--muted); }
.search-box input { border: 0; background: transparent; height: 28px; padding: 0; }
.pov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 12px; margin-top: 8px; }
.pov-card { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #0c0c0e; display: flex; flex-direction: column; }
.pov-card.controlling { border-color: var(--green); }
.pov-card:fullscreen { border: 0; border-radius: 0; }
.pov-card:fullscreen .pov-body { aspect-ratio: auto; flex: 1; }
.pov-head { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 8px; background: var(--panel-2); border-bottom: 1px solid var(--border); }
.pov-head .head { border-radius: 3px; }
.pov-body { position: relative; aspect-ratio: 16 / 9; background: #070708; }
.pov-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.pov-overlay { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; }
.pov-card.controlling .pov-overlay { cursor: none; }
.mc-text { font-family: "Minecraft", ui-monospace, monospace; font-size: 15px; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; letter-spacing: .02em; }
.pov-msg { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.hud-wrap { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; pointer-events: none; }
.hud { display: flex; flex-direction: column; align-items: center; gap: 2px; transform: scale(var(--hud-scale, 1.1)); transform-origin: bottom center; }
.hud-bars { width: 182px; display: flex; justify-content: space-between; }
.hud-bars img { width: 8px; height: 8px; margin-right: -1px; image-rendering: pixelated; }
.food { display: flex; flex-direction: row-reverse; }
.hotbar { position: relative; width: 182px; height: 22px; background: url('/textures/hud/hotbar.png'); image-rendering: pixelated; display: flex; padding: 3px; gap: 4px; }
.hb-slot { width: 16px; height: 16px; position: relative; }
.hb-slot img { width: 16px; height: 16px; image-rendering: pixelated; }
.hb-slot b { position: absolute; right: -2px; bottom: -3px; font: 700 7px/1 ui-monospace, monospace; color: #fff; text-shadow: 1px 1px 0 #3f3f3f; }
.hb-sel { position: absolute; top: -1px; width: 24px; height: 24px; background: url('/textures/hud/hotbar_selection.png'); image-rendering: pixelated; }
@media (max-width: 900px) { .pov-grid { grid-template-columns: 1fr; } .search-box { width: 100%; } }

/* ---------- POV: in-game screens ---------- */
.pov-overlay { z-index: 1; }
.chat-lines { position: absolute; left: 6px; bottom: 58px; max-width: 70%; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 1px; }
.cl { background: rgba(0,0,0,.5); color: #fff; padding: 1px 5px; font: 12px/1.35 ui-monospace, Consolas, monospace; text-shadow: 1px 1px 0 #3f3f3f; white-space: pre-wrap; word-break: break-word; }
.cl.out { color: #d6d6d6; }
.cl.error { color: #ff7b7b; }
.hud-wrap { z-index: 2; }
.keys { position: absolute; top: 6px; left: 6px; right: 6px; z-index: 2; pointer-events: none; display: none; font-size: 10.5px; color: rgba(255,255,255,.85); text-shadow: 1px 1px 0 #000; text-align: center; }
.pov-card.controlling .keys { display: block; }
.pov-card.ui-open .keys { display: none; }
.ui-wrap { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pov-card.ui-open .ui-wrap { pointer-events: auto; }
.pov-card.ui-open .ui-wrap[data-ui="inventory"] { background: rgba(0,0,0,.45); display: grid; place-items: center; cursor: default; }
.pov-card.ui-open .ui-wrap[data-ui="players"] { display: flex; justify-content: center; align-items: flex-start; padding-top: 24px; pointer-events: none; }
.chat-bar { position: absolute; left: 4px; right: 4px; bottom: 4px; }
.chat-input { height: 24px; border-radius: 0; border: 0; background: rgba(0,0,0,.6); color: #fff; font: 13px ui-monospace, Consolas, monospace; padding: 0 6px; }
.chat-input:focus { border: 0; outline: 1px solid rgba(255,255,255,.35); }
.mc-inv { background: #c6c6c6; border: 2px solid #fff; border-right-color: #555; border-bottom-color: #555; border-radius: 3px; padding: 6px 8px 5px; color: #3f3f3f; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 0 0 2px #000; }
.mc-title { font-size: 11px; font-weight: 600; color: #404040; margin: 1px 0 2px; }
.mc-grid { display: grid; grid-template-columns: repeat(9, var(--s)); }
.mc-grid.gap { margin-top: 4px; }
.mc-grid.armor { grid-template-columns: repeat(4, var(--s)) 1fr var(--s); margin-bottom: 4px; }
.mc-hint { font-size: 9.5px; color: #555; margin-top: 3px; text-align: center; }
.mslot { width: var(--s); height: var(--s); background: #8b8b8b; border: 1px solid #373737; border-right-color: #fff; border-bottom-color: #fff; position: relative; display: grid; place-items: center; cursor: pointer; }
.mslot:hover { background: #a8a8a8; }
.mslot.held { outline: 2px solid #fff; outline-offset: -2px; }
.mslot img { width: 80%; height: 80%; image-rendering: pixelated; pointer-events: none; }
.mslot .txt { font-size: 7px; line-height: 1; color: #222; text-align: center; overflow: hidden; pointer-events: none; }
.mslot .cnt, .cursor-item .cnt { position: absolute; right: 1px; bottom: 0; font: 700 calc(var(--s, 22px) * .38) / 1 ui-monospace, monospace; color: #fff; text-shadow: 1px 1px 0 #3f3f3f; pointer-events: none; }
.mslot .dur { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 2px; background: #111; pointer-events: none; }
.mslot .dur i { display: block; height: 100%; }
.cursor-item { position: absolute; width: 24px; height: 24px; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; }
.cursor-item img { width: 100%; height: 100%; image-rendering: pixelated; }
.tab-list { background: rgba(0,0,0,.6); min-width: 220px; max-width: 80%; max-height: 80%; overflow: hidden; padding: 3px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; }
.tl { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); color: #fff; padding: 1px 4px; font: 12px ui-monospace, Consolas, monospace; }
.tl .head { width: 12px; height: 12px; }
.tl .ping { color: #8f8; font-size: 10px; }
.pov-card:fullscreen .mc-inv { transform: scale(1.4); }

/* ---------- Minecraft GUI (real textures, scaled with --g) ---------- */
.mc-box { position: relative; }
.mc-scale { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: pixelated; }
.mc-screen { position: relative; }
.mc-bg { position: absolute; background-size: 256px 256px; background-repeat: no-repeat; image-rendering: pixelated; }
.mct { position: absolute; image-rendering: pixelated; pointer-events: none; }
.mct-fallback { position: absolute; font: 8px/1 ui-monospace, monospace; color: #fff; white-space: nowrap; pointer-events: none; }
.mc-slot, .mc-hb-slot { position: absolute; width: 18px; height: 18px; }
.mc-slot { cursor: pointer; }
.mc-slot .mc-item, .mc-hb-slot .mc-item, .mc-cursor-item .mc-item { position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; image-rendering: pixelated; pointer-events: none; }
.mc-item-missing { position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; display: grid; place-items: center; font: 8px monospace; color: #fff; background: #f0f; opacity: .6; }
.mc-slot:hover::after { content: ""; position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; background: rgba(255,255,255,.5); pointer-events: none; }
.mc-slot.held .mc-item { filter: drop-shadow(0 0 1px #fff); }
.mc-count { z-index: 1; }
.mc-dur { position: absolute; left: 3px; top: 14px; width: 13px; height: 2px; background: #000; pointer-events: none; }
.mc-dur i { display: block; height: 1px; }
.mc-player { position: absolute; object-fit: contain; pointer-events: none; }
.mc-cursor-item { position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 5; }
.mc-tooltip { position: absolute; z-index: 6; pointer-events: none; background: rgba(16,0,16,.94); padding: 3px; box-sizing: content-box; outline: 1px solid rgba(16,0,16,.94); box-shadow: inset 0 0 0 1px #5000ff60; }
.mc-tooltip > .mct { margin: 3px; }
.mc-hud { position: relative; width: 182px; height: 39px; }
.mc-sprite { position: absolute; image-rendering: pixelated; pointer-events: none; }
.mc-xp { position: absolute; left: 0; width: 182px; height: 5px; background: url('/textures/hud/experience_bar_background.png'); image-rendering: pixelated; }
.mc-xp i { display: block; height: 5px; background: url('/textures/hud/experience_bar_progress.png'); }
.mc-hotbar { position: absolute; left: 0; width: 182px; height: 22px; background: url('/textures/hud/hotbar.png'); image-rendering: pixelated; }
.mc-chat { position: relative; width: 320px; }
.mc-chat-row { position: absolute; left: 0; width: 320px; height: 9px; background: rgba(0,0,0,.5); }
.pov-grid { grid-template-columns: repeat(auto-fill, minmax(600px, 1fr)); }
.pov-body .hud-wrap { left: 50%; right: auto; bottom: 0; transform: translateX(-50%); display: block; }
.pov-body .chat-lines { left: calc(var(--g, 2) * 2px); bottom: calc(var(--g, 2) * 42px); max-width: none; display: block; }
.pov-body .mc-text { display: block; }
.crosshair { position: absolute; left: 50%; top: 50%; width: calc(var(--g, 2) * 15px); height: calc(var(--g, 2) * 15px); transform: translate(-50%, -50%); background: url('/textures/hud/crosshair.png') center / contain no-repeat; image-rendering: pixelated; mix-blend-mode: difference; pointer-events: none; z-index: 1; }
.pov-card.ui-open .crosshair { display: none; }
.pov-card.ui-open .ui-wrap[data-ui="inventory"] { background: rgba(16,16,16,.6); }
@media (max-width: 900px) { .pov-grid { grid-template-columns: 1fr; } }

.inv-stage { display: flex; justify-content: center; padding: 24px; background: #0c0c0e; }
.inv-center { position: relative; }

/* ---------- Movement ---------- */
.move-layout { display: grid; grid-template-columns: minmax(340px, 460px) 1fr; gap: 14px; align-items: start; }
.aim { position: relative; width: 176px; height: 156px; margin-top: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; user-select: none; }
.aim-pad { position: absolute; left: 8px; top: 8px; width: 140px; height: 140px; border-radius: 50%; cursor: crosshair; touch-action: none; background: radial-gradient(circle, transparent 60%, rgba(255,255,255,.03) 61%); }
.aim-head { position: absolute; left: 46px; top: 46px; width: 48px; height: 48px; image-rendering: pixelated; pointer-events: none; }
.aim-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); pointer-events: none; }
.aim-pitch { position: absolute; right: 8px; top: 8px; width: 10px; height: 140px; border-radius: 5px; background: var(--panel-3); cursor: ns-resize; touch-action: none; }
.aim-pitch-dot { position: absolute; left: -2px; width: 14px; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--green); pointer-events: none; }
.aim-l { position: absolute; font-size: 10px; color: var(--muted); pointer-events: none; }
.aim-l.n { left: 74px; top: 2px; } .aim-l.s { left: 75px; bottom: 2px; color: var(--green); } .aim-l.w { left: 3px; top: 70px; } .aim-l.e { left: 140px; top: 70px; }
.aim-l.up { right: 22px; top: 2px; } .aim-l.down { right: 22px; bottom: 2px; }
.ms { position: relative; }
.ms-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 10px; border-radius: 5px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; text-align: left; }
.ms-btn.empty { color: var(--faint); }
.ms-btn .ellipsis { flex: 1; }
.ms-pop { position: absolute; z-index: 20; left: 0; right: 0; top: 36px; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 8px; box-shadow: var(--shadow); padding: 5px; max-height: 280px; overflow-y: auto; }
.ms-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 5px; cursor: pointer; }
.ms-row:hover { background: var(--panel-3); }
.ms-row.off { opacity: .5; cursor: default; }
.ms-foot { display: flex; gap: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--border); margin-top: 4px; }
@media (max-width: 1100px) { .move-layout { grid-template-columns: 1fr; } }
.table .mono { white-space: nowrap; }

/* ---------- Inventory page extras ---------- */
.mc-slotnum { position: absolute; left: 1px; top: 1px; transform: scale(.5); transform-origin: 0 0; z-index: 2; pointer-events: none; }
.mc-slotnum .mct { position: absolute; }
.slot-buttons { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.slot-buttons button { width: 34px; height: 30px; border: 0; border-right: 1px solid var(--border); background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 12px; }
.slot-buttons button:last-child { border-right: 0; }
.slot-buttons button:hover { background: var(--panel-3); color: var(--text); }
.slot-buttons button.on { background: var(--green-dim); color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.sel-box { position: relative; }

/* ---------- Inventory page (dashboard layout) ---------- */
.inv-area { padding: 4px 0 6px; }
.inv-sections { position: relative; display: inline-flex; flex-direction: column; gap: 10px; --is: 36px; user-select: none; }
.isub { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.igroup { display: flex; flex-direction: column; gap: 4px; }
.ilabel { font-size: 11.5px; color: var(--faint); }
.itop { display: flex; align-items: flex-end; gap: 22px; }
.igrid { display: grid; gap: 1px; width: max-content; background: var(--border-2); border: 1px solid var(--border-2); border-radius: 6px; overflow: hidden; }
.islot { width: var(--is); height: var(--is); position: relative; display: grid; place-items: center; background: var(--panel-2); cursor: pointer; }
.islot:hover { background: var(--panel-3); }
.islot.held { background: var(--green-dim); box-shadow: inset 0 0 0 1px var(--green); }
.inum { font: 10.5px ui-monospace, Consolas, monospace; color: var(--faint); pointer-events: none; }
.islot img { width: 26px; height: 26px; image-rendering: pixelated; pointer-events: none; }
.iname { font-size: 8px; line-height: 1; text-align: center; color: var(--muted); overflow: hidden; padding: 2px; pointer-events: none; }
.icount { position: absolute; right: 3px; bottom: 1px; font: 700 11px/1 ui-monospace, Consolas, monospace; color: #fff; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.idur { position: absolute; left: 5px; right: 5px; bottom: 3px; height: 2px; background: #000; pointer-events: none; }
.idur i { display: block; height: 2px; }
.idivider { height: 1px; background: var(--border-2); width: calc(var(--is) * 9 + 10px); margin: 4px 0; }
.icursor-item { position: absolute; width: 26px; height: 26px; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; }
.icursor-item img { width: 26px; height: 26px; image-rendering: pixelated; }
.inv-tip { position: absolute; z-index: 6; pointer-events: none; background: var(--panel-2); border: 1px solid var(--border-2); border-radius: 6px; padding: 6px 9px; font-size: 12px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.slot-buttons { align-self: flex-start; }
.slot-buttons button { width: 36px; height: 34px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }

/* ---------- sign in / create account ---------- */
.auth-tabs { display: flex; gap: 4px; padding: 3px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; }
.auth-tabs button { flex: 1; height: 30px; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; font-weight: 500; }
.auth-tabs button.on { background: var(--panel-3); color: var(--text); }
/* ---------- admin ---------- */
.mode-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); cursor: pointer; }
.mode:hover { border-color: var(--border-2); }
.mode.on { border-color: var(--green); background: var(--green-dim); }
.mode input { width: auto; height: auto; margin-top: 3px; accent-color: var(--green); }

/* ---------- POV overlays: scoreboard, boss bars, titles, action bar ---------- */
.mc-sidebar { position: relative; }
.sb-title { position: absolute; left: 0; top: 0; height: 10px; background: rgba(0,0,0,.4); }
.sb-row { position: absolute; left: 0; height: 9px; background: rgba(0,0,0,.3); }
.mc-bossbars { position: relative; width: 182px; }
.mc-bar { position: absolute; left: 0; width: 182px; height: 5px; background-size: 182px 5px; image-rendering: pixelated; }
.mc-bar i { display: block; height: 5px; background-size: 182px 5px; background-repeat: no-repeat; image-rendering: pixelated; }
.mc-titles, .mc-actionbar { position: relative; }
.mc-big { position: absolute; transform-origin: 0 0; }
.hud-layer { position: absolute; z-index: 2; pointer-events: none; }
.hud-sidebar { right: 0; top: 50%; transform: translateY(-50%); }
.hud-boss { left: 50%; top: 4px; transform: translateX(-50%); }
.hud-title { left: 50%; top: 42%; transform: translate(-50%, -50%); }
.hud-action { left: 50%; transform: translateX(-50%); }
.pov-card.ui-open .hud-title, .pov-card.ui-open .hud-action { display: none; }

/* ---------- POV chat like the game ---------- */
.chat-bar { left: 0; right: 0; bottom: 0; }
.chat-input { position: absolute; inset: 0; opacity: 0; }
.chat-draw { position: relative; pointer-events: none; padding: 0 0 calc(var(--g, 2) * 2px) calc(var(--g, 2) * 2px); }
.mc-chat-input { position: relative; height: 12px; background: rgba(0,0,0,.5); }
.mc-chat-row { background: rgba(0,0,0,.5); }
.pov-body .chat-lines { bottom: calc(var(--g, 2) * 40px); }
/* chat is drawn over the hotbar, like the game */
.pov-body .chat-lines { z-index: 3; }

/* ---------- welcome: centred server cards, pick animation ---------- */
.welcome .carousel { width: fit-content; max-width: min(100%, calc(100vw - var(--sidebar-w) - 60px)); margin: 0 auto; }
.preset { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.preset:hover { transform: translateY(-2px); }
.preset.picked { border-color: var(--green); animation: preset-pop .5s cubic-bezier(.3, 1.6, .5, 1) forwards; box-shadow: 0 0 0 1px var(--green), 0 0 24px rgba(34, 209, 123, .45); }
@keyframes preset-pop {
  0% { transform: scale(1); }
  35% { transform: scale(.92); }
  100% { transform: scale(1.08); }
}
.confetti-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10000; }
@media (prefers-reduced-motion: reduce) { .preset, .preset.picked { animation: none; transition: none; } }

/* ---------- welcome: server cards like minecraftafk.com ---------- */
.welcome .carousel { gap: 16px; padding: 18px 8px; scroll-snap-type: x proximity; }
.welcome .carousel.overflowing { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.preset { width: 190px; height: 140px; border-radius: 8px; border: 1px solid rgba(255,255,255,.13); background: #111114; gap: 3px; scroll-snap-align: center; }
.preset::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--panel-2) 35%, transparent), color-mix(in srgb, var(--panel-2) 80%, transparent)); pointer-events: none; }
.preset .bg { inset: -30px; background-size: 46px; opacity: .2; filter: saturate(.8); }
.preset img, .preset .favicon { width: 48px; height: 48px; border-radius: 8px; z-index: 1; }
.preset strong { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--text); z-index: 1; }
.preset span:not(.bg):not(.favicon) { font-size: 12.5px; color: #9a9aa3; z-index: 1; }
.preset .favicon.ph { font-size: 20px !important; }
.welcome { grid-template-columns: minmax(0, 1fr); }
.welcome .carousel { max-width: 100%; }
/* the server row is moved by dragging, not with the wheel or a scrollbar */
.welcome .carousel { overflow-x: hidden; scroll-snap-type: none; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.welcome .carousel.dragging { cursor: grabbing; }
.welcome .carousel.dragging .preset { pointer-events: none; }
.welcome .carousel img { -webkit-user-drag: none; }
/* draggable server row: the track inside is moved with a transform */
.welcome .carousel { display: block; padding: 18px 0; overflow: hidden; }
.welcome .preset-track { display: flex; gap: 16px; width: max-content; padding: 0 8px; will-change: transform; }
/* smoother dragging: cheap edge fades (overlays instead of a mask) and no per-card filters,
   so moving the row doesn't repaint every card */
.welcome .carousel, .welcome .carousel.overflowing { -webkit-mask-image: none; mask-image: none; position: relative; }
.welcome .carousel::before, .welcome .carousel::after { content: ''; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; }
.welcome .carousel::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.welcome .carousel::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.welcome .carousel.overflowing::before, .welcome .carousel.overflowing::after { opacity: 1; }
.welcome .preset { contain: paint; transform: translateZ(0); backface-visibility: hidden; }
.welcome .preset .bg { filter: none; }
.welcome .preset:hover { transform: translate3d(0, -2px, 0); }
.welcome .carousel.dragging .preset { transition: none; }
/* server cards 10% bigger */
.welcome .preset { width: 209px; height: 154px; border-radius: 9px; }
.welcome .preset .bg { background-size: 51px; }
.welcome .preset img, .welcome .preset .favicon { width: 53px !important; height: 53px !important; border-radius: 9px; }
.welcome .preset strong { margin-top: 11px; font-size: 16.5px; }
.welcome .preset span:not(.bg):not(.favicon) { font-size: 13.75px; }
.welcome .preset .favicon.ph { font-size: 22px !important; }
.welcome .preset-track { gap: 18px; }

/* red warning box in the delete-server dialog */
.danger-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(248,113,113,.28); background: rgba(127,29,29,.25); color: var(--red); }
.danger-alert .i { flex: none; margin-top: 2px; }
.danger-alert div { display: flex; flex-direction: column; gap: 2px; }
.danger-alert strong { font-weight: 600; }
.btn.danger:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.delete-server { font-size: 14.5px; }
.delete-server .danger-alert { font-size: 14px; }

/* admin: machine stats */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel-2, var(--panel-2)); }
.stat strong { font-size: 20px; font-weight: 700; }
.stat.warn { border-color: rgba(248,113,113,.4); }
.stat.warn strong { color: var(--red); }
.stat strong { white-space: nowrap; font-size: clamp(16px, 1.5vw, 20px); }
.modal .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.modal .stat strong { font-size: 17px; }

/* admin: public address for invite links */
.public-url { gap: 10px; align-items: center; margin: 0 0 12px; }
.public-url input { flex: 1; max-width: 360px; }

/* balances window */
.balance-total { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; margin: 12px 0; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
.balance-total strong { font-size: 26px; font-weight: 700; color: var(--green); }

/* macro editor: which accounts run the macro */
.acc-pick { position: relative; }
.acc-pick-btn { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; min-width: 190px; justify-content: space-between; border-radius: 6px; border: 1px solid var(--border-2); background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; }
.acc-pick-btn:hover { border-color: var(--green); }
.acc-pick-btn.warn { border-color: rgba(248,113,113,.5); color: var(--red); }
.acc-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; width: 260px; padding: 6px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel); box-shadow: var(--shadow); }
.acc-pop input#acc-search { width: 100%; height: 30px; margin-bottom: 4px; }
.acc-list { max-height: 260px; overflow-y: auto; }
.acc-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: pointer; }
.acc-row:hover { background: var(--panel-3); }
.acc-row.acc-all { font-weight: 600; border-bottom: 1px solid var(--border); border-radius: 5px 5px 0 0; margin-bottom: 2px; }

/* macro editor: freely placed nodes joined by curves */
.world.free-world, .world { display: block; padding: 0; }
.node.free { position: absolute; cursor: grab; user-select: none; }
.node.free.dragging { cursor: grabbing; box-shadow: 0 12px 30px rgba(0,0,0,.45); z-index: 5; }
.canvas.moving-node { cursor: grabbing; }
.node.free .port { position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--border-2); background: #0a0a0c; }
.node.free .port.in { left: -7px; }
.node.free .port.out { right: -7px; }
.node.free.trigger .port.in { display: none; }
.node.free.sel .port { border-color: var(--green); }
.free-group { position: absolute; border: 1px dashed var(--border-2); border-radius: 12px; pointer-events: none; }
.free-group .stop-pill { pointer-events: auto; }
.free-stops { position: absolute; width: 300px; }
svg.edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
svg.edges path { fill: none; stroke: var(--border-2); stroke-width: 2; }
svg.edges path.green { stroke: var(--green); }
#plus-layer .add-node { position: absolute; z-index: 3; }

/* chat page: spam messages */
.spam-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.spam-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); }
.spam-row.off { opacity: .55; }
.spam-row.dragging { opacity: .4; }
.spam-row .grip { cursor: grab; color: var(--muted); display: inline-flex; }
.spam-next { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.spam-add { width: 100%; height: 44px; border: 1px dashed var(--border-2); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; }
.spam-add:hover { color: var(--text); border-color: var(--green); }

.spam-next { cursor: default; padding: 2px 4px; border-radius: 5px; }
.spam-next:hover { background: var(--panel-3); }
.spam-tip { position: fixed; z-index: 2000; min-width: 190px; max-width: 280px; max-height: 320px; overflow-y: auto; padding: 8px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel); box-shadow: var(--shadow); font-size: 12px; pointer-events: none; }
.spam-tip-head { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin: 0 2px 6px; }
.spam-tip-row { display: flex; align-items: center; gap: 8px; padding: 3px 2px; }

/* webhook editor: Discord message settings and a Discord-style preview */
.hook-msg { border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.hook-msg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 0 2px; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.hook-msg-head .i { transform: rotate(180deg); transition: transform .15s; }
.hook-msg.closed .hook-msg-head .i { transform: none; }
.hook-msg.closed .hook-msg-body { display: none; }
.hook-msg-body { display: flex; flex-direction: column; gap: 10px; }
.hook-color { display: flex; gap: 6px; align-items: center; }
.hook-color input[type=color] { width: 34px; height: 34px; padding: 2px; border-radius: 6px; flex: none; }
.hook-color input[name=color] { flex: 1; }
.hook-insert { gap: 6px; align-items: center; }
.hook-insert .chip { font-family: ui-monospace, monospace; font-size: 11px; cursor: pointer; }
.hook-preview-wrap { display: flex; flex-direction: column; gap: 6px; }
.sm-select { height: 28px; font-size: 12px; width: auto; }
.dc-preview { display: flex; gap: 14px; padding: 14px 16px; border-radius: 8px; background: #313338; color: #dbdee1; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.375; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; object-fit: cover; background: #1e1f22; image-rendering: pixelated; }
.dc-main { min-width: 0; flex: 1; }
.dc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.dc-name { color: #f2f3f5; font-weight: 600; }
.dc-app { background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; }
.dc-time { color: #949ba4; font-size: 12px; }
.dc-content { margin-bottom: 4px; }
.dc-mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-embed { max-width: 520px; background: #2b2d31; border-left: 4px solid #f1c40f; border-radius: 4px; padding: 8px 16px 10px 12px; }
.dc-author { display: flex; align-items: center; gap: 8px; color: #f2f3f5; font-size: 14px; font-weight: 600; margin: 2px 0 6px; }
.dc-author img { width: 24px; height: 24px; border-radius: 50%; image-rendering: pixelated; }
.dc-desc { font-size: 14px; word-wrap: break-word; }
.dc-desc .dc-h1 { font-size: 24px; font-weight: 700; color: #f2f3f5; margin: 6px 0 2px; }
.dc-desc .dc-h2 { font-size: 20px; font-weight: 700; color: #f2f3f5; margin: 6px 0 2px; }
.dc-desc .dc-h3 { font-size: 16px; font-weight: 700; color: #f2f3f5; margin: 6px 0 2px; }
.dc-desc ul { margin: 2px 0; padding-left: 20px; }
.dc-desc code { background: #1e1f22; border-radius: 3px; padding: 0 3px; font-size: 85%; font-family: Consolas, "Andale Mono", monospace; }
.dc-desc .dc-quote { border-left: 4px solid #4e5058; padding-left: 10px; }
.dc-desc .dc-gap { height: 6px; }
.dc-desc a { color: #00a8fc; }
.dc-emoji { width: 1.375em; height: 1.375em; vertical-align: bottom; object-fit: contain; }
.dc-desc .dc-h1 .dc-emoji, .dc-desc .dc-h2 .dc-emoji { width: 1.2em; height: 1.2em; }
.dc-foot { color: #b5bac1; font-size: 12px; margin-top: 8px; }

/* coinflip page */
.cf-plus { color: var(--online); font-weight: 600; }
.cf-minus { color: var(--red); font-weight: 600; }
.cf-auto { gap: 16px; align-items: start; }
.cf-accounts { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; max-height: 160px; overflow-y: auto; }
.cf-accounts .check { gap: 6px; align-items: center; }

/* accounts: skin & cape */
.sk-layout { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.sk-preview { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #2a2a30, var(--panel-2)); }
.sk-views { display: flex; gap: 28px; justify-content: center; }
.sk-figure { position: relative; }
.sk-part, .sk-cape { position: absolute; background-repeat: no-repeat; image-rendering: pixelated; }
.sk-cape { position: relative; border-radius: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.sk-h { font-size: 14px; margin: 0 0 8px; }
.sk-capes { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.sk-cape-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 8px; border: 2px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; font: inherit; font-size: 11px; min-width: 0; }
.sk-cape-tile:hover { border-color: var(--border-2); }
.sk-cape-tile.on { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); }
.sk-cape-tile span { max-width: 100%; }
.sk-none { width: 50px; height: 80px; display: grid; place-items: center; background: var(--panel-3); color: var(--muted); }
@media (max-width: 760px) { .sk-layout { grid-template-columns: 1fr; } }
.sk-side input[type=radio] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--green); }
.sk-side .check { white-space: nowrap; gap: 8px; align-items: center; }

/* skin & cape: 3D view like the launcher */
.sk-layout { grid-template-columns: 320px 1fr; }
.sk-preview { padding: 12px; gap: 10px; }
.sk-stage { position: relative; width: 100%; height: 420px; border-radius: 8px; overflow: hidden; background: #8cb8f7 url('/textures/skin-bg.png') center bottom / cover no-repeat; image-rendering: pixelated; cursor: grab; }
.sk-stage:active { cursor: grabbing; }
.sk-stage canvas { display: block; width: 100%; height: 100%; }
.sk-loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sk-anim { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sk-anim .chip { cursor: pointer; }
.sk-anim .chip.on { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
@media (max-width: 760px) { .sk-layout { grid-template-columns: 1fr; } }
.sk-side { min-width: 0; }
.sk-capes { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
/* skin & cape: fit the window without scrollbars */
.sk-side .row { flex-wrap: wrap; }
.sk-stage { height: clamp(240px, calc(100vh - 360px), 420px); }
.modal .sk-layout { overflow: hidden; }
.modal:has(.sk-layout) .modal-body { overflow-x: hidden; }
.sk-head-row { justify-content: space-between; align-items: center; margin: 16px 0 8px; }
.sk-side .sk-head-row { flex-wrap: nowrap; gap: 8px; }
.sk-head-row .row { flex-wrap: nowrap; }
.sk-head-row .btn.sm { padding: 0 7px; white-space: nowrap; }

/* ---------- theme: light mode, accent and greys (see js/theme.js) ---------- */
:root { --on-primary: #06130c; --shadow: 0 10px 30px rgba(0, 0, 0, .5); }
body, .sidebar, .main, .topbar, .panel, .modal, input, select, textarea, .btn, .menu, .toast { transition: background-color .15s, border-color .15s, color .15s; }
[data-theme="light"] .modal-backdrop { background: rgba(15, 23, 42, .35); }
[data-theme="light"] .preset .bg { opacity: .14; }
[data-theme="light"] .badge { filter: saturate(1.2) brightness(.85); }
[data-theme="light"] .status-sub.red, [data-theme="light"] .cf-minus { color: #dc2626; }
[data-theme="light"] .cf-plus { color: var(--online); }
/* areas that show Minecraft itself (chat colours, the 3D view, the inventory) stay dark */
[data-theme="light"] .console, [data-theme="light"] .pov-card, [data-theme="light"] .inv-stage { color-scheme: dark; color: #f4f4f5; }

/* menus with submenus (user menu: Appearance, Theme Colors) */
.menu button .sub-arrow { margin-left: auto; color: var(--muted); display: inline-flex; }
.menu button .check-mark { margin-left: auto; color: var(--text); display: inline-flex; }
.menu button.open { background: var(--panel-3); }
.menu .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
[data-theme="light"] .toggle span { background: var(--faint); }
[data-theme="light"] .toggle span::after { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
[data-theme="light"] .toggle input:checked + span { background: var(--green); }

/* coinflip: if / else for the bet */
.cf-rule { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.cf-rule:not(.on) .cf-rule-body { display: none; }
.cf-rule-body { display: flex; flex-direction: column; gap: 8px; }
.cf-rule-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cf-rule-line input, .cf-rule-line select { height: 30px; }
.cf-if { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 5px; min-width: 64px; text-align: center; }
.cf-if.red { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.cf-if.green { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.cf-if-pad { min-width: 64px; }

/* coinflip: live status pill per account */
.cf-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; --c: var(--muted); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border-color: color-mix(in srgb, var(--c) 25%, transparent); font-variant-numeric: tabular-nums; }
.cf-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.cf-pill.busy { --c: #60a5fa; }
.cf-pill.making { --c: #22d3ee; }
.cf-pill.busy i, .cf-pill.wait i, .cf-pill.making i { animation: cf-pulse 1.1s ease-in-out infinite; }
.cf-pill.wait { --c: #fbbf24; }
.cf-pill.won { --c: var(--online); }
.badge.cf-win { background: color-mix(in srgb, var(--online) 14%, transparent); color: var(--online); }
/* own bet taken by another player: the coin is being flipped */
.cf-pill.taken { --c: #7dd3fc; }
.cf-pill.taken i { animation: cf-pulse 0.6s ease-in-out infinite; }
.cf-pill.lost, .cf-pill.offline { --c: var(--red); }
.cf-pill.paused { --c: #fb923c; }
/* the light colours darker on a light page */
[data-theme="light"] .cf-pill.making { --c: #0891b2; }
[data-theme="light"] .cf-pill.taken { --c: #0284c7; }
[data-theme="light"] .cf-pill.wait { --c: #ca8a04; }
[data-theme="light"] .cf-pill.paused { --c: #ea580c; }
.cf-pill.off { --c: var(--faint); }
@keyframes cf-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
/* online / offline keep green and red whatever the theme colour is */
:root { --online: #1fd17a; }
[data-theme="light"] { --online: #16a34a; }

/* spam: {balance} and send twice */
.spam-smart { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.spam-smart .field { margin: 0; }

/* chat games */
.cg-now { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); flex-wrap: wrap; }
.cg-q { font-family: ui-monospace, Consolas, monospace; font-size: 15px; font-weight: 600; }
.cg-kinds { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cg-known { max-height: 340px; overflow-y: auto; }
.cg-mono { font-family: ui-monospace, Consolas, monospace; }


/* POV: note on an account (yellow when it has one) */
.pov-note.has-note { color: var(--amber); }
.pov-note.has-note:hover { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
/* Connect Selected keeps green whatever the theme colour is (like Online; Disconnect stays red) */
.btn.connect { background: var(--online); color: #06130c; }

/* chat games: compact settings */
#settings.stack { gap: 12px; }
.cg-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.cg-set { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; cursor: help; }
.cg-n { height: 28px; padding: 0 6px; text-align: center; -moz-appearance: textfield; }
.cg-n::-webkit-inner-spin-button, .cg-n::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cg-label { font-size: 12px; font-weight: 600; color: var(--muted); cursor: help; margin-bottom: -6px; }
.cg-breaks { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.cg-breaks-body { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cg-breaks.off .cg-breaks-body { display: none; }

/* Microsoft sign-in needed: banner on every page */
.signin-banner { margin: 12px 24px 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--red) 10%, var(--panel)); display: flex; flex-direction: column; gap: 8px; }
.signin-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--red); }
.signin-head .muted { color: var(--muted); }
.signin-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.signin-code { font-size: 15px; letter-spacing: .08em; padding: 2px 8px; border-radius: 6px; background: var(--panel-3); }
@media (max-width: 760px) { .signin-banner { margin: 10px 12px 0; } }

/* segmented buttons (Today / 7 days / 30 days) */
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; }
.seg button.on { background: var(--panel-3); color: var(--text); }

/* earnings charts: categorical slots 1-3 of the validated palette, stepped per mode */
.earn-viz { --s1: #3987e5; --s2: #d95926; --s3: #199e70; }
[data-theme="light"] .earn-viz { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; }
.earn-chart { min-height: 220px; }
.earn-chart svg { display: block; max-width: 100%; }
.earn-grid { stroke: var(--border); stroke-width: 1; }
.earn-axis { fill: var(--faint); font-size: 11px; }
.earn-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.earn-cross.hidden, .earn-dot.hidden { display: none; }
.earn-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; font-size: 12px; color: var(--muted); }
.earn-legend span { display: inline-flex; align-items: center; gap: 6px; }
.earn-legend i, .earn-tip-row i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.earn-tip { position: fixed; z-index: 2000; min-width: 170px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--panel); box-shadow: var(--shadow); font-size: 12px; pointer-events: none; }
.earn-tip.hidden { display: none; }
.earn-tip-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.earn-tip-row span { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; color: var(--text); }

/* staff watch */
.staff-banner { margin: 12px 24px 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, #f59e0b 50%, transparent); border-radius: 10px; background: color-mix(in srgb, #f59e0b 12%, var(--panel)); display: flex; flex-direction: column; gap: 6px; }
.staff-banner strong { color: #f59e0b; }
@media (max-width: 760px) { .staff-banner { margin: 10px 12px 0; } }
.staff-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.staff-known { display: flex; flex-wrap: wrap; gap: 6px; }
.staff-known .badge { gap: 6px; height: 26px; }
.staff-known .icon-btn { width: 20px; height: 20px; }

/* chat games: pages of recent games */
.cg-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }

/* account health */
.hl-time { display: block; width: 180px; height: 14px; }
.hl-off { fill: var(--panel-3); }
.hl-on { fill: var(--green); }
.hl-bars { display: block; width: 120px; height: 22px; }
.hl-bar { fill: var(--amber); }
.hl-bar0 { fill: var(--border); }
.hl-warn-text { color: var(--amber); }
.hl-warning { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; margin-top: 6px; background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); }
.hl-warning .i { color: var(--amber); }
.hl-warning.serious { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.hl-warning.serious .i { color: var(--red); }
.hl-dot { color: var(--amber); display: inline-flex; }
.hl-dot.serious { color: var(--red); }

/* coinflip: if / else risk */
.cf-risk { margin-top: 8px; font-size: 12px; }
.cf-risk td, .cf-risk th { padding: 4px 8px; }

/* ---------- phones ---------- */
.show-m { display: none; }
@media (max-width: 900px) {
  /* tables scroll sideways inside their card (main.js puts every .table in a .table-wrap) */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* a heading with buttons: the text gets the whole line, the buttons go under it */
  .panel-head > div:first-child:not(:only-child) { flex: 1 1 100% !important; }
  /* columns may get narrower than their widest content instead of pushing the page wider */
  .grid-2, .move-layout { grid-template-columns: minmax(0, 1fr); }
  .grid-2 > *, .move-layout > *, .stack > * { min-width: 0; }
  .panel { min-width: 0; }
  .field input, .field select, .field textarea { max-width: 100%; }
  .cf-rule-line input:not([type="checkbox"]), .cf-rule-line select { max-width: 100%; min-width: 0; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .topbar { padding: 0 14px; }
  /* columns that are only details: not on phones */
  .hide-m { display: none; }
  .table th, .table td { padding-left: 6px; padding-right: 6px; }
  .cg-mono { font-size: 12px; overflow-wrap: break-word; }
  .show-m { display: inline !important; }
}

/* coinflip: one field per bet, + adds one */
.cf-bets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cf-bet { position: relative; display: inline-flex; }
/* horizontal ovals, as wide as the number (main width set by the page: the text plus room for the ×) */
.cf-bet input { min-width: 0; border-radius: 999px; padding-left: 12px; padding-right: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.cf-bet-x { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.cf-bet-x:hover { color: var(--red); background: var(--red-dim); border-radius: 50%; }
.cf-bet-add { width: 20px; height: 20px; padding: 0; line-height: 0; border-radius: 50%; background: #22c55e; color: #06130c; flex: none; }
.cf-bet-add:hover { background: #16a34a; color: #06130c; }
.cf-bet-add .i { width: 11px; height: 11px; display: block; margin: 0; }

/* proxies */
.px-origin { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; flex: none; }
.px-origin.native { background: rgba(249,115,22,.18); color: #fb923c; }
.px-origin.socks5 { background: rgba(139,92,246,.2); color: #a78bfa; }
.px-origin.http { background: rgba(34,197,94,.18); color: #4ade80; }
.px-details.hidden-text { filter: blur(5px); user-select: none; }
.px-table th .icon-btn { width: 22px; height: 22px; vertical-align: middle; }
.px-pin { color: var(--faint); }
.px-pin.on { color: var(--green); }
.px-default td { color: var(--muted); }
.input-icon { position: relative; display: block; }
.input-icon > .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon input { padding-left: 36px; width: 100%; }
.px-groups { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.px-group { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--panel-2); transition: border-color .12s, background .12s; }
.px-group.drop-here { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--panel-2)); }
.px-group-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.px-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; align-items: center; }
.px-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 4px; border-radius: 7px; background: var(--panel-3); border: 1px solid var(--border); cursor: grab; user-select: none; font-size: 13px; }
.px-chip:hover { border-color: var(--border-2); }
.px-chip.dragging { opacity: .4; }
.px-lock { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 5px; background: transparent; color: var(--faint); cursor: pointer; padding: 0; }
.px-lock:hover { background: var(--panel-2); color: var(--text); }
.px-lock.on { color: var(--amber); }
.px-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.px-dot.on { background: #22c55e; }

/* ---------- shop orders (admin): the customers order on afkservice.net ---------- */
.order-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.cust-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.order-acts { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.svc-table input { min-width: 0; }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.setup-steps { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.setup-steps code { padding: 2px 6px; border-radius: 4px; background: var(--panel-2); }
@media (max-width: 900px) {
  .order-row { flex-wrap: wrap; }
  .order-acts { width: 100%; justify-content: flex-start; }
}