:root {
  --bg: #0b0d13;
  --panel: #151923;
  --panel2: #1b202d;
  --line: #2b3142;
  --text: #eef1f7;
  --muted: #929bb0;
  --blue: #5865f2;
  --green: #3ba55d;
  --red: #ed4245;
  --yellow: #faa61a;
  --shadow: 0 20px 60px rgba(0, 0, 0, .35);
  --radius: 18px
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: radial-gradient(circle at top left, #1b2140 0, #0b0d13 38%, #07080c 100%);
  color: var(--text);
  font-family: Inter, system-ui, Segoe UI, Arial, sans-serif
}

.hidden {
  display: none !important
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px
}

.login-card {
  width: min(430px, 100%);
  background: rgba(21, 25, 35, .88);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px;
  box-shadow: var(--shadow);
  text-align: center
}

.brand-mark {
  place-items: center;
  font-weight: 900
}

.login-card h1 {
  margin: 0 0 10px
}

.login-card p {
  color: var(--muted);
  line-height: 1.5
}

.discord-login,
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: var(--blue);
  color: white;
  font-weight: 800;
  padding: 12px 16px;
  text-decoration: none;
  cursor: pointer
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px;
  border-right: 1px solid var(--line);
  background: rgba(10, 12, 18, .7);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 18px
}

.portal-top {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px
}

.portal-top span {
  display: block;
  color: var(--muted);
  font-size: 12px
}

.home-dot {
  place-items: center;
  color: #fff
}

nav {
  display: flex;
  flex-direction: column;
  gap: 8px
}

nav button,
.ghost-btn,
.soft-btn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 13px;
  text-align: left;
  cursor: pointer
}

nav button.active {
  background: rgba(88, 101, 242, .18);
  border-color: rgba(88, 101, 242, .6)
}

.ghost-btn {
  margin-top: auto;
  text-align: center
}

.main {
  padding: 22px;
  min-width: 0
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  background: rgba(21, 25, 35, .72);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px 20px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .25)
}

h1,
h2,
h3,
p {
  margin-top: 0
}

.topbar h1 {
  margin-bottom: 4px
}

.topbar p,
.panel p {
  margin-bottom: 0;
  color: var(--muted)
}

.profile-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .04);
  padding: 8px 12px;
  border-radius: 16px
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #252b3a
}

.page {
  display: none
}

.page.active {
  display: block
}

.grid {
  display: grid;
  gap: 16px
}

.cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.two {
  grid-template-columns: 1fr 1fr
}

.card,
.panel {
  background: rgba(21, 25, 35, .82);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18)
}

.card {
  padding: 18px
}

.card b {
  font-size: 28px;
  display: block
}

.card span {
  color: var(--muted)
}

.panel {
  padding: 18px;
  margin-bottom: 16px
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px
}

.wrap {
  flex-wrap: wrap
}

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

.search,
input,
textarea,
select,
.full-select {
  background: #0f131c;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  outline: none
}

.search {
  min-width: 280px
}

.member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px
}

.member-card {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer
}

.member-card:hover {
  border-color: var(--blue)
}

.member-main {
  min-width: 0
}

.member-name {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.member-id,
.meta {
  color: var(--muted);
  font-size: 12px
}

.role-pill {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  margin: 4px 4px 0 0;
  font-size: 12px;
  color: #dfe3ee;
  background: rgba(255, 255, 255, .04)
}

.detail-head .role-pill {
  margin-bottom: 10px
}

.detail-head>div>div:nth-child(3) {
  margin-bottom: 14px
}

.perm-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.check-ok,
.check-bad {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line)
}

.check-ok {
  background: rgba(59, 165, 93, .15);
  color: #7ee39b
}

.check-bad {
  background: rgba(237, 66, 69, .15);
  color: #ff8a8c
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 620px;
  overflow: auto
}

.log-item,
.note-item {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px
}

.settings-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px
}

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

.permission-grid label {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .68);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 20
}

