:root {
  --b0: #07080c;
  --b1: #0c0e14;
  --b2: #11141c;
  --b3: #181c28;
  --b4: #222838;
  --br: #1e2436;
  --brh: #2c3450;
  --t0: #d8dce8;
  --t1: #9098b0;
  --t2: #5c6480;
  --t3: #3a4060;
  --ac: #00ff88;
  --acd: #00ff8810;
  --acm: #00ff8830;
  --acs: #00ff8860;
  --r: #ff2244;
  --rd: #ff224418;
  --y: #ffaa22;
  --font-mono: 'Share Tech Mono', monospace;
  --font-head: 'Exo 2', sans-serif;
  --ui-scale: 1;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--b0);
  color: var(--t0);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  zoom: var(--ui-scale);
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--br); }
::selection { background: var(--acm); }

input, textarea {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--b1);
  color: var(--t0);
  border: 1px solid var(--br);
  padding: 7px 10px;
  outline: none;
  width: 100%;
  transition: border .15s;
}
input:focus, textarea:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 1px var(--acd);
}
input::placeholder, textarea::placeholder { color: var(--t3); }
textarea { resize: none; }

button {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  padding: 6px 12px;
  background: var(--b3);
  color: var(--t1);
  transition: all .12s;
}
button:hover:not(:disabled) { background: var(--b4); color: var(--t0); }
button:disabled { opacity: .35; cursor: default; }
.ba { background: var(--ac) !important; color: var(--b0) !important; }
.ba:hover:not(:disabled) { filter: brightness(1.1); }
.bd { color: var(--r) !important; }
.bd:hover:not(:disabled) { background: var(--rd) !important; }
.full { width: 100%; }
.hd { font-family: var(--font-head); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.glow { text-shadow: 0 0 8px var(--acs), 0 0 20px var(--acd); }
.err { color: var(--r); font-size: 11px; padding: 5px 8px; background: var(--rd); border: 1px solid var(--r); margin-bottom: 10px; }
[hidden] { display: none !important; }

.noise {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scan {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.04) 2px, rgba(0,0,0,.04) 4px);
}

#login-screen {
  display: flex; align-items: center; justify-content: center; height: 100%;
  background: radial-gradient(ellipse at 50% 40%, #0e1018 0%, var(--b0) 70%);
}
#login-form {
  width: 340px; padding: 28px;
  border: 1px solid var(--br); background: var(--b1);
  box-shadow: 0 0 40px rgba(0,255,136,.03), inset 0 1px 0 var(--brh);
}
#login-form input { margin-bottom: 8px; }
#login-form button[type="submit"] { margin-top: 8px; padding: 9px 16px; font-size: 13px; letter-spacing: 3px; }
.login-title { font-size: 24px; color: var(--ac); text-align: center; letter-spacing: 6px; margin-bottom: 2px; }
.login-sub { text-align: center; font-size: 10px; color: var(--t3); letter-spacing: 3px; margin-bottom: 24px; }
.login-toggle { text-align: center; margin-top: 12px; font-size: 10px; letter-spacing: 2px; }
.login-toggle .link { color: var(--ac); cursor: pointer; opacity: .7; transition: opacity .15s; }
.login-toggle .link:hover { opacity: 1; text-decoration: underline; }

#app { display: flex; height: 100%; overflow: hidden; }

#rail {
  width: 52px; flex-shrink: 0;
  background: var(--b0); border-right: 1px solid var(--br);
  display: flex; flex-direction: column; align-items: center;
  padding-top: 7px; gap: 4px; overflow-y: auto;
}
.rail-btn {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 14px; font-weight: 700;
  background: var(--b3); color: var(--t2);
  border: 1px solid var(--br); padding: 0;
}
.rail-btn:hover { border-color: var(--brh); color: var(--t0); }
.rail-btn.active { background: var(--ac); color: var(--b0); border-color: var(--ac); }
.rail-action { background: var(--b1); font-weight: 300; font-size: 14px; color: var(--ac); }
.rail-action.dim { color: var(--t3); }
.rail-sep { width: 22px; border-top: 1px solid var(--br); margin: 2px 0; }
#btn-dm { font-size: 14px; }
.rail-btn i { pointer-events: none; }

#sidebar {
  width: 190px; flex-shrink: 0;
  background: var(--b1); border-right: 1px solid var(--br);
  display: flex; flex-direction: column;
}
#sidebar-header {
  padding: 10px 12px; border-bottom: 1px solid var(--br);
  cursor: pointer; min-height: 40px;
}
#sidebar-header .srv-name { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t0); }
#sidebar-header .srv-desc { font-size: 10px; color: var(--t3); margin-top: 1px; }
#sidebar-content { flex: 1; overflow-y: auto; padding: 6px 0; }
#sidebar-footer {
  padding: 6px 10px; border-top: 1px solid var(--br);
  font-size: 9px; color: var(--t3); opacity: 0.7;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
}
.side-label {
  display: flex; justify-content: space-between; align-items: center; padding: 3px 12px;
}
.side-label span { font-size: 9px; color: var(--t3); letter-spacing: 2px; }
.side-label button { padding: 0 3px; background: none; color: var(--t3); font-size: 14px; line-height: 1; }
.ch-btn, .dm-btn {
  display: flex; align-items: center; gap: 7px;
  width: 100%; text-align: left; padding: 4px 12px;
  background: none; text-transform: none; letter-spacing: 0;
  font-family: var(--font-mono); font-size: 12px; color: var(--t2);
  border-left: 2px solid transparent;
}
.ch-btn.active, .dm-btn.active { background: var(--b3); color: var(--ac); border-left-color: var(--ac); }
.dm-avatar {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--b4); border: 1px solid var(--br);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 10px; font-weight: 700; color: var(--t2);
  overflow: hidden;
}
.dm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-empty { padding: 16px 12px; font-size: 11px; color: var(--t3); }

#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 14px; border-bottom: 1px solid var(--br);
  background: var(--b2); flex-shrink: 0;
}
#topbar-left { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
#topbar-title { font-size: 13px; color: var(--t0); white-space: nowrap; }
#topbar-topic { font-size: 10px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbar-right { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
#topbar-me {
  display: flex; align-items: center; gap: 5px; cursor: pointer; padding: 2px 6px;
}
#topbar-me:hover { background: var(--b3); }
#topbar-me .me-avatar { width: 20px; height: 20px; border: 1px solid var(--br); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-family: var(--font-head); color: var(--t2); background: var(--b4); }
#topbar-me .me-avatar img { width: 100%; height: 100%; object-fit: cover; }
#topbar-me .me-name { font-size: 10px; color: var(--t3); font-family: var(--font-head); letter-spacing: 1px; }
.me-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  position: absolute; bottom: -1px; right: -1px;
  border: 1.5px solid var(--b2);
}
#btn-members, #btn-logout { font-size: 12px; padding: 3px 8px; }
#btn-notifs i, #btn-members i, #btn-logout i { pointer-events: none; }

#messages { flex: 1; overflow-y: auto; padding: 6px 0; display: flex; flex-direction: column; position: relative; }
#msg-list { display: flex; flex-direction: column; }
#load-more { align-self: center; font-size: 10px; color: var(--t3); background: none; margin: 6px; }
.empty-state { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--t3); font-size: 11px; }

.msg {
  display: flex; gap: 10px; padding: 5px 14px;
  border-left: 2px solid transparent;
  position: relative;
}
.msg.own { border-left-color: var(--acs); background: var(--acd); }
.msg:hover { background: rgba(255,255,255,.015); }
.msg.own:hover { background: var(--acm); }

