@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,700&display=swap");

/* Miyū Dashboard Theme - homepage navy/blue palette */

:root {
  --miyu-bg: #0e1219;
  --miyu-bg-elevated: #131820;
  --miyu-card: #161b24;
  --miyu-card-hover: #1a202c;
  --miyu-accent: #2985CC;
  --miyu-accent-dark: #1f6aa3;
  --miyu-accent-glow: rgba(41, 133, 204, 0.22);
  --miyu-border: rgba(255, 255, 255, 0.06);
  --miyu-text: #f3f4f6;
  --miyu-muted: #8b93a7;
  --miyu-radius: 12px;
  --miyu-radius-sm: 8px;
}

html {
  color-scheme: dark;
}

body {
  background-color: var(--miyu-bg) !important;
  color: var(--miyu-text);
  font-feature-settings: "ss01" on, "cv11" on;
  letter-spacing: -0.011em;
}

::selection {
  background: rgba(41,133,204, 0.45);
  color: #fff;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--miyu-accent);
}

/* Utility overrides for legacy purple tokens */
.bg-\[\#0b0b14\],
.bg-\[\#09090b\],
.bg-\[\#0a0a0a\] {
  background-color: var(--miyu-bg) !important;
}
.bg-\[\#1a1a2e\],
.bg-\[\#13132a\],
.bg-\[\#16162a\] {
  background-color: var(--miyu-card) !important;
}
.bg-\[\#14142b\] {
  background-color: var(--miyu-bg-elevated) !important;
}

/* ================= Native <dialog class="miyu-dialog"> ================= */

dialog.miyu-dialog {
  padding: 0;
  border: none;
  border-radius: 1rem;
  background: transparent;
  color: var(--miyu-text);
  max-width: min(28rem, calc(100vw - 2rem));
  width: 100%;
  max-height: min(90dvh, calc(100vh - 2rem));
  margin: auto;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: none;
}

dialog.miyu-dialog.miyu-dialog-wide {
  max-width: min(44rem, calc(100vw - 2rem));
}

dialog.miyu-dialog[open] {
  display: block;
  animation: miyuDialogIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

dialog.miyu-dialog::backdrop {
  background: rgba(8, 10, 16, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

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

.miyu-dialog-panel {
  background: var(--miyu-card);
  border: 1px solid var(--miyu-border);
  border-radius: 1rem;
  box-shadow:
    0 0 0 1px rgba(41,133,204, 0.08),
    0 24px 48px -12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 1.5rem;
  overflow: visible;
  width: 100%;
}

.miyu-dialog-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.miyu-dialog-body {
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--miyu-muted);
  white-space: pre-wrap;
}

.miyu-dialog-input[hidden] {
  display: none !important;
}

.miyu-dialog-input {
  display: block;
  width: 100%;
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid var(--miyu-border);
  background: var(--miyu-bg-elevated);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  outline: none;
}

.miyu-dialog-input:focus {
  border-color: var(--miyu-accent);
  box-shadow: 0 0 0 3px var(--miyu-accent-glow);
}

.miyu-dialog-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--miyu-border);
}

.miyu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.miyu-btn-primary {
  background: var(--miyu-accent);
  color: #fff;
  box-shadow: none;
  border-color: transparent;
}

.miyu-btn-primary:hover {
  background: var(--miyu-accent-dark);
  filter: none;
  box-shadow: none;
}

.miyu-btn-glass {
  background: transparent;
  color: #d1d5db;
  border-color: var(--miyu-border);
  backdrop-filter: none;
}

.miyu-btn-glass:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}

.miyu-btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Shared chrome for existing HTML overlay modals */
.miyu-overlay {
  background: rgba(8, 10, 16, 0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.miyu-overlay-panel {
  background: var(--miyu-card) !important;
  border: 1px solid var(--miyu-border) !important;
  border-radius: 1rem !important;
  box-shadow:
    0 0 0 1px rgba(41,133,204, 0.08),
    0 24px 48px -12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.miyu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.miyu-icon svg {
  width: 1em;
  height: 1em;
}

/* Searchable channel picker */
.miyu-cs {
  position: relative;
  width: 100%;
}
.miyu-cs-native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  left: 0;
  top: 0;
}
.miyu-cs-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
  background: #141824;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 0.7rem 0.9rem;
  color: #fff;
  font-size: 0.875rem;
  cursor: pointer;
}
.miyu-cs-btn:focus,
.miyu-cs.open .miyu-cs-btn {
  border-color: #2985CC;
  outline: none;
  box-shadow: 0 0 0 2px rgba(41,133,204, 0.25);
}
.miyu-cs-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e5e7eb;
}
.miyu-cs-btn span.is-placeholder {
  color: #6b7280;
}
.miyu-cs-panel {
  display: none;
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  margin-top: 0.35rem;
  background: #181d28;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  overflow: hidden;
}
.miyu-cs.open .miyu-cs-panel {
  display: block;
}
.miyu-cs-search {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: #10141f;
  color: #fff;
  padding: 0.7rem 0.9rem;
  font-size: 0.875rem;
  outline: none;
}
.miyu-cs-list {
  max-height: 14rem;
  overflow-y: auto;
}
.miyu-cs-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.9rem;
  font-size: 0.8125rem;
  color: #d1d5db;
  background: transparent;
  border: none;
  cursor: pointer;
}
.miyu-cs-opt:hover,
.miyu-cs-opt.is-active {
  background: rgba(41,133,204, 0.15);
  color: #fff;
}
.miyu-cs-empty {
  padding: 0.75rem 0.9rem;
  font-size: 0.8125rem;
  color: #6b7280;
}

/* ================= Role multi-select ================= */
.miyu-rm {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.miyu-rm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 2.25rem;
}
.miyu-rm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2rem;
  padding: 0 0.35rem 0 0.7rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  font-size: 0.75rem;
  font-weight: 700;
  color: #e5e7eb;
  max-width: 100%;
}
.miyu-rm-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 11rem;
}
.miyu-rm-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.miyu-rm-chip button {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: none;
  border-radius: 9999px;
  background: rgba(255,255,255,0.08);
  color: #9ca3af;
  cursor: pointer;
  flex-shrink: 0;
}
.miyu-rm-chip button:hover {
  background: #ef4444;
  color: #fff;
}
.miyu-rm-hint {
  font-size: 0.8rem;
  color: #6b7280;
  padding: 0.35rem 0.1rem;
}
.miyu-rm-search {
  position: relative;
}
.miyu-rm-search svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: #6b7280;
  pointer-events: none;
}
.miyu-rm-search input {
  width: 100%;
  background: #10141f;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.85rem;
  padding: 0.7rem 0.9rem 0.7rem 2.4rem;
  font-size: 0.875rem;
  color: #fff;
  outline: none;
}
.miyu-rm-search input:focus {
  border-color: rgba(41,133,204,0.65);
  box-shadow: 0 0 0 3px rgba(41,133,204,0.15);
}
.miyu-rm-list {
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 0.9rem;
  background: #10141f;
  padding: 0.35rem;
}
.miyu-rm-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.62rem 0.7rem;
  border: none;
  border-radius: 0.7rem;
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}
.miyu-rm-row:hover {
  background: rgba(255,255,255,0.04);
}
.miyu-rm-row.is-on {
  background: rgba(41,133,204,0.12);
}
.miyu-rm-check {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.35rem;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: #141824;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: transparent;
}
.miyu-rm-row.is-on .miyu-rm-check {
  background: #2985CC;
  border-color: #2985CC;
  color: #fff;
}
.miyu-rm-check svg {
  width: 0.7rem;
  height: 0.7rem;
}
.miyu-rm-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.miyu-rm-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: #6b7280;
}
.miyu-rm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
}
.miyu-rm.is-compact .miyu-rm-list {
  max-height: 14rem;
}

