/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/ui/avatar.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* ── Avatar Component ──────────────────────────────────────────────────────── */

.syph-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}

/* Avatar circle */
.syph-avatar {
  border-radius: 999px;
  background: #3a3c43;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: var(--text);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.syph-avatar img,
.syph-avatar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

/* Status ring — applied on the wrap so it isn't clipped by overflow:hidden */
.syph-avatar-wrap.ring { box-shadow: 0 0 0 2px var(--muted2); }

.syph-avatar-wrap.ring.online   { box-shadow: 0 0 0 2px var(--ok); }
.syph-avatar-wrap.ring.idle     { box-shadow: 0 0 0 2px var(--idle); }
.syph-avatar-wrap.ring.away     { box-shadow: 0 0 0 2px var(--idle); }
.syph-avatar-wrap.ring.dnd      { box-shadow: 0 0 0 2px var(--bad); }
.syph-avatar-wrap.ring.offline  { box-shadow: 0 0 0 2px #4a4d55; }
.syph-avatar-wrap.ring.inactive { box-shadow: 0 0 0 2px #0b0c0e; }

/* When a border IS assigned, make avatar bg transparent so frame bg is clean */
/* ── Sizes ─────────────────────────────────────────────────────────────────── */

/* xs: avatar 22px, border frame 32px */
.syph-avatar-wrap.xs { width: 32px; height: 32px; }
.syph-avatar-wrap.xs .syph-avatar { width: 22px; height: 22px; font-size: 9px; }
.syph-avatar-wrap.xs.no-border { width: 22px; height: 22px; }

/* sm: avatar 32px, border frame 48px */
.syph-avatar-wrap.sm { width: 48px; height: 48px; }
.syph-avatar-wrap.sm .syph-avatar { width: 32px; height: 32px; font-size: 12px; }
.syph-avatar-wrap.sm.no-border { width: 32px; height: 32px; }

/* md: avatar 34px, border frame 50px */
.syph-avatar-wrap.md { width: 50px; height: 50px; }
.syph-avatar-wrap.md .syph-avatar { width: 34px; height: 34px; font-size: 13px; }
.syph-avatar-wrap.md.no-border { width: 34px; height: 34px; }

/* lg: avatar 56px, border frame 84px */
.syph-avatar-wrap.lg { width: 84px; height: 84px; }
.syph-avatar-wrap.lg .syph-avatar { width: 56px; height: 56px; font-size: 20px; }
.syph-avatar-wrap.lg.no-border { width: 56px; height: 56px; }

/* xl: avatar 64px, border frame 96px */
.syph-avatar-wrap.xl { width: 96px; height: 96px; }
.syph-avatar-wrap.xl .syph-avatar { width: 64px; height: 64px; font-size: 24px; }
.syph-avatar-wrap.xl.no-border { width: 64px; height: 64px; }

/* Future: Lottie border container */
/* .syph-avatar-lottie { position: absolute; inset: 0; z-index: 2; pointer-events: none; } */

/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/layout.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
/* Core Layout Styles */

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-to-content:focus {
  left: 0;
}

.app {
  height: 100%;
  display: flex;
  position: relative;
  background:
    radial-gradient(circle at top left, rgba(88, 101, 242, 0.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(24, 195, 126, 0.10), transparent 22%),
    linear-gradient(180deg, #17181c 0%, #111216 100%);
}

/* Rail (Workspace Tray) — dropdown from server logo */
.railWrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-dropdown);
  pointer-events: none;
}

.railWrap.open {
  pointer-events: auto;
}

.rail {
  position: absolute;
  left: 0;
  width: 80px;
  background: rgba(15, 16, 18, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 0 0 12px 12px;
  border: 1px solid var(--line);
  border-top: none;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 60vh;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.railWrap.open .rail {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
}

/* Workspace pills in tray are full opacity */
.rail .pill {
  opacity: 1;
}

/* Smaller divider for compact tray */
.rail .divider {
  width: 32px;
}

/* Sidebar wrapper (transparent on desktop, positioned on mobile) */
.left-wrap {
  display: contents;
}

/* Sidebar (Left Panel) */
.left {
  flex: 0 0 340px;
  background:
    linear-gradient(180deg, rgba(56, 58, 64, 0.16) 0%, rgba(38, 40, 45, 0.12) 100%),
    var(--bg2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* .serverBanner styles in visual-depth.css */

.leftHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.leftHeader .title {
  flex: 1 1;
}

.leftHeader .name {
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  color: var(--text);
}

.leftHeader .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.03em;
}

/* Module strip and button styles in module-strip.css */

.leftBody {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}

/* ── Voice Indicators (broadcast / whisper pills) ─────────────────────────── */

.voice-indicators {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 12px;
  background: var(--bg3);
  border-top: 1px solid var(--line);
}

.voice-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.voice-pill.broadcasting {
  background: rgba(237, 66, 69, 0.15);
  color: #ed4245;
  animation: voice-pulse 1.2s ease-in-out infinite;
}

.voice-pill.whispering {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  animation: voice-pulse 1.2s ease-in-out infinite;
}

.voice-pill.incoming-broadcast {
  background: rgba(250, 166, 26, 0.15);
  color: #faa61a;
  font-weight: 700;
  text-transform: none;
}

.voice-pill.incoming-whisper {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  font-weight: 700;
  text-transform: none;
}

.voice-pill-sub {
  font-weight: 600;
  text-transform: none;
  opacity: 0.7;
}

@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.userStrip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg3);
  border-top: 1px solid var(--line);
}

.userStrip .who {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.userStripAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.userStripAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.userStrip .userInfo {
  min-width: 0;
  flex: 1 1;
}

.userStrip .u {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.userStrip .userHandle {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.userStrip .btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.12s ease;
}

.userStrip .btn:hover {
  background: var(--bg4);
  color: var(--text);
}

.userStrip .btn.active {
  color: var(--accent);
}

.userStrip .btn.active-bad {
  color: var(--danger);
}

.userStrip .btn.dm-unread {
  position: relative;
  color: var(--accent);
}

.userStrip .btn .dm-unread-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--bg1);
  line-height: 1;
}

/* Main View */
.main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%),
    rgba(31, 33, 38, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  min-height: 56px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.crumb {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.pageTitle {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  color: var(--text);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar-channel-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 4px;
}

.spacer {
  flex: 1 1;
}

.gear {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: all 0.12s ease;
}

.gear:hover {
  background: var(--bg3);
  color: var(--text);
}

.mainBody {
  flex: 1 1;
  display: flex;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.view {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  background:
    radial-gradient(circle at top, rgba(88, 101, 242, 0.07), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, rgba(255, 255, 255, 0) 100%);
}

/* ── Notification bell & panel ──────────────────────────────────────────── */

.notif-has-unread {
  color: var(--accent) !important;
}

.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--bad);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
  line-height: 1.2;
}

.notif-panel {
  position: absolute;
  bottom: 56px;
  left: 0;
  width: 320px;
  max-height: 400px;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  z-index: 40;
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.notif-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-mark-all {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
}

.notif-mark-all:hover {
  text-decoration: underline;
}

.notif-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
}

.notif-close:hover {
  color: var(--text);
}

.notif-panel-body {
  flex: 1 1;
  overflow-y: auto;
}

.notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.notif-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.notif-item:hover {
  background: var(--bg2);
}

.notif-unread {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.notif-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.notif-item-body {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-item-time {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Mobile hamburger button (hidden on desktop) ─────────────────────────── */

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 7px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  z-index: var(--z-header);
}

.mobile-menu-btn:hover {
  background: var(--bg3);
  color: var(--text);
}

/* ── Animated hamburger bars ──────────────────────────────────────────────── */

.hbg-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    width     0.28s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.28s ease;
}

/* Open state — top rotates down to center and crosses */
.mobile-menu-btn.is-open .hbg-top {
  transform: translateY(7px) rotate(45deg);
}

/* Open state — middle collapses to a dot (2px × 2px square) */
.mobile-menu-btn.is-open .hbg-mid {
  width: 2px;
  border-radius: 50%;
}

/* Open state — bottom rotates up to center and crosses */
.mobile-menu-btn.is-open .hbg-bot {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-sidebar-backdrop {
  display: none;
}

/* ── Responsive: Tablet (≤ 1024px) ───────────────────────────────────────── */

@media (max-width: 1024px) {
  .left {
    flex: 0 0 280px;
  }

  .membersWrap {
    display: none;
  }
}

/* ── Responsive: Mobile (≤ 768px) ────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Show hamburger button */
  .mobile-menu-btn {
    display: grid;
  }

  /* Hide sidebar by default */
  .left-wrap {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100%;
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .left-wrap.open {
    transform: translateX(0);
  }

  .left-wrap .left {
    flex: none;
    width: 100%;
    height: 100%;
  }

  /* Backdrop overlay */
  .mobile-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sidebar) - 1);
    background: rgba(0, 0, 0, 0.5);
  }

  /* Members panel hidden */
  .membersWrap {
    display: none;
  }

  /* Main view full width */
  .topbar {
    padding: 8px 12px;
    min-height: 48px;
  }

  .view {
    padding: 10px;
  }

  /* Settings modal full-screen on mobile */
  .settings-overlay .settings-modal {
    width: 100%;
    height: 100%;
    border-radius: 0;
    max-width: none;
    max-height: none;
  }

  /* Settings sidebar collapses */
  .settings-modal .settings-nav {
    width: 200px;
    min-width: 200px;
  }
}

/* ── Responsive: Small mobile (≤ 480px) ──────────────────────────────────── */

@media (max-width: 480px) {
  .left-wrap {
    width: 100%;
  }

  .topbar .crumb {
    display: none;
  }

  .pageTitle {
    font-size: 15px;
  }

  /* Full-width settings on very small screens */
  .settings-modal .settings-nav {
    display: none;
  }

  .settings-modal .settings-body {
    width: 100%;
  }
}

/* ── Workspace creation modal ─────────────────────────────────────────────── */

.workspace-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(6, 7, 9, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.workspace-modal {
  width: min(420px, 100%);
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.96) 0%, rgba(30, 31, 34, 0.98) 100%);
  border: 1px solid var(--line2);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.workspace-modal-header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.workspace-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.workspace-modal-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.workspace-modal-body {
  padding: 18px 20px 20px;
}

.workspace-modal-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted2);
}

.workspace-modal-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: rgba(15, 16, 18, 0.76);
  color: var(--text);
  font-size: 14px;
}

.workspace-modal-input::placeholder {
  color: var(--muted2);
}

.workspace-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.workspace-modal-btn {
  min-width: 110px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.workspace-modal-btn:hover {
  background: var(--panel);
}

.workspace-modal-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.workspace-modal-btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent) 0%, #7280ff 100%);
  box-shadow: 0 12px 24px rgba(88, 101, 242, 0.24);
}

.workspace-modal-btn.primary:hover {
  filter: brightness(1.06);
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/core/Sidebar/user-quick-panel.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
/* ─── User Quick Panel (popover above user strip) ────────────────────────── */

.uqp {
  position: fixed;
  z-index: 999;
  width: 300px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: uqp-in 0.12s ease-out;
  overflow: hidden;
}

@keyframes uqp-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Profile card area ───────────────────────────────────────────────────── */

.uqp-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 10px;
}

.uqp-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.uqp-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.uqp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uqp-avatar span {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.uqp-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--bg2);
}

.uqp-info {
  flex: 1 1;
  min-width: 0;
}

.uqp-display-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uqp-username {
  font-size: 12px;
  color: var(--muted2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Dividers ────────────────────────────────────────────────────────────── */

.uqp-divider {
  height: 1px;
  background: var(--line);
  margin: 0 14px;
}

/* ── Custom status ───────────────────────────────────────────────────────── */

.uqp-custom-status {
  padding: 6px 14px 10px;
}

.uqp-custom-status-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
  margin-bottom: 4px;
}

.uqp-custom-status-input {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.uqp-custom-status-input::placeholder {
  color: var(--muted2);
}

.uqp-custom-status-input:focus {
  border-color: var(--accent);
}

/* ── Status picker ───────────────────────────────────────────────────────── */

.uqp-status-section {
  padding: 6px;
}

.uqp-status-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
  padding: 2px 8px 4px;
}

.uqp-status-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
}

.uqp-status-option:hover {
  background: var(--bg4);
}

.uqp-status-option.active {
  background: var(--bg3);
}

.uqp-status-dot-pick {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.uqp-status-dot-pick.online { background: var(--ok); }
.uqp-status-dot-pick.away   { background: var(--idle); }
.uqp-status-dot-pick.dnd    { background: var(--bad); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.uqp-footer {
  padding: 6px;
  display: flex;
  gap: 4px;
}

.uqp-edit-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
  padding: 7px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

.uqp-edit-profile-btn:hover {
  background: var(--bg4);
  color: var(--text);
}

.uqp-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
  padding: 7px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.uqp-logout-btn:hover {
  background: var(--bg4);
  color: var(--bad);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/markdown.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Sypher Markdown Rendered Content ────────────────────────────────────── */

/* ── Emphasis ─────────────────────────────────────────────────────────────── */

.md-bold       { font-weight: 900; }
.md-italic     { font-style: italic; }
.md-underline  { text-decoration: underline; }
.md-strike     { text-decoration: line-through; color: var(--muted); }

/* ── Highlight ────────────────────────────────────────────────────────────── */

.md-highlight {
  background: rgba(240, 178, 50, 0.25);
  border-radius: 3px;
  padding: 0 2px;
}

/* ── Spoiler ──────────────────────────────────────────────────────────────── */

.md-spoiler {
  background: var(--bg4);
  color: transparent;
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.md-spoiler.revealed {
  color: var(--text);
  background: rgba(49, 51, 56, 0.5);
  cursor: default;
}

.md-block-spoiler {
  margin: 10px 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(28, 31, 39, 0.96), rgba(16, 19, 26, 0.98));
  overflow: hidden;
}

.md-block-spoiler-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.md-block-spoiler-label {
  font-weight: 800;
}

.md-block-spoiler-state {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted2);
}

.md-block-spoiler-body {
  display: none;
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.md-block-spoiler.revealed .md-block-spoiler-body {
  display: block;
}

/* ── Inline Code ──────────────────────────────────────────────────────────── */

.md-code-inline {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── Code Blocks ──────────────────────────────────────────────────────────── */

.md-code-block {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  line-height: 1.45;
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
}

.md-code-block code {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
}

/* ── Blockquote ───────────────────────────────────────────────────────────── */

.md-blockquote {
  border-left: 3px solid var(--line2);
  padding-left: 12px;
  margin: 4px 0;
  color: var(--muted);
}

/* ── Callouts ─────────────────────────────────────────────────────────────── */

.md-callout {
  border-left: 3px solid;
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  margin: 8px 0;
  background: rgba(0, 0, 0, 0.15);
}

.md-callout.info    { border-color: var(--accent); }
.md-callout.warning { border-color: var(--idle); }
.md-callout.note    { border-color: var(--muted); }
.md-callout.success { border-color: var(--ok); }
.md-callout.faq     { border-color: var(--green); }

.md-callout-title {
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.md-callout.info    .md-callout-title { color: var(--accent); }
.md-callout.warning .md-callout-title { color: var(--idle); }
.md-callout.note    .md-callout-title { color: var(--muted); }
.md-callout.success .md-callout-title { color: var(--ok); }
.md-callout.faq     .md-callout-title { color: var(--green); }

/* ── Table ────────────────────────────────────────────────────────────────── */

.md-table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
  width: 100%;
}

.md-table th,
.md-table td {
  border: 1px solid var(--line2);
  padding: 6px 10px;
  text-align: left;
}

.md-table th {
  background: var(--bg3);
  font-weight: 900;
}

/* ── Horizontal Rule ──────────────────────────────────────────────────────── */

.md-hr {
  border: none;
  border-top-style: solid;
  border-top-color: var(--line2);
  margin: 12px 0;
}

/* ── Superscript / Subscript ──────────────────────────────────────────────── */

.md-sup { font-size: 0.75em; vertical-align: super; }
.md-sub { font-size: 0.75em; vertical-align: sub; }

/* ── Smart Time ───────────────────────────────────────────────────────────── */

.md-smart-time {
  background: rgba(88, 101, 242, 0.12);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
  cursor: default;
}

/* ── Links ────────────────────────────────────────────────────────────────── */

.md-link {
  color: var(--accent);
  text-decoration: none;
}

.md-link:hover {
  text-decoration: underline;
}

.md-silenced-link {
  opacity: 0.8;
}

/* ── Images ───────────────────────────────────────────────────────────────── */

.md-img {
  max-width: 100%;
  border-radius: 8px;
  margin: 4px 0;
}

/* ── Color Text ───────────────────────────────────────────────────────────── */

.md-color-text {
  /* color is set inline via style prop */
}

/* ── Math ─────────────────────────────────────────────────────────────────── */

.md-math-inline {
  font-size: 0.95em;
}

.md-math-block {
  margin: 8px 0;
  padding: 12px;
  background: var(--bg3);
  border-radius: 8px;
  overflow-x: auto;
  text-align: center;
}

/* ── Custom Emoji ─────────────────────────────────────────────────────────── */

.md-custom-emoji {
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  vertical-align: -0.6em;
  object-fit: contain;
}

/* ── Mentions ─────────────────────────────────────────────────────────────── */

.md-mention {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.2), rgba(88, 101, 242, 0.12));
  color: #dfe4ff;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(88, 101, 242, 0.24);
  font-weight: 700;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  vertical-align: middle;
  text-decoration: none;
  font: inherit;
}

.md-mention:hover {
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.28), rgba(88, 101, 242, 0.16));
  transform: translateY(-1px);
}

.md-mention:disabled {
  cursor: default;
  opacity: 0.88;
}

.md-mention .syph-avatar-wrap.xs {
  width: 18px;
  height: 18px;
}

/* ── Lists ────────────────────────────────────────────────────────────────── */

ul.md-list {
  margin: 4px 0;
  padding-left: 24px;
  list-style: disc;
}

ol.md-list {
  margin: 4px 0;
  padding-left: 24px;
  list-style: decimal;
}

.md-list li {
  margin: 2px 0;
  display: list-item;
}

.md-task-list-item-shell {
  list-style: none;
  margin-left: -22px;
}

.md-task-item {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 12px;
  width: 100%;
  cursor: pointer;
}

.md-task-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.md-task-item-toggle {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.md-task-item-box {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--bg0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: white;
  flex: 0 0 auto;
  margin-top: 1px;
}

.md-task-item.checked .md-task-item-box {
  background: var(--ok);
  border-color: var(--ok);
}

.md-task-item-content {
  flex: 1 1;
}

.md-task-item.checked .md-task-item-content {
  color: var(--muted);
  text-decoration: line-through;
}

.md-details {
  margin: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(33, 38, 48, 0.94), rgba(18, 22, 31, 0.96));
  overflow: hidden;
}

.md-details-summary {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.md-details-summary::-webkit-details-marker {
  display: none;
}

.md-details-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: var(--accent);
  transition: transform 0.15s ease;
}

.md-details[open] .md-details-summary::before {
  transform: rotate(90deg);
}

.md-details-body {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.md-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  margin: 0 4px 0 0;
  vertical-align: middle;
}

.md-status-chip-value {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 800;
}

.md-status-chip.active,
.md-status-chip.open {
  border-color: rgba(35, 165, 89, 0.35);
  background: rgba(35, 165, 89, 0.12);
}

.md-status-chip.done,
.md-status-chip.closed {
  border-color: rgba(88, 101, 242, 0.35);
  background: rgba(88, 101, 242, 0.12);
}

.md-status-chip.archived,
.md-status-chip.cancelled {
  border-color: rgba(242, 63, 67, 0.35);
  background: rgba(242, 63, 67, 0.12);
}

.md-progress-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  margin: 4px 6px 4px 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  vertical-align: middle;
}

.md-progress-chip-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
}

.md-progress-chip-value {
  color: var(--accent);
}

.md-progress-chip-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.md-progress-chip-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(88, 101, 242, 0.85), rgba(125, 158, 255, 0.95));
}

/* ── Headings ─────────────────────────────────────────────────────────────── */

.md-heading {
  margin: 8px 0 4px;
  color: var(--text);
  font-weight: 900;
}

h1.md-heading { font-size: 1.5em; }
h2.md-heading { font-size: 1.25em; }
h3.md-heading { font-size: 1.1em; }
h4.md-heading { font-size: 1em; }
h5.md-heading { font-size: 0.9em; }
h6.md-heading { font-size: 0.85em; color: var(--muted); }

/* ── Paragraphs in messages ───────────────────────────────────────────────── */

.ch-msg-text p {
  margin: 0;
}

.ch-msg-text p + p {
  margin-top: 4px;
}

/* ── highlight.js theme (dark) ────────────────────────────────────────────── */

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link { color: #c678dd; }

.hljs-function .hljs-keyword { color: #c678dd; }

.hljs-string,
.hljs-attr,
.hljs-addition { color: #98c379; }

.hljs-number,
.hljs-meta { color: #d19a66; }

.hljs-comment,
.hljs-quote,
.hljs-deletion { color: #5c6370; font-style: italic; }

.hljs-title,
.hljs-name { color: #e06c75; }

.hljs-variable,
.hljs-template-variable { color: #e06c75; }

.hljs-built_in,
.hljs-type { color: #e5c07b; }

.hljs-regexp,
.hljs-symbol { color: #56b6c2; }

.hljs-attribute { color: #d19a66; }

.hljs-params { color: var(--text); }

.hljs-tag { color: #e06c75; }

.hljs-subst { color: var(--text); }

/* ── Rainbow Animation ───────────────────────────────────────────────────── */

.md-rainbow {
  background: linear-gradient(
    90deg,
    #ff0000, #ff7700, #ffff00, #00ff00, #0077ff, #8800ff, #ff0000
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: md-rainbow-shift 3s linear infinite;
}

@keyframes md-rainbow-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Pulse Animation ─────────────────────────────────────────────────────── */

.md-pulse {
  display: inline-block;
  animation: md-pulse-beat 1.5s ease-in-out infinite;
}

@keyframes md-pulse-beat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.05); }
}

/* ── Stacked: pulse + rainbow on same element ────────────────────────────── */

.md-pulse.md-rainbow {
  display: inline-block;
  background: linear-gradient(
    90deg,
    #ff0000, #ff7700, #ffff00, #00ff00, #0077ff, #8800ff, #ff0000
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: md-pulse-beat 1.5s ease-in-out infinite, md-rainbow-shift 3s linear infinite;
}

/* ── Gradient Animation ─────────────────────────────────────────────────── */

.md-gradient {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: md-gradient-shift 3s linear infinite;
}

@keyframes md-gradient-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/ui/embed.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
/* ── Embed Card (Discord-style) ────────────────────────────────────────────── */

.embed-card {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line2);
  border-radius: 0 14px 14px 0;
  padding: 12px 14px;
  max-width: 520px;
  position: relative;
  overflow: hidden;
}

.embed-banner-image {
  display: block;
  width: calc(100% + 28px);
  height: 140px;
  object-fit: cover;
  margin: -12px -14px 12px;
}

.embed-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.embed-author-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  object-fit: cover;
}

.embed-thumbnail {
  float: right;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  margin: 0 0 8px 12px;
}

.embed-title {
  font-weight: 900;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 6px;
}

.embed-description {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 8px;
}

.embed-fields-inline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 8px;
}

.embed-field {
  min-width: 0;
}

.embed-field-block {
  margin-bottom: 8px;
}

.embed-field-name {
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 2px;
}

.embed-field-value {
  font-size: 13px;
  color: var(--muted);
}

.embed-footer {
  font-size: 11px;
  color: var(--muted2);
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.embed-body-image {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 10px;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/core/MainView/rules-pullout.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
/* ── Rules Pull-out Panel ──────────────────────────────────────────────────── */

.rules-pullout {
  max-height: 0;
  overflow: hidden;
  background: var(--bg1);
  border-bottom: 1px solid transparent;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.rules-pullout.open {
  max-height: 50vh;
  border-bottom-color: var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--bg1);
}

.rules-pullout-inner {
  display: flex;
  flex-direction: column;
  max-height: 50vh;
}

.rules-pullout-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    var(--bg2);
  flex-shrink: 0;
}

.rules-pullout-title {
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1 1;
  color: var(--text);
}

.rules-pullout-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s, color 0.12s;
}

.rules-pullout-close:hover {
  background: var(--bg3);
  color: var(--text);
}

.rules-pullout-body {
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rules-pullout-markdown {
  font-size: 14px;
  line-height: 1.5;
}

.rules-pullout-embeds {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rules-pullout-empty {
  font-size: 13px;
  color: var(--muted2);
  font-style: italic;
}

/* ── Pullout cards (shared by pins + bookmarks) ──────────────────────────── */

.pullout-card {
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.88), rgba(38, 40, 45, 0.92));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pullout-card-clickable {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.pullout-card-clickable:hover {
  background: linear-gradient(180deg, rgba(56, 58, 64, 0.96), rgba(43, 45, 49, 0.96));
  border-color: rgba(88, 101, 242, 0.32);
}

.pullout-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pullout-card-author {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}

.pullout-card-time {
  font-size: 11px;
  color: var(--muted2);
  flex-shrink: 0;
}

.pullout-card-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.pullout-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pullout-card-meta {
  font-size: 11px;
  color: var(--muted2);
}

.pullout-card-action {
  font-size: 11px;
  font-weight: 700;
  color: var(--bad);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.12s;
}

.pullout-card-action:hover {
  background: color-mix(in srgb, var(--bad) 15%, transparent);
}

/* ── Rules button active state ─────────────────────────────────────────────── */

.rulesBtn.active {
  background: rgba(88, 101, 242, 0.15);
  color: var(--accent);
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/core/Members/members.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
/* ── Members Panel ──────────────────────────────────────────────────────── */

/* Members tray */
.membersWrap {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
}

/* Static tab — always visible on the left edge of the wrap */
.membersTrayTab {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  width: 28px;
  height: 64px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 900;
  writing-mode: vertical-lr;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background 0.12s, color 0.12s;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
}

.membersTrayTab:hover {
  background: var(--panel);
  color: var(--text);
}

.membersWrap.open .membersTrayTab {
  background: var(--panel);
  color: var(--text);
}

.members {
  width: 240px;
  background: var(--bg2);
  border-left: 1px solid var(--line2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.2s ease;
}

.membersWrap:not(.open) .members {
  width: 0;
  border-left: 0;
}

/* Header */
.memHeader {
  height: 48px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-weight: 900;
  font-size: 13px;
  flex: 0 0 auto;
  white-space: nowrap;
  position: relative;
}

.memOnlineCount {
  font-size: 10px;
  font-weight: 700;
  color: var(--ok);
  margin-left: auto;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.memHeaderCount {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}

.memCountBadge {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted2);
  background: var(--bg4);
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 1px 8px;
  transition: background 0.12s, color 0.12s;
}

.memHeaderCount:hover .memCountBadge {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Status breakdown tooltip */
.memStatusTooltip {
  position: absolute;
  top: calc(100% + 6px);
  right: 10px;
  background: var(--bg0);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 200;
}

.memHeaderCount:hover .memStatusTooltip {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.memStatusRow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}

.memStatusDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 8px;
}

.memStatusDot.online   { background: var(--ok); }
.memStatusDot.idle     { background: linear-gradient(135deg, var(--ok) 50%, var(--idle) 50%); }
.memStatusDot.away     { background: var(--idle); }
.memStatusDot.dnd      { background: var(--bad); }
.memStatusDot.offline  { background: #4a4d55; }
.memStatusDot.inactive { background: #0b0c0e; }

.memStatusRowLabel {
  flex: 1 1;
  color: var(--muted);
}

.memStatusRowCount {
  font-weight: 900;
  color: var(--text);
}

/* Member list */
.memList {
  flex: 1 1;
  overflow: auto;
  padding: 8px;
}

/* Avatar styling now handled by Avatar component (ui/avatar.css) */

/* ── Member row ────────────────────────────────────────────────────────── */

.mem {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
  overflow: visible;
  position: relative;
}

.mem:hover {
  background: #383a40;
}

.memInfo {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1;
}

.memName {
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px;
  padding-bottom: 3px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}


/* Status bar — starts at bottom-center of avatar, pill on right end only */
.memStatusBar {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 8px 0 0;
  /* pulls back exactly half the avatar width so bar starts at its center */
  margin-left: -17px;
  padding-left: 17px;
  border-radius: 0 999px 999px 0;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
}

.memStatusLabel {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

/* ── Status-specific colors ────────────────────────────────────────────── */

.mem.online .memStatusBar   { background: var(--ok); }
.mem.idle .memStatusBar     { background: linear-gradient(135deg, var(--ok) 50%, var(--idle) 50%); }
.mem.away .memStatusBar     { background: var(--idle); }
.mem.dnd .memStatusBar      { background: var(--bad); }
.mem.offline .memStatusBar  { background: #4a4d55; }
.mem.inactive .memStatusBar { background: #0b0c0e; border: 1px solid #0b0c0e; }

.mem.online .memStatusLabel   { color: #fff; }
.mem.idle .memStatusLabel     { color: #000; }
.mem.away .memStatusLabel     { color: #000; }
.mem.dnd .memStatusLabel      { color: #fff; }
.mem.offline .memStatusLabel  { color: #ccc; }
.mem.inactive .memStatusLabel { color: #6b6f77; }

/* Custom status text */
.memCustomStatus {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px;
  margin-top: 1px;
  line-height: 1.2;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/ui/imageInput.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
/* ── ImageInput — shared image field component ───────────────────────────── */

.img-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Header row (label + mode toggle) ────────────────────────────────────── */

.img-input-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.img-mode-group {
  display: flex;
  gap: 3px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 3px;
}

.img-mode-btn {
  height: 22px;
  padding: 0 10px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  letter-spacing: 0.03em;
}

.img-mode-btn.active {
  background: var(--accent);
  color: #fff;
}

.img-mode-btn:not(.active):hover {
  color: var(--text);
}

/* ── URL mode ─────────────────────────────────────────────────────────────── */

.img-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.img-url-row .ann-input {
  flex: 1 1;
}

/* ── Upload mode ──────────────────────────────────────────────────────────── */

.img-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.img-upload-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.img-upload-btn:hover {
  background: var(--bg4);
  border-color: var(--accent);
  color: var(--text);
}

.img-filename {
  flex: 1 1;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.img-no-file {
  font-size: 12px;
  color: var(--muted2);
}

/* ── Preview strip ────────────────────────────────────────────────────────── */

.img-preview {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line2);
  background: var(--bg2);
  cursor: crosshair;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* height is set inline via the previewHeight prop */
}

.img-preview.avatar {
  width: 96px;
  max-width: 100%;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(31, 36, 47, 0.98), rgba(16, 20, 28, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 22px rgba(0, 0, 0, 0.18);
  cursor: default;
  padding: 10px;
}

.img-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.img-preview.avatar img,
.img-preview.avatar video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 12px;
}

/* Drag hint — fades in on hover */
.img-preview-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}

.img-preview:hover .img-preview-hint {
  opacity: 1;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/announcements/announcements.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
/* Announcements Module Styles */

.ann-feed {
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-right: 8px;
  padding-bottom: 36px;
}

/* ── New Announcement Button ─────────────────────────── */
.ann-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 16px);
  margin: 10px 8px 4px;
  height: 34px;
  border-radius: 10px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ann-new-btn:hover {
  background: rgba(88, 101, 242, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Modal Overlay ───────────────────────────────────── */
.ann-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background:
    radial-gradient(circle at top, rgba(92, 108, 232, 0.16), transparent 40%),
    rgba(3, 5, 10, 0.72);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ── Modal Shell ─────────────────────────────────────── */
.ann-modal {
  background:
    linear-gradient(180deg, rgba(24, 30, 41, 0.98), rgba(11, 15, 23, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(860px, calc(100vw - 380px));
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 30px 84px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: annModalIn 0.16s ease;
}

@keyframes annModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* ── Modal Header ────────────────────────────────────── */
.ann-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 26px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(52, 61, 110, 0.18), rgba(52, 61, 110, 0.02)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  flex-shrink: 0;
}

.ann-modal-title {
  font-size: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 5px;
}

.ann-modal-sub {
  max-width: 500px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.ann-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ann-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

/* ── Type Selector Grid ──────────────────────────────── */
.ann-type-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  gap: 10px;
  padding: 18px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.ann-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 108px;
  padding: 14px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(29, 35, 46, 0.96), rgba(16, 20, 29, 0.96));
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  text-align: center;
}

.ann-type-card:hover {
  transform: translateY(-2px);
  border-color: rgba(132, 148, 255, 0.35);
  background:
    linear-gradient(180deg, rgba(37, 45, 58, 0.98), rgba(18, 24, 34, 0.98));
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18);
}

.ann-type-card.active {
  border-color: rgba(132, 148, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(70, 82, 155, 0.34), rgba(24, 31, 47, 0.96));
  box-shadow:
    0 18px 32px rgba(29, 37, 89, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ann-type-icon {
  font-size: 24px;
  line-height: 1;
}

.ann-type-name {
  font-size: 12px;
  font-family: var(--font-condensed);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ann-type-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

/* ── Modal Scrollable Body ───────────────────────────── */
.ann-modal-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 24px 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 12%);
}

/* ── Form Layout ─────────────────────────────────────── */
.ann-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ann-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ann-form-row--full {
  grid-column: 1 / -1;
}

.ann-form-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.ann-form-row--half > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Form Inputs ─────────────────────────────────────── */
.ann-label {
  font-size: 11px;
  font-family: var(--font-condensed);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.ann-label-opt {
  font-weight: 400;
  text-transform: none;
  color: var(--muted2);
  letter-spacing: 0;
}

.ann-input {
  min-height: 42px;
  padding: 0 14px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}

.ann-input--sm {
  width: 72px;
  flex-shrink: 0;
}

.ann-textarea {
  padding: 12px 14px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  width: 100%;
  min-height: 80px;
}

.ann-input,
.ann-textarea {
  background: var(--bg0);
  border: 1px solid var(--line2);
  color: var(--text);
  outline: none;
  box-shadow: none;
}

.ann-input:focus,
.ann-textarea:focus {
  border-color: var(--accent);
  box-shadow: none;
}

/* ── Key/Value & List Rows ───────────────────────────── */
.ann-kv-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.ann-kv-row .ann-input {
  flex: 1 1;
}

.ann-remove-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--muted2);
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  font-size: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.ann-remove-btn:hover {
  background: rgba(242, 63, 67, 0.12);
  color: var(--bad);
  border-color: var(--bad);
}

.ann-add-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.1s, color 0.1s;
}

.ann-add-btn:hover {
  background: var(--bg4);
  color: var(--text);
}

/* ── Segmented Buttons ───────────────────────────────── */
.ann-btn-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ann-seg-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.12s;
}

.ann-seg-btn:hover {
  color: var(--text);
  border-color: var(--panel2);
}

.ann-seg-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ann-seg-critical.active { background: var(--bad);  border-color: var(--bad);  }
.ann-seg-warning.active  { background: var(--idle); border-color: var(--idle); color: #000; }
.ann-seg-info.active     { background: #3b82f6;     border-color: #3b82f6;     }

/* ── Toggle ──────────────────────────────────────────── */
.ann-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
}

.ann-toggle-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.ann-toggle {
  height: 28px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.12s;
}

.ann-toggle.on {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

/* ── Modal Footer ────────────────────────────────────── */
.ann-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 26px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  flex-shrink: 0;
}

.ann-footer-btn {
  min-height: 40px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(32, 36, 46, 0.94), rgba(18, 22, 31, 0.94));
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    background 0.15s ease;
}

.ann-footer-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.ann-footer-btn--primary {
  background:
    linear-gradient(180deg, rgba(125, 158, 255, 0.94), rgba(88, 101, 242, 0.92));
  border-color: rgba(132, 148, 255, 0.45);
  color: #fff;
  box-shadow: 0 16px 28px rgba(36, 44, 104, 0.28);
}

.ann-footer-btn--primary:hover {
  filter: brightness(1.08);
}

@media (max-width: 1100px) {
  .ann-modal {
    width: min(860px, calc(100vw - 48px));
  }

  .ann-type-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .ann-modal-overlay {
    padding: 12px;
  }

  .ann-modal {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 20px;
  }

  .ann-modal-header,
  .ann-type-grid,
  .ann-modal-body,
  .ann-modal-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .ann-type-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ann-form-row--half {
    grid-template-columns: 1fr;
  }

  .ann-modal-footer {
    flex-wrap: wrap;
  }

  .ann-footer-btn {
    flex: 1 1 180px;
  }
}

/* ── Sidebar ────────────────────────────────────────── */
.announcements-sidebar .sidebar-section {
  margin-bottom: 24px;
}

.announcements-sidebar .sidebar-section-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0 16px 8px;
  margin-top: 16px;
}

.announcements-sidebar .sidebar-item {
  padding: 10px 16px;
  margin: 2px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.announcements-sidebar .sidebar-item:hover {
  background: var(--bg3);
}

.announcements-sidebar .sidebar-item.active {
  background: var(--bg4);
}

.announcements-sidebar .sidebar-item .title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcements-sidebar .sidebar-item .subtitle {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Announcement Card (Discord embed style) ────────── */
.ann-card {
  background:
    radial-gradient(circle at top right, rgba(88, 101, 242, 0.10), transparent 24%),
    linear-gradient(180deg, rgba(49, 51, 56, 0.96), rgba(35, 36, 40, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 0;
  position: relative;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
  transform-origin: center center;
  will-change: transform;
}

.ann-card:hover {
  transform: translateY(-2px);
  border-color: rgba(132, 148, 255, 0.14);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.34),
    0 22px 46px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

.ann-card.pinned {
  border-color: rgba(240, 178, 50, 0.35);
  background:
    radial-gradient(circle at top right, rgba(240, 178, 50, 0.10), transparent 24%),
    linear-gradient(160deg, rgba(49, 51, 56, 0.98) 0%, rgba(240, 178, 50, 0.05) 100%);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(240, 178, 50, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

.ann-banner {
  /* Inset from card edges so the border stroke is always visible */
  margin: 8px 8px 0;
  height: 188px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bg4) 0%, var(--bg1) 100%);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.ann-body {
  padding: 20px 22px 22px;
}

.ann-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.ann-meta {
  flex: 1 1;
  min-width: 0;
}

.ann-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #cfd6ff;
  margin-bottom: 2px;
}

.ann-author .syph-avatar-wrap {
  width: 24px !important;
  height: 24px !important;
}

.ann-author .syph-avatar {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}

.ann-date {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
}

.ann-pin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(240, 178, 50, 0.12);
  color: var(--idle);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(240, 178, 50, 0.25);
  margin-bottom: 12px;
  box-shadow: 0 8px 16px rgba(240, 178, 50, 0.08);
}

.ann-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: var(--bg4);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}

.ann-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ann-title {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.3;
}

.ann-content {
  font-size: 14px;
  color: var(--text);
  line-height: 1.88;
  opacity: 0.94;
  margin-bottom: 0;
  max-width: 72ch;
}

/* ── Extra Fields ────────────────────────────────────── */
.ann-fields {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Legacy layouts — CSS grid, uniform columns */
.ann-fields--1x9 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 6px;
  gap: 6px;
}

.ann-fields--3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 6px;
  gap: 6px;
}

/* Per-field inline layout — flex column of rows */
.ann-fields--mixed {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Each row is a flex container; fields stretch equally to fill it */
.ann-fields-row {
  display: flex;
  gap: 6px;
}

.ann-fields-row .ann-field {
  flex: 1 1;
  min-width: 0;
}

/* ── Inline toggle button (modal extra fields) ───────────────────────────── */
.ann-inline-btn {
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: all 0.12s;
}

.ann-inline-btn:hover {
  border-color: var(--panel2);
  color: var(--text);
}

.ann-inline-btn.active {
  background: rgba(88, 101, 242, 0.14);
  border-color: var(--accent);
  color: var(--accent);
}

.ann-field {
  background: linear-gradient(180deg, rgba(38, 40, 45, 0.92), rgba(30, 31, 34, 0.92));
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.ann-field-title {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-condensed);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.ann-field-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

/* ── Card action buttons (edit + delete, hover-reveal) ─ */
.ann-card-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
}

.ann-card:hover .ann-card-actions {
  opacity: 1;
  transform: translateY(0);
}

.ann-edit-btn,
.ann-delete-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ann-edit-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.ann-delete-btn:hover {
  background: rgba(242, 63, 67, 0.7);
  color: #fff;
  border-color: rgba(242, 63, 67, 0.5);
}

/* ── Edit modal — locked type indicator ─────────────── */
.ann-type-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.ann-type-locked-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.ann-type-locked-note {
  font-size: 11px;
  color: var(--muted2);
}

/* ── Poll Voting UI ─────────────────────────────────── */
.ann-poll-options {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ann-poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(38, 40, 45, 0.94), rgba(30, 31, 34, 0.94));
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
  text-align: left;
  font-family: inherit;
}

.ann-poll-option:hover {
  transform: translateY(-1px);
  border-color: rgba(88, 101, 242, 0.35);
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.98), rgba(35, 36, 40, 0.98));
}

.ann-poll-option.voted {
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(168, 85, 247, 0.08);
}

.ann-poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(168, 85, 247, 0.15);
  border-radius: 8px 0 0 8px;
  transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.ann-poll-option.voted .ann-poll-bar {
  background: rgba(168, 85, 247, 0.25);
}

.ann-poll-label {
  position: relative;
  z-index: 1;
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ann-poll-pct {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 12px;
  flex-shrink: 0;
}

.ann-poll-option.voted .ann-poll-pct {
  color: #a855f7;
}

.ann-poll-footer {
  font-size: 11px;
  color: var(--muted2);
  padding: 4px 2px 0;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/ui/emojiPicker.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* ── Emoji Picker Popup ────────────────────────────────────────────────────── */

.emoji-picker-popup {
  position: fixed;
  width: 352px;
  max-height: 420px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 12px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: emoji-picker-in 0.12s ease-out;
}

@keyframes emoji-picker-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Search ── */

.emoji-picker-search {
  margin: 8px 8px 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
  font-size: 13px;
  outline: none;
  flex-shrink: 0;
}

.emoji-picker-search:focus {
  border-color: var(--accent);
}

.emoji-picker-search::placeholder {
  color: var(--muted2);
}

/* ── Category tabs ── */

.emoji-picker-tabs {
  display: flex;
  gap: 0;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line2);
  flex-shrink: 0;
  overflow-x: auto;
}

.emoji-picker-tabs::-webkit-scrollbar {
  display: none;
}

.emoji-picker-tab {
  width: 32px;
  height: 28px;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
  border-radius: 6px 6px 0 0;
  transition: background 0.1s;
  flex-shrink: 0;
  opacity: 0.6;
}

.emoji-picker-tab:hover {
  background: var(--line2);
  opacity: 1;
}

.emoji-picker-tab.active {
  border-bottom-color: var(--accent);
  opacity: 1;
}

/* ── Scrollable grid area ── */

.emoji-picker-scroll {
  flex: 1 1;
  overflow-y: auto;
  padding: 4px 8px;
  min-height: 0;
}

.emoji-picker-scroll::-webkit-scrollbar {
  width: 6px;
}

.emoji-picker-scroll::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 3px;
}

/* ── Section labels ── */

.emoji-picker-section-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 6px 0 2px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--bg3);
  z-index: 1;
}

/* ── Emoji grid (8 columns) ── */

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 2px;
  gap: 2px;
}

/* ── Individual emoji cell ── */

.emoji-picker-cell {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 22px;
  display: grid;
  place-items: center;
  transition: background 0.1s;
  padding: 0;
}

.emoji-picker-cell:hover {
  background: var(--line2);
}

/* Custom emoji image inside cell */
.emoji-picker-custom-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* ── Empty search state ── */

.emoji-picker-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted2);
  font-size: 13px;
}

/* ── Status bar (bottom) ── */

.emoji-picker-status {
  height: 32px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--line2);
  flex-shrink: 0;
  background: var(--bg2);
  border-radius: 0 0 12px 12px;
}

.emoji-picker-status-emoji {
  font-size: 18px;
}

.emoji-picker-status-name {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emoji-picker-status-hint {
  font-size: 12px;
  color: var(--muted2);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/events/events.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/* Events Module Styles */

/* ── New Event Button ─────────────────────────────────── */
.ev-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 16px);
  margin: 10px 8px 4px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(88, 101, 242, 0.22);
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.18), rgba(88, 101, 242, 0.08));
  color: #dfe4ff;
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(88, 101, 242, 0.14);
}

.ev-new-btn:hover {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.28), rgba(88, 101, 242, 0.12));
  border-color: rgba(114, 128, 255, 0.45);
  color: #fff;
  transform: translateY(-1px);
}

/* ── Sidebar ──────────────────────────────────────────── */
.ev-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.ev-filter-btns {
  display: flex;
  gap: 6px;
  padding: 6px 8px 2px;
}

.ev-filter-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(49, 51, 56, 0.72);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.12s;
}

.ev-filter-btn:hover {
  color: var(--text);
  border-color: var(--panel2);
}

.ev-filter-btn.active {
  background: rgba(88, 101, 242, 0.18);
  border-color: rgba(88, 101, 242, 0.45);
  color: #dfe4ff;
  box-shadow: 0 8px 18px rgba(88, 101, 242, 0.12);
}

/* ── Sidebar Section Headers ──────────────────────────── */
.ev-section-header {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-condensed);
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0 16px 8px;
  margin-top: 16px;
}

/* ── Sidebar Event Items ──────────────────────────────── */
.ev-item {
  padding: 12px 14px;
  margin: 2px 8px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.44) 0%, rgba(38, 40, 45, 0.26) 100%);
  cursor: pointer;
  transition: all 0.12s ease;
}

.ev-item:hover {
  background: linear-gradient(180deg, rgba(64, 66, 73, 0.62) 0%, rgba(43, 45, 49, 0.38) 100%);
  border-color: rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}

.ev-item.active {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.24), rgba(88, 101, 242, 0.08));
  border-color: rgba(88, 101, 242, 0.32);
  box-shadow: 0 12px 22px rgba(88, 101, 242, 0.10);
}

.ev-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ev-item-meta {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ev-item-recur {
  font-size: 10px;
  color: var(--idle);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ── Tag Badge ────────────────────────────────────────── */
.ev-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  flex-shrink: 0;
}

/* ── Header Card (detail view) ────────────────────────── */
.ev-header-card {
  background:
    radial-gradient(circle at top right, rgba(88, 101, 242, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(43, 45, 49, 0.96) 0%, rgba(30, 31, 34, 0.98) 68%, rgba(88, 101, 242, 0.10) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  padding: 24px 26px;
  margin-bottom: 22px;
  position: relative;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.32),
    0 24px 44px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

.ev-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ev-signup-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
}

.ev-signup-badge--filled {
  background: rgba(35, 165, 89, 0.12);
  color: var(--ok);
  border-color: rgba(35, 165, 89, 0.25);
}

.ev-signup-badge--count {
  background: rgba(88, 101, 242, 0.12);
  color: var(--accent);
  border-color: rgba(88, 101, 242, 0.25);
}

.ev-title {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.3;
}

.ev-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ev-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

.ev-meta-icon {
  font-size: 14px;
  opacity: 0.7;
}

.ev-meta-recur {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(240, 178, 50, 0.12);
  color: var(--idle);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(240, 178, 50, 0.2);
}

/* ── Header Actions Row ───────────────────────────────── */
.ev-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.ev-action-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(64, 66, 73, 0.85), rgba(49, 51, 56, 0.9));
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ev-action-btn:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(75, 78, 86, 0.92), rgba(56, 58, 64, 0.96));
  transform: translateY(-1px);
}

.ev-leave-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid rgba(242, 63, 67, 0.3);
  background: rgba(242, 63, 67, 0.1);
  color: var(--bad);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ev-leave-btn:hover {
  background: rgba(242, 63, 67, 0.2);
  border-color: var(--bad);
}

.ev-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
}

.ev-status-indicator--open {
  background: rgba(35, 165, 89, 0.12);
  color: var(--ok);
  border: 1px solid rgba(35, 165, 89, 0.25);
}

.ev-status-indicator--closed {
  background: rgba(125, 128, 135, 0.12);
  color: var(--muted2);
  border: 1px solid rgba(125, 128, 135, 0.25);
}

.ev-status-indicator--cancelled {
  background: rgba(242, 63, 67, 0.12);
  color: var(--bad);
  border: 1px solid rgba(242, 63, 67, 0.25);
}

/* ── Body Grid (2-column) ─────────────────────────────── */
.ev-body-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

.ev-body-grid--single {
  grid-template-columns: 1fr;
}

.ev-body-left,
.ev-body-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Section Label ────────────────────────────────────── */
.ev-section-label {
  font-size: 11px;
  font-family: var(--font-condensed);
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

/* ── Description ──────────────────────────────────────── */
.ev-description {
  font-size: 14px;
  color: var(--text);
  line-height: 1.82;
  opacity: 0.9;
  margin-bottom: 4px;
  max-width: 72ch;
}

/* ── Schedule / Agenda Items ──────────────────────────── */
.ev-schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ev-schedule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(34, 39, 49, 0.94), rgba(18, 22, 31, 0.94));
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.ev-schedule-label {
  flex: 1 1;
  min-width: 0;
}

.ev-schedule-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ev-schedule-dur {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(88, 101, 242, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
}

.ev-schedule-time {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted2);
  white-space: nowrap;
}

/* ── Role Card ────────────────────────────────────────── */
.ev-role-card {
  --ev-glow-x: 82%;
  --ev-glow-y: 18%;
  --ev-glow-opacity: 0;
  background:
    radial-gradient(circle at top right, rgba(88, 101, 242, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(55, 58, 66, 0.92), rgba(34, 37, 44, 0.96));
  border: 1px solid rgba(128, 144, 255, 0.18);
  border-radius: 18px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ev-role-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(114, 128, 255, 0.95), rgba(88, 101, 242, 0.18));
}

.ev-role-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(720px circle at var(--ev-glow-x) var(--ev-glow-y), rgba(104, 124, 255, 0.16), rgba(104, 124, 255, 0.08) 22%, rgba(104, 124, 255, 0.028) 48%, rgba(104, 124, 255, 0.012) 62%, transparent 82%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.01) 14%, transparent 28%);
  opacity: var(--ev-glow-opacity);
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.ev-role-card:hover {
  transform: translateY(-1px);
  border-color: rgba(128, 144, 255, 0.32);
  background:
    radial-gradient(circle at top right, rgba(88, 101, 242, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(60, 63, 72, 0.95), rgba(37, 40, 48, 0.98));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 24px rgba(88, 101, 242, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ev-role-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ev-role-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}

.ev-role-emoji {
  font-size: 16px;
}

.ev-role-slots {
  font-size: 11px;
  color: #c2cae8;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.12);
  border: 1px solid rgba(88, 101, 242, 0.16);
}

.ev-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(240, 178, 50, 0.12);
  color: var(--idle);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid rgba(240, 178, 50, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Signup Grid (avatar placeholders inside role card) ── */
.ev-signup-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 15, 22, 0.34), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ev-signup-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg4);
  border: 1px solid var(--line2);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted2);
  overflow: hidden;
  flex-shrink: 0;
}

.ev-signup-avatar--filled {
  border-color: var(--accent);
  background: rgba(88, 101, 242, 0.1);
  color: var(--accent);
  font-weight: 700;
}

.ev-signup-avatar--filled .syph-avatar-wrap {
  width: 34px !important;
  height: 34px !important;
}

.ev-signup-avatar--filled .syph-avatar {
  width: 34px !important;
  height: 34px !important;
  font-size: 13px !important;
}

.ev-signup-avatar--empty {
  border-style: dashed;
}

.ev-signup-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(114, 128, 255, 0.55);
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.22), rgba(88, 101, 242, 0.10));
  color: #dfe4ff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.12s;
  width: 100%;
  box-shadow: 0 10px 20px rgba(88, 101, 242, 0.12);
}

.ev-signup-btn:hover {
  background: linear-gradient(180deg, rgba(101, 115, 255, 0.28), rgba(88, 101, 242, 0.14));
  border-color: rgba(136, 149, 255, 0.74);
  transform: translateY(-1px);
}

.ev-signup-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Roster Section ───────────────────────────────────── */
.ev-roster {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ev-roster-team {
  --ev-glow-x: 82%;
  --ev-glow-y: 18%;
  --ev-glow-opacity: 0;
  background:
    radial-gradient(circle at top right, rgba(240, 178, 50, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(50, 54, 62, 0.88), rgba(34, 38, 45, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ev-roster-team::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(240, 178, 50, 0.92), rgba(240, 178, 50, 0.14));
}

.ev-roster-team::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(720px circle at var(--ev-glow-x) var(--ev-glow-y), rgba(255, 207, 107, 0.15), rgba(255, 207, 107, 0.075) 22%, rgba(255, 207, 107, 0.026) 48%, rgba(255, 207, 107, 0.01) 62%, transparent 82%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.009) 14%, transparent 28%);
  opacity: var(--ev-glow-opacity);
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.ev-roster-team:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(240, 178, 50, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ev-roster-team-name {
  font-size: 13px;
  font-weight: 900;
  color: #f2f4fa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ev-roster-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(10, 12, 18, 0.20);
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.ev-roster-member + .ev-roster-member {
  margin-top: 6px;
}

.ev-roster-member:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  transform: translateX(1px);
}

.ev-roster-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ev-roster-avatar .syph-avatar-wrap {
  width: 28px !important;
  height: 28px !important;
}

.ev-roster-avatar .syph-avatar {
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
}

.ev-roster-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}

.ev-roster-role {
  font-size: 11px;
  color: #c6ccdd;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Empty State ──────────────────────────────────────── */
.ev-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  gap: 12px;
  color: var(--muted2);
}

.ev-empty-icon {
  font-size: 48px;
  opacity: 0.4;
}

.ev-empty-text {
  font-size: 15px;
  font-weight: 600;
}

.ev-empty-sub {
  font-size: 13px;
  color: var(--muted2);
  opacity: 0.7;
}

/* ── Modal Overlay ────────────────────────────────────── */
.ev-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background:
    radial-gradient(circle at top, rgba(80, 123, 221, 0.18), transparent 42%),
    rgba(3, 5, 10, 0.72);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ── Modal Shell ──────────────────────────────────────── */
.ev-modal {
  background:
    linear-gradient(180deg, rgba(24, 30, 41, 0.98), rgba(11, 15, 23, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  width: min(860px, calc(100vw - 380px));
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 30px 84px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: evModalIn 0.16s ease;
}

@keyframes evModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* ── Modal Header ─────────────────────────────────────── */
.ev-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 26px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(47, 70, 130, 0.18), rgba(47, 70, 130, 0.02)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  flex-shrink: 0;
}

.ev-modal-title {
  font-size: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 5px;
}

.ev-modal-sub {
  max-width: 540px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.ev-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ev-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

/* ── Modal Scrollable Body ────────────────────────────── */
.ev-modal-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 24px 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 12%);
}

/* ── Form Layout ──────────────────────────────────────── */
.ev-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ev-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ev-form-row--full {
  grid-column: 1 / -1;
}

.ev-form-row--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.ev-form-row--half > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Form Inputs ──────────────────────────────────────── */
.ev-label {
  font-size: 11px;
  font-family: var(--font-condensed);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.ev-label-opt {
  font-weight: 400;
  text-transform: none;
  color: var(--muted2);
  letter-spacing: 0;
}

.ev-input {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 13, 20, 0.84);
  color: var(--text);
  padding: 0 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ev-input:focus {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(88, 101, 242, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ev-input--sm {
  width: 72px;
  flex-shrink: 0;
}

.ev-textarea {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(9, 13, 20, 0.84);
  color: var(--text);
  padding: 12px 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  width: 100%;
  min-height: 80px;
}

.ev-textarea:focus {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(88, 101, 242, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ── Select ───────────────────────────────────────────── */
.ev-select {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(9, 13, 20, 0.84);
  color: var(--text);
  padding: 0 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237d8087'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.ev-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.16);
}

/* ── Segmented Buttons ────────────────────────────────── */
.ev-btn-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ev-seg-btn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 17, 25, 0.78);
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.ev-seg-btn:hover {
  transform: translateY(-1px);
  color: var(--text);
  border-color: rgba(132, 148, 255, 0.22);
}

.ev-seg-btn.active {
  background:
    linear-gradient(180deg, rgba(125, 158, 255, 0.94), rgba(88, 101, 242, 0.92));
  border-color: rgba(132, 148, 255, 0.45);
  color: #fff;
}

/* ── Toggle ───────────────────────────────────────────── */
.ev-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(28, 33, 43, 0.96), rgba(15, 19, 27, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ev-toggle-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.ev-toggle {
  min-height: 30px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 16, 24, 0.82);
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.12s;
}

.ev-toggle.on {
  background:
    linear-gradient(180deg, rgba(79, 200, 144, 0.94), rgba(43, 155, 106, 0.94));
  border-color: rgba(106, 220, 167, 0.4);
  color: #fff;
}

/* ── Key/Value & List Rows ────────────────────────────── */
.ev-kv-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.ev-kv-row .ev-input {
  flex: 1 1;
}

.ev-remove-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted2);
  cursor: pointer;
  font-size: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.ev-remove-btn:hover {
  background: rgba(242, 63, 67, 0.12);
  color: var(--bad);
  border-color: var(--bad);
}

.ev-add-btn {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.1s, color 0.1s;
}

.ev-add-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

/* ── Modal Footer ─────────────────────────────────────── */
.ev-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 26px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  flex-shrink: 0;
}

.ev-footer-btn {
  min-height: 40px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(32, 36, 46, 0.94), rgba(18, 22, 31, 0.94));
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    background 0.15s ease;
}

.ev-footer-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.ev-footer-btn--primary {
  background:
    linear-gradient(180deg, rgba(125, 158, 255, 0.94), rgba(88, 101, 242, 0.92));
  border-color: rgba(132, 148, 255, 0.45);
  color: #fff;
  box-shadow: 0 16px 28px rgba(36, 44, 104, 0.28);
}

.ev-footer-btn--primary:hover {
  filter: brightness(1.1);
  background: var(--accent);
}

/* ── Role Builder Row (modal) ─────────────────────────── */
.ev-role-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 8px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(28, 33, 43, 0.9), rgba(14, 18, 26, 0.9));
}

.ev-role-row .ev-input {
  flex: 1 1;
  min-width: 0;
}

.ev-role-row .ev-input--emoji {
  width: 48px;
  flex: 0 0 48px;
  text-align: center;
  font-size: 16px;
}

.ev-input--duration {
  width: 64px;
  flex: 0 0 64px;
  text-align: center;
}

.ev-agenda-total {
  margin-top: 6px;
  font-size: 11px;
  color: var(--accent);
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ev-role-row .ev-input--max {
  width: 64px;
  flex: 0 0 64px;
}

.ev-role-row .ev-input--team {
  width: 100px;
  flex: 0 0 100px;
}

/* ── Emoji Button ────────────────────────────────────── */
.ev-emoji-btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(11, 16, 24, 0.82);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
  padding: 0;
  line-height: 1;
}
.ev-emoji-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

/* ── Agenda Time Badge ───────────────────────────────── */
.ev-agenda-time {
  font-size: 11px;
  color: #dfe4ff;
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.16);
  border: 1px solid rgba(132, 148, 255, 0.2);
}

@media (max-width: 1100px) {
  .ev-modal {
    width: min(860px, calc(100vw - 48px));
  }
}

@media (max-width: 720px) {
  .ev-modal-overlay {
    padding: 12px;
  }

  .ev-modal {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 20px;
  }

  .ev-modal-header,
  .ev-modal-body,
  .ev-modal-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .ev-form-row--half {
    grid-template-columns: 1fr;
  }

  .ev-role-row {
    padding: 10px;
  }

  .ev-modal-footer {
    flex-wrap: wrap;
  }

  .ev-footer-btn {
    flex: 1 1 180px;
  }
}

/* ── Move To Buttons ─────────────────────────────────── */
.ev-move-btn {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(88, 101, 242, 0.38);
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.12);
  color: #dfe4ff;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ev-move-btn:hover {
  background: rgba(88, 101, 242, 0.22);
  color: #fff;
}
.ev-move-btn--sm {
  padding: 2px 8px;
  font-size: 10px;
}

/* ── Detail View Container ────────────────────────────── */
.ev-detail {
  max-width: 980px;
  padding: 10px 0 28px;
}

/* ── Tab Bar ─────────────────────────────────────────── */
.ev-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 12px;
}

.ev-tab {
  padding: 9px 18px;
  font-size: 12px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(49, 51, 56, 0.62);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.ev-tab:hover {
  color: var(--text);
  background: rgba(56, 58, 64, 0.9);
}

.ev-tab.active {
  color: #dfe4ff;
  border-color: rgba(88, 101, 242, 0.38);
  background: rgba(88, 101, 242, 0.18);
  box-shadow: 0 10px 18px rgba(88, 101, 242, 0.10);
}

/* ── Attendance Panel ────────────────────────────────── */
.ev-attendance {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Attendance Summary Bar ──────────────────────────── */
.ev-att-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ev-att-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg3);
  border: 1px solid var(--line);
  min-width: 64px;
}

.ev-att-stat--clickable {
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.ev-att-stat--clickable:hover {
  border-color: var(--stat-color, var(--line2));
  background: var(--stat-bg, var(--bg4));
}

.ev-att-stat--clickable.active {
  border-color: var(--stat-color, var(--accent));
  background: var(--stat-bg, rgba(88, 101, 242, 0.12));
}

.ev-att-stat-num {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.ev-att-stat--clickable .ev-att-stat-num {
  color: var(--stat-color, var(--text));
}

.ev-att-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Attendance Toolbar ──────────────────────────────── */
.ev-att-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ev-att-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
  min-width: 180px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg3);
  border: 1px solid var(--line);
  color: var(--muted);
}

.ev-att-search-wrap:focus-within {
  border-color: var(--accent);
}

.ev-att-search {
  flex: 1 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.ev-att-search::placeholder {
  color: var(--muted2);
}

.ev-att-quick-actions {
  display: flex;
  gap: 6px;
}

/* ── Attendance Grid (card layout from files) ────────── */
.ev-att-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

/* ── Attendance Team Section ─────────────────────────── */
.ev-att-team-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ev-att-team-header {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 2px;
}

/* ── Attendance Card ─────────────────────────────────── */
.ev-att-card {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.12s;
}

.ev-att-card:hover {
  border-color: var(--line2);
}

.ev-att-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ev-att-card-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ev-att-card-user .syph-avatar-wrap {
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0;
}

.ev-att-card-user .syph-avatar {
  width: 32px !important;
  height: 32px !important;
  font-size: 12px !important;
}

.ev-att-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ev-att-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-att-card-role {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Attendance Status Badge ─────────────────────────── */
.ev-att-status-badge {
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

/* ── Attendance Status Buttons ───────────────────────── */
.ev-att-card-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ev-att-status-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.12s;
}

.ev-att-status-btn:hover {
  color: var(--btn-color, var(--text));
  border-color: var(--btn-color, var(--line2));
  background: var(--btn-bg, var(--bg4));
}

.ev-att-status-btn.active {
  color: var(--btn-color, var(--accent));
  border-color: var(--btn-color, var(--accent));
  background: var(--btn-bg, rgba(88, 101, 242, 0.12));
}

/* ── Note Button ─────────────────────────────────────── */
.ev-att-note-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-left: auto;
  transition: all 0.12s;
}

.ev-att-note-btn:hover,
.ev-att-note-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Note Input ──────────────────────────────────────── */
.ev-att-note-input {
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  padding: 0 10px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.ev-att-note-input:focus {
  border-color: var(--accent);
}

.ev-att-note-display {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 0 2px;
}

/* ── Save Bar ────────────────────────────────────────── */
.ev-att-save-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg3);
  border: 1px solid var(--accent);
  border-radius: 10px;
  position: -webkit-sticky;
  position: sticky;
  bottom: 8px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.ev-att-save-hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/calendar/calendar.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* Calendar Module Styles */

/* ── Sidebar ────────────────────────────────────────── */
.cal-sidebar {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.cal-sidebar .sidebar-section {
  margin-bottom: 24px;
}

.cal-sidebar .sidebar-section-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0 16px 8px;
  margin-top: 16px;
}

/* Next-up event items */
.cal-next-item {
  padding: 10px 16px;
  margin: 2px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.cal-next-item:hover {
  background: var(--bg3);
}

.cal-next-item.active {
  background: var(--bg4);
}

.cal-next-item-title {
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-next-item-time {
  font-size: 12px;
  color: var(--muted2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* View selector items */
.cal-view-item {
  padding: 10px 16px;
  margin: 2px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
  transition: all 0.12s ease;
}

.cal-view-item:hover {
  background: var(--bg3);
}

.cal-view-item.active {
  background: var(--bg4);
}

/* ── Calendar Header ─────────────────────────────────── */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 4px 4px 0;
}

.cal-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}

/* ── Legend ───────────────────────────────────────────── */
.cal-legend {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text);
  align-items: center;
}

.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Day-of-Week Headers ────────────────────────────── */
.cal-day-headers {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
  margin-bottom: 6px;
}

.cal-day-header {
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted2);
  padding: 10px 0 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── 30-Day Grid ─────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
  flex: 1 1;
  min-height: 0;
  overflow: auto;
}

/* ── Day Cell ────────────────────────────────────────── */
.cal-cell {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(28, 32, 40, 0.98), rgba(18, 22, 29, 0.98));
  padding: 10px 10px 8px;
  min-height: 112px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 18px rgba(0, 0, 0, 0.12);
}

.cal-cell--today {
  border: 1px solid rgba(88, 101, 242, 0.5);
  background:
    linear-gradient(180deg, rgba(74, 86, 168, 0.26), rgba(21, 26, 37, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(34, 42, 103, 0.18);
}

.cal-cell--today .cal-day-num {
  color: var(--accent);
}

.cal-cell--outside {
  opacity: 0.3;
}

/* ── Day Number ──────────────────────────────────────── */
.cal-day-num {
  font-weight: 900;
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* ── Event Bar ───────────────────────────────────────── */
.cal-event-bar {
  border-radius: 9px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.cal-event-bar-tag {
  opacity: 0.75;
}

/* ── "+N more" indicator ─────────────────────────────── */
.cal-more {
  font-size: 9px;
  color: var(--muted2);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  width: -moz-fit-content;
  width: fit-content;
}

/* ── Week View Grid ──────────────────────────────────── */
.cal-week-grid {
  display: grid;
  grid-template-columns: 44px repeat(7, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
  flex: 1 1;
  overflow: auto;
  min-height: 0;
}

/* ── Week Day Headers ────────────────────────────────── */
.cal-week-day-header {
  text-align: center;
  padding: 10px 4px;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.cal-week-day-header--today {
  color: var(--accent);
}

.cal-week-day-date {
  font-size: 14px;
  display: block;
}

/* ── Time Label ──────────────────────────────────────── */
.cal-time-label {
  text-align: right;
  padding: 5px 6px 0 0;
  font-size: 10px;
  color: var(--muted2);
  font-weight: 900;
  white-space: nowrap;
}

/* ── Hour Cell ───────────────────────────────────────── */
.cal-hour-cell {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(28, 32, 40, 0.98), rgba(18, 22, 29, 0.98));
  min-height: 48px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── Week Event Bar (inside hour cells) ──────────────── */
.cal-week-event-bar {
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Calendar Card Wrapper ───────────────────────────── */
.cal-card {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(circle at top right, rgba(88, 101, 242, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(22, 27, 36, 0.98), rgba(13, 17, 24, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 22px 44px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* ── Empty placeholder ───────────────────────────────── */
.cal-empty-cell {
  /* spacer for offset days at start of month */
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/projects/projects.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* Projects Module Styles */

/* ══════════════════════════════════════════════════════
   Sidebar
   ══════════════════════════════════════════════════════ */

.projects-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.projects-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 16px);
  margin: 8px;
  height: 36px;
  border-radius: 10px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.projects-new-btn:hover {
  background: rgba(88, 101, 242, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.projects-list-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 12px 14px 4px;
  font-weight: 900;
}

.project-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin: 0 6px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s;
}

.project-item:hover {
  background: #383a40;
}

.project-item.selected {
  background: #404249;
}

.project-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.project-item-name {
  font-weight: 900;
  font-size: 13px;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-item-count {
  font-size: 11px;
  color: var(--muted2);
  flex: 0 0 auto;
}

.project-item-menu {
  font-size: 13px;
  color: var(--muted2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 2px 4px;
  background: none;
  border: none;
  flex: 0 0 auto;
}

.project-item:hover .project-item-menu {
  opacity: 1;
}

.project-item-menu:hover {
  color: var(--text);
}

/* ── Lane Filters ──────────────────────────────────── */

.filter-lane-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin: 0 6px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  transition: background 0.12s, color 0.12s;
}

.filter-lane-item:hover {
  background: #383a40;
}

.filter-lane-item.active {
  background: var(--accent);
  color: #fff;
}

.filter-lane-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  flex: 0 0 auto;
}

.project-item-status {
  font-size: 13px;
  flex: 0 0 auto;
}

/* ══════════════════════════════════════════════════════
   View Header
   ══════════════════════════════════════════════════════ */

.projects-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.projects-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 14px;
  flex: 0 0 auto;
}

.projects-title {
  font-weight: 900;
  font-size: 17px;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proj-tab {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
  flex: 0 0 auto;
}

.proj-tab:hover {
  color: var(--text);
  border-color: var(--panel2);
}

.proj-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.proj-add-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: filter 0.12s;
  white-space: nowrap;
  flex: 0 0 auto;
}

.proj-add-btn:hover {
  filter: brightness(1.1);
}

/* ══════════════════════════════════════════════════════
   Kanban Board
   ══════════════════════════════════════════════════════ */

.kanban-board {
  display: flex;
  gap: 14px;
  flex: 1 1;
  min-width: 0;
  overflow-x: auto;
  align-items: flex-start;
  padding: 4px 0;
}

.kanban-col {
  width: 320px;
  flex: 0 0 320px;
  background: linear-gradient(180deg, rgba(30, 31, 34, 0.95) 0%, rgba(26, 27, 30, 0.98) 100%);
  border: 1px solid var(--line2);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.kanban-col:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.08) inset;
  border-color: var(--panel2);
}

.kanban-col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line2);
  font-weight: 900;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.02);
  position: relative;
}

/* Colored accent line at top of column */
.kanban-col-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--lane-color, var(--accent));
  opacity: 0.7;
}

.kanban-col-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  flex: 0 0 auto;
  box-shadow: 0 0 6px currentColor;
}

.kanban-col-label {
  flex: 1 1;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-col-count {
  font-size: 11px;
  color: var(--muted2);
  flex: 0 0 auto;
}

.kanban-col-menu {
  font-size: 13px;
  color: var(--muted2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 2px 4px;
  background: none;
  border: none;
}

.kanban-col-head:hover .kanban-col-menu {
  opacity: 1;
}

.kanban-cards {
  flex: 1 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
  transition: background 0.2s;
}

.kanban-cards.drag-over {
  background: rgba(88, 101, 242, 0.08);
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2) inset;
  border-radius: 0 0 13px 13px;
}

.kanban-add-card {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.kanban-add-card:hover {
  background: rgba(88, 101, 242, 0.06);
  border-color: var(--accent);
  color: var(--accent);
}

.kanban-add-col {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  flex: 0 0 auto;
  margin-top: 8px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.kanban-add-col:hover {
  background: rgba(88, 101, 242, 0.06);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Add Column placeholder (at end of board) ──────── */

.kanban-new-col {
  width: 240px;
  flex: 0 0 240px;
  display: flex;
  align-items: flex-start;
}

.kanban-new-col-btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.kanban-new-col-btn:hover {
  background: rgba(88, 101, 242, 0.06);
  border-color: var(--accent);
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════
   Task Card (kcard)
   ══════════════════════════════════════════════════════ */

.kcard {
  background: linear-gradient(145deg, var(--bg4) 0%, rgba(40, 42, 46, 0.95) 100%);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.25s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  position: relative;
}

.kcard:hover {
  border-color: color-mix(in srgb, var(--lane-color, var(--accent)) 50%, var(--line2));
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px color-mix(in srgb, var(--lane-color, var(--accent)) 20%, transparent);
  transform: translateY(-2px);
}

.kcard.selected {
  border-color: var(--lane-color, var(--accent));
  box-shadow:
    0 0 0 1px var(--lane-color, var(--accent)),
    0 8px 28px color-mix(in srgb, var(--lane-color, var(--accent)) 25%, transparent);
}

.kcard.dragging {
  opacity: 0.75;
  transform: rotate(2deg) scale(1.03);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/* Lane accent stripe at top */
.kcard-accent {
  height: 3px;
  width: 100%;
  flex-shrink: 0;
  opacity: 0.9;
  transition: height 0.15s;
}
.kcard:hover .kcard-accent { height: 4px; opacity: 1; }

/* Card inner body */
.kcard-body {
  padding: 12px 16px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Header: tags+ID left, avatars right */
.kcard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.kcard-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
}
.kcard-id {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  background: var(--bg3);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.kcard-tag-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 0;
}
.kcard-tag {
  font-size: 10px;
  font-weight: 800;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.kcard-add-tag {
  font-size: 10px;
  border: 1px dashed var(--line2);
  border-radius: 999px;
  padding: 1px 7px;
  cursor: pointer;
  color: var(--muted2);
  background: transparent;
  transition: color 0.12s, border-color 0.12s;
  line-height: 1.5;
}
.kcard-add-tag:hover { color: var(--accent); border-color: var(--accent); }

/* Title */
.kcard-title {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Description preview */
.kcard-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Stats grid — 2 columns with icon + label/value */
.kcard-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
  gap: 6px;
  margin-top: 2px;
}
.kcard-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg3);
  border-radius: 8px;
  min-width: 0;
}
.kcard-stat-icon {
  flex-shrink: 0;
  color: var(--muted2);
}
.kcard-stat-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kcard-stat-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.kcard-stat-value {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kcard-stat-credits .kcard-stat-value,
.kcard-stat-credits .kcard-stat-icon { color: var(--ok); }

/* Progress bar with label */
.kcard-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kcard-progress-track {
  flex: 1 1;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  overflow: hidden;
}
.kcard-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
  min-width: 3px;
}
.kcard-progress-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Footer — lane label + unassigned indicator */
.kcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--line2);
  margin-top: 2px;
}
.kcard-assignees {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.kcard-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--panel2);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 10px;
  border: 2px solid var(--bg4);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
  cursor: pointer;
}
.kcard-avatar:hover { transform: scale(1.15); z-index: 2; }
.kcard-avatar + .kcard-avatar { margin-left: -8px; }
.kcard-avatar-overflow {
  background: var(--bg3);
  color: var(--muted);
  font-size: 9px;
}
.kcard-no-assignee {
  font-size: 11px;
  color: var(--muted2);
  font-style: italic;
}
.kcard-footer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.kcard-lane-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════
   Gantt Chart
   ══════════════════════════════════════════════════════ */

.gantt-wrap-outer { flex: 1 1; display: flex; flex-direction: column; min-width: 0; }

.gantt-wrap {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: linear-gradient(180deg, rgba(30, 31, 34, 0.98) 0%, rgba(22, 23, 26, 1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Gantt Header ──────────────────────────────────── */

.gantt-header {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 40px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.02);
}

.gantt-header-label {
  width: 220px;
  flex: 0 0 220px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-right: 1px solid var(--line2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.gantt-header-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted2);
  text-transform: none;
  letter-spacing: 0;
}

.gantt-header-timeline {
  flex: 1 1;
  overflow: hidden;
  min-width: 0;
}

.gantt-header-timeline-inner {
  position: relative;
  height: 36px;
}

.gantt-day-marker {
  position: absolute;
  top: 0;
  height: 100%;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  line-height: 36px;
  border-left: 1px solid var(--line);
  box-sizing: border-box;
}

/* ── Gantt Body: two-panel layout ──────────────────── */

.gantt-body {
  flex: 1 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Left panel (fixed task names) */
.gantt-left {
  width: 220px;
  flex: 0 0 220px;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--line2);
}

/* Hide left panel scrollbar — it syncs with the right panel */
.gantt-left::-webkit-scrollbar { display: none; }
.gantt-left { scrollbar-width: none; }

/* Right panel (scrollable timeline) */
.gantt-right {
  flex: 1 1;
  overflow: auto;
  min-width: 0;
}

.gantt-right::-webkit-scrollbar { height: 8px; width: 6px; }
.gantt-right::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.gantt-right::-webkit-scrollbar-corner { background: transparent; }

/* ── Left panel rows ───────────────────────────────── */

.gantt-left-row {
  display: flex;
  align-items: center;
  height: 44px;
  box-sizing: border-box;
  padding: 0 12px;
  gap: 6px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
  overflow: hidden;
}

.gantt-left-row:hover {
  background: color-mix(in srgb, var(--lane-color, var(--accent)) 10%, transparent);
}

.gantt-left-row.selected {
  background: color-mix(in srgb, var(--lane-color, var(--accent)) 14%, transparent);
}

.gantt-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  flex: 0 0 auto;
}

.gantt-label-title {
  font-weight: 900;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0;
}

.gantt-label-deps {
  font-size: 9px;
  border: 1px solid var(--muted2);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--bad);
  flex: 0 0 auto;
  white-space: nowrap;
  background: rgba(242, 63, 67, 0.08);
}

/* ── Left panel lane headers ───────────────────────── */

.gantt-lane-header-left,
.gantt-lane-header-right {
  height: 32px;
  box-sizing: border-box;
  border-bottom: 2px solid color-mix(in srgb, var(--lane-color, var(--accent)) 35%, var(--line));
}

.gantt-lane-header-left {
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lane-color, var(--accent)) 15%, var(--bg1)) 0%, color-mix(in srgb, var(--lane-color, var(--accent)) 8%, var(--bg1)) 100%);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.gantt-lane-header-right {
  background: color-mix(in srgb, var(--lane-color, var(--accent)) 6%, transparent);
}

.gantt-lane-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: 0 0 6px currentColor;
}

.gantt-lane-name {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}

.gantt-lane-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted2);
  margin-left: auto;
}

/* ── Right panel lane headers ──────────────────────── */

.gantt-lane-header-right {
  background: color-mix(in srgb, var(--lane-color, var(--accent)) 12%, var(--bg1));
  border-bottom: 2px solid color-mix(in srgb, var(--lane-color, var(--accent)) 30%, var(--line));
}

/* ── Timeline canvas (relative container for bars) ── */

.gantt-timeline-canvas {
  position: relative;
  min-height: 100%;
}

/* Vertical grid column lines + alternating stripe */
.gantt-col {
  position: absolute;
  top: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
  pointer-events: none;
}

.gantt-col.odd {
  background: rgba(255, 255, 255, 0.012);
}

.gantt-col.today {
  background: rgba(88, 101, 242, 0.08);
  border-left: 2px solid rgba(88, 101, 242, 0.4);
}

/* ── Timeline task rows ────────────────────────────── */

.gantt-timeline-row {
  position: relative;
  height: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
  transition: background 0.15s;
}

.gantt-timeline-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.gantt-timeline-row.selected {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ── Gantt Bars ──────────────────────────────────── */

.gantt-bar {
  position: absolute;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  cursor: -webkit-grab;
  cursor: grab;
  white-space: nowrap;
  overflow: hidden;
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.08) 100%);
  background-blend-mode: overlay;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.gantt-bar::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 8px 0 0 8px;
}

.gantt-bar:hover {
  filter: brightness(1.15) saturate(1.1);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 20px rgba(var(--lane-color-rgb, 88, 101, 242), 0.15);
  transform: translateY(-50%) scale(1.02);
}

.gantt-bar.selected {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 0 4px var(--accent),
    0 4px 20px rgba(88, 101, 242, 0.3);
  filter: brightness(1.05);
}

.gantt-bar.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  filter: brightness(1.15) saturate(1.1);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 40px rgba(var(--lane-color-rgb, 88, 101, 242), 0.2);
  transform: translateY(-50%) scale(1.05);
  z-index: 10;
}

/* Status dot inside bar */
.gantt-bar-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  flex: 0 0 auto;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.gantt-bar-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.gantt-bar-label {
  font-size: 11px;
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0;
}

/* ── Gantt Credits ───────────────────────────────── */

.gantt-credits {
  position: absolute;
  font-size: 10px;
  color: var(--ok);
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
}

.gantt-credits-icon {
  font-size: 11px;
  line-height: 1;
}

/* ── Gantt Dependency Lines ────────────────────────── */

.gantt-dep-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

.gantt-dep-line {
  fill: none;
  stroke: rgba(255, 180, 60, 0.5);
  stroke-width: 1.5;
  stroke-dasharray: 8 4;
  filter: drop-shadow(0 0 4px rgba(255, 180, 60, 0.2));
  transition: stroke 0.2s, stroke-width 0.2s;
  animation: gantt-dep-dash 20s linear infinite;
}

@keyframes gantt-dep-dash {
  to { stroke-dashoffset: -240; }
}

.gantt-dep-line:hover {
  stroke: rgba(255, 200, 80, 0.9);
  stroke-width: 2.5;
}

.gantt-dep-arrow {
  fill: rgba(255, 180, 60, 0.7);
  filter: drop-shadow(0 0 3px rgba(255, 180, 60, 0.3));
}

/* ── Gantt Zoom Controls ───────────────────────────── */

.gantt-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.gantt-zoom-btn {
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gantt-zoom-btn:hover {
  background: var(--panel);
  color: var(--text);
}

.gantt-zoom-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(88, 101, 242, 0.3);
}

.gantt-zoom-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted2);
  min-width: 48px;
  text-align: center;
}

/* ══════════════════════════════════════════════════════
   Task Drawer
   ══════════════════════════════════════════════════════ */

.task-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  background: linear-gradient(180deg, rgba(30, 31, 34, 0.99) 0%, rgba(24, 25, 28, 1) 100%);
  border-left: 1px solid var(--line2);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
}

.task-drawer.open {
  transform: translateX(0);
}

.task-drawer-header {
  padding: 14px 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}

.task-drawer-title {
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.task-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: background 0.12s, color 0.12s;
}

.task-drawer-close:hover {
  background: var(--panel);
  color: var(--text);
}

.task-drawer-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Drawer: Task Name ─────────────────────────────── */

.task-drawer-name {
  font-weight: 900;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text);
}

/* ── Drawer: Tags ──────────────────────────────────── */

.task-drawer-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-drawer-tag {
  font-size: 11px;
  font-weight: 800;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.task-drawer-lane-badge {
  font-size: 11px;
  font-weight: 800;
  background: color-mix(in srgb, currentColor 12%, rgba(0, 0, 0, 0.2));
  border-radius: 999px;
  padding: 3px 10px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ── Drawer: Description ───────────────────────────── */

.task-drawer-desc {
  background: linear-gradient(135deg, var(--bg4) 0%, rgba(43, 45, 49, 0.8) 100%);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) inset;
}

.task-drawer-desc-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.task-drawer-desc-text {
  font-size: 13px;
  line-height: 1.7;
  margin: 4px 0 0;
  color: var(--text);
}

/* ── Drawer: Credits ───────────────────────────────── */

.task-drawer-credits {
  background: rgba(35, 165, 89, 0.08);
  border: 1px solid rgba(35, 165, 89, 0.2);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.task-drawer-credits-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--ok);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.task-drawer-credits-value {
  font-weight: 900;
  font-size: 16px;
  color: var(--text);
}

/* ── Drawer: Duration ──────────────────────────────── */

.task-drawer-duration {
  background: var(--bg4);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.task-drawer-duration-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.task-drawer-duration-value {
  font-weight: 900;
  font-size: 14px;
  color: var(--text);
}

.task-drawer-inline-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-drawer-inline-unit {
  font-size: 12px;
  color: var(--muted);
}

.proj-input-sm {
  padding: 4px 8px;
  font-size: 13px;
  height: 30px;
}

.task-drawer-start-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
}

.task-drawer-chain-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.task-drawer-chain-label input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

.task-drawer-chain-label span {
  font-weight: 600;
}

/* ── Drawer: Dependencies ──────────────────────────── */

.task-drawer-deps {
  background: var(--bg4);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
}

.task-drawer-deps-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.task-drawer-dep-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text);
}

.task-drawer-dep-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* ── Drawer: Assignees ─────────────────────────────── */

.task-drawer-assignees {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.task-drawer-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--panel2);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 10px;
  color: var(--text);
}

.task-drawer-assignee-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

/* ── Drawer: Actions ───────────────────────────────── */

.task-drawer-actions {
  display: flex;
  gap: 8px;
}

.task-drawer-edit-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.task-drawer-edit-btn:hover {
  background: var(--panel);
  border-color: var(--panel2);
}

.task-drawer-delete-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--bad);
  background: rgba(242, 63, 67, 0.08);
  color: var(--bad);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s;
}

.task-drawer-delete-btn:hover {
  background: rgba(242, 63, 67, 0.18);
}

/* ── Drawer: Section Divider ───────────────────────── */

.task-drawer-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ══════════════════════════════════════════════════════
   Task Add / Edit Form Inputs
   ══════════════════════════════════════════════════════ */

.proj-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s;
}

.proj-input:focus {
  border-color: var(--accent);
  outline: none;
}

.proj-input::placeholder {
  color: var(--muted2);
}

.proj-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: border-color 0.12s;
}

.proj-textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.proj-textarea::placeholder {
  color: var(--muted2);
}

.proj-select {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.12s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2372767d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.proj-select:focus {
  border-color: var(--accent);
}

.proj-form-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.proj-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proj-form-row {
  display: flex;
  gap: 8px;
}

.proj-form-row > * {
  flex: 1 1;
  min-width: 0;
}

.proj-save-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: filter 0.12s;
  font-family: inherit;
}

.proj-save-btn:hover {
  filter: brightness(1.1);
}

.proj-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

.proj-cancel-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}

.proj-cancel-btn:hover {
  background: var(--panel);
  color: var(--text);
}

/* ── Color Picker ──────────────────────────────────── */

.proj-color-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.proj-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s, transform 0.12s;
}

.proj-color-swatch:hover {
  transform: scale(1.15);
}

.proj-color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}

/* ── Tag Input ─────────────────────────────────────── */

.proj-tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  min-height: 36px;
  transition: border-color 0.12s;
}

.proj-tag-input-wrap:focus-within {
  border-color: var(--accent);
}

.proj-tag-input-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 8px;
}

.proj-tag-input-remove {
  cursor: pointer;
  font-size: 12px;
  opacity: 0.7;
  transition: opacity 0.12s;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  line-height: 1;
}

.proj-tag-input-remove:hover {
  opacity: 1;
}

.proj-tag-input-field {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  flex: 1 1;
  min-width: 60px;
}

.proj-tag-input-field::placeholder {
  color: var(--muted2);
}

/* ══════════════════════════════════════════════════════
   Empty State
   ══════════════════════════════════════════════════════ */

.projects-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px 20px;
}

.projects-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  line-height: 1;
  opacity: 0.6;
}

.projects-empty-text {
  font-size: 18px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0;
}

.projects-empty-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  max-width: 320px;
  line-height: 1.5;
}

.projects-empty-btn {
  margin-top: 16px;
  height: 36px;
  padding: 0 20px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: filter 0.12s;
}

.projects-empty-btn:hover {
  filter: brightness(1.1);
}

/* ══════════════════════════════════════════════════════
   Modal Overlay (project create/edit)
   ══════════════════════════════════════════════════════ */

.proj-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.proj-modal {
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 18px;
  width: min(520px, calc(100vw - 80px));
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: projModalIn 0.16s ease;
}

@keyframes projModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

.proj-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.proj-modal-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

.proj-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.proj-modal-close:hover {
  background: var(--panel);
  color: var(--text);
}

.proj-modal-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.proj-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

/* ── Create Modal: 2-column rows ─────────────────────── */

.proj-create-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

/* ── Color Picker ──────────────────────────────────────── */

.proj-color-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.proj-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
  padding: 0;
}

.proj-color-swatch:hover {
  transform: scale(1.15);
}

.proj-color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}

/* ── Task Builder Table ────────────────────────────────── */

.proj-task-builder {
  background: var(--bg4);
  border: 1px solid var(--line2);
  border-radius: 10px;
  overflow: hidden;
  max-height: 340px;
  display: flex;
  flex-direction: column;
}

.proj-task-builder-rows {
  flex: 1 1;
  overflow-y: auto;
  min-height: 0;
}

.proj-task-builder-header {
  display: flex;
  gap: 0;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line2);
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.proj-task-builder-row {
  display: flex;
  gap: 0;
  padding: 4px 10px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.proj-task-builder-row:last-child {
  border-bottom: none;
}

.proj-task-cell-input,
.proj-task-cell-select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  transition: border-color 0.12s, background 0.12s;
}

.proj-task-cell-input:focus,
.proj-task-cell-select:focus {
  border-color: var(--accent);
  background: var(--bg3);
  outline: none;
}

.proj-task-cell-input::placeholder {
  color: var(--muted2);
}

.proj-task-cell-select {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.proj-task-dur-cell {
  display: flex;
  gap: 2px;
  align-items: center;
}

.proj-select-sm {
  padding: 4px 6px;
  font-size: 12px;
  height: 30px;
  background: var(--bg4);
  border: 1px solid var(--line2);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}

.proj-select-sm:focus {
  border-color: var(--accent);
  outline: none;
}

.proj-task-cell-remove {
  width: 36px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  font-size: 12px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}

.proj-task-cell-remove:hover {
  background: rgba(237, 66, 69, 0.15);
  color: var(--danger, #ed4245);
}

.proj-task-add-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: border-color 0.12s, color 0.12s;
}

.proj-task-add-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* ── Error text ──────────────────────────────────────── */

.proj-create-error {
  color: var(--danger, #ed4245);
  font-size: 12px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════
   Context Menu (right-click on project/lane/task)
   ══════════════════════════════════════════════════════ */

.proj-context-menu {
  position: fixed;
  z-index: 400;
  min-width: 160px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: projMenuIn 0.1s ease;
}

@keyframes projMenuIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1);    }
}

.proj-context-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.1s;
}

.proj-context-item:hover {
  background: var(--panel);
}

.proj-context-item.danger {
  color: var(--bad);
}

.proj-context-item.danger:hover {
  background: rgba(242, 63, 67, 0.1);
}

.proj-context-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}

/* ══════════════════════════════════════════════════════
   Inline Editing (lane names, column headers)
   ══════════════════════════════════════════════════════ */

.proj-inline-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent);
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  outline: none;
  padding: 0;
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   Scrollbar Overrides (Kanban + Gantt)
   ══════════════════════════════════════════════════════ */

.kanban-board::-webkit-scrollbar,
.kanban-cards::-webkit-scrollbar,
.gantt-grid::-webkit-scrollbar,
.task-drawer-body::-webkit-scrollbar,
.proj-task-builder-rows::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.kanban-board::-webkit-scrollbar-track,
.kanban-cards::-webkit-scrollbar-track,
.gantt-grid::-webkit-scrollbar-track,
.task-drawer-body::-webkit-scrollbar-track,
.proj-task-builder-rows::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-board::-webkit-scrollbar-thumb,
.kanban-cards::-webkit-scrollbar-thumb,
.gantt-grid::-webkit-scrollbar-thumb,
.task-drawer-body::-webkit-scrollbar-thumb,
.proj-task-builder-rows::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 3px;
}

.kanban-board::-webkit-scrollbar-thumb:hover,
.kanban-cards::-webkit-scrollbar-thumb:hover,
.gantt-grid::-webkit-scrollbar-thumb:hover,
.task-drawer-body::-webkit-scrollbar-thumb:hover,
.proj-task-builder-rows::-webkit-scrollbar-thumb:hover {
  background: var(--muted2);
}

/* ══════════════════════════════════════════════════════
   Drag & Drop Visual Feedback
   ══════════════════════════════════════════════════════ */

.kcard-ghost {
  opacity: 0.4;
  pointer-events: none;
}

.kanban-col.drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(88, 101, 242, 0.3);
}

.kanban-cards .drop-indicator {
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  margin: -1px 0;
}

/* ══════════════════════════════════════════════════════
   Loading / Skeleton States
   ══════════════════════════════════════════════════════ */

.proj-skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: projShimmer 1.5s ease infinite;
  border-radius: 8px;
}

@keyframes projShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.proj-skeleton-card {
  height: 80px;
  border-radius: 10px;
}

.proj-skeleton-bar {
  height: 26px;
  border-radius: 6px;
}

/* ══════════════════════════════════════════════════════
   Responsive / Overflow Handling
   ══════════════════════════════════════════════════════ */

.projects-view-content {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.kanban-board-wrap {
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gantt-wrap-outer {
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════
   Task Dependency Picker
   ══════════════════════════════════════════════════════ */

.task-dep-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.task-dep-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--bg4);
  border: 1px solid var(--line2);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

.task-dep-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

.task-dep-chip-remove {
  width: 14px;
  height: 14px;
  border: none;
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  font-size: 10px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  padding: 0;
  margin-left: 2px;
  transition: color 0.12s, background 0.12s;
}

.task-dep-chip-remove:hover {
  color: var(--bad);
  background: rgba(237, 66, 69, 0.12);
}

.task-dep-picker {
  position: relative;
  margin-top: 6px;
}

.task-dep-picker-select {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: var(--bg3);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s;
}

.task-dep-picker-select:focus {
  border-color: var(--accent);
  outline: none;
}

/* Blocking section (mirrors .task-drawer-deps) */
.task-drawer-blocking {
  background: rgba(242, 63, 67, 0.05);
  border: 1px solid rgba(242, 63, 67, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
}

.task-drawer-blocking-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--bad);
  margin-bottom: 6px;
}

/* Modal deps cell (multi-select in task builder) */
.proj-task-deps-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-height: 30px;
  padding: 2px 4px;
}

.proj-task-deps-cell .task-dep-chip {
  height: 20px;
  font-size: 10px;
  padding: 0 6px;
}

.proj-task-deps-add {
  width: 22px;
  height: 22px;
  border: 1px dashed var(--line2);
  border-radius: 6px;
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  font-size: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
  padding: 0;
}

.proj-task-deps-add:hover {
  border-color: var(--accent);
  color: var(--text);
}

.proj-task-deps-dropdown {
  position: absolute;
  z-index: 500;
  min-width: 220px;
  max-width: 280px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.proj-task-deps-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.1s;
}

.proj-task-deps-dropdown-item:hover {
  background: var(--panel);
}

.proj-task-deps-dropdown-item.selected {
  color: var(--accent);
}

.proj-task-deps-dropdown-empty {
  padding: 10px;
  font-size: 11px;
  color: var(--muted2);
  text-align: center;
}

/* ══════════════════════════════════════════════════════
   Project Edit Modal
   ══════════════════════════════════════════════════════ */

.proj-edit-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.6); display: flex;
  align-items: center; justify-content: center;
}
.proj-edit-modal {
  background: var(--bg1); border-radius: 12px;
  width: 720px; max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.proj-edit-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.proj-edit-title { font-size: 16px; font-weight: 700; }
.proj-edit-close {
  background: none; border: none; color: var(--muted); font-size: 22px;
  cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.proj-edit-close:hover { background: var(--bg3); color: var(--text); }

.proj-edit-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--line);
}
.proj-edit-tab {
  flex: 1 1; padding: 10px; text-align: center; font-size: 13px; font-weight: 600;
  background: none; border: none; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.15s;
}
.proj-edit-tab:hover { color: var(--text); background: var(--bg2); }
.proj-edit-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.proj-edit-body { overflow-y: auto; flex: 1 1; padding: 16px 20px; }
.proj-edit-section { display: flex; flex-direction: column; gap: 4px; }

.proj-edit-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.proj-edit-input {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-size: 13px; color: var(--text); outline: none;
}
.proj-edit-input:focus { border-color: var(--accent); }
.proj-edit-select {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-size: 13px; color: var(--text); outline: none;
}
.proj-edit-textarea {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font-size: 13px; color: var(--text); outline: none; resize: vertical;
}
.proj-edit-colors { display: flex; gap: 6px; }
.proj-edit-color-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: border-color 0.15s;
}
.proj-edit-color-swatch.active,
.proj-edit-color-swatch:hover { border-color: var(--text); }

.proj-edit-save-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.proj-edit-save-btn:hover { filter: brightness(1.1); }
.proj-edit-cancel-btn {
  background: var(--bg3); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.proj-edit-delete-btn {
  background: none; color: var(--bad); border: 1px solid var(--bad);
  border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; margin-left: auto;
}

/* Lanes */
.proj-edit-lane-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.proj-edit-lane-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--bg2); border-radius: 6px;
}
.proj-edit-lane-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.proj-edit-lane-name { flex: 1 1; font-size: 13px; font-weight: 600; }
.proj-edit-lane-count { font-size: 11px; color: var(--muted); }
.proj-edit-lane-edit, .proj-edit-lane-delete {
  background: none; border: none; font-size: 11px; cursor: pointer; padding: 4px 8px;
  border-radius: 4px;
}
.proj-edit-lane-edit { color: var(--accent); }
.proj-edit-lane-edit:hover { background: var(--bg3); }
.proj-edit-lane-delete { color: var(--bad); }
.proj-edit-lane-delete:hover { background: var(--bg3); }
.proj-edit-add-lane { display: flex; gap: 8px; align-items: center; }

/* Tasks */
.proj-edit-gantt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

.proj-edit-mini-gantt {
  background: var(--bg2); border-radius: 6px; padding: 8px; margin-bottom: 12px;
  max-height: 200px; overflow-y: auto;
}
.proj-edit-mini-row { display: flex; align-items: center; gap: 8px; height: 20px; }
.proj-edit-mini-label {
  width: 100px; font-size: 10px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0;
}
.proj-edit-mini-track { flex: 1 1; position: relative; height: 12px; background: var(--bg3); border-radius: 3px; }
.proj-edit-mini-bar {
  position: absolute; top: 1px; height: 10px; border-radius: 2px;
  min-width: 4px; transition: left 0.2s, width 0.2s;
}

.proj-edit-task-list { display: flex; flex-direction: column; gap: 4px; }
.proj-edit-task-row {
  background: var(--bg2); border-radius: 6px; overflow: hidden;
  transition: background 0.15s;
}
.proj-edit-task-row.editing { background: var(--bg3); }
.proj-edit-task-summary {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer;
}
.proj-edit-task-summary:hover { background: var(--bg3); }
.proj-edit-task-lane-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.proj-edit-task-title { flex: 1 1; font-size: 13px; font-weight: 500; }
.proj-edit-task-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.proj-edit-task-assignees { display: flex; gap: -4px; }

.proj-edit-task-form { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.proj-edit-task-form-row { display: flex; gap: 8px; align-items: flex-end; }
.proj-edit-task-form-actions { display: flex; gap: 8px; margin-top: 4px; }
.proj-edit-field { display: flex; flex-direction: column; gap: 2px; }
.proj-edit-field-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/files/files.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
/* Files Module Styles */

/* ── Sidebar (tree panel) ──────────────────────────────── */
.files-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 8px;
}

/* ── New Folder Button (sidebar) ───────────────────────── */
.files-new-folder-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% - 16px);
  margin: 10px 8px 4px;
  height: 34px;
  border-radius: 10px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.files-new-folder-btn:hover {
  background: rgba(88, 101, 242, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Tree Node ─────────────────────────────────────────── */
.files-tree-node {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  margin: 1px 8px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background 0.1s;
  min-height: 30px;
}

.files-tree-node:hover {
  background: var(--bg3);
}

.files-tree-node.selected {
  background: var(--bg4);
}

/* ── Tree Arrow ────────────────────────────────────────── */
.files-tree-arrow {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--muted2);
  flex-shrink: 0;
  transition: transform 0.12s;
}

.files-tree-arrow.expanded {
  transform: rotate(90deg);
}

.files-tree-arrow.placeholder {
  visibility: hidden;
}

/* ── Tree Icon ─────────────────────────────────────────── */
.files-tree-icon {
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
  width: 18px;
  text-align: center;
}

/* ── Tree Name ─────────────────────────────────────────── */
.files-tree-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1;
  min-width: 0;
}

/* ── Tree Count ────────────────────────────────────────── */
.files-tree-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  background: var(--bg2);
  border-radius: 6px;
  padding: 1px 6px;
  flex-shrink: 0;
  line-height: 1.5;
}

/* ── Main View Container ──────────────────────────────── */
.files-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.files-view.drag-over::after {
  content: 'Drop files to upload';
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(88, 101, 242, 0.1);
  border: 2px dashed var(--accent);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  pointer-events: none;
}

/* ── Toolbar ───────────────────────────────────────────── */
.files-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

/* ── Breadcrumb ────────────────────────────────────────── */
.files-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
}

.files-breadcrumb-segment {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color 0.1s, background 0.1s;
  border: none;
  background: none;
  font-family: inherit;
}

.files-breadcrumb-segment:hover {
  color: var(--text);
  background: var(--bg3);
}

.files-breadcrumb-segment:last-child {
  color: var(--text);
  font-weight: 700;
  cursor: default;
}

.files-breadcrumb-segment:last-child:hover {
  background: transparent;
}

.files-breadcrumb-separator {
  color: var(--muted2);
  font-size: 11px;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ── Search ────────────────────────────────────────────── */
.files-search {
  height: 32px;
  width: 180px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  padding: 0 10px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  flex-shrink: 0;
  transition: border-color 0.12s, width 0.2s;
}

.files-search:focus {
  border-color: var(--accent);
  width: 240px;
}

.files-search::placeholder {
  color: var(--muted2);
}

/* ── Toolbar Button ────────────────────────────────────── */
.files-toolbar-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.files-toolbar-btn:hover {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--line);
}

/* ── Upload Button ─────────────────────────────────────── */
.files-upload-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  transition: filter 0.12s;
}

.files-upload-btn:hover {
  filter: brightness(1.12);
}

/* ── Grid ──────────────────────────────────────────────── */
.files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  padding: 18px;
  flex: 1 1;
  overflow-y: auto;
  align-content: start;
}

/* ── File Card ─────────────────────────────────────────── */
.file-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 12px;
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: center;
  min-height: 100px;
}

.file-card:hover {
  background: var(--bg3);
  border-color: var(--line2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.file-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 8px rgba(88, 101, 242, 0.18);
}

.file-card.drag-over {
  background: rgba(88, 101, 242, 0.08);
  border-color: var(--accent);
  border-style: dashed;
}

/* ── File Card Icon ────────────────────────────────────── */
.file-card-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── File Card Name ────────────────────────────────────── */
.file-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

/* ── File Card Meta ────────────────────────────────────── */
.file-card-meta {
  font-size: 10px;
  color: var(--muted2);
  line-height: 1.3;
}

/* ── File Preview Panel ────────────────────────────────── */
.file-preview {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  overflow: hidden;
}

.file-preview-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.file-preview-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg4);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.file-preview-info {
  flex: 1 1;
  min-width: 0;
}

.file-preview-info .file-preview-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  word-break: break-word;
}

.file-preview-info .file-preview-meta {
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.5;
}

.file-preview-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.file-preview-actions button {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.file-preview-actions button:hover {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--line);
}

.file-preview-actions .delete-btn:hover {
  background: rgba(242, 63, 67, 0.12);
  color: var(--bad);
  border-color: var(--bad);
}

.file-preview-actions .download-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.file-preview-actions .download-btn:hover {
  filter: brightness(1.12);
}

/* ── Preview Content ───────────────────────────────────── */
.file-preview-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-preview-content img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
}

.file-preview-content .no-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted2);
  font-size: 13px;
}

.file-preview-content .no-preview span:first-child {
  font-size: 40px;
}

/* PDF iframe */
.file-preview-content iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

/* Spreadsheet table */
.file-preview-content .spreadsheet-view {
  width: 100%;
  overflow: auto;
  align-self: flex-start;
}

.file-preview-content .spreadsheet-view table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.file-preview-content .spreadsheet-view th,
.file-preview-content .spreadsheet-view td {
  padding: 6px 10px;
  border: 1px solid var(--line);
  text-align: left;
}

.file-preview-content .spreadsheet-view th {
  background: var(--bg4);
  font-weight: 700;
  color: var(--text);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.file-preview-content .spreadsheet-view td {
  color: var(--muted);
}

/* Document HTML viewer */
.file-preview-content .document-view {
  width: 100%;
  max-width: 800px;
  align-self: flex-start;
  color: var(--text);
  line-height: 1.6;
  font-size: 14px;
}

.file-preview-content .document-view h1,
.file-preview-content .document-view h2,
.file-preview-content .document-view h3 {
  margin: 16px 0 8px;
  color: var(--text);
}

.file-preview-content .document-view p {
  margin: 8px 0;
}

.file-preview-content .document-view table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.file-preview-content .document-view td,
.file-preview-content .document-view th {
  padding: 6px 10px;
  border: 1px solid var(--line);
}

.file-preview-content .document-view img {
  max-width: 100%;
}

/* Text/code viewer */
.file-preview-content .text-view {
  width: 100%;
  align-self: flex-start;
}

.file-preview-content .text-view pre {
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  font-size: 12px;
  color: var(--muted);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Loading state */
.file-preview-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted2);
  font-size: 13px;
}

/* ── Empty State ───────────────────────────────────────── */
.files-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 24px;
  color: var(--muted2);
  font-size: 13px;
  text-align: center;
  flex: 1 1;
}

.files-empty span:first-child {
  font-size: 36px;
  opacity: 0.5;
}

.files-empty p {
  margin: 0;
  max-width: 260px;
  line-height: 1.5;
}

/* ── Proj Input (reusable form input) ──────────────────── */
.proj-input {
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
  transition: border-color 0.12s;
}

.proj-input:focus {
  border-color: var(--accent);
}

.proj-input::placeholder {
  color: var(--muted2);
}

/* ── Rename Inline Input ───────────────────────────────── */
.files-rename-input {
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--bg4);
  color: var(--text);
  padding: 0 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
}

/* ── Scrollbar styling ─────────────────────────────────── */
.files-sidebar::-webkit-scrollbar,
.files-grid::-webkit-scrollbar,
.file-preview-content::-webkit-scrollbar {
  width: 6px;
}

.files-sidebar::-webkit-scrollbar-track,
.files-grid::-webkit-scrollbar-track,
.file-preview-content::-webkit-scrollbar-track {
  background: transparent;
}

.files-sidebar::-webkit-scrollbar-thumb,
.files-grid::-webkit-scrollbar-thumb,
.file-preview-content::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 3px;
}

.files-sidebar::-webkit-scrollbar-thumb:hover,
.files-grid::-webkit-scrollbar-thumb:hover,
.file-preview-content::-webkit-scrollbar-thumb:hover {
  background: var(--muted2);
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/inventory/inventory.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════════
   Inventory Module Styles — Asset Tray View
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.inv-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px;
  gap: 0;
}

.inv-search-input {
  width: 100%;
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13px;
  margin-bottom: 12px;
}

.inv-search-input::placeholder {
  color: var(--muted);
}

.inv-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.inv-sidebar-section {
  margin-bottom: 14px;
}

.inv-sidebar-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 8px;
  margin-bottom: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.inv-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}

.inv-sidebar-item:hover {
  background: var(--bg3);
  color: var(--text);
}

.inv-sidebar-item.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  font-weight: 600;
}

.inv-sidebar-item-name {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-sidebar-item-count {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 6px;
  min-width: 18px;
  text-align: right;
}

.inv-sidebar-item.active .inv-sidebar-item-count {
  color: var(--text-dim);
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.inv-layout {
  display: flex;
  height: 100%;
  gap: 0;
  position: relative;
  overflow: hidden;
}

.inv-main {
  flex: 1 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */

.inv-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.inv-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1;
}

.inv-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.inv-count {
  font-size: 12px;
  color: var(--muted);
}

.inv-view-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  transition: background 0.12s, color 0.12s;
}

.inv-view-btn:hover {
  background: var(--bg3);
  color: var(--text);
}

.inv-view-btn.active {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--accent);
}

/* ── Status Tabs ──────────────────────────────────────────────────────────── */

.inv-status-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  flex-shrink: 0;
}

.inv-tab {
  padding: 8px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.inv-tab:hover {
  color: var(--text);
}

.inv-tab.active {
  border-bottom-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.inv-tab-count {
  font-size: 10px;
  color: var(--muted);
  margin-left: 4px;
}

.inv-tab.active .inv-tab-count {
  color: var(--text-dim);
}

/* ── Asset List ───────────────────────────────────────────────────────────── */

.inv-asset-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px 16px;
}

.inv-asset-grid {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  align-content: start;
}

/* ── Asset Card (List Mode) ───────────────────────────────────────────────── */

.inv-asset-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  border: 1px solid transparent;
}

.inv-asset-card:hover {
  background: var(--bg3);
}

.inv-asset-card.selected {
  background: var(--bg3);
  border-color: var(--accent);
}

.inv-asset-card-body {
  flex: 1 1;
  min-width: 0;
}

.inv-asset-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.inv-asset-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-asset-qty {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}

.inv-asset-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
  font-size: 11px;
  color: var(--muted);
}

.inv-asset-meta-sep {
  color: var(--border);
}

.inv-asset-loc {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
}

.inv-asset-loc-icon {
  font-size: 11px;
}

.inv-asset-assigned {
  font-size: 11px;
  color: var(--accent);
}

.inv-asset-card-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* ── Asset Card (Grid Mode) ───────────────────────────────────────────────── */

.inv-asset-card.grid-mode {
  flex-direction: column;
  align-items: stretch;
  padding: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.inv-asset-card.grid-mode:hover {
  border-color: var(--accent);
  background: var(--bg3);
}

.inv-asset-card.grid-mode.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ── Status Badge ─────────────────────────────────────────────────────────── */

.inv-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.inv-status-badge.status-available {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
}

.inv-status-badge.status-issued {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.inv-status-badge.status-reserved {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
}

.inv-status-badge.status-in_transit {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}

.inv-status-badge.status-consumed,
.inv-status-badge.status-destroyed,
.inv-status-badge.status-missing {
  background: color-mix(in srgb, var(--bad) 18%, transparent);
  color: var(--bad);
}

.inv-status-badge.status-damaged {
  background: color-mix(in srgb, #f57c00 18%, transparent);
  color: #f57c00;
}

.inv-status-badge.status-retired {
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}

/* ── Legal Class Dot ──────────────────────────────────────────────────────── */

.inv-legal-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.inv-legal-dot.legal-legal {
  background: var(--ok);
}

.inv-legal-dot.legal-restricted {
  background: var(--warn);
}

.inv-legal-dot.legal-contraband {
  background: var(--bad);
}

.inv-legal-dot.legal-unknown {
  background: var(--muted);
}

/* ── Tag Chip ─────────────────────────────────────────────────────────────── */

.inv-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  white-space: nowrap;
}

.inv-tag-chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}

.inv-tag-chip-remove:hover {
  opacity: 1;
}

/* ── Detail Drawer ────────────────────────────────────────────────────────── */

.inv-drawer {
  width: 0;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--bg2);
  overflow: hidden;
  transition: width 0.2s ease;
}

.inv-drawer.open {
  width: 360px;
  overflow-y: auto;
}

.inv-drawer-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.inv-drawer-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-drawer-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
}

.inv-drawer-close:hover {
  color: var(--text);
  background: var(--bg3);
}

.inv-drawer-body {
  padding: 14px 16px;
}

.inv-drawer-section {
  margin-bottom: 16px;
}

.inv-drawer-section:last-child {
  margin-bottom: 0;
}

.inv-drawer-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.inv-drawer-field {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3px 0;
  gap: 8px;
}

.inv-drawer-field-label {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

.inv-drawer-field-value {
  font-size: 12px;
  color: var(--text);
  text-align: right;
  word-break: break-word;
}

/* ── Drawer Tags ──────────────────────────────────────────────────────────── */

.inv-drawer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.inv-drawer-tag-input-row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.inv-drawer-tag-input {
  flex: 1 1;
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
}

.inv-drawer-tag-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Action Buttons ───────────────────────────────────────────────────────── */

.inv-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
  gap: 6px;
}

.inv-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.inv-action-btn:hover {
  background: var(--bg4);
  border-color: var(--accent);
}

.inv-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.inv-action-btn.danger {
  color: var(--bad);
}

.inv-action-btn.danger:hover {
  border-color: var(--bad);
}

/* ── History Row ──────────────────────────────────────────────────────────── */

.inv-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inv-history-row {
  padding: 8px;
  background: var(--bg3);
  border-radius: 5px;
}

.inv-history-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.inv-history-action {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}

.inv-history-action.action-issue {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.inv-history-action.action-return {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
}

.inv-history-action.action-transfer {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
}

.inv-history-action.action-reserve {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
}

.inv-history-action.action-consume {
  background: color-mix(in srgb, var(--bad) 18%, transparent);
  color: var(--bad);
}

.inv-history-action.action-destroy {
  background: color-mix(in srgb, var(--bad) 18%, transparent);
  color: var(--bad);
}

.inv-history-action.action-split {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}

.inv-history-action.action-merge {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}

.inv-history-action.action-create {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: var(--ok);
}

.inv-history-action.action-wipe_verify {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.inv-history-date {
  font-size: 10px;
  color: var(--muted);
}

.inv-history-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.inv-history-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Notes Section ────────────────────────────────────────────────────────── */

.inv-drawer-notes {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  white-space: pre-wrap;
}

.inv-drawer-notes-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* ── Wipe Verified Badge ──────────────────────────────────────────────────── */

.inv-wipe-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
}

.inv-wipe-badge.verified {
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
}

.inv-wipe-badge.unverified {
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  color: var(--warn);
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */

.inv-input {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  width: 100%;
}

.inv-input:focus {
  outline: none;
  border-color: var(--accent);
}

.inv-textarea {
  resize: vertical;
  min-height: 60px;
}

.inv-select {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}

/* ── Modal ────────────────────────────────────────────────────────────────── */

.inv-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 900);
}

.inv-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 480px;
  max-height: 80vh;
  overflow-y: auto;
}

.inv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.inv-modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inv-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.inv-form-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.inv-form-row {
  display: flex;
  gap: 8px;
}

.inv-form-row > .inv-form-label {
  flex: 1 1;
}

.inv-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}

.inv-modal-close:hover {
  color: var(--text);
}

/* ── Definition Search Dropdown ───────────────────────────────────────────── */

.inv-def-search-wrap {
  position: relative;
}

.inv-def-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 160px;
  overflow-y: auto;
  z-index: 10;
  margin-top: 2px;
}

.inv-def-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.inv-def-result:hover {
  background: var(--bg4);
}

.inv-def-result-meta {
  font-size: 10px;
  color: var(--muted);
}

/* ── Action Input Row (consume/split quantity) ────────────────────────────── */

.inv-action-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}

.inv-action-input-row input {
  width: 70px;
}

/* ── User Search (issue/transfer) ─────────────────────────────────────────── */

.inv-user-search-wrap {
  position: relative;
  margin-top: 6px;
}

.inv-user-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 160px;
  overflow-y: auto;
  z-index: 10;
  margin-top: 2px;
}

.inv-user-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.inv-user-result:hover {
  background: var(--bg4);
}

/* ── Location/Container Selector ──────────────────────────────────────────── */

.inv-loc-select-wrap {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Empty / Loading / Unavailable ────────────────────────────────────────── */

.inv-empty,
.inv-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--muted);
  font-size: 13px;
  flex: 1 1;
}

.inv-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
}

.inv-unavailable-icon {
  font-size: 48px;
  opacity: 0.5;
}

.inv-unavailable-text {
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
}

.inv-unavailable-sub {
  font-size: 13px;
  color: var(--muted);
}

.inv-inline-add-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.inv-inline-add-btn:hover {
  background: var(--bg3);
  color: var(--accent);
  border-color: var(--accent);
}
.inv-inline-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/moderation/moderation.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════════
   Moderation Module Styles
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar ───────────────────────────────────────────────────────────────── */

.mod-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 0;
}

.mod-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--bg3);
  margin-bottom: 8px;
}

.mod-sidebar-icon { font-size: 18px; }
.mod-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.mod-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}

.mod-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.mod-nav-item:hover { background: var(--bg3); color: var(--text); }
.mod-nav-item.active { background: var(--bg3); color: var(--text); font-weight: 500; }

.mod-nav-icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.mod-nav-label { flex: 1 1; }

.mod-nav-badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.mod-quick-stats {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid var(--bg3);
  display: flex;
  gap: 16px;
}

.mod-stat { display: flex; flex-direction: column; align-items: center; flex: 1 1; }
.mod-stat-value { font-size: 18px; font-weight: 700; color: var(--text); }
.mod-stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Main Views ────────────────────────────────────────────────────────────── */

.mod-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--muted);
  font-size: 14px;
}

.mod-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.mod-view-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.mod-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.mod-filter-select {
  background: var(--bg3);
  border: 1px solid var(--bg4);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.mod-filter-select:focus { outline: none; border-color: var(--accent); }

.mod-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Create Forms ──────────────────────────────────────────────────────────── */

.mod-create-form {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mod-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mod-form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mod-form-select,
.mod-form-input {
  background: var(--bg1);
  border: 1px solid var(--bg4);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
}
.mod-form-select:focus,
.mod-form-input:focus { outline: none; border-color: var(--accent); }

.mod-form-textarea {
  background: var(--bg1);
  border: 1px solid var(--bg4);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
}
.mod-form-textarea:focus { outline: none; border-color: var(--accent); }

/* ── Dashboard ─────────────────────────────────────────────────────────────── */

.mod-dashboard { padding: 20px; }

.mod-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 16px;
}

.mod-stat-card {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.mod-stat-card.accent { border-color: var(--accent); }

.mod-stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.mod-stat-card-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
}

/* ── Dashboard header + period picker ─────────────────────────────────────── */

.mod-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mod-dashboard-header .mod-view-title { margin: 0; }

.mod-period-picker {
  display: flex;
  gap: 4px;
  background: var(--bg3);
  border-radius: 8px;
  padding: 3px;
}

.mod-period-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.mod-period-btn:hover { color: var(--text); }
.mod-period-btn.active { background: var(--bg1); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* ── Activity section ──────────────────────────────────────────────────────── */

.mod-activity-section { margin-top: 28px; }

.mod-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0 0 14px;
}

.mod-activity-group {
  margin-bottom: 20px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.mod-activity-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}

.mod-activity-count {
  background: var(--bg4);
  color: var(--text);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
}

.mod-activity-table { font-size: 12px; }

.mod-activity-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 90px;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.mod-activity-row:last-child { border-bottom: none; }

.mod-activity-head {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--bg2);
}

/* Cases table has 5 cols */
.mod-activity-table-5col .mod-activity-row {
  grid-template-columns: 1.2fr 1fr 80px 90px 90px;
}

.mod-activity-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.mod-activity-date { color: var(--muted); font-size: 11px; }

.mod-status-pill,
.mod-sev-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.mod-activity-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */

.mod-reports,
.mod-cases,
.mod-restrictions,
.mod-positions,
.mod-bindings { padding: 20px; }

.mod-table { display: flex; flex-direction: column; gap: 1px; }

.mod-table-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--bg3);
}

.mod-table-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--bg2);
  transition: background 0.1s;
}
.mod-table-row:hover { background: var(--bg2); }
.mod-table-row.clickable { cursor: pointer; }

/* Column widths */
.mod-col-target   { flex: 2 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mod-col-count    { flex: 0.5 1; text-align: center; }
.mod-col-severity { flex: 1 1; }
.mod-col-status   { flex: 1.2 1; display: flex; align-items: center; gap: 6px; }
.mod-col-date     { flex: 1 1; color: var(--muted); font-size: 12px; }
.mod-col-actions  { flex: 1 1; display: flex; gap: 6px; justify-content: flex-end; }
.mod-col-case     { flex: 1 1; }
.mod-col-subject  { flex: 2 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mod-col-assigned { flex: 1.2 1; color: var(--muted); }
.mod-col-type     { flex: 1 1; }
.mod-col-scope    { flex: 0.8 1; }
.mod-col-expires  { flex: 1 1; color: var(--muted); font-size: 12px; }
.mod-col-action   { flex: 2 1; text-transform: capitalize; }
.mod-col-approval { flex: 1 1; }
.mod-col-toggle   { flex: 0.6 1; display: flex; justify-content: center; }

.mod-target-type {
  font-size: 10px;
  text-transform: uppercase;
  background: var(--bg3);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--muted);
}
.mod-target-id { font-family: monospace; font-size: 12px; color: var(--muted); }

.mod-case-number { font-weight: 600; font-family: monospace; color: var(--accent); }

.mod-severity-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  color: #000;
}

.mod-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mod-status-badge {
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 2px 10px;
  border-radius: 10px;
  color: #000;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.mod-btn-sm {
  padding: 4px 10px;
  font-size: 11px;
  border: 1px solid var(--bg4);
  border-radius: 4px;
  background: var(--bg3);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
.mod-btn-sm:hover { background: var(--bg4); }
.mod-btn-sm.danger { border-color: #ed4245; color: #ed4245; }
.mod-btn-sm.danger:hover { background: rgba(237, 66, 69, 0.15); }

.mod-btn-primary {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mod-btn-primary:hover { opacity: 0.85; }
.mod-btn-primary:disabled { opacity: 0.4; cursor: default; }

.mod-btn-danger {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid #ed4245;
  border-radius: 6px;
  background: transparent;
  color: #ed4245;
  cursor: pointer;
  transition: background 0.15s;
}
.mod-btn-danger:hover { background: rgba(237, 66, 69, 0.15); }

.mod-btn-back {
  padding: 4px 10px;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.mod-btn-back:hover { color: var(--text); }

/* ── Case Detail ───────────────────────────────────────────────────────────── */

.mod-case-detail { padding: 20px; }

.mod-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.mod-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  padding: 16px;
  background: var(--bg2);
  border-radius: 8px;
  margin-bottom: 16px;
}

.mod-meta-item { display: flex; flex-direction: column; gap: 4px; }
.mod-meta-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.mod-meta-value { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */

.mod-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--bg3);
  margin-bottom: 16px;
}

.mod-tab {
  padding: 8px 16px;
  font-size: 13px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s;
}
.mod-tab:hover { color: var(--text); }
.mod-tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ── Timeline ──────────────────────────────────────────────────────────────── */

.mod-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 16px;
  border-left: 2px solid var(--bg3);
}

.mod-timeline-event {
  position: relative;
  padding: 8px 0 8px 20px;
}

.mod-timeline-dot {
  position: absolute;
  left: -21px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg1);
}

.mod-timeline-content { }
.mod-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.mod-timeline-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}
.mod-timeline-time { font-size: 11px; color: var(--muted); }
.mod-timeline-detail { font-size: 13px; color: var(--text); }
.mod-timeline-actor { font-size: 11px; color: var(--muted); margin-top: 2px; }

.mod-add-note {
  margin-top: 12px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mod-note-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--bg3);
  border-radius: 6px;
  background: var(--bg2);
  color: var(--text);
  resize: vertical;
  font-family: inherit;
}
.mod-note-input:focus { outline: none; border-color: var(--accent); }

/* ── Evidence ──────────────────────────────────────────────────────────────── */

.mod-evidence-list { display: flex; flex-direction: column; gap: 8px; }

.mod-evidence-item {
  padding: 12px;
  background: var(--bg2);
  border-radius: 8px;
  border: 1px solid var(--bg3);
}

.mod-evidence-type {
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--text);
  margin-bottom: 4px;
}

.mod-evidence-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 12px;
}

.mod-evidence-hash {
  font-size: 10px;
  font-family: monospace;
  color: var(--muted);
  margin-top: 4px;
}

.mod-case-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bg3);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Positions ─────────────────────────────────────────────────────────────── */

.mod-position-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 16px;
}

.mod-position-card {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.mod-position-card:hover { border-color: var(--accent); }

.mod-position-tier {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 4px;
}

.mod-position-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.mod-position-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
}

.mod-position-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

.mod-position-title {
  color: #ed4245;
  font-weight: 500;
}

/* ── Toggle ────────────────────────────────────────────────────────────────── */

.mod-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  display: inline-block;
}
.mod-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.mod-toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg4);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.mod-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.mod-toggle input:checked + .mod-toggle-slider { background: var(--accent); }
.mod-toggle input:checked + .mod-toggle-slider::before { transform: translateX(16px); }

/* ── Bindings ──────────────────────────────────────────────────────────────── */

.mod-bindings-table { margin-top: 12px; }

/* ── Approvals (Phase 2) ─────────────────────────────────────────────────── */

.mod-approvals { padding: 20px; }

.mod-view-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 16px;
}

.mod-approval-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mod-approval-card {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
  padding: 16px;
}

.mod-approval-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mod-approval-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.mod-approval-target {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mod-approval-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.mod-approval-type {
  font-size: 12px;
  color: var(--muted);
  text-transform: capitalize;
}

.mod-approval-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.mod-approval-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.mod-reject-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mod-reject-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Handbook (Phase 2) ──────────────────────────────────────────────────── */

.mod-handbook { padding: 20px; }

.mod-handbook-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin: 16px 0;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
}

.mod-handbook-icon { font-size: 32px; }

.mod-handbook-details { flex: 1 1; }

.mod-handbook-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.mod-handbook-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.mod-handbook-acks { margin-top: 24px; }

.mod-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

/* ── Moderators (Phase 2) ────────────────────────────────────────────────── */

.mod-moderators { padding: 20px; }

.mod-moderator-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 16px;
}

.mod-moderator-card {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
  padding: 16px;
}

.mod-moderator-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mod-moderator-info { flex: 1 1; min-width: 0; }

.mod-moderator-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.mod-moderator-handle {
  font-size: 12px;
  color: var(--muted);
}

.mod-moderator-position {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #ed4245;
  margin-top: 2px;
}

.mod-position-tier-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--bg3);
  color: var(--muted);
  padding: 1px 5px;
  border-radius: 4px;
}

.mod-moderator-stats {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--bg3);
  border-bottom: 1px solid var(--bg3);
}

.mod-moderator-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1;
}

.mod-moderator-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.mod-moderator-stat-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
}

.mod-moderator-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}

.mod-handbook-acked { color: #57f287; }
.mod-handbook-not-acked { color: var(--muted); opacity: 0.6; }

/* ── Sidebar Sections ─────────────────────────────────────────────────── */

.mod-nav-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  padding: 12px 10px 4px;
  opacity: 0.7;
}

/* ── Appeals (Phase 3) ────────────────────────────────────────────────── */

.mod-appeals-list { padding: 20px; }

.mod-appeal-detail { padding: 20px; }

.mod-appeal-section {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
}

.mod-appeal-reason {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}

.mod-appeal-outcome-note {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

.mod-appeal-auto-enforce {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(237, 66, 69, 0.1);
  border: 1px solid rgba(237, 66, 69, 0.3);
  border-radius: 6px;
  font-size: 12px;
  color: #ed4245;
}

.mod-appeal-note-text {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 12px;
  font-style: italic;
}

.mod-appeal-decision-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mod-appeal-outcome-selector {
  display: flex;
  gap: 6px;
}

.mod-appeal-outcome-selector .mod-btn-sm.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.mod-appeal-decision-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Evidence Library (Phase 3) ──────────────────────────────────────── */

.mod-evidence-library { padding: 20px; }

.mod-evidence-type-icon {
  margin-right: 6px;
}

.mod-evidence-hash-col {
  font-family: monospace;
  font-size: 11px;
  color: var(--muted);
}

.mod-evidence-detail-view { padding: 20px; }

.mod-hash-value {
  font-family: monospace;
  font-size: 11px;
  word-break: break-all;
}

.mod-evidence-content-block {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
}

.mod-evidence-system-label {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 10px;
}

.mod-evidence-message {
  padding: 12px;
  background: var(--bg1);
  border-radius: 6px;
}

.mod-evidence-msg-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.mod-evidence-msg-content {
  font-size: 14px;
  color: var(--text);
  white-space: pre-wrap;
}

.mod-evidence-msg-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}

.mod-evidence-img {
  max-width: 100%;
  border-radius: 6px;
}

.mod-evidence-log {
  font-family: monospace;
  font-size: 12px;
  color: var(--text);
  background: var(--bg1);
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
  margin: 0;
}

.mod-evidence-url-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mod-evidence-summary-content {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Oversight (Phase 3) ─────────────────────────────────────────────── */

.mod-oversight { padding: 20px; }

.mod-oversight-section {
  margin-top: 24px;
}

.mod-volume-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding: 12px;
  background: var(--bg2);
  border-radius: 8px;
  border: 1px solid var(--bg3);
}

.mod-volume-bar-wrap {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.mod-volume-bar {
  width: 100%;
  max-width: 40px;
  min-height: 2px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  transition: height 0.3s;
}

.mod-volume-label {
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
}

/* ── Drill-down (Phase 3) ────────────────────────────────────────────── */

.mod-drilldown { padding: 20px; }

.mod-action-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--bg2);
  border-radius: 8px;
  border: 1px solid var(--bg3);
}

.mod-action-type-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text);
  text-transform: capitalize;
}

.mod-action-count {
  font-weight: 600;
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 4 — Emergency Banner, Settings, Audit Log
   ═══════════════════════════════════════════════════════════════════════════ */

/* Emergency Mode Banner */
.mod-emergency-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(237,66,69,.15), rgba(237,66,69,.05));
  border: 1px solid rgba(237,66,69,.4);
  border-radius: 8px;
  margin-bottom: 16px;
}

.mod-emergency-icon { font-size: 22px; }

.mod-emergency-info {
  flex: 1 1;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.mod-emergency-info strong { color: #ed4245; }

.mod-emergency-meta {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.mod-emergency-deactivate {
  background: #ed4245;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.mod-emergency-deactivate:hover { background: #c93b3e; }

/* Automation Alerts Strip */
.mod-alerts-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.mod-alert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}

.mod-alert-item.mod-alert-critical {
  background: rgba(237,66,69,.12);
  border-left: 3px solid #ed4245;
}

.mod-alert-item.mod-alert-high {
  background: rgba(244,123,103,.1);
  border-left: 3px solid #f47b67;
}

.mod-alert-item.mod-alert-medium {
  background: rgba(254,231,92,.08);
  border-left: 3px solid #fee75c;
}

.mod-alert-type {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--muted);
  min-width: 100px;
}

.mod-alert-msg { flex: 1 1; }

/* Settings Layout */
.mod-settings { padding: 0; }

.mod-settings-layout {
  display: flex;
  gap: 0;
  min-height: 500px;
}

.mod-settings-tabs {
  display: flex;
  flex-direction: column;
  width: 180px;
  border-right: 1px solid var(--bg3);
  padding: 8px 0;
  flex-shrink: 0;
}

.mod-settings-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  text-align: left;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 0;
  transition: background .15s, color .15s;
}

.mod-settings-tab:hover { background: var(--bg2); color: var(--text); }

.mod-settings-tab.active {
  background: var(--bg2);
  color: var(--text);
  font-weight: 600;
  border-right: 2px solid var(--accent);
}

.mod-settings-content {
  flex: 1 1;
  padding: 16px 24px;
  overflow-y: auto;
}

.mod-settings-panel { max-width: 560px; }

/* Setting Rows */
.mod-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg2);
  gap: 16px;
}

.mod-setting-label {
  font-size: 13px;
  color: var(--text);
  flex-shrink: 0;
}

.mod-setting-input {
  width: 100px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--bg3);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  text-align: right;
}

.mod-setting-input.mod-setting-text {
  width: 200px;
  text-align: left;
}

.mod-setting-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--bg3);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
}

.mod-setting-toggle {
  padding: 5px 14px;
  border-radius: 12px;
  border: 1px solid var(--bg3);
  background: var(--bg2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.mod-setting-toggle.active {
  background: rgba(87,242,135,.15);
  border-color: rgba(87,242,135,.3);
  color: #57f287;
}

.mod-setting-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  padding: 8px 0;
}

.mod-setting-warning {
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(254,231,92,.08);
  border: 1px solid rgba(254,231,92,.25);
  border-radius: 6px;
  font-size: 12px;
  color: #fee75c;
  line-height: 1.5;
}

.mod-setting-value {
  font-size: 13px;
  color: var(--text);
}

.mod-setting-result {
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(87,242,135,.08);
  border: 1px solid rgba(87,242,135,.25);
  border-radius: 6px;
  font-size: 12px;
  color: #57f287;
}

/* Emergency Mode Settings */
.mod-emergency-status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

.mod-emergency-status-badge.active {
  background: rgba(237,66,69,.2);
  color: #ed4245;
}

.mod-emergency-status-badge.inactive {
  background: var(--bg2);
  color: var(--muted);
}

.mod-emergency-activate-form {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.mod-emergency-activate-form .mod-setting-input { flex: 1 1; width: auto; text-align: left; }

/* Buttons */
.mod-btn {
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.mod-btn-secondary {
  background: var(--bg3);
  color: var(--text);
}

.mod-btn-secondary:hover { background: var(--bg4, var(--bg3)); }

.mod-btn-danger {
  background: #ed4245;
  color: #fff;
}

.mod-btn-danger:hover { background: #c93b3e; }
.mod-btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* Audit Log within Settings */
.mod-col-action {
  flex: 1 1;
  min-width: 120px;
}

.mod-col-detail {
  flex: 2 1;
  min-width: 200px;
}

.mod-audit-action {
  text-transform: capitalize;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
}

.mod-audit-details {
  font-size: 12px;
  color: var(--muted);
}

.mod-audit-key {
  font-weight: 600;
  color: var(--text);
}

.mod-audit-old {
  color: #f47b67;
  text-decoration: line-through;
}

.mod-audit-new {
  color: #57f287;
}

/* ── Shared Inputs ───────────────────────────────────────────────────────── */

.mod-input {
  background: var(--bg3);
  border: 1px solid var(--bg4);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  flex: 1 1;
  min-width: 0;
}
.mod-input:focus { outline: none; border-color: var(--accent); }

.mod-textarea {
  background: var(--bg3);
  border: 1px solid var(--bg4);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
  min-height: 80px;
  resize: vertical;
  box-sizing: border-box;
}
.mod-textarea:focus { outline: none; border-color: var(--accent); }

.mod-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}

/* ── Badge / Tag ─────────────────────────────────────────────────────────── */

.mod-badge {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  background: var(--bg3);
  color: var(--muted);
  border: 1px solid var(--bg4);
  white-space: nowrap;
}

.mod-tag {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  background: rgba(88, 101, 242, 0.15);
  color: #7289da;
  border: 1px solid rgba(88, 101, 242, 0.3);
}

/* ── Button variants ─────────────────────────────────────────────────────── */

.mod-btn-sm.mod-btn-danger { border-color: #ed4245; color: #ed4245; }
.mod-btn-sm.mod-btn-danger:hover { background: rgba(237, 66, 69, 0.15); }
.mod-btn-sm.mod-btn-success { border-color: #57f287; color: #57f287; }
.mod-btn-sm.mod-btn-success:hover { background: rgba(87, 242, 135, 0.12); }
.mod-btn-sm.mod-btn-secondary { border-color: var(--bg4); color: var(--muted); }
.mod-btn-sm.mod-btn-secondary:hover { background: var(--bg4); color: var(--text); }

.mod-upload-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* ── Access Denied ───────────────────────────────────────────────────────── */

.mod-access-denied {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  color: var(--muted);
  font-size: 14px;
}

/* ── View Header Actions ─────────────────────────────────────────────────── */

.mod-view-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Form Card ───────────────────────────────────────────────────────────── */

.mod-form-card {
  background: var(--bg2);
  border: 1px solid var(--bg3);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mod-form-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.mod-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── PDF Viewer ──────────────────────────────────────────────────────────── */

.mod-pdf-viewer {
  margin-top: 16px;
  border: 1px solid var(--bg3);
  border-radius: 8px;
  overflow: hidden;
}

.mod-pdf-iframe {
  width: 100%;
  height: 70vh;
  border: none;
  display: block;
}

/* ── Training ────────────────────────────────────────────────────────────── */

.mod-training { padding: 20px; }

.mod-training-progress {
  font-size: 13px;
  color: var(--muted);
}

.mod-training-section { margin-bottom: 24px; }

.mod-training-item {
  border: 1px solid var(--bg3);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.mod-training-item.completed { border-color: rgba(87, 242, 135, 0.3); }

.mod-training-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.mod-training-item-header:hover { background: var(--bg3); }

.mod-training-check {
  font-size: 16px;
  color: var(--muted);
  flex-shrink: 0;
}
.mod-training-check.done { color: #57f287; }

.mod-training-title {
  flex: 1 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.mod-training-type { flex-shrink: 0; }

.mod-training-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.mod-training-item-body {
  padding: 12px 16px;
  background: var(--bg1);
  border-top: 1px solid var(--bg3);
}

.mod-training-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
}

.mod-training-content {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.6;
}

.mod-training-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.mod-training-link:hover { text-decoration: underline; }

/* ── SOPs ────────────────────────────────────────────────────────────────── */

.mod-sops { padding: 20px; }

.mod-sop-category { margin-bottom: 24px; }

.mod-sop-item {
  border: 1px solid var(--bg3);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.mod-sop-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.mod-sop-header:hover { background: var(--bg3); }

.mod-sop-title {
  flex: 1 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.mod-sop-version { flex-shrink: 0; }

.mod-sop-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.mod-sop-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.mod-sop-body {
  padding: 12px 16px;
  background: var(--bg1);
  border-top: 1px solid var(--bg3);
}

.mod-sop-content {
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.6;
}

.mod-sop-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
}

/* ── Vote-Based Approval ──────────────────────────────────────────────── */

.mod-vote-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
}

.mod-vote-section {
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

.mod-vote-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg2);
  margin-bottom: 8px;
}

.mod-vote-bar-seg {
  min-width: 4px;
  transition: flex 0.3s ease;
}
.mod-vote-bar-seg.approve { background: #57f287; }
.mod-vote-bar-seg.reject { background: #ed4245; }
.mod-vote-bar-seg.neutral { background: #72767d; }

.mod-vote-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.mod-vote-threshold {
  color: var(--accent);
  font-weight: 600;
}

.mod-vote-window {
  color: var(--text-dim);
}

.mod-vote-voters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.mod-vote-voter {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg2);
}

.mod-vote-voter-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
}
.mod-vote-voter-badge.approve { background: rgba(87, 242, 135, 0.2); color: #57f287; }
.mod-vote-voter-badge.reject { background: rgba(237, 66, 69, 0.2); color: #ed4245; }
.mod-vote-voter-badge.neutral { background: rgba(114, 118, 125, 0.2); color: #72767d; }

.mod-vote-actions {
  display: flex;
  gap: 8px;
}

.mod-vote-actions .mod-btn-sm.approve { border-color: #57f287; color: #57f287; }
.mod-vote-actions .mod-btn-sm.approve.active { background: #57f287; color: #000; }
.mod-vote-actions .mod-btn-sm.reject { border-color: #ed4245; color: #ed4245; }
.mod-vote-actions .mod-btn-sm.reject.active { background: #ed4245; color: #fff; }
.mod-vote-actions .mod-btn-sm.neutral { border-color: #72767d; color: #72767d; }
.mod-vote-actions .mod-btn-sm.neutral.active { background: #72767d; color: #fff; }

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/channelModals.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
/* ── Channel Management Modals ─────────────────────────────────────────────── */

.ch-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch-modal-panel {
  position: relative;
  width: 420px;
  max-width: 90vw;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 24px;
  z-index: 301;
  animation: ch-modal-in 0.15s ease-out;
}

@keyframes ch-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ch-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.ch-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ch-modal-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
  margin-bottom: 4px;
}

.ch-modal-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg0);
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.ch-modal-input:focus {
  border-color: var(--accent);
}

.ch-modal-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg0);
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.ch-modal-textarea:focus {
  border-color: var(--accent);
}

.ch-modal-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg0);
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}

.ch-modal-select:focus {
  border-color: var(--accent);
}

.ch-modal-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}

.ch-modal-checkbox input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.ch-modal-hint {
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.4;
  margin-top: 4px;
}

.ch-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.ch-modal-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.ch-modal-btn:hover {
  opacity: 0.85;
}

.ch-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ch-modal-btn-primary {
  background: var(--accent);
  color: #fff;
}

.ch-modal-btn-cancel {
  background: var(--bg3);
  color: var(--text);
}

/* ── Type toggle (Text / Voice picker) ────────────────────────────────────── */

.ch-type-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--line2);
  border-radius: 8px;
  overflow: hidden;
}

.ch-type-toggle-btn {
  flex: 1 1;
  padding: 8px 0;
  background: var(--bg0);
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.ch-type-toggle-btn:not(:last-child) {
  border-right: 1px solid var(--line2);
}

.ch-type-toggle-btn:hover {
  background: var(--bg2);
  color: var(--text);
}

.ch-type-toggle-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ── Modal tabs ───────────────────────────────────────────────────────────── */

.ch-modal-tabs {
  display: flex;
  height: 38px;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 16px;
}

.ch-modal-tab {
  height: 38px;
  padding: 0 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.ch-modal-tab:hover {
  color: var(--text);
}

.ch-modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ch-modal-panel.wide {
  width: 560px;
}

/* ── Category color picker ─────────────────────────────────────────────────── */

.ch-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.ch-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
  flex-shrink: 0;
  padding: 0;
}

.ch-color-swatch:hover {
  transform: scale(1.15);
}

.ch-color-swatch.active {
  border-color: #fff;
  transform: scale(1.15);
}

.ch-color-none {
  background: var(--bg3);
  position: relative;
}

.ch-color-none::after {
  content: '✕';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted2);
  line-height: 1;
}

/* ── NSFW Gate Modal ─────────────────────────────────────────────────────── */

.nsfw-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nsfw-gate-panel {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 36px;
  width: 380px;
  max-width: 90vw;
  text-align: center;
  animation: ch-modal-in 0.15s ease-out;
}

.nsfw-gate-icon {
  display: flex;
  justify-content: center;
  color: #faa61a;
  margin-bottom: 8px;
}

.nsfw-gate-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.nsfw-gate-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 24px;
}

.nsfw-gate-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.nsfw-gate-btn {
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}
.nsfw-gate-btn:hover { filter: brightness(1.12); }

.nsfw-gate-btn-continue {
  background: #23a559;
  color: #fff;
}

.nsfw-gate-btn-abort {
  background: #ed4245;
  color: #fff;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/components/SystemMessage.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
.sys-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  font-size: 13px;
  color: var(--muted);
}

.sys-msg-icon {
  font-size: 14px;
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
  opacity: 0.7;
}

.sys-msg-text {
  font-style: italic;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/components/FloatingTray.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Floating Tray ──────────────────────────────────────────────────────── */

.float-tray {
  position: fixed;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.98), rgba(38, 40, 45, 0.98));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.42);
  pointer-events: auto;
  animation: float-tray-in 0.12s ease-out;
}

@keyframes float-tray-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.float-tray-btn {
  width: 32px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  transition: background 0.1s, color 0.1s;
}

.float-tray-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/components/popups/popups.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Shared InputTray Popup Styles ───────────────────────────────────────── */

.input-popup {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 6px;
  animation: input-popup-in 0.12s ease-out;
}

@keyframes input-popup-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Menu item (used by RuleMenu, CodeMenu, CalloutMenu) ─────────────────── */

.input-popup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
}

.input-popup-item:hover {
  background: var(--bg4);
}

.input-popup-item-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.input-popup-item-label {
  flex: 1 1;
  font-weight: 600;
}

.input-popup-item-hint {
  font-size: 11px;
  color: var(--muted2);
}

/* ── Section label inside popup ──────────────────────────────────────────── */

.input-popup-section {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
  padding: 4px 10px 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── TimePicker ──────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */

.time-picker {
  padding: 10px;
}

.tp-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 6px;
}

.tp-month-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}

.tp-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.1s, color 0.1s;
}

.tp-nav-btn:hover {
  background: var(--bg4);
  color: var(--text);
}

.tp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 0;
  gap: 0;
  text-align: center;
  margin-bottom: 2px;
}

.tp-weekday {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted2);
  text-transform: uppercase;
  padding: 2px 0;
}

.tp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1px;
  gap: 1px;
}

.tp-day {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.1s;
}

.tp-day:hover {
  background: var(--bg4);
}

.tp-day.out {
  color: var(--muted2);
  opacity: 0.4;
}

.tp-day.today {
  font-weight: 900;
  color: var(--accent);
}

.tp-day.selected {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.tp-day.selected.today {
  color: #fff;
}

.tp-separator {
  height: 1px;
  background: var(--line2);
  margin: 8px 0;
}

/* ── Time input row ──────────────────────────────────────────────────────── */

.tp-time-row {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.tp-time-input {
  width: 42px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}

.tp-time-input::-webkit-inner-spin-button,
.tp-time-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tp-time-input:focus {
  border-color: var(--accent);
}

.tp-time-colon {
  font-weight: 900;
  color: var(--muted);
  font-size: 16px;
}

.tp-ampm-btn {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.tp-ampm-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Format selector ─────────────────────────────────────────────────────── */

.tp-formats {
  display: flex;
  flex-direction: column;
}

.tp-format-item {
  padding: 5px 10px;
}

.tp-format-active {
  background: rgba(88, 101, 242, 0.12);
  color: var(--accent);
}

.tp-format-active .input-popup-item-hint {
  color: var(--accent);
  opacity: 0.7;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.tp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tp-preview {
  font-size: 12px;
  color: var(--muted);
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tp-insert-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.12s;
  flex-shrink: 0;
}

.tp-insert-btn:hover {
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── GradientPicker ──────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */

.gradient-picker {
  padding: 10px;
}

.gp-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.gp-col-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
  margin-bottom: 4px;
}

.gp-swatch-active {
  width: 100%;
  height: 24px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 6px;
}

.gp-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 3px;
  gap: 3px;
}

.gp-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.1s;
}

.gp-color-swatch:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.gp-color-swatch.selected {
  border-color: #fff;
}

.gp-hex-input {
  width: 100%;
  height: 26px;
  border-radius: 5px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--text);
  font-size: 11px;
  font-family: 'Consolas', 'Monaco', monospace;
  text-align: center;
  outline: none;
  margin-top: 6px;
}

.gp-hex-input:focus {
  border-color: var(--accent);
}

.gp-preview-bar {
  height: 24px;
  border-radius: 6px;
  margin: 10px 0 8px;
  animation: md-gradient-shift 3s linear infinite;
  background-size: 200% auto;
}

.gp-footer {
  display: flex;
  justify-content: flex-end;
}

.gp-insert-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.12s;
}

.gp-insert-btn:hover {
  opacity: 0.85;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/components/InputTray.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Input Tray (persistent toolbar below editor) ───────────────────────── */

.input-tray {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 2px 2px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.input-tray-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  border: 0;
  color: var(--muted2);
  font-size: 12px;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.input-tray-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

.input-tray-btn.active {
  background: rgba(88, 101, 242, 0.16);
  color: #dfe4ff;
  border-color: rgba(88, 101, 242, 0.28);
}

.input-tray-icon {
  font-size: 13px;
  line-height: 1;
}

.input-tray-label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/components/SypherEditor/ModeButton.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Mode Button ──────────────────────────────────────────────────────────── */

.sypher-mode-btn-wrap {
  position: relative;
}

.sypher-mode-btn.active {
  color: var(--accent);
}

/* ── Dropdown ──────────────────────────────────────────────────────────────── */

.sypher-mode-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 100;
  animation: float-tray-in 0.15s ease-out;
}

/* ── Items ─────────────────────────────────────────────────────────────────── */

.sypher-mode-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  transition: background 0.1s;
}

.sypher-mode-item:hover {
  background: var(--bg4);
}

.sypher-mode-item.current {
  color: var(--accent);
}

.sypher-mode-item-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.sypher-mode-item-label {
  font-weight: 700;
  flex-shrink: 0;
}

.sypher-mode-item-desc {
  color: var(--muted2);
  font-size: 11px;
  margin-left: auto;
  white-space: nowrap;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/components/SypherEditor/TableGrid.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Table Grid ───────────────────────────────────────────────────────────── */

.sypher-table-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.sypher-table-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  color: var(--muted2);
  padding: 0 2px;
}

.sypher-table-controls label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sypher-table-controls input[type="number"] {
  width: 42px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 2px 4px;
  text-align: center;
}

.sypher-table-controls input[type="number"]:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Grid ──────────────────────────────────────────────────────────────────── */

.sypher-table-grid {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  background: var(--line2);
  border: 1px solid var(--line2);
  border-radius: 6px;
  overflow: hidden;
}

.sypher-table-cell {
  background: var(--bg1);
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text);
  min-height: 26px;
  outline: none;
  line-height: 1.35;
}

.sypher-table-cell.header {
  background: var(--bg4);
  font-weight: 900;
}

.sypher-table-cell:focus {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.sypher-table-cell:empty::before {
  content: attr(data-placeholder);
  color: var(--muted2);
  pointer-events: none;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/ui/gifPicker.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/* ── GIF Picker Popup ─────────────────────────────────────────────────────── */

.gif-picker-popup {
  position: fixed;
  width: 392px;
  max-height: 450px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 12px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: gif-picker-in 0.12s ease-out;
}

@keyframes gif-picker-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Search ── */

.gif-picker-search {
  margin: 8px 8px 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
  font-size: 13px;
  outline: none;
  flex-shrink: 0;
}

.gif-picker-search:focus {
  border-color: var(--accent);
}

.gif-picker-search::placeholder {
  color: var(--muted2);
}

/* ── Scrollable area ── */

.gif-picker-scroll {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 0;
}

.gif-picker-scroll::-webkit-scrollbar {
  width: 6px;
}

.gif-picker-scroll::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 3px;
}

/* ── Masonry-ish grid (2 columns) ── */

.gif-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 4px;
  gap: 4px;
}

/* ── Individual cell ── */

.gif-picker-cell {
  border: none;
  background: var(--bg2);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: transform 0.1s, box-shadow 0.1s;
}

.gif-picker-cell:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 2px var(--accent);
}

.gif-picker-img {
  width: 100%;
  height: auto;
  min-height: 80px;
  max-height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* ── Empty / loading states ── */

.gif-picker-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted2);
  font-size: 13px;
}

.gif-picker-loading {
  padding: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* ── Footer / branding ── */

.gif-picker-footer {
  height: 28px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--line2);
  flex-shrink: 0;
  background: var(--bg2);
  border-radius: 0 0 12px 12px;
}

.gif-picker-branding {
  font-size: 10px;
  color: var(--muted2);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/ui/attachments.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Attachment Strip (pending uploads above editor) ────────────────────── */

.attachment-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--text);
  max-width: 220px;
  position: relative;
  overflow: hidden;
}

.attachment-item.uploading { opacity: 0.6; }
.attachment-item.error { border-color: var(--bad); }

.attachment-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.attachment-file-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg3);
  border-radius: 4px;
  flex-shrink: 0;
  font-size: 16px;
}

.attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0;
}

.attachment-remove {
  background: none;
  border: none;
  color: var(--muted2);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}

.attachment-remove:hover { color: var(--text); }

.attachment-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--muted2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: att-spin 0.6s linear infinite;
  flex-shrink: 0;
}

@keyframes att-spin {
  to { transform: rotate(360deg); }
}

/* ─── Attachment Display (on sent messages) ──────────────────────────────── */

.att-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.att-image {
  display: block;
  max-width: 400px;
  max-height: 300px;
  border-radius: 8px;
  cursor: pointer;
  object-fit: contain;
  background: var(--bg4);
}

.att-video {
  display: block;
  max-width: 400px;
  max-height: 300px;
  border-radius: 8px;
}

.att-audio {
  max-width: 400px;
  margin-top: 2px;
}

.att-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  width: -moz-fit-content;
  width: fit-content;
}

.att-file:hover { text-decoration: underline; }

.att-file-size {
  color: var(--muted2);
  font-size: 11px;
}

/* ─── Drag-over highlight ────────────────────────────────────────────────── */

.drag-over .ch-input-bar {
  border-color: var(--accent) !important;
  background: rgba(88, 101, 242, 0.07);
}

.dm-compose.drag-over {
  border-color: var(--accent) !important;
  background: rgba(88, 101, 242, 0.07);
}

/* ─── Lightbox ────────────────────────────────────────────────────────────── */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: zoom-out;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.lightbox-caption {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  text-align: center;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/ui/commandBuilder.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   Command Builder — Slash command popup UI
   ═══════════════════════════════════════════════════════════════════════════ */

.cmd-builder {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 380px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  animation: cmd-slide-up 0.15s ease;
}

@keyframes cmd-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Search bar ───────────────────────────────────────────────────────────── */

.cmd-search {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line2);
  gap: 4px;
}

.cmd-search-slash {
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
}

.cmd-search-input {
  flex: 1 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

/* ── Command list ─────────────────────────────────────────────────────────── */

.cmd-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 6px;
}

.cmd-category-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 8px 10px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cmd-category-icon {
  font-size: 12px;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}

.cmd-item:hover,
.cmd-item.selected {
  background: var(--panel);
}

.cmd-item-name {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

.cmd-item-desc {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted2);
  font-size: 13px;
}

/* ── Command form (param builder) ─────────────────────────────────────────── */

.cmd-form {
  display: flex;
  flex-direction: column;
}

.cmd-form-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line2);
}

.cmd-form-back {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  display: grid;
  place-items: center;
  transition: background 0.12s, color 0.12s;
}

.cmd-form-back:hover {
  background: var(--panel);
  color: var(--text);
}

.cmd-form-name {
  font-weight: 900;
  font-size: 14px;
  color: var(--accent);
}

.cmd-form-desc {
  font-size: 12px;
  color: var(--muted);
}

.cmd-form-params {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.cmd-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cmd-form-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.cmd-form-required {
  color: var(--bad);
  margin-left: 2px;
}

.cmd-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line2);
}

.cmd-form-cancel {
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.cmd-form-cancel:hover {
  background: var(--panel);
  color: var(--text);
}

.cmd-form-submit {
  height: 32px;
  padding: 0 18px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: filter 0.12s;
}

.cmd-form-submit:hover:not(:disabled) {
  filter: brightness(1.1);
}

.cmd-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Param inputs ─────────────────────────────────────────────────────────── */

.cmd-param-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s;
}

.cmd-param-input:focus {
  border-color: var(--accent);
}

.cmd-param-select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

.cmd-param-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

/* ── User picker dropdown ─────────────────────────────────────────────────── */

.cmd-param-user {
  position: relative;
}

.cmd-param-user-selected {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--bg4);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.cmd-param-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 180px;
  overflow-y: auto;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 110;
  margin-top: 4px;
}

.cmd-param-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
}

.cmd-param-dropdown-item:hover {
  background: var(--panel);
}

.cmd-param-dropdown-handle {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/components/SypherEditor/SypherEditor.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Sypher Editor ──────────────────────────────────────────────────────── */

.sypher-editor-container {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sypher-editor-container.edit-mode {
  flex-shrink: 1;
}

.sypher-input-bar {
  position: relative;
  height: auto;
  min-height: 56px;
  align-items: flex-end;
  transition: min-height 0.2s ease;
}

/* ── Editor content area (wraps all mode field sets) ───────────────────── */

.sypher-editor-content {
  flex: 1 1;
  min-width: 0;
}

.sypher-input-bar.edit-mode {
  min-height: 38px;
  height: auto;
  background: var(--bg3, #2b2d31);
  border-color: var(--accent);
  border-radius: 8px;
  padding: 0 8px;
}

/* ── Edit mode hint bar ─────────────────────────────────────────────────── */

.sypher-edit-hint {
  font-size: 11px;
  color: var(--muted2);
  padding: 3px 4px 0;
}

.sypher-edit-hint-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.sypher-edit-hint-btn:hover {
  text-decoration: underline;
}

.sypher-editor-wrap {
  position: relative;
  flex: 1 1;
  min-height: 38px;
  max-height: 200px;
  overflow-y: auto;
}

/* ── Mirror layer (ghost-syntax preview) ─────────────────────────────────── */

.sypher-mirror {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.35;
  padding: 8px 0;
  color: var(--text);
}

/* ── Editable layer ──────────────────────────────────────────────────────── */

.sypher-editable {
  position: relative;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.35;
  padding: 8px 0;
  outline: none;
  min-height: 22px;
  color: transparent;
  caret-color: var(--text);
}

.sypher-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--muted2);
  pointer-events: none;
}

/* ── Ghosted syntax marker styles ────────────────────────────────────────── */

.sy-plain {
  color: var(--text);
}

.sy-marker {
  opacity: 0.3;
  color: var(--muted2);
}

.sy-bold {
  font-weight: 900;
  color: var(--text);
}

.sy-italic {
  font-style: italic;
  color: var(--text);
}

.sy-underline {
  text-decoration: underline;
  color: var(--text);
}

.sy-strike {
  text-decoration: line-through;
  color: var(--muted);
}

.sy-spoiler {
  background: var(--bg4);
  border-radius: 3px;
  color: var(--muted2);
}

.sy-highlight {
  background: rgba(240, 178, 50, 0.25);
  border-radius: 3px;
  color: var(--text);
}

.sy-code {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  background: var(--bg3);
  border-radius: 3px;
  padding: 0 2px;
  color: var(--text);
}

.sy-sup {
  font-size: 0.75em;
  vertical-align: super;
  color: var(--text);
}

.sy-sub {
  font-size: 0.75em;
  vertical-align: sub;
  color: var(--text);
}

.sy-color {
  color: var(--accent);
  opacity: 0.8;
}

.sy-time {
  background: rgba(88, 101, 242, 0.12);
  border-radius: 3px;
  padding: 0 2px;
  color: var(--accent);
}

.sy-rainbow {
  background: linear-gradient(
    90deg,
    #ff0000, #ff7700, #ffff00, #00ff00, #0077ff, #8800ff, #ff0000
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sy-rainbow-shift 3s linear infinite;
}

@keyframes sy-rainbow-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.sy-pulse {
  display: inline-block;
  color: var(--accent);
  animation: sy-pulse-beat 1.5s ease-in-out infinite;
}

@keyframes sy-pulse-beat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.05); }
}

.sy-gradient {
  background: linear-gradient(90deg, var(--accent), #ff7700, var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: sy-gradient-shift 3s linear infinite;
}

@keyframes sy-gradient-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Mode-specific Layouts ──────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Embed / QA / FAQ modes ────────────────────────────────────────────── */

.sypher-input-bar.mode-embed,
.sypher-input-bar.mode-qa,
.sypher-input-bar.mode-faq {
  min-height: 120px;
}

.sypher-embed-fields {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.sypher-embed-header-wrap {
  border-bottom: 1px solid var(--line2);
}

.sypher-embed-header-wrap .sypher-editor-wrap {
  min-height: 28px;
  max-height: 40px;
}

.sypher-embed-body-wrap .sypher-editor-wrap {
  min-height: 60px;
  max-height: 160px;
}

.sypher-field-header .sypher-editable {
  font-weight: 700;
  font-size: 15px;
}

/* ── QA badge ──────────────────────────────────────────────────────────── */

.sypher-qa-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: rgba(88, 101, 242, 0.15);
  border-radius: 3px;
  padding: 1px 5px;
  pointer-events: none;
  z-index: 2;
}

/* ── FAQ category dropdown ─────────────────────────────────────────────── */

.sypher-faq-fields {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sypher-faq-category-wrap {
  padding: 4px 0;
  border-bottom: 1px solid var(--line2);
}

.sypher-faq-category {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
  outline: none;
}

.sypher-faq-category:focus {
  border-color: var(--accent);
}

/* ── Table mode ────────────────────────────────────────────────────────── */

.sypher-input-bar.mode-table {
  min-height: 140px;
}

/* ── Mention autocomplete popup ───────────────────────────────────────── */

/* ── Character count indicator ── */

.sypher-char-count {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 11px;
  color: var(--muted);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.8;
}

.sypher-char-count.over-limit {
  color: var(--danger, #e74c3c);
  font-weight: 700;
  opacity: 1;
}

.sypher-mention-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 4px;
  z-index: 30;
}

.sypher-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}

.sypher-mention-item:hover,
.sypher-mention-item.active {
  background: var(--bg3);
}

.sypher-mention-name {
  font-weight: 600;
  color: var(--text);
}

.sypher-mention-handle {
  font-size: 11px;
  color: var(--muted);
}

/* ── Schedule popover ──────────────────────────────────────────────────── */

.ch-schedule-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 200;
}

.ch-schedule-title {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted2);
}

.ch-schedule-input {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.ch-schedule-input:focus {
  border-color: var(--accent);
}

.ch-schedule-confirm {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ch-schedule-confirm:disabled {
  opacity: 0.4;
  cursor: default;
}

.ch-schedule-confirm:not(:disabled):hover {
  filter: brightness(1.1);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/qaForum.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
/* ─── QA Forum ───────────────────────────────────────────────────────────── */

.qa-forum-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Header ── */

.qa-forum-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.qa-forum-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.qa-ask-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
}

.qa-ask-btn:hover {
  opacity: 0.85;
}

/* ── Question List ── */

.qa-question-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px 12px;
}

.qa-question-list::-webkit-scrollbar {
  width: 6px;
}

.qa-question-list::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 3px;
}

.qa-question-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: var(--bg2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.qa-question-card:hover {
  background: var(--bg3);
  border-color: var(--line);
}

.qa-card-body {
  flex: 1 1;
  min-width: 0;
}

.qa-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}

.qa-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.qa-card-answers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg1);
  text-align: center;
  flex-shrink: 0;
}

.qa-card-answers-count {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.qa-card-answers-label {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Badges ── */

.qa-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.qa-badge-resolved {
  background: rgba(87, 242, 135, 0.15);
  color: #57f287;
}

.qa-badge-auto {
  background: rgba(254, 231, 92, 0.15);
  color: #fee75c;
}

/* ── Detail View ── */

.qa-detail-scroll {
  flex: 1 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.qa-detail-scroll::-webkit-scrollbar {
  width: 6px;
}

.qa-detail-scroll::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 3px;
}

.qa-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  background: var(--bg3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  transition: color 0.12s, background 0.12s;
}

.qa-back-btn:hover {
  background: var(--bg4);
  color: var(--text);
}

/* Question card in detail */
.qa-detail-question {
  padding: 16px;
  background: var(--bg2);
  border-radius: 10px;
  border: 1px solid var(--line);
  margin-bottom: 16px;
}

.qa-detail-question-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.qa-detail-question-body {
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.qa-detail-question-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}

/* ── Answers section ── */

.qa-answers-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.qa-answer {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background 0.12s;
}

.qa-answer.selected {
  background: rgba(87, 242, 135, 0.08);
  border-left-color: #57f287;
}

.qa-answer.auto-resolved {
  background: rgba(254, 231, 92, 0.08);
  border-left-color: #fee75c;
}

/* ── Vote controls ── */

.qa-vote-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 36px;
  flex-shrink: 0;
}

.qa-vote-btn {
  width: 28px;
  height: 24px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}

.qa-vote-btn:hover {
  background: var(--bg3);
  color: var(--text);
}

.qa-vote-btn.active-up {
  color: var(--accent);
}

.qa-vote-btn.active-down {
  color: #ed4245;
}

.qa-vote-score {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  text-align: center;
}

/* Answer body */
.qa-answer-body {
  flex: 1 1;
  min-width: 0;
}

.qa-answer-content {
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.qa-answer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

.qa-select-btn {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}

.qa-select-btn:hover {
  border-color: #57f287;
  color: #57f287;
  background: rgba(87, 242, 135, 0.08);
}

/* ── Composer ── */

.qa-composer {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.qa-composer-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qa-title-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.12s;
}

.qa-title-input:focus {
  border-color: var(--accent);
}

.qa-title-input::placeholder {
  color: var(--muted2);
  font-weight: 400;
}

.qa-submit-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.qa-submit-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
}

.qa-submit-btn:hover {
  opacity: 0.85;
}

.qa-submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qa-cancel-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}

.qa-cancel-btn:hover {
  border-color: var(--text);
  color: var(--text);
}

/* ── Empty state ── */

.qa-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.qa-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ── Load more ── */

.qa-load-more {
  display: flex;
  justify-content: center;
  padding: 12px;
}

.qa-load-more-btn {
  padding: 6px 20px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
}

.qa-load-more-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Selected badge in answer ── */

.qa-selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.qa-selected-badge.green {
  color: #57f287;
}

.qa-selected-badge.yellow {
  color: #fee75c;
}

/* ── QA Reference Card (rendered in text channels) ── */

.qa-ref-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.qa-ref-card:hover {
  background: var(--bg3);
}

.qa-ref-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.qa-ref-body {
  flex: 1 1;
  min-width: 0;
}

.qa-ref-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 600;
}

.qa-ref-title {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qa-ref-arrow {
  color: var(--muted);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/voice/WhisperSlotConfig.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
/* ── Whisper Slot Config — shared component ──────────────────────────────── */

.wsc-config {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wsc-slot {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
}

.wsc-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.wsc-remove-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.wsc-remove-btn:hover {
  color: #ed4245;
  background: rgba(237, 66, 69, 0.1);
}

.wsc-slot-fields {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.wsc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  flex: 1 1;
}

.wsc-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.wsc-select {
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}

.wsc-select:hover {
  border-color: var(--accent);
}

.wsc-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wsc-conflict {
  font-size: 11px;
  color: #ed4245;
  font-weight: 600;
}

/* ── Add button ─────────────────────────────────────────────────────────── */

.wsc-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border: 1px dashed var(--line2);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.wsc-add-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(88, 101, 242, 0.05);
}

/* ── Compact variant (for popover) ───────────────────────────────────────── */

.wsc-compact {
  gap: 6px;
}

.wsc-compact .wsc-slot {
  padding: 8px;
  border-radius: 8px;
}

.wsc-compact .wsc-slot-header {
  font-size: 10px;
  margin-bottom: 6px;
}

.wsc-compact .wsc-slot-fields {
  flex-direction: column;
  gap: 6px;
}

.wsc-compact .wsc-field {
  min-width: unset;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.wsc-compact .wsc-label {
  font-size: 10px;
  min-width: 48px;
  flex-shrink: 0;
}

.wsc-compact .wsc-select {
  height: 26px;
  font-size: 11px;
  flex: 1 1;
  min-width: 0;
}

.wsc-compact .kb-recorder {
  min-width: 80px;
  height: 26px;
  font-size: 11px;
  padding: 0 8px;
}

.wsc-compact .wsc-conflict {
  font-size: 10px;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/voiceDiagnostics.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/* ── Voice Connection Diagnostic Panel ─────────────────────────────────────── */

.voice-diag-panel {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 460px;
  max-height: calc(100vh - 100px);
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: voice-diag-in 0.15s ease-out;
}

@keyframes voice-diag-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.voice-diag-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line1);
  flex-shrink: 0;
}

.voice-diag-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex: 1 1;
}

.voice-diag-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}

.voice-diag-toggle-switch {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--bg3);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}

.voice-diag-toggle-switch.on {
  background: var(--accent);
}

.voice-diag-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}

.voice-diag-toggle-switch.on .voice-diag-toggle-knob {
  left: 16px;
}

.voice-diag-close {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.voice-diag-close:hover {
  background: var(--bg3);
  color: var(--text);
}

/* ── Info Bar ───────────────────────────────────────────────────────────────── */

.voice-diag-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line1);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.voice-diag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: monospace;
}

.voice-diag-badge.lan {
  background: rgba(87, 242, 135, 0.15);
  color: #57f287;
}

.voice-diag-badge.wan {
  background: rgba(254, 231, 92, 0.15);
  color: #fee75c;
}

.voice-diag-badge.channel {
  background: var(--bg3);
  color: var(--muted);
}

.voice-diag-outcome {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.voice-diag-outcome.connected { color: #57f287; }
.voice-diag-outcome.failed { color: var(--bad); }
.voice-diag-outcome.pending { color: var(--muted); }

/* ── Step Tree ──────────────────────────────────────────────────────────────── */

.voice-diag-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px 0;
}

.voice-diag-step {
  padding: 4px 16px 4px 16px;
}

.voice-diag-step-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 22px;
}

.voice-diag-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.voice-diag-dot.pass { background: #57f287; }
.voice-diag-dot.fail { background: var(--bad); }
.voice-diag-dot.skip { background: var(--muted); opacity: 0.5; }
.voice-diag-dot.pending { background: var(--bg3); border: 1px solid var(--muted); }

.voice-diag-dot.running {
  background: var(--accent);
  animation: voice-diag-pulse 1s ease-in-out infinite;
}

@keyframes voice-diag-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.voice-diag-label {
  font-size: 12px;
  color: var(--text);
  flex: 1 1;
  line-height: 18px;
}

.voice-diag-step.is-parent > .voice-diag-step-row > .voice-diag-label {
  font-weight: 600;
}

.voice-diag-duration {
  font-size: 10px;
  color: var(--muted);
  font-family: monospace;
  white-space: nowrap;
  margin-top: 2px;
}

.voice-diag-detail {
  font-size: 10px;
  color: var(--muted);
  padding-left: 18px;
  margin-top: 1px;
  word-break: break-all;
  line-height: 14px;
}

.voice-diag-error {
  font-size: 10px;
  color: var(--bad);
  padding-left: 18px;
  margin-top: 1px;
  word-break: break-all;
  line-height: 14px;
}

.voice-diag-substeps {
  padding-left: 18px;
}

/* ── Network Analysis ───────────────────────────────────────────────────────── */

.voice-diag-analysis {
  border-top: 1px solid var(--line1);
  padding: 10px 16px;
  flex-shrink: 0;
}

.voice-diag-analysis-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.voice-diag-analysis-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0;
  line-height: 16px;
}

.voice-diag-analysis-row .label {
  color: var(--text);
  font-weight: 600;
  min-width: 90px;
}

.voice-diag-warning {
  font-size: 11px;
  color: #fee75c;
  background: rgba(254, 231, 92, 0.08);
  border: 1px solid rgba(254, 231, 92, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
  line-height: 16px;
}

.voice-diag-warning.critical {
  color: var(--bad);
  background: rgba(237, 66, 69, 0.08);
  border-color: rgba(237, 66, 69, 0.2);
}

/* ── Actions ────────────────────────────────────────────────────────────────── */

.voice-diag-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line1);
  flex-shrink: 0;
}

.voice-diag-btn {
  padding: 5px 14px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  background: var(--bg3);
  color: var(--text);
}

.voice-diag-btn:hover { opacity: 0.8; }

.voice-diag-btn.primary {
  background: var(--accent);
  color: #fff;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */

.voice-diag-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/channels/channels.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* ── Channels Module Styles ─────────────────────────────────────────────────── */

/* ── Sidebar — category labels ─────────────────────────────────────────────── */

.ch-category-label {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 12px 6px 10px;
  font-size: 19px;
  font-weight: 900;
  font-family: var(--cat-font, inherit);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cat-font-color, var(--muted2));
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  border-left: 10px solid transparent;
  border-radius: 0 4px 4px 0;
  position: relative;
  overflow: hidden;
  transition: color 0.15s;
}

.ch-category-label.has-color {
  border-left-color: var(--cat-color);
  background: var(--cat-color-bg);
  color: var(--cat-font-color, var(--cat-color));
}

.ch-category-label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  transform: translateX(-150%) skewX(-20deg);
  pointer-events: none;
}

.ch-category-label:hover::after {
  animation: cat-shimmer 0.75s ease-out forwards;
}

@keyframes cat-shimmer {
  from { transform: translateX(-150%) skewX(-20deg); }
  to   { transform: translateX(200%) skewX(-20deg); }
}

.ch-category-twisty {
  font-size: 12px;
  width: 14px;
  flex-shrink: 0;
  text-align: center;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.ch-category-label:hover .ch-category-twisty {
  opacity: 1;
}

.ch-category-label:first-child {
  padding-top: 8px;
}

/* ── Sidebar — channel rows ────────────────────────────────────────────────── */

.ch-channel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--muted);
  transition: background 0.1s, color 0.1s;
}

.ch-channel-row:hover {
  background: linear-gradient(90deg, rgba(56, 58, 64, 0.65), rgba(56, 58, 64, 0.16));
  border-color: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.ch-channel-row.selected {
  background: linear-gradient(90deg, rgba(88, 101, 242, 0.22), rgba(88, 101, 242, 0.06));
  border-color: rgba(88, 101, 242, 0.35);
  box-shadow: 0 10px 18px rgba(88, 101, 242, 0.08);
  color: var(--text);
}

.ch-channel-icon {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 900;
  opacity: 0.7;
  width: 20px;
  text-align: center;
}

.ch-channel-name {
  flex: 1 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
}

.ch-channel-badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--bg4);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  display: grid;
  place-items: center;
  padding: 0 5px;
}

.ch-channel-badge-full {
  background: var(--bad);
  color: #fff;
}

.ch-channel-lock {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: 0.5;
}

.ch-channel-nsfw {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: 0.7;
  color: #faa61a;
}

@keyframes ch-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

.ch-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  flex-shrink: 0;
}

.ch-typing-dots span {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: ch-typing-bounce 1.2s ease-in-out infinite;
}

.ch-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ch-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

.unread-badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: grid;
  place-items: center;
  padding: 0 5px;
  margin-left: auto;
}

.new-messages-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.new-messages-divider::before,
.new-messages-divider::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

/* E2EE encryption indicators */
.ch-voice-encrypted {
  font-size: 11px;
  opacity: 0.6;
  margin-right: -2px;
}

.ch-e2ee-badge {
  font-size: 12px;
  margin-left: 8px;
  opacity: 0.7;
}

/* ── Drag & drop feedback ─────────────────────────────────────────────────── */

/* Dragged item ghost */
.ch-channel-row.dragging,
.ch-voice-node-row.dragging {
  opacity: 0.25;
  border: 1px dashed rgba(88, 101, 242, 0.5);
  background: rgba(88, 101, 242, 0.05);
}

/* ── Insertion line (above / below) — text channels only ────────────────── */

.ch-channel-row.drag-over-top,
.ch-channel-row.drag-over-bottom {
  position: relative;
}

.ch-channel-row.drag-over-top::before,
.ch-channel-row.drag-over-bottom::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(88, 101, 242, 0.6);
  pointer-events: none;
  z-index: 2;
}

.ch-channel-row.drag-over-top::after,
.ch-channel-row.drag-over-bottom::before {
  content: '';
  position: absolute;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(88, 101, 242, 0.6);
  pointer-events: none;
  z-index: 3;
}

.ch-channel-row.drag-over-top::before { top: -1px; }
.ch-channel-row.drag-over-top::after  { top: -4px; }
.ch-channel-row.drag-over-bottom::after  { bottom: -1px; }
.ch-channel-row.drag-over-bottom::before { bottom: -4px; }

/* ── Voice channel ghost preview (replaces insertion lines for voice) ──── */

.ch-voice-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(
    to right,
    rgba(88, 101, 242, 0.35) 0%,
    rgba(88, 101, 242, 0.12) 60%,
    transparent 100%
  );
  opacity: 0.8;
  border: 1px solid rgba(88, 101, 242, 0.25);
  padding: 6px 12px;
  margin: 1px 0;
}

.ch-voice-ghost .ch-voice-icon { opacity: 0.6; }
.ch-voice-ghost .ch-voice-name { opacity: 0.85; }

/* ── Voice parent highlight (shown on the parent when nesting) ──────────── */

.ch-voice-node-row.voice-parent-highlight {
  background: rgba(88, 101, 242, 0.12);
  box-shadow: 0 0 8px rgba(88, 101, 242, 0.2);
  border-radius: 8px;
}

/* ── Broadcast active indicator ─────────────────────────────────────────── */

.ch-voice-node-row.broadcast-active,
.ch-channel-row.broadcast-active {
  background: rgba(237, 66, 69, 0.08);
  box-shadow: inset 0 -2px 0 0 rgba(237, 66, 69, 0.5);
}

/* ── Whisper active indicator ──────────────────────────────────────────── */

.ch-voice-node-row.whisper-active,
.ch-channel-row.whisper-active {
  background: rgba(168, 85, 247, 0.08);
  box-shadow: inset 0 -2px 0 0 rgba(168, 85, 247, 0.5);
}

.ch-voice-user.whisper-active {
  background: rgba(168, 85, 247, 0.12);
  border-radius: 8px;
}

/* ── Category/drawer header drag feedback ──────────────────────────────────── */

.ch-category-label.dragging,
.ch-drawer-header.dragging {
  opacity: 0.25;
  border: 1px dashed rgba(88, 101, 242, 0.5);
  background: rgba(88, 101, 242, 0.05);
}

.ch-category-label.drag-over-top,
.ch-category-label.drag-over-bottom,
.ch-drawer-header.drag-over-top,
.ch-drawer-header.drag-over-bottom {
  position: relative;
}

.ch-category-label.drag-over-top::before,
.ch-category-label.drag-over-bottom::after,
.ch-drawer-header.drag-over-top::before,
.ch-drawer-header.drag-over-bottom::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(88, 101, 242, 0.6);
  pointer-events: none;
  z-index: 2;
}

.ch-category-label.drag-over-top::before,
.ch-drawer-header.drag-over-top::before { top: -1px; }
.ch-category-label.drag-over-bottom::after,
.ch-drawer-header.drag-over-bottom::after { bottom: -1px; }

.ch-category-label.drag-over-inside {
  background: rgba(88, 101, 242, 0.15);
  box-shadow: inset 3px 0 0 0 var(--accent);
  outline: 1px solid rgba(88, 101, 242, 0.4);
  outline-offset: -1px;
  border-radius: 8px;
}

/* Nested drawer indent */
.ch-drawer.nested {
  margin-left: 12px;
}

/* ── Sidebar — voice drawers (collapsible category containers) ─────────────── */

.ch-drawer {
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(35, 36, 40, 0.92), rgba(30, 31, 34, 0.92));
  border-radius: 18px;
  overflow: hidden;
  margin: 8px 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.ch-drawer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: linear-gradient(180deg, rgba(64, 66, 73, 0.72), rgba(49, 51, 56, 0.58));
  transition: background 0.1s;
}

.ch-drawer-header:hover {
  background: rgba(64, 66, 73, 0.8);
}

.ch-drawer-title {
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
  flex: 1 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ch-drawer-body {
  padding: 6px 6px 8px;
}

/* ── Sidebar — voice tree (nested nodes inside drawers) ────────────────────── */

.ch-voice-tree {
  display: flex;
  flex-direction: column;
}

.ch-voice-node {
  display: flex;
  flex-direction: column;
}

.ch-voice-node-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--muted);
  transition: background 0.1s, color 0.1s;
}

.ch-voice-node-row:hover {
  background: rgba(56, 58, 64, 0.55);
  color: var(--text);
}

.ch-voice-node-row.selected {
  background: rgba(88, 101, 242, 0.15);
  color: var(--text);
}

.ch-twisty {
  flex: 0 0 auto;
  width: 14px;
  font-size: 10px;
  color: var(--muted2);
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ch-voice-icon {
  flex: 0 0 auto;
  font-size: 13px;
  opacity: 0.7;
}

.ch-voice-icon.streaming-live {
  opacity: 1;
  animation: stream-pulse 2s ease-in-out infinite;
}

@keyframes stream-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.ch-voice-name {
  flex: 1 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 700;
}

.ch-voice-children {
  padding-left: 16px;
}

/* ── Sidebar — connected users under voice channels ────────────────────────── */

.ch-voice-users {
  margin: 2px 0 4px;
  padding-left: 34px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ch-voice-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 13px;
  font-weight: 700;
}

.ch-voice-user:hover {
  background: rgba(56, 58, 64, 0.55);
  color: var(--text);
}

.ch-voice-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #3a3c43;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 10px;
  flex: 0 0 auto;
  position: relative;
}

.ch-voice-status {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  position: absolute;
  right: -1px;
  bottom: -1px;
  outline: 2px solid var(--bg1);
  background: #6b6f77;
}

.ch-voice-status.online  { background: var(--ok); }
.ch-voice-status.idle    { background: var(--idle); }
.ch-voice-status.offline { background: #6b6f77; }

.ch-voice-user-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}

/* ── Override .view scrolling for channels — chat log scrolls internally ──── */

.view:has(> .ch-chat-wrap),
.view:has(> .ch-voice-grid) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Main view — chat wrapper ──────────────────────────────────────────────── */

.ch-chat-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  height: 100%;
  min-width: 0;
  min-height: 0;
  gap: 10px;
}

/* ── Chat log ──────────────────────────────────────────────────────────────── */

.ch-chat-log {
  flex: 1 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 18px 22px;
  background:
    radial-gradient(circle at top, rgba(88, 101, 242, 0.05), transparent 38%),
    linear-gradient(180deg, rgba(43, 45, 49, 0.42), rgba(30, 31, 34, 0.32)),
    rgba(30, 31, 34, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 18px 34px rgba(0, 0, 0, 0.16);
}

.ch-chat-header {
  font-weight: 900;
  margin-bottom: 10px;
  font-size: 15px;
}

/* ── Message ───────────────────────────────────────────────────────────────── */

.ch-msg {
  display: flex;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 18px;
  position: relative;
  border: 1px solid transparent;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.12s ease;
}

.ch-msg:hover {
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-color: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

.ch-msg-avatar-wrap.syph-avatar-wrap.sm.no-border { width: 48px !important; height: 48px !important; }
.ch-msg-avatar-wrap.syph-avatar-wrap .syph-avatar { width: 48px !important; height: 48px !important; font-size: 17px; }

.ch-msg-body {
  min-width: 0;
  flex: 1 1;
}

.ch-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.ch-msg-author {
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.01em;
}


.ch-msg-time {
  font-size: 12px;
  color: var(--muted2);
}

.ch-msg-text {
  font-size: var(--chat-font-size, 14px);
  line-height: 1.75;
  white-space: pre-wrap;
  margin-top: 4px;
  max-width: 78ch;
}

/* ── Edited indicator ──────────────────────────────────────────────────────── */

.ch-msg-edited {
  font-size: 10px;
  color: var(--muted2);
  margin-left: 4px;
}

/* ── Inline message editing ───────────────────────────────────────────────── */

.ch-msg-is-editing {
  background: rgba(88, 101, 242, 0.06);
  border-radius: 8px;
  margin: 2px -4px;
  padding: 10px 8px;
}

.ch-msg-edit-wrap {
  margin-top: 4px;
}

/* ── Message hover actions ─────────────────────────────────────────────── */

.ch-msg-actions {
  display: none;
  position: absolute;
  top: -10px;
  right: 10px;
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.96), rgba(38, 40, 45, 0.98));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 5px;
  gap: 5px;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.04);
  z-index: 10;
}

.ch-msg:hover .ch-msg-actions {
  display: flex;
}

.ch-msg-is-editing .ch-msg-actions {
  display: none !important;
}

.ch-msg-action-btn {
  background: none;
  border: none;
  padding: 6px 8px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  line-height: 1;
  color: var(--muted);
  transition: background 0.1s, color 0.1s;
}

.ch-msg-action-btn:hover {
  background: var(--bg3);
  color: var(--text);
}

/* ── Edit History Modal ──────────────────────────────────────────────────── */

.ch-edit-history-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.ch-edit-history-modal {
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 14px;
  width: 520px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ch-edit-history-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line2);
  font-weight: 900;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ch-edit-history-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}
.ch-edit-history-close:hover {
  color: var(--text);
}

.ch-edit-history-body {
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ch-edit-history-item {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
}
.ch-edit-history-item.current {
  border-color: var(--accent);
  background: rgba(88, 101, 242, 0.06);
}

.ch-edit-history-label {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted2);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.ch-edit-history-time {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.ch-edit-history-text {
  font-size: 14px;
  line-height: 1.35;
}

.ch-edit-history-loading {
  color: var(--muted2);
  text-align: center;
  padding: 24px;
}

/* ── Input bar ─────────────────────────────────────────────────────────────── */

.ch-input-bar {
  min-height: 60px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(64, 66, 73, 0.92), rgba(49, 51, 56, 0.96));
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  flex-shrink: 0;
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.ch-input-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ch-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 16px;
  transition: background 0.1s, color 0.1s;
}

.ch-icon-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.ch-icon-btn.ch-cooldown {
  background: rgba(242, 63, 67, 0.12);
  color: var(--bad);
  border-color: rgba(242, 63, 67, 0.3);
  font-size: 11px;
  font-weight: 700;
  cursor: not-allowed;
}

.ch-icon-btn.ch-cooldown:hover {
  background: rgba(242, 63, 67, 0.15);
  color: var(--bad);
}

/* ── Voice grid (two-panel layout) ─────────────────────────────────────────── */

.ch-voice-grid {
  flex: 1 1;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.ch-voice-grid.collapsed {
  grid-template-columns: 1fr;
}

.ch-voice-grid.collapsed .ch-voice-chat-panel {
  display: none;
}

/* ── Panel (shared for voice chat + media) ─────────────────────────────────── */

.ch-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(43, 45, 49, 0.44), rgba(30, 31, 34, 0.36)),
    rgba(30, 31, 34, 0.25);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.ch-panel-header {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background:
    linear-gradient(180deg, rgba(56, 58, 64, 0.42), rgba(49, 51, 56, 0.26));
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.ch-panel-body {
  flex: 1 1;
  overflow: auto;
  padding: 10px;
  min-height: 0;
}

/* ── Voice chat panel — inner chat log (borderless) ────────────────────────── */

.ch-voice-chat-log {
  flex: 1 1;
  overflow: auto;
  padding: 0;
  min-height: 0;
}

.ch-voice-chat-log .ch-chat-header {
  margin: 12px 12px 10px;
}

.ch-voice-chat-log .ch-msg {
  padding: 8px 12px;
}

.ch-voice-chat-input {
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(56, 58, 64, 0.16);
  flex-shrink: 0;
}

.ch-voice-chat-input .ch-input-bar {
  margin: 0;
  border-radius: 12px;
  height: 48px;
}

/* ── Collapse button ───────────────────────────────────────────────────────── */

.ch-collapse-btn {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(35, 36, 40, 0.88);
  font-size: 12px;
  transition: background 0.1s, color 0.1s;
}

.ch-collapse-btn:hover {
  background: rgba(56, 58, 64, 0.92);
  color: var(--text);
}

/* ── Chat pull tab (when collapsed) ────────────────────────────────────────── */

.ch-chat-pull-tab {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 5;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #2a2c30;
  background: rgba(35, 36, 40, 0.95);
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: background 0.1s;
}

.ch-chat-pull-tab:hover {
  background: rgba(64, 66, 73, 0.95);
}

@keyframes ch-pull-tab-pulse {
  0%, 100% { background: rgba(35, 36, 40, 0.95); box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 0 rgba(88, 101, 242, 0.7); }
  50%       { background: rgba(88, 101, 242, 0.85); box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 6px rgba(88, 101, 242, 0); }
}

.ch-chat-pull-tab.typing {
  animation: ch-pull-tab-pulse 1.2s ease-in-out infinite;
  border-color: rgba(88, 101, 242, 0.5);
  color: #fff;
}

.ch-chat-pull-tab.has-unread {
  background: rgba(88, 101, 242, 0.9);
  border-color: rgba(88, 101, 242, 0.6);
  color: #fff;
}

.ch-chat-pull-tab.has-unread:hover {
  background: rgba(88, 101, 242, 1);
}

/* ── Media grid (camera / screenshare) ─────────────────────────────────────── */

.ch-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.ch-tile {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid #2a2c30;
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(88, 101, 242, 0.22), rgba(0, 0, 0, 0)),
    linear-gradient(180deg, rgba(64, 66, 73, 0.6), rgba(30, 31, 34, 0.6));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 10px;
}

.ch-tile-tag {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.ch-tile-empty {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px dashed #2a2c30;
  background: rgba(35, 36, 40, 0.6);
  display: grid;
  place-items: center;
  color: var(--muted2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* ── Voice participant tiles ────────────────────────────────────────────────── */

.ch-tile.speaking {
  outline: 2px solid var(--ok);
  outline-offset: -2px;
}

.ch-tile-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--bg4);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 20px;
  color: var(--text);
}

/* ── Video in tiles ──────────────────────────────────────────────────────────── */

.ch-tile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}

.ch-tile-video-contain {
  object-fit: contain;
  background: #000;
}

/* ── Screen share tile in grid ─────────────────────────────────────────────── */

.ch-tile.ch-tile-screen {
  background: #000;
}

.ch-tile-screen .ch-tile-video {
  object-fit: contain;
}

/* ── Video opt-in overlay ─────────────────────────────────────────────────────── */

.ch-tile-optin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.ch-tile-optin-btn {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  white-space: nowrap;
  transition: background 0.15s;
}

.ch-tile-optin-btn:hover {
  background: rgba(88, 101, 242, 0.5);
}

/* ── Unview button (dismiss a video feed) ────────────────────────────────────── */

.ch-tile-unview-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.15s;
  line-height: 1;
}

.ch-tile:hover .ch-tile-unview-btn {
  opacity: 1;
}

/* ── Video Mode ─────────────────────────────────────────────────────────────── */

.ch-voice-grid.video-mode .ch-media-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.ch-voice-grid.video-mode .ch-tile {
  aspect-ratio: 16 / 9;
  min-height: 200px;
}

.ch-voice-grid.video-mode .ch-tile-avatar {
  width: 72px;
  height: 72px;
}

.ch-voice-grid.video-mode .ch-tile-optin {
  display: none; /* auto-subscribe in video mode */
}

/* ── Voice Control Bar ────────────────────────────────────────────────────────── */

.ch-voice-control-bar {
  gap: 8px;
}

.ch-voice-status-icon {
  color: var(--ok);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ch-voice-inline-name-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  font-weight: 900;
  font-size: 13px;
  gap: 0;
}

.ch-voice-status-text {
  white-space: nowrap;
  flex-shrink: 0;
}

.ch-voice-inline-name {
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.ch-voice-inline-name:hover {
  border-bottom-color: var(--muted2);
}

.ch-voice-inline-name-input {
  font-weight: 900;
  font-size: 13px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent);
  color: var(--text);
  outline: none;
  padding: 0;
  max-width: 200px;
  font-family: inherit;
}

/* ── Controls group ──────────────────────────────────────────────────────────── */

.ch-voice-controls-group {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.ch-voice-ctrl-separator {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 2px;
  flex-shrink: 0;
}

/* ── Voice control buttons ───────────────────────────────────────────────────── */

.ch-voice-ctrl-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #2a2c30;
  background: rgba(35, 36, 40, 0.8);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.1s, color 0.1s;
  padding: 0;
  line-height: 1;
}

.ch-voice-ctrl-btn:hover {
  background: rgba(88, 101, 242, 0.15);
  color: var(--text);
}

.ch-voice-ctrl-btn.active {
  background: rgba(88, 101, 242, 0.25);
  border-color: rgba(88, 101, 242, 0.4);
  color: var(--text);
}

/* Muted / Deafened states — red tint */
.ch-voice-ctrl-btn.muted,
.ch-voice-ctrl-btn.deafened {
  background: rgba(242, 63, 67, 0.15);
  border-color: rgba(242, 63, 67, 0.35);
  color: var(--bad);
}
.ch-voice-ctrl-btn.muted:hover,
.ch-voice-ctrl-btn.deafened:hover {
  background: rgba(242, 63, 67, 0.25);
}

.ch-voice-disconnect-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(242, 63, 67, 0.4);
  background: rgba(242, 63, 67, 0.12);
  color: var(--bad);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.1s;
  flex-shrink: 0;
}

.ch-voice-disconnect-btn:hover {
  background: rgba(242, 63, 67, 0.25);
}

/* ── Popover (shared base) ───────────────────────────────────────────────────── */

.ch-voice-popover-wrap {
  position: relative;
}

.ch-voice-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  max-width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 12px;
  z-index: 100;
  animation: ch-popover-in 0.12s ease-out;
}

@keyframes ch-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Popover sections ────────────────────────────────────────────────────────── */

.ch-voice-pop-section {
  margin-bottom: 12px;
}
.ch-voice-pop-section:last-child {
  margin-bottom: 0;
}

.ch-voice-pop-section-title {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted2);
  margin-bottom: 8px;
}

.ch-voice-pop-sublabel {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.ch-voice-pop-select {
  width: 100%;
  height: 30px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  padding: 0 8px;
  outline: none;
  cursor: pointer;
}
.ch-voice-pop-select:hover { border-color: var(--muted); }
.ch-voice-pop-select:focus { border-color: var(--accent); }
.ch-voice-pop-select option {
  background: var(--bg1);
  color: var(--text);
}

/* ── Compact slider row ──────────────────────────────────────────────────────── */

.ch-voice-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ch-voice-slider {
  flex: 1 1;
  height: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: var(--bg4);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.ch-voice-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg2);
}
.ch-voice-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg2);
}

.ch-voice-slider-value {
  font-size: 10px;
  color: var(--muted2);
  min-width: 32px;
  text-align: right;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Toggle switch ───────────────────────────────────────────────────────────── */

.ch-voice-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}

.ch-voice-toggle-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}

.ch-voice-toggle-switch {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 9px;
  border: none;
  background: var(--bg4);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ch-voice-toggle-switch.on {
  background: var(--accent);
}

.ch-voice-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  pointer-events: none;
}
.ch-voice-toggle-switch.on .ch-voice-toggle-knob {
  transform: translateX(14px);
}

/* ── Voice mode buttons (VA / PTT) ───────────────────────────────────────────── */

.ch-voice-mode-btns {
  display: flex;
  gap: 4px;
  border-radius: 8px;
  background: var(--bg1);
  padding: 3px;
}

.ch-voice-mode-btn {
  flex: 1 1;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.ch-voice-mode-btn.active {
  background: var(--accent);
  color: #fff;
}

.ch-voice-ptt-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
}

.ch-voice-ptt-key .kb-recorder {
  font-size: 11px;
  padding: 4px 10px;
}

/* ── Per-user volume list ────────────────────────────────────────────────────── */

.ch-voice-user-vol-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.ch-voice-user-vol-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ch-voice-user-vol-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--bg4);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
  color: var(--text);
}

.ch-voice-user-vol-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  min-width: 60px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-voice-user-vol-empty {
  font-size: 12px;
  color: var(--muted2);
  padding: 8px 0;
  text-align: center;
}

/* ── Message Reactions ────────────────────────────────────────────────────── */

.ch-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.ch-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--bg3);
  border: 1px solid transparent;
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background 0.15s, border-color 0.15s;
  color: var(--text);
}

.ch-reaction-pill:hover {
  background: var(--bg4);
}

.ch-reaction-pill.reacted {
  border-color: var(--accent);
  background: rgba(88, 101, 242, 0.15);
}

.ch-reaction-count {
  font-size: 12px;
  color: var(--muted);
}

.ch-reaction-pill.reacted .ch-reaction-count {
  color: var(--accent);
}

.ch-reaction-add {
  opacity: 0.5;
  font-size: 16px;
  padding: 2px 10px;
}

.ch-reaction-add:hover {
  opacity: 1;
}

.ch-reaction-custom-img {
  width: 1.2em;
  height: 1.2em;
  object-fit: contain;
  vertical-align: -0.2em;
}

/* ── Reaction Flare Effects ──────────────────────────────────────────────── */

.reaction-pulse .ch-reaction-emoji {
  animation: md-pulse-beat 1.5s ease-in-out infinite;
}

.reaction-glow .ch-reaction-emoji {
  text-shadow: 0 0 6px var(--accent), 0 0 12px var(--accent);
  animation: reaction-glow 2s ease-in-out infinite;
}

.reaction-rainbow .ch-reaction-emoji {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, violet, red);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: md-rainbow-shift 3s linear infinite;
}

.reaction-gradient .ch-reaction-emoji {
  filter: hue-rotate(0deg);
  animation: reaction-hue 4s linear infinite;
}

@keyframes reaction-glow {
  0%, 100% { text-shadow: 0 0 4px var(--accent); }
  50% { text-shadow: 0 0 12px var(--accent), 0 0 20px var(--accent); }
}

@keyframes reaction-hue {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

/* ── Q&A Channel Entry ────────────────────────────────────────────────────── */

.ch-qa-entry {
  margin: 4px 4px 0;
}

.ch-qa-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 12px 0;
}

/* ── Search toggle button in chat header ───────────────────────────────────── */

.ch-search-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}

.ch-search-toggle:hover {
  color: var(--text);
  background: var(--bg3);
}

/* ── Message Search ───────────────────────────────────────────────────────── */

.ch-search-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  height: 100%;
  background: var(--bg1);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

.ch-search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.ch-search-input {
  flex: 1 1;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.ch-search-input:focus {
  border-color: var(--accent);
}

.ch-search-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.ch-search-close:hover {
  color: var(--text);
  background: var(--bg3);
}

.ch-search-scope {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.ch-search-scope-btn {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 10px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.ch-search-scope-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ch-search-results {
  flex: 1 1;
  overflow-y: auto;
  padding: 4px 0;
}

.ch-search-status {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.ch-search-result {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.ch-search-result:hover {
  background: var(--bg2);
}

.ch-search-result-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.ch-search-result-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.ch-search-result-channel {
  font-size: 11px;
  color: var(--accent);
}

.ch-search-result-date {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

.ch-search-result-text {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.4;
  word-break: break-word;
}

/* ── Pinned message indicator ─────────────────────────────────────────────── */

.ch-msg-pinned {
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ── Pinned messages panel ────────────────────────────────────────────────── */

.ch-pins-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(24, 30, 41, 0.98), rgba(11, 15, 23, 0.98));
  border-left: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  z-index: 20;
  box-shadow: -18px 0 34px rgba(0, 0, 0, 0.24);
}

.ch-pins-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.ch-pins-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 14px;
}

.ch-pins-close:hover {
  color: var(--text);
  background: var(--bg3);
}

.ch-pins-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 4px 0;
}

.ch-pins-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.ch-pins-card {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ch-pins-card:hover {
  background: rgba(255,255,255,0.03);
}

.ch-pins-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.ch-pins-card-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.ch-pins-card-time {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

.ch-pins-card-text {
  font-size: 13px;
  color: var(--muted2);
  line-height: 1.4;
  word-break: break-word;
  margin-bottom: 6px;
}

.ch-pins-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ch-pins-card-by {
  font-size: 11px;
  color: var(--muted);
}

.ch-pins-unpin-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.ch-pins-unpin-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ── Reply reference (inline on messages) ─────────────────────────────────── */

.ch-msg-reply-ref {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0 4px 52px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.ch-msg-reply-ref:hover {
  color: var(--text);
}

.ch-msg-reply-icon {
  font-size: 12px;
  color: var(--accent);
}

.ch-msg-reply-author {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}

.ch-msg-reply-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

/* ── Reply bar (above editor) ─────────────────────────────────────────────── */

.ch-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(26, 31, 42, 0.96), rgba(14, 18, 26, 0.96));
  border-top: 1px solid rgba(132, 148, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  font-size: 12px;
  color: var(--muted);
  border-radius: 14px 14px 0 0;
}

.ch-reply-bar-label {
  white-space: nowrap;
}

.ch-reply-bar-preview {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted2);
}

.ch-reply-bar-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 13px;
}

.ch-reply-bar-close:hover {
  color: var(--text);
  background: var(--bg3);
}

/* ── Load older messages ─────────────────────────────────────────────────── */

.ch-load-older {
  display: block;
  margin: 8px auto 14px;
  padding: 8px 18px;
  background: linear-gradient(180deg, rgba(32, 36, 46, 0.94), rgba(18, 22, 31, 0.94));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ch-load-older:hover:not(:disabled) {
  background: var(--bg4);
  color: var(--text);
}

.ch-load-older:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── Typing indicator ────────────────────────────────────────────────────── */

.ch-typing-indicator {
  font-size: 11px;
  color: var(--muted);
  padding: 2px 16px;
  font-style: italic;
  flex-shrink: 0;
}

/* ── Thread panel ─────────────────────────────────────────────────────────── */

.ch-thread-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(24, 30, 41, 0.98), rgba(11, 15, 23, 0.98));
  border-left: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  z-index: 20;
  box-shadow: -18px 0 34px rgba(0, 0, 0, 0.24);
}

.ch-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.ch-thread-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 4px 0;
}

.ch-thread-parent {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.ch-thread-divider {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ch-thread-reply {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ch-thread-reply:hover {
  background: rgba(255,255,255,0.03);
}

.ch-thread-input-wrap {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.ch-thread-input {
  width: 100%;
  background: rgba(10, 14, 21, 0.86);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.ch-thread-input:focus {
  border-color: var(--accent);
}

/* ── Link previews ────────────────────────────────────────────────────────── */

.ch-link-previews {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.ch-link-preview-card {
  display: flex;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  max-width: 480px;
  overflow: hidden;
}

.ch-link-preview-card:hover {
  background: var(--bg3);
}

.ch-link-preview-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.ch-link-preview-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ch-link-preview-site {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ch-link-preview-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ch-link-preview-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Inline image / GIF embeds ───────────────────────────────────────────── */

.ch-link-embed-image-wrap {
  display: inline-block;
  margin-top: 4px;
}

.ch-link-embed-image {
  display: block;
  max-width: 400px;
  max-height: 300px;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
  cursor: pointer;
  background: var(--bg2);
}

/* ── Stream Channel ──────────────────────────────────────────────────────── */

.stream-control-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg2);
  border-top: 1px solid var(--line);
}

.stream-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stream-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  flex-shrink: 0;
}

.stream-status-dot.live {
  background: #ed4245;
  box-shadow: 0 0 8px rgba(237, 66, 69, 0.6);
  animation: stream-pulse 1.5s infinite;
}

.stream-status-dot.offline {
  background: var(--muted2);
}

@keyframes stream-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.stream-status-label {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
}

.stream-viewer-count {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

.stream-controls {
  display: flex;
  gap: 8px;
}

.stream-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  border: none;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: filter 0.12s;
}

.stream-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.stream-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stream-btn.start {
  background: #ed4245;
  color: #fff;
}

.stream-btn.stop {
  background: var(--bg3);
  color: #ed4245;
  border: 1px solid #ed4245;
}

.stream-btn.rotate {
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--muted);
  padding: 0 12px;
  height: 28px;
  font-size: 11px;
}

.stream-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--bg3);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.stream-info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stream-info-row label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.stream-info-value {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stream-info-value code {
  flex: 1 1;
  font-size: 11px;
  color: var(--text);
  background: var(--bg1);
  padding: 4px 8px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
}

.stream-copy-btn {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}

.stream-copy-btn:hover {
  background: rgba(88, 101, 242, 0.1);
}

/* Stream channel sidebar icon */
.ch-stream-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ch-stream-live {
  position: relative;
}

.ch-stream-live::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #ed4245;
  border: 1.5px solid var(--bg2);
}

/* ── Sticky Messages ─────────────────────────────────────────────────────── */

.ch-sticky-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.08) 0%, rgba(88, 101, 242, 0.04) 100%);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  flex-shrink: 0;
}

.ch-sticky-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  white-space: nowrap;
  padding-top: 2px;
}

.ch-sticky-content {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
}

.ch-sticky-author {
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  margin-right: 6px;
}

.ch-sticky-text {
  font-size: 12px;
  color: var(--muted);
  word-break: break-word;
}

.ch-sticky-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  transition: color 0.12s;
  flex-shrink: 0;
}

.ch-sticky-remove:hover {
  color: var(--text);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/dm/dm.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
/* ── DM Module Styles ──────────────────────────────────────────────────────── */

/* ── DM Sidebar ───────────────────────────────────────────────────────────── */

.dm-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.dm-sidebar-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 12px;
  flex-shrink: 0;
}

.dm-sidebar-tab {
  flex: 1 1;
  padding: 10px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dm-sidebar-tab:hover { color: var(--text); }
.dm-sidebar-tab.active { color: var(--text); border-color: var(--accent); }

.dm-sidebar-search {
  padding: 10px 12px;
  flex-shrink: 0;
}

.dm-sidebar-search input {
  width: 100%;
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
}

.dm-sidebar-search input:focus { border-color: var(--accent); }
.dm-sidebar-search input::placeholder { color: var(--muted2); }

.dm-sidebar-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 4px 8px;
}

/* ── Thread Item ──────────────────────────────────────────────────────────── */

.dm-thread {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.dm-thread:hover { background: var(--bg4); }
.dm-thread.active { background: var(--accent-a10, rgba(88, 101, 242, 0.1)); }

.dm-thread-avatar {
  position: relative;
  flex-shrink: 0;
}

.dm-thread-avatar .syph-avatar-wrap {
  width: 36px !important;
  height: 36px !important;
}

.dm-thread-avatar .syph-avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
}

.dm-thread-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.dm-thread-avatar .dm-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.dm-thread-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg2);
  background: var(--muted2);
}

.dm-thread-status.online { background: var(--ok); }
.dm-thread-status.idle { background: linear-gradient(135deg, var(--ok) 50%, var(--idle) 50%); }
.dm-thread-status.dnd { background: var(--danger); }
.dm-thread-status.away { background: var(--idle); }

.dm-thread-info {
  flex: 1 1;
  min-width: 0;
}

.dm-thread-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-thread-preview {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.dm-thread-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.dm-thread-time {
  font-size: 10px;
  color: var(--muted2);
}

.dm-unread-badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ── Friends Tab ──────────────────────────────────────────────────────────── */

.dm-friends-section {
  margin-bottom: 8px;
}

.dm-friends-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px 4px;
}

.dm-friend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.dm-friend-item:hover { background: var(--bg4); }

.dm-friend-info {
  flex: 1 1;
  min-width: 0;
}

.dm-friend-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-friend-status-text {
  font-size: 11px;
  color: var(--muted);
}

.dm-friend-actions {
  display: flex;
  gap: 4px;
}

.dm-friend-btn {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.12s;
}

.dm-friend-btn:hover { opacity: 0.85; }
.dm-friend-btn.accept { background: var(--ok); color: #fff; }
.dm-friend-btn.deny { background: var(--bg4); color: var(--muted); }
.dm-friend-btn.message { background: var(--accent); color: #fff; }

.dm-add-friend-btn {
  margin: 8px 12px;
  padding: 8px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: none;
  width: calc(100% - 24px);
  transition: opacity 0.12s;
}

.dm-add-friend-btn:hover { opacity: 0.85; }

/* ── DM View ──────────────────────────────────────────────────────────────── */

.dm-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dm-view-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.dm-view-header-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.dm-view-header-avatar .syph-avatar-wrap {
  width: 28px !important;
  height: 28px !important;
}

.dm-view-header-avatar .syph-avatar {
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
}

.dm-view-header-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.dm-view-header-status {
  font-size: 11px;
  color: var(--muted);
}

.dm-view-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dm-message {
  display: flex;
  gap: 10px;
  padding: 4px 0;
}

.dm-message-avatar .syph-avatar-wrap {
  width: 38px !important;
  height: 38px !important;
  margin-top: 2px;
}

.dm-message-avatar .syph-avatar {
  width: 38px !important;
  height: 38px !important;
  font-size: 15px !important;
}

.dm-message-avatar img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: 2px;
}

.dm-message-body {
  flex: 1 1;
  min-width: 0;
}

.dm-message-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.dm-message-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dm-message-time {
  font-size: 10px;
  color: var(--muted2);
}

.dm-message-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  word-break: break-word;
}

.dm-typing-indicator {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 16px;
  font-style: italic;
  flex-shrink: 0;
}

/* ── Compose Bar ──────────────────────────────────────────────────────────── */

.dm-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.dm-compose input[type="text"],
.dm-compose input:not([type]) {
  flex: 1 1;
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s;
}

.dm-compose input[type="text"]:focus,
.dm-compose input:not([type]):focus { border-color: var(--accent); }
.dm-compose input[type="text"]::placeholder,
.dm-compose input:not([type])::placeholder { color: var(--muted2); }

.dm-compose-send {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
}

.dm-compose-send:hover { opacity: 0.85; }
.dm-compose-send:disabled { opacity: 0.5; cursor: not-allowed; }

.dm-compose-attach {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 18px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.dm-compose-attach:hover { color: var(--text); border-color: var(--accent); }

/* ── Empty State ──────────────────────────────────────────────────────────── */

.dm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted2);
  gap: 8px;
}

.dm-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--muted);
}

.dm-empty-text {
  font-size: 13px;
}

/* ── E2EE Badge ───────────────────────────────────────────────────────────── */

.dm-e2ee-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--ok);
  margin-left: auto;
}

/* ── Add Friend Modal ─────────────────────────────────────────────────────── */

.dm-add-friend-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.dm-add-friend-modal label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dm-add-friend-modal input {
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
}

.dm-add-friend-modal input:focus { border-color: var(--accent); }

/* ── Rail DM Pill ─────────────────────────────────────────────────────────── */

.rail-dm-pill {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-radius 0.2s, background 0.2s;
}

.rail-dm-pill:hover,
.rail-dm-pill.active {
  border-radius: 12px;
  background: var(--accent);
}

.rail-dm-pill svg {
  width: 22px;
  height: 22px;
  color: var(--muted);
  transition: color 0.15s;
}

.rail-dm-pill:hover svg,
.rail-dm-pill.active svg { color: #fff; }

.rail-dm-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg0);
}

/* ── Friends Modal ────────────────────────────────────────────────────────── */

.friends-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.friends-modal {
  background: var(--bg2);
  border-radius: 12px;
  width: 480px;
  max-width: 90vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.friends-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  flex-shrink: 0;
}

.friends-modal-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.friends-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s, color 0.12s;
}

.friends-modal-close:hover {
  background: var(--bg4);
  color: var(--text);
}

.friends-modal-toolbar {
  display: flex;
  gap: 8px;
  padding: 0 20px 12px;
  flex-shrink: 0;
}

.friends-modal-search {
  flex: 1 1;
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
}

.friends-modal-search:focus { border-color: var(--accent); }
.friends-modal-search::placeholder { color: var(--muted2); }

.friends-modal-add-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.12s;
}

.friends-modal-add-btn:hover { opacity: 0.85; }

.friends-modal-list {
  flex: 1 1;
  overflow-y: auto;
  padding: 0 12px 16px;
}

/* ── Pending / Quarantine Banner ─────────────────────────────────── */

.dm-pending-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg1);
  border-top: 1px solid var(--bg3);
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}

.dm-pending-banner span {
  flex: 1 1;
  min-width: 0;
}

/* Pending thread styling in sidebar */
.dm-thread.pending {
  opacity: 0.85;
  cursor: default;
}

.dm-thread.pending-sent {
  opacity: 0.7;
}

/* ── Header Actions ────────────────────────────────────────────── */

.dm-header-actions {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background 0.12s, color 0.12s;
}

.dm-header-actions:hover {
  background: var(--bg3);
  color: var(--text);
}

/* ── DM Request Modal ─────────────────────────────────────────── */

.dm-request-body {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dm-request-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.dm-request-hint strong {
  color: var(--text);
}

.dm-request-textarea {
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  transition: border-color 0.15s;
}

.dm-request-textarea:focus { border-color: var(--accent); }
.dm-request-textarea::placeholder { color: var(--muted2); }

.dm-request-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dm-request-charcount {
  font-size: 11px;
  color: var(--muted2);
}

.dm-request-error {
  font-size: 12px;
  color: var(--danger);
  flex: 1 1;
}

.dm-request-send {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s;
}

.dm-request-send:hover { opacity: 0.85; }
.dm-request-send:disabled { opacity: 0.5; cursor: not-allowed; }

/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/ui/contextMenu.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
/* ── Context Menu ─────────────────────────────────────────────────────────── */

.ctx-menu {
  position: fixed;
  z-index: 400;
  min-width: 188px;
  max-width: 280px;
  padding: 6px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  animation: ctx-fade-in 0.1s ease;
}

@keyframes ctx-fade-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.06s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.ctx-item:hover {
  background: var(--accent);
  color: white;
}

.ctx-item.danger {
  color: var(--bad);
}

.ctx-item.danger:hover {
  background: var(--bad);
  color: white;
}

.ctx-item.disabled {
  color: var(--muted2);
  cursor: default;
  pointer-events: none;
}

.ctx-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  font-size: 14px;
}

.ctx-label-text {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ctx-sep {
  height: 1px;
  margin: 4px 10px;
  background: var(--line);
}

.ctx-label {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ── Submenu ─────────────────────────────────────────────────────────────── */

.ctx-submenu-trigger {
  position: relative;
}

.ctx-submenu-arrow {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted2);
  flex-shrink: 0;
}

.ctx-submenu-trigger:hover .ctx-submenu-arrow,
.ctx-submenu-trigger.active .ctx-submenu-arrow {
  color: white;
}

.ctx-submenu-panel {
  position: absolute;
  left: calc(100% + 2px);
  top: -6px;
  min-width: 180px;
  max-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 401;
  animation: ctx-fade-in 0.1s ease;
}

.ctx-submenu-panel.flip-left {
  left: auto;
  right: calc(100% + 2px);
}

.ctx-submenu-panel.flip-up {
  top: auto;
  bottom: -6px;
}

.ctx-submenu-panel::-webkit-scrollbar {
  width: 4px;
}

.ctx-submenu-panel::-webkit-scrollbar-thumb {
  background: var(--muted2);
  border-radius: 2px;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/settings/settings.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Settings Modal ──────────────────────────────────────────────────────── */

.settings-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(80, 106, 192, 0.18), transparent 42%),
    rgba(4, 6, 11, 0.82);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.settings-modal {
  width: calc(100vw - 60px);
  height: calc(100vh - 60px);
  background:
    linear-gradient(180deg, rgba(22, 28, 38, 0.98), rgba(10, 14, 21, 0.98));
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.settings-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
  background:
    linear-gradient(180deg, rgba(50, 66, 121, 0.18), rgba(50, 66, 121, 0.03)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

.settings-header-copy {
  flex: 1 1;
  min-width: 0;
}

.settings-header-eyebrow {
  font-size: 11px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8c2ff;
  margin-bottom: 8px;
}

.settings-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.settings-header-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 6px;
}

.settings-header-subtitle {
  max-width: 620px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.settings-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 10, 16, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  flex: 0 0 auto;
}

.settings-tab {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted2);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.settings-tab:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.settings-tab.active {
  color: #fff;
  border-color: rgba(132, 148, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(125, 158, 255, 0.94), rgba(88, 101, 242, 0.92));
  box-shadow:
    0 12px 22px rgba(33, 41, 103, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.settings-close {
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  font-size: 16px;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.settings-close:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

/* ─── Body ───────────────────────────────────────────────────────────────── */

.settings-body {
  flex: 1 1;
  display: flex;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at top right, rgba(88, 101, 242, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0));
}

/* ─── Floating Save Bar ─────────────────────────────────────────────────── */

.settings-save-bar {
  position: absolute;
  bottom: 16px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  z-index: 10;
  animation: save-bar-in 0.2s ease-out;
}

@keyframes save-bar-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.settings-save-bar-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}

.settings-save-bar-discard {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.settings-save-bar-discard:hover {
  background: var(--bg3);
  color: var(--text);
}

.settings-save-bar-discard:disabled {
  opacity: 0.5;
  cursor: default;
}

.settings-save-bar-save {
  background: var(--accent, #5865f2);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 18px;
  cursor: pointer;
  transition: filter 0.15s;
}

.settings-save-bar-save:hover {
  filter: brightness(1.1);
}

.settings-save-bar-save:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ─── Nav ────────────────────────────────────────────────────────────────── */

.settings-nav {
  width: 280px;
  flex: 0 0 280px;
  background:
    linear-gradient(180deg, rgba(52, 58, 73, 0.28), rgba(20, 24, 33, 0.4)),
    rgba(8, 12, 18, 0.72);
  border-right: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto;
  padding: 18px 16px 20px;
}

.settings-nav-section {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-condensed);
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 8px 12px;
  margin: 18px 0 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.settings-nav-section:hover {
  color: var(--accent);
  background: rgba(88, 101, 242, 0.08);
}
.settings-nav-section:active {
  background: rgba(88, 101, 242, 0.12);
}
.settings-nav-section-arrow {
  font-size: 9px;
  opacity: 0.5;
  flex-shrink: 0;
}
.settings-nav > div:first-child .settings-nav-section {
  margin-top: 0;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  text-align: left;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}

.settings-nav-item:hover {
  transform: translateX(2px);
  background: linear-gradient(180deg, rgba(41, 46, 58, 0.98), rgba(22, 27, 36, 0.98));
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.settings-nav-item.active {
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.20), rgba(88, 101, 242, 0.10));
  color: var(--text);
  font-weight: 900;
  border-color: rgba(132, 148, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(88, 101, 242, 0.18),
    0 10px 18px rgba(24, 31, 78, 0.12);
}

/* ─── Content ────────────────────────────────────────────────────────────── */

.settings-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 24px;
}

.settings-mobile-nav {
  display: none;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.settings-mobile-nav-label {
  font-size: 11px;
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted2);
}

.settings-mobile-select {
  flex: 1 1;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 15, 22, 0.88);
  color: var(--text);
  padding: 0 12px;
}

.settings-content-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-content-banner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(65, 81, 148, 0.32), rgba(17, 22, 31, 0.92) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  box-shadow:
    0 20px 36px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.settings-content-banner-text {
  min-width: 0;
}

.settings-content-banner-eyebrow {
  font-size: 10px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c4ccff;
  margin-bottom: 8px;
}

.settings-content-banner-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 8px;
}

.settings-content-banner-subtitle {
  max-width: 640px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.settings-content-banner-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 11px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.settings-page-frame {
  min-height: 100%;
  padding: 26px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(24, 30, 41, 0.96), rgba(12, 16, 24, 0.96));
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.settings-mobile-select optgroup {
  color: var(--muted2);
}

@media (max-width: 480px) {
  .settings-mobile-nav {
    display: flex;
  }
}

@media (max-width: 1100px) {
  .settings-modal {
    width: calc(100vw - 28px);
    height: calc(100vh - 28px);
  }

  .settings-nav {
    width: 248px;
    flex-basis: 248px;
  }

  .settings-header-row,
  .settings-content-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 820px) {
  .settings-overlay {
    padding: 10px;
  }

  .settings-modal {
    width: 100%;
    height: calc(100vh - 20px);
    border-radius: 20px;
  }

  .settings-header {
    padding: 18px 18px 16px;
  }

  .settings-header-title {
    font-size: 26px;
  }

  .settings-nav {
    display: none;
  }

  .settings-mobile-nav {
    display: flex;
  }

  .settings-content {
    padding: 16px;
  }

  .settings-content-banner,
  .settings-page-frame {
    padding: 18px;
    border-radius: 18px;
  }

  .settings-content-banner-title,
  .settings-page-title {
    font-size: 24px;
  }
}

/* ─── Shared Page Elements ───────────────────────────────────────────────── */

.settings-page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.settings-page-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.65;
}

/* Placeholder stub pages */
.settings-stub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.settings-stub-card {
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.84), rgba(38, 40, 45, 0.92));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: 14px;
}

.settings-stub-card h4 {
  font-weight: 900;
  font-size: 13px;
  margin: 0 0 6px;
}

.settings-stub-card p {
  color: var(--muted2);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

/* ─── Roles & Permissions ────────────────────────────────────────────────── */

.roles-layout {
  display: flex;
  gap: 12px;
  min-height: 0;
  flex: 1 1;
  overflow: hidden;
}

.roles-list-col {
  width: 260px;
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.roles-add-btn {
  width: 100%;
  height: 34px;
  border-radius: 10px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: color 0.15s, border-color 0.15s;
}

.roles-add-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.roles-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1 1;
}

.role-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}

.role-row:hover {
  background: var(--bg3);
}

.role-row.selected {
  background: var(--bg3);
  border-color: var(--line2);
}

.role-row.drag-over {
  border-top: 2px solid var(--accent);
}

.role-drag-handle {
  cursor: -webkit-grab;
  cursor: grab;
  color: var(--muted2);
  font-size: 12px;
  flex: 0 0 auto;
}

.role-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.role-name {
  font-size: 13px;
  font-weight: 900;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-count {
  font-size: 10px;
  color: var(--muted2);
}

/* Role editor panel */
.role-editor {
  flex: 1 1;
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.90), rgba(38, 40, 45, 0.95));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.role-editor-empty {
  flex: 1 1;
  display: grid;
  place-items: center;
  color: var(--muted2);
  font-size: 13px;
}

.role-editor-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.role-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.15);
  flex: 0 0 auto;
  position: relative;
}

.role-name-input {
  flex: 1 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line2);
  color: var(--text);
  font-weight: 900;
  font-size: 15px;
  outline: none;
  padding: 2px 0;
}

.role-name-input:focus {
  border-bottom-color: var(--accent);
}

.role-delete-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--bad);
  background: rgba(242, 63, 67, 0.08);
  color: var(--bad);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.role-delete-btn:hover {
  background: rgba(242, 63, 67, 0.18);
}

/* Role editor tabs */
.role-editor-tabs {
  display: flex;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex: 0 0 auto;
}

.role-editor-tab {
  height: 40px;
  padding: 0 16px;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted2);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  transition: color 0.15s, border-color 0.15s;
}

.role-editor-tab:hover {
  color: var(--text);
}

.role-editor-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.role-editor-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px;
}

/* Permission groups */
.perm-group-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
  margin-top: 16px;
}

.perm-group-label:first-child {
  margin-top: 0;
}

.perm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(43, 45, 49, 0.92), rgba(35, 36, 40, 0.92));
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 4px;
}

.perm-info {
  flex: 1 1;
}

.perm-label {
  font-weight: 900;
  font-size: 13px;
}

.perm-desc {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
}

/* Toggle pill */
.perm-toggle {
  width: 44px;
  height: 16px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  flex: 0 0 44px;
  border: none;
  background: var(--bg4, #4f545c);
}

.perm-toggle.on {
  background: var(--ok, #3ba55d);
}

.perm-toggle-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  transition: left 0.15s;
}

.perm-toggle.on .perm-toggle-thumb {
  left: 28px;
}

/* @everyone info banner */
.everyone-banner {
  background: rgba(240, 178, 50, 0.08);
  border: 1px solid rgba(240, 178, 50, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--idle);
  margin-bottom: 16px;
}

/* Members tab */
.role-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg3);
  border-radius: 10px;
  margin-bottom: 4px;
}

.role-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 12px;
  flex: 0 0 auto;
}

.role-member-info {
  flex: 1 1;
}

.role-member-name {
  font-weight: 900;
  font-size: 13px;
}

.role-member-rank {
  font-size: 11px;
  color: var(--muted2);
}

.role-member-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}

.role-member-btn.add {
  border: 1px solid var(--accent);
  background: rgba(88, 101, 242, 0.1);
  color: var(--accent);
}

.role-member-btn.add:hover {
  background: rgba(88, 101, 242, 0.2);
}

.role-member-btn.remove {
  border: 1px solid var(--bad);
  background: rgba(242, 63, 67, 0.08);
  color: var(--bad);
}

.role-member-btn.remove:hover {
  background: rgba(242, 63, 67, 0.18);
}

.role-members-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* ─── Color Picker Popup ─────────────────────────────────────────────────── */

/* ─── ColorSelect (standardized trigger) ────────────────────────────────── */

.syph-color-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.syph-color-select-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.syph-color-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.syph-color-select-trigger {
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.syph-color-select-trigger:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.syph-color-select-trigger.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.syph-color-select-trigger.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.syph-color-select-none-x {
  color: var(--muted2);
  font-size: 14px;
  line-height: 1;
}

.syph-color-select-hex {
  font-size: 12px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: var(--muted);
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.syph-color-select-clear {
  font-size: 10px;
  color: var(--muted2);
  background: none;
  border: 1px solid var(--line2);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.syph-color-select-clear:hover {
  color: var(--bad);
  border-color: var(--bad);
}

/* ─── Color Picker Popup (modernized) ───────────────────────────────────── */

.color-picker-popup {
  position: fixed;
  background: linear-gradient(180deg, rgba(40, 42, 48, 0.98) 0%, rgba(32, 34, 38, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 290px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  animation: color-picker-fade-in 0.15s ease-out;
}

@keyframes color-picker-fade-in {
  from { opacity: 0; transform: translateY(4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Legacy swatch class (still used by TitlesTab inline grids) */
.color-picker-swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}

.color-picker-swatch.selected {
  border-color: #fff;
}

.color-picker-swatch:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

/* ── Section label ──────────────────────────────────────────────────────── */

.color-picker-section-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  width: 100%;
}

/* ── Separator ──────────────────────────────────────────────────────────── */

.color-picker-separator {
  width: 100%;
  height: 1px;
  background: var(--line2);
}

/* ── Recent Colors ──────────────────────────────────────────────────────── */

.color-picker-recent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

.color-picker-recent-swatch {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}

.color-picker-recent-swatch:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.color-picker-recent-swatch.selected {
  border-color: #fff;
}

/* ── Shade Grid ─────────────────────────────────────────────────────────── */

.color-picker-shade-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 3px;
  gap: 3px;
  width: 100%;
}

.color-picker-shade-swatch {
  aspect-ratio: 1;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}

.color-picker-shade-swatch:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.color-picker-shade-swatch.selected {
  border-color: #fff;
}

.color-picker-shade-swatch.base-row {
  border-radius: 5px;
}

/* ── Input Section ──────────────────────────────────────────────────────── */

.color-picker-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.color-picker-mode-toggle {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  flex: 0 0 auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  letter-spacing: 0.04em;
}

.color-picker-mode-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.color-picker-hex-input {
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  padding: 0 8px;
  font-size: 12px;
  font-family: 'Consolas', 'Monaco', monospace;
  outline: none;
  flex: 1 1;
  min-width: 0;
}

.color-picker-hex-input:focus {
  border-color: var(--accent);
}

.color-picker-rgb-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1;
}

.color-picker-rgb-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  flex: 0 0 auto;
}

.color-picker-rgb-input {
  height: 28px;
  width: 48px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  padding: 0 4px;
  font-size: 12px;
  font-family: 'Consolas', 'Monaco', monospace;
  outline: none;
  text-align: center;
}

.color-picker-rgb-input:focus {
  border-color: var(--accent);
}

.color-picker-rgb-input::-webkit-inner-spin-button,
.color-picker-rgb-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.color-picker-rgb-input[type='number'] {
  -moz-appearance: textfield;
}

/* ── Preview Strip ──────────────────────────────────────────────────────── */

.color-picker-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.color-picker-preview-swatch {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  flex: 0 0 auto;
}

.color-picker-preview-hex {
  font-size: 11px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: var(--muted);
}

/* ─── Audit Logs ─────────────────────────────────────────────────────────── */

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

.audit-search {
  flex: 1 1;
  min-width: 200px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(10, 15, 22, 0.88);
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  outline: none;
}

.audit-search:focus {
  border-color: var(--accent);
}

.audit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.audit-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}

.audit-chip.active {
  border-color: var(--accent);
  background: rgba(88, 101, 242, 0.1);
  color: var(--accent);
}

.audit-chip:hover:not(.active) {
  background: var(--bg3);
  color: var(--text);
}

.audit-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(28, 33, 43, 0.96), rgba(15, 19, 27, 0.96));
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.audit-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex: 0 0 auto;
  background: var(--bg4);
}

.audit-detail {
  flex: 1 1;
}

.audit-actor {
  font-weight: 900;
  font-size: 13px;
}

.audit-action {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}

.audit-time {
  font-size: 11px;
  color: var(--muted2);
  white-space: nowrap;
}

.audit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 8px;
}

.audit-page-btn {
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}

.audit-page-btn:hover:not(:disabled) {
  background: var(--bg3);
  color: var(--text);
}

.audit-page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.audit-page-info {
  font-size: 12px;
  color: var(--muted2);
  font-weight: 700;
}

.audit-export-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.audit-export-btn {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.audit-export-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.audit-export-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ─── Two-Factor Auth ─────────────────────────────────────────────────── */

.mfa-status-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  margin-top: 12px;
}

.mfa-status-card.mfa-enabled {
  background: rgba(67, 181, 129, 0.08);
  border: 1px solid rgba(67, 181, 129, 0.25);
}

.mfa-status-card.mfa-disabled {
  background: var(--bg2);
  border: 1px solid var(--line2);
}

.mfa-status-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.mfa-status-label {
  font-size: 14px;
  color: var(--text);
}

.mfa-status-detail {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}

.mfa-secret-box {
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 12px;
}

.mfa-secret-code {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--accent);
  word-break: break-all;
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.mfa-codes-reveal {
  background: var(--bg1);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 12px;
}

.mfa-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 6px;
  gap: 6px;
}

.mfa-code-item {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 5px 10px;
  background: var(--bg2);
  border-radius: 6px;
  text-align: center;
  letter-spacing: 1px;
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.mfa-recovery-status {
  font-size: 13px;
  color: var(--text);
  margin-top: 10px;
}

.mfa-recovery-count {
  font-weight: 900;
  font-size: 16px;
  color: var(--accent);
}

.mfa-warning {
  font-size: 12px;
  color: var(--bad);
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(240, 71, 71, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(240, 71, 71, 0.2);
}

/* ─── Language Settings ──────────────────────────────────────────────────── */

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-top: 16px;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.lang-option:hover {
  background: var(--bg3);
  border-color: var(--accent);
}

.lang-option.active {
  background: rgba(88, 101, 242, 0.1);
  border-color: var(--accent);
}

.lang-name {
  font-size: 14px;
  font-weight: 600;
  flex: 1 1;
}

.lang-code {
  font-size: 11px;
  color: var(--muted2);
  font-weight: 700;
}

.lang-check {
  color: var(--accent);
  font-weight: 900;
  font-size: 16px;
}

.lang-community-note {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--bg2);
  border-radius: 8px;
  border: 1px solid var(--line2);
}

/* ─── Invites ────────────────────────────────────────────────────────────── */

.invites-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
  border-style: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 16px 28px rgba(0, 0, 0, 0.14);
}

.invites-table th {
  text-align: left;
  font-size: 10px;
  font-family: var(--font-condensed);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);
}

.invites-table td {
  font-size: 13px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(14, 19, 27, 0.76);
}

.invite-create-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.invite-create-btn:hover {
  opacity: 0.85;
}

.invite-create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.invite-create-section {
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(24, 29, 38, 0.9), rgba(13, 17, 25, 0.9));
}

.invite-create-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.invite-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.invite-field-label {
  font-size: 10px;
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.invite-field-input {
  width: 120px;
  height: 34px;
  padding: 0 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.invite-field-input:focus {
  border-color: var(--accent);
}

.invite-code {
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 1px;
}

.invite-inactive {
  opacity: 0.5;
}

.invite-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.invite-status-active {
  background: color-mix(in srgb, var(--ok) 20%, transparent);
  color: var(--ok);
}

.invite-status-revoked,
.invite-status-expired,
.invite-status-max-uses-reached {
  background: color-mix(in srgb, var(--bad) 20%, transparent);
  color: var(--bad);
}

.invite-actions {
  display: flex;
  gap: 6px;
}

.invite-action-btn {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 10px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.invite-action-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.invite-revoke-btn:hover {
  color: var(--bad);
  border-color: var(--bad);
}

/* ─── User Profile ───────────────────────────────────────────────────────── */

.profile-editor {
  display: flex;
  gap: 24px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.74), rgba(38, 40, 45, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  margin-bottom: 14px;
}

.profile-editor-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 120px;
  padding: 10px 6px;
}

.profile-editor-fields {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 760px;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 720px;
}

/* ─── Profile Appearance / Privacy / Connected Accounts ────────────────── */

.profile-section {
  padding: 20px;
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.74), rgba(38, 40, 45, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  margin-bottom: 14px;
}

.profile-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.profile-section-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}

.ann-label-sub {
  font-size: 11px;
  color: var(--muted2);
  margin-bottom: 4px;
  display: block;
}

.profile-banner-preview {
  width: min(720px, 100%);
  aspect-ratio: 16 / 5;
  min-height: 160px;
  border-radius: 18px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(11, 16, 24, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 28px rgba(0, 0, 0, 0.16);
}

.profile-banner-controls {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: flex-start;
  max-width: 720px;
}

.profile-banner-controls .img-input {
  flex: 1 1;
}

.profile-card-preview {
  width: min(720px, 100%);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(20, 26, 36, 0.98), rgba(10, 14, 21, 0.98));
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: 18px;
  --profile-accent: var(--accent);
}

.profile-card-preview-banner {
  height: 144px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.profile-card-preview-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 12%, rgba(9, 12, 18, 0.2) 60%, rgba(9, 12, 18, 0.82));
}

.profile-card-preview-body {
  position: relative;
  padding: 18px 20px 20px;
  margin-top: -28px;
}

.profile-card-preview-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.profile-card-preview-avatar {
  flex: 0 0 auto;
}

.profile-card-preview-ident {
  min-width: 0;
  flex: 1 1;
}

.profile-card-preview-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 4px;
}

.profile-card-preview-handle {
  font-size: 12px;
  color: var(--muted);
}

.profile-card-preview-style-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 40%, transparent);
  background: color-mix(in srgb, var(--profile-accent) 18%, rgba(255, 255, 255, 0.04));
  color: #fff;
  font-size: 11px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-card-preview-statement {
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--profile-accent) 72%, white);
  margin-bottom: 8px;
}

.profile-card-preview-bio {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 14px;
  max-width: 62ch;
}

.profile-card-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-card-preview-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.profile-card-preview--minimal .profile-card-preview {
  box-shadow: none;
}

.profile-card-preview--minimal {
  background: linear-gradient(180deg, rgba(18, 22, 29, 0.98), rgba(10, 13, 18, 0.98));
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.profile-card-preview--minimal .profile-card-preview-style-chip,
.profile-card-preview--minimal .profile-card-preview-meta span {
  background: rgba(255, 255, 255, 0.02);
}

.profile-card-preview--glassmorphic {
  background:
    linear-gradient(135deg, rgba(92, 108, 232, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(15, 19, 27, 0.74);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-card-preview--glassmorphic .profile-card-preview-body {
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.profile-card-preview--command {
  border-radius: 16px;
  border-color: rgba(143, 166, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(15, 20, 28, 0.98), rgba(8, 11, 16, 0.98));
  box-shadow:
    0 0 0 1px rgba(91, 116, 220, 0.14),
    0 20px 38px rgba(0, 0, 0, 0.26);
}

.profile-card-preview--command .profile-card-preview-name,
.profile-card-preview--command .profile-card-preview-style-chip,
.profile-card-preview--command .profile-card-preview-meta span {
  font-family: var(--font-condensed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-card-preview--command .profile-card-preview-banner {
  height: 124px;
}

.profile-card-preview--command .profile-card-preview-style-chip {
  border-radius: 10px;
}

.profile-card-preview--neon {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--profile-accent) 34%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(14, 17, 28, 0.98), rgba(8, 10, 18, 0.98));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--profile-accent) 30%, transparent),
    0 0 36px color-mix(in srgb, var(--profile-accent) 18%, transparent),
    0 26px 44px rgba(0, 0, 0, 0.28);
}

.profile-card-preview--neon .profile-card-preview-name {
  text-shadow: 0 0 16px color-mix(in srgb, var(--profile-accent) 34%, transparent);
}

.profile-card-preview--neon .profile-card-preview-style-chip {
  box-shadow: 0 0 18px color-mix(in srgb, var(--profile-accent) 24%, transparent);
}

.profile-card-preview--editorial {
  background:
    linear-gradient(180deg, rgba(31, 24, 21, 0.98), rgba(16, 13, 12, 0.98));
  border-radius: 28px;
}

.profile-card-preview--editorial .profile-card-preview-head {
  align-items: flex-end;
}

.profile-card-preview--editorial .profile-card-preview-name {
  font-size: 30px;
}

.profile-card-preview--editorial .profile-card-preview-bio {
  font-size: 14px;
  max-width: 48ch;
}

.profile-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  max-width: 720px;
}

.profile-style-option {
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(25, 30, 40, 0.96), rgba(13, 17, 24, 0.96));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.profile-style-option:hover {
  transform: translateY(-2px);
  border-color: rgba(132, 148, 255, 0.2);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.16);
}

.profile-style-option.active {
  border-color: color-mix(in srgb, var(--profile-accent) 44%, transparent);
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px color-mix(in srgb, var(--profile-accent) 22%, transparent);
}

.profile-style-option-preview {
  width: 126px;
  flex: 0 0 126px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 12, 18, 0.9);
}

.profile-style-option-banner {
  height: 40px;
}

.profile-style-option-body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
}

.profile-style-option-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: linear-gradient(180deg, rgba(58, 63, 82, 0.96), rgba(26, 30, 39, 0.96));
  flex: 0 0 auto;
}

.profile-style-option-lines {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile-style-option-lines span {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.profile-style-option-lines span:last-child {
  width: 70%;
}

.profile-style-option-copy {
  min-width: 0;
}

.profile-style-option-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.profile-style-option-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.profile-style-option--minimal .profile-style-option-preview,
.profile-style-option--minimal {
  border-radius: 14px;
}

.profile-style-option--minimal .profile-style-option-preview {
  box-shadow: none;
}

.profile-style-option--minimal .profile-style-option-body {
  background: rgba(255, 255, 255, 0.015);
}

.profile-style-option--glassmorphic .profile-style-option-preview {
  background: rgba(255, 255, 255, 0.08);
}

.profile-style-option--glassmorphic .profile-style-option-body {
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.profile-style-option--command .profile-style-option-preview {
  border-radius: 10px;
}

.profile-style-option--command .profile-style-option-title {
  font-family: var(--font-condensed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.profile-style-option--neon .profile-style-option-preview {
  box-shadow: 0 0 16px color-mix(in srgb, var(--profile-accent) 14%, transparent);
}

.profile-style-option--editorial .profile-style-option-title {
  font-size: 18px;
}

.profile-editor-fields .ann-input,
.profile-editor-fields textarea.ann-input,
.profile-editor-fields .img-input,
.profile-section .ann-input,
.profile-section textarea.ann-input,
.profile-section .img-input,
.profile-section .profile-pill-row,
.profile-section .profile-accent-swatches,
.profile-section .profile-gradient-swatches {
  max-width: 720px;
}

.profile-editor-fields .ann-input,
.profile-editor-fields textarea.ann-input,
.profile-section .ann-input,
.profile-section textarea.ann-input {
  background: var(--bg0);
  border-color: var(--line2);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  box-shadow: none;
}

.profile-editor-fields .ann-input,
.profile-section .ann-input {
  min-height: 42px;
}

.profile-editor-fields textarea.ann-input,
.profile-section textarea.ann-input {
  min-height: 60px;
}

@media (max-width: 900px) {
  .profile-editor {
    flex-direction: column;
  }

  .profile-editor-preview {
    align-items: flex-start;
    min-width: 0;
    padding: 0;
  }

  .profile-editor-fields,
  .profile-field,
  .profile-banner-controls {
    max-width: none;
  }

  .profile-banner-preview {
    width: 100%;
    min-height: 132px;
  }

  .profile-banner-controls {
    flex-wrap: wrap;
  }

  .profile-style-grid {
    grid-template-columns: 1fr;
  }
}

.profile-gradient-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-gradient-swatch {
  width: 38px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.profile-gradient-swatch.selected {
  border-color: #fff;
  transform: scale(1.05);
}
.profile-gradient-swatch:hover { border-color: rgba(255, 255, 255, 0.3); }

.profile-pill-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.profile-pill-row.small { gap: 4px; }

.profile-pill {
  padding: 6px 16px;
  border-radius: 9999px;
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-family: inherit;
  transition: background 0.15s;
}
.profile-pill:hover { background: rgba(255, 255, 255, 0.12); }
.profile-pill.active { background: var(--accent); color: #fff; }
.profile-pill.small { padding: 3px 10px; font-size: 11px; }

.profile-accent-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-accent-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.profile-accent-swatch.selected {
  transform: scale(1.15);
  border-color: #fff;
}
.profile-accent-swatch:hover { border-color: rgba(255, 255, 255, 0.4); }

.profile-services-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-service-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line2);
  flex-wrap: wrap;
}
.profile-service-row:last-child { border-bottom: none; }

.profile-service-icon {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.profile-service-info {
  flex: 1 1;
  min-width: 0;
}

.profile-service-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.profile-service-user {
  font-size: 11px;
  color: var(--muted);
}

.profile-service-actions {
  flex-shrink: 0;
}

.profile-service-visibility {
  width: 100%;
  padding-left: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.ann-submit.small {
  padding: 4px 12px;
  font-size: 11px;
}

/* ─── Overview & Branding ─────────────────────────────────────────────────── */

.ov-identity-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.82), rgba(38, 40, 45, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.ov-icon-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 150px;
}

.ov-icon-preview {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(49, 51, 56, 0.94), rgba(31, 33, 38, 0.96));
  border: 2px dashed rgba(255, 255, 255, 0.10);
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.ov-icon-placeholder {
  font-size: 12px;
  font-weight: 900;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ov-fields-col {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.ov-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ov-section {
  margin-bottom: 20px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(49, 51, 56, 0.74), rgba(38, 40, 45, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.ov-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

.ov-section-desc {
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 14px;
  line-height: 1.5;
}

.ov-banner-preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background-color: var(--bg4);
  border: 2px dashed rgba(255, 255, 255, 0.10);
  display: grid;
  place-items: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.ov-banner-placeholder {
  font-size: 12px;
  font-weight: 900;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ov-input-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ov-input-header .ch-modal-label {
  margin-bottom: 0;
}

.ov-mode-toggle {
  display: flex;
  gap: 2px;
  background: rgba(15, 16, 18, 0.72);
  border-radius: 999px;
  padding: 3px;
}

.ov-mode-btn {
  padding: 5px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease;
}

.ov-mode-btn:hover {
  color: var(--text);
}

.ov-mode-btn.active {
  background: rgba(88, 101, 242, 0.18);
  color: #dfe4ff;
}

.ov-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ov-upload-btn {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(64, 66, 73, 0.85), rgba(49, 51, 56, 0.9));
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.ov-upload-btn:hover {
  background: var(--bg4);
}

.ov-upload-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ov-clear-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: var(--bg3);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.12s ease;
}

.ov-clear-btn:hover {
  background: var(--bad);
  color: white;
}

.ov-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  margin: 24px 0;
}

.ov-toggle-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.ov-radio-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ov-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(43, 45, 49, 0.92), rgba(35, 36, 40, 0.92));
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.1s;
}

.ov-radio:hover {
  background: linear-gradient(180deg, rgba(56, 58, 64, 0.96), rgba(43, 45, 49, 0.96));
}

.ov-radio input[type="radio"] {
  accent-color: var(--accent);
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.ov-radio-label {
  font-weight: 900;
  font-size: 13px;
}

.ov-radio-desc {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
}

/* ─── Federation ─────────────────────────────────────────────────────────── */

.fed-mode-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 12px;
}

.fed-mode-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fed-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding-bottom: 6px;
}

.fed-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.fed-warning-banner {
  background: rgba(240, 178, 50, 0.12);
  border: 1px solid rgba(240, 178, 50, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--idle);
  margin-bottom: 12px;
}

/* Peer list */
.fed-peer-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.fed-peer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.1s;
}

.fed-peer-row:hover {
  background: var(--bg3);
}

.fed-peer-name {
  font-size: 13px;
  font-weight: 900;
  flex: 0 0 auto;
  min-width: 120px;
  cursor: default;
}

.fed-peer-name-input {
  max-width: 160px;
}

.fed-peer-domain {
  font-size: 12px;
  color: var(--muted2);
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fed-peer-status {
  font-size: 11px;
  color: var(--muted);
  text-transform: capitalize;
  flex: 0 0 auto;
  min-width: 80px;
}

.fed-peer-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity 0.15s;
}

.fed-peer-row:hover .fed-peer-actions {
  opacity: 1;
}

.fed-peer-action-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.1s, color 0.1s;
}

.fed-peer-action-btn:hover {
  background: var(--bg4);
  color: var(--text);
}

.fed-peer-action-btn.danger:hover {
  background: rgba(242, 63, 67, 0.15);
  color: var(--bad);
}

/* Add peer form */
.fed-add-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.fed-add-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.fed-cancel-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s;
}

.fed-cancel-btn:hover {
  color: var(--text);
}

/* Routing Matrix */
.fed-matrix {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  margin-top: 8px;
}

.fed-matrix-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  padding: 6px 8px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fed-matrix-row-label {
  text-align: right;
}

.fed-matrix-cell {
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background 0.15s, color 0.15s;
}

.fed-matrix-cell.self {
  background: var(--bg3);
  color: var(--muted2);
  cursor: default;
}

.fed-matrix-cell.enabled {
  background: rgba(35, 165, 89, 0.15);
  color: var(--ok);
}

.fed-matrix-cell.enabled:hover {
  background: rgba(35, 165, 89, 0.25);
}

.fed-matrix-cell.disabled {
  background: var(--bg3);
  color: var(--muted2);
}

.fed-matrix-cell.disabled:hover {
  background: var(--bg4);
  color: var(--bad);
}

/* Shared Resources */
.fed-shared-section {
  margin-bottom: 12px;
}

.fed-shared-peer-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

.fed-shared-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.fed-resource-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  font-size: 12px;
  color: var(--text);
}

.fed-resource-pill-label {
  text-transform: capitalize;
}

.fed-resource-pill-remove {
  background: none;
  border: none;
  color: var(--muted2);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.fed-resource-pill-remove:hover {
  color: var(--bad);
}

.fed-add-share-btn {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.fed-add-share-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Spoke Panel */
/* P2P promote button */
.fed-promote-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.2s, background 0.2s;
}
.fed-promote-btn:hover:not(:disabled) {
  background: var(--accent-hover, #4752c4);
}
.fed-promote-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg3);
  color: var(--muted);
}

/* Hub detected badge */
.fed-hub-detected {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--idle);
  margin-top: 4px;
}

.fed-spoke-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}

.fed-spoke-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* ─── Workspaces (ws-) ───────────────────────────────────────────────────── */

.ws-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: 4px;
  background: var(--bg3);
  font-size: 13px;
  flex-shrink: 0;
}

.ws-module-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-module-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg0);
}

.ws-module-name {
  flex: 1 1;
  font-size: 13px;
  color: var(--text);
}

.ws-scope-select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  min-width: 100px;
}

.ws-scope-select:focus {
  border-color: var(--accent);
  outline: none;
}

.ws-enabled-check {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ws-enabled-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ─── Module Ordering (Workspaces) ─────────────────────────────────────── */

.ws-mod-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-mod-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg0);
}

.ws-mod-row.locked {
  opacity: 0.6;
}

.ws-mod-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-mod-arrow {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  padding: 0 4px;
  line-height: 1;
}

.ws-mod-arrow:hover:not(:disabled) {
  color: var(--text);
}

.ws-mod-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.ws-mod-icon {
  font-size: 16px;
  flex: 0 0 24px;
  text-align: center;
}

.ws-mod-name {
  flex: 1 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.ws-mod-badge {
  font-size: 10px;
  color: var(--muted2);
}

.ws-mod-hint {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 4px;
}

.ws-mod-sep {
  height: 1px;
  background: var(--line);
  margin: 2px 0;
}

/* ─── ABAC — Attributes & Policies ──────────────────────────────────────── */

.abac-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Shared ABAC form elements ──────────────────────────────────────────── */

.abac-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.abac-field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.abac-field-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.abac-input {
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  outline: none;
  width: 100%;
}

.abac-input:focus {
  border-color: var(--accent);
}

.abac-textarea {
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--text);
  padding: 10px 12px;
  font-size: 12px;
  font-family: 'Consolas', 'Monaco', monospace;
  outline: none;
  resize: vertical;
  width: 100%;
}

.abac-textarea:focus {
  border-color: var(--accent);
}

.abac-select {
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--text);
  padding: 0 10px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.abac-select:focus {
  border-color: var(--accent);
}

.abac-save-btn {
  height: 36px;
  padding: 0 20px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 8px;
}

.abac-save-btn:hover {
  opacity: 0.85;
}

.abac-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.abac-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}

.abac-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.abac-error-banner {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(237, 66, 69, 0.15);
  border: 1px solid rgba(237, 66, 69, 0.4);
  color: #ed4245;
  font-size: 13px;
  margin-top: 8px;
  margin-bottom: 4px;
}

.abac-remove-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted2);
  font-size: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: background 0.1s, color 0.1s;
}

.abac-remove-btn:hover {
  background: rgba(242, 63, 67, 0.15);
  color: var(--bad);
}

.abac-add-small-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.abac-add-small-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Attributes Tab ─────────────────────────────────────────────────────── */

.abac-attr-defaults {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.abac-attr-default-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  transition: background 0.1s;
}

.abac-attr-default-row:hover {
  background: var(--bg3);
}

.abac-attr-type-icon {
  width: 24px;
  height: 20px;
  border-radius: 4px;
  background: var(--bg4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--accent);
  flex: 0 0 auto;
}

.abac-attr-default-name {
  font-weight: 700;
  color: var(--text);
  min-width: 180px;
}

.abac-attr-default-context {
  font-size: 11px;
  color: var(--muted2);
  min-width: 70px;
}

.abac-attr-default-type {
  font-size: 11px;
  color: var(--muted2);
  min-width: 60px;
}

.abac-attr-default-desc {
  font-size: 11px;
  color: var(--muted2);
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Operator pills */
.abac-operator-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.abac-operator-pill {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  font-size: 11px;
  font-weight: 700;
  font-family: 'Consolas', 'Monaco', monospace;
  color: var(--muted);
}

/* Enum values */
.abac-enum-values {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.abac-enum-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Color grid */
.abac-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Policies Tab ───────────────────────────────────────────────────────── */

.abac-policy-status {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.abac-policy-status.enabled {
  background: var(--ok);
}

.abac-policy-status.disabled {
  background: var(--muted2);
}

/* Condition groups */
.abac-groups-section {
  margin-bottom: 16px;
}

.abac-groups-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.abac-groups-empty {
  font-size: 12px;
  color: var(--muted2);
  padding: 8px 12px;
  font-style: italic;
}

.abac-group-card {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}

.abac-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.abac-group-title {
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
}

.abac-group-logic {
  font-weight: 400;
  color: var(--muted2);
  font-size: 11px;
}

.abac-groups-logic-note {
  font-size: 11px;
  color: var(--muted2);
  font-style: italic;
  padding: 4px 0;
}

/* Condition rows */
.abac-condition-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.abac-condition-attr {
  flex: 2 1;
  min-width: 0;
}

.abac-condition-op {
  flex: 0 0 auto;
  width: 90px;
}

.abac-condition-val {
  flex: 1 1;
  min-width: 0;
}

/* Preview */
.abac-preview {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line2);
}

.abac-preview-text {
  font-size: 12px;
  color: var(--muted2);
  font-style: italic;
  font-family: 'Consolas', 'Monaco', monospace;
  white-space: pre-wrap;
  background: var(--bg3);
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 4px;
}

/* ── Policy Sections & Tags ────────────────────────────────────────────── */

.pol-search {
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 12px;
  outline: none;
  margin-bottom: 4px;
}

.pol-search:focus {
  border-color: var(--accent);
}

.pol-search::placeholder {
  color: var(--muted2);
}

.pol-tag-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.pol-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: var(--bg3);
  color: var(--muted);
  border: 1px solid var(--line2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.15s;
}

.pol-tag-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

.pol-tag-chip.active {
  background: rgba(88, 101, 242, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

.pol-tag-chip-x {
  font-size: 9px;
  opacity: 0.5;
  cursor: pointer;
}

.pol-tag-chip-x:hover {
  opacity: 1;
}

/* Section container */
.pol-section {
  margin-bottom: 2px;
}

.pol-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pol-section-header:hover {
  background: var(--bg3);
}

.pol-section-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.pol-section-arrow {
  font-size: 10px;
  transition: transform 0.15s;
  flex: 0 0 auto;
}

.pol-section-arrow.collapsed {
  transform: rotate(-90deg);
}

.pol-section-name {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pol-section-rename-input {
  flex: 1 1;
  min-width: 0;
  background: var(--bg1);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  padding: 1px 4px;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pol-section-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  background: var(--bg3);
  padding: 1px 5px;
  border-radius: 6px;
}

.pol-section-list {
  padding-left: 4px;
}

/* Kebab menu */
.pol-section-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.pol-section-kebab {
  background: none;
  border: none;
  color: var(--muted2);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.1s;
}

.pol-section-header:hover .pol-section-kebab {
  opacity: 1;
}

.pol-section-kebab:hover {
  color: var(--text);
  background: var(--bg4);
}

.pol-section-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 4px;
  min-width: 120px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.pol-section-menu-item {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  position: relative;
}

.pol-section-menu-item:hover {
  background: var(--bg3);
}

.pol-section-menu-item.danger {
  color: var(--bad);
}

.pol-section-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 4px;
  gap: 4px;
  padding: 6px 0 2px;
}

.pol-section-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.1s;
}

.pol-section-color-swatch:hover {
  border-color: var(--text);
}

.pol-section-color-swatch.active {
  border-color: white;
}

/* Row tags */
.pol-row-tags {
  display: flex;
  gap: 3px;
  margin-left: auto;
  flex: 0 0 auto;
}

.pol-row-tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--bg3);
  color: var(--muted2);
  font-weight: 600;
}

/* Add section button */
.pol-add-section-btn {
  width: 100%;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--muted2);
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
}

.pol-add-section-btn:hover {
  color: var(--accent);
}

/* Tag input in editor */
.pol-editor-tags {
  position: relative;
}

.pol-editor-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 8px;
  min-height: 32px;
  align-items: center;
  cursor: text;
}

.pol-editor-tags-chips:focus-within {
  border-color: var(--accent);
}

.pol-editor-tags-input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 12px;
  flex: 1 1;
  min-width: 60px;
}

.pol-editor-tags-input::placeholder {
  color: var(--muted2);
}

.pol-editor-tags-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 4px;
  margin-top: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.pol-editor-tags-suggestion {
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}

.pol-editor-tags-suggestion:hover {
  background: var(--bg3);
}

/* ── Expression Builder ────────────────────────────────────────────────── */

.abac-expr-builder {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.abac-expr-ns {
  min-width: 110px;
  max-width: 130px;
}

.abac-expr-dot {
  font-weight: 900;
  font-size: 16px;
  color: var(--muted);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 0 1px;
}

.abac-expr-metric {
  min-width: 140px;
  max-width: 180px;
}

.abac-expr-op {
  min-width: 70px;
  max-width: 100px;
}

.abac-expr-value {
  min-width: 80px;
  flex: 1 1;
}

.abac-expr-preview {
  font-size: 12px;
  color: var(--accent);
  font-family: 'Consolas', 'Monaco', monospace;
  background: var(--bg3);
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 6px;
  margin-bottom: 4px;
}

/* ── Test Panel ─────────────────────────────────────────────────────────── */

.abac-test-panel {
  display: flex;
  flex-direction: column;
}

.abac-test-user-select {
  width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

.abac-test-user-select:focus {
  border-color: var(--accent);
}

.abac-test-result {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line2);
}

.abac-test-result.allow {
  background: rgba(35, 165, 89, 0.08);
  border-color: rgba(35, 165, 89, 0.3);
}

.abac-test-result.deny {
  background: rgba(242, 63, 67, 0.08);
  border-color: rgba(242, 63, 67, 0.3);
}

.abac-test-decision {
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 4px;
}

.abac-test-result.allow .abac-test-decision {
  color: var(--ok);
}

.abac-test-result.deny .abac-test-decision {
  color: var(--bad);
}

.abac-test-reason {
  font-size: 12px;
  color: var(--muted);
}

.abac-test-trace {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.abac-trace-entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 12px;
}

.abac-trace-entry.matched {
  background: rgba(88, 101, 242, 0.06);
}

.abac-trace-entry.unmatched {
  background: var(--bg3);
}

.abac-trace-type {
  font-weight: 900;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.abac-trace-group {
  font-size: 11px;
  color: var(--muted2);
}

.abac-trace-result {
  font-weight: 900;
  font-size: 11px;
}

.abac-trace-result.pass {
  color: var(--ok);
}

.abac-trace-result.fail {
  color: var(--bad);
}

.abac-trace-condition {
  font-size: 11px;
  color: var(--muted);
  padding-left: 16px;
  font-family: 'Consolas', 'Monaco', monospace;
}

.abac-trace-condition .pass {
  color: var(--ok);
}

.abac-trace-condition .fail {
  color: var(--bad);
}

/* ── Bindings Tab ───────────────────────────────────────────────────────── */

.abac-resource-tree {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.abac-resource-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
}

.abac-resource-node:hover {
  background: var(--bg3);
}

.abac-resource-node.selected {
  background: var(--bg3);
  font-weight: 900;
}

.abac-resource-icon {
  font-size: 14px;
  flex: 0 0 auto;
  width: 20px;
  text-align: center;
}

.abac-resource-name {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abac-resource-type-badge {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg3);
  border: 1px solid var(--line2);
}

/* Action binding rows */
.abac-binding-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg3);
  border-radius: 10px;
  margin-bottom: 4px;
}

.abac-binding-action {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1;
  min-width: 200px;
  cursor: pointer;
}

.abac-binding-action-name {
  font-size: 13px;
  font-weight: 600;
  font-family: 'Consolas', 'Monaco', monospace;
}

.abac-binding-action-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1;
  min-width: 0;
}

.abac-binding-action-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
}

.abac-binding-action-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.abac-binding-action-id {
  font-size: 11px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: var(--accent, #5865f2);
  opacity: 0.85;
  flex-shrink: 0;
}

.abac-binding-action-pipe {
  font-size: 11px;
  color: var(--muted2);
  opacity: 0.5;
  flex-shrink: 0;
}

.abac-binding-action-desc {
  font-size: 11px;
  color: var(--muted2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.abac-binding-expand {
  font-size: 10px;
  color: var(--muted2);
}

.abac-binding-policies {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1;
  min-width: 0;
}

.abac-policy-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  max-width: 160px;
}

.abac-policy-chip.inherited {
  background: var(--bg3);
  color: var(--muted);
}

.abac-policy-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.abac-policy-chip-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.abac-policy-chip-remove:hover {
  color: #fff;
}

.abac-binding-add-policy {
  height: 24px;
  font-size: 11px;
  width: auto;
  min-width: 100px;
  max-width: 140px;
  background: var(--bg2);
  color: var(--muted);
}

.abac-binding-no-policy {
  font-size: 11px;
  color: var(--muted2);
  font-style: italic;
}

/* ── Bulk Operations Bar ─────────────────────────────────────────────── */

.abac-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg1);
  border-radius: 6px;
  margin-bottom: 12px;
}

.abac-bulk-select {
  flex: 1 1;
  max-width: 220px;
  height: 30px;
  font-size: 12px;
}

.abac-bulk-btn {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.abac-bulk-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.abac-bulk-btn.apply {
  background: var(--accent);
  color: #fff;
}

.abac-bulk-btn.apply:hover:not(:disabled) {
  filter: brightness(1.1);
}

.abac-bulk-btn.remove {
  background: var(--error, #ed4245);
  color: #fff;
}

.abac-bulk-btn.remove:hover:not(:disabled) {
  filter: brightness(1.1);
}

/* ── Attribute Source & ReadOnly Badges ─────────────────────────────────── */

.abac-attr-source-badge {
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 6px;
  flex: 0 0 auto;
}

.abac-readonly-badge {
  font-size: 9px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg4);
  border: 1px solid var(--line2);
  flex: 0 0 auto;
}

.abac-section-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 0 4px 4px;
}

.abac-attr-default-row {
  cursor: pointer;
  flex-wrap: wrap;
}

.abac-attr-expanded {
  width: 100%;
  padding: 8px 0 4px 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.abac-attr-desc {
  font-size: 11px;
  color: var(--muted2);
  font-style: italic;
}

.abac-enum-display {
  font-size: 11px;
  color: var(--muted2);
  font-family: 'Consolas', 'Monaco', monospace;
}

/* ── Title Groups ──────────────────────────────────────────────────────── */

.abac-title-group-section {
  margin-bottom: 2px;
}

/* Inset titles under their group header */
.abac-title-group-section > .role-row {
  padding-left: 24px;
}

.abac-title-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  transition: background 0.1s;
}

.abac-title-group-header:hover {
  background: var(--bg3);
}

.abac-title-group-header.selected {
  background: var(--bg3);
  color: var(--text);
}

.abac-title-group-header.ungrouped {
  color: var(--muted2);
  font-style: italic;
}

.abac-title-group-collapse {
  font-size: 10px;
  color: var(--muted2);
  flex: 0 0 14px;
  width: 14px;
  text-align: center;
  cursor: pointer;
}

/* Square color marker for title groups (circles for titles) */
.abac-title-group-header .role-color-dot {
  border-radius: 3px;
}

.abac-title-group-name {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abac-title-group-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  background: var(--bg4);
  padding: 1px 6px;
  border-radius: 8px;
  flex: 0 0 auto;
}

/* ── Drag & Drop ──────────────────────────────────────────────────────── */

.abac-title-group-header.drag-over {
  border-top: 2px solid var(--accent);
}

.abac-title-group-header.drop-target {
  background: rgba(88, 101, 242, 0.12);
  outline: 1px dashed var(--accent);
  outline-offset: -1px;
}

.abac-title-group-section.dragging {
  opacity: 0.45;
}

.role-row.dragging {
  opacity: 0.45;
}

.abac-title-group-drag-handle,
.abac-title-drag-handle {
  cursor: -webkit-grab;
  cursor: grab;
  color: var(--muted2);
  font-size: 11px;
  flex: 0 0 16px;
  width: 16px;
  opacity: 0;
  transition: opacity 0.12s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: center;
}

.abac-title-group-header:hover .abac-title-group-drag-handle,
.role-row:hover .abac-title-drag-handle {
  opacity: 0.6;
}

.abac-title-group-drag-handle:hover,
.abac-title-drag-handle:hover {
  opacity: 1 !important;
  color: var(--text);
}

.abac-title-meta {
  font-size: 10px;
  color: var(--muted2);
  flex: 0 0 auto;
  margin-left: auto;
}

/* ── Policy Usage List ─────────────────────────────────────────────────── */

.abac-policy-usage-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.abac-policy-usage-item {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 10px;
  background: var(--bg3);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.abac-lock-icon {
  font-size: 11px;
  flex-shrink: 0;
}
.abac-managed-label {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.7;
  margin-left: auto;
  white-space: nowrap;
}

/* ── User Picker (for user.id targeting) ───────────────────────────────── */

.abac-user-picker {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-width: 0;
}

.abac-user-picker-list {
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 4px;
}

.abac-user-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.abac-user-picker-row:hover {
  background: var(--bg4);
}

.abac-user-picker-row input[type="checkbox"] {
  accent-color: var(--accent);
}

.abac-user-picker-count {
  font-size: 10px;
  color: var(--muted2);
  padding: 2px 0;
}

/* ── Binding Badges (inherited / explicit) ─────────────────────────────── */

.abac-binding-inherited-badge {
  font-size: 9px;
  font-weight: 900;
  color: #f39c12;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(243, 156, 18, 0.12);
  border: 1px solid rgba(243, 156, 18, 0.2);
}

.abac-binding-explicit-badge {
  font-size: 9px;
  font-weight: 900;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(88, 101, 242, 0.12);
  border: 1px solid rgba(88, 101, 242, 0.2);
}

.abac-binding-inherit-note {
  font-size: 11px;
  color: var(--muted2);
  font-style: italic;
  padding: 4px 0;
}

.abac-binding-details {
  width: 100%;
  padding: 8px 0 4px 20px;
}

.abac-preview-btn {
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  flex: 0 0 auto;
}

.abac-preview-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Preview Matched Users ─────────────────────────────────────────────── */

.abac-preview-users {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.abac-preview-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
}

.abac-preview-user-row.allow {
  background: rgba(35, 165, 89, 0.06);
}

.abac-preview-user-row.deny {
  background: rgba(242, 63, 67, 0.06);
}

.abac-preview-decision {
  font-weight: 900;
  font-size: 14px;
}

.abac-preview-decision.allow {
  color: var(--ok);
}

.abac-preview-decision.deny {
  color: var(--bad);
}

/* ── Effects Editor ────────────────────────────────────────────────────── */

.abac-effects-editor {
  border: 1px solid var(--line2);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
}

.abac-effects-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  transition: background 0.1s;
}

.abac-effects-header:hover {
  background: var(--bg3);
}

.abac-effects-active-badge {
  font-size: 9px;
  font-weight: 900;
  color: var(--ok);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(35, 165, 89, 0.12);
}

.abac-effects-body {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line2);
}

.abac-effect-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.abac-effect-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.abac-effect-toggle input[type="checkbox"] {
  accent-color: var(--accent);
}

.abac-effect-fields {
  padding-left: 24px;
}

.abac-effect-label {
  font-size: 11px;
  color: var(--muted2);
}

.abac-effect-unit {
  font-size: 11px;
  color: var(--muted2);
}

.abac-effect-fields .abac-field-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

.abac-effect-fields .abac-input {
  width: auto;
}

.abac-effect-fields .abac-select {
  width: auto;
}

/* ─── Module Toggle ─────────────────────────────────────────────────────── */

.mod-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.mod-toggle-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.mod-toggle-locked {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* ─── Disabled states ───────────────────────────────────────────────────── */

.settings-nav-item.disabled {
  opacity: 0.45;
}

.abac-binding-row.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.abac-binding-error-icon {
  color: var(--error, #ed4245);
  font-size: 14px;
  margin-left: 4px;
}

/* ─── Members Settings ──────────────────────────────────────────────────── */

.mbr-settings {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mbr-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mbr-search {
  flex: 1 1;
  min-width: 200px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  outline: none;
}

.mbr-search:focus {
  border-color: var(--accent);
}

.mbr-count {
  font-size: 12px;
  color: var(--muted2);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Status filter chips */
.mbr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.mbr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.15s;
}

.mbr-chip.active {
  border-color: var(--accent);
  background: rgba(88, 101, 242, 0.1);
  color: var(--accent);
}

.mbr-chip:hover:not(.active) {
  background: var(--bg3);
  color: var(--text);
}

.mbr-chip-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  background: var(--bg4);
  padding: 0 5px;
  border-radius: 6px;
  min-width: 18px;
  text-align: center;
}

.mbr-chip.active .mbr-chip-count {
  background: rgba(88, 101, 242, 0.18);
  color: var(--accent);
}

/* Member list column */
.mbr-list-col {
  width: 260px;
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mbr-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1 1;
}

.mbr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}

.mbr-row:hover {
  background: var(--bg3);
}

.mbr-row.selected {
  background: var(--bg3);
  border-color: var(--line2);
}

/* Avatar styling now handled by Avatar component (ui/avatar.css) */

.mbr-row-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mbr-row-name {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mbr-row-meta {
  font-size: 11px;
  color: var(--muted2);
}

/* Status dot (small circle indicator) */
.mbr-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: #4a4d55;
}

.mbr-status-dot.online  { background: var(--ok); }
.mbr-status-dot.idle    { background: var(--idle); }
.mbr-status-dot.dnd     { background: var(--bad); }
.mbr-status-dot.offline { background: #4a4d55; }
.mbr-status-dot.inactive { background: #0b0c0e; }

.mbr-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(20, 24, 33, 0.76), rgba(10, 14, 21, 0.76));
}

/* ── Detail panel ──────────────────────────────────────────────────────── */

.mbr-detail {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mbr-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Detail avatar styling now handled by Avatar component (ui/avatar.css) */

.mbr-detail-info {
  flex: 1 1;
  min-width: 0;
}

.mbr-detail-name {
  font-weight: 900;
  font-size: 17px;
  margin-bottom: 4px;
}

.mbr-detail-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.mbr-detail-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: var(--bg3);
  border: 1px solid var(--line2);
  color: var(--muted);
}

.mbr-detail-status-badge.online  { color: var(--ok); border-color: rgba(35,165,89,0.3); background: rgba(35,165,89,0.08); }
.mbr-detail-status-badge.idle    { color: var(--idle); border-color: rgba(240,178,50,0.3); background: rgba(240,178,50,0.08); }
.mbr-detail-status-badge.dnd     { color: var(--bad); border-color: rgba(242,63,67,0.3); background: rgba(242,63,67,0.08); }

.mbr-detail-handle {
  font-size: 12px;
  color: var(--muted2);
  font-family: 'Consolas', 'Monaco', monospace;
}

/* Info cards row */
.mbr-detail-cards {
  display: flex;
  gap: 10px;
}

.mbr-info-card {
  flex: 1 1;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mbr-info-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.mbr-info-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* Bio */
.mbr-detail-bio {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mbr-bio-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* ── Titles section ────────────────────────────────────────────────────── */

.mbr-titles-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mbr-section-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.mbr-title-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.mbr-no-titles {
  font-size: 12px;
  color: var(--muted2);
  font-style: italic;
}

.mbr-titles-loading {
  font-size: 12px;
  color: var(--muted2);
}

.mbr-title-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
}

.mbr-title-pill-remove {
  background: none;
  border: none;
  color: inherit;
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.mbr-title-pill-remove:hover {
  opacity: 1;
}

.mbr-title-add {
  margin-top: 4px;
}

.mbr-title-add .abac-select {
  min-width: 180px;
}

/* ── Analytics link ────────────────────────────────────────────────────── */

.mbr-analytics-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line2);
}

.mbr-analytics-hint {
  font-size: 12px;
  color: var(--muted2);
}

/* ── Attributes section ────────────────────────────────────────────────── */

.mbr-attrs-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mbr-attrs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mbr-attr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg3);
  border-radius: 10px;
}

.mbr-attr-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mbr-attr-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.mbr-attr-desc {
  font-size: 11px;
  color: var(--muted2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mbr-attr-control {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.mbr-attr-input {
  width: 140px;
  height: 30px;
  font-size: 12px;
  padding: 0 8px;
}

.mbr-attr-select {
  height: 30px;
  font-size: 12px;
  min-width: 120px;
}

.mbr-attr-clear {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted2);
  font-size: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: background 0.1s, color 0.1s;
}

.mbr-attr-clear:hover {
  background: rgba(242, 63, 67, 0.15);
  color: var(--bad);
}

/* ─── Common Editor (ca-) ──────────────────────────────────────────────── */

.ca-editor-body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ca-editor-title {
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 12px;
}

.ca-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.ca-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.ca-input {
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  outline: none;
  width: 100%;
}

.ca-input:focus {
  border-color: var(--accent);
}

.ca-select {
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--text);
  padding: 0 10px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.ca-select:focus {
  border-color: var(--accent);
}

.ca-actions {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line2);
}

.ca-delete-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--bad);
  background: rgba(242, 63, 67, 0.08);
  color: var(--bad);
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.ca-delete-btn:hover {
  background: rgba(242, 63, 67, 0.18);
}

/* ─── Toggle Switch (ch-toggle) ────────────────────────────────────────── */

.ch-toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.ch-toggle-wrap input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ch-toggle-slider {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--bg4);
  border: 1px solid var(--line2);
  position: relative;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ch-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  transition: left 0.15s;
}

.ch-toggle-wrap input:checked + .ch-toggle-slider {
  background: var(--ok);
  border-color: var(--ok);
}

.ch-toggle-wrap input:checked + .ch-toggle-slider::after {
  left: 18px;
}

.ch-toggle-wrap input:disabled + .ch-toggle-slider {
  opacity: 0.5;
  cursor: default;
}

/* ─── Policy Assignment (ws-policy-) ───────────────────────────────────── */

.ws-policy-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-policy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg0);
}

.ws-policy-info {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-policy-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.ws-policy-desc {
  font-size: 11px;
  color: var(--muted2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-policy-remove {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted2);
  font-size: 12px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: background 0.1s, color 0.1s;
}

.ws-policy-remove:hover {
  background: rgba(242, 63, 67, 0.15);
  color: var(--bad);
}

.ws-policy-selector {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  max-height: 200px;
  overflow-y: auto;
}

.ws-policy-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}

.ws-policy-option:hover {
  background: var(--bg4);
}

/* ─── Toast Notifications ──────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  animation: toast-slide-in 0.2s ease-out;
  max-width: 380px;
}

.toast-item:hover {
  background: var(--bg2);
}

.toast-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  flex: 0 0 auto;
}

.toast-msg {
  flex: 1 1;
  min-width: 0;
}

.toast-info {
  border-left: 3px solid var(--accent);
}

.toast-info .toast-icon {
  background: rgba(88, 101, 242, 0.15);
  color: var(--accent);
}

.toast-success {
  border-left: 3px solid var(--ok);
}

.toast-success .toast-icon {
  background: rgba(35, 165, 89, 0.15);
  color: var(--ok);
}

.toast-error {
  border-left: 3px solid var(--bad);
}

.toast-error .toast-icon {
  background: rgba(242, 63, 67, 0.15);
  color: var(--bad);
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─── Confirm Modal ────────────────────────────────────────────────────── */

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9000;
  display: grid;
  place-items: center;
}

.confirm-modal {
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 20px;
  width: 380px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.confirm-title {
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 8px;
}

.confirm-message {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 18px;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.confirm-btn {
  height: 34px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.confirm-btn.cancel {
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
}

.confirm-btn.cancel:hover {
  background: var(--bg3);
  color: var(--text);
}

.confirm-btn.primary {
  border: none;
  background: var(--accent);
  color: #fff;
}

.confirm-btn.primary:hover {
  opacity: 0.85;
}

.confirm-btn.danger {
  border: none;
  background: var(--bad);
  color: #fff;
}

.confirm-btn.danger:hover {
  opacity: 0.85;
}

/* ─── Integrations Page ─────────────────────────────────────────────────── */

.integrations-section {
  margin-top: 24px;
  padding: 16px;
  background: var(--bg2);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.integrations-section-header {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.integrations-section-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.4;
}

/* Upload form */
.emoji-upload-form {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.emoji-upload-preview {
  flex-shrink: 0;
}

.emoji-upload-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--bg3);
}

.emoji-upload-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--bg3);
  border: 2px dashed var(--line2);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.emoji-upload-placeholder:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.emoji-upload-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1;
  min-width: 0;
}

.emoji-upload-fields .ca-input {
  width: 100%;
  max-width: 200px;
}

/* Emoji list */
.emoji-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.emoji-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.1s;
}

.emoji-list-row:hover {
  background: var(--bg3);
}

.emoji-list-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

.emoji-list-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 120px;
}

.emoji-list-by {
  font-size: 11px;
  color: var(--muted);
  flex: 1 1;
  text-align: right;
}

/* Empty state */
.integrations-empty-state {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: linear-gradient(180deg, rgba(20, 24, 33, 0.76), rgba(10, 14, 21, 0.76));
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,0.1);
}

/* ─── Audio Settings ────────────────────────────────────────────────────── */

.audio-section {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg2);
  border-radius: 12px;
  border: 1px solid var(--line);
}

.audio-section-title {
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.audio-error-banner {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(237, 66, 69, 0.15);
  border: 1px solid rgba(237, 66, 69, 0.4);
  color: #ed4245;
  font-size: 13px;
  margin-bottom: 16px;
}

.audio-permission-card {
  padding: 20px;
  background: var(--bg2);
  border-radius: 12px;
  border: 1px solid var(--line);
  margin-bottom: 16px;
  text-align: center;
}

.audio-permission-text {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Dropdowns */
.audio-select {
  width: 100%;
  height: 38px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 0 12px;
  outline: none;
  cursor: pointer;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.audio-select:hover { border-color: var(--muted); }
.audio-select:focus { border-color: var(--accent); }
.audio-select option {
  background: var(--bg1);
  color: var(--text);
}
.audio-empty-hint {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg1);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 12px;
  text-align: center;
}

/* Sliders */
.audio-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.audio-slider-label {
  font-size: 12px;
  color: var(--muted);
  min-width: 90px;
  font-weight: 600;
}
.audio-slider {
  flex: 1 1;
  height: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: var(--bg4);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.audio-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--bg1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.audio-slider-value {
  font-size: 12px;
  color: var(--muted);
  min-width: 40px;
  text-align: right;
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Mic level meter */
.audio-meter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.audio-meter-label {
  font-size: 12px;
  color: var(--muted);
  min-width: 90px;
  font-weight: 600;
}
.audio-meter-track {
  flex: 1 1;
  height: 8px;
  background: var(--bg4);
  border-radius: 4px;
  overflow: hidden;
}
.audio-meter-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #43b581 0%, #43b581 60%, #faa61a 80%, #ed4245 100%);
  transition: width 0.05s linear;
  min-width: 0;
}

/* Buttons */
.audio-btn-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.audio-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.audio-btn:hover {
  background: var(--bg4);
  border-color: var(--muted);
}
.audio-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.audio-btn.primary:hover {
  filter: brightness(1.1);
}
.audio-btn.danger {
  background: rgba(237, 66, 69, 0.2);
  border-color: rgba(237, 66, 69, 0.5);
  color: #ed4245;
}
.audio-btn.danger:hover {
  background: rgba(237, 66, 69, 0.3);
}
.audio-btn.small {
  height: 28px;
  padding: 0 12px;
  font-size: 11px;
}

/* Toggle rows */
.audio-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.audio-toggle-row:last-child {
  border-bottom: none;
}
.audio-toggle-row input[type="checkbox"] {
  display: none;
}
.audio-toggle-label {
  flex: 1 1;
}
.audio-toggle-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.audio-toggle-desc {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Hardware info grid */
.audio-hw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
}
.audio-hw-card {
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.audio-hw-count {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}
.audio-hw-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
}

/* ─── Keybind Settings ──────────────────────────────────────────────────── */

.keybind-settings {
  max-width: 640px;
}

.kb-section {
  margin-bottom: 24px;
}

.kb-section-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}

.kb-section-desc {
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 12px;
  line-height: 1.4;
}

.kb-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kb-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  min-width: 60px;
}

/* ── Keybind Recorder Button ──────────────────────────────────────────── */

.kb-recorder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  color: var(--muted2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.kb-recorder:hover {
  border-color: var(--accent);
  background: var(--bg4);
}

.kb-recorder.recording {
  border-color: var(--accent);
  background: rgba(88, 101, 242, 0.12);
  color: var(--accent);
  animation: kb-pulse 1s ease-in-out infinite;
}

.kb-recorder.has-value {
  color: var(--text);
  background: var(--bg4);
}

@keyframes kb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Whisper Slots ────────────────────────────────────────────────────── */

.kb-whisper-slot {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

.kb-slot-header {
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.kb-slot-fields {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.kb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  flex: 1 1;
}

.kb-select {
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}

.kb-select:hover {
  border-color: var(--accent);
}

.kb-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.kb-conflict {
  font-size: 11px;
  color: #ed4245;
  font-weight: 600;
}

/* ── Shortcut Row (action | style | key | reset) ─────────────────────── */

.kb-shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kb-shortcut-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.1s;
}

.kb-shortcut-row:hover {
  background: var(--bg3);
}

.kb-shortcut-label {
  flex: 1 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kb-mode-select {
  width: 120px;
  flex-shrink: 0;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}

.kb-mode-select:hover {
  border-color: var(--accent);
}

.kb-reset-single {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.kb-reset-single:hover {
  color: var(--accent);
  background: rgba(88, 101, 242, 0.1);
}

.kb-reset-single.hidden {
  visibility: hidden;
}

.kb-section-subtitle {
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 16px;
  margin-bottom: 4px;
}

.kb-whisper-section {
  margin-top: 12px;
}

/* ── Reset Button ─────────────────────────────────────────────────────── */

.kb-reset-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: #ed4245;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.kb-reset-btn:hover {
  background: rgba(237, 66, 69, 0.1);
  border-color: #ed4245;
}

/* ─── License Page ─────────────────────────────────────────────────────── */

.license-card {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 16px;
}

.license-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.license-operator {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.license-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.license-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.license-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.license-label {
  color: var(--muted);
  font-weight: 600;
  min-width: 120px;
  flex-shrink: 0;
}

.license-user-bar {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 160px;
  height: 16px;
  background: var(--bg1);
  border-radius: 4px;
  overflow: hidden;
}

.license-user-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s;
}

.license-user-text {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  padding: 0 6px;
}

.license-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.license-feature-chip {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg1);
  border: 1px solid var(--line2);
  color: var(--text);
}

.license-jwt-input {
  font-family: monospace;
  font-size: 11px;
  resize: vertical;
}

.license-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.license-renew-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.license-result {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  font-size: 12px;
  color: var(--text);
}

/* ─── Identity & Trust Page ────────────────────────────────────────────── */

.identity-card {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 14px;
}

.identity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.identity-row:last-child {
  border-bottom: none;
}

.identity-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  min-width: 140px;
  flex-shrink: 0;
}

.identity-value {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
}

.identity-copy-btn {
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.identity-copy-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.identity-wellknown-preview {
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  font-size: 11px;
  font-family: monospace;
  color: var(--muted);
  overflow-x: auto;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre;
  margin: 0;
}

.identity-policy-table {
  margin-bottom: 12px;
}

.identity-policy-header {
  display: flex;
  gap: 12px;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
  border-bottom: 1px solid var(--line);
}

.identity-policy-header span:first-child {
  flex: 1 1;
}

.identity-policy-header span:last-child {
  width: 180px;
  flex-shrink: 0;
}

.identity-policy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.identity-policy-row:last-child {
  border-bottom: none;
}

.identity-policy-action {
  flex: 1 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}

.identity-policy-select {
  width: 180px;
  flex-shrink: 0;
}

.mono {
  font-family: monospace;
}

/* ─── Security & Encryption Page ───────────────────────────────────────── */

.sec-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.sec-tab {
  padding: 8px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.sec-tab:hover {
  color: var(--text);
}

.sec-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* SSO Provider Cards */
.sso-provider-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.sso-provider-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 10px;
}

.sso-provider-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sso-provider-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.sso-provider-actions {
  display: flex;
  gap: 6px;
}

/* SSO Modal */
.sso-modal {
  width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}

.sso-modal-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--text);
}

.sso-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.sso-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sso-exclusive-warn {
  font-size: 11px;
  color: var(--bad);
  font-weight: 600;
}

/* GRL Table */
.grl-table {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.grl-header-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px 1fr 110px;
  grid-gap: 8px;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
  border-bottom: 1px solid var(--line);
}

.grl-row {
  display: grid;
  grid-template-columns: 80px 1fr 80px 1fr 110px;
  grid-gap: 8px;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.grl-row:last-child {
  border-bottom: none;
}

.grl-type-badge {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: var(--bg4);
  border: 1px solid var(--line2);
  text-transform: capitalize;
}

.grl-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ─── Metrics & Analytics Page ─────────────────────────────────────────── */

.metrics-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.metrics-auto-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

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

.metrics-card {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.metrics-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted2);
  margin-bottom: 4px;
}

.metrics-card-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.metrics-card-value.large {
  font-size: 24px;
}

/* ─── Push Notifications (Integrations Page) ───────────────────────────── */

.push-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.push-action-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ─── Module Settings Pages ────────────────────────────────────────────── */

.mod-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg2);
  border-radius: 10px;
  border: 1px solid var(--line);
}

.mod-toggle-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.mod-toggle-locked {
  font-size: 11px;
  color: var(--muted2);
  font-weight: 600;
}

.mod-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.mod-category-section {
  margin-bottom: 16px;
}

.mod-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
}

.mod-category-name {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted2);
}

.mod-category-count {
  font-size: 10px;
  color: var(--muted2);
  margin-left: auto;
}

.mod-item-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mod-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}

.mod-item-row:hover {
  background: var(--bg3);
}

.mod-item-row.selected {
  background: var(--bg3);
  border: 1px solid var(--line2);
}

.mod-item-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.mod-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.mod-item-type {
  font-size: 11px;
  color: var(--muted2);
  text-transform: capitalize;
}

.mod-item-meta {
  font-size: 11px;
  color: var(--muted2);
}

.mod-project-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* File grid view */
.mod-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.mod-file-card {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  position: relative;
}

.mod-file-card .ws-policy-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.mod-file-card:hover .ws-policy-remove {
  opacity: 1;
}

.mod-file-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.mod-file-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mod-file-size {
  font-size: 10px;
  color: var(--muted2);
}

/* Module Store */
.mod-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.mod-store-card {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mod-store-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mod-store-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.mod-store-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.mod-store-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

/* ── Notification Sounds Panel ──────────────────────────────────────────── */

.notif-types-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.notif-type-row {
  background: var(--bg3);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-type-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-type-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.notif-type-desc {
  font-size: 11px;
  color: var(--muted);
}

.notif-type-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-type-sound-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-type-select-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  min-width: 44px;
}

.notif-type-select {
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  cursor: pointer;
  min-width: 90px;
}

.notif-type-select:focus { border-color: var(--accent); }

.notif-preview-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}

.notif-preview-btn:hover { color: var(--text); border-color: var(--accent); }
.notif-preview-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.notif-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-custom-filename {
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.notif-custom-filename.muted { color: var(--muted2); }

.notif-upload-btn,
.notif-remove-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  transition: opacity 0.12s;
}

.notif-upload-btn {
  background: var(--accent);
  color: #fff;
}

.notif-remove-btn {
  background: var(--bg4);
  color: var(--muted);
}

.notif-upload-btn:hover,
.notif-remove-btn:hover { opacity: 0.85; }

.notif-volume-row {
  padding-top: 2px;
}

/* ── Emoji Management ──────────────────────────────────────────────────────── */

.emoji-upload-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.emoji-upload-preview {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.emoji-upload-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.emoji-upload-placeholder {
  color: var(--muted);
  font-size: 20px;
}

.emoji-upload-pick {
  padding: 6px 12px;
  background: var(--bg4);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}

.emoji-upload-pick:hover { background: var(--bg3); }

.emoji-upload-name {
  flex: 1 1;
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-family: monospace;
}

.emoji-upload-btn {
  padding: 8px 16px;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.emoji-upload-btn:disabled { opacity: 0.5; cursor: default; }

.emoji-grid-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.emoji-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.emoji-manage-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.emoji-manage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.1s;
}

.emoji-manage-item:hover { background: var(--bg3); }

.emoji-manage-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.emoji-manage-name {
  font-family: monospace;
  font-size: 13px;
  color: var(--text);
  min-width: 120px;
}

.emoji-manage-by {
  flex: 1 1;
  font-size: 11px;
  color: var(--muted);
}

.emoji-manage-delete {
  padding: 4px 10px;
  background: none;
  border: 1px solid var(--bad);
  border-radius: 4px;
  color: var(--bad);
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.emoji-manage-item:hover .emoji-manage-delete { opacity: 1; }
.emoji-manage-delete:hover { background: var(--bad); color: #fff; }

/* ─── Appearance Settings ───────────────────────────────────────────────── */

.appearance-settings {
  max-width: 600px;
}

.appear-section {
  margin-bottom: 28px;
}

.appear-section-title {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted2);
  margin-bottom: 10px;
}

.appear-theme-grid {
  display: flex;
  gap: 12px;
}

.appear-theme-card {
  flex: 1 1;
  background: var(--bg3);
  border: 2px solid var(--line2);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.appear-theme-card:hover {
  border-color: var(--muted);
}

.appear-theme-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.appear-theme-preview {
  display: flex;
  height: 72px;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.appear-preview-sidebar {
  width: 28%;
  height: 100%;
}

.appear-preview-main {
  flex: 1 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.appear-preview-line {
  height: 6px;
  border-radius: 3px;
  width: 80%;
}

.appear-preview-line.short {
  width: 50%;
}

.appear-preview-accent {
  height: 6px;
  border-radius: 3px;
  width: 30%;
}

.appear-theme-label {
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

/* Font scale */
.appear-font-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.appear-font-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  background: var(--bg3);
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.appear-font-option:hover {
  background: var(--bg4);
  color: var(--text);
}

.appear-font-option.active {
  border-color: var(--accent);
  color: var(--text);
}

.appear-font-option input[type="radio"] {
  accent-color: var(--accent);
}

/* Preview */
.appear-preview-chat {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.appear-preview-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.appear-preview-msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--bg4);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}

.appear-preview-msg-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.appear-preview-msg-author {
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
}

.appear-preview-msg-text {
  font-size: var(--chat-font-size, 14px);
  color: var(--muted);
  line-height: 1.45;
}

/* ─── Auto-Moderation ────────────────────────────────────────────────────── */

.automod-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}

.automod-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  transition: color 0.12s;
}

.automod-tab:hover { color: var(--text); }
.automod-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.automod-rules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.automod-rule {
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--bg2);
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}

.automod-rule.enabled { opacity: 1; }

.automod-rule-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.12s;
}

.automod-rule-header:hover { background: var(--bg3); }

.automod-rule-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.automod-rule-info { flex: 1 1; min-width: 0; }

.automod-rule-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.automod-rule-desc {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
}

.automod-rule-body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.automod-field { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.automod-field:first-child { margin-top: 12px; }

.automod-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.automod-field-row {
  display: flex;
  gap: 12px;
}

.automod-field-row .automod-field { flex: 1 1; }

.automod-select,
.automod-input {
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
}

.automod-select:focus,
.automod-input:focus { border-color: var(--accent); }

.automod-textarea {
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: var(--bg4);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: 'Consolas', 'Monaco', monospace;
  outline: none;
  resize: vertical;
  width: 100%;
  min-height: 60px;
}

.automod-textarea:focus { border-color: var(--accent); }

.automod-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}

/* ── Log table ─────────────────────── */

.automod-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.automod-log-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
}

.automod-log-table td {
  padding: 8px 10px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.automod-log-time { color: var(--muted); white-space: nowrap; }
.automod-log-match { color: var(--muted2); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.automod-action-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.automod-action-block { background: rgba(242, 63, 67, 0.15); color: var(--bad); }
.automod-action-flag { background: rgba(240, 178, 50, 0.15); color: var(--idle); }
.automod-action-delete { background: rgba(242, 63, 67, 0.1); color: var(--bad); }
.automod-action-timeout { background: rgba(88, 101, 242, 0.15); color: var(--accent); }

/* ─── Webhooks ───────────────────────────────────────────────────────────── */

.webhook-create-form {
  padding: 12px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--bg2);
  margin-bottom: 12px;
}

.webhook-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.webhook-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: var(--bg2);
  transition: opacity 0.15s;
}

.webhook-row.disabled { opacity: 0.5; }

.webhook-row-info { flex: 1 1; min-width: 0; }

.webhook-row-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.webhook-row-detail {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webhook-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.webhook-type-inbound { background: rgba(35, 165, 89, 0.15); color: var(--ok); }
.webhook-type-outbound { background: rgba(88, 101, 242, 0.15); color: var(--accent); }

/* ── Form Condition Builder ─────────────────────────────────────────────── */

.form-condition-box {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--line2);
  border-radius: 8px;
  background: var(--bg3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-condition-logic {
  margin-bottom: 2px;
}

.form-condition-rule {
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-condition-add {
  align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════
   Event Attendance Analytics
   ═══════════════════════════════════════════════════════ */

.evt-analytics-section {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.evt-analytics-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.evt-analytics-period-selector {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.evt-analytics-period-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.evt-analytics-period-btn:hover {
  background: var(--bg3);
  color: var(--text);
}

.evt-analytics-period-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.evt-analytics-export-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.evt-analytics-export-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.evt-analytics-drilldown-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.evt-analytics-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg3);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.evt-analytics-back-btn:hover {
  color: var(--text);
  background: var(--bg4);
}

/* Summary Cards */
.evt-analytics-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 16px;
}

.evt-analytics-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.evt-analytics-card-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.evt-analytics-card-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 600;
}

/* Trend Chart */
.evt-analytics-trend {
  background: var(--bg2);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.evt-analytics-trend-bar-wrap {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 8px;
}

.evt-analytics-trend-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
  min-height: 4px;
}

/* Sub-tabs */
.evt-analytics-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.evt-analytics-tab {
  flex: 1 1;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}

.evt-analytics-tab:hover { color: var(--text); }
.evt-analytics-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Table */
.evt-analytics-table {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.evt-analytics-table-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.evt-analytics-table-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
  transition: background 0.15s;
}

.evt-analytics-table-row:nth-child(odd) {
  background: rgba(255, 255, 255, 0.015);
}

.evt-analytics-table-row.clickable {
  cursor: pointer;
}

.evt-analytics-table-row.clickable:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Columns */
.evt-analytics-col-name {
  flex: 2 1;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
}

.evt-analytics-col-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evt-analytics-col-rate {
  flex: 1.5 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.evt-analytics-col-count {
  flex: 0.6 1;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
}

.evt-analytics-col-date {
  flex: 1 1;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* Rate bar */
.evt-analytics-rate-bar {
  flex: 1 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.evt-analytics-rate-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  min-width: 2px;
}

/* Status badge */
.evt-analytics-status-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

/* ─── Midnight Field Aliases ───────────────────────────────────────────── */

.invite-field-input,
.color-picker-hex-input,
.color-picker-rgb-input,
.fed-peer-name-input,
.abac-input,
.abac-textarea,
.abac-select,
.mbr-attr-input,
.ca-input,
.ca-select,
.license-jwt-input,
.automod-input,
.automod-select,
.automod-textarea {
  background: var(--bg0);
  border-color: var(--line2);
  color: var(--text);
  outline: none;
  box-shadow: none;
}

.invite-field-input:focus,
.color-picker-hex-input:focus,
.color-picker-rgb-input:focus,
.fed-peer-name-input:focus,
.abac-input:focus,
.abac-textarea:focus,
.abac-select:focus,
.mbr-attr-input:focus,
.ca-input:focus,
.ca-select:focus,
.license-jwt-input:focus,
.automod-input:focus,
.automod-select:focus,
.automod-textarea:focus {
  border-color: var(--accent);
  box-shadow: none;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/settings/server/rules-editor.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
/* ── Rules Editor Modal ────────────────────────────────────────────────────── */

.rules-editor-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(77, 107, 202, 0.15), transparent 42%),
    rgba(4, 6, 11, 0.8);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.rules-editor-modal {
  width: calc(100vw - 120px);
  height: calc(100vh - 120px);
  max-width: 900px;
  background:
    linear-gradient(180deg, rgba(24, 30, 41, 0.98), rgba(11, 15, 23, 0.98));
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 30px 84px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── Header ────────────────────────────────────────────────────────────────── */

.rules-editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(46, 69, 133, 0.18), rgba(46, 69, 133, 0.02)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.rules-editor-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.02em;
  color: var(--text);
}

.rules-editor-tabs {
  display: flex;
  gap: 0;
}

.rules-editor-tab {
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted2);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.rules-editor-tab:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.rules-editor-tab.active {
  color: #fff;
  border-color: rgba(132, 148, 255, 0.45);
  background:
    linear-gradient(180deg, rgba(125, 158, 255, 0.9), rgba(88, 101, 242, 0.9));
}

/* ── Body ──────────────────────────────────────────────────────────────────── */

.rules-editor-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 12%);
}

.rules-editor-edit-pane {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Rich Markdown Editor ──────────────────────────────────────────────────── */

.rules-rich-editor {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(27, 33, 43, 0.96), rgba(15, 19, 27, 0.96));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.rules-rich-editor:focus-within {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(88, 101, 242, 0.14),
    0 18px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.rules-rich-editor-wrap {
  position: relative;
  min-height: 240px;
  max-height: 400px;
  overflow-y: auto;
  padding: 0 16px;
}

.rules-rich-editor-wrap .sypher-mirror {
  padding: 12px 0;
}

.rules-rich-editor-wrap .rules-editable {
  padding: 12px 0;
  min-height: 240px;
}

.rules-rich-editor .input-tray {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
  background: rgba(7, 10, 16, 0.72);
}

.rules-editor-preview-pane {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Embeds section ────────────────────────────────────────────────────────── */

.rules-editor-embeds-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rules-editor-embeds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rules-editor-embeds-title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
}

/* ── Embed Builder (form card) ──────────────────────────────────────────────── */

.embed-builder {
  background:
    linear-gradient(180deg, rgba(29, 35, 46, 0.96), rgba(16, 20, 29, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--accent);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.embed-builder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.embed-builder-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
  transition: border-color 0.12s;
}

.embed-builder-color-swatch:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.embed-builder-title-input {
  flex: 1 1;
}

.embed-builder-remove {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted2);
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: background 0.12s, color 0.12s;
}

.embed-builder-remove:hover {
  background: rgba(242, 63, 67, 0.15);
  color: var(--bad);
}

.embed-builder-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.embed-builder-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.embed-builder-inline-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

.embed-builder-inline-check input[type='checkbox'] {
  accent-color: var(--accent);
}

/* ── Rules preview summary (used in Overview settings page) ───────────────── */

.rules-preview-summary {
  font-size: 13px;
  color: var(--muted);
  background:
    linear-gradient(180deg, rgba(24, 30, 41, 0.96), rgba(13, 17, 25, 0.96));
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: pre-wrap;
  max-height: 80px;
  overflow: hidden;
}

.rules-embed-count {
  display: inline-block;
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
  margin-left: 6px;
}

@media (max-width: 860px) {
  .rules-editor-modal {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    border-radius: 20px;
  }

  .rules-editor-body {
    padding: 18px;
  }

  .rules-editor-header {
    padding: 16px 18px;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/settings/server/analytics/analytics.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
/* ── Analytics UI Styles ──────────────────────────────────────────────────── */

/* ── Section titles ──────────────────────────────────────────────────────── */

.an-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted2);
  margin-bottom: 12px;
}

.an-section-subtitle {
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 8px;
  line-height: 1.5;
}

.an-section-meta {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 12px;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.an-card {
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

/* ── Stat cards row ──────────────────────────────────────────────────────── */

.an-stat-row {
  display: flex;
  gap: 8px;
}

.an-stat-card {
  flex: 1 1;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  min-width: 0;
}

.an-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted2);
  margin-bottom: 2px;
}

.an-stat-sublabel {
  font-size: 9px;
  color: var(--muted2);
  opacity: 0.7;
  margin-bottom: 6px;
}

.an-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.an-stat-context {
  font-size: 11px;
  margin-top: 4px;
}

/* ── Two-column layout ───────────────────────────────────────────────────── */

.an-two-col {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
}

.an-col-left {
  flex: 55 1;
  min-width: 0;
}

.an-col-right {
  flex: 45 1;
  min-width: 0;
}

/* ── Presence Distribution ───────────────────────────────────────────────── */

.an-presence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0;
  gap: 0;
  margin-bottom: 12px;
}

.an-presence-col {
  text-align: center;
  padding: 8px 4px;
}

.an-presence-count {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.an-presence-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.an-presence-pct {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
}

.an-presence-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg1);
}

.an-presence-bar-seg {
  transition: width 0.3s;
}

/* ── Dots ─────────────────────────────────────────────────────────────────── */

.an-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Member Flow ─────────────────────────────────────────────────────────── */

.an-flow-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.an-flow-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
}

.an-flow-label {
  font-size: 13px;
  color: var(--muted);
}

.an-flow-value {
  font-size: 16px;
  font-weight: 600;
}

.an-flow-divider {
  height: 1px;
  background: var(--line2);
  margin: 4px 0;
}

/* ── Bar lists (channels) ────────────────────────────────────────────────── */

.an-bar-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.an-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.an-bar-name {
  width: 140px;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.an-bar-track {
  flex: 1 1;
  height: 18px;
  background: var(--bg1);
  border-radius: 4px;
  overflow: hidden;
}

.an-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s;
}

.an-bar-count {
  font-size: 12px;
  color: var(--muted);
  min-width: 48px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Badge ────────────────────────────────────────────────────────────────── */

.an-badge-muted {
  font-size: 10px;
  color: var(--muted2);
  margin-left: 6px;
  font-weight: 400;
}

.an-badge-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 10px;
  background: var(--bg1);
  border-radius: 12px;
  white-space: nowrap;
}

/* ── Source list (join sources) ───────────────────────────────────────────── */

.an-source-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.an-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.an-source-name {
  flex: 1 1;
  font-size: 13px;
  color: var(--text);
}

.an-source-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 32px;
  text-align: right;
}

.an-source-pct {
  font-size: 11px;
  color: var(--muted);
  min-width: 36px;
  text-align: right;
}

/* ── Legend ────────────────────────────────────────────────────────────────── */

.an-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  padding-top: 8px;
}

.an-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}

.an-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

.an-legend-line {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

/* ── Heatmap ─────────────────────────────────────────────────────────────── */

.an-heatmap {
  display: inline-block;
}

.an-heatmap-header {
  display: flex;
  margin-bottom: 2px;
}

.an-heatmap-row {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

.an-heatmap-day-label {
  width: 36px;
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  padding-right: 6px;
  flex-shrink: 0;
}

.an-heatmap-hour-label {
  width: 18px;
  margin-right: 2px;
  font-size: 9px;
  text-align: center;
  color: var(--muted2);
}

.an-heatmap-cell {
  width: 18px;
  height: 18px;
  margin-right: 2px;
  border-radius: 3px;
  cursor: default;
  transition: opacity 0.15s;
}

.an-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  margin-left: 36px;
}

.an-heatmap-legend-label {
  font-size: 10px;
  color: var(--muted2);
  margin: 0 4px;
}

.an-heatmap-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */

.an-tooltip {
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text);
}

.an-tooltip-label {
  margin-bottom: 4px;
  color: var(--muted);
}

.an-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.an-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

.an-table {
  width: 100%;
  border-collapse: collapse;
}

.an-th {
  padding: 8px 10px;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
  white-space: nowrap;
  border-bottom: 1px solid var(--line2);
}

.an-th-left {
  text-align: left;
}

.an-th-sort {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: color 0.15s;
}

.an-th-sort:hover {
  color: var(--muted);
}

.an-th-active {
  color: var(--accent);
}

.an-sort-arrow {
  margin-left: 3px;
  font-size: 10px;
}

.an-tr {
  transition: background 0.12s;
}

.an-tr:hover {
  background: var(--bg2);
}

.an-td {
  padding: 6px 10px;
  font-size: 13px;
  text-align: right;
  color: var(--text);
  border-bottom: 1px solid var(--line1);
}

.an-td-left {
  text-align: left;
}

.an-td-member {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.an-td-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.an-td-num {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.an-td-muted {
  color: var(--muted);
  font-size: 11px;
}

.an-td-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px;
}

/* ── Avatars ─────────────────────────────────────────────────────────────── */

.an-avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}

.an-avatar-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.an-avatar-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}

.an-avatar-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Reason badges ───────────────────────────────────────────────────────── */

.an-reason-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Drilldown layout ────────────────────────────────────────────────────── */

.an-drilldown-layout {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.an-drilldown-left {
  width: 280px;
  flex-shrink: 0;
}

.an-drilldown-right {
  flex: 1 1;
  min-width: 300px;
}

/* ── Dropdown selector ───────────────────────────────────────────────────── */

.an-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.an-dropdown-arrow {
  color: var(--muted);
  font-size: 12px;
}

.an-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 6px;
  z-index: var(--z-dropdown);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.an-dropdown-search {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--line2);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.an-dropdown-list {
  max-height: 200px;
  overflow-y: auto;
}

.an-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.12s;
}

.an-dropdown-item:hover {
  background: var(--bg2);
}

.an-dropdown-item-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left: 3px solid var(--accent);
}

.an-dropdown-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* ── Member card in drilldown ────────────────────────────────────────────── */

.an-member-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.an-member-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.an-member-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.an-member-stat-label {
  color: var(--muted);
}

.an-member-stat-value {
  color: var(--text);
  font-weight: 600;
}

.an-member-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line2);
}

.an-title-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Activity score bar ──────────────────────────────────────────────────── */

.an-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.an-score-track {
  flex: 1 1;
  height: 20px;
  background: var(--bg1);
  border-radius: 10px;
  overflow: hidden;
}

.an-score-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.4s ease-out;
}

.an-score-value {
  font-size: 16px;
  font-weight: 700;
  min-width: 50px;
  text-align: right;
}

.an-score-label {
  font-size: 12px;
  color: var(--muted);
}

/* ── Channel stats row ───────────────────────────────────────────────────── */

.an-channel-stats-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--line2);
  font-size: 12px;
  color: var(--muted);
}

.an-channel-stats-row strong {
  color: var(--text);
}

/* ── Select input ────────────────────────────────────────────────────────── */

.an-select {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  outline: none;
  flex: 1 1;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */

.an-input {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  outline: none;
  width: 100%;
}

.an-input-flex {
  flex: 2 1;
}

.an-input-sm {
  width: 70px;
  flex: none;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

.an-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.an-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted2);
}

/* ── Condition rows ──────────────────────────────────────────────────────── */

.an-condition-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.an-btn-outline {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s;
}

.an-btn-outline:hover {
  background: var(--bg2);
}

.an-btn-danger {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: color-mix(in srgb, var(--bad) 15%, transparent);
  color: var(--bad);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}

.an-btn-danger:hover {
  background: color-mix(in srgb, var(--bad) 25%, transparent);
}

.an-btn-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.an-btn-dashed {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px dashed var(--muted2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  margin-top: 4px;
}

.an-btn-dashed:hover {
  border-color: var(--muted);
  color: var(--text);
}

.an-btn-icon-danger {
  padding: 4px 8px;
  border-radius: 4px;
  border: none;
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  color: var(--bad);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}

/* ── Rule cards ──────────────────────────────────────────────────────────── */

.an-rule-card {
  display: flex;
  gap: 12px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 8px;
}

.an-rule-dot {
  width: 4px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
}

.an-rule-body {
  flex: 1 1;
  min-width: 0;
}

.an-rule-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.an-rule-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1 1;
}

.an-rule-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.an-rule-pill {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.12s;
}

.an-rule-pill-active {
  background: var(--accent);
  color: #fff;
}

.an-rule-pill-inactive {
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--muted);
}

.an-rule-delete {
  padding: 2px 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.12s;
  line-height: 1;
}

.an-rule-delete:hover {
  background: color-mix(in srgb, var(--bad) 15%, transparent);
  color: var(--bad);
}

.an-rule-conditions {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.6;
}

.an-rule-conditions strong {
  color: var(--text);
  font-weight: 600;
}

.an-rule-logic {
  color: var(--accent);
  font-weight: 600;
}

.an-rule-matches {
  font-size: 11px;
  color: var(--muted2);
}

/* ── Panel header (StatTitles, Pruning) ──────────────────────────────────── */

.an-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* ── Toggle row ──────────────────────────────────────────────────────────── */

.an-toggle-row {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
}

.an-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

/* ── Pruning ─────────────────────────────────────────────────────────────── */

.an-inline-num {
  color: var(--text);
}

.an-pruning-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.an-pruning-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.an-pruning-field label {
  font-size: 11px;
  color: var(--muted);
}

.an-pruning-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.an-pruning-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

/* ── Modal ────────────────────────────────────────────────────────────────── */

.an-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--z-modal);
}

.an-modal {
  background: var(--bg1);
  border-radius: 8px;
  padding: 24px;
  width: 520px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.an-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.an-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ── Preview / error messages ────────────────────────────────────────────── */

.an-preview-result {
  padding: 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 20%, transparent);
  font-size: 12px;
  color: var(--text);
  margin-bottom: 12px;
}

.an-error-msg {
  padding: 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--bad) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 20%, transparent);
  font-size: 12px;
  color: var(--bad);
  margin-bottom: 12px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.an-empty-state {
  padding: 48px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */

@keyframes an-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.an-skeleton {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--bg2) 25%,
    var(--bg3) 50%,
    var(--bg2) 75%
  );
  background-size: 200% 100%;
  animation: an-shimmer 1.5s infinite ease-in-out;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/modules/inventory/settings/inventory-settings.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════════
   Inventory Settings Styles
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Layout ────────────────────────────────────────────────────────────────── */

.inv-settings-layout {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* ── Sidebar Nav ───────────────────────────────────────────────────────────── */

.inv-settings-nav {
  width: 180px;
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 12px 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.inv-settings-nav-title {
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 8px 12px 6px;
}

.inv-settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  margin: 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: transparent;
  width: calc(100% - 12px);
  text-align: left;
  transition: background 0.1s, color 0.1s;
}

.inv-settings-nav-item:hover {
  background: var(--bg3);
  color: var(--text);
}

.inv-settings-nav-item.active {
  background: var(--bg3);
  color: var(--text);
  font-weight: 700;
}

/* ── Content Area ──────────────────────────────────────────────────────────── */

.inv-settings-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 0 4px 20px 20px;
  min-width: 0;
}

/* ── Stats Cards ───────────────────────────────────────────────────────────── */

.inv-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 20px;
}

.inv-stats-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inv-stats-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}

.inv-stats-card-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.inv-stats-card.status-available .inv-stats-card-value { color: var(--ok); }
.inv-stats-card.status-issued .inv-stats-card-value { color: var(--accent); }
.inv-stats-card.status-reserved .inv-stats-card-value { color: var(--warn); }
.inv-stats-card.status-consumed .inv-stats-card-value { color: var(--muted); }
.inv-stats-card.status-damaged .inv-stats-card-value { color: var(--bad); }
.inv-stats-card.status-lost .inv-stats-card-value { color: var(--bad); }
.inv-stats-card.status-total .inv-stats-card-value { color: var(--text); }

/* ── Table ─────────────────────────────────────────────────────────────────── */

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.inv-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.inv-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

.inv-table td {
  padding: 8px 10px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.inv-table tbody tr:hover {
  background: var(--bg3);
}

.inv-table .inv-table-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.inv-table-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  transition: color 0.15s, border-color 0.15s;
}

.inv-table-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.inv-table-btn.danger:hover {
  color: var(--bad);
  border-color: var(--bad);
}

/* ── Badge ─────────────────────────────────────────────────────────────────── */

.inv-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.inv-badge-available { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.inv-badge-issued { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.inv-badge-reserved { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.inv-badge-consumed { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
.inv-badge-damaged { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
.inv-badge-lost { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }
.inv-badge-kit { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.inv-badge-ship_loadout { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.inv-badge-resupply { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.inv-badge-event_staging { background: color-mix(in srgb, #e879f9 20%, transparent); color: #e879f9; }
.inv-badge-dynamic { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.inv-badge-static { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
.inv-badge-open { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.inv-badge-in_progress { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.inv-badge-completed { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.inv-badge-cancelled { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
.inv-badge-active { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.inv-badge-inactive { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
.inv-badge-current { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }

/* ── Tree View ─────────────────────────────────────────────────────────────── */

.inv-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.1s;
}

.inv-tree-node:hover {
  background: var(--bg3);
}

.inv-tree-indent {
  display: inline-block;
  width: 20px;
  flex-shrink: 0;
}

.inv-tree-toggle {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  width: 16px;
  flex-shrink: 0;
}

.inv-tree-toggle:hover {
  color: var(--text);
}

.inv-tree-name {
  flex: 1 1;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.inv-tree-type {
  font-size: 10px;
  color: var(--muted);
  padding: 1px 6px;
  background: var(--bg3);
  border-radius: 3px;
}

.inv-tree-count {
  font-size: 11px;
  color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.inv-tree-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.inv-tree-node:hover .inv-tree-actions {
  opacity: 1;
}

/* ── Form Styles ───────────────────────────────────────────────────────────── */

.inv-form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.inv-form-row > * {
  flex: 1 1;
}

.inv-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.inv-form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.inv-form-input {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  width: 100%;
}

.inv-form-input:focus {
  outline: none;
  border-color: var(--accent);
}

.inv-form-input::placeholder {
  color: var(--muted);
}

textarea.inv-form-input {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

select.inv-form-input {
  cursor: pointer;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}

/* ── Form Card (inline form with background) ──────────────────────────────── */

.inv-form-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}

.inv-form-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.inv-form-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* ── Search Bar ────────────────────────────────────────────────────────────── */

.inv-search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.inv-search-bar .inv-form-input {
  flex: 1 1;
}

/* ── Toolbar Row ───────────────────────────────────────────────────────────── */

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

.inv-toolbar-spacer {
  flex: 1 1;
}

/* ── Tabs ──────────────────────────────────────────────────────────────────── */

.inv-settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.inv-settings-tab {
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.inv-settings-tab:hover {
  color: var(--text);
}

.inv-settings-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ── Import Preview ────────────────────────────────────────────────────────── */

.inv-import-preview {
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 12px 0;
}

.inv-import-preview .inv-table {
  font-size: 12px;
}

.inv-import-preview .inv-table td,
.inv-import-preview .inv-table th {
  padding: 6px 8px;
}

.inv-import-results {
  padding: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text);
}

.inv-import-results-success {
  color: var(--ok);
  font-weight: 600;
}

.inv-import-results-error {
  color: var(--bad);
  font-weight: 600;
}

.inv-import-textarea {
  width: 100%;
  min-height: 120px;
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  font-size: 12px;
  font-family: 'Consolas', 'Monaco', monospace;
  resize: vertical;
}

.inv-import-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Progress Bar ──────────────────────────────────────────────────────────── */

.inv-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg3);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}

.inv-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.inv-progress-fill.complete {
  background: var(--ok);
}

.inv-progress-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ── Feed / Transaction List ───────────────────────────────────────────────── */

.inv-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inv-feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg3);
  border-radius: 6px;
  font-size: 12px;
}

.inv-feed-action {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.inv-feed-action.action-issue { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.inv-feed-action.action-return { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.inv-feed-action.action-consume { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.inv-feed-action.action-transfer { background: color-mix(in srgb, #e879f9 20%, transparent); color: #e879f9; }
.inv-feed-action.action-adjust { background: color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
.inv-feed-action.action-add { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.inv-feed-action.action-remove { background: color-mix(in srgb, var(--bad) 20%, transparent); color: var(--bad); }

.inv-feed-detail {
  flex: 1 1;
  color: var(--text);
}

.inv-feed-detail .inv-feed-item-name {
  font-weight: 600;
}

.inv-feed-time {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Expandable List Items ─────────────────────────────────────────────────── */

.inv-expand-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.inv-expand-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.inv-expand-header:hover {
  background: var(--bg3);
}

.inv-expand-toggle {
  color: var(--muted);
  font-size: 11px;
  flex-shrink: 0;
  width: 16px;
}

.inv-expand-name {
  flex: 1 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.inv-expand-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

.inv-expand-body .inv-table {
  font-size: 12px;
}

/* ── Toggle Switch ─────────────────────────────────────────────────────────── */

.inv-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inv-toggle-label {
  font-size: 13px;
  color: var(--text);
}

.inv-toggle-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Confirm Dialog ────────────────────────────────────────────────────────── */

.inv-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.inv-confirm-dialog {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  width: 380px;
  max-width: 90vw;
}

.inv-confirm-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.inv-confirm-message {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.inv-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Empty State ───────────────────────────────────────────────────────────── */

.inv-settings-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ── Category List ─────────────────────────────────────────────────────────── */

.inv-category-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.inv-category-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
}

.inv-category-item:hover {
  background: var(--bg3);
}

.inv-category-count {
  font-size: 11px;
  color: var(--muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* ── Wipe Cycle Card ───────────────────────────────────────────────────────── */

.inv-wipe-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}

.inv-wipe-card.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.inv-wipe-info {
  flex: 1 1;
}

.inv-wipe-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.inv-wipe-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.inv-wipe-counts {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.inv-wipe-count-label {
  color: var(--muted);
}

.inv-wipe-count-val {
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ── Filter Criteria Editor ────────────────────────────────────────────────── */

.inv-filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.inv-filter-row select.inv-form-input {
  flex: 1 1;
}

.inv-filter-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}

.inv-filter-remove:hover {
  color: var(--bad);
}

/* ── File Upload ───────────────────────────────────────────────────────────── */

.inv-file-upload {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  margin-bottom: 12px;
}

.inv-file-upload:hover {
  border-color: var(--accent);
  color: var(--text);
}

.inv-file-upload input {
  display: none;
}

/* ── Misc ──────────────────────────────────────────────────────────────────── */

.inv-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.inv-section-header .settings-page-title {
  flex: 1 1;
  margin-bottom: 0;
}

.inv-error-text {
  color: var(--bad);
  font-size: 12px;
  margin-top: 4px;
}

.inv-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.inv-active-toggle input[type="checkbox"] {
  accent-color: var(--accent);
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/settings/rcon-console.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* ─── RCON Console ─────────────────────────────────────────────────────────── */

.rcon-console {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.5;
}

.rcon-console-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg1);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.rcon-console-title {
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rcon-console-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(88, 101, 242, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── Output Area ──────────────────────────────────────────────────────────── */

.rcon-console-output {
  flex: 1 1;
  overflow-y: auto;
  padding: 12px 14px;
  cursor: text;
}

.rcon-entry {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 2px;
}

.rcon-timestamp {
  color: var(--muted2);
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0.6;
  min-width: 72px;
}

.rcon-entry-input .rcon-input-echo {
  color: #7ec8e3;
  font-weight: 600;
}

.rcon-entry-output .rcon-output-text {
  color: #a3d9a5;
}

.rcon-entry-error .rcon-output-text {
  color: #e06c75;
}

.rcon-entry-info .rcon-output-text {
  color: var(--muted);
}

.rcon-output-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: none;
  border: none;
  padding: 0;
}

.rcon-loading {
  color: var(--muted);
  animation: rcon-pulse 1.2s ease-in-out infinite;
}

@keyframes rcon-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ─── Input Row ────────────────────────────────────────────────────────────── */

.rcon-console-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg1);
  flex: 0 0 auto;
}

.rcon-prompt {
  color: #7ec8e3;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}

.rcon-input {
  flex: 1 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  caret-color: var(--accent);
}

.rcon-input::placeholder {
  color: var(--muted2);
  opacity: 0.5;
}

.rcon-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Scrollbar ────────────────────────────────────────────────────────────── */

.rcon-console-output::-webkit-scrollbar {
  width: 6px;
}

.rcon-console-output::-webkit-scrollbar-track {
  background: transparent;
}

.rcon-console-output::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 3px;
}

.rcon-console-output::-webkit-scrollbar-thumb:hover {
  background: var(--muted2);
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/UserProfileModal/userProfileModal.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   User Profile Modal — all styles per spec visual values
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ───────────────────────────────────────────────────────────── */

.upm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.upm-card {
  width: 348px;
  max-height: 88vh;
  border-radius: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(30, 31, 34, 0.75);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.75),
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.50),
    inset -1px 0 0 rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 0 1.5px rgba(0, 0, 0, 0.40);
  /* Transform has NO CSS transition — driven by rAF tilt loop */
  transition: box-shadow 0.3s ease;
  animation: upmModalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  will-change: transform;
  --upm-accent: #5865f2;
}

/* Hide scrollbar */
.upm-card::-webkit-scrollbar { width: 4px; }
.upm-card::-webkit-scrollbar-track { background: transparent; }
.upm-card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

@keyframes upmModalIn {
  from {
    opacity: 0;
    transform: perspective(800px) scale(0.9) translateY(12px);
  }
  to {
    opacity: 1;
    transform: perspective(800px) scale(1.01) translateY(0);
  }
}

/* ── Banner ─────────────────────────────────────────────────────────────── */

.upm-banner {
  position: relative;
  height: 94px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.upm-banner-edit {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.upm-banner-edit:hover { color: rgba(255, 255, 255, 0.7); }

/* ── Avatar area ────────────────────────────────────────────────────────── */

.upm-avatar-area {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 16px;
  margin-top: -40px;
  position: relative;
  z-index: 1;
}

.upm-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
}

.upm-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.08);
  object-fit: cover;
  background: var(--bg2, #2b2d31);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
}

.upm-avatar-initial {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.08);
  background: var(--bg2, #2b2d31);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: var(--text, #dbdee1);
}

.upm-avatar-border-overlay {
  position: absolute;
  inset: -4px;
  pointer-events: none;
}
.upm-avatar-border-overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.upm-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(30, 31, 34, 0.75);
}

/* ── Action buttons ─────────────────────────────────────────────────────── */

.upm-action-btns {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-bottom: 4px;
}

.upm-action-btn {
  padding: 6px 14px;
  border-radius: 4px;
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}

.upm-action-btn.primary {
  background: var(--accent, #5865f2);
  color: #fff;
}
.upm-action-btn.primary:hover { background: #4752c4; }

.upm-action-btn.secondary {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text, #dbdee1);
}
.upm-action-btn.secondary:hover { background: rgba(255, 255, 255, 0.12); }

.upm-action-btn.icon-only {
  padding: 6px 8px;
  font-size: 14px;
}

/* ── Body content ───────────────────────────────────────────────────────── */

.upm-body {
  padding: 12px 16px 16px;
}

.upm-display-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #dbdee1);
  line-height: 1.2;
}

.upm-discriminator {
  font-size: 13px;
  color: var(--muted, #949ba4);
  margin-top: 2px;
}

/* ── Title Badge ─────────────────────────────────────────────────────────── */

.upm-title-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.upm-badges {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.upm-badge {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: default;
}

/* ── Custom status ───────────────────────────────────────────────────────── */

.upm-custom-status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted, #949ba4);
}

/* ── Divider ─────────────────────────────────────────────────────────────── */

.upm-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 12px 0;
}

.upm-card .upm-views-trend,
.upm-card .upm-action-btn.primary,
.upm-card .upm-note-textarea:focus {
  border-color: var(--upm-accent);
}

.upm-card .upm-action-btn.primary {
  background: var(--upm-accent, #5865f2);
}

.upm-card .upm-title-badge {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
}

.upm-card--default {
  background: rgba(30, 31, 34, 0.78);
}

.upm-card--default .upm-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 18%, rgba(13, 16, 22, 0.18) 60%, rgba(13, 16, 22, 0.54));
}

.upm-card--minimal {
  border-radius: 14px;
  background: rgba(25, 26, 29, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.upm-card--minimal .upm-banner {
  height: 78px;
}

.upm-card--minimal .upm-body {
  padding-top: 14px;
}

.upm-card--minimal .upm-divider,
.upm-card--minimal .upm-shared-history {
  opacity: 0.72;
}

.upm-card--glassmorphic {
  background: rgba(24, 30, 41, 0.58);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.upm-card--glassmorphic .upm-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
}

.upm-card--command {
  border-radius: 12px;
  background: rgba(15, 18, 24, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.64),
    0 0 0 1px rgba(102, 126, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.upm-card--command .upm-banner {
  height: 74px;
  border-radius: 12px 12px 0 0;
}

.upm-card--command .upm-display-name,
.upm-card--command .upm-info-label,
.upm-card--command .upm-title-badge {
  font-family: var(--font-condensed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.upm-card--command .upm-title-badge {
  border-radius: 6px;
}

.upm-card--neon {
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--upm-accent) 28%, transparent), transparent 34%),
    rgba(17, 20, 31, 0.94);
  box-shadow:
    0 30px 74px rgba(0, 0, 0, 0.7),
    0 0 28px color-mix(in srgb, var(--upm-accent) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--upm-accent) 24%, rgba(255,255,255,0.06));
}

.upm-card--neon .upm-display-name {
  text-shadow: 0 0 18px color-mix(in srgb, var(--upm-accent) 20%, transparent);
}

.upm-card--neon .upm-title-badge {
  background-color: color-mix(in srgb, var(--upm-accent) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--upm-accent) 34%, transparent) !important;
}

.upm-card--editorial {
  border-radius: 22px;
  background: rgba(28, 24, 22, 0.96);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.upm-card--editorial .upm-banner {
  height: 112px;
}

.upm-card--editorial .upm-display-name {
  font-size: 24px;
  line-height: 1.05;
}

.upm-card--editorial .upm-body {
  padding: 14px 18px 18px;
}

.upm-card--editorial .upm-info-value {
  line-height: 1.55;
}

/* ── Info rows ───────────────────────────────────────────────────────────── */

.upm-info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted, #949ba4);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.upm-info-value {
  font-size: 13px;
  color: var(--text, #dbdee1);
  line-height: 1.4;
}

.upm-info-block + .upm-info-block {
  margin-top: 10px;
}

/* ── Shared History ──────────────────────────────────────────────────────── */

.upm-shared-history {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px;
  grid-gap: 4px;
  gap: 4px;
  margin-top: 10px;
}

.upm-sh-col {
  text-align: center;
}

.upm-sh-icon {
  font-size: 14px;
}

.upm-sh-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #dbdee1);
}

.upm-sh-label {
  font-size: 10px;
  color: var(--muted, #949ba4);
}

/* ── Profile Views (own profile) ─────────────────────────────────────────── */

.upm-views {
  margin-top: 10px;
}

.upm-views-count {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #dbdee1);
}

.upm-views-trend {
  font-size: 12px;
  margin-left: 6px;
}

/* ── Private Note ────────────────────────────────────────────────────────── */

.upm-note {
  margin-top: 10px;
}

.upm-note-text {
  font-size: 12px;
  color: var(--text, #dbdee1);
  cursor: pointer;
  line-height: 1.4;
}

.upm-note-placeholder {
  font-size: 12px;
  color: var(--muted2, #6d6f78);
  font-style: italic;
  cursor: pointer;
}

.upm-note-textarea {
  width: 100%;
  min-height: 56px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text, #dbdee1);
  font-size: 12px;
  padding: 6px 8px;
  resize: vertical;
  font-family: inherit;
  outline: none;
}
.upm-note-textarea:focus { border-color: var(--accent, #5865f2); }

.upm-note-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  justify-content: flex-end;
}

.upm-note-btn {
  padding: 4px 12px;
  border-radius: 3px;
  border: none;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.upm-note-btn.save {
  background: var(--accent, #5865f2);
  color: #fff;
}
.upm-note-btn.save:hover { background: #4752c4; }
.upm-note-btn.cancel {
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted, #949ba4);
}
.upm-note-btn.cancel:hover { background: rgba(255, 255, 255, 0.12); }

/* ── Activity section ────────────────────────────────────────────────────── */

.upm-activity-section {
  margin-top: 4px;
}

.upm-activity-empty {
  text-align: center;
  padding: 20px 0 8px;
}

.upm-activity-empty-icon {
  font-size: 24px;
  opacity: 0.5;
}

.upm-activity-empty-text {
  font-size: 12px;
  color: var(--muted2, #6d6f78);
  margin-top: 4px;
}

/* ── Presence Card (shared layout) ───────────────────────────────────────── */

.upm-presence-card {
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}

.upm-presence-header {
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}

.upm-presence-body {
  padding: 10px;
  background: rgba(0, 0, 0, 0.15);
}

.upm-presence-inactive {
  font-size: 12px;
  color: var(--muted2, #6d6f78);
  font-style: italic;
}

/* ── Steam card ──────────────────────────────────────────────────────────── */

.upm-steam-game-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #dbdee1);
}

.upm-steam-details {
  font-size: 12px;
  color: var(--muted, #949ba4);
  margin-top: 2px;
}

.upm-steam-elapsed {
  font-size: 11px;
  color: var(--muted2, #6d6f78);
  margin-top: 2px;
}

.upm-steam-rp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.upm-steam-rp-pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(102, 192, 244, 0.15);
  color: #66c0f4;
  font-weight: 500;
}

.upm-steam-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.upm-steam-action-btn {
  padding: 4px 10px;
  border-radius: 3px;
  border: none;
  font-size: 11px;
  cursor: pointer;
  background: rgba(102, 192, 244, 0.12);
  color: #66c0f4;
  font-family: inherit;
}
.upm-steam-action-btn:hover { background: rgba(102, 192, 244, 0.22); }

/* ── Spotify card ────────────────────────────────────────────────────────── */

.upm-spotify-body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.upm-spotify-art {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.upm-spotify-art-fallback {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1db954, #191414);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.upm-spotify-info {
  flex: 1 1;
  min-width: 0;
}

.upm-spotify-track {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #dbdee1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upm-spotify-artist {
  font-size: 11px;
  color: var(--muted, #949ba4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upm-spotify-album {
  font-size: 11px;
  color: var(--muted2, #6d6f78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upm-spotify-progress {
  margin-top: 6px;
}

.upm-spotify-bar-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.upm-spotify-bar-fill {
  height: 100%;
  background: #1ed760;
  border-radius: 2px;
  transition: width 1s linear;
}

.upm-spotify-times {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted2, #6d6f78);
  margin-top: 2px;
}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */

.upm-skeleton {
  overflow: hidden;
}

.upm-skel-banner {
  width: 100%;
  height: 82px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 14px 14px 0 0;
}

.upm-skel-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  margin-top: -40px;
  margin-left: 16px;
  position: relative;
  z-index: 1;
}

.upm-skel-btns {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding: 0 16px;
  margin-top: -28px;
}

.upm-skel-btn-lg {
  width: 70px;
  height: 28px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.upm-skel-btn-sm {
  width: 40px;
  height: 28px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.upm-skel-body {
  padding: 20px 16px 16px;
}

.upm-skel-line {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.upm-skel-line.title { width: 140px; height: 20px; }
.upm-skel-line.subtitle { width: 80px; height: 14px; margin-top: 6px; }
.upm-skel-line.body1 { width: 100%; height: 14px; margin-top: 12px; }
.upm-skel-line.body2 { width: 75%; height: 14px; margin-top: 6px; }

/* Shimmer animation */
.upm-skeleton .upm-skel-banner,
.upm-skeleton .upm-skel-avatar,
.upm-skeleton .upm-skel-btn-lg,
.upm-skeleton .upm-skel-btn-sm,
.upm-skeleton .upm-skel-line {
  position: relative;
  overflow: hidden;
}

.upm-skeleton .upm-skel-banner::after,
.upm-skeleton .upm-skel-avatar::after,
.upm-skeleton .upm-skel-btn-lg::after,
.upm-skeleton .upm-skel-btn-sm::after,
.upm-skeleton .upm-skel-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: upmShimmer 1.5s infinite;
}

@keyframes upmShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/components/NotesRemindersPanel/notes-reminders.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Notes & Reminders Panel ────────────────────────────────────────────── */

.nr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nr-modal {
  width: 560px;
  max-width: calc(100vw - 60px);
  height: 600px;
  max-height: calc(100vh - 80px);
  background: var(--bg1);
  border-radius: 18px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: nr-in 0.15s ease-out;
}

@keyframes nr-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.nr-header {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  border-bottom: 1px solid var(--line2);
  flex: 0 0 auto;
}

.nr-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
}

.nr-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted);
  border: 0;
  background: transparent;
  font-size: 16px;
}

.nr-close:hover {
  background: var(--line2);
  color: var(--text);
}

/* ─── Tab Bar ────────────────────────────────────────────────────────────── */

.nr-tabs {
  display: flex;
  gap: 0;
  height: 40px;
  border-bottom: 1px solid var(--line2);
  flex: 0 0 auto;
}

.nr-tab {
  flex: 1 1;
  height: 100%;
  padding: 0 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted2);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.nr-tab:hover {
  color: var(--text);
}

.nr-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─── Body / Content Area ────────────────────────────────────────────────── */

.nr-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 14px;
}

/* ─── New Button ─────────────────────────────────────────────────────────── */

.nr-new-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px dashed var(--line2);
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 12px;
  width: 100%;
}

.nr-new-btn:hover {
  background: var(--bg2);
  border-color: var(--accent);
}

/* ─── Note Card ──────────────────────────────────────────────────────────── */

.nr-note-card {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.nr-note-card:hover {
  border-color: var(--bg4);
}

.nr-note-card.dragging {
  opacity: 0.5;
}

.nr-note-card.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 88, 101, 242), 0.25);
}

.nr-note-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nr-drag-handle {
  cursor: -webkit-grab;
  cursor: grab;
  color: var(--muted2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.nr-drag-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.nr-note-title-input {
  flex: 1 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  outline: none;
  padding: 2px 0;
  min-width: 0;
}

.nr-note-title-input::placeholder {
  color: var(--muted2);
}

.nr-note-title-input:focus {
  border-bottom: 1px solid var(--accent);
}

.nr-note-delete {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 12px;
}

.nr-note-delete:hover {
  background: var(--bg4);
  color: var(--bad);
}

.nr-note-body {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  padding: 6px 0 0;
  min-height: 32px;
  font-family: inherit;
}

.nr-note-body::placeholder {
  color: var(--muted2);
}

/* ─── Reminder Form ──────────────────────────────────────────────────────── */

.nr-reminder-form {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}

.nr-reminder-form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.nr-input {
  flex: 1 1;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.nr-input::placeholder {
  color: var(--muted2);
}

.nr-input:focus {
  border-color: var(--accent);
}

.nr-textarea {
  width: 100%;
  min-height: 50px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  outline: none;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.15s;
  margin-bottom: 8px;
}

.nr-textarea::placeholder {
  color: var(--muted2);
}

.nr-textarea:focus {
  border-color: var(--accent);
}

/* ─── Time Picker ────────────────────────────────────────────────────────── */

.nr-time-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.nr-time-toggle {
  display: flex;
  gap: 0;
  border-radius: 6px;
  border: 1px solid var(--line2);
  overflow: hidden;
  flex-shrink: 0;
}

.nr-time-toggle-btn {
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--muted2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nr-time-toggle-btn.active {
  background: var(--accent);
  color: #fff;
}

.nr-time-relative {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1;
}

.nr-time-amount {
  width: 60px;
  height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.nr-time-amount:focus {
  border-color: var(--accent);
}

.nr-time-unit {
  height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

.nr-time-absolute {
  flex: 1 1;
}

.nr-time-datetime {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 13px;
  outline: none;
  color-scheme: dark;
}

.nr-time-datetime:focus {
  border-color: var(--accent);
}

/* ─── Form Actions ───────────────────────────────────────────────────────── */

.nr-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.nr-btn-primary {
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}

.nr-btn-primary:hover {
  filter: brightness(1.1);
}

.nr-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nr-btn-secondary {
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nr-btn-secondary:hover {
  background: var(--bg3);
  color: var(--text);
}

/* ─── Reminder Card ──────────────────────────────────────────────────────── */

.nr-section-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
  margin-bottom: 8px;
  padding: 0 2px;
}

.nr-reminder-card {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.nr-reminder-card.triggered {
  border-color: var(--accent);
}

.nr-reminder-card.dismissed {
  opacity: 0.6;
}

.nr-reminder-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nr-reminder-title {
  flex: 1 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nr-reminder-time {
  font-size: 11px;
  color: var(--muted2);
  white-space: nowrap;
}

.nr-reminder-body {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

.nr-reminder-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.nr-reminder-action-btn {
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nr-reminder-action-btn:hover {
  background: var(--bg4);
  color: var(--text);
}

.nr-reminder-action-btn.dismiss {
  border-color: var(--accent);
  color: var(--accent);
}

.nr-reminder-action-btn.dismiss:hover {
  background: var(--accent);
  color: #fff;
}

.nr-reminder-action-btn.delete:hover {
  border-color: var(--bad);
  color: var(--bad);
}

/* ─── Empty state ────────────────────────────────────────────────────────── */

.nr-empty {
  text-align: center;
  padding: 32px 0;
  color: var(--muted2);
  font-size: 13px;
}

/* ─── Editing reminder inline ────────────────────────────────────────────── */

.nr-reminder-edit-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.nr-reminder-edit-input {
  flex: 1 1;
  height: 30px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text);
  font-size: 12px;
  outline: none;
}

.nr-reminder-edit-input:focus {
  border-color: var(--accent);
}

/* ─── Status badge ───────────────────────────────────────────────────────── */

.nr-status-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nr-status-badge.pending {
  background: rgba(var(--accent-rgb, 88, 101, 242), 0.15);
  color: var(--accent);
}

.nr-status-badge.triggered {
  background: rgba(87, 242, 135, 0.15);
  color: var(--ok);
}

.nr-status-badge.dismissed {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted2);
}