.msg-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--b4); border: 1px solid var(--br);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--t2);
  cursor: pointer; overflow: hidden;
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg.own .msg-avatar { color: var(--ac); }
.msg-body { flex: 1; min-width: 0; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.msg-author {
  font-weight: 600; font-size: 12px; font-family: var(--font-head);
  cursor: pointer; transition: opacity .1s;
}
.msg-author:hover { opacity: .8; }
.msg-time { font-size: 10px; color: var(--t3); }
.msg-edited { font-size: 9px; color: var(--t3); }
.msg-text { color: var(--t1); word-break: break-word; white-space: pre-wrap; }
.inline-emote { height: 1.4em; vertical-align: middle; margin: 0 1px; }
.inline-emoji { font-size: 1.2em; vertical-align: middle; }

/* greentext */
.greentext { color: #789922; }

/* jumbo emojis */
.msg-jumbo .msg-text .inline-emote { height: 3.5em; }
.msg-jumbo .msg-text .inline-emoji { font-size: 1em; }
.msg-jumbo .msg-text { font-size: 2.5em; line-height: 1.8; }

/* ui scale settings */
#btn-settings { font-size: 12px; padding: 3px 8px; }
.settings-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.settings-row label { font-family: var(--font-head); font-size: 11px; color: var(--t1); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.settings-row input[type="range"] { flex: 1; accent-color: var(--ac); }
.settings-row .scale-val { font-family: var(--font-mono); font-size: 12px; color: var(--ac); min-width: 36px; text-align: right; }
.custom-css-editor {
  width: 100%; min-height: 120px; margin-top: 6px; padding: 8px;
  background: var(--b1); color: var(--t1); border: 1px solid var(--br); border-radius: 4px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  resize: vertical; tab-size: 2;
}

/* message grouping – continuation messages */
.msg-cont { padding-top: 0; padding-bottom: 0; }
.msg-gutter {
  width: 30px; flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: center;
}
.msg-time-hover {
  visibility: hidden; font-size: 9px; color: var(--t3);
  font-family: var(--font-head); padding-top: 3px;
}
.msg-cont:hover .msg-time-hover { visibility: visible; }
.msg-attachments { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.msg-attachments a.file-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px;
  background: var(--b3); border: 1px solid var(--br); color: var(--ac);
  text-decoration: none; font-size: 11px;
}
.msg-edit-row { display: flex; gap: 5px; align-items: flex-end; }
.msg-edit-row textarea { flex: 1; font-size: 12px; min-height: 28px; max-height: 200px; overflow-y: auto; rows: 1; }
.msg-edit-row button { font-size: 10px; padding: 3px 8px; }

.msg-reactions { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 3px; }
.reaction-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; background: var(--b3); border: 1px solid var(--br);
  font-size: 14px; cursor: pointer; color: var(--t2);
}
.reaction-badge:hover { border-color: var(--brh); }
.reaction-badge.mine { border-color: var(--acs); background: var(--acd); color: var(--ac); }
.reaction-badge img { width: 18px; height: 18px; }
.reaction-badge .r-count { font-family: var(--font-head); font-size: 12px; font-weight: 600; }
/* message toolbar – Discord-style hover actions */
.msg-toolbar {
  position: absolute; top: -12px; right: 10px;
  display: flex; gap: 1px;
  background: var(--b2); border: 1px solid var(--br);
  border-radius: 3px; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .1s;
  z-index: 10;
}
.msg:hover .msg-toolbar { opacity: 1; pointer-events: auto; }
.msg.editing .msg-toolbar { display: none !important; }
.msg-tb-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; background: none; border: none;
  color: var(--t3); font-size: 12px; cursor: pointer;
  padding: 0; text-transform: none; letter-spacing: 0;
}
.msg-tb-btn:hover { background: var(--b3); color: var(--t0); }
.msg-tb-btn.msg-tb-danger:hover { background: rgba(255,34,68,.15); color: var(--r); }

#composer { padding: 10px 14px; border-top: 1px solid var(--br); background: var(--b2); }
.composer-row { display: flex; gap: 6px; align-items: flex-end; }
#btn-attach { padding: 7px 10px; flex-shrink: 0; font-size: 14px; line-height: 1; color: var(--t2); }
#msg-input { flex: 1; min-height: 34px; max-height: 200px; padding: 7px 10px; overflow-y: auto; }
#btn-emote { padding: 7px 10px; flex-shrink: 0; font-size: 13px; color: var(--t2); background: none; }
#btn-send { padding: 7px 12px; flex-shrink: 0; letter-spacing: 2px; }
#attach-list { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.attach-tag {
  display: flex; align-items: center; gap: 5px; padding: 3px 7px;
  background: var(--b3); border: 1px solid var(--br); font-size: 11px;
}
.attach-tag .name { color: var(--t1); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-tag .size { color: var(--t3); }
.attach-tag button { padding: 0 3px; background: none; color: var(--r); font-size: 13px; line-height: 1; }

#members-panel {
  width: 170px; flex-shrink: 0;
  background: var(--b1); border-left: 1px solid var(--br);
  overflow-y: auto;
}
#members-panel.hidden-panel { display: none; }
.mem-group-label { font-size: 9px; color: var(--t3); padding: 8px 10px 2px; letter-spacing: 2px; text-transform: uppercase; }
.mem-btn {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left; padding: 3px 10px;
  background: none; text-transform: none; letter-spacing: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--t1);
  cursor: pointer;
}
.mem-btn:hover { color: var(--t0); background: var(--b2); }
.mem-avatar {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--b4); border: 1px solid var(--br);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 9px; font-weight: 700; color: var(--t2);
  overflow: hidden; position: relative;
}
.mem-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mem-status {
  width: 7px; height: 7px; position: absolute; bottom: -1px; right: -1px;
  border: 1.5px solid var(--b1);
}
.mem-status.online { background: var(--ac); }
.mem-status.idle { background: var(--y); }
.mem-status.dnd { background: var(--r); }
.mem-status.offline { background: var(--t3); }
.mem-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-role-dot { width: 6px; height: 6px; flex-shrink: 0; }

#profile-popup {
  position: fixed; z-index: 10000;
  width: 280px; max-height: calc(100vh / var(--ui-scale, 1) - 20px);
  background: var(--b2); border: 1px solid var(--br);
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  overflow: hidden; display: flex; flex-direction: column;
}
#profile-popup[hidden] { display: none; }
#pp-banner { height: 50px; }
#pp-avatar-wrap { position: relative; margin-top: -22px; margin-bottom: 6px; margin-left: 14px; margin-right: 14px; flex-shrink: 0; width: fit-content; }
#pp-body { padding: 0 14px 14px; overflow-y: auto; flex: 1; min-height: 0; }
#pp-avatar {
  width: 52px; height: 52px;
  background: var(--b4); border: 3px solid var(--b2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--t2);
  overflow: hidden;
}
#pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
#pp-status-dot {
  width: 12px; height: 12px; border-radius: 3px;
  position: absolute; bottom: 0; right: 0;
  border: 2.5px solid var(--b2);
}
#pp-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--t0); }
#pp-username { font-size: 11px; color: var(--t3); margin-bottom: 6px; }
#pp-bio { font-size: 11px; color: var(--t1); margin-bottom: 8px; border-top: 1px solid var(--br); padding-top: 8px; white-space: pre-wrap; word-break: break-word; }
#pp-bio:empty { display: none; }
#pp-roles { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
#pp-roles:empty { display: none; }
.pp-role-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border: 1px solid; font-size: 10px;
  font-family: var(--font-head); font-weight: 600; letter-spacing: .5px;
}
.pp-role-dot { width: 6px; height: 6px; }
#pp-meta { font-size: 10px; color: var(--t3); margin-bottom: 8px; }
#pp-actions { display: flex; flex-wrap: wrap; gap: 5px; }
#pp-actions button { flex: 1 1 auto; min-width: 0; font-size: 10px; padding: 5px 8px; white-space: nowrap; }

.status-picker {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px;
}
.status-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--b3); border: 1px solid transparent;
  font-size: 11px; color: var(--t1); cursor: pointer; text-align: left;
  font-family: var(--font-head); letter-spacing: .5px;
}
.status-opt:hover { border-color: var(--br); background: var(--b4); }
.status-opt.active { border-color: var(--ac); background: var(--b4); }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.online { background: var(--ac); }
.status-dot.idle { background: var(--y); }
.status-dot.dnd { background: var(--r); }
.status-dot.offline { background: var(--t3); }

#emote-picker {
  position: fixed; z-index: 800;
  width: 340px; height: 380px;
  background: var(--b2); border: 1px solid var(--br);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
#emote-picker-search {
  padding: 6px 8px; border-bottom: 1px solid var(--br);
}
#emoji-search {
  width: 100%; padding: 5px 8px; font-size: 12px;
  background: var(--b1); border: 1px solid var(--br); color: var(--t0);
}
#emoji-search:focus { border-color: var(--ac); }
#emote-picker-cats {
  display: flex; gap: 0; border-bottom: 1px solid var(--br);
  overflow-x: auto; flex-shrink: 0;
}
#emote-picker-cats::-webkit-scrollbar { height: 0; }
.epc-tab {
  flex-shrink: 0; width: 36px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--t2);
  padding: 0; transition: all .12s;
}
.epc-tab:hover { background: var(--b3); color: var(--t0); }
.epc-tab.active { border-bottom-color: var(--ac); color: var(--t0); }
#emote-picker-scroll {
  flex: 1; overflow-y: auto; padding: 4px 6px;
}
#emote-picker-grid {}
.ep-section-label {
  font-family: var(--font-head); font-weight: 700; font-size: 10px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--t2);
  padding: 8px 4px 4px; position: sticky; top: 0;
  background: var(--b2); z-index: 1;
}
.ep-emoji-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.emote-cell {
  width: 36px; height: 36px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; transition: background .1s;
}
.emote-cell:hover { background: var(--b4); border-color: var(--ac); }
.emote-cell img { width: 24px; height: 24px; }
.emote-cell .ep-emoji { font-size: 22px; line-height: 1; }
.ep-no-results {
  text-align: center; padding: 24px 10px; color: var(--t3); font-size: 11px;
}

#modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center;
}
#modal-box {
  background: var(--b2); border: 1px solid var(--br);
  padding: 20px; min-width: 320px; max-width: 500px; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
#modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
#modal-title { font-size: 14px; color: var(--ac); }
#modal-close { padding: 2px 6px; font-size: 10px; }
#modal-body input { margin-bottom: 6px; }
#modal-body .modal-note { font-size: 10px; color: var(--t2); margin-bottom: 6px; }
#modal-body .modal-info { font-size: 10px; color: var(--t3); margin-bottom: 4px; }
#modal-body .modal-err { color: var(--r); font-size: 11px; margin-top: 6px; margin-bottom: 4px; }
#modal-body .modal-row { display: flex; gap: 6px; }
#modal-body .modal-row input { flex: 1; }
#modal-body button.modal-action { width: 100%; margin-top: 10px; }
#modal-body .modal-actions { display: flex; gap: 6px; margin-top: 14px; }
#modal-body .modal-actions button { flex: 1; }

.ch-type-select { display: flex; gap: 6px; margin-bottom: 10px; }
.ch-type-opt {
  flex: 1; padding: 8px 4px; text-align: center; cursor: pointer;
  border: 1px solid var(--br); background: var(--b2); font-size: 11px;
  font-family: var(--font-head); letter-spacing: 1px; color: var(--t2);
  transition: border-color .15s, color .15s;
}
.ch-type-opt:hover { border-color: var(--brh); color: var(--t0); }
.ch-type-opt.active { border-color: var(--ac); color: var(--ac); background: var(--acd); }
.ch-type-icon { display: block; font-size: 16px; margin-bottom: 2px; line-height: 1.2; }

.ch-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; text-align: center; font-size: 11px; opacity: .7; }
.ch-icon i { font-size: 10px; }

.voice-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--t3); text-align: center; padding: 40px;
}
.voice-icon { font-size: 48px; margin-bottom: 12px; opacity: .5; color: var(--t2); }
.voice-label { font-family: var(--font-head); font-size: 16px; color: var(--t1); letter-spacing: 2px; margin-bottom: 8px; }
.voice-sub { font-size: 11px; line-height: 1.6; }

.voice-placeholder.seele-void {
  background: radial-gradient(ellipse 80% 60% at 50% 55%, #06081008 0%, #020306 50%, #000 100%);
  padding: 20px 20px 24px; overflow: hidden; position: relative;
}
.voice-placeholder.seele-void .voice-icon { font-size: 18px; margin-bottom: 4px; opacity: .15; }
.voice-placeholder.seele-void .voice-label { font-size: 10px; opacity: .3; letter-spacing: 4px; margin-bottom: 0; }

.seele-scene::after {
  content: ""; position: absolute; bottom: -20%; left: 50%;
  width: 120%; height: 40%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(15,20,50,.25) 0%, transparent 70%);
  pointer-events: none;
}

.seele-scene {
  flex: 1; display: flex; align-items: center; justify-content: center;
  perspective: 900px; width: 100%; min-height: 300px;
  position: relative;
}

.seele-ring {
  position: relative; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(18deg) rotateY(0deg);
  animation: seele-orbit 120s linear infinite;
}
@keyframes seele-orbit {
  from { transform: rotateX(18deg) rotateY(0deg); }
  to   { transform: rotateX(18deg) rotateY(360deg); }
}

.seele-monolith {
  width: 130px; height: 190px; position: relative;
  background: linear-gradient(180deg, #080a12 0%, #040610 60%, #03050c 100%);
  border: 1px solid #181d30;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 8px 12px; box-sizing: border-box;
  box-shadow:
    0 0 20px rgba(8,12,30,.9),
    0 0 50px rgba(4,6,18,.6),
    inset 0 0 30px rgba(0,0,0,.5);
}

.seele-monolith::before {
  content: ""; position: absolute; inset: 3px;
  border: 1px solid #10132008; pointer-events: none;
}

.seele-monolith::after {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(60,70,120,.2), transparent);
  pointer-events: none;
}

.seele-ring .seele-monolith {
  width: 130px; height: 190px;
}

.seele-tile {
  display: flex; gap: 24px; justify-content: center; align-items: center;
  flex: 1; width: 100%; padding: 20px 0;
}

.seele-monolith { animation: seele-pulse 6s ease-in-out infinite; }
.seele-ring .seele-monolith { animation: seele-pulse 6s ease-in-out infinite; }
@keyframes seele-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(8,12,30,.9), 0 0 50px rgba(4,6,18,.6), inset 0 0 30px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 25px rgba(12,18,45,.9), 0 0 60px rgba(6,10,28,.7), inset 0 0 35px rgba(0,0,0,.4); }
}

.seele-name {
  font-family: 'Coolvetica', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: #ff2244;
  text-shadow: 0 0 6px rgba(255,34,68,.6), 0 0 18px rgba(255,34,68,.3);
  text-align: center; width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; line-height: 1;
}

.seele-avatar {
  flex: 1; display: flex; align-items: center; justify-content: center;
  margin: 10px 0 8px;
}
.seele-avatar-inner {
  width: 52px; height: 52px; border-radius: 50%;
  background: #0a0d18; border: 2px solid #181d30;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-family: var(--font-head);
  font-size: 20px; font-weight: 700; color: #3a4268;
  box-shadow: 0 0 12px rgba(8,12,30,.8);
}
.seele-avatar-inner img { width: 52px; height: 52px; object-fit: cover; }

.seele-sound-only {
  font-family: 'Coolvetica', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase; color: #ff2244;
  text-shadow: 0 0 6px rgba(255,34,68,.6), 0 0 18px rgba(255,34,68,.3);
  text-align: center; line-height: 1;
}

.seele-icons {
  display: flex; gap: 6px; justify-content: center;
  margin-top: 6px; min-height: 14px;
}
.seele-icons i { font-size: 10px; color: var(--t3); }
.seele-icons i.muted { color: var(--r); }
.seele-icons i.deafened { color: var(--r); }
.seele-icons i.srv-muted { color: var(--y); }