.modal-card {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #111620;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow);
  position: relative
}

.modal-card.wide {
  width: min(980px, 100%)
}

.modal-close {
  position: absolute;
  right: 16px;
  top: 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 30px;
  cursor: pointer
}

.detail-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px
}

.detail-head .avatar {
  width: 74px;
  height: 74px
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0
}

.danger {
  background: var(--red) !important
}

.warn {
  background: var(--yellow) !important;
  color: #111 !important
}

.green {
  background: var(--green) !important
}

.muted-btn {
  background: #252b3a !important
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 8px;
  margin: 8px 0
}

textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: #1b202d;
  border: 1px solid var(--line);
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 30
}

code {
  background: #0f131c;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 5px;
  color: #bfc7ff
}

@media (max-width:900px) {
  .app {
    grid-template-columns: 1fr
  }

  .sidebar {
    position: relative;
    height: auto
  }

  .cards-4,
  .two,
  .settings-grid {
    grid-template-columns: 1fr
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column
  }

  .search {
    min-width: 100%;
    width: 100%
  }

  .actions-row {
    width: 100%
  }

  .primary-btn,
  .soft-btn {
    width: 100%;
    text-align: center;
    justify-content: center
  }
}

#memberModal .modal-card.wide {
  max-height: none;
  overflow: visible;
  padding: 28px
}

#memberDetail h3 {
  margin: 28px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line)
}

#memberDetail h3:first-of-type {
  margin-top: 14px
}

#memberDetail .action-grid {
  margin: 14px 0 22px
}

#memberDetail .field-row {
  margin: 10px 0 14px
}

#memberDetail textarea {
  margin-bottom: 12px
}

#memberDetail .log-list {
  max-height: 260px
}

.timeout-card {
  width: min(520px, calc(100vw - 32px))
}

.field-label {
  display: block;
  margin: 18px 0 8px;
  color: var(--muted);
  font-weight: 800
}

.timeout-row {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px
}

.timeout-actions {
  margin-top: 18px
}

#auditPage {
  min-width: 0
}

#auditPage .two {
  grid-template-columns: 1fr
}

#auditPage .panel {
  min-width: 0;
  overflow: hidden
}

#auditPage .panel-head {
  align-items: flex-start;
  flex-wrap: wrap
}

#auditType {
  width: 100%;
  max-width: 320px
}

.log-list {
  min-width: 0;
  overflow-x: hidden
}

.audit-card,
.log-item {
  min-width: 0;
  max-width: 100%
}

.audit-card strong,
.log-item strong,
.meta {
  overflow-wrap: anywhere;
  word-break: break-word
}

.log-details {
  margin: 10px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.45;
  color: #d7dcef;
  background: rgba(15, 19, 28, .72);
  border: 1px solid rgba(43, 49, 66, .9);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  font-size: 13px
}

@media (max-height: 760px),
(max-width: 760px) {
  #memberModal .modal-card.wide {
    max-height: calc(100vh - 24px);
    overflow-y: auto
  }

  .timeout-row {
    grid-template-columns: 1fr
  }
}

.audit-card {
  background: #1f2433;
  border: 1px solid #343b50;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px
}

.audit-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px
}

.audit-type-badge {
  background: rgba(88, 101, 242, 0.22);
  border: 1px solid rgba(88, 101, 242, 0.45);
  color: #dfe3ff;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800
}

.audit-time {
  color: #aeb6ca;
  font-size: 12px
}

.audit-main {
  margin-bottom: 10px
}

.audit-reason {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  padding: 9px;
  margin: 8px 0
}

.audit-details {
  display: grid;
  gap: 8px
}

.audit-change-row {
  background: rgba(10, 13, 20, 0.5);
  border: 1px solid #30374a;
  border-radius: 10px;
  padding: 9px
}

.audit-change-key {
  font-weight: 800;
  color: #fff;
  margin-bottom: 5px
}

.audit-change-values {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  word-break: break-word
}