.sa-card {
  background: var(--miyu-card);
  border: 1px solid var(--miyu-border);
  border-radius: var(--miyu-radius);
}
.sa-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2985CC;
  background: rgba(41, 133, 204, 0.1);
  border: 1px solid rgba(41, 133, 204, 0.2);
}
.sa-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  border-radius: 9999px;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  font-weight: 600;
}
.sa-chip button {
  color: #9ca3af;
  line-height: 1;
}
.sa-chip button:hover { color: #fff; }
.sa-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}

/* ================= Design tokens ================= */

:root {
  --miyu-space-1: 8px;
  --miyu-space-2: 16px;
  --miyu-space-3: 24px;
  --miyu-radius: 16px;
  --miyu-radius-sm: 12px;
  --miyu-on: #34d399;
  --miyu-warn: #f59e0b;
  --miyu-danger: #ef4444;
  --miyu-discord: #313338;
  --miyu-discord-dark: #2b2d31;
  --miyu-font: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
}

body {
  font-family: var(--miyu-font);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Soften noisy uppercase labels without killing kickers */
main label.text-xs.font-bold.uppercase,
main .text-\[10px\].font-bold.uppercase,
main .text-\[11px\].font-bold.uppercase {
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* One ambient blob, not glow on every card */
body > .flex.min-h-screen::before {
  content: "";
  position: fixed;
  top: -8rem;
  right: -6rem;
  width: 28rem;
  height: 28rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(41, 133, 204, 0.16), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
body > .flex.min-h-screen > main {
  position: relative;
  z-index: 1;
}

/* Keep the sidebar pinned while the page scrolls */
#miyu-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex-shrink: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  z-index: 60;
  will-change: auto;
}
@media (min-width: 1024px) {
  #miyu-sidebar {
    transform: none !important;
  }
}
@media (max-width: 1023px) {
  #miyu-sidebar {
    position: fixed;
  }
}

