/**
 * AUM DAPP ?? Sapphire Design System (??0C.11)
 * Refero synthesis: MetaMusic (white+blue SaaS) ?? Bluesky (social feed) ?? Shazam (discovery pills)
 * CSS only ?? zero business logic
 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ???? Canonical tokens (all white DAPP surfaces) ???? */
html.aum-sapphire-dapp,
html.aum-dapp-white-pages,
html.aum-index-preview,
html.aum-create-preview,
html.aum-creator-preview {
    --brand-primary: #2A6BFF;
    --brand-hover: #1A4FD9;
    --brand-light: rgba(42, 107, 255, 0.08);
    --brand-ultra-light: rgba(42, 107, 255, 0.04);
    --brand-glow: rgba(42, 107, 255, 0.12);
    --bg-page: #F4F6FA;
    --bg-card: #FFFFFF;
    --bg-input: #F8FAFC;
    --bg-elevated: #FFFFFF;
    --bg-overlay: rgba(0, 0, 0, 0.40);
    --text-title: #0B1426;
    --text-body: #1A2A3A;
    --text-secondary: #5A7A9A;
    --text-weak: #8AA4C8;
    --text-brand: #2A6BFF;
    --text-on-brand: #FFFFFF;
    --border-card: #E8EDF4;
    --border-divider: #EDF1F8;
    --border-input: #E0E6ED;
    --border-focus: #2A6BFF;
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 8px 28px rgba(42, 107, 255, 0.10);
    --shadow-btn: 0 4px 16px rgba(42, 107, 255, 0.25);
    --shadow-dropdown: 0 8px 40px rgba(0, 0, 0, 0.08);
    --radius-card: 16px;
    --radius-btn: 12px;
    --radius-input: 10px;
    --radius-tag: 20px;
    --radius-pill: 999px;
    --color-success: #2ECC71;
    --color-success-bg: rgba(46, 204, 113, 0.10);
    --color-danger: #FF5A6B;
    --color-danger-bg: rgba(255, 90, 107, 0.10);
    --font-sapphire: 'Plus Jakarta Sans', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
    --grad-brand: linear-gradient(155deg, #2A6BFF 0%, #1A4FD9 100%);
    --grad-brand-text: linear-gradient(90deg, #1A4FD9 0%, #2A6BFF 48%, #6BA3FF 100%);
    --grad-sapphire-hero: linear-gradient(132deg, #0C4A8C 0%, #1E5FD9 22%, #3D8BFF 48%, #5BC4F0 68%, #2A6BFF 88%, #1740A8 100%);
    --grad-sapphire-sub: linear-gradient(92deg, #1348A8 0%, #2A6BFF 38%, #5BC4F0 72%, #7B6CFF 100%);

    /* Remap legacy --aum-* for shell / bridge compatibility on white pages */
    --aum-bg-deep: var(--bg-page);
    --aum-bg-base: var(--bg-page);
    --aum-bg-elevated: var(--bg-card);
    --aum-bg-card: var(--bg-card);
    --aum-bg-card-solid: var(--bg-card);
    --aum-bg-input: var(--bg-input);
    --aum-bg-hover: var(--brand-light);
    --aum-bg-glass: rgba(255, 255, 255, 0.92);
    --aum-border: var(--border-card);
    --aum-border-subtle: var(--border-divider);
    --aum-border-accent: rgba(42, 107, 255, 0.28);
    --aum-accent: var(--brand-primary);
    --aum-accent-bright: var(--brand-primary);
    --aum-accent-deep: var(--brand-hover);
    --aum-accent-on-dark: #FFFFFF;
    --aum-accent-soft: var(--brand-light);
    --aum-accent-glow: var(--brand-glow);
    --aum-accent-hot: var(--brand-primary);
    --aum-gradient-cta: var(--grad-brand);
    --aum-gradient-accent: var(--grad-brand);
    --aum-gradient-accent-h: var(--grad-brand);
    --aum-text: var(--text-title);
    --aum-text-secondary: var(--text-secondary);
    --aum-text-muted: var(--text-weak);
    --aum-danger: var(--color-danger);
    --aum-success: var(--color-success);
    --aum-btn-primary-bg: var(--brand-primary);
    --aum-btn-primary-text: #FFFFFF;
    --aum-btn-ghost-border: var(--border-card);
    --aum-btn-ghost-text: var(--text-secondary);
    --aum-shadow-sm: var(--shadow-card);
    --aum-shadow-md: var(--shadow-card-hover);
    --aum-shadow-glow: var(--shadow-btn);
}

html.aum-sapphire-dapp,
html.aum-sapphire-dapp body,
html.aum-dapp-white-pages body,
html.aum-index-preview body,
html.aum-create-preview body {
    font-family: var(--font-sapphire) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ???? Shared: top bar (Refero ?? Bluesky sticky white header) ???? */
html.aum-sapphire-dapp .top-bar,
html.aum-sapphire-dapp .topbar-shell .top-bar,
html.aum-sapphire-dapp .header {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border-bottom: 1px solid var(--border-card) !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--text-title) !important;
}

html.aum-sapphire-dapp .top-bar a,
html.aum-sapphire-dapp .top-bar h1,
html.aum-sapphire-dapp .top-title {
    color: var(--text-title) !important;
}

/* ???? Shared: primary / secondary buttons (MetaMusic pill CTA) ???? */
html.aum-sapphire-dapp .btn-primary,
html.aum-sapphire-dapp .member-open-btn,
html.aum-sapphire-dapp .wp-cta,
html.aum-sapphire-dapp #backHomeBtn {
    background: var(--grad-brand) !important;
    color: var(--text-on-brand) !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    box-shadow: var(--shadow-btn) !important;
    font-weight: 600 !important;
}

html.aum-sapphire-dapp .btn-secondary,
html.aum-sapphire-dapp .top-btn,
html.aum-sapphire-dapp .back {
    background: var(--bg-card) !important;
    color: var(--text-brand) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--radius-btn) !important;
}

html.aum-sapphire-dapp .btn-primary:disabled {
    opacity: 0.55 !important;
}

/* ???? Shared: cards (soft elevation ?? 16px radius) ???? */
html.aum-sapphire-dapp .card,
html.aum-sapphire-dapp .user-card,
html.aum-sapphire-dapp .asset-card,
html.aum-sapphire-dapp .moment {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card) !important;
}

html.aum-sapphire-dapp .card:hover,
html.aum-sapphire-dapp .work-tile:hover,
html.aum-sapphire-dapp .feature-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
}