.audit-old {
  color: #ffb4b4
}

.audit-new {
  color: #b7f7c2
}

.audit-arrow {
  color: #8f98ad
}

#addNoteBtn {
  margin-bottom: 20px
}

#notesBox {
  display: grid;
  gap: 18px;
  margin-top: 20px
}

.note-item {
  padding: 16px;
  border-radius: 16px;
  background: rgba(25, 31, 46, 0.92);
  border: 1px solid rgba(88, 101, 242, 0.18)
}

.note-item p {
  margin: 10px 0 18px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

#overviewCards {
  margin-bottom: 26px
}

#overviewPage .panel {
  margin-top: 10px
}

.settings-grid label {
  display: block;
  margin-bottom: 12px;
  font-weight: 700
}

#roleSelect {
  margin-top: 4px
}

#permissionChecks {
  margin-top: 10px
}

.note-actions {
  margin-top: 14px;
  gap: 10px
}

#memberModal {
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto
}

#memberModal .modal-card {
  width: min(1200px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  margin: auto
}

#memberDetail {
  overflow: visible
}

@media (max-height: 850px) {
  #memberModal {
    align-items: flex-start
  }

  #memberModal .modal-card {
    margin-top: 20px;
    margin-bottom: 20px
  }
}

.home-dot {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(88, 101, 242, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0
}

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

.permission-grid label {
  display: flex;
  align-items: flex-start;
  gap: 8px
}

.perm-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0
}

.perm-label {
  line-height: 1.25
}

.perm-key {
  font-size: 12px;
  line-height: 1.2
}

.ticket-item {
  cursor: pointer;
  padding: 16px 18px
}

.ticket-item:hover {
  transform: translateY(-1px)
}

.ticket-meta {
  margin-top: 8px;
  margin-bottom: 10px;
  line-height: 1.6
}

.ticket-hint {
  margin-top: 6px;
  opacity: 0.75
}

.ticket-modal-card {
  width: 98vw;
  height: 96vh;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border-radius: 22px
}

.ticket-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: white;
  display: block
}

.ticket-frame {
  font-family: Arial, sans-serif
}

.permission-change-list {
  flex-direction: column
}

.perm-added {
  color: #8df7b1;
  font-weight: 700
}

.perm-removed {
  color: #ff8f8f;
  font-weight: 700
}

.permission-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%
}

.permission-before-after>div {
  background: rgba(10, 13, 20, 0.45);
  border: 1px solid rgba(80, 90, 120, 0.45);
  border-radius: 10px;
  padding: 10px
}

@media (max-width: 700px) {
  .permission-before-after {
    grid-template-columns: 1fr
  }
}

.permission-simple-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap
}

.permission-state {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.permission-arrow {
  align-items: center;
  min-width: 70px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
  align-self: center;
  margin-top: 2px
}

.permission-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px
}

.permission-pill.allowed {
  background: rgba(80, 200, 120, 0.15);
  border: 1px solid rgba(80, 200, 120, 0.45);
  color: #8df7b1
}

.permission-pill.denied {
  background: rgba(255, 90, 90, 0.14);
  border: 1px solid rgba(255, 90, 90, 0.45);
  color: #ff9d9d
}

.permission-pill span {
  opacity: 0.7;
  font-size: 12px
}

.permission-pill.neutral {
  background: rgba(160, 170, 190, 0.12);
  border: 1px solid rgba(160, 170, 190, 0.35);
  color: #c7cfdd
}

.permission-grouped-change {
  display: block
}

.permission-change-list {
  display: grid;
  gap: 12px
}

.permission-change-line {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto 70px auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(10, 13, 20, 0.35);
  border: 1px solid rgba(80, 90, 120, 0.35)
}

.permission-arrow {
  display: flex;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9)
}

@media (max-width: 800px) {
  .permission-change-line {
    grid-template-columns: 1fr
  }

  .permission-arrow {
    justify-content: flex-start
  }
}