/* ================= Cards / buttons / fields ================= */

.miyu-card {
  background: var(--miyu-card);
  border: 1px solid var(--miyu-border);
  border-radius: var(--miyu-radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.miyu-card:hover,
a.action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(41, 133, 204, 0.32);
  box-shadow: 0 12px 32px -18px rgba(41, 133, 204, 0.4);
}

.miyu-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--miyu-accent);
  background: rgba(41, 133, 204, 0.1);
  border: 1px solid rgba(41, 133, 204, 0.2);
}

.miyu-btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  color: #e5e7eb;
  border: 1px solid var(--miyu-border);
}
.miyu-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}
.miyu-btn-danger:hover {
  filter: brightness(1.06);
}

.miyu-input,
.miyu-select,
main input[type="text"],
main input[type="url"],
main input[type="number"],
main input[type="search"],
main textarea,
main select {
  border-radius: var(--miyu-radius-sm);
}

main input:focus,
main textarea:focus,
main select:focus {
  outline: none;
  border-color: var(--miyu-accent) !important;
  box-shadow: 0 0 0 3px rgba(41, 133, 204, 0.18);
}

.miyu-hint {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}

.miyu-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.miyu-badge-on {
  color: var(--miyu-on);
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.miyu-badge-off {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--miyu-border);
}
.miyu-badge-warn {
  color: var(--miyu-warn);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.miyu-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4b5563;
  flex-shrink: 0;
}
.miyu-dot.on { background: var(--miyu-on); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.miyu-dot.off { background: #4b5563; }

.miyu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 2.5rem 1.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--miyu-radius);
  background: rgba(255, 255, 255, 0.02);
  color: var(--miyu-muted);
}
.miyu-empty h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #fff;
}
.miyu-empty p {
  margin: 0;
  max-width: 28rem;
  font-size: 0.875rem;
}