.voice-controls { display: flex; gap: 8px; margin-top: 16px; }
.vc-btn {
  width: 40px; height: 40px; border-radius: 50%; background: var(--b4);
  border: 1px solid var(--br); color: var(--t1); font-size: 14px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.vc-btn:hover { background: var(--brh); color: var(--t0); }
.vc-btn.active { background: var(--rd); color: var(--r); border-color: var(--r); }
.vc-btn.danger { background: var(--rd); color: var(--r); border-color: var(--r); }
.vc-btn.danger:hover { background: var(--r); color: #fff; }
.vc-join-btn {
  margin-top: 16px; padding: 10px 24px; background: var(--acd);
  border: 1px solid var(--ac); color: var(--ac); font-family: var(--font-head);
  font-size: 13px; letter-spacing: 2px; cursor: pointer; border-radius: 4px;
  transition: background .15s;
}
.vc-join-btn:hover { background: var(--acm); }

.mention {
  background: rgba(0,255,136,.1); color: var(--ac); padding: 0 2px; border-radius: 2px;
  cursor: pointer; font-weight: 600;
}
.mention:hover { background: rgba(0,255,136,.2); text-decoration: underline; }
.mention-me { background: rgba(0,255,136,.2); }
.mention-role { background: rgba(255,255,255,.05); }
.mention-all { background: rgba(255,200,0,.1); color: var(--y, #f0c040); }

.msg.msg-mentioned { border-left-color: var(--y, #f0c040); background: rgba(255,200,0,.06); }
.msg.msg-mentioned:hover { background: rgba(255,200,0,.1); }

.ch-btn.unread .ch-icon { color: var(--t0); opacity: 1; }
.ch-btn.unread { color: var(--t0); font-weight: 600; }
.ch-unread-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--t1);
  margin-left: auto; flex-shrink: 0;
}
.ch-mention-badge {
  background: var(--r, #e03040); color: #fff; font-size: 9px; font-weight: 700;
  padding: 0 4px; border-radius: 8px; margin-left: auto; flex-shrink: 0;
  font-family: var(--font-head); min-width: 14px; text-align: center; line-height: 16px;
}
.ch-btn { display: flex; align-items: center; gap: 4px; }

#mention-dropdown {
  position: fixed; z-index: 900;
  background: var(--b2); border: 1px solid var(--br);
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
  max-height: 240px; overflow-y: auto;
}
.md-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; font-size: 12px;
  transition: background .1s;
}
.md-opt:hover, .md-opt.md-active { background: var(--b3); }
.md-icon { width: 16px; text-align: center; font-size: 11px; flex-shrink: 0; }
.md-label { color: var(--t0); font-weight: 600; }
.md-desc { color: var(--t3); font-size: 10px; margin-left: auto; }
.md-role-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

#emoji-autocomplete {
  position: fixed; z-index: 900;
  background: var(--b2); border: 1px solid var(--br);
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
  max-height: 200px; overflow-y: auto;
}
.ea-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; cursor: pointer; font-size: 12px;
  transition: background .1s;
}
.ea-opt:hover, .ea-opt.ea-active { background: var(--b3); }
.ea-emoji { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.ea-emoji img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
.ea-name { color: var(--t0); font-weight: 600; }
.ea-kw { color: var(--t3); font-size: 10px; margin-left: auto; }

#btn-notifs { position: relative; }
.badge {
  position: absolute; top: -4px; right: -6px;
  background: var(--r, #e03040); color: #fff; font-size: 8px; font-weight: 700;
  padding: 1px 4px; border-radius: 8px; font-family: var(--font-head);
  min-width: 12px; text-align: center; line-height: 13px;
}
#notif-panel {
  position: fixed; top: 40px; right: 60px; z-index: 800;
  width: 340px; max-height: 420px;
  background: var(--b2); border: 1px solid var(--br);
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
#notif-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--br);
}
#notif-header .hd { font-size: 11px; letter-spacing: 2px; }
#notif-read-all {
  font-size: 9px; color: var(--ac); background: none; border: none;
  cursor: pointer; letter-spacing: 1px; font-family: var(--font-head);
}
#notif-read-all:hover { text-decoration: underline; }
#notif-list { overflow-y: auto; flex: 1; }
.notif-item {
  padding: 8px 12px; border-bottom: 1px solid var(--br);
  cursor: pointer; transition: background .1s;
}
.notif-item:hover { background: var(--b3); }
.notif-item.unread { border-left: 2px solid var(--ac); }
.notif-author { font-size: 12px; color: var(--t0); font-weight: 600; }
.notif-type { font-weight: 400; color: var(--t2); }
.notif-ctx { font-size: 10px; color: var(--t3); margin-top: 1px; }
.notif-excerpt { font-size: 11px; color: var(--t2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: 9px; color: var(--t3); margin-top: 2px; }
.notif-empty { padding: 24px; text-align: center; color: var(--t3); font-size: 11px; }
#modal-body .modal-section { font-size: 10px; color: var(--t3); letter-spacing: 2px; text-transform: uppercase; margin: 12px 0 6px; }

.role-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--br); margin-bottom: 4px;
}
.role-item .role-color { width: 12px; height: 12px; flex-shrink: 0; }
.role-item .role-name { flex: 1; font-size: 12px; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-item .role-count { font-size: 10px; color: var(--t3); }
.role-item button { font-size: 9px; padding: 2px 6px; }

.mm-member-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--br); margin-bottom: 3px;
}
.mm-member-row:hover { background: var(--b2); }
.mm-member-info { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 0; width: 180px; }
.mm-member-text { display: flex; flex-direction: column; min-width: 0; }
.mm-member-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-member-username { font-size: 10px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-member-roles { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.mm-role-tag {
  font-size: 9px; padding: 1px 5px;
  border: 1px solid; border-radius: 3px;
  white-space: nowrap;
}
.mm-member-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mm-role-btn {
  flex-shrink: 0; font-size: 11px; padding: 3px 8px;
  background: transparent; border: 1px solid var(--br); color: var(--t2);
  cursor: pointer; transition: color .12s, border-color .12s;
}
.mm-role-btn:hover { color: var(--ac); border-color: var(--ac); }
.mm-mod-btn {
  flex-shrink: 0; font-size: 10px; padding: 3px 6px;
  background: transparent; border: 1px solid var(--br); color: var(--t3);
  cursor: pointer; transition: color .12s, border-color .12s;
  opacity: 0;
}
.mm-member-row:hover .mm-mod-btn { opacity: 1; }
.mm-mod-warn:hover { color: var(--y); border-color: var(--y); }
.mm-mod-kick:hover { color: var(--y); border-color: var(--y); }
.mm-mod-danger:hover { color: var(--r); border-color: var(--r); }

.cb {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
  background: var(--b1); border: 1px solid var(--br);
  transition: background .12s, border-color .12s;
}
.cb:hover { border-color: var(--brh); }
.cb.checked { background: var(--ac); border-color: var(--ac); }
.cb.checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--b0); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cb input { position: absolute; opacity: 0; width: 0; height: 0; }

.perm-group-title { font-size: 10px; color: var(--t2); letter-spacing: 1px; margin: 8px 0 3px; text-transform: uppercase; }
.perm-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.perm-row label { font-size: 11px; color: var(--t1); cursor: pointer; }
.perm-row .perm-desc { font-size: 10px; color: var(--t3); margin-left: 22px; }

.perm-tri { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.perm-tri-label { flex: 1; font-size: 11px; color: var(--t1); }
.perm-tri-btns { display: flex; gap: 0; flex-shrink: 0; }
.perm-tri-btn {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--b1); border: 1px solid var(--br); cursor: pointer;
  font-size: 10px; color: var(--t3); padding: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.perm-tri-btn:first-child { border-right: none; }
.perm-tri-btn:last-child { border-left: none; }
.perm-tri-btn:hover { background: var(--b3); }
.perm-tri-btn.allow-on { background: rgba(0,255,136,.15); border-color: var(--ac); color: var(--ac); }
.perm-tri-btn.deny-on { background: var(--rd); border-color: var(--r); color: var(--r); }
.perm-tri-btn.inherit-on { background: var(--b3); border-color: var(--brh); color: var(--t2); }

.override-editor { display: flex; gap: 0; min-height: 260px; }
.override-sidebar {
  width: 140px; flex-shrink: 0; border-right: 1px solid var(--br);
  overflow-y: auto; padding: 4px 0;
}
.override-main { flex: 1; overflow-y: auto; padding: 0 10px; }
.override-tab {
  display: flex; align-items: center; gap: 5px;
  width: 100%; text-align: left; padding: 4px 8px;
  background: none; text-transform: none; letter-spacing: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--t2);
  cursor: pointer; border: none; border-left: 2px solid transparent;
}
.override-tab:hover { background: var(--b3); color: var(--t0); }
.override-tab.active { background: var(--b3); color: var(--ac); border-left-color: var(--ac); }
.override-tab .ov-dot { width: 8px; height: 8px; flex-shrink: 0; }
.override-add-section { padding: 6px 8px; border-top: 1px solid var(--br); margin-top: 4px; }
.override-add-section select {
  width: 100%; font-family: var(--font-mono); font-size: 10px;
  background: var(--b1); color: var(--t1); border: 1px solid var(--br);
  padding: 3px 4px; outline: none;
}
.override-add-section select:focus { border-color: var(--ac); }

.cat-label {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px 2px; cursor: pointer;
}
.cat-label:hover .cat-name { color: var(--t1); }
.cat-name { font-size: 9px; color: var(--t3); letter-spacing: 2px; text-transform: uppercase; }
.cat-label .cat-toggle { font-size: 8px; color: var(--t3); transition: transform .15s; margin-right: 4px; }
.cat-label.collapsed .cat-toggle { transform: rotate(-90deg); }
.cat-channels { }
.cat-channels.collapsed { display: none; }

.role-badges { display: flex; gap: 3px; flex-shrink: 0; }
.role-badge {
  font-size: 8px; padding: 1px 4px;
  font-family: var(--font-head); letter-spacing: .5px;
  border: 1px solid var(--br); color: var(--t3);
}
.role-badge.on { border-color: var(--acs); color: var(--ac); background: var(--acd); }

#modal-box.wide { max-width: 600px; }

.emote-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 1px solid var(--br); margin: 2px;
}
.emote-item img { width: 20px; height: 20px; }
.emote-item .emote-label { font-size: 11px; color: var(--t1); }
.emote-item button { font-size: 9px; padding: 1px 5px; }
.emote-file-btn {
  font-size: 10px; padding: 4px 10px; cursor: pointer;
  border: 1px solid var(--br); background: var(--b2); color: var(--t2);
}
.emote-file-btn:hover { background: var(--b3); color: var(--t1); }

