/* ═══════════════════════════════════════════════════════════════════════════
   MusicoTickets Settings Panel — 2026 Glassmorphism Dark Theme v2
   Injected via <link> into SvelteKit @discord-tickets/settings HTML responses
   Design: Inter font · #08080f bg · #7c3aed/#a78bfa accent · glassmorphism
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════ Design Tokens ═══════════════════════════════ */
:root {
    --m-bg: #08080f;
    --m-bg-elevated: rgba(14, 14, 24, 0.85);
    --m-card: rgba(16, 16, 28, 0.65);
    --m-card-hover: rgba(24, 24, 42, 0.75);
    --m-card-active: rgba(30, 30, 52, 0.8);
    --m-glass: rgba(255, 255, 255, 0.025);
    --m-glass-hover: rgba(255, 255, 255, 0.055);
    --m-accent: #7c3aed;
    --m-accent-hover: #6d28d9;
    --m-accent-light: #a78bfa;
    --m-accent-lighter: #c4b5fd;
    --m-accent-glow: rgba(124, 58, 237, 0.3);
    --m-accent-subtle: rgba(124, 58, 237, 0.1);
    --m-text: #f0f0f5;
    --m-text-secondary: #9ca3b4;
    --m-text-muted: #5a6078;
    --m-border: rgba(255, 255, 255, 0.06);
    --m-border-light: rgba(255, 255, 255, 0.1);
    --m-border-accent: rgba(124, 58, 237, 0.2);
    --m-success: #34d399;
    --m-success-bg: rgba(52, 211, 153, 0.1);
    --m-warning: #fbbf24;
    --m-warning-bg: rgba(251, 191, 36, 0.06);
    --m-danger: #f87171;
    --m-danger-bg: rgba(248, 113, 113, 0.08);
    --m-blur: 24px;
    --m-radius-xs: 6px;
    --m-radius-sm: 10px;
    --m-radius-md: 14px;
    --m-radius-lg: 18px;
    --m-radius-xl: 22px;
    --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --m-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --m-shine: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
    --m-gradient-text: linear-gradient(135deg, #e0d4fc 0%, var(--m-accent-light) 50%, #818cf8 100%);
}

/* ═══════════════════════════ Base / Body / Font ══════════════════════════ */
html, html.dark, body, .dark body, html.dark body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: var(--m-text) !important;
}

html, body {
    background-color: var(--m-bg) !important;
}