.audit-extra {
  margin-top: 6px;
  color: #cfd6ee;
  font-size: 13px
}

.permission-overwrite-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.permission-overwrite-item {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.12);
  border: 1px solid rgba(88, 101, 242, 0.35);
  color: #dce3ff;
  font-weight: 600
}

#memberModal,
#memberModal * {
  box-sizing: border-box
}

#memberModal {
  overflow-x: hidden;
  padding-left: 12px;
  padding-right: 12px
}

#memberModal .modal-card.wide,
#memberDetail {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden
}

#memberDetail .action-grid,
#memberDetail .field-row,
#memberDetail .actions-row {
  width: 100%;
  min-width: 0
}

#memberDetail select,
#memberDetail input,
#memberDetail textarea,
#memberDetail button {
  max-width: 100%
}

@media (max-width: 700px) {
  #memberModal {
    padding: 10px
  }

  #memberModal .modal-card.wide {
    padding: 18px 14px
  }

  #memberDetail .detail-head {
    grid-template-columns: 1fr
  }

  #memberDetail .field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
  }

  #memberDetail .action-grid {
    display: grid;
    grid-template-columns: 1fr
  }

  #memberDetail .role-pill,
  #memberDetail .meta {
    overflow-wrap: anywhere;
    word-break: break-word
  }
}

.brand-mark {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(88, 101, 242, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 auto 18px
}

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

.no-access-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at top, rgba(88, 101, 242, 0.18), transparent 40%),
    linear-gradient(180deg, #070b14 0%, #0d1324 100%)
}

.no-access-card {
  width: 100%;
  max-width: 520px;
  padding: 38px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(17, 23, 39, 0.96), rgba(11, 16, 28, 0.98));
  border: 1px solid rgba(130, 150, 255, 0.18);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-align: center
}

.no-access-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 22px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  background: rgba(255, 70, 70, 0.14);
  border: 1px solid rgba(255, 70, 70, 0.32);
  color: #ff7d7d
}

.no-access-card h1 {
  margin: 0 0 14px;
  font-size: 34px;
  font-weight: 900;
  color: #fff
}

.no-access-card p {
  margin: 0;
  color: #b9c3dc;
  line-height: 1.6;
  font-size: 16px
}

.no-access-info {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #d7deef;
  font-size: 14px
}

.no-access-btn {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, #6574ff, #5865f2);
  color: white;
  text-decoration: none;
  font-weight: 800;
  transition: 0.18s ease;
  box-shadow: 0 10px 30px rgba(88, 101, 242, 0.35)
}

.no-access-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06)
}

.profile-box {
  cursor: pointer
}

.legacy-settings {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

.legacy-settings input[readonly],
.tab-note textarea[readonly] {
  opacity: .75;
  cursor: default
}

.tab-note {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035)
}

.tab-note label,
.modal-card label {
  display: block;
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 13px
}

.tab-note textarea,
.modal-card textarea,
.modal-card input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(8, 12, 22, .75);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 42px
}

.tab-note textarea {
  min-height: 70px
}

.legacy-item p {
  white-space: pre-wrap
}

.danger-text {
  color: #ff8787 !important
}

.modal-card.wide input,
.modal-card.wide textarea {
  margin-bottom: 10px
}

.legacy-panel .panel-head {
  margin-bottom: 18px
}

.legacy-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px 22px;
  align-items: start;
  margin-top: 18px
}

.legacy-setting-card {
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px;
  padding: 14px;
  min-width: 0
}

.legacy-setting-card label {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 10px
}

.legacy-setting-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.legacy-setting-inputs input {
  width: 100%;
  min-width: 0
}

.legacy-list {
  margin-top: 14px
}

.legacy-search {
  width: min(420px, 100%);
  margin: 8px 0 18px
}

.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  text-align: center
}

.legacy-item {
  padding: 16px
}

.legacy-item strong {
  display: block;
  margin-bottom: 8px;
  line-height: 1.35
}