.inv-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.inv-item {
  border: 1px solid var(--br); padding: 8px 10px;
  background: var(--b1);
}
.inv-item-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.inv-code {
  font-family: var(--font-mono); font-size: 13px; color: var(--ac);
  letter-spacing: 1px;
}
.inv-status { font-size: 10px; letter-spacing: 1px; }
.inv-item-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 10px; color: var(--t3); margin-bottom: 6px;
}
.inv-item-actions { display: flex; gap: 6px; }
.inv-item-actions button { font-size: 10px; padding: 2px 8px; }
.inv-type-opt.active {
  border-color: var(--ac) !important; color: var(--ac) !important;
}
.inv-detail-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 11px; color: var(--t1); margin-bottom: 8px;
}
.inv-detail-label { color: var(--t3); text-transform: uppercase; font-size: 10px; letter-spacing: 1px; }
.inv-uses-list { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; }
.inv-use-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px; border: 1px solid var(--br); font-size: 11px; color: var(--t1);
}
.inv-use-user { color: var(--t0); }
.inv-use-time { color: var(--t3); font-size: 10px; }

.invite-preview-loading {
  text-align: center; padding: 24px; color: var(--t3);
  font-family: var(--font-head); letter-spacing: 2px; font-size: 11px;
}
.invite-preview-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 16px; border: 1px solid var(--br); background: var(--b1);
  text-align: center;
}
.invite-preview-icon { margin-bottom: 12px; }
.invite-preview-img {
  width: 64px; height: 64px; object-fit: cover; border: 2px solid var(--br);
}
.invite-preview-icon-placeholder {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: var(--b3); border: 2px solid var(--br); color: var(--t2);
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
}
.invite-preview-title {
  font-family: var(--font-head); font-size: 16px; font-weight: 700;
  color: var(--t0); letter-spacing: 1px; margin-bottom: 4px;
}
.invite-preview-desc {
  font-size: 12px; color: var(--t2); margin-bottom: 8px; line-height: 1.4;
  max-width: 280px;
}
.invite-preview-server {
  font-size: 11px; color: var(--t1); letter-spacing: 1px;
  font-family: var(--font-head);
}
.invite-preview-members {
  font-size: 10px; color: var(--t3); margin-top: 4px;
  display: flex; align-items: center;
}
.invite-preview-invalid {
  text-align: center; padding: 8px; margin-top: 8px;
  background: var(--rd); border: 1px solid var(--r);
  color: var(--r); font-size: 11px;
}
.invite-preview-member {
  text-align: center; padding: 8px; margin-top: 8px;
  background: var(--acd); border: 1px solid var(--acs);
  color: var(--ac); font-size: 11px;
}

#ctx-menu {
  position: fixed; z-index: 2000;
  background: var(--b2); border: 1px solid var(--br);
  min-width: 150px; padding: 3px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
#ctx-menu button {
  display: block; width: 100%; text-align: left;
  padding: 5px 12px; background: none; text-transform: none;
  letter-spacing: 0; font-family: var(--font-mono); font-size: 12px; color: var(--t1);
}
#ctx-menu button:hover { background: var(--b3); }
#ctx-menu button.danger { color: var(--r); }
#ctx-menu .ctx-sep { border-top: 1px solid var(--br); margin: 3px 0; }

.totp-status {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 11px;
  font-family: var(--font-head); letter-spacing: 1px;
}
.totp-status i { font-size: 13px; }
.totp-on { background: var(--acd); color: var(--ac); border: 1px solid var(--acs); }
.totp-off { background: var(--b3); color: var(--t2); border: 1px solid var(--br); }

.totp-qr-wrap {
  display: flex; justify-content: center; padding: 12px 0 8px;
}
.totp-qr-wrap canvas {
  border: 3px solid var(--br); background: var(--b2);
  image-rendering: pixelated;
}

.totp-secret-box {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: var(--b3); border: 1px solid var(--br);
  margin-bottom: 6px;
}
.totp-secret-box code {
  flex: 1; font-family: var(--font-mono); font-size: 12px;
  color: var(--ac); letter-spacing: 1.5px; word-break: break-all;
  user-select: all;
}

#totp-gate {
  border-top: 1px solid var(--br); background: var(--b2);
}
.totp-gate-inner {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 20px; text-align: center;
}
.totp-gate-icon {
  font-size: 24px; color: var(--y); margin-bottom: 8px;
}
.totp-gate-text {
  font-family: var(--font-head); font-size: 12px;
  color: var(--t1); letter-spacing: 1px; margin-bottom: 4px;
}
.totp-gate-sub {
  font-size: 11px; color: var(--t3); margin-bottom: 2px;
}
.totp-gate-row {
  display: flex; gap: 6px; margin-top: 8px; width: 100%; max-width: 280px;
}
.totp-gate-row input { flex: 1; text-align: center; letter-spacing: 4px; font-size: 15px; }
.totp-gate-row button { flex-shrink: 0; }

#totp-code {
  text-align: center; letter-spacing: 6px; font-size: 16px;
  margin-bottom: 8px;
}

.center-brand { text-align: center; }
.center-brand .hd { font-size: 20px; color: var(--ac); letter-spacing: 6px; margin-bottom: 6px; }
.center-brand .sub { font-size: 11px; color: var(--t3); letter-spacing: 1px; }

#jump-to-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 16px; cursor: pointer;
  background: var(--ac); color: var(--b0);
  font-family: var(--font-head); font-size: 11px; letter-spacing: 1px;
  z-index: 10;
  transition: transform .2s, opacity .2s;
}
#jump-to-bottom:hover { filter: brightness(1.15); }
#jump-to-bottom i { font-size: 10px; }
#jump-count {
  background: var(--b0); color: var(--ac);
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px;
  min-width: 14px; text-align: center; line-height: 14px;
}

.dm-btn { display: flex; align-items: center; gap: 6px; position: relative; }
.dm-unread-badge {
  background: var(--r, #e03040); color: #fff; font-size: 9px; font-weight: 700;
  padding: 0 4px; border-radius: 8px; margin-left: auto; flex-shrink: 0;
  font-family: var(--font-head); min-width: 14px; text-align: center; line-height: 16px;
}
.dm-btn.unread .dm-name { color: var(--t0); font-weight: 700; }
#btn-dm { position: relative; }
.dm-rail-badge {
  position: absolute; bottom: -2px; right: -2px;
  background: var(--r, #e03040); color: #fff; font-size: 7px; font-weight: 700;
  padding: 0 3px; border-radius: 6px; min-width: 10px; text-align: center;
  line-height: 12px; font-family: var(--font-head);
}

.audit-filters { margin-bottom: 10px; }
.audit-filter-row {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.audit-select {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--b1); color: var(--t0);
  border: 1px solid var(--br); padding: 5px 8px;
  outline: none; flex: 1; min-width: 120px;
  cursor: pointer; appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235c6480'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.audit-select:focus { border-color: var(--ac); }
.audit-select option { background: var(--b2); color: var(--t0); }
.audit-select optgroup { color: var(--t2); font-style: normal; }

.audit-entries {
  max-height: 50vh; overflow-y: auto; margin-bottom: 8px;
  border: 1px solid var(--br); background: var(--b1);
}
.audit-loading, .audit-empty {
  padding: 24px; text-align: center;
  color: var(--t3); font-size: 11px;
}
.audit-entry {
  padding: 10px 12px; border-bottom: 1px solid var(--br);
  transition: background .1s;
}
.audit-entry:last-child { border-bottom: none; }
.audit-entry:hover { background: var(--b2); }
.audit-entry-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.audit-actor {
  display: flex; align-items: center; gap: 6px;
}
.audit-actor img, .audit-actor .av-circle {
  width: 22px; height: 22px; flex-shrink: 0;
}
.audit-actor-name {
  font-size: 12px; font-weight: 600; color: var(--t0);
  font-family: var(--font-head);
}
.audit-time {
  font-size: 10px; color: var(--t3); flex-shrink: 0;
  font-family: var(--font-mono);
}
.audit-entry-body {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--t1); margin-bottom: 2px;
}
.audit-action-label {
  color: var(--t0); font-weight: 500;
}
.audit-target-badge {
  font-size: 9px; padding: 1px 5px;
  font-family: var(--font-head); letter-spacing: .5px;
  text-transform: uppercase;
  border: 1px solid var(--acs); color: var(--ac);
  background: var(--acd);
}
.audit-target-id {
  font-size: 10px; color: var(--t3);
  font-family: var(--font-mono);
}
.audit-changes {
  margin-top: 4px; padding: 5px 8px;
  background: var(--b0); border: 1px solid var(--br);
  font-size: 11px; line-height: 1.6;
}
.audit-change-key {
  color: var(--t2); font-family: var(--font-mono);
  font-size: 10px;
}
.audit-old {
  color: var(--r); text-decoration: line-through;
  opacity: .8;
}
.audit-new {
  color: var(--ac);
}
.audit-reason {
  margin-top: 3px; font-size: 10px; color: var(--t2);
  font-style: italic;
}
.audit-load-more {
  width: 100%; padding: 8px;
  font-family: var(--font-head); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase;
  background: var(--b2); color: var(--t2);
  border: none; border-top: 1px solid var(--br);
  cursor: pointer; transition: all .12s;
}
.audit-load-more:hover { background: var(--b3); color: var(--t0); }

.ch-btn.unread .ch-icon,
.ch-btn.unread { color: var(--t0); font-weight: 700; }
.ch-unread-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--t1); margin-left: auto; flex-shrink: 0;
}