/* ═══════════════════ Main Background — Animated Mesh ════════════════════ */
.bg-gray-200,
.dark .bg-gray-200,
.dark\:bg-slate-900,
.dark .dark\:bg-slate-900,
html.dark .bg-gray-200,
.absolute.h-max.min-h-screen {
    background-color: var(--m-bg) !important;
    background-image:
        radial-gradient(ellipse 70% 50% at 5% 15%, rgba(124, 58, 237, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 90% 85%, rgba(59, 130, 246, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(167, 139, 250, 0.04) 0%, transparent 50%) !important;
    background-attachment: fixed !important;
}

/* ═══════════════════════════ Page Transitions ════════════════════════════ */
/* Ensure each page container is fully opaque to prevent overlay bleed-through */
.absolute.h-max.min-h-screen {
    animation: settingsPageIn 0.3s var(--m-ease) !important;
    background-color: var(--m-bg) !important;
    isolation: isolate !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

@keyframes settingsPageIn {
    from { transform: translateY(4px); }
    to   { transform: translateY(0); }
}

/* ═══════════════════ Text Wrapper — dark:text-slate-300 ═════════════════ */
.text-gray-800,
.dark .text-gray-800,
.dark\:text-slate-300,
.dark .dark\:text-slate-300 {
    color: var(--m-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════ */

/* Primary cards (slate-800) — Guild cards, nav tiles, stat cards */
.dark\:bg-slate-800,
.dark .dark\:bg-slate-800,
.bg-gray-100,
.dark .bg-gray-100 {
    background: var(--m-card) !important;
    backdrop-filter: blur(var(--m-blur)) !important;
    -webkit-backdrop-filter: blur(var(--m-blur)) !important;
    border: 1px solid var(--m-border) !important;
    transition: background 0.35s var(--m-ease), border-color 0.35s var(--m-ease), box-shadow 0.35s var(--m-ease) !important;
}

/* Hover lift on interactive cards */
a .dark\:bg-slate-800,
a .bg-gray-100,
a.rounded-xl .link,
.dark a .dark\:bg-slate-800,
.dark a .bg-gray-100 {
    cursor: pointer !important;
}

a:hover .dark\:bg-slate-800,
a:hover .bg-gray-100,
.dark a:hover .dark\:bg-slate-800,
.dark a:hover .bg-gray-100 {
    background: var(--m-card-hover) !important;
    border-color: var(--m-border-accent) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--m-border-accent) !important;
}

/* Top-shine on clickable cards — subtle border-top highlight */
a .dark\:bg-slate-800,
a .bg-gray-100,
.dark a .dark\:bg-slate-800 {
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Semi-transparent variant: dark:bg-slate-800/75 */
.dark\:bg-slate-800\/75,
.dark .dark\:bg-slate-800\/75,
.bg-gray-50\/75,
.dark .bg-gray-50\/75 {
    background: rgba(16, 16, 28, 0.45) !important;
    backdrop-filter: blur(var(--m-blur)) !important;
    -webkit-backdrop-filter: blur(var(--m-blur)) !important;
    border: 1px solid var(--m-border) !important;
    transition: background 0.35s var(--m-ease), border-color 0.35s var(--m-ease), box-shadow 0.35s var(--m-ease) !important;
}

a:hover .dark\:bg-slate-800\/75,
a:hover .bg-gray-50\/75,
.dark a:hover .dark\:bg-slate-800\/75,
.dark a:hover .bg-gray-50\/75 {
    background: rgba(24, 24, 42, 0.55) !important;
    border-color: var(--m-border-accent) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25) !important;
}

/* Secondary cards (slate-700) — Bot info, form sections, tag cards */
.dark\:bg-slate-700,
.dark .dark\:bg-slate-700,
.bg-white,
.dark .bg-white {
    background: var(--m-bg-elevated) !important;
    backdrop-filter: blur(var(--m-blur)) !important;
    -webkit-backdrop-filter: blur(var(--m-blur)) !important;
    border: 1px solid var(--m-border) !important;
    transition: all 0.3s var(--m-ease) !important;
}

/* Guild Info Card nested inner */
.dark .rounded-xl.dark\:bg-slate-700 .rounded-xl.dark\:bg-slate-800,
.rounded-xl .rounded-xl.dark\:bg-slate-800 {
    background: rgba(12, 12, 22, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION TILES — General / Categories / Panels / Feedback / Tags / Data
   The 6 nav tiles on the guild settings dashboard
   ═══════════════════════════════════════════════════════════════════════ */

/* Grid layout improvements */
.grid.grid-cols-2.gap-4.text-center {
    gap: 12px !important;
}

/* Force all nav tiles to equal size */
.grid.grid-cols-2.text-center > a,
.grid.grid-cols-2.text-center > button {
    min-height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Nav tile base — these are <a class="link rounded-xl bg-gray-100 p-4 shadow-sm dark:bg-slate-800"> */
.grid.grid-cols-2 > a > .link,
.grid.grid-cols-2 > a .link,
.grid.grid-cols-2 > a .rounded-xl,
.grid.grid-cols-2.text-center > a {
    transition: all 0.35s var(--m-ease) !important;
}

/* Nav tile icons — Font Awesome icons in tiles */
.grid.grid-cols-2.text-center .fas.text-4xl,
.grid.grid-cols-2.text-center .fa-solid.text-4xl,
.grid.grid-cols-2.text-center i.fas,
.grid.grid-cols-2.text-center i.fa-solid {
    font-size: 2rem !important;
    background: var(--m-gradient-text) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transition: all 0.35s var(--m-ease) !important;
    filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.2)) !important;
}

/* Nav tile icons — SVG icons used by SvelteKit settings (Heroicons) */
.grid.grid-cols-2.text-center svg,
.grid.grid-cols-2.text-center .w-10,
.grid.grid-cols-2.text-center .h-10,
.grid.grid-cols-2.text-center [class*="w-"][class*="h-"] {
    color: var(--m-accent-light) !important;
    filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.25)) !important;
    transition: all 0.35s var(--m-ease) !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    margin: 0 auto !important;
}

.grid.grid-cols-2.text-center a:hover svg,
.grid.grid-cols-2.text-center a:hover .w-10 {
    color: var(--m-accent-lighter) !important;
    transform: scale(1.12) translateY(-2px) !important;
    filter: drop-shadow(0 4px 16px rgba(124, 58, 237, 0.4)) !important;
}

.grid.grid-cols-2.text-center a:hover i.fas,
.grid.grid-cols-2.text-center a:hover i.fa-solid {
    transform: scale(1.12) translateY(-2px) !important;
    filter: drop-shadow(0 4px 16px rgba(124, 58, 237, 0.4)) !important;
}

/* Nav tile label text */
.grid.grid-cols-2.text-center .text-lg.font-semibold {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--m-text) !important;
    transition: color 0.25s var(--m-ease) !important;
}

/* Data button — special red styling */
.grid.grid-cols-2.text-center > button.rounded-xl {
    background: rgba(248, 113, 113, 0.06) !important;
    border: 1px solid rgba(248, 113, 113, 0.12) !important;
    transition: all 0.35s var(--m-ease) !important;
}

.grid.grid-cols-2.text-center > button.rounded-xl:hover {
    background: rgba(248, 113, 113, 0.14) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 40px rgba(248, 113, 113, 0.12) !important;
}

.grid.grid-cols-2.text-center > button.rounded-xl i {
    background: linear-gradient(135deg, #fca5a5, #f87171) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.grid.grid-cols-2.text-center > button.rounded-xl .text-lg.font-semibold {
    color: #fca5a5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   STATS GRID — Resolution time, Response time, Categories, etc.
   ═══════════════════════════════════════════════════════════════════════ */

/* Stats container */
.m-4.grid.grid-cols-2 {
    gap: 12px !important;
}

/* Individual stat cell */
.m-4.grid.grid-cols-2 > div {
    background: var(--m-glass) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 14px 16px !important;
    transition: all 0.3s var(--m-ease) !important;
    position: relative !important;
    overflow: hidden !important;
}

.m-4.grid.grid-cols-2 > div::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--m-accent), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.3s var(--m-ease) !important;
}

.m-4.grid.grid-cols-2 > div:hover {
    background: var(--m-glass-hover) !important;
    border-color: var(--m-border-light) !important;
    transform: translateY(-1px) !important;
}

.m-4.grid.grid-cols-2 > div:hover::before {
    opacity: 1 !important;
}

/* Stat label */
.m-4.grid h6.font-semibold,
h6.font-semibold {
    color: var(--m-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 4px !important;
}

/* Stat value */
.m-4.grid .text-gray-500,
.m-4.grid .dark\:text-slate-400,
.m-4.grid p.text-gray-500 {
    color: var(--m-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GUILD INFO CARD — Avatar + name + "Added on" date
   ═══════════════════════════════════════════════════════════════════════ */

/* Guild logo in info card */
.rounded-xl img.rounded-full,
.dark .rounded-xl img.rounded-full {
    border: 2px solid var(--m-border-accent) !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15) !important;
    transition: all 0.3s var(--m-ease) !important;
}

.rounded-xl img.rounded-full:hover {
    box-shadow: 0 6px 28px rgba(124, 58, 237, 0.25) !important;
    transform: scale(1.05) !important;
}

/* Guild name */
.text-2xl.font-bold,
span.text-2xl {
    color: var(--m-text) !important;
    letter-spacing: -0.02em !important;
}

/* "Added on" date text */
.fa-calendar-days {
    color: var(--m-accent-light) !important;
}

/* General stat value text override */
.text-gray-500,
.dark .text-gray-500,
.dark\:text-slate-400,
.dark .dark\:text-slate-400 {
    color: var(--m-text-secondary) !important;
}

/* Bot username discriminator */
.text-gray-500.dark\:text-slate-400,
span.text-gray-500 {
    color: var(--m-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DISCORD GREY (dgrey) — Login page and embed previews
   ═══════════════════════════════════════════════════════════════════════ */
.dark\:bg-dgrey-100, .bg-dgrey-100,
.dark .dark\:bg-dgrey-100, .dark .bg-dgrey-100 {
    background: rgba(16, 16, 28, 0.65) !important;
}

.dark\:bg-dgrey-300, .dark .dark\:bg-dgrey-300 {
    color: var(--m-text) !important;
}

.dark\:bg-dgrey-400, .bg-dgrey-400,
.dark .dark\:bg-dgrey-400, .dark .bg-dgrey-400 {
    background: rgba(10, 10, 18, 0.65) !important;
}

.dark\:bg-dgrey-800, .dark .dark\:bg-dgrey-800, .bg-dgrey-800 {
    background: rgba(16, 16, 28, 0.85) !important;
    color: var(--m-text) !important;
}

.dark\:bg-dgrey-900, .dark .dark\:bg-dgrey-900, .bg-dgrey-900 {
    background: rgba(12, 12, 22, 0.9) !important;
    border: 1px solid var(--m-border) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
}

.dark\:bg-dgrey-950, .dark .dark\:bg-dgrey-950, .bg-dgrey-950 {
    background: rgba(8, 8, 15, 0.92) !important;
    border-top: 1px solid var(--m-border) !important;
}

.dark\:text-dgrey-300, .text-dgrey-600,
.dark .dark\:text-dgrey-300, .dark .text-dgrey-600 {
    color: var(--m-text) !important;
}

.dark\:text-dgrey-400\/75, .dark .dark\:text-dgrey-400\/75 {
    color: var(--m-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════════════ */
.min-h-screen.bg-cover.bg-no-repeat {
    background-image: none !important;
    background-color: var(--m-bg) !important;
}

.min-h-screen.bg-gradient-to-bl,
.from-blurple\/50, .dark\:from-blurple\/25,
.to-white\/10, .dark\:to-blurple\/5,
.dark .from-blurple\/50, .dark .dark\:from-blurple\/25 {
    background: transparent !important;
    background-image:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(124, 58, 237, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 80% at 80% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 55%) !important;
}

.dark .rounded-lg.bg-dgrey-100.shadow-2xl.dark\:bg-dgrey-900,
.rounded-lg.shadow-2xl {
    background: var(--m-card) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-xl) !important;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5) !important;
}

.rounded-b-lg.bg-dgrey-400,
.rounded-b-lg.dark\:bg-dgrey-950 {
    background: rgba(8, 8, 15, 0.55) !important;
    border-top: 1px solid var(--m-border) !important;
    border-radius: 0 0 var(--m-radius-xl) var(--m-radius-xl) !important;
    color: var(--m-text-muted) !important;
}

.min-h-screen .rounded-full.h-24.w-24,
.min-h-screen img.rounded-full {
    border: 3px solid var(--m-border-accent) !important;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCENT / BLURPLE → MUSICO PURPLE
   ═══════════════════════════════════════════════════════════════════════ */
.bg-blurple, .dark .bg-blurple {
    background: var(--m-accent) !important;
    transition: all 0.3s var(--m-ease) !important;
}

.bg-blurple:hover, .dark .bg-blurple:hover,
.dark\:hover\:bg-blurple:hover, .dark .dark\:hover\:bg-blurple:hover {
    background: var(--m-accent-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px var(--m-accent-glow) !important;
}

.border-blurple, .dark .border-blurple,
.border-white\/50, .border-white\/25, .dark\:border-white\/25 {
    border-color: var(--m-border-accent) !important;
}

.text-blurple, .dark .text-blurple,
.hover\:text-blurple:hover, .dark .hover\:text-blurple:hover,
.dark\:hover\:text-blurple:hover, .dark .dark\:hover\:text-blurple:hover {
    color: var(--m-accent-light) !important;
}

.dark\:bg-blurple\/20, .bg-blurple\/20,
.dark .dark\:bg-blurple\/20, .dark .bg-blurple\/20 {
    background: var(--m-accent-subtle) !important;
}

.dark\:from-blurple\/25 { --tw-gradient-from: rgba(124, 58, 237, 0.12) !important; }
.dark\:to-blurple\/5 { --tw-gradient-to: rgba(124, 58, 237, 0.03) !important; }

.ring-blurple, .dark .ring-blurple,
.has-\[\:focus\]\:ring-blurple:has(:focus),
.dark .has-\[\:focus\]\:ring-blurple:has(:focus) {
    --tw-ring-color: var(--m-accent-glow) !important;
}

a.bg-blurple, .bg-blurple.font-semibold {
    box-shadow: 0 4px 20px var(--m-accent-glow) !important;
    border-color: var(--m-border-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */

/* Global button polish */
button, [role="button"], .dark button, .dark [role="button"] {
    font-family: 'Inter', sans-serif !important;
    letter-spacing: -0.01em !important;
    transition: background 0.25s var(--m-ease), transform 0.25s var(--m-ease), box-shadow 0.25s var(--m-ease), border-color 0.25s var(--m-ease) !important;
}

/* Accent buttons */
button.bg-blurple, [role="button"].bg-blurple,
.dark button.bg-blurple, .dark [role="button"].bg-blurple {
    box-shadow: 0 4px 16px var(--m-accent-glow) !important;
    border-radius: var(--m-radius-sm) !important;
}

button.bg-blurple:hover, [role="button"].bg-blurple:hover,
.dark button.bg-blurple:hover, .dark [role="button"].bg-blurple:hover {
    box-shadow: 0 8px 28px var(--m-accent-glow) !important;
}

/* Success / Submit */
.dark\:bg-green-500\/50, .dark .dark\:bg-green-500\/50,
button.dark\:bg-green-500\/50, .dark button.dark\:bg-green-500\/50 {
    background: rgba(34, 197, 94, 0.45) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    color: #fff !important;
    border-radius: var(--m-radius-sm) !important;
    font-weight: 600 !important;
    transition: background 0.25s var(--m-ease), box-shadow 0.25s var(--m-ease), border-color 0.25s var(--m-ease) !important;
}

.dark\:bg-green-500\/50:hover, .dark .dark\:bg-green-500\/50:hover,
.dark\:hover\:bg-green-500:hover, .dark .dark\:hover\:bg-green-500:hover {
    background: rgba(34, 197, 94, 0.7) !important;
    box-shadow: 0 4px 20px rgba(52, 211, 153, 0.25) !important;
    color: white !important;
}

.dark\:bg-green-500\/75, .dark .dark\:bg-green-500\/75, .bg-green-300,
button.dark\:bg-green-500\/75, .dark button.dark\:bg-green-500\/75 {
    background: rgba(34, 197, 94, 0.55) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    color: #fff !important;
    border-radius: var(--m-radius-sm) !important;
    font-weight: 600 !important;
    transition: background 0.25s var(--m-ease), box-shadow 0.25s var(--m-ease), border-color 0.25s var(--m-ease) !important;
}

/* Danger / Delete */
button.dark\:bg-red-500\/50, .dark button.dark\:bg-red-500\/50,
.dark\:bg-red-500\/20, .dark .dark\:bg-red-500\/20 {
    background: rgba(239, 68, 68, 0.35) !important;
    border: 1px solid rgba(248, 113, 113, 0.35) !important;
    color: #fff !important;
    border-radius: var(--m-radius-sm) !important;
    transition: background 0.25s var(--m-ease), box-shadow 0.25s var(--m-ease), border-color 0.25s var(--m-ease) !important;
}

.dark\:bg-red-500\/20:hover, .dark .dark\:bg-red-500\/20:hover,
button.dark\:bg-red-500\/50:hover, .dark button.dark\:bg-red-500\/50:hover,
.dark\:hover\:bg-red-500:hover, .dark .dark\:hover\:bg-red-500:hover {
    background: rgba(239, 68, 68, 0.6) !important;
    box-shadow: 0 4px 20px rgba(248, 113, 113, 0.2) !important;
    color: white !important;
}

.dark\:bg-red-500\/75, .dark .dark\:bg-red-500\/75, .bg-red-300,
button.dark\:bg-red-500\/75, .dark button.dark\:bg-red-500\/75 {
    background: rgba(239, 68, 68, 0.45) !important;
    border: 1px solid rgba(248, 113, 113, 0.35) !important;
    color: #fff !important;
    border-radius: var(--m-radius-sm) !important;
    font-weight: 600 !important;
    transition: background 0.25s var(--m-ease), box-shadow 0.25s var(--m-ease), border-color 0.25s var(--m-ease) !important;
}

/* Disabled */
button:disabled, button[disabled], .dark button:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TEXT COLORS
   ═══════════════════════════════════════════════════════════════════════ */
.dark\:text-slate-300, .dark .dark\:text-slate-300 { color: var(--m-text) !important; }
.dark\:text-slate-400, .dark .dark\:text-slate-400 { color: var(--m-text-secondary) !important; }
.dark\:text-white, .dark .dark\:text-white { color: var(--m-text) !important; }
.dark\:text-slate-500, .dark .dark\:text-slate-500 { color: var(--m-text-muted) !important; }
.dark\:text-slate-600, .dark .dark\:text-slate-600 { color: rgba(90, 96, 120, 0.7) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   HEADINGS
   ═══════════════════════════════════════════════════════════════════════ */
h1.text-4xl, h1.text-center.text-4xl, h1.text-3xl,
.dark h1.text-4xl, .dark h1.text-center, .dark h1.text-3xl {
    letter-spacing: -0.04em !important;
    font-weight: 800 !important;
    background: var(--m-gradient-text) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 12px rgba(124, 58, 237, 0.15)) !important;
}

/* Portal headings */
h3.text-xl.font-semibold, h4.font-semibold,
.dark h3.text-xl, .dark h4.font-semibold {
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
    color: var(--m-text) !important;
}

h2, h3, .dark h2, .dark h3 {
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
    color: var(--m-text) !important;
}

h4, h5, h6, .dark h4, .dark h5, .dark h6 {
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FONT AWESOME ICONS
   ═══════════════════════════════════════════════════════════════════════ */

/* Large icons on Documentation/Support footer cards */
i.fa-solid.text-5xl, i.fas.text-5xl, .dark .fa-solid.text-5xl {
    background: var(--m-gradient-text) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transition: all 0.35s var(--m-ease) !important;
}

a:hover i.fa-solid.text-5xl, a:hover i.fas.text-5xl {
    transform: scale(1.1) !important;
    filter: drop-shadow(0 4px 12px rgba(124, 58, 237, 0.3)) !important;
}

/* Back arrow */
i.fa-solid.fa-arrow-left {
    color: var(--m-text-secondary) !important;
    transition: all 0.25s var(--m-ease) !important;
}

a:hover i.fa-solid.fa-arrow-left {
    color: var(--m-accent-light) !important;
    transform: translateX(-2px) !important;
}

/* Circle plus icon */
i.fa-solid.fa-circle-plus {
    color: var(--m-accent-light) !important;
}

/* Expand/collapse */
i.fa-solid.fa-angle-down, i.fa-solid.fa-angle-up {
    color: var(--m-text-secondary) !important;
    transition: transform 0.25s var(--m-ease) !important;
}

/* Question mark help icons */
i.fa-solid.fa-circle-question {
    color: var(--m-text-muted) !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}

i.fa-solid.fa-circle-question:hover {
    opacity: 1 !important;
    color: var(--m-accent-light) !important;
}

/* Discord icon */
i.fa-brands.fa-discord { color: white !important; }

/* ═══════════════════════════════════════════════════════════════════════
   FORMS — Inputs, Selects, Textareas
   ═══════════════════════════════════════════════════════════════════════ */

/* Form container spacing improvement */
.my-4.grid.grid-cols-1.gap-8 {
    gap: 24px !important;
}

.my-4.grid.grid-cols-1.gap-8 > div {
    background: var(--m-glass) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-md) !important;
    padding: 20px !important;
    transition: all 0.3s var(--m-ease) !important;
}

.my-4.grid.grid-cols-1.gap-8 > div:hover {
    border-color: var(--m-border-light) !important;
    background: var(--m-glass-hover) !important;
}

/* Labels */
label.font-medium,
.font-medium {
    color: var(--m-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* Input fields */
.input, .form-input, .form-select, .form-multiselect,
select.input, textarea,
input[type="text"], input[type="number"], input[type="url"],
input[type="email"], input[type="password"], input[type="search"],
.dark .input, .dark .form-input, .dark .form-select,
.dark .form-multiselect, .dark textarea,
.dark input[type="text"], .dark input[type="number"],
.dark input[type="url"], .dark input[type="email"],
.dark input[type="password"], .dark input[type="search"] {
    background: rgba(8, 8, 15, 0.5) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    color: var(--m-text) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    transition: all 0.25s var(--m-ease) !important;
    width: 100% !important;
}

/* Input focus */
.input:focus, .form-input:focus, .form-select:focus,
.form-multiselect:focus, textarea:focus,
input[type="text"]:focus, input[type="number"]:focus,
input[type="url"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="search"]:focus,
.dark .input:focus, .dark .form-input:focus,
.dark .form-select:focus, .dark .form-multiselect:focus,
.dark textarea:focus, .dark input[type="text"]:focus {
    border-color: var(--m-accent) !important;
    box-shadow: 0 0 0 3px var(--m-accent-glow), 0 0 20px rgba(124, 58, 237, 0.1) !important;
    outline: none !important;
    background: rgba(12, 12, 22, 0.7) !important;
}

/* Placeholders */
.input::placeholder, input::placeholder, textarea::placeholder,
.dark .input::placeholder, .dark input::placeholder, .dark textarea::placeholder {
    color: var(--m-text-muted) !important;
    font-weight: 400 !important;
}

/* Select options */
.input option, select option, .dark .input option, .dark select option {
    background: #0e0e1a !important;
    color: var(--m-text) !important;
    padding: 8px !important;
}

/* Textarea specific */
textarea.input, textarea.form-input, .dark textarea {
    min-height: 100px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHECKBOX / RADIO
   ═══════════════════════════════════════════════════════════════════════ */
.form-checkbox, input[type="checkbox"],
.dark .form-checkbox, .dark input[type="checkbox"] {
    background: rgba(8, 8, 15, 0.5) !important;
    border: 2px solid var(--m-border-light) !important;
    border-radius: var(--m-radius-xs) !important;
    width: 18px !important;
    height: 18px !important;
    transition: all 0.2s var(--m-ease) !important;
    cursor: pointer !important;
}

input[type="checkbox"]:checked, input[type="radio"]:checked,
.dark input[type="checkbox"]:checked, .dark input[type="radio"]:checked {
    background-color: var(--m-accent) !important;
    border-color: var(--m-accent) !important;
    box-shadow: 0 0 10px var(--m-accent-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   WORKING HOURS SECTION
   ═══════════════════════════════════════════════════════════════════════ */

/* Working hours wrapper — the grid inside the form */
.grid.grid-cols-1.gap-2.font-medium {
    background: var(--m-glass) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-md) !important;
    padding: 20px !important;
}

/* Working hours expand/collapse trigger */
.cursor-pointer.select-none {
    padding: 8px 12px !important;
    border-radius: var(--m-radius-sm) !important;
    transition: all 0.25s var(--m-ease) !important;
}

.cursor-pointer.select-none:hover {
    background: var(--m-glass-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   WARNING / INFO BANNERS
   ═══════════════════════════════════════════════════════════════════════ */
.text-orange-600, .dark .text-orange-600,
.dark\:text-orange-400, .dark .dark\:text-orange-400 {
    color: var(--m-warning) !important;
}

.dark\:bg-orange-500\/20, .dark .dark\:bg-orange-500\/20 {
    background: var(--m-warning-bg) !important;
    border: 1px solid rgba(251, 191, 36, 0.12) !important;
    border-radius: var(--m-radius-md) !important;
    backdrop-filter: blur(8px) !important;
}

/* Warning section on settings pages */
.mb-8.text-center.text-orange-600,
.dark .mb-8.text-center {
    background: rgba(251, 191, 36, 0.04) !important;
    border: 1px solid rgba(251, 191, 36, 0.1) !important;
    border-radius: var(--m-radius-md) !important;
    padding: 16px 20px !important;
    margin: 0 auto 32px auto !important;
    max-width: 600px !important;
}

/* Problem banners on guild dashboard */
.rounded-xl.border-2.border-orange-600 {
    background: rgba(251, 191, 36, 0.05) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    border-radius: var(--m-radius-md) !important;
    backdrop-filter: blur(8px) !important;
}

/* Info banner — "Create a category to get started" */
.rounded-xl.border-2.border-blurple {
    background: var(--m-accent-subtle) !important;
    border: 1px solid var(--m-border-accent) !important;
    border-radius: var(--m-radius-md) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOGGLE / SWITCH
   ═══════════════════════════════════════════════════════════════════════ */
.dark\:bg-slate-600, .dark .dark\:bg-slate-600 {
    background: rgba(255, 255, 255, 0.06) !important;
    transition: background 0.25s var(--m-ease) !important;
    border-radius: 999px !important;
}

.bg-blurple[role="switch"], button.bg-blurple[role="switch"],
.dark .bg-blurple[role="switch"], .dark button.bg-blurple[role="switch"] {
    background: var(--m-accent) !important;
    box-shadow: 0 0 16px var(--m-accent-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TAB NAVIGATION
   ═══════════════════════════════════════════════════════════════════════ */
.dark\:border-b-slate-700, .dark .dark\:border-b-slate-700 {
    border-bottom-color: var(--m-border) !important;
}

.border-b-blurple, .dark .border-b-blurple {
    border-bottom-color: var(--m-accent) !important;
    border-bottom-width: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BADGES / CHIPS / SLATE-900
   ═══════════════════════════════════════════════════════════════════════ */
.dark\:bg-slate-900, .dark .dark\:bg-slate-900,
.bg-slate-100, .dark .bg-slate-100 {
    background: rgba(8, 8, 15, 0.85) !important;
}

/* Prose (tag preview) */
.prose.dark\:prose-invert, .dark .prose { color: var(--m-text) !important; }
.prose a, .prose-a\:text-blurple a, .dark .prose a { color: var(--m-accent-light) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MULTISELECT COMPONENT
   ═══════════════════════════════════════════════════════════════════════ */
div.multiselect, .dark div.multiselect {
    background: rgba(8, 8, 15, 0.5) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    color: var(--m-text) !important;
    font-family: 'Inter', sans-serif !important;
    min-height: 42px !important;
}

div.multiselect:focus-within, .dark div.multiselect:focus-within {
    border-color: var(--m-accent) !important;
    box-shadow: 0 0 0 3px var(--m-accent-glow) !important;
}

div.multiselect .multiselect-tag, .dark div.multiselect .multiselect-tag {
    background: var(--m-accent-subtle) !important;
    color: var(--m-accent-light) !important;
    border-radius: var(--m-radius-xs) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 3px 10px !important;
    border: 1px solid rgba(124, 58, 237, 0.18) !important;
}

div.multiselect .multiselect-tag i::before,
.dark div.multiselect .multiselect-tag i::before {
    color: var(--m-accent-light) !important;
}

div.multiselect .multiselect-dropdown, .dark div.multiselect .multiselect-dropdown {
    background: rgba(12, 12, 22, 0.98) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    margin-top: 4px !important;
}

div.multiselect .multiselect-option, .dark div.multiselect .multiselect-option {
    transition: all 0.15s ease !important;
    border-radius: var(--m-radius-xs) !important;
    margin: 2px 4px !important;
    padding: 8px 12px !important;
}

div.multiselect .multiselect-option.is-pointed,
.dark div.multiselect .multiselect-option.is-pointed {
    background: var(--m-glass-hover) !important;
}

div.multiselect .multiselect-option.is-selected,
.dark div.multiselect .multiselect-option.is-selected {
    background: var(--m-accent-subtle) !important;
    color: var(--m-accent-light) !important;
}

div.multiselect .multiselect-search, .dark div.multiselect .multiselect-search {
    background: transparent !important;
    color: var(--m-text) !important;
}

div.multiselect .multiselect-placeholder, .dark div.multiselect .multiselect-placeholder {
    color: var(--m-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.st-toast, .st-toast.dark, .dark .st-toast, .dark .st-toast.dark {
    background: rgba(16, 16, 28, 0.96) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-md) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--m-text) !important;
}

.toast-container { z-index: 9999 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════════════════════════════════ */
a.transition.duration-300, .dark a.transition.duration-300 {
    color: var(--m-text-secondary) !important;
    transition: all 0.25s var(--m-ease) !important;
}

a.transition.duration-300:hover, .dark a.transition.duration-300:hover {
    color: var(--m-accent-light) !important;
}

a[href="/panel/tickets"], a[href="/panel"],
.dark a[href="/panel/tickets"], .dark a[href="/panel"] {
    color: var(--m-accent-light) !important;
    font-weight: 500 !important;
    transition: color 0.25s var(--m-ease) !important;
}

a[href="/panel/tickets"]:hover, a[href="/panel"]:hover,
.dark a[href="/panel/tickets"]:hover, .dark a[href="/panel"]:hover {
    color: var(--m-accent-lighter) !important;
}

a.font-semibold.hover\:underline, .dark a.font-semibold.hover\:underline {
    color: var(--m-accent-light) !important;
    text-decoration-color: transparent !important;
    transition: all 0.25s var(--m-ease) !important;
}

a.font-semibold.hover\:underline:hover, .dark a.font-semibold.hover\:underline:hover {
    color: var(--m-accent-lighter) !important;
    text-decoration-color: var(--m-accent-lighter) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BORDERS
   ═══════════════════════════════════════════════════════════════════════ */
.dark\:border-slate-600, .dark .dark\:border-slate-600 { border-color: var(--m-border) !important; }
.dark\:border-slate-700, .dark .dark\:border-slate-700,
.border-white, .dark .border-white { border-color: var(--m-border) !important; }
.border-t, .dark .border-t { border-top-color: var(--m-border) !important; }
.border-b, .dark .border-b { border-bottom-color: var(--m-border) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SHADOWS
   ═══════════════════════════════════════════════════════════════════════ */
.shadow-sm, .dark .shadow-sm { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important; }
.shadow-lg, .dark .shadow-lg { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important; }
.shadow-xl, .dark .shadow-xl { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4) !important; }
.shadow-2xl, .dark .shadow-2xl { box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MODAL / BACKDROP
   ═══════════════════════════════════════════════════════════════════════ */
.backdrop, .dark .backdrop, [class*="backdrop"] {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ROUNDED ELEMENTS
   ═══════════════════════════════════════════════════════════════════════ */
div.rounded-xl, a.rounded-xl, section.rounded-xl, .dark div.rounded-xl, .dark a.rounded-xl { border-radius: var(--m-radius-lg) !important; }
div.rounded-lg, a.rounded-lg, section.rounded-lg, .dark div.rounded-lg, .dark a.rounded-lg { border-radius: var(--m-radius-md) !important; }
div.rounded-md, section.rounded-md, .dark div.rounded-md { border-radius: var(--m-radius-sm) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR / NAVIGATION / BREADCRUMB
   ═══════════════════════════════════════════════════════════════════════ */
nav, [class*="sidebar"], aside,
.dark nav, .dark [class*="sidebar"], .dark aside {
    border-color: var(--m-border) !important;
}

/* Back button breadcrumb — "← Guild Name" */
.text-center > a.link.rounded-xl {
    background: var(--m-glass) !important;
    border: 1px solid var(--m-border) !important;
    color: var(--m-text-secondary) !important;
    padding: 8px 20px !important;
    transition: all 0.3s var(--m-ease) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.text-center > a.link.rounded-xl:hover {
    background: var(--m-glass-hover) !important;
    border-color: var(--m-border-accent) !important;
    color: var(--m-accent-light) !important;
    transform: translateX(-4px) !important;
}

/* Staff dashboard bar */
.w-full.bg-dgrey-400, .w-full.dark\:bg-dgrey-950 {
    background: rgba(8, 8, 15, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--m-border) !important;
}

.rounded-md.bg-dgrey-900\/10 {
    background: var(--m-glass) !important;
    border: 1px solid var(--m-border) !important;
    transition: all 0.25s var(--m-ease) !important;
}

.rounded-md.bg-dgrey-900\/10:hover {
    background: var(--m-glass-hover) !important;
    border-color: var(--m-border-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CATEGORIES LIST — Category cards with emoji, stats
   ═══════════════════════════════════════════════════════════════════════ */

/* Category card hover — show stats text brighter */
.link.group:hover .text-gray-500,
.link.group:hover .dark\:text-slate-400 {
    color: var(--m-text) !important;
}

/* Category emoji */
.link .text-5xl {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) !important;
    transition: transform 0.3s var(--m-ease) !important;
}

a:hover .link .text-5xl {
    transform: scale(1.1) !important;
}

/* Category stats — response/resolution times */
.link .fa-clock, .link .fa-square-check {
    color: var(--m-accent-light) !important;
}

/* Create category card */
a[href="./categories/new"] .link {
    border-style: dashed !important;
    border-color: var(--m-border-light) !important;
}

a[href="./categories/new"]:hover .link {
    border-color: var(--m-accent) !important;
    background: var(--m-accent-subtle) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.12) !important; }

* {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.06) transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════════════════════════════ */
[class*="tooltip"], .dark [class*="tooltip"] {
    background: rgba(12, 12, 22, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    color: var(--m-text) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
    padding: 6px 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CODE / PRE
   ═══════════════════════════════════════════════════════════════════════ */
pre, code, .dark pre, .dark code {
    background: rgba(8, 8, 15, 0.7) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-xs) !important;
    color: var(--m-accent-light) !important;
    font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════ */
table, .dark table { border-color: var(--m-border) !important; }

th, .dark th {
    background: var(--m-glass) !important;
    color: var(--m-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 12px 16px !important;
}

td, .dark td {
    border-color: var(--m-border) !important;
    padding: 10px 16px !important;
}

tr:hover td, .dark tr:hover td {
    background: var(--m-glass-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DIVIDERS / HRs
   ═══════════════════════════════════════════════════════════════════════ */
hr, .dark hr {
    border-color: var(--m-border) !important;
    opacity: 0.5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SELECTION HIGHLIGHT
   ═══════════════════════════════════════════════════════════════════════ */
::selection {
    background: rgba(124, 58, 237, 0.35) !important;
    color: var(--m-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FOCUS VISIBLE
   ═══════════════════════════════════════════════════════════════════════ */
*:focus-visible {
    outline: 2px solid var(--m-accent) !important;
    outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOADING / SPINNER
   ═══════════════════════════════════════════════════════════════════════ */
[class*="spinner"], [class*="loading"],
.dark [class*="spinner"], .dark [class*="loading"] {
    border-color: var(--m-border) !important;
    border-top-color: var(--m-accent-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   POPOVER / DROPDOWN
   ═══════════════════════════════════════════════════════════════════════ */
[class*="popover"], [class*="dropdown-menu"], [class*="listbox"],
.dark [class*="popover"], .dark [class*="dropdown-menu"], .dark [class*="listbox"] {
    background: rgba(12, 12, 22, 0.98) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   AVATAR IMAGES
   ═══════════════════════════════════════════════════════════════════════ */
img.rounded-full, .dark img.rounded-full {
    border: 2px solid var(--m-border-light) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s var(--m-ease) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PORTAL FOOTER — Documentation / Support link cards
   ═══════════════════════════════════════════════════════════════════════ */

/* Footer link cards */
.link p.text-lg.font-semibold {
    color: var(--m-text) !important;
    font-weight: 600 !important;
}

.link p:not(.text-lg) {
    color: var(--m-text-secondary) !important;
    font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CATEGORY DETAIL PAGE — Settings form tabs
   ═══════════════════════════════════════════════════════════════════════ */

/* Tab row underline */
.border-b {
    border-bottom: 2px solid var(--m-border) !important;
}

/* Active tab */
.border-b-2.border-b-blurple {
    border-bottom-color: var(--m-accent) !important;
    color: var(--m-accent-light) !important;
}

/* Inactive tab */
.border-b-2.dark\:border-b-slate-700 {
    border-bottom-color: transparent !important;
    color: var(--m-text-muted) !important;
    transition: all 0.25s var(--m-ease) !important;
}

.border-b-2.dark\:border-b-slate-700:hover {
    color: var(--m-text) !important;
    border-bottom-color: var(--m-border-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE POLISH
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Disable hover transforms on mobile */
    a:hover .dark\:bg-slate-800,
    a:hover .bg-gray-100,
    .dark a:hover .dark\:bg-slate-800,
    .dark a:hover .bg-gray-100,
    a:hover .dark\:bg-slate-800\/75,
    a:hover .bg-gray-50\/75 {
        transform: none !important;
    }

    /* Nav tiles stack better on mobile */
    .grid.grid-cols-2.text-center {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Stats grid on mobile */
    .m-4.grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Form fields full width */
    .my-4.grid.grid-cols-1.gap-8 > div {
        padding: 14px !important;
    }

    /* Warning banner */
    .mb-8.text-center.text-orange-600 {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }
}

@media (max-width: 480px) {
    .grid.grid-cols-2.text-center {
        grid-template-columns: 1fr !important;
    }

    .m-4.grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    h1.text-4xl {
        font-size: 1.75rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ANIMATIONS — Staggered card entrance
   ═══════════════════════════════════════════════════════════════════════ */

/* Nav tile stagger */
.grid.grid-cols-2.text-center > a:nth-child(1),
.grid.grid-cols-2.text-center > button:nth-child(6) { animation: cardIn 0.4s var(--m-ease) backwards !important; }
.grid.grid-cols-2.text-center > a:nth-child(2) { animation: cardIn 0.4s var(--m-ease) 0.05s backwards !important; }
.grid.grid-cols-2.text-center > a:nth-child(3) { animation: cardIn 0.4s var(--m-ease) 0.1s backwards !important; }
.grid.grid-cols-2.text-center > a:nth-child(4) { animation: cardIn 0.4s var(--m-ease) 0.15s backwards !important; }
.grid.grid-cols-2.text-center > a:nth-child(5) { animation: cardIn 0.4s var(--m-ease) 0.2s backwards !important; }

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

/* Stats stagger */
.m-4.grid.grid-cols-2 > div:nth-child(1) { animation: statIn 0.35s var(--m-ease) backwards !important; }
.m-4.grid.grid-cols-2 > div:nth-child(2) { animation: statIn 0.35s var(--m-ease) 0.04s backwards !important; }
.m-4.grid.grid-cols-2 > div:nth-child(3) { animation: statIn 0.35s var(--m-ease) 0.08s backwards !important; }
.m-4.grid.grid-cols-2 > div:nth-child(4) { animation: statIn 0.35s var(--m-ease) 0.12s backwards !important; }
.m-4.grid.grid-cols-2 > div:nth-child(5) { animation: statIn 0.35s var(--m-ease) 0.16s backwards !important; }
.m-4.grid.grid-cols-2 > div:nth-child(6) { animation: statIn 0.35s var(--m-ease) 0.20s backwards !important; }

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

/* Form field stagger */
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(1)  { animation: fieldIn 0.3s var(--m-ease) backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(2)  { animation: fieldIn 0.3s var(--m-ease) 0.03s backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(3)  { animation: fieldIn 0.3s var(--m-ease) 0.06s backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(4)  { animation: fieldIn 0.3s var(--m-ease) 0.09s backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(5)  { animation: fieldIn 0.3s var(--m-ease) 0.12s backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(6)  { animation: fieldIn 0.3s var(--m-ease) 0.15s backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(7)  { animation: fieldIn 0.3s var(--m-ease) 0.18s backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(8)  { animation: fieldIn 0.3s var(--m-ease) 0.21s backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(9)  { animation: fieldIn 0.3s var(--m-ease) 0.24s backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(10) { animation: fieldIn 0.3s var(--m-ease) 0.27s backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(11) { animation: fieldIn 0.3s var(--m-ease) 0.30s backwards !important; }
.my-4.grid.grid-cols-1.gap-8 > div:nth-child(12) { animation: fieldIn 0.3s var(--m-ease) 0.33s backwards !important; }

@keyframes fieldIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   BRANDING — Replace "Discord Tickets" with "Musico Support"
   ═══════════════════════════════════════════════════════════════════════ */

/* Hide original "DISCORD TICKETS" logo text and replace with Musico Support */
h1.text-4xl.font-extrabold.uppercase,
.text-4xl.font-extrabold.uppercase,
h1[class*="uppercase"][class*="font-extrabold"] {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    position: relative !important;
}

h1.text-4xl.font-extrabold.uppercase::after,
.text-4xl.font-extrabold.uppercase::after,
h1[class*="uppercase"][class*="font-extrabold"]::after {
    content: "MUSICO SUPPORT" !important;
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    background: var(--m-gradient-text) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 12px rgba(124, 58, 237, 0.2)) !important;
    display: block !important;
}

/* Replace logo image with Musico Support PNG */
img[alt*="Discord Tickets"],
img[alt*="discord-tickets"],
img[src*="discord-tickets"],
img.h-12[alt],
img.h-16[alt] {
    content: url("/panel/MusicoSupport.png") !important;
    width: auto !important;
    height: 48px !important;
    object-fit: contain !important;
}

/* Footer copyright override — hide original footer content */
.mx-auto.my-8.max-w-3xl,
.mx-auto.my-8,
footer.mx-auto {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    position: relative !important;
    overflow: hidden !important;
    max-height: 60px !important;
}

.mx-auto.my-8.max-w-3xl *,
.mx-auto.my-8 *,
footer.mx-auto *,
footer *,
.mx-auto.my-8 a,
.mx-auto.my-8 span,
.mx-auto.my-8 p,
.mx-auto.my-8 div {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide Documentation, Support, Feedback link cards in footer */
a[href*="docs.discordtickets"],
a[href*="lnk.earth"],
a[href*="discordtickets.app"],
a[href*="go.eartharoid"],
.mx-auto.my-8 .grid {
    display: none !important;
}

/* Hide any remaining eartharoid / Discord Tickets / Isaac Saunders text */
[class*="text-center"][class*="text-sm"]:not(.breadcrumb):not(.stat-label):not(.nav-section-title) {
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Single footer replacement — only on .max-w-3xl to prevent duplicates */
.mx-auto.my-8.max-w-3xl::after {
    content: "Musico Support · © 2026 Musico" !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: var(--m-text-muted) !important;
    display: block !important;
    text-align: center !important;
    visibility: visible !important;
    height: auto !important;
    padding: 16px 0 !important;
}

/* Suppress ::after on other footer-like containers to prevent duplicates */
.mx-auto.my-8:not(.max-w-3xl)::after,
footer::after {
    content: none !important;
    display: none !important;
}

/* Data button SVG icons — red styling */
.grid.grid-cols-2.text-center > button.rounded-xl svg {
    color: #fca5a5 !important;
    filter: drop-shadow(0 2px 8px rgba(248, 113, 113, 0.2)) !important;
}

.grid.grid-cols-2.text-center > button.rounded-xl:hover svg {
    color: #f87171 !important;
    filter: drop-shadow(0 4px 16px rgba(248, 113, 113, 0.4)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   GETTING STARTED OVERLAY — Fix z-index so it renders on top
   ═══════════════════════════════════════════════════════════════════════ */

/* The Getting Started / Welcome page from SvelteKit settings — ensure it is on top */
.absolute.inset-0,
.fixed.inset-0,
[class*="absolute"][class*="inset-0"] {
    z-index: 50 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FLOATING ACTION BUTTON — "View Tickets" fab
   ═══════════════════════════════════════════════════════════════════════ */
.musico-fab {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: var(--m-accent, #7c3aed) !important;
    color: #fff !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    box-shadow:
        0 8px 32px rgba(124, 58, 237, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.3) !important;
    z-index: 9998 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    animation: fabIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s backwards !important;
}

.musico-fab:hover {
    background: var(--m-accent-hover, #6d28d9) !important;
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow:
        0 12px 40px rgba(124, 58, 237, 0.45),
        0 4px 12px rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.musico-fab:active {
    transform: translateY(-1px) scale(0.98) !important;
}

.musico-fab svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    filter: none !important;
    color: inherit !important;
}

@keyframes fabIn {
    from { opacity: 0; transform: translateY(20px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hide fab on the tickets panel itself */
.musico-fab[style*="display: none"] { display: none !important; }

@media (max-width: 480px) {
    .musico-fab {
        bottom: 16px !important;
        right: 16px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }
}