.legacy-meta {
  display: block;
  margin: 8px 0 14px;
  line-height: 1.5;
  overflow-wrap: anywhere
}

.legacy-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
  margin: 12px 0 18px !important;
  color: var(--text) !important
}

.legacy-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .06)
}

.tab-note {
  margin: 12px 0 18px
}

.tab-note textarea {
  margin-top: 8px
}

.permission-category {
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px;
  padding: 14px
}

.permission-category h3 {
  margin: 0 0 12px;
  font-size: 15px
}

.permission-category .permission-grid {
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr))
}

.legacy-segmented {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04)
}

.legacy-segmented .soft-btn {
  margin: 0
}

.legacy-segmented .soft-btn.active {
  background: rgba(88, 166, 255, .22);
  border-color: rgba(88, 166, 255, .45);
  color: #fff
}

.message-thumb {
  display: block;
  width: 140px;
  max-width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 12px;
  margin: 10px 0 14px;
  cursor: pointer;
  border: 1px solid var(--border)
}

.message-thumb:hover {
  opacity: 0.85
}

.image-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px
}

.image-modal img {
  max-width: 95vw;
  max-height: 90vh;
  border-radius: 14px
}

.image-modal-close {
  position: fixed;
  top: 18px;
  right: 22px;
  font-size: 34px;
  background: transparent;
  border: 0;
  color: white;
  cursor: pointer
}

.legacy-message-thumb {
  display: block;
  width: 140px;
  max-width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 12px;
  margin: 12px 0 14px;
  cursor: pointer;
  border: 1px solid var(--border)
}

.legacy-message-thumb:hover {
  opacity: 0.85
}

#botDevList .legacy-item {
  padding: 14px
}

#botDevList .legacy-body {
  line-height: 1.4
}

#botDevList .dev-files {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px
}

#botDevList .dev-files .meta {
  margin: 0 0 2px;
  line-height: 1.25
}

#botDevList .dev-file-link {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  line-height: 1.25;
  overflow-wrap: anywhere
}

#botDevList .legacy-actions {
  margin-top: 10px;
  padding-top: 10px
}

.dev-entry,
.legacy-entry,
.request-entry {
  min-height: unset !important;
  height: auto !important;
  padding: 18px 14px !important
}

.legacy-body,
.dev-entry-body,
.request-body {
  min-height: unset !important;
  height: auto !important;
  margin: 14px 0 !important;
  padding: 0 !important
}

.legacy-attachments,
.dev-attachments,
.request-attachments {
  margin: 8px 0 14px 0 !important;
  padding: 0 !important
}

.legacy-actions,
.dev-entry-actions,
.request-actions {
  margin-top: 10px !important;
  padding-top: 10px !important
}

.legacy-entry,
.dev-entry,
.request-entry {
  justify-content: flex-start !important;
  gap: 10px !important
}

.mobile-menu-btn,
.mobile-profile-box {
  display: none
}

.portal-title {
  min-width: 0
}

@media (max-width: 900px) {
  .app {
    display: block;
    min-height: 100vh
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(10, 12, 18, .92)
  }

  .portal-top {
    width: 100%;
    padding: 8px 10px;
    gap: 9px
  }

  .mobile-menu-btn {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer
  }

  .home-dot {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    flex: 0 0 38px
  }

  .portal-title {
    flex: 1 1 auto;
    min-width: 0
  }

  .portal-title strong,
  .portal-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  #mobileProfileBox.mobile-profile-box {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important
  }

  #mobileProfileBox.mobile-profile-box>div {
    display: none !important
  }

  #mobileProfileBox.mobile-profile-box .avatar {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 50% !important;
    margin: 0 !important
  }

  .mobile-nav-panel {
    display: none
  }

  .app.mobile-menu-open .mobile-nav-panel,
  .sidebar.mobile-open .mobile-nav-panel {
    display: block !important
  }

  .sidebar nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .sidebar nav button {
    text-align: center;
    padding: 10px 8px
  }

  .sidebar .ghost-btn {
    width: 100%;
    margin-top: 10px
  }

  .main {
    padding: 14px
  }

  .topbar {
    padding: 14px;
    margin-bottom: 14px
  }

  .topbar #profileBox {
    display: none !important
  }

  html.mobile-menu-open,
  body.mobile-menu-open {
    overflow: hidden !important;
    height: 100% !important
  }

  .sidebar.mobile-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(340px, 88vw) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 9999 !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important
  }

  .sidebar.mobile-open .portal-top {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(10, 12, 18, .98);
    backdrop-filter: blur(16px)
  }

  .sidebar.mobile-open nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-height: max-content !important;
    padding: 12px 0 90px !important
  }

  .sidebar.mobile-open nav button {
    width: 100%;
    text-align: left !important;
    padding: 12px 13px !important
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.55)
  }
}