.ch-slow-icon {
  font-size: 8px; color: var(--y, #e8b830); margin-left: 2px;
  opacity: .7; flex-shrink: 0;
}

#halt-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 16px;
  background: linear-gradient(90deg, rgba(224,48,64,.12), rgba(224,48,64,.06));
  border-bottom: 1px solid rgba(224,48,64,.25);
  color: var(--r, #e03040);
  font-family: var(--font-head); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase;
}
#halt-banner i { font-size: 12px; opacity: .8; }

.mod-action-btn {
  font-size: 9px !important; padding: 3px 8px !important;
  letter-spacing: .5px;
}
.mod-action-btn.mod-warn {
  border-color: var(--y, #e8b830) !important; color: var(--y, #e8b830) !important;
  background: rgba(232,184,48,.08) !important;
}
.mod-action-btn.mod-warn:hover { background: rgba(232,184,48,.18) !important; }
.mod-action-btn.mod-danger {
  border-color: var(--r, #e03040) !important; color: var(--r, #e03040) !important;
  background: rgba(224,48,64,.08) !important;
}
.mod-action-btn.mod-danger:hover { background: rgba(224,48,64,.18) !important; }

.mod-confirm-target {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 10px;
  background: var(--b3); border: 1px solid var(--br);
  font-family: var(--font-head); font-size: 14px;
  letter-spacing: 1px; color: var(--t0);
}
.mod-confirm-target i { font-size: 16px; color: var(--t2); }
.mod-confirm-danger { border-color: rgba(224,48,64,.3); background: rgba(224,48,64,.06); }
.mod-confirm-danger i { color: var(--r, #e03040); }
.mod-confirm-warn { border-color: rgba(232,184,48,.3); background: rgba(232,184,48,.06); }
.mod-confirm-warn i { color: var(--y, #e8b830); }
.mod-warn-text { color: var(--y, #e8b830); font-size: 10px; margin-top: 4px; }
.mod-danger-text { color: var(--r, #e03040); font-size: 10px; margin-top: 4px; }
.mod-danger-btn {
  background: var(--r, #e03040) !important; color: #fff !important;
  border: none !important; font-family: var(--font-head);
  letter-spacing: 1px; padding: 6px 16px; cursor: pointer;
  transition: filter .12s;
}
.mod-danger-btn:hover { filter: brightness(1.2); }
.mod-danger-btn:disabled { opacity: .5; }
.mod-warn-btn {
  background: var(--y, #e8b830) !important; color: var(--b0) !important;
  border: none !important; font-family: var(--font-head);
  letter-spacing: 1px; padding: 6px 16px; cursor: pointer;
  transition: filter .12s;
}
.mod-warn-btn:hover { filter: brightness(1.1); }
.mod-warn-btn:disabled { opacity: .5; }

.mod-scope-toggle {
  display: flex; gap: 0; margin-bottom: 8px;
}
.mod-scope-btn {
  flex: 1; padding: 6px 10px; background: var(--b1);
  border: 1px solid var(--br); color: var(--t2);
  font-family: var(--font-head); font-size: 10px;
  letter-spacing: 1px; cursor: pointer;
  transition: all .12s;
}
.mod-scope-btn:first-child { border-right: none; }
.mod-scope-btn.active {
  background: var(--acd, rgba(0,255,136,.08));
  border-color: var(--acs, rgba(0,255,136,.3));
  color: var(--ac);
}
.mod-channel-list {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; background: var(--b1); border: 1px solid var(--br);
  max-height: 150px; overflow-y: auto; margin-bottom: 8px;
}
.mod-ch-opt {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--t1); cursor: pointer;
  padding: 2px 4px;
}
.mod-ch-opt:hover { background: var(--b3); }
.mod-ch-opt input { accent-color: var(--ac); }

.mod-select {
  width: 100%; font-family: var(--font-mono); font-size: 12px;
  background: var(--b1); color: var(--t0);
  border: 1px solid var(--br); padding: 7px 10px;
  outline: none; margin-bottom: 8px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235c6480'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  padding-right: 24px; cursor: pointer;
}
.mod-select:focus { border-color: var(--ac); }

.mod-settings-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--b3); border: 1px solid var(--br);
  color: var(--t0); font-family: var(--font-head);
  font-size: 11px; letter-spacing: 1px; cursor: pointer;
  transition: all .12s; margin-bottom: 6px; text-transform: uppercase;
}
.mod-settings-btn:hover { background: var(--b4, var(--b2)); border-color: var(--ac); color: var(--ac); }
.mod-settings-btn i { font-size: 13px; color: var(--ac); }

.mod-tabs {
  display: flex; gap: 0; margin-bottom: 10px;
  border-bottom: 1px solid var(--br);
}
.mod-tab {
  flex: 1; padding: 8px 12px; background: none;
  border: none; border-bottom: 2px solid transparent;
  color: var(--t2); font-family: var(--font-head);
  font-size: 10px; letter-spacing: 1px; cursor: pointer;
  transition: all .12s; display: flex; align-items: center; gap: 5px;
  justify-content: center; text-transform: uppercase;
}
.mod-tab:hover { color: var(--t0); background: var(--b3); }
.mod-tab.active {
  color: var(--ac); border-bottom-color: var(--ac);
}
.mod-tab i { font-size: 11px; }

.mod-loading, .mod-empty {
  padding: 30px; text-align: center;
  color: var(--t3); font-size: 11px; font-style: italic;
}
.mod-empty i { font-size: 16px; display: block; margin-bottom: 6px; color: var(--ac); opacity: .6; }

.mod-list-header {
  padding: 6px 10px; font-size: 10px; color: var(--t2);
  letter-spacing: 1px; text-transform: uppercase;
  font-family: var(--font-head);
  border-bottom: 1px solid var(--br); background: var(--b1);
}
.mod-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-bottom: 1px solid var(--br);
  transition: background .1s;
}
.mod-list-item:hover { background: var(--b3); }
.mod-list-item:last-child { border-bottom: none; }
.mod-list-main { flex: 1; min-width: 0; }
.mod-list-name {
  font-size: 13px; font-weight: 600; color: var(--t0);
  font-family: var(--font-head);
}
.mod-list-id {
  font-size: 10px; color: var(--t3); margin-left: 6px;
  font-family: var(--font-mono);
}
.mod-list-reason {
  display: block; font-size: 10px; color: var(--t2);
  font-style: italic; margin-top: 2px;
}
.mod-list-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; flex-shrink: 0;
}
.mod-list-actor { font-size: 10px; color: var(--t3); }
.mod-list-time { font-size: 9px; color: var(--t3); font-family: var(--font-mono); }
.mod-list-action {
  font-size: 9px; padding: 4px 10px; flex-shrink: 0;
  background: var(--b1); border: 1px solid var(--br);
  color: var(--t1); font-family: var(--font-head);
  letter-spacing: .5px; cursor: pointer;
  transition: all .12s;
}
.mod-list-action:hover { border-color: var(--ac); color: var(--ac); }

.mod-ban-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--br);
  background: var(--b1);
}
.mod-ban-toolbar .mod-search-input { flex: 1; margin: 0; }
.mod-ban-count {
  font-size: 10px; color: var(--t3); white-space: nowrap;
  font-family: var(--font-head); letter-spacing: 1px;
  text-transform: uppercase;
}
.mod-ban-list { max-height: 50vh; overflow-y: auto; }
.mod-ban-details {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
}
.mod-ban-duration {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; padding: 1px 6px;
  background: var(--b1); border: 1px solid var(--br);
  font-family: var(--font-mono);
}
.mod-ban-duration i { font-size: 9px; }
.mod-ban-duration.permanent { color: var(--r, #e03040); }
.mod-ban-duration.timed { color: var(--y, #e8b830); }
.mod-ban-expiry {
  font-size: 9px; color: var(--t3); font-family: var(--font-mono);
}

.mod-to-scopes {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px;
}
.mod-to-scope {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; padding: 1px 6px;
  background: var(--b1); border: 1px solid var(--br);
  color: var(--t1); font-family: var(--font-mono);
}
.mod-to-exp { color: var(--y, #e8b830); font-size: 9px; }

.mod-search-form {
  padding: 8px 0; border-bottom: 1px solid var(--br);
  margin-bottom: 8px;
}
.mod-search-row {
  display: flex; gap: 6px; margin-bottom: 6px; align-items: center;
}
.mod-search-input {
  flex: 1; font-family: var(--font-mono); font-size: 12px;
  background: var(--b1); color: var(--t0);
  border: 1px solid var(--br); padding: 6px 10px;
  outline: none;
}
.mod-search-input:focus { border-color: var(--ac); }
.mod-date-group {
  display: flex; align-items: center; gap: 4px; flex: 1;
}
.mod-date-label {
  font-size: 9px; color: var(--t3); letter-spacing: 1px;
  font-family: var(--font-head); flex-shrink: 0;
}
.mod-date-group input[type="datetime-local"] {
  flex: 1; font-family: var(--font-mono); font-size: 11px;
  background: var(--b1); color: var(--t0);
  border: 1px solid var(--br); padding: 4px 6px;
  outline: none; min-width: 0;
  color-scheme: dark;
}
.mod-date-group input:focus { border-color: var(--ac); }
.mod-search-results {
  max-height: 40vh; overflow-y: auto; border: 1px solid var(--br);
  background: var(--b1);
}
.mod-search-count {
  padding: 6px 10px; font-size: 10px; color: var(--t2);
  font-family: var(--font-head); letter-spacing: 1px;
  border-bottom: 1px solid var(--br); background: var(--b2);
}
.mod-msg-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--br);
  transition: background .1s;
}
.mod-msg-item:hover { background: var(--b2); }
.mod-msg-item:last-child { border-bottom: none; }
.mod-msg-check { flex-shrink: 0; padding-top: 2px; }
.mod-msg-check input { accent-color: var(--ac); cursor: pointer; }
.mod-msg-body { flex: 1; min-width: 0; }
.mod-msg-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
}
.mod-msg-author {
  font-size: 12px; font-weight: 600; color: var(--t0);
  font-family: var(--font-head);
}
.mod-msg-channel {
  font-size: 10px; color: var(--t3); font-family: var(--font-mono);
}
.mod-msg-time {
  font-size: 9px; color: var(--t3); margin-left: auto;
  font-family: var(--font-mono);
}
.mod-msg-content {
  font-size: 11px; color: var(--t1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

.mod-bulk-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-top: 6px;
  background: var(--b3); border: 1px solid var(--br);
}
.mod-bulk-bar span { font-size: 11px; color: var(--t1); flex: 1; }

.mod-halt-panel {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px; text-align: center;
}
.mod-halt-icon {
  font-size: 36px; color: var(--t3); margin-bottom: 10px;
  opacity: .6;
}
.mod-halt-title {
  font-family: var(--font-head); font-size: 16px;
  letter-spacing: 3px; color: var(--t0); margin-bottom: 8px;
}
.mod-halt-desc {
  font-size: 11px; color: var(--t2); max-width: 400px;
  line-height: 1.6; margin-bottom: 14px;
}
.mod-halt-status {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-head); font-size: 12px;
  letter-spacing: 2px;
  border: 1px solid var(--acs, rgba(0,255,136,.3));
  background: var(--acd, rgba(0,255,136,.08));
  color: var(--ac);
}
.mod-halt-status.halted {
  border-color: rgba(224,48,64,.3);
  background: rgba(224,48,64,.08);
  color: var(--r, #e03040);
}
.mod-halt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac);
  animation: halt-pulse 2s infinite;
}
.mod-halt-status.halted .mod-halt-dot {
  background: var(--r, #e03040);
  animation: halt-pulse-red 1.5s infinite;
}
@keyframes halt-pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}
@keyframes halt-pulse-red {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

.mod-slowmode-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.mod-slowmode-row .mod-select { margin-bottom: 0; flex: 1; }
.mod-slowmode-hint {
  font-size: 10px; color: var(--t3); flex-shrink: 0;
}

/* mod-actions modal */
.ma-member-list {
  max-height: 340px; overflow-y: auto;
  border: 1px solid var(--br); background: var(--b1);
  margin-top: 8px;
}
.ma-member-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid var(--br);
  transition: background .1s;
}
.ma-member-row:last-child { border-bottom: none; }
.ma-member-row:hover { background: var(--b3); }
.ma-member-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ma-member-name { font-size: 12px; font-weight: 600; font-family: var(--font-head); }
.ma-member-uname { font-size: 10px; color: var(--t3); }
.ma-member-id { font-size: 9px; color: var(--t3); font-family: var(--font-mono); }
.ma-member-actions { display: flex; gap: 3px; flex-shrink: 0; }
.ma-member-actions .mod-action-btn {
  width: 26px; height: 22px; display: flex; align-items: center;
  justify-content: center; padding: 0 !important; font-size: 10px !important;
}
.ma-footer-btn {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; color: var(--t2); background: var(--b3);
  border: 1px solid var(--br); padding: 4px 10px;
  font-family: var(--font-head); letter-spacing: .5px;
  cursor: pointer; transition: all .12s;
}
.ma-footer-btn:hover { border-color: var(--ac); color: var(--ac); }
.ma-footer-btn i { font-size: 10px; }

#btn-mod {
  color: var(--t2); font-size: 13px; position: relative;
}
#btn-mod:hover { color: var(--ac); }

#magi-alerts {
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-height: 90vh;
  overflow: visible;
}

.magi-alert {
  position: relative;
  width: 340px;
  background: linear-gradient(180deg, #0a0c16 0%, #060810 60%, #04060c 100%);
  border: 1px solid rgba(255, 34, 68, .4);
  box-shadow:
    0 0 20px rgba(255, 34, 68, .08),
    0 0 60px rgba(255, 34, 68, .03),
    inset 0 0 40px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 34, 68, .1);
  pointer-events: auto;
  overflow: hidden;

  transform: scale(0.3, 0.1);
  opacity: 0;
  transform-origin: center center;
  transition: none;

  margin-top: calc(var(--magi-index, 0) * 2px);
}

.magi-alert.magi-expand {
  animation: magi-expand-in .4s cubic-bezier(.17, .67, .29, 1.02) forwards;
}

@keyframes magi-expand-in {
  0% {
    transform: scale(0.05, 0.02);
    opacity: 0;
    border-color: rgba(255, 34, 68, .8);
    box-shadow:
      0 0 40px rgba(255, 34, 68, .4),
      0 0 80px rgba(255, 34, 68, .15),
      inset 0 0 20px rgba(255, 34, 68, .1);
  }
  30% {
    transform: scale(1.05, 0.15);
    opacity: .6;
  }
  50% {
    transform: scale(0.98, 0.6);
    opacity: .8;
  }
  70% {
    transform: scale(1.02, 1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
    border-color: rgba(255, 34, 68, .4);
    box-shadow:
      0 0 20px rgba(255, 34, 68, .08),
      0 0 60px rgba(255, 34, 68, .03),
      inset 0 0 40px rgba(0, 0, 0, .5),
      inset 0 1px 0 rgba(255, 34, 68, .1);
  }
}

.magi-alert.magi-dismiss {
  animation: magi-collapse-out .25s cubic-bezier(.55, .06, .68, .19) forwards;
}

@keyframes magi-collapse-out {
  0% {
    transform: scale(1, 1);
    opacity: 1;
  }
  40% {
    transform: scale(1.02, 0.6);
    opacity: .7;
  }
  100% {
    transform: scale(0.05, 0.02);
    opacity: 0;
  }
}

.magi-alert.magi-flash {
  animation: magi-flash-pulse .5s ease-out;
}

@keyframes magi-flash-pulse {
  0% {
    border-color: rgba(255, 34, 68, .9);
    box-shadow: 0 0 40px rgba(255, 34, 68, .3), inset 0 0 20px rgba(255, 34, 68, .1);
  }
  100% {
    border-color: rgba(255, 34, 68, .4);
    box-shadow: 0 0 20px rgba(255, 34, 68, .08), inset 0 0 40px rgba(0, 0, 0, .5);
  }
}

.magi-alert.magi-warn {
  border-color: rgba(255, 170, 34, .35);
  box-shadow:
    0 0 20px rgba(255, 170, 34, .06),
    0 0 60px rgba(255, 170, 34, .02),
    inset 0 0 40px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 170, 34, .08);
}
.magi-alert.magi-warn .magi-verdict { color: var(--y); text-shadow: 0 0 8px rgba(255, 170, 34, .5); }
.magi-alert.magi-warn .magi-sys-label { color: var(--y); }
.magi-alert.magi-warn .magi-light.active { background: var(--y); box-shadow: 0 0 6px rgba(255, 170, 34, .6); }
.magi-alert.magi-warn .magi-corner { border-color: rgba(255, 170, 34, .3); }
.magi-alert.magi-warn .magi-scanline {
  background: linear-gradient(180deg, rgba(255, 170, 34, .04) 0%, transparent 100%);
}

.magi-alert.magi-critical {
  border-color: rgba(255, 34, 68, .6);
  box-shadow:
    0 0 30px rgba(255, 34, 68, .12),
    0 0 80px rgba(255, 34, 68, .05),
    inset 0 0 40px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 34, 68, .15);
  animation: magi-expand-in .4s cubic-bezier(.17, .67, .29, 1.02) forwards,
             magi-critical-pulse 2s ease-in-out 0.5s infinite;
}
.magi-alert.magi-critical.magi-dismiss {
  animation: magi-collapse-out .25s cubic-bezier(.55, .06, .68, .19) forwards;
}

@keyframes magi-critical-pulse {
  0%, 100% { border-color: rgba(255, 34, 68, .4); }
  50% { border-color: rgba(255, 34, 68, .7); }
}

.magi-scanline {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 34, 68, .03) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.magi-scanline::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0, 0, 0, .06) 2px,
    rgba(0, 0, 0, .06) 4px
  );
  pointer-events: none;
}

.magi-corner {
  position: absolute;
  width: 8px; height: 8px;
  border-color: rgba(255, 34, 68, .35);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 2;
}
.magi-corner-tl { top: 3px; left: 3px; border-top-width: 1px; border-left-width: 1px; }
.magi-corner-tr { top: 3px; right: 3px; border-top-width: 1px; border-right-width: 1px; }
.magi-corner-bl { bottom: 3px; left: 3px; border-bottom-width: 1px; border-left-width: 1px; }
.magi-corner-br { bottom: 3px; right: 3px; border-bottom-width: 1px; border-right-width: 1px; }

.magi-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px 2px;
  position: relative; z-index: 3;
}

.magi-sys-row {
  display: flex; align-items: center; gap: 8px;
}

.magi-sys-label {
  font-family: 'Coolvetica', var(--font-head);
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--r);
  text-shadow: 0 0 6px rgba(255, 34, 68, .5);
}

