:root {
  --bg: #0b0d14;
  --bg-soft: #12151f;
  --panel: #161a26;
  --panel-2: #1c2130;
  --border: #262c3d;
  --text: #e7e9f2;
  --text-dim: #9198b0;
  --accent: #7c6cff;
  --accent-2: #ff6cab;
  --good: #35d68a;
  --warn: #ffb84d;
  --bad: #ff5c72;
  --radius: 14px;
  font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(1200px 600px at 80% -10%, #201a3a 0%, var(--bg) 60%);
  color: var(--text);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ---------- top nav ---------- */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 21, 31, 0.75);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--text-dim); font-weight: 500; font-size: 0.95rem; transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform .1s, border-color .15s, background .15s;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #5a49e6); border: none; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { background: linear-gradient(135deg, var(--bad), #c73e52); border: none; }
.btn-good { background: linear-gradient(135deg, var(--good), #1f9d68); border: none; }
.btn-small { padding: 6px 12px; font-size: 0.8rem; border-radius: 8px; }

.avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); }

/* ---------- generic layout ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }
.hero { text-align: center; padding: 60px 20px 20px; }
.hero h1 { font-size: 2.4rem; margin: 0 0 8px; }
.hero p { color: var(--text-dim); font-size: 1.05rem; }

.stat-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 28px 0 44px; }
.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 26px;
  min-width: 150px;
  text-align: center;
}
.stat-card .num { font-size: 1.8rem; font-weight: 700; }
.stat-card .lbl { color: var(--text-dim); font-size: 0.85rem; margin-top: 4px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-dot.on { background: var(--good); box-shadow: 0 0 8px var(--good); }
.status-dot.off { background: var(--bad); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

.server-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color .15s, transform .1s;
}
.server-card:hover { border-color: var(--accent); }
.server-card img.icon, .server-card .icon-fallback {
  width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
  background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.server-card .name { font-weight: 600; }
.server-card .meta { color: var(--text-dim); font-size: 0.82rem; }

.badge { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.badge.trusted { background: rgba(53, 214, 138, 0.15); color: var(--good); }
.badge.banned { background: rgba(255, 92, 114, 0.15); color: var(--bad); }

/* ---------- login ---------- */
.login-wrap { display: flex; align-items: center; justify-content: center; min-height: 80vh; }
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 48px 44px; text-align: center; max-width: 380px;
}
.login-card h2 { margin-top: 0; }
.login-card .discord-btn {
  margin-top: 22px; background: #5865F2; color: white; border: none; padding: 12px 26px;
  border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; display: inline-flex; gap: 10px; align-items: center;
}
.login-card .note { margin-top: 18px; color: var(--text-dim); font-size: 0.82rem; }
.deny-msg { color: var(--bad); font-size: 0.9rem; margin-top: 12px; }

/* ---------- dashboard shell ---------- */
.dash-layout { display: flex; gap: 24px; align-items: flex-start; }

/* sliding side nav */
.side-nav {
  width: 230px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  position: sticky;
  top: 84px;
  transform: translateX(0);
  transition: transform .25s ease;
}
.side-nav.collapsed { transform: translateX(-110%); }
.side-nav button.nav-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text-dim); padding: 11px 14px; border-radius: 10px; font-size: 0.92rem;
  cursor: pointer; font-weight: 600; margin-bottom: 2px;
}
.side-nav button.nav-item:hover { background: var(--panel-2); color: var(--text); }
.side-nav button.nav-item.active { background: linear-gradient(135deg, var(--accent), #5a49e6); color: white; }

.dash-main { flex: 1; min-width: 0; }

.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; width: 360px; max-height: 70vh; overflow-y: auto;
}
.modal h3 { margin-top: 0; }

/* config cards */
.config-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; margin-bottom: 20px;
}
.config-card.active { display: block; }
.config-card h2 { margin-top: 0; font-size: 1.15rem; }
.field-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); gap: 16px; }
.field-row:last-child { border-bottom: none; }
.field-row label { font-weight: 600; font-size: 0.9rem; }
.field-row .hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 2px; }

select, input[type=number], input[type=text] {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: 8px; font-size: 0.88rem; min-width: 140px;
}

.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; transition: .2s;
}
.switch .slider::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: var(--text-dim); border-radius: 50%; transition: .2s;
}
.switch input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); background: white; }

.event-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.event-tabs button {
  flex: 1; padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text-dim); cursor: pointer; font-weight: 600; font-size: 0.85rem;
}
.event-tabs button.active { background: var(--accent); color: white; border-color: var(--accent); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); }

/* master panel */
.guild-table-row {
  display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 10px;
}
.guild-table-row img, .guild-table-row .icon-fallback { width: 40px; height: 40px; border-radius: 10px; }
.guild-table-row .info { flex: 1; min-width: 0; }
.guild-table-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .dash-layout { flex-direction: column; }
  .side-nav {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 90; border-radius: 0;
    width: 250px; transform: translateX(-110%);
  }
  .side-nav.open { transform: translateX(0); }
  
}

/* ---------- host media ---------- */
.ux [hidden],
.ux-queue[hidden] { display: none !important; }
.ux input[type=search] {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 12px;
  border-radius: 8px; font: inherit; font-size: 0.88rem; min-width: 140px;
}
.ux input[type=search]::placeholder { color: var(--text-dim); }
.ux input[type=search]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.ux select { font: inherit; font-size: 0.86rem; padding: 8px 10px; }
.ux-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.ux-top h1 { margin: 0 0 4px; font-size: 1.75rem; letter-spacing: -0.01em; }
.ux-sub { margin: 0; color: var(--text-dim); max-width: 52ch; line-height: 1.5; }

.ux-servers { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.ux-server {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 6px 14px 6px 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim);
  font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: border-color .15s, color .15s;
}
.ux-server:hover { color: var(--text); border-color: #3a4260; }
.ux-server.on { color: var(--text); border-color: var(--accent); background: var(--panel-2); }
.ux-server img, .ux-server-fallback { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ux-server-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-soft); font-size: 0.8rem; }

  

.ux-rail {
  width: 270px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; position: sticky; top: 84px; max-height: calc(100vh - 110px); display: flex; flex-direction: column; gap: 10px;
}
.ux-rail input[type=search] { width: 100%; min-width: 0; }

.ux-rail-empty { color: var(--text-dim); font-size: 0.82rem; line-height: 1.5; margin: 6px 4px; }

.ux-note { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 0.9rem; border: 1px solid var(--border); background: var(--panel); }
.ux-note.lock { border-color: rgba(255,184,77,.5); color: var(--warn); }
.ux-note.info { color: var(--text-dim); }

.ux-drop {
  display: grid; justify-items: center; gap: 4px; width: 100%; padding: 26px 20px; margin-bottom: 20px; font: inherit; color: var(--text);
  background: var(--panel); border: 2px dashed #323a55; border-radius: var(--radius); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ux-drop:hover { border-color: var(--accent); background: var(--panel-2); }
.ux-drop svg { width: 30px; height: 30px; color: var(--accent); margin-bottom: 4px; }
.ux-drop-main { font-weight: 700; }
.ux-drop-hint { color: var(--text-dim); font-size: 0.82rem; }

.ux-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.ux-toolbar input[type=search] { min-width: 170px; }
.ux-filters, .ux-views { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.ux-filters button, .ux-views button {
  background: none; border: none; color: var(--text-dim); font: inherit; font-size: 0.84rem; font-weight: 600;
  padding: 5px 12px; border-radius: 8px; cursor: pointer;
}
.ux-views button { padding: 5px 8px; display: inline-flex; }
.ux-views svg { width: 16px; height: 16px; }
.ux-filters button:hover, .ux-views button:hover { color: var(--text); }
.ux-filters button.on, .ux-views button.on { background: var(--accent); color: #fff; }

.ux-grid.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.ux-grid.list { display: flex; flex-direction: column; gap: 8px; }
.ux-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--text-dim); line-height: 1.5; }
.ux-empty b { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: 4px; }
.ux-skel { height: 190px; border-radius: 12px; background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%) 0 0 / 200% 100%; animation: hmShimmer 1.4s linear infinite; }
@keyframes hmShimmer { to { background-position: -200% 0; } }