.miyu-skel {
  display: block;
  height: 2.75rem;
  border-radius: var(--miyu-radius-sm);
  background: linear-gradient(90deg, #141824 25%, #1c2230 50%, #141824 75%);
  background-size: 200% 100%;
  animation: miyuSkel 1.2s ease-in-out infinite;
}
@keyframes miyuSkel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================= Page chrome ================= */

.miyu-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: 0.01em;
}
.miyu-crumbs a { color: #8b93a7; }
.miyu-crumbs a:hover { color: #fff; }
.miyu-crumbs .sep { opacity: 0.35; }

.miyu-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--miyu-border);
}
.miyu-page-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.miyu-page-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--miyu-border);
  color: var(--miyu-accent);
  flex-shrink: 0;
}
.miyu-page-icon svg { width: 18px; height: 18px; }
.miyu-page-head h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.miyu-page-head p {
  margin: 3px 0 0;
  color: var(--miyu-muted);
  font-size: 0.8125rem;
  max-width: 36rem;
  line-height: 1.4;
}
.miyu-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.miyu-page-actions .miyu-btn,
.miyu-page-actions button {
  border-radius: var(--miyu-radius-sm);
  box-shadow: none !important;
}
.miyu-saved {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--miyu-on);
}
.miyu-saved.is-on { display: inline-flex; }

.miyu-sticky-save {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  bottom: 1.25rem;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  background: var(--miyu-card);
  border: 1px solid var(--miyu-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.55);
  backdrop-filter: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.miyu-sticky-save.is-show {
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 1023px) {
  .miyu-sticky-save { bottom: 5.25rem; }
}

.miyu-perm-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: var(--miyu-radius-sm);
  background: transparent;
  border: 1px solid var(--miyu-border);
}
.miyu-perm-list > .miyu-perm-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-right: 4px;
}
.miyu-perm-list ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}
.miyu-perm-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #c4c9d4;
  list-style: none;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--miyu-bg-elevated);
  border: 1px solid var(--miyu-border);
}
.miyu-perm-ok { color: #34d399; font-size: 11px; }
.miyu-perm-bad { color: #f87171; font-size: 11px; }
.miyu-perm-list.is-ok {
  padding: 8px 12px;
}
.miyu-perm-list.is-ok ul { display: none; }
.miyu-perm-list.is-ok .miyu-perm-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9ca3af;
}
.miyu-perm-summary { display: none; }

/* ================= Toast (bottom) ================= */

#miyu-toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 80;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
#miyu-toast.is-on {
  transform: translateY(0);
  opacity: 1;
}
#miyu-toast.is-success { background: #059669; }
#miyu-toast.is-error { background: #dc2626; }
#miyu-toast.is-info { background: #1f6aa3; }
@media (max-width: 1023px) {
  #miyu-toast { bottom: 5.25rem; }
}

/* Hide legacy top toasts in favor of the shared one */
body.has-miyu-toast #toast {
  display: none !important;
}

/* ================= Discord preview ================= */