.magi-sys-num {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 400;
  opacity: .7;
}

.magi-lights {
  display: flex; gap: 3px;
}

.magi-light {
  width: 16px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 8px; font-weight: 700;
  color: var(--t3);
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(255, 255, 255, .06);
  letter-spacing: 0;
}

.magi-light.active {
  background: rgba(255, 34, 68, .2);
  border-color: rgba(255, 34, 68, .5);
  color: var(--r);
  box-shadow: 0 0 6px rgba(255, 34, 68, .4);
  animation: magi-light-blink 1.5s ease-in-out infinite;
}

@keyframes magi-light-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

.magi-close {
  background: none; border: none;
  color: var(--t3); font-size: 16px;
  cursor: pointer; padding: 0 2px;
  line-height: 1;
  font-family: var(--font-mono);
  transition: color .15s;
}
.magi-close:hover { color: var(--r); }

.magi-verdict {
  font-family: 'Coolvetica', var(--font-head);
  font-size: 9px; font-weight: 700;
  letter-spacing: 5px; text-transform: uppercase;
  color: var(--r);
  text-shadow: 0 0 8px rgba(255, 34, 68, .5), 0 0 20px rgba(255, 34, 68, .2);
  padding: 0 10px 4px;
  position: relative; z-index: 3;
  text-align: center;
}