.ux-tile { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color .15s; }
.ux-tile:hover, .ux-tile:focus-within { border-color: #3a4260; }
.ux-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: none; background: #0d0f17; cursor: pointer; overflow: hidden; color: var(--text); }
.ux-thumb img, .ux-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ux-thumb.audio { background: linear-gradient(135deg, #231c4a, #3a1d3f); }

.ux-kind { position: absolute; left: 8px; bottom: 8px; background: rgba(8,9,14,.72); border-radius: 6px; padding: 2px 7px; font-size: 0.72rem; font-weight: 700; }
.ux-info { padding: 10px 12px 12px; }
.ux-name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; color: var(--text-dim); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.chip { padding: 1px 8px; border-radius: 999px; font-weight: 600; background: rgba(53,214,138,.12); color: var(--good); }
.chip.warm { background: rgba(255,184,77,.14); color: var(--warn); }
.chip.hot { background: rgba(255,92,114,.14); color: var(--bad); }
.ux-tile-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0; transform: translateY(-2px); transition: opacity .15s, transform .15s; }
.ux-tile:hover .ux-tile-actions, .ux-tile:focus-within .ux-tile-actions { opacity: 1; transform: none; }
.icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(8,9,14,.72); color: var(--text); cursor: pointer; backdrop-filter: blur(4px); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { border-color: var(--accent); }
.icon-btn.danger:hover { border-color: var(--bad); color: var(--bad); }

.ux-grid.list .ux-tile { display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; }
.ux-grid.list .ux-thumb { width: 96px; flex-shrink: 0; border-radius: 8px; }
 
.ux-grid.list .ux-kind { display: none; }
.ux-grid.list .ux-info { flex: 1; min-width: 0; padding: 0; }
.ux-grid.list .ux-tile-actions { position: static; opacity: 1; transform: none; }
.ux-grid.list .icon-btn { background: var(--panel-2); }

/* viewer + confirm dialogs */
.ux-dialog { border: 1px solid var(--border); border-radius: 16px; background: var(--panel); color: var(--text); padding: 0; max-width: calc(100vw - 24px); }
.ux-dialog::backdrop { background: rgba(5,6,10,.78); backdrop-filter: blur(3px); }

 

.ux-confirm { width: 380px; padding: 22px; }
.ux-confirm h3 { margin: 0 0 6px; font-size: 1.05rem; word-break: break-word; }
.ux-confirm p { margin: 0 0 18px; color: var(--text-dim); font-size: 0.9rem; }
.ux-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* upload queue, drop overlay, toast */
.ux-queue { position: fixed; right: 18px; bottom: 18px; width: 320px; max-width: calc(100vw - 36px); max-height: 50vh; overflow-y: auto; z-index: 110; display: flex; flex-direction: column; gap: 8px; }
.ux-q { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ux-q-top { display: flex; justify-content: space-between; gap: 10px; font-size: 0.84rem; }
.ux-q-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-q-state { color: var(--text-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ux-q-bar { height: 5px; background: var(--bg-soft); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.ux-q-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .15s; }
.ux-q.ok .ux-q-state { color: var(--good); } .ux-q.bad .ux-q-state { color: var(--bad); white-space: normal; text-align: right; }
.ux-q.bad .ux-q-bar { display: none; }
.ux-q-x { margin-top: 8px; background: none; border: none; color: var(--text-dim); font: inherit; font-size: 0.8rem; text-decoration: underline; cursor: pointer; padding: 0; }

.ux-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--panel-2); border: 1px solid var(--border); padding: 10px 18px; border-radius: 10px; transition: opacity .2s, transform .2s; z-index: 140; max-width: 90vw; font-size: 0.9rem; }
.ux-toast.show { opacity: 1; transform: translate(-50%, 0); }

.ux :focus-visible, .ux-dialog :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

@media (max-width: 860px) {
   
  
  .ux-rail { width: 100%; position: static; max-height: none; }
  
  
  
  
  
  .ux-tile-actions { opacity: 1; transform: none; }
  .ux-toolbar input[type=search] { flex: 1; }
  .ux-queue { left: 18px; width: auto; }
}
.ux-boot { color: var(--text-dim); padding: 24px 4px; }
.ux-boot.bad { color: var(--warn); }
.brand { white-space: nowrap; }
@media (max-width: 900px) {
  .topnav { flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; }
  .nav-links { flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
  .nav-links a { white-space: nowrap; font-size: 0.9rem; }
  .nav-links .avatar, .nav-links .pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ux *, .ux-dialog *, .ux-toast, .ux-queue * { transition: none !important; animation: none !important; }
}

/* ---------- dashboard (schema-driven) ---------- */
.dim { color: var(--text-dim); }
.dash-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.dash-top h1, .mod-head h1 { margin: 0 0 4px; font-size: 1.75rem; letter-spacing: -0.01em; }

.side-nav { max-height: calc(100vh - 110px); overflow-y: auto; }
.side-nav input[type=search] { width: 100%; min-width: 0; margin-bottom: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 8px; font: inherit; font-size: 0.88rem; }
.nav-group { font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); padding: 12px 14px 4px; }
.nav-ico { display: inline-block; width: 1.5em; }
.mod-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mod-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }

details.sect { display: block; padding: 0; overflow: hidden; }
details.sect > summary { list-style: none; cursor: pointer; padding: 16px 22px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
details.sect > summary::-webkit-details-marker { display: none; }
details.sect > summary::before { content: "▸"; color: var(--text-dim); transition: transform .15s; }
details.sect[open] > summary::before { transform: rotate(90deg); }
details.sect > summary h2 { margin: 0; font-size: 1.05rem; }
.sect-body { padding: 0 22px 14px; border-top: 1px solid var(--border); }
.field-row .field-label { min-width: 0; flex: 1; }
.field-row .field-input { flex-shrink: 0; max-width: 60%; display: flex; justify-content: flex-end; }
.field-row.wide { flex-direction: column; align-items: stretch; }
.field-row.wide .field-input { max-width: none; justify-content: flex-start; }
.field-row textarea, .field-input input[type=text] { width: 100%; }
.field-row textarea { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 0.88rem; resize: vertical; min-width: min(420px, 100%); }
.field-row:not(.wide) input[type=text] { width: 260px; max-width: 100%; }
select:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.has-err > .field-label label, .has-err { --err: 1; }
.err { color: var(--bad); font-size: 0.8rem; margin-top: 4px; }
.field-row.has-err input, .field-row.has-err select, .field-row.has-err textarea { border-color: var(--bad); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 0.82rem; }
.chip-x { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 6px; border-radius: 999px; }
.chip-x:hover { color: var(--bad); }
.chip-in { min-width: 200px !important; width: auto !important; }
.words { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.word-row, .word-add { display: flex; gap: 8px; align-items: center; }
.word-row input, .word-add input { flex: 1; min-width: 0 !important; }
.word-row select { min-width: 130px; }
.icon-btn.sm { width: 28px; height: 28px; font-size: 0.85rem; background: var(--panel-2); border-color: var(--border); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.color-wrap { display: inline-flex; align-items: center; gap: 8px; }
.color-wrap input[type=color] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.color-wrap.unset input[type=color] { opacity: .4; }

.media-pick { display: inline-flex; align-items: center; gap: 10px; }
.media-mini { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.in-num { width: 120px; }

.container { padding: 12px 0; }
.container-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.empty-line { margin: 8px 0; font-size: 0.88rem; }
.item-card { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
.item-card > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item-card > summary::-webkit-details-marker { display: none; }
.item-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-tools { display: flex; gap: 6px; flex-shrink: 0; }
.item-body { padding: 0 14px 10px; border-top: 1px solid var(--border); }
.item-actions { padding-top: 10px; display: flex; gap: 8px; }

.save-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 120; width: min(640px, calc(100vw - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.save-bar[hidden] { display: none; }
.save-bar > div { display: flex; gap: 8px; }
.ux-toast.bad { border-color: var(--bad); color: var(--bad); }
.preview-card { padding: 16px; }
.preview-card .hint { margin: 10px 2px 0; color: var(--text-dim); font-size: .8rem; }

/* loading screens (replace the bare picture icon) */
.load-screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 2; color: var(--text-dim); font-size: .82rem;
  background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%) 0 0 / 200% 100%; animation: hmShimmer 1.4s linear infinite; }
.loading > .load-screen { display: flex; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.14); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ux-thumb.loading img, .ux-thumb.loading video { opacity: 0; }
.ux-thumb .fail-msg { display: none; position: absolute; color: var(--text-dim); font-size: .8rem; }
.ux-thumb.failed .fail-msg { display: block; }
.ux-thumb.failed img,
.ux-thumb.failed video { display: none; }

.ux-thumb.loading .ux-kind { display: none; }

.ux-q-x.cancel { color: var(--warn); text-decoration: none; border: 1px solid var(--border); border-radius: 8px; padding: 3px 12px; margin-top: 8px; }
.ux-q-x.cancel:hover { border-color: var(--bad); color: var(--bad); }
.ux-q-x { margin-right: 8px; }
#libDrop.over { border-color: var(--accent); background: var(--panel-2); }
#libGrid { margin-top: 14px; }
.ux-grid .ux-tile .ux-tile-actions { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .field-row { flex-wrap: wrap; }
  .field-row .field-input { max-width: 100%; justify-content: flex-start; }
}

/* ================= turn 2: mobile-safe layout, list-first nav, colour widget, previews ================= */
.dash, .dash-layout, .dash-main, .config-card, .sect-body, .item-body, .field-row { min-width: 0; max-width: 100%; }
.dash-main { overflow-wrap: anywhere; }
.dash-main img, .dash-main video, .dash-main canvas { max-width: 100%; height: auto; }

.mobile-back, .back-bottom { display: none; }
.side-nav button.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.side-nav button.nav-item b { font-weight: 700; }
.nav-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nav-txt small { color: var(--text-dim); font-weight: 400; font-size: .76rem; white-space: normal; }
.nav-item.active .nav-txt small { color: rgba(255,255,255,.8); }
.nav-go { display: none; color: var(--text-dim); font-size: 1.4rem; }

/* field rows: label always on its own readable line, control never covers it */
.field-row { display: flex; gap: 10px 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.field-row .field-label { flex: 1 1 220px; min-width: 0; }
.field-row .field-label label, .field-row .field-label .hint { overflow-wrap: anywhere; white-space: normal; }
.field-row .field-input { flex: 0 1 auto; min-width: 0; }
.field-input select, .field-input input:not([type=checkbox]):not([type=color]):not([type=range]), .field-input textarea { max-width: 100%; min-width: 0; }
.field-input select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .88rem; }

/* colour widget */
.color-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; }
.color-main { display: inline-flex; align-items: center; gap: 8px; }
.color-wrap input[type=color] { width: 44px; height: 36px; flex: none; }
.hex-in { width: 110px !important; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.hex-in.bad { border-color: var(--bad); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; max-width: 280px; }
.preset { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.preset.on { border-color: #fff; }

/* uploads */
.upl { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; width: 100%; }
.upl-thumb { position: relative; width: 120px; height: 80px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-soft); overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none; }
.upl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.upl-thumb.loading img { opacity: 0; }
.upl-thumb.failed img { display: none; }
.upl-thumb .fail-msg { display: none; font-size: .75rem; color: var(--text-dim); }
.upl-thumb.failed .fail-msg { display: block; }
.upl-side { flex: 1 1 200px; min-width: 0; }
.upl-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.upl-prog[hidden], .upl-btns[hidden] { display: none; }
.upl-state { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .84rem; margin-top: 6px; }
.ux-q-bar { height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.ux-q-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.btn-small { padding: 6px 12px; font-size: .84rem; }

/* previews */
.pv-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.event-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.event-tabs button { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; cursor: pointer; font: inherit; font-size: .84rem; }
.event-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pv { margin-bottom: 12px; }
.pv-title { font-weight: 600; font-size: .86rem; margin-bottom: 6px; color: var(--text-dim); }
.pv-img { position: relative; min-height: 120px; border-radius: 10px; overflow: hidden; background: var(--bg-soft); }
.pv-img.loading img, .pv-full[hidden] { opacity: 0; }
.pv-full { width: 100%; display: block; border-radius: 10px; }
.pv-err { color: var(--bad); font-size: .85rem; padding: 10px; }
.item-preview { margin-top: 10px; }
.pv-dialog { width: min(720px, calc(100vw - 20px)); max-height: 90vh; overflow: auto; }
.pv-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }

/* Discord-style embed preview */
.dc-msg { background: #313338; color: #dbdee1; border-radius: 10px; padding: 12px 14px; font-size: .9rem; line-height: 1.4; max-width: 100%; overflow: hidden; }
.dc-plain { white-space: pre-wrap; margin-bottom: 6px; }
.dc-mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 4px; padding: 0 3px; }
.dc-embed { display: flex; background: #2b2d31; border-left: 4px solid var(--accent); border-radius: 4px; padding: 10px 14px 12px; max-width: 520px; margin-top: 4px; }
.dc-embed-main { min-width: 0; flex: 1; }
.dc-title { font-weight: 700; color: #fff; margin-bottom: 4px; }
.dc-desc { white-space: pre-wrap; font-size: .86rem; }
.dc-field { margin-top: 8px; font-size: .84rem; }
.dc-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; margin-left: 12px; flex: none; }
.dc-img { width: 100%; border-radius: 6px; margin-top: 10px; }
.dc-footer { color: #949ba4; font-size: .74rem; margin-top: 8px; }
.dc-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dc-btn { background: #4e5058; color: #fff; border-radius: 4px; padding: 5px 14px; font-size: .84rem; }
.dc-select { background: #1e1f22; border-radius: 4px; padding: 8px 12px; font-size: .84rem; min-width: 200px; max-width: 100%; }

body.has-savebar .dash { padding-bottom: 90px; }

/* ---------- mobile: list first, page full-screen with Back ---------- */
@media (max-width: 860px) {
  .dash-layout { display: block; }
  .dash-top { align-items: stretch; }
  
  .side-nav { position: static !important; transform: none !important; width: 100% !important; max-height: none; overflow: visible; padding: 0; border: 0; background: none; }
  .nav-go { display: block; }
  .side-nav button.nav-item { padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
  .dash-layout.view-list .dash-main { display: none; }
  .dash-layout.view-page .side-nav, body:has(.view-page) .dash-top { display: none; }
  .mobile-back { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 30; background: var(--bg); padding: 10px 0; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
  .mb-title { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .back-bottom { display: block; width: 100%; margin: 18px 0; }
  .mod-head { flex-direction: column; align-items: stretch; }
  .mod-head h1 { font-size: 1.35rem; }
  .field-row { flex-direction: column; align-items: stretch; }
  .field-row .field-label { flex: none; }
  .field-row .field-input { max-width: 100% !important; width: 100%; justify-content: flex-start; }
  .field-row:not(.wide) input[type=text], .field-input select, .field-input input[type=number] { width: 100% !important; }
  .field-input input[type=number].in-num { width: 140px !important; }
  .hex-in { width: 110px !important; }
  .chip-in { min-width: 0 !important; width: 100% !important; }
  .word-row { flex-wrap: wrap; }
  .word-row select { min-width: 0; width: 100%; }
  details.sect > summary, .sect-body { padding-left: 14px; padding-right: 14px; }
  .item-card > summary { flex-wrap: wrap; }
  .item-title { white-space: normal; }
  .item-actions { flex-wrap: wrap; }
  .dc-embed { flex-direction: column; }
  .dc-thumb { margin: 8px 0 0; }
  .save-bar { bottom: 8px; }
  .container-head { flex-direction: column; }
}
@media (min-width: 861px) { .mobile-back, .back-bottom { display: none !important; } }
.field-row.wide .field-label, .field-row.wide .field-input { flex: none; width: 100%; }

/* ---------- master panel: never let text sit under the buttons ---------- */
.guild-table-row { flex-wrap: wrap; }
.guild-table-row .info { flex: 1 1 200px; overflow-wrap: anywhere; }
.guild-table-row .actions { flex: 0 0 auto; }
@media (max-width: 640px) {
  .guild-table-row .actions { flex: 1 1 100%; justify-content: flex-end; }
  .guild-table-row .actions .btn { flex: 1 1 auto; }
}

/* ================= visual card editor ================= */
.ce-host { padding: 12px 0; }
.ce { --ce-h: 62vh; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; position: relative; }
.ce-banner { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px; background: rgba(255,184,77,.12); border-bottom: 1px solid var(--border); font-size: .88rem; }
.ce-banner[hidden] { display: none; }
.ce-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--border); align-items: center; position: relative; z-index: 3; }
.ce-grp { display: flex; gap: 4px; align-items: center; }
.ce-right { margin-left: auto; }
.ce-b { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: .86rem; cursor: pointer; min-height: 34px; min-width: 34px; line-height: 1.1; list-style: none; }
.ce-b::-webkit-details-marker { display: none; }
.ce-b:hover:not(:disabled) { border-color: var(--accent); }
.ce-b:disabled { opacity: .4; cursor: default; }
.ce-b[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.ce-b.ce-primary { background: linear-gradient(135deg, var(--accent), #5a49e6); border-color: transparent; color: #fff; }
.ce-b.ce-danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.ce-zoom { min-width: 58px; }
.ce-only-full { display: none; }
.ce-full .ce-only-full { display: inline-block; }
.ce-add { position: relative; }
.ce-add > summary { display: inline-flex; align-items: center; }
.ce-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; min-width: 160px; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.ce-menu button { background: none; border: 0; color: var(--text); text-align: left; padding: 10px 12px; border-radius: 8px; font: inherit; cursor: pointer; }
.ce-menu button:hover { background: var(--panel); }

.ce-body { display: grid; grid-template-columns: 1fr; grid-template-areas: "stage" "layers" "props"; }
.ce-stage { grid-area: stage; position: relative; overflow: auto; min-height: 200px; max-height: var(--ce-h); padding: 12px; background:
  repeating-conic-gradient(#14172299 0% 25%, #1a1e2d99 0% 50%) 0 0 / 20px 20px; outline: none; display: flex; }
.ce-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.ce-canvaswrap { margin: auto; flex: none; line-height: 0; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.ce-canvaswrap canvas { touch-action: none; display: block; border-radius: 2px; }
.ce-stage.pan canvas { cursor: grab; }
.ce-layers, .ce-props { background: var(--panel); padding: 10px 12px; min-width: 0; }
.ce-layers { grid-area: layers; border-top: 1px solid var(--border); }
.ce-props { grid-area: props; border-top: 1px solid var(--border); }
.ce-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ce-side-head .dim { margin-left: auto; font-size: .8rem; }
.ce-close { margin-left: auto; }
.ce-layer-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.ce-layer { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); cursor: pointer; min-height: 40px; }
.ce-layer.sel { border-color: var(--accent); background: rgba(124,108,255,.16); }
.ce-layer.off .ce-name { opacity: .45; text-decoration: line-through; }
.ce-layer.bad { border-color: var(--bad); }
.ce-ico { width: 1.6em; text-align: center; flex: none; }
.ce-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-mini { background: none; border: 0; cursor: pointer; font-size: 1rem; padding: 4px; border-radius: 6px; flex: none; }
.ce-mini:hover, .ce-mini.on { background: var(--panel-2); }
.ce-order { display: flex; gap: 4px; margin-top: 8px; }
.ce-order .ce-b { flex: 1; }
.ce-hint { margin: 6px 0 0; }
.ce-empty { margin: 8px 0; font-size: .86rem; }
.ce-align { display: flex; gap: 4px; margin-bottom: 10px; }
.ce-align .ce-b { flex: 1; padding: 6px 0; }
.ce-field { margin-bottom: 10px; min-width: 0; }
.ce-field > label { display: block; font-size: .8rem; color: var(--text-dim); margin-bottom: 4px; font-weight: 600; }
.ce-field input[type=number], .ce-field select, .ce-field textarea { width: 100%; min-width: 0; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .88rem; }
.ce-field textarea { resize: vertical; }
.ce-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.ce-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ce-chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 3px 10px; font-size: .78rem; cursor: pointer; font-family: ui-monospace, Menlo, monospace; }
.ce-chip:hover { color: var(--text); border-color: var(--accent); }
.ce-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ce-errs { margin-bottom: 8px; }
.ce-status { display: flex; gap: 14px; flex-wrap: wrap; padding: 6px 12px; font-size: .78rem; color: var(--text-dim); background: var(--panel); border-top: 1px solid var(--border); }
.ce-scrim { display: none; }
.ce-stale { background: rgba(255,184,77,.18); color: var(--warn); border-radius: 999px; padding: 1px 10px; font-size: .74rem; font-weight: 700; margin-left: 6px; }
.ce-stale[hidden] { display: none; }
.ce-preview { border-top: 1px solid var(--border); padding: 12px; background: var(--panel); }
.ce-pv-head { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.ce-pv-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ce-pv-img { min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ce-pv-img .pv-full { width: auto; max-width: 100%; }
.ce-pv-empty { margin: 30px 0; }
.ce-pv-img.loading .pv-full { opacity: .25; }

@media (min-width: 761px) {
  .ce-body { grid-template-columns: minmax(200px, 1fr) minmax(0, 1.5fr); grid-template-areas: "stage stage" "layers props"; }
  .ce-layer-list { max-height: 320px; }
}

/* ---- full screen: canvas in the middle, layers left, properties right ---- */
body.ce-lock { overflow: hidden; }
.ce.ce-full { position: fixed; inset: 0; z-index: 400; border-radius: 0; border: 0; display: flex; flex-direction: column; background: var(--bg); }
.ce-full .ce-body { flex: 1; min-height: 0; grid-template-columns: 250px minmax(0, 1fr) 310px; grid-template-areas: "layers stage props"; }
.ce-full .ce-stage { max-height: none; min-height: 0; height: 100%; }
.ce-full .ce-layers, .ce-full .ce-props { overflow-y: auto; border-top: 0; }
.ce-full .ce-layers { border-right: 1px solid var(--border); }
.ce-full .ce-props { border-left: 1px solid var(--border); }
.ce-full .ce-layer-list { max-height: none; }
.ce-full .ce-close { display: none; }
.ce-full .ce-preview { display: none; }
.ce-full.pv-open .ce-preview { display: block; position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(94vw, 900px); max-height: 88vh; overflow: auto; border: 1px solid var(--accent); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.ce-full.pv-open::after { content: ""; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.55); }
@media (max-width: 900px) {
  .ce-full .ce-body { grid-template-columns: 1fr; grid-template-areas: "stage"; }
  .ce-full .ce-layers, .ce-full .ce-props { position: fixed; z-index: 40; top: 0; bottom: 0; width: min(86vw, 330px); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.6); padding-top: 14px; }
  .ce-full .ce-props { right: 0; left: auto; transform: translateX(105%); }
  .ce-full .ce-layers { left: 0; }
  .ce-full.show-layers .ce-layers, .ce-full.show-props .ce-props { transform: none; }
  .ce-full .ce-close { display: inline-block; }
  .ce-full.show-layers .ce-scrim, .ce-full.show-props .ce-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.5); }
  .ce-full .ce-bar { gap: 4px 6px; }
  .ce-full .ce-lbl { display: none; }
  .ce-full .ce-right { margin-left: 0; }
}
@media (max-width: 760px) {
  .ce-lbl { display: none; }
  .ce-bar { gap: 4px 6px; }
  .ce-right { margin-left: 0; }
  .ce-grp { flex-wrap: wrap; }
  .ce-b { min-height: 38px; min-width: 38px; }
  .ce-grid2 { grid-template-columns: 1fr 1fr; }
  .ce-pv-tools { width: 100%; }
}

/* ===== card editor v2: overlay handles, text box, mobile ===== */
.ce-canvaswrap { position: relative; }
.ce-ov { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ce-h { position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; padding: 0; border-radius: 5px; background: #fff; border: 2px solid #7C6CFF; box-shadow: 0 2px 8px rgba(0,0,0,.5); pointer-events: auto; touch-action: none; cursor: nwse-resize; font: 700 10px/1 system-ui, sans-serif; color: #3b2fb3; display: flex; align-items: center; justify-content: center; transition: opacity .12s; }
.ce-h::after { content: ""; position: absolute; inset: -12px; } /* bigger invisible hit area */
.ce-h-ne, .ce-h-sw { cursor: nesw-resize; }
.ce-h-round { border-radius: 50%; cursor: crosshair; }
.ce-h-move { width: 30px; height: 30px; border-radius: 50%; background: #7C6CFF; color: #fff; border-color: #fff; font-size: 16px; cursor: move; }
.ce-h-bw { width: 12px; height: 34px; border-radius: 8px; background: #4FC3F7; border-color: #fff; cursor: ew-resize; }
.ce-h-bh { width: 34px; height: 12px; border-radius: 8px; background: #4FC3F7; border-color: #fff; cursor: ns-resize; }
.ce-h-bwh { background: #4FC3F7; border-color: #fff; border-radius: 50%; }
.ce-h-sz { width: 26px; height: 22px; border-radius: 11px; }
.ce-ov.ce-moving .ce-h { opacity: 0; } /* sizing buttons vanish while dragging; still receive the pointer */
.ce-badge { position: absolute; left: 8px; top: 8px; background: rgba(15,17,28,.88); color: #fff; font: 600 12px/1 ui-monospace, Menlo, monospace; padding: 5px 9px; border-radius: 8px; pointer-events: none; }
.ce-quick { position: sticky; bottom: 8px; display: flex; gap: 8px; justify-content: center; margin-top: 10px; z-index: 5; }
.ce-quick .ce-b { min-height: 44px; min-width: 44px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.ce-quick[hidden] { display: none; }
.ce-nudge { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.ce-nudge .ce-b { flex: 1; padding: 6px 0; }
.ce-nudge select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px; font: inherit; font-size: .84rem; }
.ce-box { border: 1px dashed rgba(79,195,247,.55); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; background: rgba(79,195,247,.06); }
.ce-check { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .86rem; margin-bottom: 6px; cursor: pointer; }
.ce-check input { width: 18px; height: 18px; }
.ce-cap { font-size: .84rem; margin-top: 4px; }
.ce-cap-list { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.ce-cap code { font-size: .78rem; }
@media (pointer: coarse) {
  .ce-h { width: 26px; height: 26px; }
  .ce-h-move { width: 40px; height: 40px; font-size: 20px; }
  .ce-h-bw { width: 16px; height: 46px; } .ce-h-bh { width: 46px; height: 16px; }
  .ce-h-sz { width: 36px; height: 28px; }
  .ce-b { min-height: 42px; min-width: 42px; }
  .ce-layer { min-height: 48px; }
  .ce-field input[type=number], .ce-field select, .ce-field textarea { font-size: 16px; padding: 10px 12px; } /* no iOS zoom-on-focus */
  .ce-canvaswrap canvas { touch-action: pan-y pinch-zoom; }
  .ce-full .ce-canvaswrap canvas { touch-action: none; }
}
/* phones: layers / properties become bottom sheets so the canvas stays visible */
@media (max-width: 800px) {
  .ce-full .ce-layers, .ce-full .ce-props { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 58vh; border-radius: 16px 16px 0 0; border: 1px solid var(--border); transform: translateY(108%); padding-top: 18px; }
  .ce-full .ce-props { right: 0; left: 0; transform: translateY(108%); }
  .ce-full.show-layers .ce-layers, .ce-full.show-props .ce-props { transform: none; }
  .ce-full .ce-layers::before, .ce-full .ce-props::before { content: ""; position: absolute; top: 7px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--border); }
  .ce-full .ce-layers, .ce-full .ce-props { position: fixed; }
  .ce-full.show-layers .ce-quick, .ce-full.show-props .ce-quick { display: none; }
}

/* =====================================================================
   UI polish: themed dropdowns + motion  (see static/js/ui.js)
   Rule of thumb for the dashboard: nothing inside #dashMain animates by
   itself, because the page is re-rendered on every edit. Entrances are
   triggered once from JS (.enter / .opening / .pop-in classes).
   ===================================================================== */
:root {
  color-scheme: dark;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --glow: 0 0 0 3px rgba(124, 108, 255, .2);
}

/* ---------- themed dropdown: trigger ---------- */
select.ui-native, .field-input select.ui-native, .word-row select.ui-native, .ce-field select.ui-native, .ux select.ui-native, .ce-nudge select.ui-native {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; max-width: 1px !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; clip: rect(0 0 0 0) !important;
}
.ui-sel {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 170px; max-width: 100%; padding: 8px 12px; font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .18s, box-shadow .18s, background .18s, transform .12s var(--ease-out);
}
.ui-sel:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.ui-sel:active { transform: scale(.985); }
.ui-sel:disabled { opacity: .5; cursor: default; }
.ui-sel[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--glow); }
.ui-sel-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sel.is-empty .ui-sel-txt { color: var(--text-dim); }
.ui-sel-caret { flex: none; width: 14px; height: 14px; color: var(--text-dim); transition: transform .3s var(--spring), color .2s; }
.ui-sel[aria-expanded="true"] .ui-sel-caret { transform: rotate(180deg); color: var(--accent-2); }
.has-err .ui-sel, .field-row.has-err .ui-sel { border-color: var(--bad); }
.ui-mark { color: var(--text-dim); margin-right: .45em; font-weight: 600; }

.chips .ui-sel { min-width: 140px; border-style: dashed; border-radius: 999px; padding: 4px 12px; font-size: .82rem; }
.word-row .ui-sel { min-width: 130px; }
.ce-field .ui-sel { width: 100%; min-width: 0; }
.ce-nudge .ui-sel { min-width: 0; padding: 6px 10px; font-size: .84rem; }
.ux .ui-sel { font-size: .86rem; min-width: 130px; }
@media (pointer: coarse) { .ui-sel { min-height: 44px; } .chips .ui-sel { min-height: 36px; } .ce-nudge .ui-sel { min-height: 38px; } }
@media (max-width: 860px) {
  .field-input .ui-sel, .word-row .ui-sel { width: 100%; }
  .chips .ui-sel { width: auto; }
}

/* ---------- themed dropdown: popup ---------- */
.ui-layer { position: fixed; inset: 0; z-index: 400; }
.ui-backdrop { position: absolute; inset: 0; touch-action: none; }
.ui-layer.is-sheet { display: flex; align-items: center; justify-content: center; padding: 16px; }
.ui-layer.is-sheet .ui-backdrop { background: rgba(5, 6, 10, .74); animation: uiFade .18s ease both; }
.ui-panel {
  display: flex; flex-direction: column; overflow: hidden; color: var(--text);
  background: linear-gradient(180deg, #1c2133 0%, #151927 100%);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(124, 108, 255, .1);
  animation: uiPopIn .18s var(--ease-out) both;
  will-change: transform, opacity; backface-visibility: hidden;
}
.ui-layer.is-pop .ui-panel { position: fixed; max-width: calc(100vw - 16px); }
.ui-layer.is-pop .ui-panel.up { animation-name: uiPopInUp; }
.ui-layer.is-sheet .ui-panel { position: relative; width: min(100%, 440px); max-height: min(78vh, 640px); max-height: min(78dvh, 640px); border-radius: 22px; animation-name: uiSheetIn; }
.ui-layer.closing .ui-panel { animation: uiOut .12s ease forwards; }
.ui-layer.closing .ui-backdrop { opacity: 0; transition: opacity .12s; }

.ui-list { flex: 1; min-height: 0; position: relative; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent; padding: 4px 0; }
.ui-list::-webkit-scrollbar { width: 6px; }
.ui-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 99px; }
.ui-grp { padding: 14px 16px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-2); }
.ui-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  padding: 11px 16px; font: inherit; font-size: .92rem; text-align: left; cursor: pointer; color: var(--text);
  background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .05);
  transition: background .12s;
}
.ui-grp + .ui-opt { border-top-color: transparent; }
.ui-opt-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-opt:hover, .ui-opt:focus { background: rgba(124, 108, 255, .14); outline: none; }
.ui-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-2); }
.ui-opt:active { background: rgba(124, 108, 255, .26); }
.ui-opt.off { opacity: .4; cursor: default; }
.ui-opt.on .ui-opt-txt { font-weight: 700; }
.ui-radio { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(231, 233, 242, .55); transition: border-color .2s, transform .2s var(--spring); }
.ui-opt:hover .ui-radio { border-color: var(--text); }
.ui-opt.on .ui-radio { border-color: var(--accent-2); }
.ui-opt.on .ui-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent-2); animation: uiDot .35s var(--spring); }
.ui-opt[hidden], .ui-grp[hidden], .ui-none[hidden] { display: none; }
.ui-none { padding: 18px 16px; color: var(--text-dim); text-align: center; font-size: .9rem; }
.ui-search { padding: 10px 12px 6px; border-bottom: 1px solid var(--border); }
.ui-search input { width: 100%; min-width: 0; font: inherit; font-size: .9rem; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; transition: border-color .15s, box-shadow .15s; }
.ui-search input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
@media (pointer: coarse) {
  .ui-opt { padding: 15px 18px; font-size: 1rem; }
  .ui-search input { font-size: 16px; padding: 11px 12px; }
}

@keyframes uiFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiPopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes uiPopInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes uiSheetIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes uiOut { to { opacity: 0; } }
@keyframes uiRow { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes uiDot { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- ripple ---------- */
.ui-rip { position: relative; overflow: hidden; }
.ui-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); pointer-events: none; animation: uiRipple .6s ease-out forwards; }
@keyframes uiRipple { to { transform: scale(1); opacity: 0; } }

/* ---------- ambient background (cheap: two drifting radial gradients, no blur filter) ---------- */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 70vmax; height: 70vmax; border-radius: 50%; will-change: transform; }
body::before { top: -30vmax; right: -20vmax; background: radial-gradient(circle, rgba(124, 108, 255, .28), transparent 62%); animation: driftA 26s ease-in-out infinite alternate; }
body::after { bottom: -34vmax; left: -24vmax; background: radial-gradient(circle, rgba(255, 108, 171, .17), transparent 62%); animation: driftB 32s ease-in-out infinite alternate; }
@keyframes driftA { to { transform: translate3d(-14vmax, 10vmax, 0) scale(1.15); } }
@keyframes driftB { to { transform: translate3d(16vmax, -8vmax, 0) scale(1.1); } }

/* ---------- navigation ---------- */
.topnav { animation: navDrop .5s var(--ease-out) backwards; }
@keyframes navDrop { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.brand { background-size: 200% 200%; animation: brandShift 7s ease-in-out infinite alternate; }
@keyframes brandShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.nav-links a:not(.btn) { position: relative; padding: 4px 0; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.nav-links a:not(.btn):hover::after, .nav-links a.active::after { transform: scaleX(1); }
.avatar { transition: transform .3s var(--spring), box-shadow .3s; }
@media (hover: hover) { .avatar:hover { transform: scale(1.12) rotate(-4deg); box-shadow: 0 0 0 3px rgba(124, 108, 255, .35); } }

/* ---------- page + list entrances ---------- */
.page, .login-wrap { animation: pageIn .55s var(--ease-out) backwards; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.stat-card, .server-card, .guild-table-row, .login-card, .hero > * { animation: riseIn .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 55ms + 80ms); }
.stat-card:nth-child(2), .server-card:nth-child(2), .guild-table-row:nth-child(2), .hero > :nth-child(2) { --i: 1; }
.stat-card:nth-child(3), .server-card:nth-child(3), .guild-table-row:nth-child(3), .hero > :nth-child(3) { --i: 2; }
.stat-card:nth-child(4), .server-card:nth-child(4), .guild-table-row:nth-child(4) { --i: 3; }
.stat-card:nth-child(5), .server-card:nth-child(5), .guild-table-row:nth-child(5) { --i: 4; }
.stat-card:nth-child(6), .server-card:nth-child(6), .guild-table-row:nth-child(6) { --i: 5; }
.stat-card:nth-child(n+7), .server-card:nth-child(n+7), .guild-table-row:nth-child(n+7) { --i: 6; }
/* dashboard: played once from JS via UI.enter(), never on re-render */
.enter > * { animation: riseIn .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.enter > :nth-child(2) { --i: 1; } .enter > :nth-child(3) { --i: 2; } .enter > :nth-child(4) { --i: 3; } .enter > :nth-child(5) { --i: 4; }
.enter > :nth-child(6) { --i: 5; } .enter > :nth-child(7) { --i: 6; } .enter > :nth-child(8) { --i: 7; } .enter > :nth-child(n+9) { --i: 8; }
#navList.enter > * { animation-name: slideInLeft; animation-duration: .4s; animation-delay: calc(var(--i, 0) * 22ms); }
#navList.enter > :nth-child(n+10) { --i: 9; }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .enter > * { animation-name: riseIn; } }

.sect-body.opening, .item-body.opening { animation: bodyIn .34s var(--ease-out); }
@keyframes bodyIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.item-card.pop-in { animation: popIn .45s var(--spring); }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
details.sect > summary::before, .item-card > summary::before { transition: transform .3s var(--spring); }
details.sect > summary { transition: background .15s; }
@media (hover: hover) { details.sect > summary:hover, .item-card > summary:hover { background: rgba(124, 108, 255, .06); } }

/* ---------- hover / press feedback ---------- */
.btn { transition: transform .15s var(--ease-out), border-color .15s, background .15s, box-shadow .2s, filter .15s; }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn-primary { background-size: 160% 160%; background-position: 0% 50%; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
  .btn:active:not(:disabled) { transform: scale(.96); }
  .btn-primary:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(124, 108, 255, .4); background-position: 100% 50%; }
  .config-card, .server-card, .stat-card { transition: transform .25s var(--ease-out), border-color .2s, box-shadow .25s; }
  .server-card:hover, .stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
  .side-nav button.nav-item { transition: transform .2s var(--ease-out), background .15s, color .15s; }
  .side-nav button.nav-item:hover { transform: translateX(3px); }
  .ux-tile { transition: transform .2s var(--ease-out), border-color .15s, box-shadow .2s; }
  .ux-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
}
.side-nav button.nav-item:active { transform: scale(.985); }
.side-nav button.nav-item.active { box-shadow: 0 6px 18px rgba(124, 108, 255, .35); }
.icon-btn { transition: transform .15s var(--spring), background .15s, border-color .15s, color .15s; }
.icon-btn:active:not(:disabled) { transform: scale(.88); }
.preset { transition: transform .2s var(--spring), border-color .15s; }
@media (hover: hover) { .preset:hover { transform: scale(1.18); } }
.preset:active { transform: scale(.9); }
.chip-tag { transition: border-color .15s; }
.chip-x { transition: color .15s, transform .15s var(--spring); }
.chip-x:active { transform: scale(.8); }
input[type=text], input[type=number], input[type=search], textarea { transition: border-color .15s, box-shadow .2s; }
input[type=text]:focus, input[type=number]:focus, input[type=search]:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }

.switch .slider { transition: background .25s, border-color .25s, box-shadow .25s; }
.switch .slider::before { transition: transform .35s var(--spring), background .2s; }
.switch input:checked + .slider { box-shadow: 0 0 14px rgba(124, 108, 255, .45); }
.switch input:focus-visible + .slider { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------- overlays ---------- */

@keyframes sheetPop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }

.ux-dialog[open] { animation: sheetPop .32s var(--spring) both; }
.ux-dialog[open]::backdrop { animation: uiFade .25s ease both; }
.ux-toast { transition: opacity .25s, transform .4s var(--spring); }
.save-bar:not([hidden]) { animation: barIn .45s var(--spring) backwards; }
@keyframes barIn { from { opacity: 0; transform: translate(-50%, 36px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ux-queue .ux-q { animation: riseIn .35s var(--ease-out) backwards; }
.dc-embed, .dc-select { transition: border-color .2s; }

/* ---------- smooth page-to-page transitions (Chromium, Safari 18+; ignored elsewhere) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .topnav { view-transition-name: topnav; }
  ::view-transition-old(root) { animation: .16s ease both vtOut; }
  ::view-transition-new(root) { animation: .3s var(--ease-out) both vtIn; }
  @keyframes vtOut { to { opacity: 0; } }
  @keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }
}

/* ---------- reduced motion: keep functionality, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .spinner { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
  body::before, body::after { display: none; }
}

/* ---------- smoother popups: park the heavy ambient animation while one is open ---------- */
html:has(.ui-layer) body::before, html:has(.ui-layer) body::after { animation-play-state: paused; }
.ui-list { contain: content; }
.ui-opt { -webkit-tap-highlight-color: transparent; }
.ui-sel { -webkit-tap-highlight-color: transparent; }

/* ---------- "All settings" bar: glass that blends with the page instead of a flat black block ---------- */
@media (max-width: 860px) {
  .topnav { position: static; }                      /* a sticky nav stacked over the sticky back bar hid it while scrolling */
  .mobile-back {
    top: 8px; margin: 0 0 12px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
    background: linear-gradient(135deg, rgba(28, 33, 48, .94), rgba(22, 26, 38, .88));
    backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  }
  .mobile-back .back-btn { background: rgba(124, 108, 255, .16); border-color: rgba(124, 108, 255, .35); }
}

/* ---------- dashboard: info callouts, sliders, read-only values ---------- */
.info-box {
  margin: 12px 0 4px; padding: 11px 14px; font-size: .86rem; line-height: 1.5; color: var(--text-dim);
  background: linear-gradient(135deg, rgba(124, 108, 255, .10), rgba(255, 108, 171, .05));
  border: 1px solid rgba(124, 108, 255, .22); border-left: 3px solid var(--accent); border-radius: 10px; overflow-wrap: anywhere;
}
.info-box b { color: var(--text); font-weight: 650; }
.info-box code, .field-label .hint code { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; font-size: .92em; color: var(--text); }
.slider-wrap { display: flex; align-items: center; gap: 12px; width: min(100%, 320px); }
.slider-wrap output { min-width: 2.4em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-2); }
.slider-wrap input[type=range] { flex: 1; min-width: 0; height: 28px; background: none; border: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
.field-row .field-input > .dim { text-align: right; overflow-wrap: anywhere; }
@media (max-width: 860px) { .slider-wrap { width: 100%; } .field-row .field-input > .dim { text-align: left; } }

/* ---------- dashboard server slider ---------- */
.dash-servers-wrap { margin: -4px 0 18px; }
.dash-servers { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 6px; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.dash-servers::-webkit-scrollbar { display: none; }
.dash-servers.dragging { cursor: grabbing; scroll-snap-type: none; }
.dash-servers .ux-server { flex: none; scroll-snap-align: center; white-space: nowrap; transition: transform .2s var(--spring), border-color .15s, background .15s, color .15s, box-shadow .2s; }
.dash-servers .ux-server:active { transform: scale(.95); }
.dash-servers .ux-server.on { box-shadow: 0 0 0 3px rgba(124, 108, 255, .18), 0 6px 18px rgba(0, 0, 0, .3); }
@media (hover: hover) { .dash-servers .ux-server:hover { transform: translateY(-1px); } }
.dash-servers .ux-server img { pointer-events: none; }

/* ---------- picture upload: shaped thumbnails + confirm dialog ---------- */
.upl-thumb.shape-circle { width: 96px; height: 96px; border-radius: 50%; }
.upl-thumb.shape-banner { width: 190px; height: 68px; }
.up-confirm { width: min(440px, calc(100vw - 24px)); padding: 22px; }
.up-confirm h3 { margin: 0 0 14px; }
.up-stage { display: flex; justify-content: center; padding: 14px; border-radius: 14px; background: repeating-conic-gradient(#20232f 0% 25%, #191c26 0% 50%) 50% / 18px 18px; border: 1px solid var(--border); }
.up-stage img { max-width: 100%; max-height: 260px; object-fit: cover; display: block; }
.up-confirm[data-shape="circle"] .up-stage img { width: 220px; height: 220px; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent); }
.up-confirm[data-shape="banner"] .up-stage img { width: 100%; aspect-ratio: 17 / 6; border-radius: 10px; }
.up-confirm[data-shape="rect"] .up-stage img { border-radius: 10px; }
.up-name { margin: 10px 0 2px; font-weight: 600; font-size: .88rem; overflow-wrap: anywhere; }
.up-confirm .hint { color: var(--text-dim); font-size: .8rem; margin: 0 0 14px; }

/* ---------- Discord-style bot profile card ---------- */
.pf-card { width: min(100%, 340px); border-radius: 14px; overflow: visible; background: #232428; border: 1px solid #3a3c43; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); position: relative; padding-bottom: 14px; }
.pf-banner { height: 96px; border-radius: 13px 13px 0 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)) center / cover no-repeat; }
.pf-av { position: absolute; left: 16px; top: 54px; width: 84px; height: 84px; border-radius: 50%; border: 6px solid #232428; background: #1e1f22; }
.pf-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pf-dot { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; border: 4px solid #232428; background: #23a55a; }
.pf-dot.idle { background: #f0b232; } .pf-dot.dnd { background: #f23f43; } .pf-dot.invisible { background: #80848e; }
.pf-body { margin: 52px 16px 0; padding: 12px; border-radius: 10px; background: #111214; color: #dbdee1; font-size: .88rem; }
.pf-name { font-weight: 700; font-size: 1.1rem; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-tag { background: #5865f2; color: #fff; font-size: .62rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: .03em; }
.pf-bio { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-act { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2b2d31; color: #b5bac1; font-size: .82rem; }
.pf-act b { color: #fff; }

/* ---------- colour-role template picker (Color Roles page) ---------- */
.tpl-pick { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tpl-pick select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: .8rem; max-width: 100%; }

/* ---------- Roles page (drag & drop, groups) ---------- */
.rl-page { display: flex; flex-direction: column; gap: 14px; padding-bottom: 90px; }
.rl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rl-stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; }
.rl-stat b { font-size: 1.5rem; line-height: 1.1; }
.rl-stat span { color: var(--text); font-size: .85rem; margin-top: 2px; }
.rl-stat small { color: var(--text-dim); font-size: .74rem; }
.rl-note { margin: 0; color: var(--text-dim); font-size: .85rem; line-height: 1.45; }
.rl-note.bad { color: var(--warn); }
.rl-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rl-toolbar input[type=search] { flex: 1 1 180px; min-width: 0; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.rl-list { display: flex; flex-direction: column; gap: 6px; min-height: 8px; border-radius: 12px; }
.rl-list.rl-hot { outline: 2px dashed var(--accent); outline-offset: 2px; }
.rl-glist { padding: 6px 8px 8px 22px; }
.rl-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.rl-row:hover { border-color: rgba(124,108,255,.55); }
.rl-handle { cursor: grab; color: var(--text-dim); font-size: 1.15rem; line-height: 1; padding: 6px 4px; touch-action: none; user-select: none; -webkit-user-select: none; flex: none; }
.rl-handle:active { cursor: grabbing; }
.rl-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.rl-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.rl-meta { color: var(--text-dim); font-size: .78rem; white-space: nowrap; flex: none; }
.rl-tools { display: inline-flex; gap: 6px; align-items: center; flex: none; margin-left: auto; }
.rl-gsel { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: .78rem; max-width: 130px; flex: none; }
.rl-chk { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.rl-group { background: var(--panel-2); border: 1px solid var(--border); border-left: 4px solid var(--gc, var(--accent)); border-radius: 14px; padding: 8px; }
.rl-ghead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 2px 4px; }
.rl-gname { flex: 1 1 140px; min-width: 0; background: transparent; color: var(--text); font-weight: 700; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; }
.rl-gname:hover, .rl-gname:focus { border-color: var(--border); background: var(--bg-soft); outline: none; }
.rl-gcolor { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; }
.rl-group.rl-hot { outline: 2px dashed var(--accent); outline-offset: 2px; }
.rl-empty { color: var(--text-dim); font-size: .82rem; margin: 4px 6px; }
.rl-hide { display: none !important; }
.rl-dragging { opacity: .35; }
.rl-isdragging, .rl-isdragging * { cursor: grabbing !important; }
.rl-ghost { position: fixed; z-index: 1000; pointer-events: none; opacity: .95; box-shadow: 0 14px 40px rgba(0,0,0,.55); transform: rotate(.6deg); }
.rl-dropline { height: 4px; border-radius: 4px; background: var(--accent); margin: 1px 0; box-shadow: 0 0 10px var(--accent); flex: none; }
.rl-locked { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.rl-locked summary { cursor: pointer; font-weight: 600; }
.rl-locked .rl-row { margin-top: 6px; opacity: .8; }
.rl-why { color: var(--text-dim); font-size: .76rem; margin-left: auto; text-align: right; }
.rl-readonly .rl-handle, .rl-readonly .rl-tools, .rl-readonly .rl-gsel { display: none; }
.rl-filtering .rl-handle { opacity: .3; cursor: not-allowed; }
.rl-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
.rl-bar[hidden] { display: none; }
@media (max-width: 760px) {
  .rl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-row { flex-wrap: wrap; }
  .rl-name { flex-basis: 40%; }
  .rl-glist { padding-left: 8px; }
  .rl-gsel { max-width: 100%; }
}

/* ---------- Music tab (browser player + bot remote) ---------- */
.mu { --mu-c1: var(--accent); --mu-c2: var(--accent-2); }
.mu-link { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.mu-layout { display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); gap: 20px; align-items: start; }
.mu-layout.mu-off .mu-deck { opacity: .55; pointer-events: none; filter: saturate(.6); }

.mu-deck {
  position: sticky; top: 84px; isolation: isolate; overflow: hidden; padding: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mu-c1) 9%, var(--panel)), var(--panel) 55%);
  border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin;
  transition: opacity .3s, filter .3s;
}
.mu-deck::before {
  content: ""; position: absolute; inset: -30% -25% auto; height: 75%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 55% at 50% 10%, color-mix(in srgb, var(--mu-c1) 34%, transparent), transparent 72%);
  transition: background .8s;
}
.mu-out { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 6px; }
.mu-out .ux-filters button { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.mu-out svg { width: 16px; height: 16px; }
.mu-where { margin: 0; font-size: .8rem; color: var(--text-dim); text-align: center; min-height: 1.2em; }
.mu-live { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px var(--good); }

/* the record */
.mu-stage { display: grid; place-items: center; padding: 14px 0 8px; }
.mu-vinyl { position: relative; width: min(236px, 62vw); aspect-ratio: 1; margin-right: 22px; }
.mu-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 25deg, transparent 0 18%, rgba(255, 255, 255, .09) 24%, transparent 30% 68%, rgba(255, 255, 255, .07) 74%, transparent 80%),
    repeating-radial-gradient(circle at 50% 50%, #0c0e16 0 2px, #171a29 2px 4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06), 0 0 70px color-mix(in srgb, var(--mu-c1) 38%, transparent);
  animation: muSpin 8s linear infinite; animation-play-state: paused; will-change: transform;
}
.mu-disc.spin { animation-play-state: running; }
@keyframes muSpin { to { transform: rotate(360deg); } }
.mu-label {
  position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--mu-c1), var(--mu-c2)); color: #fff; font-weight: 800; font-size: 1.7rem;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .22), 0 0 0 4px rgba(0, 0, 0, .35); text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.mu-label::after { content: ""; position: absolute; width: 11%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
.mu-label span { position: relative; z-index: 1; transform: translateY(-34%); }
.mu-arm {
  position: absolute; right: -11%; top: -3%; width: 6px; height: 56%; border-radius: 6px; transform-origin: 50% 7%;
  background: linear-gradient(90deg, #b9bed4, #7b82a2); transform: rotate(-26deg); transition: transform .8s var(--spring);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}
.mu-arm::before { content: ""; position: absolute; top: -9px; left: -9px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d6daec, #6b7292); }
.mu-arm::after { content: ""; position: absolute; bottom: -8px; left: -3px; width: 12px; height: 16px; border-radius: 3px; background: #2a2f45; transform: rotate(10deg); }
.mu-vinyl.on .mu-arm { transform: rotate(6deg); }

.mu-meta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 8px; min-width: 0; }
.mu-title { margin: 0; font-size: 1.2rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
.mu-artist { margin: 0; color: var(--text-dim); font-size: .86rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.mu-eq i { display: block; width: 3px; height: 100%; border-radius: 2px; transform-origin: bottom; transform: scaleY(.25); background: linear-gradient(0deg, var(--mu-c2), var(--mu-c1)); animation: muEq 1s ease-in-out infinite; animation-play-state: paused; }
.mu-eq.on i { animation-play-state: running; }
.mu-eq i:nth-child(2) { animation-duration: .75s; animation-delay: -.25s; } .mu-eq i:nth-child(3) { animation-duration: 1.2s; animation-delay: -.5s; }
.mu-eq i:nth-child(4) { animation-duration: .9s; animation-delay: -.1s; } .mu-eq i:nth-child(5) { animation-duration: 1.1s; animation-delay: -.7s; }
@keyframes muEq { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

.mu-seekrow { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 10px; margin: 4px 0 10px; }
.mu-time { font-size: .76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mu-time:last-child { text-align: right; }
.mu-seek, .mu-vol { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; outline: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) 0 / var(--p, 0%) 100% no-repeat, var(--bg-soft); box-shadow: inset 0 0 0 1px var(--border); }
.mu-seek:disabled { opacity: .5; cursor: default; }
.mu-seek::-webkit-slider-thumb, .mu-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(124, 108, 255, .35), 0 2px 6px rgba(0, 0, 0, .4); transition: transform .2s var(--spring); }
.mu-seek::-moz-range-thumb, .mu-vol::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(124, 108, 255, .35); }
.mu-seek:hover::-webkit-slider-thumb, .mu-vol:hover::-webkit-slider-thumb { transform: scale(1.25); }
.mu-seek:focus-visible, .mu-vol:focus-visible { box-shadow: var(--glow); }

.mu-ctrls { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 12px; }
.mu-ctl { position: relative; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--text-dim); cursor: pointer; transition: color .15s, background .15s, transform .15s var(--spring); }
.mu-ctl svg { width: 20px; height: 20px; }
.mu-ctl:hover { color: var(--text); background: var(--panel-2); }
.mu-ctl:active { transform: scale(.88); }
.mu-ctl.on { color: var(--accent-2); }
.mu-one { display: none; position: absolute; right: 7px; bottom: 6px; font-size: .62rem; line-height: 1; color: var(--accent-2); }
.mu-ctl.one .mu-one { display: block; }
.mu-play { width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 26px rgba(124, 108, 255, .45); transition: transform .2s var(--spring), box-shadow .2s; }
.mu-play:hover { transform: scale(1.06); box-shadow: 0 12px 32px rgba(124, 108, 255, .6); }
.mu-play:active { transform: scale(.94); }
.mu-play svg { width: 26px; height: 26px; }
.mu-play .i-pause, .mu-play.on .i-play { display: none; } .mu-play.on .i-pause { display: block; }
.mu-play, .mu-ctl { overflow: hidden; }

.mu-volrow { display: grid; grid-template-columns: 20px 1fr 44px; align-items: center; gap: 10px; color: var(--text-dim); margin-bottom: 14px; }
.mu-volrow svg { width: 20px; height: 20px; }
.mu-volrow output { font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; }
.mu-vol { background: linear-gradient(90deg, var(--accent), var(--accent-2)) 0 / var(--vp, 60%) 100% no-repeat, var(--bg-soft); }

.mu-queue { border-top: 1px solid var(--border); padding-top: 12px; }
.mu-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mu-queue-head h3 { margin: 0; font-size: .95rem; }
.mu-queue-tools { display: flex; gap: 6px; }
.mu-qlist { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.mu-q { display: flex; align-items: center; gap: 6px; border-radius: 10px; padding: 3px; transition: background .15s; }
.mu-q:hover { background: var(--panel-2); }
.mu-q-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 3px; }
.mu-q-txt { display: flex; flex-direction: column; min-width: 0; }
.mu-q-txt b { font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-q-txt small { color: var(--text-dim); font-size: .74rem; }
.mu-mini { flex: none; width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.mu-q .icon-btn, .mu-tact .icon-btn { width: 30px; height: 30px; background: var(--panel-2); border-color: var(--border); }
.mu-q .icon-btn:disabled, .mu-tact .icon-btn:disabled { opacity: .35; cursor: default; }

/* library + playlists */
.mu-tabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mu-count { color: var(--text-dim); font-size: .84rem; }
.mu-list { display: flex; flex-direction: column; gap: 8px; }
.mu-track { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px 8px 8px; min-width: 0; transition: border-color .15s, box-shadow .2s, transform .2s var(--ease-out); }
.mu-track:hover { border-color: #3a4260; }
.mu-track.playing { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 108, 255, .14), 0 8px 24px rgba(0, 0, 0, .3); background: linear-gradient(90deg, rgba(124, 108, 255, .10), var(--panel) 60%); }
.mu-track.gone { opacity: .6; }
.mu-cover { position: relative; flex: none; width: 48px; height: 48px; border-radius: 12px; border: 0; padding: 0; cursor: pointer; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--c1, #444), var(--c2, #666)); display: inline-flex; align-items: center; justify-content: center; }
.mu-cover.gone-i { background: var(--panel-2); color: var(--text-dim); cursor: default; font-weight: 700; }
.mu-cover-i { font-weight: 800; font-size: 1.1rem; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.mu-cover-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 9, 14, .55); opacity: 0; transition: opacity .15s; }
.mu-cover-play svg { width: 22px; height: 22px; }
.mu-cover:hover .mu-cover-play, .mu-cover:focus-visible .mu-cover-play { opacity: 1; }
.mu-cover .mu-eq.mini { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); height: 12px; }
.mu-cover .mu-eq.mini i { width: 3px; background: #fff; }
.mu-tinfo { flex: 1; min-width: 0; }
.mu-ttitle { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-tsub { color: var(--text-dim); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.mu-dur { color: var(--text-dim); font-size: .8rem; font-variant-numeric: tabular-nums; flex: none; }
.mu-tact { display: flex; gap: 6px; flex: none; }
@media (hover: hover) { .mu-track:hover { transform: translateY(-1px); } }

.mu-pl { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.mu-pl-side { display: flex; flex-direction: column; gap: 10px; }
.mu-pl-side .btn { justify-content: center; }
.mu-pl-list { display: flex; flex-direction: column; gap: 6px; }
.mu-pl-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 14px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); transition: border-color .15s, background .15s, transform .2s var(--ease-out); }
.mu-pl-item small { color: var(--text-dim); font-size: .76rem; }
.mu-pl-item:hover { border-color: #3a4260; transform: translateX(3px); }
.mu-pl-item.on { border-color: var(--accent); background: linear-gradient(135deg, rgba(124, 108, 255, .18), rgba(255, 108, 171, .08)); }
.mu-pl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mu-pl-head h3 { margin: 0 0 2px; font-size: 1.15rem; }
.mu-pl-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.mu-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; margin-bottom: 16px; }
.mu-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.mu-pick:hover { border-color: var(--accent); }
.mu-pick small { color: var(--text-dim); font-size: .76rem; }
#muPick p { word-break: break-word; }

.mu .enter > * { animation-name: riseIn; }

@media (max-width: 860px) {
  .mu-layout { grid-template-columns: minmax(0, 1fr); }
  .mu-deck { position: relative; top: 0; max-height: none; overflow: hidden; }
  .mu-pl { grid-template-columns: minmax(0, 1fr); }
  .mu-pl-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .mu-pl-item { flex-shrink: 0; min-width: 150px; }
  .mu-track { flex-wrap: wrap; }
  .mu-tact { margin-left: auto; }
}

/* ---- Music: saved links ---- */
.mu-link-err { color: var(--danger, #ff6b6b); font-size: .85rem; margin: 0 0 12px; }
.mu-track .chip { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Music: cover art, sources, animations ---- */
.mu-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mu-mini { position: relative; overflow: hidden; }
.mu-label.art { background-size: cover; background-position: center; color: transparent; text-shadow: none; }
.mu-label.art span { opacity: 0; }

.mu-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mu-srcs span { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); }
.mu-link-hint { margin: 0 0 10px; font-size: .78rem; color: var(--text-dim); }
.mu-linkdlg { width: min(520px, 94vw); }
.mu-results { display: flex; flex-direction: column; gap: 4px; max-height: 38vh; overflow-y: auto; margin-bottom: 14px; scrollbar-width: thin; }
.mu-res { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, transform .15s var(--spring); }
.mu-res:hover { background: var(--panel-2); border-color: var(--accent); transform: translateX(3px); }
.mu-res:active { transform: scale(.98); }
.mu-res .mu-q-txt { flex: 1; }
.mu-res-add { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; flex: none; }
.mu-res-add svg { width: 15px; height: 15px; }
.mu-blocked { border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin-bottom: 10px; background: var(--panel-2); }
.mu-blocked-head { display: flex; gap: 10px; align-items: center; }
.mu-blocked-head .mu-art { position: static; width: 56px; height: 40px; border-radius: 8px; flex: none; }
.mu-blocked-head div { display: flex; flex-direction: column; min-width: 0; }
.mu-blocked-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-blocked-head small { color: var(--text-dim); }
.mu-pulse { animation: muPulse 1.1s ease-in-out infinite; }

/* visualizer ring sits behind the record */
.mu-viz { position: absolute; left: -16%; top: -16%; width: 132%; height: 132%; pointer-events: none; z-index: 0; }

@media (prefers-reduced-motion: no-preference) {
  .mu-deck.playing::before { animation: muBreathe 5s ease-in-out infinite; }
  .mu-vinyl.swap { animation: muSwap .65s var(--spring); }
  .mu-meta.swap .mu-title, .mu-meta.swap .mu-artist { animation: muSlide .5s var(--ease-out) both; }
  .mu-meta.swap .mu-artist { animation-delay: .06s; }
  .mu-list.fresh .mu-track { animation: muRow .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
  .mu-res { animation: muRow .35s var(--ease-out) both; }
  .mu-track.playing .mu-cover { animation: muGlow 2.2s ease-in-out infinite; }
  .mu-play.on { animation: muPlayPulse 2.4s ease-in-out infinite; }
  .mu-seek::-webkit-slider-thumb { transition: transform .2s var(--spring), box-shadow .2s; }
  .mu-seek:active::-webkit-slider-thumb { transform: scale(1.5); box-shadow: 0 0 0 7px rgba(124, 108, 255, .3); }
}
@keyframes muBreathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes muSwap { 0% { transform: scale(.84) rotate(-10deg); opacity: .15; } 100% { transform: none; opacity: 1; } }
@keyframes muSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes muRow { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes muGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 108, 255, .0); } 50% { box-shadow: 0 0 0 5px rgba(124, 108, 255, .28); } }
@keyframes muPlayPulse { 0%, 100% { box-shadow: 0 10px 26px rgba(124, 108, 255, .45); } 50% { box-shadow: 0 10px 40px rgba(255, 108, 171, .6); } }
@keyframes muPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---- card editor: greet tabs, variable drawer, library, read-only ---- */
.ce-scopes { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 0; }
.ce-scopebar { display: block; padding: 8px 12px; }
.ce-scopebar .ce-check { align-items: flex-start; flex-wrap: wrap; }
.ce-ro .ce-props, .ce-ro .ce-ov, .ce-ro .ce-order, .ce-ro .ce-layer .ce-mini, .ce-ro [data-ce-act="dup"], .ce-ro [data-ce-act="del"], .ce-ro .ce-add { pointer-events: none; opacity: .45; }
.ce-ro .ce-stage canvas { cursor: not-allowed; }
.ce-pad { padding-top: 22px; }
.ce-dirs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0; }
.ce-dirs .ce-b.on { background: var(--accent); color: #fff; }
.ce-vd { position: absolute; z-index: 60; max-height: 260px; overflow: auto; background: var(--bg-elev, #1b1f33); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.55); padding: 4px; }
.ce-vd-head { font-size: 12px; padding: 6px 8px; font-weight: 600; }
.ce-vd-grp { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; padding: 6px 8px 2px; }
.ce-vd-i { display: flex; gap: 8px; align-items: baseline; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.ce-vd-i code { font-weight: 700; color: var(--accent); }
.ce-vd-i span { opacity: .8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-vd-i em { opacity: .55; font-size: 12px; font-style: normal; }
.ce-vd-i.sel, .ce-vd-i:hover { background: rgba(124,108,255,.22); }
.ce-vd-i.dim { opacity: .45; }
.ce-lib { position: absolute; inset: 0 0 0 auto; width: min(420px, 100%); z-index: 50; background: var(--bg-soft); border-left: 1px solid var(--border); overflow: auto; padding: 10px 12px 16px; box-shadow: -12px 0 30px rgba(0,0,0,.4); }
.ce-lib[hidden] { display: none; }
.ce-lib .event-tabs { margin: 8px 0; }
.ce-lib-save { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: center; }
.ce-lib-save input { flex: 1; min-width: 120px; }
.ce-lib-i { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ce-lib-i > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ce-lib-v { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 6px; margin-bottom: 6px; }
.ce-libx { margin-left: auto; }
@media (max-width: 640px) { .ce-lib { width: 100%; } }

/* Bot Settings page (owner only) */
.bs-gauges .stat-card { min-width: 220px; flex: 1 1 220px; max-width: 280px; }
.bs-gauges .lbl { min-height: 2.4em; }
.bs-bar { height: 6px; border-radius: 999px; background: var(--panel-2); margin-top: 10px; overflow: hidden; }
.bs-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; transition: width .5s var(--ease-out, ease); }
.bs-bar i.warn { background: linear-gradient(90deg, var(--warn), var(--bad)); }
#bsChart { width: 100%; display: block; }
.bs-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: .8rem; color: var(--text-dim); }
.bs-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 6px; }
.bs-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; }
.bs-kv div, .bs-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.bs-kv span, .bs-line span { color: var(--text-dim); overflow-wrap: anywhere; }
#rlTop h3, #rlHits h3 { font-size: .95rem; margin: 18px 0 4px; }
.bs-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .bs-gauges .stat-card { max-width: none; } }