.miyu-dpreview,
#previewMessage,
#pDesc,
#pTitle,
#pAuthor,
#pFooter {
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.miyu-dpreview {
  background: var(--miyu-discord);
  border: 1px solid #1e1f22;
  border-radius: 12px;
  overflow: hidden;
}
.miyu-dpreview-bar {
  height: 48px;
  background: var(--miyu-discord-dark);
  border-bottom: 1px solid #1f2023;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.miyu-dpreview-bar .hash { color: #9ca3af; font-size: 18px; }
.miyu-dpreview-body { padding: 16px; }
.miyu-dpreview-row { display: flex; gap: 16px; }
.miyu-dpreview-av {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--miyu-accent);
  flex-shrink: 0;
  overflow: hidden;
}
.miyu-dpreview-av img { width: 100%; height: 100%; object-fit: cover; }
.miyu-dpreview-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.miyu-dpreview-name { color: #fff; font-weight: 500; }
.miyu-dpreview-bot {
  background: #2985CC;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  height: 15px;
  line-height: 13px;
}
.miyu-dpreview-time { color: #9ca3af; font-size: 12px; }
.miyu-dpreview-text {
  color: #d1d5db;
  font-size: 15px;
  line-height: 1.375rem;
  white-space: pre-wrap;
}
.miyu-dpreview-embed {
  margin-top: 8px;
  border-left: 4px solid var(--miyu-accent);
  background: #2b2d31;
  border-radius: 6px;
  padding: 16px;
  max-width: 520px;
}
.miyu-dpreview-embed h4 { margin: 0 0 6px; color: #fff; font-size: 16px; }
.miyu-dpreview-embed p { margin: 0; color: #d1d5db; font-size: 14px; white-space: pre-wrap; }

/* Discord markdown (live preview) */
.dmd-subtext {
  display: block;
  color: #949ba4;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin: 0;
  white-space: pre-wrap;
}
.dmd-subtext strong,
.dmd-subtext b,
.dmd-h strong,
.dmd-h b,
.dmd-quote strong,
.dmd-quote b,
.dmd-list strong,
.dmd-list b,
.dmd-bold,
#pDesc strong,
#pDesc b,
#pTitle strong,
#pTitle b,
#previewMessage strong,
#previewMessage b,
.miyu-dpreview-text strong,
.miyu-dpreview-text b,
.miyu-dpreview-embed strong,
.miyu-dpreview-embed b {
  font-weight: 700 !important;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.dmd-subtext strong,
.dmd-subtext b,
.dmd-subtext .dmd-bold {
  font-weight: 800 !important;
  -webkit-text-stroke: 0.4px currentColor;
  paint-order: stroke fill;
}
.dmd-subtext em,
.dmd-subtext i,
.dmd-h em,
.dmd-quote em,
.dmd-italic,
#pDesc em,
#previewMessage em,
.miyu-dpreview-text em,
.miyu-dpreview-embed em {
  font-style: italic !important;
}
.dmd-subtext u,
.dmd-underline,
#pDesc u,
#previewMessage u {
  text-decoration: underline !important;
}
.dmd-subtext s,
#pDesc s,
#previewMessage s {
  text-decoration: line-through !important;
}
.dmd-h {
  display: block;
  color: #f2f3f5;
  font-weight: 700;
  line-height: 1.25;
  margin: 4px 0 2px;
  white-space: pre-wrap;
}
.dmd-h1 { font-size: 1.5rem; }
.dmd-h2 { font-size: 1.25rem; }
.dmd-h3 { font-size: 1rem; }
.dmd-quote {
  display: block;
  margin: 4px 0;
  padding: 0 0 0 12px;
  border-left: 4px solid #4e5058;
  color: #c9cdcf;
  white-space: pre-wrap;
}
.dmd-list {
  margin: 4px 0 4px 1.2em;
  padding: 0;
  white-space: normal;
}
ul.dmd-list { list-style: disc; }
ol.dmd-list { list-style: decimal; }
.dmd-list li { margin: 0; }
.dmd-spoiler {
  background: #1e1f22;
  color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.dmd-spoiler:hover,
.dmd-spoiler.is-open {
  color: inherit;
  background: #4e5058;
}
.dmd-code {
  background: #1e1f22;
  color: #f2f3f5;
  padding: 0.12em 0.35em;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, monospace;
}
.dmd-pre {
  background: #1e1f22;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 8px;
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.25rem;
  font-family: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, monospace;
  white-space: pre-wrap;
  overflow-x: auto;
}
.dmd-mention {
  color: #c9cdfb;
  background: rgba(88, 101, 242, 0.3);
  font-weight: 500;
  border-radius: 3px;
  padding: 0 2px;
  cursor: pointer;
}
.dmd-mention-here {
  color: #f0b132;
  background: rgba(240, 177, 50, 0.2);
}
.dmd-link { color: #00a8fc; }
.dmd-link:hover { text-decoration: underline; }
.dmd-time {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 0 4px;
  cursor: default;
}
.dmd-emoji {
  display: inline-block;
  height: 1.375em;
  width: 1.375em;
  vertical-align: -0.2em;
  object-fit: contain;
}

main .bg-\[\#313338\] {
  background: var(--miyu-discord) !important;
  border-color: #1e1f22 !important;
}

/* ================= Sidebar refinements ================= */

.sidebar-link.is-active,
a.sidebar-link.bg-miyu {
  background: rgba(41, 133, 204, 0.1) !important;
  color: #fff !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
  position: relative;
  border-radius: 8px !important;
}
.sidebar-link.is-active::before,
a.sidebar-link.bg-miyu::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--miyu-accent);
}
.sidebar-cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 6px;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.sidebar-cat-btn:hover { color: #d1d5db; }
.sidebar-cat-btn svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}
.sidebar-group.is-collapsed .sidebar-cat-btn svg { transform: rotate(-90deg); }
.sidebar-group.is-collapsed .sidebar-link { display: none !important; }

.miyu-guild-switch {
  position: relative;
  margin: 4px 0 8px;
}
.miyu-guild-switch-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--miyu-border);
  background: var(--miyu-bg-elevated);
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.miyu-guild-switch-btn:hover { border-color: rgba(41, 133, 204, 0.4); }
.miyu-guild-switch-btn img,
.miyu-guild-switch-fallback {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.miyu-guild-switch-fallback {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  background: #5865F2;
}
.miyu-guild-switch-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
  max-height: 16rem;
  overflow: auto;
  background: var(--miyu-card);
  border: 1px solid var(--miyu-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  padding: 6px;
}
.miyu-guild-switch.open .miyu-guild-switch-menu { display: block; }
.miyu-guild-switch-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 600;
}
.miyu-guild-switch-menu a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.miyu-guild-switch-menu img,
.miyu-guild-switch-menu .miyu-guild-switch-fallback {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.miyu-mobile-bar {
  display: none;
}
@media (max-width: 1023px) {
  .miyu-mobile-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 70;
    background: rgba(24, 29, 40, 0.94);
    border: 1px solid var(--miyu-border);
    border-radius: 18px;
    padding: 6px;
    backdrop-filter: blur(16px);
  }
  .miyu-mobile-bar button,
  .miyu-mobile-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
  }
  .miyu-mobile-bar .is-on {
    color: #fff;
    background: rgba(41, 133, 204, 0.16);
  }
  #mobile-toggle { display: none !important; }
  main {
    padding-top: 1.25rem !important;
    padding-bottom: 6rem !important;
  }
}

#sidebar-settings-search {
  padding-right: 3.25rem !important;
}
.miyu-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b7280;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 2px 6px;
  pointer-events: none;
}