.magi-body {
  padding: 4px 10px 6px;
  position: relative; z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, .04);
}

.magi-title {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--t0);
  margin-bottom: 2px;
}

.magi-detail {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--t2);
  line-height: 1.5;
  word-break: break-word;
}

.magi-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 10px 6px;
  position: relative; z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, .03);
}

.magi-role {
  font-family: var(--font-head);
  font-size: 8px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--t3);
}

.magi-timer {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 400;
  letter-spacing: 2px;
  color: var(--t1);
  text-shadow: 0 0 4px rgba(216, 220, 232, .2);
  min-width: 50px;
  text-align: right;
}

.magi-timer.magi-timer-urgent {
  color: var(--y);
  text-shadow: 0 0 8px rgba(255, 170, 34, .4);
  animation: magi-timer-flash .8s ease-in-out infinite;
}

.magi-timer.magi-timer-critical {
  color: var(--r);
  text-shadow: 0 0 10px rgba(255, 34, 68, .5);
  animation: magi-timer-flash .4s ease-in-out infinite;
}

@keyframes magi-timer-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* color picker swatch */
.color-swatch-wrap {
  position: relative; display: inline-flex; align-items: center; flex-shrink: 0;
}
.color-swatch-wrap input[type="color"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
  border: none; padding: 0;
}
.color-swatch {
  width: 26px; height: 26px; border: 1px solid var(--br);
  pointer-events: none; flex-shrink: 0;
  transition: border-color .12s;
}
.color-swatch-wrap:hover .color-swatch { border-color: var(--brh); }

/* ── YouTube embed cards ──────────────────────────────────── */
.yt-cards { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.yt-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--b3); border: 1px solid var(--br);
  text-decoration: none; color: var(--t0);
  max-width: 380px; overflow: hidden;
  transition: border-color .12s, background .12s;
}
.yt-card:hover { border-color: var(--brh); background: var(--b4); }
.yt-thumb {
  position: relative; flex-shrink: 0;
  width: 120px; height: 68px; overflow: hidden;
  background: var(--b1);
}
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff; font-size: 20px;
  opacity: 0; transition: opacity .15s;
}
.yt-card:hover .yt-play { opacity: 1; }
.yt-title {
  padding: 6px 10px 6px 0; font-size: 12px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--t0);
}

/* ── Message links ────────────────────────────────────────── */
.msg-link { color: var(--ac); text-decoration: none; word-break: break-all; }
.msg-link:hover { text-decoration: underline; }

/* ── Attachment images (clickable) ────────────────────────── */
.attach-img {
  cursor: pointer; display: inline-block;
  border: 1px solid var(--br); transition: border-color .12s;
  line-height: 0;
  position: relative; z-index: 10000;
}
.attach-img:hover { border-color: var(--brh); }
.attach-img img { max-width: 280px; max-height: 180px; display: block; }

/* ── Inline video player ──────────────────────────────────── */
.attach-video { max-width: 400px; }
.attach-video video {
  max-width: 100%; max-height: 300px; display: block;
  border: 1px solid var(--br); background: #000;
}

/* ── Media lightbox ───────────────────────────────────────── */
#media-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.88); cursor: pointer;
}
#media-lightbox[hidden] { display: none !important; }
#lightbox-img {
  max-width: 92vw; max-height: 90vh; object-fit: contain;
  cursor: default; user-select: none;
  box-shadow: 0 0 40px rgba(0,0,0,.6);
}
#lightbox-close {
  position: absolute; top: 12px; right: 16px; z-index: 2;
  background: rgba(0,0,0,.6); color: var(--t0); border: 1px solid var(--br);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; padding: 0;
}
#lightbox-close:hover { background: var(--b4); border-color: var(--brh); }
#lightbox-prev, #lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(0,0,0,.6); color: var(--t0); border: 1px solid var(--br);
  width: 40px; height: 56px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; padding: 0;
}
#lightbox-prev { left: 12px; }
#lightbox-next { right: 12px; }
#lightbox-prev:hover, #lightbox-next:hover { background: var(--b4); border-color: var(--brh); }
#lightbox-counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.7); color: var(--t1); padding: 4px 14px;
  font-size: 12px; font-family: var(--font-mono); border: 1px solid var(--br);
  pointer-events: none; user-select: none;
}

/* CSS safety warning */
.css-warn-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.css-warn-dialog {
  width: 380px; position: relative; margin: 0;
}
.css-warn-detail { white-space: pre-line; }
.css-warn-footer { flex-wrap: wrap; gap: 8px; }
.css-warn-btns {
  display: flex; gap: 6px; margin-left: auto;
}
.css-warn-cancel, .css-warn-ok {
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 14px; border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; transition: all .15s;
}
.css-warn-cancel {
  background: rgba(255,255,255,.04); color: var(--t2);
}
.css-warn-cancel:hover { background: rgba(255,255,255,.08); color: var(--t1); }
.css-warn-ok {
  background: rgba(255,170,34,.15); color: var(--y);
  border-color: rgba(255,170,34,.35);
}
.css-warn-ok:hover {
  background: rgba(255,170,34,.25);
  box-shadow: 0 0 10px rgba(255,170,34,.2);
}