@media (max-width: 430px) {
  .portal-title span {
    display: none
  }

  .sidebar:not(.mobile-open) nav {
    grid-template-columns: 1fr
  }
}

.modal {
  z-index: 20000 !important
}

.modal-card {
  position: relative !important;
  z-index: 20001 !important
}

.modal-close {
  z-index: 20002 !important
}

@media (max-width: 900px) {
  .modal {
    align-items: flex-start !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    overflow-y: auto !important
  }

  .modal-card {
    margin-top: 0 !important;
    max-height: calc(100dvh - 36px) !important;
    overflow-y: auto !important
  }

  .modal-close {
    position: sticky !important;
    top: 0 !important;
    float: right !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin-left: auto !important;
    margin-bottom: 8px !important;
    background: rgba(10, 12, 18, 0.95) !important;
    border-radius: 12px !important
  }
}

@media (max-width: 900px) {

  .segmented-tabs,
  .legacy-segmented {
    gap: 12px !important;
    display: flex !important;
    flex-wrap: wrap !important
  }

  .segmented-tabs .soft-btn,
  .legacy-segmented .soft-btn {
    margin-right: 0 !important
  }
}

.tab-note textarea {
  margin-bottom: 14px !important
}

.tab-note .soft-btn,
.tab-note button {
  margin-top: 8px !important
}

.sidebar nav {
  margin-bottom: 18px !important
}

#logoutBtn {
  background: rgba(180, 45, 45, 0.18) !important;
  border: 1px solid rgba(255, 80, 80, 0.35) !important;
  color: #ffb3b3 !important
}

#logoutBtn:hover {
  background: rgba(220, 55, 55, 0.28) !important;
  border-color: rgba(255, 110, 110, 0.5) !important;
  color: #ffd0d0 !important
}

#botDevList .legacy-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important
}

#botDevList .legacy-body {
  min-height: unset !important;
  flex: 0 0 auto !important
}

#botDevList .legacy-actions::before,
#botDevList .legacy-actions::after {
  margin: 0 !important
}

#botDevList .log-item.legacy-item {
  padding: 10px 14px !important
}

#botDevList .log-item.legacy-item strong {
  display: block !important;
  margin: 0 0 2px 0 !important
}

#botDevList .legacy-meta {
  margin: 0 0 6px 0 !important;
  line-height: 1.2 !important
}

#botDevList .legacy-body p,
#botDevList .legacy-body div,
#botDevList .legacy-body br {
  margin-top: 0 !important;
  margin-bottom: 0 !important
}

#botDevList .legacy-body>div:first-child {
  margin-bottom: 4px !important
}

#botDevList .dev-files {
  margin: 4px 0 0 0 !important
}

#botDevList .legacy-actions {
  padding-top: 8px !important
}

#botDevList .legacy-body {
  white-space: normal !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important
}

#botDevList .legacy-body>div:first-child {
  white-space: pre-wrap !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important
}

#botDevList .log-item.legacy-item {
  gap: 4px !important
}

#botDevList .legacy-actions {
  margin-top: 8px !important
}