/* Full-page boot overlay (sidebar + overview) */
.miyu-boot {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #10141f;
  color: #fff;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  transition: opacity 0.32s ease, visibility 0.32s ease;
}
.miyu-boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.miyu-boot-glow {
  position: absolute;
  width: 28rem;
  height: 28rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(41, 133, 204, 0.22) 0%, rgba(16, 20, 31, 0) 70%);
  pointer-events: none;
}
.miyu-boot-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.miyu-boot-logo {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  object-fit: cover;
  background: transparent;
  box-shadow: none;
}
.miyu-boot-name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}
.miyu-boot-bar {
  width: 6.5rem;
  height: 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.miyu-boot-bar > i {
  display: block;
  height: 100%;
  width: 42%;
  border-radius: inherit;
  background: #2985CC;
  animation: miyuBootSlide 1.15s ease-in-out infinite;
}
@keyframes miyuBootSlide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}
@keyframes miyuPageFadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
html.miyu-ready main {
  animation: miyuPageFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .miyu-boot-bar > i { animation: none; width: 100%; }
  html.miyu-ready main { animation: none; }
}

/* ================= Module accordion (Engagement) ================= */

.miyu-mod-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 960px;
}
.miyu-mod {
  background: var(--miyu-card);
  border: 1px solid var(--miyu-border);
  border-radius: 1rem;
  overflow: hidden;
}
.miyu-mod.is-open {
  border-color: rgba(41, 133, 204, 0.35);
}
.miyu-mod-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
}
.miyu-mod-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(41, 133, 204, 0.12);
  color: #2985CC;
}
.miyu-mod-icon svg { width: 18px; height: 18px; }
.miyu-mod-copy { min-width: 0; flex: 1; }
.miyu-mod-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.miyu-mod-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4b5563;
  flex-shrink: 0;
}
.miyu-mod-dot.is-on { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); }
.miyu-mod-desc {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.miyu-mod-chevron {
  width: 16px;
  height: 16px;
  color: #6b7280;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.miyu-mod.is-open .miyu-mod-chevron { transform: rotate(180deg); }
.miyu-mod-body {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.miyu-mod.is-open .miyu-mod-body { display: block; padding-top: 16px; }
.miyu-mod-fields { display: flex; flex-direction: column; gap: 14px; }
.miyu-mod-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  margin-top: 4px;
}
.miyu-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.miyu-switch .toggle-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  top: 2px;
  left: 2px;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.miyu-switch .toggle-label {
  display: block;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #2b2b40;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 0.25s ease;
}
.miyu-switch .toggle-checkbox:checked { transform: translateX(20px); }
.miyu-switch .toggle-checkbox:checked + .toggle-label { background: #2985CC; }
.miyu-switch-sm { width: 36px; height: 20px; }
.miyu-switch-sm .toggle-checkbox { width: 16px; height: 16px; }
.miyu-switch-sm .toggle-label { width: 36px; height: 20px; }
.miyu-switch-sm .toggle-checkbox:checked { transform: translateX(16px); }
.miyu-opt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.miyu-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.miyu-emoji-list { display: flex; flex-direction: column; gap: 6px; }
.miyu-emoji-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.miyu-emoji-row span { font-size: 0.8125rem; font-weight: 600; color: #d1d5db; }
.cnt-emoji-btn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.cnt-emoji-btn:hover { border-color: rgba(41, 133, 204, 0.55); }
.cnt-emoji-btn .cnt-emoji-preview { font-size: 1.125rem; line-height: 1; }
.miyu-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.miyu-pair-emoji {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}
.miyu-pair-emoji .cnt-emoji-btn { width: 46px; height: 46px; }
.miyu-seg {
  display: inline-flex;
  padding: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  gap: 2px;
}
.miyu-seg button {
  border: 0;
  background: transparent;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
}
.miyu-seg button.is-on {
  background: #2985CC;
  color: #fff;
}
.miyu-role-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}
.miyu-role-table th,
.miyu-role-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}
.miyu-role-table thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  text-align: left;
}
.miyu-role-table tbody th {
  font-weight: 650;
  color: #d1d5db;
  white-space: nowrap;
  width: 7rem;
  text-align: left;
}
.miyu-role-table select {
  width: 100%;
  background: #141824;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 10px;
  color: #fff;
  font-size: 0.75rem;
}
.miyu-dpreview-sm { max-width: 100%; }
.miyu-dpreview-sm .miyu-dpreview-body { padding: 12px; }
.miyu-dpreview-sm .miyu-dpreview-av { width: 32px; height: 32px; }
.miyu-setup {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 1.5rem;
  align-items: start;
}
.miyu-help h2 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.miyu-help p, .miyu-help li { font-size: 0.875rem; color: #9ca3af; line-height: 1.55; }
.miyu-help ol { margin: 0; padding-left: 1.1rem; display: grid; gap: 10px; }
.miyu-help li::marker { color: #2985CC; font-weight: 700; }
@media (max-width: 900px) {
  .miyu-setup { grid-template-columns: 1fr; }
  .miyu-opt-grid { grid-template-columns: 1fr; }
  .miyu-pair { grid-template-columns: 1fr; }
  .miyu-mod-desc { white-space: normal; }
}