/* ???? Shared: tabs / category pills (Shazam ?? discovery) ???? */
html.aum-sapphire-dapp .tab-btn,
html.aum-sapphire-dapp .profile-tab,
html.aum-sapphire-dapp .works-kind-tab,
html.aum-sapphire-dapp .chip,
html.aum-sapphire-dapp .ratio-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-tag) !important;
    font-weight: 500 !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

html.aum-sapphire-dapp .tab-btn.active,
html.aum-sapphire-dapp .profile-tab.active,
html.aum-sapphire-dapp .works-kind-tab.active,
html.aum-sapphire-dapp .chip.active,
html.aum-sapphire-dapp .ratio-item.active,
html.aum-sapphire-dapp .style-card.active {
    background: var(--brand-light) !important;
    border-color: rgba(42, 107, 255, 0.35) !important;
    color: var(--text-brand) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* ???? Shared: inputs ???? */
html.aum-sapphire-dapp textarea,
html.aum-sapphire-dapp input[type="text"],
html.aum-sapphire-dapp input[type="number"],
html.aum-sapphire-dapp input[type="search"] {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--radius-input) !important;
    color: var(--text-title) !important;
}

html.aum-sapphire-dapp textarea:focus,
html.aum-sapphire-dapp input:focus {
    border-color: var(--border-focus) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--brand-ultra-light) !important;
}

html.aum-sapphire-dapp .hint,
html.aum-sapphire-dapp label {
    color: var(--text-secondary) !important;
}

/* ???? Shared: social feed (Bluesky ?? content-first cards) ???? */
html.aum-sapphire-dapp .moment {
    margin-bottom: var(--radius-btn) !important;
    padding: 14px 16px !important;
}

html.aum-sapphire-dapp .moment-avatar {
    background: var(--grad-brand) !important;
    border-radius: var(--radius-btn) !important;
    color: #fff !important;
}

html.aum-sapphire-dapp .moment-name {
    color: var(--text-title) !important;
    font-weight: 600 !important;
}

html.aum-sapphire-dapp .moment-time,
html.aum-sapphire-dapp .moment-ft {
    color: var(--text-weak) !important;
}

html.aum-sapphire-dapp .moment-caption {
    color: var(--text-body) !important;
    line-height: 1.55 !important;
}

html.aum-sapphire-dapp .moment-img {
    border-radius: var(--radius-btn) !important;
    border: 1px solid var(--border-divider) !important;
}

/* ???? Shared: media / works grid (Copilot 2??2 ?? LottieFiles 3-col) ???? */
html.aum-sapphire-dapp .works-grid,
html.aum-sapphire-dapp .style-grid {
    gap: 12px !important;
}

html.aum-sapphire-dapp .work-tile,
html.aum-sapphire-dapp .style-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-card) !important;
    border-radius: var(--radius-card) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-card) !important;
}

html.aum-sapphire-dapp .work-tile-cover,
html.aum-sapphire-dapp .style-card-thumb {
    background: var(--bg-input) !important;
}

html.aum-sapphire-dapp .work-tile-title {
    color: var(--text-title) !important;
}

/* ???? Shared: toast ???? */
html.aum-sapphire-dapp .toast {
    background: rgba(11, 20, 38, 0.88) !important;
    color: #fff !important;
    border-radius: var(--radius-pill) !important;
    backdrop-filter: blur(12px) !important;
}

/* ???? Shared: page background wash ???? */
html.aum-sapphire-dapp body {
    background: var(--bg-page) !important;
    color: var(--text-body) !important;
}

html.aum-sapphire-dapp body::before {
    background:
        radial-gradient(ellipse 92% 58% at 50% -10%, rgba(42, 107, 255, 0.06), transparent 58%),
        radial-gradient(circle at 12% 76%, rgba(42, 107, 255, 0.04), transparent 44%),
        var(--bg-page) !important;
}

html.aum-sapphire-dapp body::after {
    display: none !important;
}

/* ???? Brand gradient text ???? */
html.aum-sapphire-dapp .text-gem,
html.aum-sapphire-dapp .logo-text,
html.aum-sapphire-dapp .social-num,
html.aum-sapphire-dapp .asset-balance,
html.aum-sapphire-dapp .fee-line strong,
html.aum-sapphire-dapp .gen-timer {
    background: var(--grad-brand-text) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

html.aum-sapphire-dapp .asset-balance,
html.aum-sapphire-dapp .social-num,
html.aum-sapphire-dapp .gen-timer {
    -webkit-text-fill-color: unset !important;
    color: var(--brand-primary) !important;
    background: none !important;
}

html.aum-sapphire-dapp .gen-timer {
    font-variant-numeric: tabular-nums !important;
}

/* ???? Progress / creation header (sapphire, not orange) ???? */
html.aum-sapphire-dapp .song-progress-bar-fill,
html.aum-sapphire-dapp .progress-fill {
    background: var(--grad-brand) !important;
}

html.aum-sapphire-dapp #songProgressHeader {
    --progress-accent: var(--brand-primary);
}