@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --brand: #00c8ff;
      --brand-dim: #0099cc;
      --hover: #7cecff;
      --bg: #000000;
      --bg-2: #050505;
      --bg-3: #0a0a0a;
      --bg-4: #111111;
      --bg-5: #171717;
      --text: #FFFFFF;
      --text-2: rgba(255, 255, 255, 0.86);
      --text-muted: rgba(255, 255, 255, 0.45);
      --red: #e74c3c;
      --green: #2ecc71;
      --yellow: #f39c12;
      --radius: 8px;
      --font-head: 'Orbitron', sans-serif;
      --font-body: 'Inter', sans-serif;
      --sidebar-icons: 296px;
      --sidebar-channels: 224px;
      --sidebar-members: 236px;
      --header-h: 52px;
      --input-h: 64px;
      --transition: 0.15s ease;
    }

    html,
    body {
      height: 100%;
      overflow: hidden;
    }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    #app {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .boot-loader {
      position: fixed;
      inset: 0;
      z-index: 20000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: var(--bg);
      transition: opacity 0.28s ease;
    }

    .boot-loader.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .boot-loader-logo {
      width: 56px;
      height: 56px;
      object-fit: contain;
      filter: drop-shadow(0 8px 22px rgba(0, 200, 255, 0.35));
      animation: loaderFloat 1.2s ease-in-out infinite alternate;
    }

    .boot-loader-spinner {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.18);
      border-top-color: var(--hover);
      animation: spin 0.75s linear infinite;
    }

    .boot-loader-text {
      font-family: var(--font-head);
      font-size: 12px;
      letter-spacing: 1px;
      color: var(--text-2);
      text-transform: uppercase;
    }

    @keyframes loaderFloat {
      from {
        transform: translateY(-2px);
      }

      to {
        transform: translateY(3px);
      }
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--bg-5);
      border-radius: 4px;
    }

    * {
      scrollbar-width: thin;
      scrollbar-color: var(--bg-5) transparent;
    }

    /* ── Button Reset ── */
    button {
      cursor: pointer;
      border: none;
      background: none;
      color: inherit;
      font-family: inherit;
      font-size: inherit;
    }

    .ui-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1em;
      height: 1em;
      flex-shrink: 0;
    }

    .ui-icon svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ui-icon.is-solid svg {
      stroke: none;
      fill: currentColor;
    }

    .icon-with-text,
    .icon-with-count {
      display: inline-flex;
      align-items: center;
    }

    .icon-with-text {
      gap: 8px;
    }

    .icon-with-count {
      gap: 6px;
    }

    .icon-count {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    /* ── Input Reset ── */
    input,
    textarea {
      font-family: var(--font-body);
      font-size: 14px;
      color: var(--text);
      background: none;
      border: none;
      outline: none;
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--text-muted);
    }

    /* ── Auth View ── */
    .auth-view {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      position: relative;
      overflow: hidden;
    }

    .auth-bg {
      display: none;
    }

    .auth-card {
      position: relative;
      width: 420px;
      background: var(--bg);
      border: 1px solid rgba(0, 200, 255, 0.3);
      border-radius: 16px;
      padding: 40px;
      animation: slideUp 0.4s ease both;
      box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03);
    }

    .auth-card.legal-card {
      width: min(640px, calc(100vw - 32px));
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(24px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .auth-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px;
    }

    .auth-logo-icon {
      width: 44px;
      height: 44px;
      background: rgba(0, 200, 255, 0.16);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .auth-logo-icon img {
      width: 32px;
      height: 32px;
      object-fit: contain;
    }

    .auth-logo-text {
      font-family: var(--font-head);
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 1px;
    }

    .auth-title {
      font-family: var(--font-head);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 16px;
    }

    .auth-field label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-muted);
      font-family: var(--font-head);
    }

    .auth-field input {
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      border-radius: var(--radius);
      padding: 11px 14px;
      font-size: 14px;
      color: var(--text);
      transition: border-color var(--transition);
    }

    .auth-field input:focus {
      border-color: var(--brand);
    }

    .btn-primary {
      width: 100%;
      padding: 12px;
      background: rgba(0, 200, 255, 0.08);
      color: var(--brand);
      border: 1px solid rgba(0, 200, 255, 0.16);
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: background var(--transition), transform 0.1s, box-shadow var(--transition);
      margin-top: 8px;
    }

    .btn-primary:hover {
      background: rgba(0, 200, 255, 0.16);
      box-shadow: 0 0 12px rgba(0, 200, 255, 0.14);
    }

    .btn-primary:active {
      transform: scale(0.98);
    }

    .btn-primary:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .auth-switch {
      text-align: center;
      margin-top: 18px;
      font-size: 13px;
      color: var(--text-muted);
    }

    .auth-switch button {
      color: var(--hover);
      font-weight: 600;
      margin-left: 4px;
      transition: color var(--transition);
    }

    .auth-switch button:hover {
      color: var(--text);
    }

    .auth-error {
      background: rgba(231, 76, 60, 0.15);
      border: 1px solid rgba(231, 76, 60, 0.3);
      border-radius: var(--radius);
      padding: 10px 14px;
      margin-bottom: 16px;
      font-size: 13px;
      color: #ff8a80;
    }

    .auth-copy {
      margin-bottom: 16px;
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.65;
    }

    .auth-inline-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 0 0 18px;
    }

    .auth-inline-links a {
      color: var(--hover);
      font-size: 13px;
    }

    .auth-check {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin: 0 0 18px;
      padding: 12px 14px;
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
    }

    .auth-check input {
      margin-top: 2px;
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      accent-color: var(--brand);
    }

    .auth-check-copy {
      color: var(--text-2);
      font-size: 13px;
      line-height: 1.6;
    }

    .auth-check-copy a {
      color: var(--hover);
    }

    .auth-meta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-bottom: 18px;
    }

    .auth-meta-card {
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
    }

    .auth-meta-label {
      margin-bottom: 4px;
      color: var(--text-muted);
      font-family: var(--font-head);
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .auth-meta-value {
      color: var(--text);
      font-size: 13px;
      line-height: 1.5;
      word-break: break-word;
    }

    .auth-actions {
      display: flex;
      gap: 10px;
      margin-top: 8px;
    }

    .auth-actions > button {
      flex: 1;
    }

    /* ── App Layout ── */
    .app-layout {
      flex: 1;
      display: flex;
      overflow: hidden;
    }

    /* ── Icon Sidebar ── */
    .icon-sidebar {
      width: var(--sidebar-icons);
      background: var(--bg-2);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 12px 10px 12px;
      gap: 8px;
      overflow-y: auto;
      overflow-x: hidden;
      border-right: 1px solid rgba(255, 255, 255, 0.04);
      flex-shrink: 0;
    }

    .sidebar-brand-row {
      appearance: none;
      width: 100%;
      min-height: 58px;
      border: 1px solid rgba(255, 255, 255, 0.03);
      background: transparent;
      border-radius: 22px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      cursor: pointer;
      font: inherit;
      text-align: left;
      color: inherit;
      transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
    }

    .sidebar-brand-row:hover,
    .sidebar-brand-row.active {
      border-color: rgba(39, 232, 255, 0.24);
      background: rgba(0, 200, 255, 0.08);
      box-shadow: none;
      transform: translateY(-1px);
    }

    .sidebar-brand-mark {
      width: 40px;
      height: 40px;
      border-radius: 16px;
      overflow: hidden;
      background: rgba(0, 200, 255, 0.12);
      border: 1px solid rgba(124, 236, 255, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .sidebar-brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .sidebar-brand-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .sidebar-brand-title {
      font-family: var(--font-head);
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.4px;
      color: var(--text);
    }

    .sidebar-brand-subtitle {
      font-size: 11px;
      color: var(--text-muted);
    }

    .sidebar-section {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .sidebar-section-title {
      padding: 4px 10px 2px;
      font-family: var(--font-head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.34);
    }

    .sidebar-nav-row {
      appearance: none;
      width: 100%;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-2);
      min-height: 52px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 11px;
      cursor: pointer;
      font: inherit;
      text-align: left;
      transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
    }

    .sidebar-brand-row:focus-visible,
    .sidebar-nav-row:focus-visible {
      outline: 2px solid rgba(124, 236, 255, 0.78);
      outline-offset: 2px;
    }

    .sidebar-nav-row:hover {
      background: rgba(0, 200, 255, 0.06);
      border-color: rgba(39, 232, 255, 0.14);
      color: var(--text);
      transform: translateX(2px);
    }

    .sidebar-nav-row.active {
      background: rgba(0, 200, 255, 0.10);
      border-color: rgba(39, 232, 255, 0.24);
      box-shadow: none;
      color: var(--text);
    }

    .sidebar-nav-avatar {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 700;
      color: #fff;
    }

    .sidebar-nav-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .sidebar-nav-avatar.icon {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--hover);
    }

    .sidebar-nav-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
    }

    .sidebar-nav-title {
      font-size: 14px;
      font-weight: 600;
      color: inherit;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-nav-meta {
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-nav-row.active .sidebar-nav-meta,
    .sidebar-nav-row:hover .sidebar-nav-meta {
      color: rgba(255, 255, 255, 0.7);
    }

    .channel-sidebar.is-collapsed {
      display: none;
    }

    .sidebar-flex-spacer {
      flex: 1;
      min-height: 8px;
    }

    .sidebar-footer {
      padding-top: 4px;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .sidebar-logo {
      width: 44px;
      height: 44px;
      background: var(--brand);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-radius var(--transition), background var(--transition);
      flex-shrink: 0;
    }

    .sidebar-logo {
      margin-bottom: 4px;
    }

    .sidebar-logo:hover,
    .sidebar-logo.active {
      background: var(--hover);
      border-radius: 10px;
    }

    .sidebar-logo.full-icon {
      padding: 0;
      overflow: hidden;
      background: transparent;
    }

    .sidebar-logo.full-icon:hover,
    .sidebar-logo.full-icon.active {
      background: transparent;
      border-radius: 10px;
    }

    .icon-core {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.75);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sidebar-logo img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }

    .sidebar-logo.full-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .sidebar-sep {
      width: 32px;
      height: 2px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 1px;
      margin: 4px 0;
      flex-shrink: 0;
    }

    .server-pill {
      position: relative;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 700;
      transition: border-radius var(--transition);
      flex-shrink: 0;
      user-select: none;
      overflow: hidden;
    }

    .server-pill:hover {
      border-radius: 14px;
    }

    .server-pill.active {
      border-radius: 14px;
      outline: 3px solid var(--brand);
      outline-offset: 2px;
    }

    .server-pill-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
    }

    .server-pill::before {
      content: '';
      position: absolute;
      left: -12px;
      width: 4px;
      background: var(--text);
      border-radius: 0 3px 3px 0;
      transition: height var(--transition);
      height: 0;
    }

    .server-pill:hover::before {
      height: 20px;
    }

    .server-pill.active::before {
      height: 40px;
    }

    .server-pill-add {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px dashed rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-muted);
      transition: all var(--transition);
      flex-shrink: 0;
    }

    .server-pill-add:hover {
      border-color: var(--green);
      color: var(--green);
      border-radius: 14px;
    }

    .server-pill-add .ui-icon {
      width: 20px;
      height: 20px;
    }

    /* DM icon */
    /* ── Channel Sidebar ── */
    .channel-sidebar {
      width: 228px;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.04);
    }

    .server-name-bar {
      height: var(--header-h);
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      cursor: pointer;
      transition: background var(--transition);
      flex-shrink: 0;
    }

    .server-name-bar:hover {
      background: rgba(255, 255, 255, 0.03);
    }

    .server-name-bar h2 {
      font-family: var(--font-head);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text);
    }

    .server-title-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1;
    }

    .server-title-icon {
      width: 20px;
      height: 20px;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      flex-shrink: 0;
    }

    .channel-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 8px 0 8px;
    }

    .ch-category {
      padding: 14px 8px 3px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
    }

    .ch-category span {
      font-family: var(--font-head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-muted);
      transition: color var(--transition);
    }

    .ch-category:hover span {
      color: var(--text-2);
    }

    .ch-category .cat-plus {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      border-radius: 4px;
    }

    .ch-category .cat-plus:hover {
      color: var(--text);
      background: var(--bg-4);
    }

    .ch-category .cat-plus .ui-icon {
      width: 14px;
      height: 14px;
    }

    .ch-item {
      margin: 2px 6px;
      padding: 9px 12px;
      border-radius: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--text-muted);
      transition: background var(--transition), color var(--transition);
      user-select: none;
    }

    .ch-item:hover {
      background: var(--bg-4);
      color: var(--text-2);
    }

    .ch-item.active {
      background: rgba(0, 200, 255, 0.25);
      color: var(--text);
    }

    .ch-item .ch-hash {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      color: inherit;
    }

    .ch-item .ch-hash .ui-icon {
      width: 16px;
      height: 16px;
    }

    .ch-item .ch-name {
      flex: 1;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ch-badge {
      background: var(--red);
      color: white;
      font-size: 10px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 10px;
      min-width: 18px;
      text-align: center;
    }

    /* User panel */
    .user-panel {
      padding: 8px 10px;
      background: var(--bg);
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .user-av {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--brand);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      position: relative;
      cursor: pointer;
    }

    .avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
    }

    .status-ring {
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid var(--bg);
    }

    .s-online {
      background: var(--green);
    }

    .s-idle {
      background: var(--yellow);
    }

    .s-dnd {
      background: var(--red);
    }

    .s-offline {
      background: #555;
    }

    .user-info-mini {
      flex: 1;
      overflow: hidden;
    }

    .user-info-mini .uname {
      font-size: 13px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .user-info-mini .utag {
      font-size: 11px;
      color: var(--text-muted);
    }

    .panel-btn {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      transition: background var(--transition), color var(--transition);
    }

    .panel-btn:hover {
      background: var(--bg-4);
      color: var(--text);
    }

    .panel-btn .ui-icon {
      width: 16px;
      height: 16px;
    }

    .panel-status-btn {
      position: relative;
    }

    .status-dot-inline {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid var(--bg);
      display: inline-flex;
    }

    .status-menu {
      position: fixed;
      z-index: 12000;
      min-width: 188px;
      padding: 8px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: #050505;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    }

    .status-option {
      width: 100%;
      padding: 9px 10px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-2);
      transition: background var(--transition), color var(--transition);
    }

    .status-option:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text);
    }

    .status-option.active {
      background: rgba(0, 200, 255, 0.12);
    }

    .status-option-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .status-option-label {
      font-size: 13px;
      font-weight: 600;
    }

    .status-option-sub {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* ── Main Chat ── */
    .chat-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      background:
        radial-gradient(circle at 50% -10%, rgba(0, 200, 255, 0.08), transparent 28%),
        #020202;
      min-width: 0;
    }

    .chat-topbar {
      min-height: var(--header-h);
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px 24px 14px;
      gap: 16px;
      flex-shrink: 0;
      position: relative;
    }

    .chat-topbar-copy {
      width: min(100%, 960px);
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .chat-topbar-titleblock {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .chat-topbar .ch-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      color: var(--hover);
      background: rgba(0, 200, 255, 0.08);
      border: 1px solid rgba(0, 200, 255, 0.16);
      flex-shrink: 0;
    }

    .chat-topbar .ch-icon .ui-icon {
      width: 18px;
      height: 18px;
    }

    .chat-topbar h3 {
      font-family: var(--font-head);
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
    }

    .topbar-desc {
      font-size: 12px;
      color: var(--text-muted);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chat-main-stage {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 0 12px 10px;
    }

    .edge-release-banner {
      width: 100%;
      max-width: none;
      margin: 0 auto;
      padding: 10px 14px;
      border-radius: 16px;
      border: 1px solid rgba(0, 200, 255, 0.18);
      background: linear-gradient(90deg, rgba(0, 200, 255, 0.12), rgba(0, 200, 255, 0.03));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--text-2);
      font-size: 12px;
    }

    .edge-release-banner-copy {
      min-width: 0;
    }

    .edge-release-banner-title {
      font-family: var(--font-head);
      font-size: 11px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: var(--brand);
      margin-bottom: 2px;
    }

    .edge-release-banner-text {
      color: var(--text-2);
      line-height: 1.55;
    }

    .edge-release-banner-pill {
      flex-shrink: 0;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(0, 200, 255, 0.16);
      color: var(--brand);
      font-family: var(--font-head);
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .topbar-actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }

    .topbar-btn {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(255, 255, 255, 0.02);
      transition: background var(--transition), color var(--transition), border-color var(--transition), transform 0.12s ease;
    }

    .topbar-btn:hover {
      background: rgba(0, 200, 255, 0.1);
      border-color: rgba(0, 200, 255, 0.2);
      color: var(--text);
      transform: translateY(-1px);
    }

    .topbar-btn .ui-icon {
      width: 18px;
      height: 18px;
    }

    .admin-error-btn {
      width: 24px;
      height: 24px;
      padding: 0;
      border-radius: 6px;
      border: 1px solid rgba(231, 76, 60, 0.28);
      background: rgba(231, 76, 60, 0.1);
      color: #ffb7ae;
      transition: background var(--transition), color var(--transition), border-color var(--transition);
      flex-shrink: 0;
    }

    .admin-error-btn:hover {
      background: rgba(231, 76, 60, 0.18);
      color: #ffd2cc;
      border-color: rgba(231, 76, 60, 0.42);
    }

    .admin-error-btn .ui-icon {
      width: 12px;
      height: 12px;
    }

    /* ── Messages ── */
    .messages-scroll {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
      padding: 0 0 6px;
      display: flex;
      flex-direction: column;
      scrollbar-gutter: stable;
    }

    .messages-lane {
      width: 100%;
      max-width: none;
      margin: 0;
    }

    .msg-group {
      padding: 8px 18px;
      display: flex;
      gap: 14px;
      border-radius: 18px;
      transition: background 0.1s, border-color 0.1s;
      animation: msgIn 0.2s ease both;
      border: 1px solid transparent;
    }

    .msg-group.is-merged {
      padding-top: 3px;
      padding-bottom: 3px;
    }

    @keyframes msgIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .msg-group:hover {
      background: rgba(255, 255, 255, 0.025);
      border-color: rgba(0, 200, 255, 0.08);
    }

    .msg-group:hover .msg-actions {
      opacity: 1;
    }

    .msg-group.flash {
      background: rgba(0, 200, 255, 0.12);
    }

    .msg-av {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .msg-av:hover {
      filter: brightness(1.15);
    }

    .msg-avatar-gap {
      width: 38px;
      flex-shrink: 0;
    }

    .msg-body {
      flex: 1;
      min-width: 0;
    }

    .msg-meta {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 2px;
    }

    .msg-author {
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }

    .msg-author:hover {
      text-decoration: underline;
    }

    .msg-author.is-self {
      color: var(--hover);
    }

    .msg-author.is-mod {
      color: #e74c3c;
    }

    .msg-author.is-admin {
      color: #f39c12;
    }

    .role-badge {
      font-size: 9px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 4px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .badge-mod {
      background: rgba(231, 76, 60, 0.2);
      color: #e74c3c;
    }

    .badge-admin {
      background: rgba(243, 156, 18, 0.2);
      color: #f39c12;
    }

    .msg-time {
      font-size: 11px;
      color: var(--text-muted);
    }

    .msg-text {
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-2);
      word-break: break-word;
    }

    .msg-group.is-merged .msg-text {
      margin-top: 0;
    }

    .msg-text .mention {
      background: rgba(0, 200, 255, 0.25);
      color: var(--hover);
      border-radius: 3px;
      padding: 0 3px;
      cursor: pointer;
    }

    .msg-text code {
      background: rgba(0, 0, 0, 0.4);
      padding: 1px 5px;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: #e2b96f;
    }

    .msg-text .msg-link {
      color: var(--hover);
      text-decoration: underline;
      text-decoration-color: rgba(0, 200, 255, 0.55);
      text-underline-offset: 2px;
      cursor: pointer;
      transition: color var(--transition), text-decoration-color var(--transition);
    }

    .msg-text .msg-link:hover {
      color: var(--text);
      text-decoration-color: rgba(255, 255, 255, 0.85);
    }

    .msg-text .edited-tag {
      font-size: 10px;
      color: var(--text-muted);
      margin-left: 4px;
    }

    .msg-reply-preview {
      margin-bottom: 4px;
      max-width: 100%;
      padding: 0;
      border: none;
      background: none;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      text-align: left;
    }

    .msg-reply-preview::before {
      content: '';
      width: 15px;
      height: 10px;
      flex-shrink: 0;
      align-self: flex-end;
      border-left: 2px solid rgba(255, 255, 255, 0.18);
      border-top: 2px solid rgba(255, 255, 255, 0.18);
      border-top-left-radius: 10px;
      margin-right: -1px;
    }

    .msg-reply-preview:hover::before {
      border-color: rgba(0, 200, 255, 0.48);
    }

    .msg-reply-avatar {
      width: 16px;
      height: 16px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.32);
    }

    .msg-reply-line {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .msg-reply-author {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-2);
      white-space: nowrap;
    }

    .msg-reply-snippet {
      font-size: 12px;
      color: var(--text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .msg-reply-preview:hover .msg-reply-author {
      color: var(--hover);
    }

    .msg-reply-preview:hover .msg-reply-snippet {
      color: var(--text-2);
    }

    .link-embed {
      margin-top: 8px;
      max-width: 620px;
      border-radius: 10px;
      border: 1px solid rgba(0, 200, 255, 0.35);
      background: #000000;
      padding: 10px 12px;
      cursor: pointer;
      transition: border-color var(--transition), background var(--transition), transform 0.12s ease;
    }

    .link-embed:hover {
      border-color: rgba(0, 200, 255, 0.75);
      background: #000000;
      transform: translateY(-1px);
    }

    .link-embed-host {
      font-family: var(--font-head);
      font-size: 10px;
      letter-spacing: 0.9px;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    .link-embed-title {
      margin-top: 4px;
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
      word-break: break-word;
    }

    .link-embed-url {
      margin-top: 4px;
      font-size: 12px;
      color: var(--hover);
      word-break: break-all;
    }

    .link-embed-hint {
      margin-top: 6px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .msg-attachment {
      margin-top: 6px;
      max-width: 620px;
    }

    .msg-media-image {
      max-width: 100%;
      max-height: 340px;
      border-radius: 10px;
      border: 1px solid var(--bg-5);
      display: block;
      background: var(--bg-4);
    }

    .msg-media-video {
      width: 100%;
      max-height: 340px;
      border-radius: 10px;
      border: 1px solid var(--bg-5);
      background: #000;
    }

    .msg-media-audio {
      width: 100%;
      max-width: 340px;
    }

    .msg-attachment a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      border-radius: 8px;
      padding: 8px 12px;
      color: var(--hover);
      text-decoration: none;
      font-size: 13px;
      transition: background var(--transition);
    }

    .msg-attachment a:hover {
      background: var(--bg-5);
    }

    .msg-reactions {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 4px;
    }

    .reaction-chip {
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(0, 200, 255, 0.12);
      border: 1px solid rgba(0, 200, 255, 0.25);
      border-radius: 12px;
      padding: 2px 8px;
      font-size: 12px;
      cursor: pointer;
      transition: background var(--transition);
      user-select: none;
    }

    .reaction-chip:hover {
      background: rgba(0, 200, 255, 0.28);
    }

    .reaction-chip.mine {
      border-color: var(--brand);
      background: rgba(0, 200, 255, 0.3);
    }

    .reaction-chip .rc-count {
      color: var(--hover);
      font-weight: 600;
    }

    .msg-actions {
      opacity: 0;
      display: flex;
      gap: 4px;
      transition: opacity var(--transition);
      position: absolute;
      top: 8px;
      right: 18px;
    }

    .msg-group {
      position: relative;
    }

    .act-btn {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      color: var(--text-muted);
      transition: background var(--transition), color var(--transition);
    }

    .act-btn .ui-icon {
      width: 16px;
      height: 16px;
    }

    .act-btn:hover {
      background: var(--bg-5);
      color: var(--text);
    }

    .act-btn.danger:hover {
      background: rgba(231, 76, 60, 0.2);
      color: var(--red);
    }

    .msg-day-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 18px 12px;
      color: var(--text-muted);
      font-size: 12px;
      font-weight: 500;
    }

    .msg-day-divider::before,
    .msg-day-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(255, 255, 255, 0.07);
    }

    .load-more-btn {
      align-self: center;
      margin: 8px auto 12px;
      padding: 6px 16px;
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      border-radius: 20px;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--text-muted);
      cursor: pointer;
      transition: all var(--transition);
    }

    .load-more-btn:hover {
      background: var(--bg-5);
      color: var(--text);
    }

    .load-more-btn .ui-icon {
      width: 14px;
      height: 14px;
    }

    .empty-channel {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: min(100%, 860px);
      margin: auto;
      padding: 42px 28px;
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
      text-align: center;
      color: var(--text-muted);
      gap: 10px;
      font-size: 14px;
    }

    .empty-channel .empty-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
    }

    .empty-channel .empty-icon .ui-icon {
      width: 48px;
      height: 48px;
    }

    .empty-channel h4 {
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 700;
      color: var(--text-2);
    }

    /* Typing */
    .typing-bar {
      min-height: 22px;
      width: min(100%, 960px);
      margin: 0 auto;
      padding: 0 6px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .typing-dots {
      display: flex;
      gap: 3px;
      align-items: center;
    }

    .typing-dots span {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--text-muted);
      animation: tdot 1.2s infinite;
    }

    .typing-dots span:nth-child(2) {
      animation-delay: 0.2s;
    }

    .typing-dots span:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes tdot {

      0%,
      60%,
      100% {
        transform: translateY(0);
        opacity: 0.4;
      }

      30% {
        transform: translateY(-4px);
        opacity: 1;
      }
    }

    /* Input area */
    .chat-input-area {
      width: 100%;
      max-width: none;
      margin: 0 auto;
      padding: 0 0 10px;
      flex-shrink: 0;
    }

    .composer-reply {
      margin-bottom: 8px;
      padding: 10px 12px;
      border: 1px solid rgba(0, 200, 255, 0.18);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.03);
      display: flex;
      align-items: center;
      gap: 10px;
    }

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

    .composer-reply-label {
      font-family: var(--font-head);
      font-size: 10px;
      letter-spacing: 0.8px;
      color: var(--hover);
      text-transform: uppercase;
    }

    .composer-reply-snippet {
      margin-top: 3px;
      font-size: 12px;
      color: var(--text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .composer-reply-close {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background var(--transition), color var(--transition);
    }

    .composer-reply-close:hover {
      background: var(--bg-4);
      color: var(--text);
    }

    .composer-reply-close .ui-icon {
      width: 14px;
      height: 14px;
    }

    .composer-attachments {
      margin-bottom: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .composer-attachment-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: var(--text-2);
      font-size: 12px;
      transition: border-color var(--transition), background var(--transition);
    }

    .composer-attachment-chip:hover {
      background: rgba(0, 200, 255, 0.08);
      border-color: rgba(0, 200, 255, 0.24);
    }

    .composer-attachment-kind {
      font-family: var(--font-head);
      font-size: 10px;
      letter-spacing: 0.8px;
      color: var(--hover);
      text-transform: uppercase;
    }

    .composer-attachment-name {
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .composer-attachment-chip .ui-icon {
      width: 12px;
      height: 12px;
    }

    .chat-input-box {
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      display: flex;
      align-items: flex-end;
      gap: 8px;
      padding: 8px 12px;
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
      transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    }

    .chat-input-box:focus-within {
      border-color: rgba(0, 200, 255, 0.38);
      background: rgba(255, 255, 255, 0.045);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    }

    .input-icon-btn {
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 12px;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: color var(--transition), background var(--transition);
      flex-shrink: 0;
    }

    .input-icon-btn:hover {
      color: var(--hover);
      background: rgba(0, 200, 255, 0.08);
    }

    .input-icon-btn .ui-icon {
      width: 18px;
      height: 18px;
    }

    .input-pill-btn {
      min-width: 60px;
      height: 38px;
      margin-bottom: 0;
      padding: 0 14px;
      border-radius: 999px;
      background: rgba(0, 200, 255, 0.08);
      color: var(--hover);
      font-family: var(--font-head);
      font-size: 10px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      transition: background var(--transition), color var(--transition), box-shadow var(--transition);
      flex-shrink: 0;
    }

    .input-pill-btn:hover {
      background: rgba(0, 200, 255, 0.16);
      color: var(--text);
    }

    .input-pill-btn.active {
      background: rgba(0, 200, 255, 0.2);
      color: var(--text);
      box-shadow: 0 0 0 1px rgba(0, 200, 255, 0.25) inset;
    }

    .chat-textarea {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 15px;
      padding: 10px 0;
      resize: none;
      max-height: 200px;
      min-height: 42px;
      line-height: 1.5;
    }

    .send-btn {
      width: 38px;
      height: 38px;
      padding: 0;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      border: 1px solid transparent;
      transition: color var(--transition), background var(--transition), border-color var(--transition), transform 0.12s ease;
      flex-shrink: 0;
    }

    .send-btn:hover {
      color: var(--hover);
      background: rgba(0, 200, 255, 0.1);
      border-color: rgba(0, 200, 255, 0.18);
      transform: translateY(-1px);
    }

    .send-btn.ready {
      color: var(--brand);
      background: rgba(0, 200, 255, 0.1);
      border-color: rgba(0, 200, 255, 0.16);
    }

    .send-btn .ui-icon {
      width: 18px;
      height: 18px;
    }

    /* ── Member Sidebar ── */
    .member-sidebar {
      width: var(--sidebar-members);
      background: #010101;
      border-left: 1px solid rgba(255, 255, 255, 0.04);
      overflow-y: auto;
      flex-shrink: 0;
      padding: 18px 10px;
    }

    .member-cat {
      padding: 12px 10px 6px;
      font-family: var(--font-head);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .member-row {
      padding: 8px 10px;
      margin: 2px 0;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      border: 1px solid transparent;
      transition: background var(--transition), border-color var(--transition);
      user-select: none;
    }

    .member-row:hover {
      background: rgba(0, 200, 255, 0.08);
      border-color: rgba(0, 200, 255, 0.12);
    }

    .member-av {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      position: relative;
    }

    .member-name {
      font-size: 13px;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .member-name.muted {
      color: var(--text-muted);
    }

    /* ── Toast ── */
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(0);
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      border-radius: 10px;
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 500;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      z-index: 9999;
      animation: toastIn 0.25s ease;
      white-space: nowrap;
    }

    .toast.error {
      border-color: var(--red);
      color: #ff8a80;
    }

    .toast.success {
      border-color: var(--green);
      color: var(--green);
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
      }

      to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
    }

    .push-stack {
      position: fixed;
      top: 16px;
      right: 16px;
      width: min(340px, calc(100vw - 24px));
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 12000;
    }

    .push-note {
      background: #000000;
      border: 1px solid rgba(0, 200, 255, 0.4);
      border-radius: 10px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
      padding: 10px 12px;
      cursor: pointer;
      animation: pushIn 0.18s ease;
    }

    .push-note:hover {
      border-color: rgba(0, 200, 255, 0.8);
    }

    .push-title {
      font-family: var(--font-head);
      font-size: 11px;
      letter-spacing: 0.8px;
      color: var(--text);
      text-transform: uppercase;
    }

    .push-body {
      margin-top: 4px;
      font-size: 13px;
      color: var(--text-2);
      word-break: break-word;
    }

    .push-meta {
      margin-top: 5px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .push-note.fade-out {
      opacity: 0;
      transform: translateY(-5px);
      transition: opacity 0.16s ease, transform 0.16s ease;
    }

    @keyframes pushIn {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── Modal ── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      animation: fadeIn 0.15s ease;
    }

    .modal-overlay[hidden] {
      display: none !important;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    .modal {
      background: var(--bg);
      border: 1px solid rgba(0, 200, 255, 0.3);
      border-radius: 14px;
      padding: 28px;
      width: 380px;
      animation: slideUp 0.2s ease;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    }

    .modal h3 {
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 18px;
      color: var(--text);
    }

    .modal-input {
      width: 100%;
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      border-radius: var(--radius);
      padding: 10px 13px;
      font-size: 14px;
      color: var(--text);
      margin-bottom: 14px;
      transition: border-color var(--transition);
    }

    .modal-input:focus {
      border-color: var(--brand);
    }

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

    .btn-ghost {
      padding: 8px 16px;
      border-radius: var(--radius);
      font-size: 13px;
      color: var(--text-muted);
      transition: background var(--transition), color var(--transition);
    }

    .btn-ghost:hover {
      background: var(--bg-4);
      color: var(--text);
    }

    .btn-confirm {
      padding: 8px 16px;
      border-radius: var(--radius);
      font-size: 13px;
      background: var(--brand);
      color: white;
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      transition: background var(--transition);
    }

    .btn-confirm:hover {
      background: var(--brand-dim);
    }

    .changelog-modal {
      width: min(860px, calc(100vw - 32px));
      max-height: min(84vh, 920px);
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .changelog-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 22px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(255, 255, 255, 0.02);
    }

    .changelog-modal-title {
      font-family: var(--font-head);
      font-size: 14px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--brand);
    }

    .changelog-modal-body {
      padding: 22px;
      overflow: auto;
      color: var(--text-2);
      line-height: 1.8;
    }

    .changelog-modal-body>*+* {
      margin-top: 14px;
    }

    .changelog-modal-body h1,
    .changelog-modal-body h2,
    .changelog-modal-body h3 {
      font-family: var(--font-head);
      color: var(--text);
      line-height: 1.2;
    }

    .changelog-modal-body h1 {
      font-size: 24px;
    }

    .changelog-modal-body h2 {
      font-size: 18px;
      margin-top: 20px;
    }

    .changelog-modal-body h3 {
      font-size: 15px;
      margin-top: 16px;
    }

    .changelog-modal-body p {
      margin: 0;
    }

    .changelog-modal-body ul,
    .changelog-modal-body ol {
      padding-left: 20px;
      display: grid;
      gap: 8px;
    }

    .changelog-modal-body li::marker {
      color: var(--brand);
    }

    .changelog-modal-body a {
      color: var(--brand);
      text-decoration: none;
    }

    .changelog-modal-body a:hover {
      text-decoration: underline;
    }

    .changelog-modal-body code {
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.06);
    }

    .changelog-modal-body pre {
      overflow-x: auto;
      padding: 14px 16px;
      border-radius: 8px;
      background: var(--bg-2);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .changelog-modal-body blockquote {
      margin: 0;
      padding: 12px 16px;
      border-left: 2px solid var(--brand);
      background: rgba(0, 200, 255, 0.05);
      color: var(--text-2);
    }

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

    .link-open-modal {
      width: min(520px, calc(100vw - 28px));
    }

    .link-open-title {
      font-family: var(--font-head);
      font-size: 13px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .link-open-url {
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      border-radius: 8px;
      color: var(--hover);
      font-size: 12px;
      line-height: 1.35;
      padding: 10px 11px;
      word-break: break-all;
      margin-bottom: 12px;
    }

    .link-open-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .community-hub-modal {
      width: min(1180px, calc(100vw - 24px));
      max-height: min(88vh, 960px);
      padding: 0;
      overflow: hidden;
    }

    .community-hub-inline {
      width: 100%;
      height: 100%;
    }

    .community-hub-stage {
      min-height: 0;
      height: 100%;
      padding: 0;
    }

    .community-hub-inline .community-hub-shell {
      min-height: 100%;
      height: 100%;
    }

    .community-hub-shell {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      min-height: min(88vh, 960px);
    }

    .community-hub-nav {
      padding: 18px 14px;
      background: linear-gradient(180deg, rgba(0, 200, 255, 0.06), rgba(0, 0, 0, 0));
      border-right: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .community-nav-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      color: var(--text-muted);
      background: transparent;
      transition: background var(--transition), color var(--transition), transform 0.12s ease;
      text-align: left;
    }

    .community-nav-btn:hover {
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
    }

    .community-nav-btn.active {
      background: rgba(0, 200, 255, 0.12);
      color: var(--text);
    }

    .community-nav-btn .ui-icon {
      flex-shrink: 0;
    }

    .community-hub-panel {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .community-hub-header {
      padding: 20px 22px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .community-hub-title {
      font-family: var(--font-head);
      font-size: 15px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--brand);
    }

    .community-hub-subtitle {
      margin-top: 6px;
      color: var(--text-muted);
      font-size: 12px;
    }

    .community-hub-status {
      margin-top: 8px;
      color: var(--text-2);
      font-size: 11px;
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }

    .community-hub-content {
      padding: 18px 22px 22px;
      overflow: auto;
      flex: 1;
      display: grid;
      gap: 14px;
    }

    .community-hub-footer {
      padding: 14px 22px 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      justify-content: flex-end;
    }

    .community-filter-row,
    .community-workspace-head,
    .community-secret-row,
    .community-workspace-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .community-search-input,
    .community-select,
    .community-input,
    .community-workspace-editor {
      width: 100%;
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      border-radius: 10px;
      padding: 10px 12px;
      color: var(--text);
      font-size: 13px;
    }

    .community-search-input:focus,
    .community-select:focus,
    .community-input:focus,
    .community-workspace-editor:focus {
      border-color: var(--brand);
    }

    .community-search-scope,
    .community-select {
      min-width: 180px;
    }

    .community-checkbox {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      color: var(--text-2);
      font-size: 12px;
    }

    .community-checkbox input {
      accent-color: var(--brand);
    }

    .community-results-list {
      display: grid;
      gap: 10px;
    }

    .community-empty {
      padding: 18px;
      border-radius: 12px;
      border: 1px dashed rgba(255, 255, 255, 0.12);
      color: var(--text-muted);
      font-size: 13px;
      line-height: 1.6;
    }

    .community-card,
    .community-result-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      padding: 14px;
      display: grid;
      gap: 10px;
    }

    .community-result-card {
      text-align: left;
      color: inherit;
      transition: border-color var(--transition), transform 0.12s ease, background var(--transition);
    }

    .community-result-card:hover {
      border-color: rgba(0, 200, 255, 0.36);
      background: rgba(0, 200, 255, 0.05);
      transform: translateY(-1px);
    }

    .community-result-head {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .community-result-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      flex-shrink: 0;
      overflow: hidden;
    }

    .community-result-meta {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .community-result-title {
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .community-result-subtitle,
    .community-delivery-meta,
    .community-revision-meta {
      color: var(--text-muted);
      font-size: 12px;
    }

    .community-result-content,
    .community-delivery-title,
    .community-revision-title {
      color: var(--text-2);
      font-size: 13px;
      line-height: 1.6;
    }

    .community-result-reply,
    .community-secret-copy {
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .community-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .community-workspace-head {
      justify-content: space-between;
      align-items: flex-end;
    }

    .community-workspace-meta {
      display: grid;
      gap: 6px;
      min-width: 220px;
      flex: 1;
    }

    .community-workspace-label,
    .community-secret-title,
    .community-section-title,
    .community-workspace-section-title {
      font-family: var(--font-head);
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .community-workspace-actions {
      justify-content: flex-end;
    }

    .community-workspace-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
      gap: 14px;
      align-items: start;
    }

    .community-workspace-toolbar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-bottom: 14px;
    }

    .community-workspace-pane {
      display: grid;
      gap: 12px;
    }

    .community-workspace-context {
      display: grid;
      gap: 8px;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(0, 200, 255, 0.08);
      background: linear-gradient(180deg, rgba(7, 15, 20, 0.94), rgba(0, 0, 0, 0.92));
    }

    .community-workspace-context-note {
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .community-workspace-side {
      display: grid;
      gap: 12px;
    }

    .community-workspace-modebar {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .community-workspace-mode-btn {
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
      color: var(--text-2);
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 700;
    }

    .community-workspace-mode-btn.active {
      background: rgba(0, 200, 255, 0.12);
      border-color: rgba(0, 200, 255, 0.26);
      color: var(--text);
    }

    .community-workspace-editor {
      min-height: 320px;
      resize: vertical;
      font-family: var(--font-body);
      line-height: 1.6;
    }

    .community-workspace-editor-shell {
      position: relative;
      display: block;
      border: 1px solid var(--bg-5);
      border-radius: 10px;
      background: var(--bg-4);
      overflow: hidden;
    }

    .community-workspace-editor-shell.code {
      border-radius: 12px;
      border-color: rgba(255, 255, 255, 0.08);
      background: #090909;
    }

    .community-workspace-editor-shell .community-workspace-editor {
      position: relative;
      z-index: 2;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-sizing: border-box;
      overflow-wrap: normal;
      word-break: normal;
      font-variant-ligatures: none;
    }

    .community-workspace-editor.code {
      font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
      tab-size: 4;
      white-space: pre;
      color: transparent;
      -webkit-text-fill-color: transparent;
      caret-color: var(--text);
      overflow-wrap: normal;
      word-break: normal;
      font-variant-ligatures: none;
    }

    .community-workspace-editor-shell.code .community-workspace-editor {
      padding: 14px 16px;
      min-height: 320px;
      line-height: 1.6;
      overflow: auto;
    }

    .community-workspace-code-mirror {
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 14px 16px;
      border-radius: 0;
      border: 0;
      background: transparent;
      color: #d9f7ff;
      font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
      font-size: 13px;
      line-height: 1.6;
      tab-size: 4;
      white-space: pre;
      overflow-wrap: normal;
      word-break: normal;
      font-variant-ligatures: none;
      overflow: auto;
      pointer-events: none;
      z-index: 1;
      scrollbar-width: none;
    }

    .community-workspace-code-mirror::-webkit-scrollbar {
      display: none;
    }

    .community-workspace-code-mirror.is-empty {
      color: rgba(255, 255, 255, 0.45);
    }

    .community-workspace-preview {
      min-height: 180px;
      margin: 0;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: #050709;
      color: #d9f7ff;
      font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
      font-size: 12px;
      line-height: 1.65;
      white-space: pre-wrap;
      overflow: auto;
    }

    .community-workspace-preview.is-empty {
      color: rgba(255, 255, 255, 0.45);
    }

    .community-syntax-keyword {
      color: #5cc8ff;
    }

    .community-syntax-string {
      color: #8dff95;
    }

    .community-syntax-comment {
      color: #6f7f8a;
    }

    .community-syntax-number {
      color: #ffcb6b;
    }

    .community-syntax-tag {
      color: #ff7ab8;
    }

    .community-syntax-boolean {
      color: #c792ea;
    }

    .community-syntax-key {
      color: #82aaff;
    }

    .community-revisions,
    .community-delivery-list {
      display: grid;
      gap: 10px;
    }

    .community-revision-row,
    .community-delivery-row {
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(0, 0, 0, 0.18);
    }

    .community-secret-panel {
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(0, 200, 255, 0.18);
      background: rgba(0, 200, 255, 0.05);
      display: grid;
      gap: 10px;
    }

    .community-secret-row .community-input {
      flex: 1;
    }

    .member-row-main {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1;
    }

    .member-role-select {
      min-width: 102px;
      max-width: 120px;
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      border-radius: 999px;
      padding: 6px 8px;
      color: var(--text);
      font-size: 11px;
    }

    .mini-pill {
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(0, 200, 255, 0.12);
      color: var(--hover);
      font-size: 10px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
    }

    .suggestion-pill {
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
      color: var(--text);
      font-size: 10px;
      letter-spacing: 0;
    }

    .msg-pin-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(0, 200, 255, 0.12);
      color: var(--hover);
      font-size: 10px;
      letter-spacing: 0.6px;
      text-transform: uppercase;
    }

    .msg-pin-badge .ui-icon {
      width: 12px;
      height: 12px;
    }

    .act-btn.active {
      background: rgba(0, 200, 255, 0.2);
      border-color: rgba(0, 200, 255, 0.28);
      color: var(--hover);
    }

    .act-btn.active:hover {
      background: rgba(0, 200, 255, 0.28);
    }

    .settings-modal {
      width: min(560px, calc(100vw - 32px));
      padding: 0;
      overflow: hidden;
    }

    .server-settings-modal {
      width: min(760px, calc(100vw - 40px));
      border-color: rgba(0, 200, 255, 0.12);
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 200, 255, 0.08);
    }

    .server-settings-hub-modal {
      width: min(980px, calc(100vw - 40px));
      border-color: rgba(0, 200, 255, 0.12);
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 200, 255, 0.08);
    }

    .server-settings-hub-shell {
      min-height: min(78vh, 740px);
    }

    .server-settings-hub-nav {
      background:
        linear-gradient(180deg, rgba(5, 12, 18, 0.98), rgba(0, 0, 0, 0.98));
    }

    .server-settings-hub-panel {
      background: linear-gradient(180deg, rgba(4, 10, 14, 0.96), rgba(0, 0, 0, 0.99));
    }

    .settings-head {
      padding: 22px 24px 18px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      background:
        linear-gradient(180deg, rgba(5, 11, 16, 0.98), rgba(1, 4, 6, 0.98));
    }

    .server-settings-head {
      padding: 22px 24px 18px;
      background:
        radial-gradient(circle at top right, rgba(0, 200, 255, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(6, 14, 19, 0.98), rgba(0, 0, 0, 0.98));
    }

    .settings-title {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.3px;
      text-transform: none;
    }

    .settings-subtitle {
      margin-top: 6px;
      color: rgba(255, 255, 255, 0.62);
      font-size: 13px;
      line-height: 1.5;
    }

    .settings-body {
      padding: 18px 20px 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .server-settings-body {
      padding: 20px 24px 18px;
      gap: 16px;
      background: linear-gradient(180deg, rgba(4, 10, 14, 0.94), rgba(0, 0, 0, 0.98));
    }

    .server-settings-hub-content {
      gap: 18px;
    }

    .server-settings-stack {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .server-settings-body>.settings-icon-row,
    .server-settings-body>.settings-field,
    .server-settings-body>.settings-toggle,
    .server-settings-body>.settings-extra-section {
      padding: 15px 16px;
      border-radius: 16px;
      border: 1px solid rgba(0, 200, 255, 0.08);
      background: linear-gradient(180deg, rgba(7, 15, 20, 0.94), rgba(0, 0, 0, 0.92));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    .settings-extra-section {
      margin-top: 4px;
      padding-top: 16px;
      border-top: 1px solid rgba(0, 200, 255, 0.12);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .server-settings-body>.settings-extra-section {
      margin-top: 0;
      padding-top: 16px;
    }

    .settings-icon-row {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .settings-icon-preview {
      width: 78px;
      height: 78px;
      border-radius: 22px;
      background: rgba(0, 200, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.16);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }

    .settings-icon-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .settings-icon-fallback {
      font-family: var(--font-head);
      font-size: 22px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.88);
      text-transform: uppercase;
    }

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

    .settings-icon-label {
      font-family: var(--font-head);
      color: var(--text-2);
      font-size: 10px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .settings-icon-help {
      color: var(--text-muted);
      font-size: 12px;
    }

    .settings-upload-actions {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .btn-soft {
      padding: 9px 13px;
      border-radius: 12px;
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      color: var(--text-2);
      font-size: 12px;
      transition: border-color var(--transition), color var(--transition), background var(--transition);
    }

    .btn-soft:hover {
      border-color: var(--brand);
      color: var(--text);
      background: rgba(0, 200, 255, 0.2);
    }

    .btn-soft:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .btn-danger-ghost {
      border-color: rgba(231, 76, 60, 0.45);
      color: #ff988e;
    }

    .btn-danger-ghost:hover {
      background: rgba(231, 76, 60, 0.14);
      border-color: rgba(231, 76, 60, 0.75);
    }

    .settings-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .settings-field label {
      font-family: var(--font-head);
      color: var(--text-muted);
      font-size: 10px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
    }

    .settings-input {
      width: 100%;
      background: rgba(255, 255, 255, 0.028);
      border: 1px solid var(--bg-5);
      border-radius: 14px;
      padding: 12px 14px;
      color: var(--text);
      font-size: 14px;
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    .settings-input:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.25);
    }

    .settings-error {
      border: 1px solid rgba(231, 76, 60, 0.36);
      background: rgba(231, 76, 60, 0.15);
      color: #ff9d94;
      font-size: 12px;
      border-radius: 8px;
      padding: 8px 10px;
    }

    .settings-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding: 16px 24px 20px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.18));
    }

    .server-settings-modal .settings-actions {
      padding: 16px 24px 20px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.96));
    }

    .server-settings-footer {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.96));
    }

    .settings-textarea {
      width: 100%;
      min-height: 90px;
      resize: vertical;
      background: rgba(255, 255, 255, 0.028);
      border: 1px solid var(--bg-5);
      border-radius: 14px;
      padding: 12px 14px;
      color: var(--text);
      font-size: 14px;
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    .settings-textarea:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(0, 200, 255, 0.25);
    }

    .settings-toggle {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 14px 15px;
      background: rgba(255, 255, 255, 0.02);
    }

    .settings-toggle-main {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .settings-toggle-title {
      color: var(--text-2);
      font-size: 13px;
      font-weight: 600;
    }

    .settings-toggle-help {
      color: rgba(255, 255, 255, 0.62);
      font-size: 12px;
      line-height: 1.55;
    }

    .settings-switch {
      width: 44px;
      height: 24px;
      border-radius: 999px;
      background: var(--bg-5);
      border: 1px solid rgba(255, 255, 255, 0.16);
      position: relative;
      cursor: pointer;
      transition: background var(--transition), border-color var(--transition);
    }

    .settings-switch:active {
      transform: scale(0.98);
    }

    .settings-switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: transform var(--transition);
    }

    .settings-switch.on {
      background: rgba(46, 204, 113, 0.28);
      border-color: rgba(46, 204, 113, 0.75);
    }

    .settings-switch.on::after {
      transform: translateX(20px);
    }

    .settings-hub-modal {
      width: min(860px, calc(100vw - 32px));
      height: min(74vh, 680px);
      max-height: min(74vh, 680px);
      border-color: rgba(0, 200, 255, 0.14);
      box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255, 255, 255, 0.03);
      padding: 0;
      overflow: hidden;
    }

    .settings-hub-shell {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      height: 100%;
      background:
        radial-gradient(circle at top right, rgba(0, 200, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(5, 10, 14, 0.985), rgba(0, 0, 0, 0.99));
    }

    .settings-hub-nav {
      background:
        linear-gradient(180deg, rgba(4, 11, 16, 0.98), rgba(1, 5, 8, 0.98));
      border-right: 1px solid rgba(255, 255, 255, 0.05);
      padding: 22px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .settings-hub-nav-title {
      font-family: var(--font-head);
      font-size: 10px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      color: var(--text-muted);
      padding: 0 10px 10px;
    }

    .settings-hub-nav-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 14px;
      border-radius: 14px;
      color: var(--text-2);
      font-size: 14px;
      border: 1px solid rgba(255, 255, 255, 0.02);
      background: rgba(255, 255, 255, 0.01);
      transition: background var(--transition), border-color var(--transition), color var(--transition), transform 0.14s ease;
    }

    .settings-hub-nav-btn:hover,
    .settings-hub-nav-btn.active {
      background: linear-gradient(135deg, rgba(0, 200, 255, 0.16), rgba(0, 200, 255, 0.08));
      border-color: rgba(0, 200, 255, 0.22);
      color: var(--text);
      transform: translateX(2px);
    }

    .settings-hub-nav-btn.is-disabled,
    .settings-hub-nav-btn:disabled {
      opacity: 0.42;
      cursor: not-allowed;
      background: transparent;
      border-color: transparent;
      color: var(--text-muted);
      box-shadow: none;
    }

    .settings-hub-nav-btn.is-disabled:hover,
    .settings-hub-nav-btn:disabled:hover {
      background: transparent;
      border-color: transparent;
      color: var(--text-muted);
    }

    .settings-hub-panel {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      background: linear-gradient(180deg, rgba(3, 8, 12, 0.96), rgba(0, 0, 0, 0.985));
    }

    .settings-hub-content {
      flex: 1;
      min-height: 0;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      overflow: auto;
    }

    .settings-section-kicker {
      font-family: var(--font-head);
      font-size: 10px;
      letter-spacing: 1.7px;
      text-transform: uppercase;
      color: var(--brand);
    }

    .settings-section-intro {
      margin-top: -8px;
      color: rgba(255, 255, 255, 0.68);
      font-size: 14px;
      line-height: 1.65;
      max-width: 62ch;
    }

    .settings-card {
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .settings-card-muted {
      opacity: 0.82;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.012));
      border-style: solid;
    }

    .settings-card-copy {
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      line-height: 1.65;
    }

    .settings-meta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
    }

    .settings-meta-chip {
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.02);
      padding: 13px 14px;
    }

    .settings-meta-label {
      font-family: var(--font-head);
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .settings-meta-value {
      margin-top: 6px;
      color: var(--text);
      font-size: 13px;
      word-break: break-word;
    }

    .settings-inline-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .settings-section-stack {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .ai-token-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .ai-token-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: start;
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.018);
      padding: 16px;
    }

    .ai-token-row.is-revoked {
      opacity: 0.72;
    }

    .ai-token-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .ai-token-name {
      color: var(--text);
      font-weight: 700;
      letter-spacing: 0.2px;
      word-break: break-word;
    }

    .ai-token-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--text-muted);
      font-size: 12px;
    }

    .ai-token-pill {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(0, 200, 255, 0.18);
      background: rgba(0, 200, 255, 0.08);
      color: var(--brand);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.9px;
    }

    .ai-token-pill.is-revoked {
      border-color: rgba(255, 120, 120, 0.22);
      background: rgba(255, 120, 120, 0.12);
      color: #ffb5ad;
    }

    .ai-token-secret-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .ai-token-secret-input {
      min-width: min(100%, 420px);
      flex: 1 1 320px;
      font-family: var(--font-mono);
      letter-spacing: 0.2px;
    }

    .ai-token-actions {
      align-self: start;
    }

    .ai-token-highlight {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px;
      border-radius: 12px;
      border: 1px solid rgba(0, 200, 255, 0.18);
      background: rgba(0, 200, 255, 0.06);
    }

    .settings-warning-copy {
      color: #ffb5ad;
      font-size: 13px;
      line-height: 1.6;
    }

    .edge-warning-modal {
      width: min(560px, calc(100vw - 32px));
    }

    .edge-warning-title {
      font-family: var(--font-head);
      font-size: 13px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #ffcf9b;
      margin-bottom: 12px;
    }

    .edge-warning-copy {
      color: var(--text-2);
      font-size: 14px;
      line-height: 1.7;
      white-space: pre-line;
      margin-bottom: 18px;
    }

    .edge-shell {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: radial-gradient(circle at top, rgba(0, 200, 255, 0.08), transparent 40%), #020407;
    }

    .edge-shell-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 18px;
      border-bottom: 1px solid rgba(0, 200, 255, 0.18);
      background: rgba(0, 0, 0, 0.76);
      backdrop-filter: blur(10px);
    }

    .edge-shell-copy {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .edge-shell-kicker {
      font-family: var(--font-head);
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #ffcf9b;
    }

    .edge-shell-title {
      color: var(--text);
      font-size: 15px;
      font-weight: 700;
    }

    .edge-shell-subtitle {
      color: var(--text-muted);
      font-size: 12px;
    }

    .edge-shell-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .edge-shell-frame-wrap {
      flex: 1;
      padding: 16px;
    }

    .edge-shell-frame {
      width: 100%;
      height: calc(100vh - 92px);
      border: 1px solid rgba(0, 200, 255, 0.18);
      border-radius: 18px;
      background: #010204;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    }

    .edge-shell-empty {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px;
    }

    .edge-shell-empty-card {
      width: min(560px, 100%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.03);
      padding: 24px;
      text-align: center;
    }

    @media (max-width: 860px) {
      .settings-hub-shell {
        grid-template-columns: 1fr;
      }

      .settings-hub-nav {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .edge-shell-frame {
        height: calc(100vh - 150px);
      }
    }

    .directory-modal {
      width: min(780px, calc(100vw - 30px));
      max-height: min(86vh, 760px);
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
    }

    .directory-head {
      padding: 16px 18px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: #000000;
    }

    .directory-title {
      font-family: var(--font-head);
      font-size: 13px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: var(--text);
    }

    .directory-subtitle {
      margin-top: 4px;
      color: var(--text-muted);
      font-size: 12px;
    }

    .directory-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px 16px;
      overflow: auto;
    }

    .directory-search {
      width: 100%;
      background: var(--bg-4);
      border: 1px solid var(--bg-5);
      border-radius: 9px;
      padding: 10px 12px;
    }

    .directory-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .directory-card {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.02);
    }

    .directory-main {
      min-width: 0;
    }

    .directory-name {
      color: var(--text);
      font-weight: 600;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .directory-meta {
      color: var(--text-muted);
      font-size: 12px;
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .directory-bio {
      margin-top: 4px;
      color: var(--text-2);
      font-size: 12px;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .directory-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .directory-empty {
      border: 1px dashed rgba(255, 255, 255, 0.16);
      border-radius: 10px;
      padding: 14px;
      text-align: center;
      color: var(--text-muted);
      font-size: 12px;
    }

    .dir-pill {
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 10px;
      color: var(--text-muted);
      font-family: var(--font-head);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .dir-pill.suggestion-pill {
      color: var(--text);
      background: rgba(255, 255, 255, 0.1);
      letter-spacing: 0;
      text-transform: none;
    }

    /* ── Loading spinner ── */
    .spinner {
      width: 24px;
      height: 24px;
      border: 2px solid rgba(0, 200, 255, 0.2);
      border-top-color: var(--brand);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      margin: auto;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .loading-overlay {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ── DM list ── */
    .dm-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px 0;
    }

    .dm-item {
      margin: 2px 6px;
      padding: 10px 12px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: background var(--transition);
    }

    .dm-item:hover {
      background: var(--bg-4);
    }

    .dm-item.active {
      background: rgba(0, 200, 255, 0.2);
    }

    .dm-av {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: var(--brand);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      position: relative;
    }

    .dm-name {
      font-size: 14px;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* No channel selected */
    .no-channel {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      color: var(--text-muted);
    }

    .no-channel .nc-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      opacity: 0.3;
    }

    .no-channel .nc-icon .ui-icon {
      width: 64px;
      height: 64px;
    }

    .no-channel h3 {
      font-family: var(--font-head);
      font-size: 15px;
      font-weight: 700;
      color: var(--text-2);
    }

    .no-channel p {
      font-size: 13px;
      line-height: 1.7;
      max-width: 520px;
    }

    /* Voice channel view */
    .voice-view {
      flex: 1;
      width: min(100%, 960px);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 8px 0 0;
      overflow-y: auto;
    }

    .voice-hero {
      border: 1px solid rgba(0, 200, 255, 0.32);
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(0, 200, 255, 0.08), rgba(255, 255, 255, 0.02));
      padding: 18px 18px;
      box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
    }

    .voice-hero-title {
      font-family: var(--font-head);
      font-size: 14px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: var(--text);
    }

    .voice-hero-sub {
      margin-top: 6px;
      font-size: 13px;
      color: var(--text-muted);
    }

    .voice-controls {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .voice-btn {
      border: 1px solid var(--bg-5);
      background: var(--bg-4);
      color: var(--text-2);
      border-radius: 9px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      transition: background var(--transition), color var(--transition), border-color var(--transition);
    }

    .voice-btn:hover {
      background: var(--bg-5);
      color: var(--text);
    }

    .voice-btn.primary {
      border-color: rgba(46, 204, 113, 0.7);
      background: rgba(46, 204, 113, 0.22);
      color: #8ef4bf;
    }

    .voice-btn.primary:hover {
      border-color: rgba(46, 204, 113, 1);
      background: rgba(46, 204, 113, 0.34);
    }

    .voice-btn.danger {
      border-color: rgba(231, 76, 60, 0.7);
      background: rgba(231, 76, 60, 0.2);
      color: #ff9b8e;
    }

    .voice-btn.danger:hover {
      border-color: rgba(231, 76, 60, 1);
      background: rgba(231, 76, 60, 0.3);
    }

    .voice-panel {
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.02);
      overflow: hidden;
    }

    .voice-panel-head {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-family: var(--font-head);
      font-size: 11px;
      letter-spacing: 1px;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    .voice-participants {
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .voice-user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 8px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.03);
      transition: background var(--transition), box-shadow var(--transition);
    }

    .voice-user-name {
      font-size: 13px;
      color: var(--text-2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .voice-user.speaking {
      background: rgba(0, 200, 255, 0.12);
      box-shadow: 0 0 0 1px rgba(0, 200, 255, 0.24) inset;
    }

    .voice-speaking-indicator {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--hover);
      font-family: var(--font-head);
      font-size: 9px;
      letter-spacing: 0.8px;
      text-transform: uppercase;
    }

    .voice-speaking-bars {
      display: inline-flex;
      align-items: flex-end;
      gap: 2px;
      height: 12px;
    }

    .voice-speaking-bars span {
      width: 2px;
      border-radius: 999px;
      background: currentColor;
      animation: voiceSpeak 0.9s ease-in-out infinite;
    }

    .voice-speaking-bars span:nth-child(1) {
      height: 5px;
    }

    .voice-speaking-bars span:nth-child(2) {
      height: 10px;
      animation-delay: 0.12s;
    }

    .voice-speaking-bars span:nth-child(3) {
      height: 7px;
      animation-delay: 0.24s;
    }

    @keyframes voiceSpeak {

      0%,
      100% {
        transform: scaleY(0.55);
        opacity: 0.55;
      }

      50% {
        transform: scaleY(1.15);
        opacity: 1;
      }
    }

    .voice-you {
      margin-left: auto;
      font-size: 10px;
      color: var(--hover);
      font-family: var(--font-head);
      letter-spacing: 0.6px;
      text-transform: uppercase;
    }

    .voice-empty {
      padding: 12px;
      color: var(--text-muted);
      font-size: 12px;
    }

    .gif-picker-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .gif-picker-card {
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.02);
      transition: border-color var(--transition), transform 0.12s ease;
    }

    .gif-picker-card:hover {
      border-color: rgba(0, 200, 255, 0.28);
      transform: translateY(-1px);
    }

    .gif-picker-card img {
      width: 100%;
      aspect-ratio: 1.2;
      object-fit: cover;
      display: block;
      background: var(--bg-4);
    }

    .gif-picker-card-copy {
      padding: 8px 10px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .gif-picker-card-title {
      min-width: 0;
      font-size: 12px;
      color: var(--text-2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .gif-picker-search {
      margin-bottom: 12px;
    }

    .gif-picker-url {
      margin: 12px 0 14px;
      display: grid;
      gap: 8px;
    }

    .gif-picker-hint {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* ws indicator */
    .ws-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .ws-dot.on {
      background: var(--green);
    }

    .ws-dot.off {
      background: var(--red);
    }

    @media (max-width: 1100px) {
      .member-sidebar {
        display: none;
      }

      :root {
        --sidebar-icons: 58px;
        --sidebar-channels: 210px;
      }
    }

    @media (max-width: 820px) {
      :root {
        --sidebar-icons: 54px;
        --sidebar-channels: 180px;
        --header-h: 48px;
      }

      .server-pill,
      .server-pill-add,
      .sidebar-logo {
        width: 40px;
        height: 40px;
      }

      .icon-core {
        width: 26px;
        height: 26px;
        border-radius: 8px;
      }

      .ch-item {
        margin: 1px 4px;
      }

      .community-workspace-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 680px) {
      html, body { overflow: hidden; height: 100%; position: fixed; width: 100%; }
      #app { height: 100vh; overflow: hidden; }

      .app-layout {
        display: block;
        position: relative;
        height: 100vh;
        overflow: hidden;
      }

      /* Sidebars as Drawer */
      .icon-sidebar,
      .channel-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 2000;
        height: 100vh;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 15px 0 35px rgba(0,0,0,0.6);
      }

      .icon-sidebar {
        left: 0;
        width: 72px;
        flex-direction: column;
        padding: 12px 0;
        background: var(--bg-2);
        border-right: 1px solid rgba(255,255,255,0.06);
        transform: translateX(-100%);
        overflow-y: auto;
        overflow-x: hidden;
      }

      .channel-sidebar {
        left: 72px;
        width: 240px;
        background: var(--bg);
        transform: translateX(-312px); /* 72 + 240 */
      }

      .app-layout.mobile-sidebar-open .icon-sidebar,
      .app-layout.mobile-sidebar-open .channel-sidebar {
        transform: translateX(0);
      }

      /* Overlay */
      .mobile-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.65);
        backdrop-filter: blur(4px);
        z-index: 1999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }
      .app-layout.mobile-sidebar-open .mobile-sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
      }

      /* Adjustments for Modern Shell Rows on Mobile Sidebar */
      .sidebar-brand-row,
      .sidebar-nav-row {
        min-width: 0;
        width: 100%;
        border-radius: 0 !important;
        padding: 8px !important;
        justify-content: center !important;
      }
      .sidebar-nav-copy,
      .sidebar-brand-copy,
      .sidebar-section-title,
      .sidebar-nav-meta {
        display: none !important;
      }

      /* Chat Area */
      .chat-main {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100vh;
        z-index: 10;
        background: var(--bg);
      }

      .chat-topbar {
        padding: 0 12px !important;
        height: var(--header-h) !important;
      }
      .chat-topbar-copy {
        gap: 8px !important;
      }
      .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        color: var(--text-2);
        margin-right: 4px;
        flex-shrink: 0;
      }

      /* Message Tweaks */
      .msg-group {
        padding: 8px 12px !important;
      }
      .msg-av {
        width: 34px !important;
        height: 34px !important;
      }
      .msg-content {
        font-size: 15px !important;
      }

      /* Hide elements */
      .member-sidebar { display: none !important; }
      .sidebar-flex-spacer { display: none; }

      /* Community & Modals */
      .community-workspace-grid {
        grid-template-columns: 1fr !important;
      }
      .directory-modal,
      .modal,
      .settings-hub-modal {
        width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 20px) !important;
        margin: 10px auto;
      }
      .directory-card {
        grid-template-columns: 1fr !important;
        align-items: flex-start !important;
      }
      .directory-actions {
        justify-content: flex-start !important;
      }
    }

    .mobile-menu-btn { display: none; }


    /* ── Shared Shell Refresh ── */
    :root {
      --brand: #00c8ff;
      --brand-dim: #0095c0;
      --hover: #27e8ff;
      --bg: #010101;
      --bg-2: #060606;
      --bg-3: #0b0b0b;
      --bg-4: #121212;
      --bg-5: #1a1a1a;
      --text: #ffffff;
      --text-2: rgba(255, 255, 255, 0.9);
      --text-muted: rgba(255, 255, 255, 0.5);
      --radius: 14px;
      --sidebar-icons: 286px;
      --sidebar-channels: 238px;
      --sidebar-members: 248px;
      --header-h: 58px;
      --input-h: 70px;
      --transition: 0.18s ease;
    }

    body {
      background:
        radial-gradient(circle at top, rgba(0, 200, 255, 0.11), transparent 28%),
        linear-gradient(180deg, #050505 0%, #010101 42%, #000000 100%);
      color: var(--text-2);
    }

    #app {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 14%),
        linear-gradient(90deg, rgba(0, 200, 255, 0.03), rgba(0, 0, 0, 0) 24%);
    }

    button,
    input,
    textarea,
    select {
      transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
    }

    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
      outline: 2px solid rgba(0, 200, 255, 0.72);
      outline-offset: 2px;
    }

    .boot-loader,
    .auth-view {
      background:
        radial-gradient(circle at top, rgba(0, 200, 255, 0.12), rgba(0, 0, 0, 0) 24%),
        linear-gradient(180deg, #040404 0%, #000000 100%);
    }

    .auth-card,
    .modal,
    .directory-modal,
    .community-hub-modal,
    .settings-hub-modal,
    .edge-warning-modal,
    .link-open-modal {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
        rgba(4, 4, 4, 0.96);
      border-color: rgba(0, 200, 255, 0.18);
      box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.64),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 40px rgba(0, 200, 255, 0.06);
      backdrop-filter: blur(20px);
    }

    .modal-overlay {
      background: rgba(0, 0, 0, 0.82);
      backdrop-filter: blur(8px);
    }

    .app-layout {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0) 30%),
        transparent;
    }

    .topbar-btn,
    .panel-btn,
    .btn-soft,
    .btn-ghost,
    .voice-btn {
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: rgba(255, 255, 255, 0.025);
      color: var(--text-muted);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    }

    .topbar-btn:hover,
    .panel-btn:hover,
    .btn-soft:hover,
    .btn-ghost:hover,
    .voice-btn:hover,
    .status-option:hover {
      background: rgba(0, 200, 255, 0.12);
      border-color: rgba(0, 200, 255, 0.32);
      color: var(--text);
      box-shadow: 0 0 0 1px rgba(0, 200, 255, 0.08) inset, 0 10px 26px rgba(0, 0, 0, 0.24);
    }

    .btn-primary,
    .btn-confirm {
      border: 1px solid rgba(0, 200, 255, 0.28);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(0, 200, 255, 0.88), rgba(0, 149, 192, 0.96));
      color: #00141a;
      box-shadow: 0 14px 32px rgba(0, 200, 255, 0.14);
    }

    .btn-primary:hover,
    .btn-confirm:hover {
      background: linear-gradient(180deg, rgba(39, 232, 255, 0.96), rgba(0, 170, 214, 0.96));
      box-shadow: 0 16px 36px rgba(0, 200, 255, 0.2);
    }

    .btn-primary:active,
    .btn-confirm:active,
    .btn-soft:active,
    .btn-ghost:active,
    .topbar-btn:active,
    .panel-btn:active {
      transform: translateY(1px);
    }

    .modal-input,
    .settings-input,
    .settings-textarea,
    .community-input,
    .directory-search {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .modal-input:focus,
    .settings-input:focus,
    .settings-textarea:focus,
    .community-input:focus,
    .directory-search:focus {
      border-color: rgba(0, 200, 255, 0.5);
      box-shadow:
        0 0 0 3px rgba(0, 200, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .changelog-modal-header,
    .directory-head {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
        rgba(0, 0, 0, 0.88);
    }

    .community-hub-nav,
    .settings-hub-nav {
      background:
        linear-gradient(180deg, rgba(0, 200, 255, 0.08), rgba(0, 0, 0, 0) 34%),
        rgba(255, 255, 255, 0.01);
    }

    .directory-card,
    .voice-panel,
    .voice-hero,
    .gif-picker-card,
    .settings-toggle,
    .edge-release-banner {
      border-color: rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
        rgba(6, 6, 6, 0.92);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    }

    .edge-release-banner {
      border-color: rgba(0, 200, 255, 0.18);
      background:
        linear-gradient(90deg, rgba(0, 200, 255, 0.15), rgba(0, 200, 255, 0.03)),
        rgba(6, 6, 6, 0.92);
    }

    .status-menu {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
        rgba(4, 4, 4, 0.96);
      border-color: rgba(255, 255, 255, 0.08);
      box-shadow: 0 24px 52px rgba(0, 0, 0, 0.58), 0 0 24px rgba(0, 200, 255, 0.04);
    }

    @media (max-width: 1280px) {
      :root {
        --sidebar-icons: 258px;
        --sidebar-channels: 220px;
        --sidebar-members: 228px;
      }
    }

    @media (max-width: 1100px) {
      :root {
        --sidebar-icons: 240px;
        --sidebar-channels: 206px;
      }
    }

    @media (max-width: 860px) {
      :root {
        --sidebar-icons: 220px;
        --sidebar-channels: 190px;
        --header-h: 54px;
      }

      .modal,
      .directory-modal,
      .community-hub-modal,
      .settings-hub-modal {
        width: min(calc(100vw - 22px), 960px);
      }
    }

    @media (max-width: 680px) {
      :root {
        --header-h: 52px;
      }

      #app {
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 10%),
          #000000;
      }

      .app-layout {
        grid-template-rows: auto auto minmax(50vh, 1fr);
      }

      .modal,
      .directory-modal,
      .community-hub-modal,
      .settings-hub-modal {
        width: calc(100vw - 16px);
      }
    }

    .app-layout[data-shell-variant="legacy"] {
      --sidebar-icons: 68px;
      --sidebar-channels: 228px;
      --sidebar-members: 236px;
      --header-h: 52px;
      --input-h: 64px;
    }

    .app-layout[data-shell-variant="legacy"] .icon-sidebar {
      width: var(--sidebar-icons);
      padding: 10px 0;
      gap: 4px;
    }

    .app-layout[data-shell-variant="legacy"] .sidebar-logo,
    .app-layout[data-shell-variant="legacy"] .server-pill,
    .app-layout[data-shell-variant="legacy"] .server-pill-add {
      width: 44px;
      height: 44px;
    }

    .app-layout[data-shell-variant="legacy"] .sidebar-sep {
      width: 28px;
      margin: 4px 0;
    }

    .app-layout[data-shell-variant="legacy"] .server-pill:hover,
    .app-layout[data-shell-variant="legacy"] .server-pill.active {
      border-radius: 14px;
    }

    .app-layout[data-shell-variant="legacy"] .server-pill::before {
      left: -10px;
    }

    .app-layout[data-shell-variant="legacy"] .server-pill:hover::before {
      height: 20px;
    }

    .app-layout[data-shell-variant="legacy"] .server-pill.active::before {
      height: 40px;
    }

    .edge-ui-lab-link {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 1400;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid rgba(124, 236, 255, 0.26);
      background: rgba(8, 19, 27, 0.92);
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
      color: var(--text);
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    }

    .edge-ui-lab-link:hover {
      transform: translateY(-1px);
      border-color: rgba(124, 236, 255, 0.52);
      background: rgba(12, 28, 38, 0.96);
    }

    @media (max-width: 680px) {
      .edge-ui-lab-link {
        right: 14px;
        bottom: 14px;
      }
    }

    /* ── Shared UX Upgrade ── */
    .sidebar-unread-dot {
      width: 8px;
      height: 8px;
      margin-left: auto;
      border-radius: 999px;
      background: #8be8ff;
      box-shadow: 0 0 0 4px rgba(139, 232, 255, 0.12);
      flex-shrink: 0;
    }

    .sidebar-skeleton {
      margin: 12px;
      border-radius: 18px;
      background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      background-size: 220% 100%;
      animation: wyvernSkeleton 1.2s linear infinite;
    }

    .sidebar-skeleton-rail {
      width: calc(100% - 24px);
      height: 52px;
    }

    .sidebar-skeleton-panel {
      width: calc(100% - 24px);
      height: 74px;
    }

    .sidebar-skeleton.tall {
      height: 120px;
    }

    @keyframes wyvernSkeleton {
      0% { background-position: 200% 0; }
      100% { background-position: -20% 0; }
    }

    .member-sidebar.is-drawer {
      position: absolute;
      top: 14px;
      right: 14px;
      bottom: 14px;
      z-index: 12;
      width: min(340px, calc(100vw - 28px));
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 24px;
      background: rgba(5, 9, 14, 0.96);
      box-shadow: 0 28px 80px rgba(0,0,0,0.48);
      transform: translateX(calc(100% + 28px));
      transition: transform 0.2s ease, opacity 0.2s ease;
      opacity: 0;
      overflow-y: auto;
      backdrop-filter: blur(16px);
    }

    .app-layout.member-panel-open .member-sidebar.is-drawer {
      transform: translateX(0);
      opacity: 1;
    }

    .member-drawer-head {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 18px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: rgba(5, 9, 14, 0.96);
      backdrop-filter: blur(16px);
    }

    .member-drawer-title {
      font-family: var(--font-head);
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.74);
    }

    .typing-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 28px;
      padding: 8px 18px 0;
      color: rgba(255,255,255,0.65);
      font-size: 12px;
    }

    .typing-dots {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .typing-dots span {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: rgba(124, 236, 255, 0.72);
      animation: typingPulse 1s ease-in-out infinite;
    }

    .typing-dots span:nth-child(2) { animation-delay: 0.12s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.24s; }

    @keyframes typingPulse {
      0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
      40% { transform: translateY(-3px); opacity: 1; }
    }

    .scroll-jump-btn {
      position: absolute;
      right: 22px;
      bottom: 112px;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(8, 15, 21, 0.94);
      color: rgba(255,255,255,0.88);
      box-shadow: 0 20px 42px rgba(0,0,0,0.32);
    }

    .composer-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 6px 10px;
      flex-wrap: wrap;
    }

    .composer-meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 6px 0;
      color: rgba(255,255,255,0.65);
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .composer-char-count {
      font-variant-numeric: tabular-nums;
    }

    .composer-meta-copy {
      color: rgba(255,255,255,0.58);
    }

    .send-btn {
      min-width: 44px;
      min-height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.6);
      transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
    }

    .send-btn.ready {
      background: rgba(124, 236, 255, 0.14);
      border-color: rgba(124, 236, 255, 0.38);
      color: #eaffff;
    }

    .msg-group {
      position: relative;
      padding-right: 74px;
    }

    .msg-group.is-merged {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .msg-group.is-pending {
      opacity: 0.68;
    }

    .msg-actions {
      top: auto !important;
      right: 14px !important;
      bottom: 10px;
    }

    .reaction-chip {
      background: rgba(255,255,255,0.06) !important;
      border-color: rgba(255,255,255,0.08) !important;
    }

    .reaction-chip.mine {
      background: rgba(124, 236, 255, 0.16) !important;
      border-color: rgba(124, 236, 255, 0.32) !important;
      color: #e9fbff;
    }

    .empty-channel {
      max-width: 520px;
      margin: auto;
      padding: 32px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      text-align: left;
      box-shadow: 0 28px 80px rgba(0,0,0,0.28);
    }

    .empty-channel .empty-kicker {
      margin-bottom: 8px;
      font-family: var(--font-head);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(124, 236, 255, 0.86);
    }

    .empty-channel h4 {
      font-size: 28px;
      line-height: 1.12;
    }

    .empty-channel p {
      margin-top: 12px;
      color: rgba(255,255,255,0.68);
      line-height: 1.72;
    }

    .empty-cta {
      display: inline-flex;
      margin-top: 18px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(124, 236, 255, 0.12);
      color: #e8fbff;
      font-family: var(--font-head);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .empty-icon-brand {
      width: 64px;
      height: 64px;
      padding: 12px;
      border-radius: 20px;
      background: rgba(124, 236, 255, 0.12);
    }

    .empty-icon-brand img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .modal-overlay.modal-overlay-soft {
      background: rgba(0,0,0,0.56);
      backdrop-filter: blur(4px);
    }

    .modal.modal-small {
      width: min(460px, calc(100vw - 24px));
      padding: 24px;
      border-radius: 22px;
    }

    .command-modal-head {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 18px;
    }

    .command-modal-kicker,
    .command-modal-label {
      font-family: var(--font-head);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(124, 236, 255, 0.82);
    }

    .command-modal-title {
      font-size: 26px;
      line-height: 1.14;
    }

    .command-modal-copy {
      color: rgba(255,255,255,0.66);
      line-height: 1.68;
    }

    .command-modal-field {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    @media (max-width: 1100px) {
      .member-sidebar.is-drawer {
        top: 10px;
        right: 10px;
        bottom: 10px;
      }
    }