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

:root {
    /* === ArteVia OS — Dark Mode (Black + Green) === */
    --bg: #03040c;
    --bg2: #070a14;
    --bg3: #0c0f1e;
    --radius: 16px;
    --rSm: 10px;
    --text: #e8ecf5;
    --text2: rgba(232, 236, 245, 0.65);
    --text3: rgba(232, 236, 245, 0.38);
    --white: #ffffff;
    --avAccent: #39ff14;
    --accent-rgb: 57, 255, 20;
    --accent-text: #39ff14;
    --text-on-accent: #000000;
    --avAccentDim: rgba(57, 255, 20, 0.12);
    --surface: rgba(10, 12, 26, 0.96);
    --surface2: rgba(57, 255, 20, 0.04);
    --border: rgba(57, 255, 20, 0.09);
    --border2: rgba(57, 255, 20, 0.22);
    --neon: #39ff14;
    --neon2: #5eff3a;
    --neon-dim: rgba(57, 255, 20, 0.10);
    --scale: 1.25;
    --indigo: #39ff14;
    --indigo2: #5eff3a;
    --violet: #39ff14;
    --amber: #f59e0b;
    --emerald: #39ff14;
    --rose: #f43f5e;
    --sky: #38bdf8;
    --err: #f43f5e;
    --mono: "JetBrains Mono", "Consolas", "Monaco", monospace;
    --sans: "Outfit", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.8);
    --glow: 0 0 16px rgba(57, 255, 20, 0.18);
    --glowStrong: 0 0 28px rgba(57, 255, 20, 0.32);
    --transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

/* === RENK PALETİ PRESETLERİ === */
html[data-theme="mono-white"] {
    --accent-rgb: 51, 51, 51;
    --accent-text: #333333;
    --text-on-accent: #ffffff;
    --bg: #ffffff;
    --bg2: #f8f8f8;
    --bg3: #f0f0f0;
    --text: #111111;
    --text2: rgba(0, 0, 0, 0.85);
    --text3: rgba(0, 0, 0, 0.55);
    --avAccent: #333333;
    --avAccentDim: rgba(0, 0, 0, 0.08);
    --border: rgba(0, 0, 0, 0.12);
    --border2: rgba(0, 0, 0, 0.25);
    --neon: #333333;
    --neon2: #444444;
    --neon-dim: rgba(0, 0, 0, 0.08);
    --indigo: #333;
    --violet: #333;
    --amber: #333;
    --emerald: #333;
    --sky: #444;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
    --glow: 0 0 10px rgba(0, 0, 0, 0.06);
    --glowStrong: 0 0 20px rgba(0, 0, 0, 0.1);
}
html[data-theme="mono-black"] {
    --accent-rgb: 224, 224, 224;
    --accent-text: #e0e0e0;
    --text-on-accent: #000000;
    --bg: #000000;
    --bg2: #0a0a0a;
    --bg3: #111111;
    --text: #ffffff;
    --text2: rgba(255, 255, 255, 0.9);
    --text3: rgba(255, 255, 255, 0.6);
    --avAccent: #e0e0e0;
    --avAccentDim: rgba(255, 255, 255, 0.1);
    --border: rgba(255, 255, 255, 0.12);
    --border2: rgba(255, 255, 255, 0.3);
    --neon: #e0e0e0;
    --neon2: #ffffff;
    --neon-dim: rgba(255, 255, 255, 0.1);
    --indigo: #e0e0e0;
    --violet: #e0e0e0;
    --amber: #e0e0e0;
    --emerald: #e0e0e0;
    --sky: #ffffff;
}
html[data-theme="cream"] {
    --accent-rgb: 139, 105, 20;
    --accent-text: #5c4510;
    --text-on-accent: #ffffff;
    --bg: #f5f0e6;
    --bg2: #ebe5d9;
    --bg3: #e0d9cc;
    --text: #2c2416;
    --text2: rgba(44, 36, 22, 0.9);
    --text3: rgba(44, 36, 22, 0.6);
    --avAccent: #8b6914;
    --avAccentDim: rgba(139, 105, 20, 0.15);
    --border: rgba(139, 105, 20, 0.2);
    --border2: rgba(139, 105, 20, 0.4);
    --neon: #8b6914;
    --neon2: #a67c1a;
    --neon-dim: rgba(139, 105, 20, 0.15);
    --indigo: #8b6914;
    --violet: #8b6914;
    --amber: #8b6914;
    --emerald: #8b6914;
    --sky: #a67c1a;
    --shadow: 0 4px 24px rgba(44, 36, 22, 0.08);
    --glow: 0 0 10px rgba(139, 105, 20, 0.15);
}
html[data-theme="light"] {
    /* === ArteVia OS — Light Mode (White + Blue) === */
    --accent-rgb: 37, 99, 235;
    --accent-text: #2563eb;
    --text-on-accent: #ffffff;
    --bg: #dde5f4;
    --bg2: #e4ebf7;
    --bg3: #e8effa;
    --text: #04111d;
    --text2: rgba(4, 17, 29, 0.68);
    --text3: rgba(4, 17, 29, 0.42);
    --avAccent: #2563eb;
    --avAccentDim: rgba(37, 99, 235, 0.10);
    --border: rgba(37, 99, 235, 0.11);
    --border2: rgba(37, 99, 235, 0.28);
    --neon: #2563eb;
    --neon2: #3b82f6;
    --neon-dim: rgba(37, 99, 235, 0.10);
    --indigo: #2563eb;
    --violet: #2563eb;
    --amber: #d97706;
    --emerald: #059669;
    --sky: #0284c7;
    --shadow: 0 4px 24px rgba(4, 17, 29, 0.08);
    --shadow-lg: 0 12px 48px rgba(4, 17, 29, 0.12);
    --glow: 0 0 16px rgba(37, 99, 235, 0.14);
    --glowStrong: 0 0 28px rgba(37, 99, 235, 0.24);
}
html[data-theme="light"] .layout aside {
    background: #eceae5;
    border-right-color: #d4d0c8;
}
html[data-theme="light"] .panel-title,
html[data-theme="light"] .stat-card-value,
html[data-theme="light"] .stat-card-label {
    color: #1a1a2a;
}
html[data-theme="light"] .stat-card:hover {
    border-color: #d4d0c8;
}
html[data-theme="light"] .panel::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .06), transparent);
}
html[data-theme="light"] .nav-item {
    color: #2563eb;
}
html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .nav-item.active {
    color: #2563eb;
}
html[data-theme="light"] .nav-section-label {
    color: #555555;
}
html[data-theme="light"] header {
    background: #eceae5;
    border-bottom-color: #d4d0c8;
}
html[data-theme="light"] .hd-brand-name,
html[data-theme="light"] .hd-stat,
html[data-theme="light"] .icon-btn,
html[data-theme="light"] .hd-search-input {
    color: #1a1a2a;
}
html[data-theme="light"] .icon-btn:hover,
html[data-theme="light"] .hd-brand-name-wrap {
    color: #2563eb;
}
html[data-theme="light"] .profile-hero-bg { background: linear-gradient(145deg, rgba(37, 99, 235, .08) 0%, rgba(99, 102, 241, .06) 40%, transparent 70%); }
html[data-theme="light"] .profile-hero { background: linear-gradient(180deg, #eceae5 0%, var(--bg2) 100%); }
html[data-theme="light"] .profile-username { color: #1a1a2a; }
html[data-theme="light"] .profile-wallet { color: #555; }
html[data-theme="light"] .profile-bio { color: #444; }
html[data-theme="light"] .profile-section-title { color: #1a1a2a; }
html[data-theme="light"] .profile-featured-hint { color: #555; }
html[data-theme="light"] .profile-banner-wrap { background: #eceae5; }
html[data-theme="light"] .settings-content-header { border-bottom-color: #d4d0c8; }
html[data-theme="light"] .settings-page-title { color: #1a1a2a; }
html[data-theme="light"] .settings-page-sub { color: #555555; }

/* Ayarlar sekmesi açık temada tamamen okunaklı */
html[data-theme="light"] #tab-settings .settings-dashboard {
    background: #f0ede8;
}
html[data-theme="light"] #tab-settings .settings-sidebar {
    background: #eceae5;
    border-right-color: #d4d0c8;
}
html[data-theme="light"] #tab-settings .settings-nav-item {
    color: #555555;
}
html[data-theme="light"] #tab-settings .settings-nav-item:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, .08);
}
html[data-theme="light"] #tab-settings .settings-nav-item.active {
    color: #2563eb;
    background: rgba(37, 99, 235, .12);
    border-left-color: #2563eb;
}
html[data-theme="light"] #tab-settings .settings-content {
    background: #f5f3ef;
}
html[data-theme="light"] #tab-settings .settings-glass-card {
    background: #f0ede8;
    border-color: #d4d0c8;
}
html[data-theme="light"] #tab-settings .settings-glass-card:hover {
    border-color: #2563eb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .15);
}
html[data-theme="light"] #tab-settings .settings-panel-title { color: #1a1a2a; }
html[data-theme="light"] #tab-settings .settings-panel-sub { color: #555555; }
html[data-theme="light"] #tab-settings .settings-card-title { color: #1a1a2a; }
html[data-theme="light"] #tab-settings .settings-card-title .ic { color: #2563eb; }
html[data-theme="light"] #tab-settings .settings-hint { color: #555555; }
html[data-theme="light"] #tab-settings .settings-toggle-row { color: #1a1a2a; }
html[data-theme="light"] #tab-settings .settings-lang-row { color: #555555; }
html[data-theme="light"] #tab-settings .settings-avatar-lg {
    border-color: rgba(37, 99, 235, .4);
    background: #eceae5;
    color: #1a1a2a;
}
html[data-theme="light"] #tab-settings .btn-settings-emerald {
    background: rgba(37, 99, 235, .12);
    color: #2563eb;
    border-color: rgba(37, 99, 235, .4);
}
html[data-theme="light"] #tab-settings .btn-settings-emerald:hover {
    background: rgba(37, 99, 235, .2);
    border-color: #2563eb;
}
html[data-theme="light"] #tab-settings .security-wallet-address-wrap {
    background: rgba(0, 0, 0, .06);
    border-color: #d4d0c8;
}
html[data-theme="light"] #tab-settings .security-wallet-address { color: #1a1a2a; }
html[data-theme="light"] #tab-settings .security-copy-wallet { color: #555555; }
html[data-theme="light"] #tab-settings .security-copy-wallet:hover { color: #2563eb; }
html[data-theme="light"] #tab-settings .input-secure {
    background: #f5f3ef !important;
    color: #1a1a2a !important;
    border-color: #d4d0c8 !important;
}
html[data-theme="light"] #tab-settings .input-secure::placeholder { color: #555555; }
html[data-theme="light"] #tab-settings .strength-meter { background: rgba(0, 0, 0, .08); }
html[data-theme="light"] #tab-settings .strength-label { color: #555555; }
html[data-theme="light"] #tab-settings .antibot-label { color: #1a1a2a; }
html[data-theme="light"] #tab-settings .antibot-help { color: #555555; }
html[data-theme="light"] #tab-settings .antibot-input {
    background: #f5f3ef !important;
    border-color: #d4d0c8 !important;
    color: #1a1a2a !important;
}
html[data-theme="light"] #tab-settings .session-item {
    background: #f5f3ef;
    border-color: #d4d0c8;
}
html[data-theme="light"] #tab-settings .session-item .session-meta strong { color: #1a1a2a; }
html[data-theme="light"] #tab-settings .session-item .session-meta span { color: #555555; }
html[data-theme="light"] #tab-settings .session-item .session-device { background: rgba(37, 99, 235, .12); }
html[data-theme="light"] #tab-settings .security-cues .cues-row { color: #555555; }
html[data-theme="light"] #tab-settings .toggle-slider {
    background: rgba(0, 0, 0, .12);
    border-color: #d4d0c8;
}
html[data-theme="light"] #tab-settings .forgot-link { color: #2563eb; }
html[data-theme="light"] #tab-settings .forgot-link:hover { color: #1d4ed8; }
html[data-theme="light"] #tab-settings .fg label { color: #1a1a2a; }
html[data-theme="light"] #tab-settings .auth-mode-btn.settings-mode-btn {
    color: #1a1a2a;
    border-color: #d4d0c8;
    background: rgba(37, 99, 235, .08);
}
html[data-theme="light"] #tab-settings .auth-mode-btn.settings-mode-btn:hover { background: rgba(37, 99, 235, .14); border-color: #2563eb; }
html[data-theme="light"] #tab-settings .auth-mode-btn.settings-mode-btn.active { color: #2563eb; border-color: #2563eb; background: rgba(37, 99, 235, .18); }
@media (max-width: 768px) {
    html[data-theme="light"] #tab-settings .settings-sidebar { border-bottom-color: #d4d0c8; }
}

html[data-theme="light"] .page-title,
html[data-theme="light"] .page-sub {
    color: #1a1a2a;
}
html[data-theme="light"] .page-sub {
    color: #555555;
}
html[data-theme="light"] #tab-admin .admin-nav,
html[data-theme="light"] #tab-admin .admin-footer {
    background: #f0ede8;
    border-color: #d4d0c8;
    color: #555555;
}
html[data-theme="light"] #tab-admin .admin-card,
html[data-theme="light"] #tab-admin .admin-panel,
html[data-theme="light"] #tab-admin .admin-table-glass,
html[data-theme="light"] #tab-admin .admin-logs-wrap {
    background: #f0ede8;
    border-color: #d4d0c8;
}
html[data-theme="light"] #tab-admin .admin-nav-item { color: #2563eb; }
html[data-theme="light"] #tab-admin .admin-nav-item:hover { background: rgba(37, 99, 235, 0.08); color: #1a1a2a; }
html[data-theme="light"] #tab-admin .admin-nav-item.active { background: rgba(37, 99, 235, 0.15); color: #2563eb; border-color: #2563eb; }
html[data-theme="light"] #tab-admin .admin-card-val,
html[data-theme="light"] #tab-admin .admin-hint { color: #1a1a2a; }
html[data-theme="light"] #tab-admin .admin-card-label { color: #555555; }
html[data-theme="light"] #tab-admin .admin-table-glass th { background: #eceae5; border-color: #d4d0c8; color: #1a1a2a; }
html[data-theme="dark"] { /* Varsayılan — değişiklik yok */ }

/* Açık temalarda input/buton okunabilirliği */
html[data-theme="mono-white"] .fg input,
html[data-theme="mono-white"] .fg select,
html[data-theme="mono-white"] .fg textarea,
html[data-theme="cream"] .fg input,
html[data-theme="cream"] .fg select,
html[data-theme="cream"] .fg textarea,
html[data-theme="light"] .fg input,
html[data-theme="light"] .fg select,
html[data-theme="light"] .fg textarea {
    background: #f5f3ef !important;
    border-color: #d4d0c8 !important;
    color: var(--text) !important;
}
html[data-theme="mono-white"] .btn-ghost,
html[data-theme="cream"] .btn-ghost,
html[data-theme="light"] .btn-ghost {
    background: rgba(0, 0, 0, 0.05) !important;
}
html[data-theme="mono-white"] .btn-ghost:hover,
html[data-theme="cream"] .btn-ghost:hover,
html[data-theme="light"] .btn-ghost:hover {
    background: rgba(0, 0, 0, 0.09) !important;
}
html[data-theme="mono-white"] #loginScreen,
html[data-theme="cream"] #loginScreen,
html[data-theme="light"] #loginScreen {
    background: var(--bg) !important;
}
html[data-theme="mono-white"] .auth-bg-vignette,
html[data-theme="cream"] .auth-bg-vignette,
html[data-theme="light"] .auth-bg-vignette {
    background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 0%, transparent 50%, rgba(0,0,0,0.08) 80%, rgba(0,0,0,0.2) 100%) !important;
}
html[data-theme="mono-white"] .input-secure,
html[data-theme="cream"] .input-secure,
html[data-theme="light"] .input-secure {
    background: #f5f3ef !important;
    color: var(--text) !important;
    border-color: #d4d0c8 !important;
}

/* Tema paleti butonları */
.theme-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}
.theme-preset-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.2);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.2s;
    flex-shrink: 0;
}
.theme-preset-btn:hover { transform: scale(1.08); }
.theme-preset-btn.active {
    border-width: 3px;
    border-color: var(--accent-text);
    box-shadow: 0 0 0 1px var(--border2);
}
.theme-preset-btn[data-theme="default"] { background: #39ff14; }
.theme-preset-btn[data-theme="mono-white"] { background: #fff; border-color: rgba(0,0,0,0.2); }
.theme-preset-btn[data-theme="mono-black"] { background: #1a1a1a; }
.theme-preset-btn[data-theme="cream"] { background: #e8dcc8; border-color: rgba(0,0,0,0.2); }
.theme-preset-btn[data-theme="light"] { background: #e0e7ff; border-color: rgba(0,0,0,0.2); }
.theme-preset-btn[data-theme="dark"] { background: #0a0a0a; }
.theme-custom-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.theme-custom-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.theme-custom-wrap label {
    font-size: 0.85rem;
    color: var(--text2);
    flex-shrink: 0;
    min-width: 70px;
}
.theme-custom-bg,
.theme-custom-btn,
.theme-custom-input {
    width: 48px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg2);
    flex-shrink: 0;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    padding-top: max(4px, env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}
body input, body textarea, body .hash-box, body .backup-code-item, body [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: .5;
    will-change: auto;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 48% at 18% 22%, rgba(57, 255, 20, 0.09) 0%, transparent 62%),
        radial-gradient(ellipse 55% 50% at 88% 74%, rgba(57, 255, 20, 0.055) 0%, transparent 60%),
        radial-gradient(ellipse 100% 95% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.42) 100%);
}

html[data-theme="light"] body::after {
    background:
        radial-gradient(ellipse 75% 52% at 50% -18%, rgba(37, 99, 235, 0.12), transparent 56%),
        radial-gradient(ellipse 58% 48% at 98% 82%, rgba(99, 102, 241, 0.1), transparent 52%),
        radial-gradient(ellipse 100% 92% at 50% 52%, transparent 58%, rgba(4, 17, 29, 0.12) 100%);
}

body.login-active::after {
    background:
        radial-gradient(ellipse 80% 55% at 50% -12%, rgba(57, 255, 20, 0.11) 0%, transparent 55%),
        radial-gradient(ellipse 42% 48% at 85% 72%, rgba(57, 255, 20, 0.06) 0%, transparent 60%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(57, 255, 20, 0.025) 3px,
            rgba(57, 255, 20, 0.025) 4px
        ),
        radial-gradient(ellipse 100% 95% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.42) 100%);
}

html[data-theme="light"] body.login-active::after {
    background:
        radial-gradient(ellipse 82% 52% at 50% -14%, rgba(37, 99, 235, 0.12), transparent 54%),
        radial-gradient(ellipse 46% 44% at 92% 78%, rgba(99, 102, 241, 0.09), transparent 54%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(37, 99, 235, 0.035) 3px,
            rgba(37, 99, 235, 0.035) 4px
        ),
        radial-gradient(ellipse 100% 92% at 50% 52%, transparent 58%, rgba(4, 17, 29, 0.12) 100%);
}

/* === Floating Orbs (Global Background) === */
.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    will-change: transform, opacity;
}

.orb-1 {
    width: 500px;
    height: 500px;
    top: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    animation: orbDrift1 18s ease-in-out infinite;
}

.orb-2 {
    width: 400px;
    height: 400px;
    bottom: -80px;
    right: -80px;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    animation: orbDrift2 24s ease-in-out infinite;
}

.orb-3 {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 65%);
    animation: orbPulse 8s ease-in-out infinite;
}

@keyframes orbDrift1 {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    33%  { transform: translate(60px, 40px) scale(1.08); }
    66%  { transform: translate(-30px, 70px) scale(0.95); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes orbDrift2 {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    40%  { transform: translate(-80px, -50px) scale(1.1); }
    70%  { transform: translate(40px, -30px) scale(0.92); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes orbPulse {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50%       { transform: translate(-50%, -50%) scale(1.15); }
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--neon);
    color: var(--text-on-accent);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--rSm);
    transition: var(--transition);
}
.skip-link:focus {
    left: 16px;
    top: 16px;
}

.ic {
    width: 1.1em;
    height: 1.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    color: var(--accent-text);
}
.ic svg { stroke: currentColor; }
.ic-lg { width: 2.5rem; height: 2.5rem; }

.main img,
.tab-panel img,
.panel img {
    max-width: 100%;
    height: auto;
}
.hash-box,
.mono {
    word-break: break-all;
    overflow-wrap: break-word;
}

.nav-icon .ic, .stat-card-icon .ic, .quick-btn-icon .ic, .file-drop-icon .ic, .empty-icon .ic, .edu-card-icon .ic {
    color: var(--accent-text);
}
.verify-result.found .ic { color: var(--accent-text); }
.verify-result.notfound .ic { color: var(--rose); }
.auth-brand-logo .ic, .hd-brand-icon .ic { color: var(--text-on-accent); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .08); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon); box-shadow: 0 0 8px rgba(var(--accent-rgb), .4); }

h1,
h2,
h3 {
    font-weight: 700;
    line-height: 1.2;
}

.mono {
    font-family: var(--mono);
    font-size: 0.8em;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

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

@keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(.94)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-16px)
    }

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

@keyframes pulse {
    0%, 100% { opacity: 1 }
    50% { opacity: .5 }
}

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

@keyframes shimmer {
    0% {
        background-position: -200% center
    }

    100% {
        background-position: 200% center
    }
}

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

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

.anim-fade-up { animation: fadeUp .5s ease both; }
.anim-fade-in { animation: fadeIn .4s ease both; }
.anim-scale-in {
    animation: scaleIn .35s ease both;
}
.anim-slide-right {
    animation: slideRight .4s ease both;
}

.d1 { animation-delay: .05s }
.d2 { animation-delay: .1s }

.d3 { animation-delay: .15s }
.d4 { animation-delay: .2s }

.d5 { animation-delay: .25s }
.d6 { animation-delay: .3s }
.d7 { animation-delay: .35s }
.d8 { animation-delay: .4s }

.spinner {
    width: 18px;
    height: 18px;
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, .2);
    border-top-color: var(--indigo);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

/* Auth (Login/Register) — Mobile-first full-screen */
#loginScreen {
    position: fixed;
    inset: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--bg, #0a0a0a);
    overflow: hidden;
    box-sizing: border-box;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Auth arka plan — sıfırdan yeni efekt */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-bg-base {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(160deg, var(--bg2) 0%, transparent 40%, transparent 60%, var(--bg2) 100%),
        radial-gradient(ellipse 90% 70% at 50% 10%, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.02) 40%, transparent 70%);
}

.auth-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.9;
    animation: authOrbFloat 18s ease-in-out infinite;
}

.auth-bg-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.04) 35%, transparent 65%);
    top: -15%;
    left: -10%;
    animation-delay: 0s;
}

.auth-bg-orb-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.1) 0%, rgba(var(--accent-rgb), 0.03) 45%, transparent 70%);
    bottom: -20%;
    right: -12%;
    animation-delay: -6s;
}

.auth-bg-orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.02) 50%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -12s;
    animation-name: authOrbFloatCenter;
}

.auth-bg-shine {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.06) 0%, transparent 25%, transparent 75%, rgba(var(--accent-rgb), 0.02) 100%);
    animation: authShinePulse 8s ease-in-out infinite;
}

/* Vinyet — içerden dışarıya koyulaşma */
.auth-bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 70% at 50% 50%,
        transparent 0%,
        transparent 35%,
        rgba(0,0,0,0.3) 60%,
        rgba(0,0,0,0.7) 85%,
        rgba(0,0,0,0.9) 100%
    );
    pointer-events: none;
}

@keyframes authOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
    33% { transform: translate(40px, -25px) scale(1.08); opacity: 1; }
    66% { transform: translate(-25px, 20px) scale(0.98); opacity: 0.95; }
}

@keyframes authOrbFloatCenter {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

@keyframes authShinePulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

#loginScreen::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(rgba(var(--accent-rgb), 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 85% 95% at 50% 50%, black 10%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse 85% 95% at 50% 50%, black 10%, transparent 65%);
    pointer-events: none;
    opacity: 1;
}

.auth-screen {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
    flex-shrink: 0;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
}

.auth-back {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
}
.auth-back:hover {
    color: var(--accent-text);
}

.auth-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.auth-theme-dropdown {
    position: relative;
}
.auth-settings-btn .ic {
    color: var(--text);
}
.auth-settings-btn:hover .ic {
    color: var(--accent-text);
}
.auth-theme-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    min-width: 200px;
    padding: 12px;
}
.auth-theme-menu.open {
    display: block;
}
.auth-theme-menu label,
.auth-theme-menu-lang span {
    color: var(--text) !important;
}
.auth-mode-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.auth-mode-btn {
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.auth-mode-btn:hover {
    border-color: var(--border2);
    background: rgba(var(--accent-rgb), 0.1);
}
.auth-mode-btn.active {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent-text);
    border-color: rgba(var(--accent-rgb), 0.25);
}
.auth-theme-menu .theme-presets {
    padding: 0 !important;
    margin-bottom: 12px !important;
}
.auth-theme-menu .theme-custom-wrap {
    padding: 0 !important;
    margin-top: 12px;
    padding-top: 12px !important;
    border-top: 1px solid var(--border);
}
.auth-theme-menu-lang {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.auth-theme-menu-lang .auth-lang-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
}
.auth-lang-btns {
    display: flex;
    gap: 6px;
}

.auth-lang-btn {
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 10px;
    min-height: 36px;
    min-width: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.auth-lang-btn:hover {
    color: var(--text);
    border-color: var(--border2);
    background: rgba(var(--accent-rgb), 0.1);
}
.auth-lang-btn.active {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent-text);
    border-color: rgba(var(--accent-rgb), 0.25);
}

.auth-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 16px;
    overflow-y: auto;
    min-height: 0;
}

.auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 400px;
    animation: scaleIn .4s ease;
}

/* Cam efekti kart — içerik sığdırma */
.auth-card {
    width: 100%;
    max-width: 400px;
    padding: 28px 28px;
    background: var(--bg2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
}

.auth-brand {
    text-align: center;
    margin-bottom: 24px;
}

.auth-brand-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.auth-brand-logo::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, transparent 70%);
    animation: logoPulse 3s ease-in-out infinite;
    pointer-events: none;
}
.auth-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

@keyframes logoPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.08); }
}

.auth-brand h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
}

.auth-brand p {
    font-size: 0.85rem;
    color: var(--text2);
    margin-top: 6px;
    letter-spacing: .03em;
}

.auth-form {
    width: 100%;
}

.auth-form-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    text-align: center;
}

.auth-form .fg,
.auth-form .btn-block,
.auth-form .auth-link {
    min-width: 0;
    max-width: 100%;
}
.auth-form .antibot-wrap {
    width: 100%;
}

/* Auth form compact — ekrana sığdırma */
.auth-card .fg {
    margin-bottom: 16px;
}
.auth-card .fg label {
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.auth-card .fg input,
.auth-card .fg select,
.auth-card .fg textarea {
    padding: 12px 16px;
    min-height: 44px;
    font-size: 1rem;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
}
.auth-card .fg input:focus,
.auth-card .fg input:focus-visible {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
    outline: none;
}
.auth-card .fg input::placeholder {
    color: var(--text3);
}
.auth-card .pw-hint {
    font-size: 0.75rem;
    margin-top: 6px;
    color: var(--text3);
}
/* Auth doğrulama kodu — tamamen yeniden */
.auth-antibot {
    margin-top: 4px;
    margin-bottom: 12px;
}
.auth-antibot .antibot-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}
.auth-antibot-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.auth-antibot-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 52px;
}
.auth-antibot .antibot-image {
    cursor: pointer;
    min-width: 160px;
    min-height: 52px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: box-shadow 0.2s;
}
.auth-antibot .antibot-image:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.auth-antibot-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-family: var(--mono, monospace);
    letter-spacing: 0.2em;
    text-align: center;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-antibot-input::placeholder {
    color: var(--text3);
    letter-spacing: 0.1em;
}
.auth-antibot-input:focus {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}
.auth-antibot-hint {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: var(--text3);
    text-align: center;
    line-height: 1.5;
}
.auth-card .auth-link {
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--accent-text);
}
.auth-card .auth-switch {
    margin-top: 20px;
    font-size: 0.95rem;
    color: var(--text2);
}
.auth-card .auth-free-note {
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--text3);
}
.auth-card .auth-backup-hint {
    margin: 2px 0 6px;
}

/* Çok küçük ekranlarda kart içi scroll */
@media (max-height: 600px) {
    .auth-main {
        padding: 4px 12px 8px;
        justify-content: flex-start;
    }
    .auth-card {
        padding: 14px 18px;
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
    }
    .auth-brand-logo {
        width: 56px;
        height: 56px;
        margin-bottom: 6px;
    }
    .auth-brand {
        margin-bottom: 10px;
    }
    .auth-brand h1 {
        font-size: 1.1rem;
    }
    .auth-card .fg {
        margin-bottom: 8px;
    }
    .auth-card .fg input {
        min-height: 36px;
        padding: 8px 10px;
    }
}

.auth-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: .9rem;
    color: var(--accent-text);
    text-decoration: none;
}
.auth-link:hover {
    text-decoration: underline;
}

.auth-switch {
    text-align: center;
    margin-top: 24px;
    font-size: .95rem;
    color: var(--text2);
}
.auth-link-accent {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: none;
}
.auth-link-accent:hover {
    text-decoration: underline;
}

.auth-backup-hint {
    margin: 4px 0 8px;
}
.auth-backup-hint .auth-link {
    margin-top: 0;
    display: inline;
}

.auth-free-note {
    text-align: center;
    font-size: .75rem;
    color: var(--text3);
    margin-top: 12px;
}

.auth-verify-box,
.auth-dev-box {
    margin-top: 20px;
    padding: 16px;
    background: rgba(var(--accent-rgb), .06);
    border: 1px solid rgba(var(--accent-rgb), .25);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
}
.auth-verify-box p {
    margin: 0 0 12px;
    font-size: .9rem;
    color: var(--text2);
}
.auth-dev-box p {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
}

@media (min-width: 1024px) {
    .auth-brand-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 12px;
    }
    .auth-brand h1 {
        font-size: 1.4rem;
    }
    .auth-form-title {
        font-size: 1.2rem;
        margin-bottom: 14px;
    }
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
    border-color: rgba(var(--accent-rgb), 0.7);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12), 0 0 16px rgba(var(--accent-rgb), 0.08);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.4), 0 4px 16px rgba(0,0,0,0.3);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--glow);
}

#loginSubmitBtn.loading,
#registerBtn.loading {
    pointer-events: none;
    opacity: 0.75;
    background: rgba(var(--accent-rgb), 0.7) !important;
}

.turnstile-wrap,
.recaptcha-wrap {
    width: 100%;
    padding: 8px 0;
    box-sizing: border-box;
}
.turnstile-wrap [id^="turnstile-box-"] {
    min-height: 65px;
}
.recaptcha-wrap #recaptcha-box-login,
.recaptcha-wrap #recaptcha-box-register,
.recaptcha-wrap #recaptcha-box-mint,
.recaptcha-wrap #recaptcha-box-transfer,
.recaptcha-wrap #recaptcha-box-settings,
.recaptcha-wrap #recaptcha-box-deleteDisable {
    min-height: 78px;
}
.antibot-wrap {
    width: 100%;
    padding: 10px 0 6px;
    box-sizing: border-box;
    text-align: center;
}
.antibot-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .35), 0 8px 22px rgba(15, 23, 42, .35);
    min-width: 180px;
    min-height: 60px;
}
.antibot-image svg {
    display: block;
    width: 100%;
    height: 100%;
}
.antibot-arrow {
    font-size: 1.2rem;
    color: var(--text2);
}
.antibot-label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--text3);
    margin-bottom: 6px;
}
.antibot-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.antibot-code {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    font-family: var(--mono, monospace);
    color: var(--accent-text);
    background: rgba(0, 255, 157, 0.08);
    border: 1px solid rgba(0, 255, 157, 0.3);
    border-radius: 8px;
    padding: 10px 16px;
    min-width: 120px;
    text-align: center;
    user-select: none;
}
.antibot-input {
    flex: 0 0 130px;
    min-width: 120px;
    max-width: 150px;
    padding: 10px 14px;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 0.15em;
    font-family: var(--mono, monospace);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.antibot-input:focus {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 2px rgba(0, 255, 157, 0.2);
}
.antibot-help {
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--text3);
}

/* Mint sayfası: doğrulama bloklarını butonla aynı hizada ortala */
#tab-mint .turnstile-wrap,
#tab-mint .recaptcha-wrap,
#tab-mint .antibot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#tab-mint .antibot-row {
    justify-content: center;
}
#tab-mint #turnstile-box-mint,
#tab-mint #recaptcha-box-mint {
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
  #loginForm,
  #registerForm {
    display: flex;
    flex-direction: column;
  }
  .auth-antibot-inner {
    padding: 12px;
  }
  .auth-antibot .antibot-image {
    min-width: 140px;
    min-height: 48px;
  }
  .auth-antibot-input {
    padding: 10px 12px;
    font-size: 16px;
    letter-spacing: 0.15em;
  }
}

#loginScreen .email-status-banner {
    margin-bottom: 8px;
    padding: 8px 12px;
    font-size: 0.78rem;
}
.email-status-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .4);
    border-radius: var(--rSm);
    font-size: .8rem;
    color: var(--text2);
    animation: fadeIn .35s ease;
}

.email-status-banner-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,.08);
    color: var(--text2);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: var(--transition);
}

.email-status-banner-close:hover {
    background: rgba(255,255,255,.15);
    color: var(--text);
}

.fg {
    margin-bottom: 16px;
}

.fg label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 7px;
}

.fg input,
.fg select,
.fg textarea {
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 16px;
    min-height: 44px;
    border-radius: var(--rSm);
    font-family: var(--sans);
    font-size: 16px;
    outline: none;
    transition: var(--transition);
}

@media (min-width: 769px) {
    html { font-size: 18px; }
    .fg input, .fg select, .fg textarea { font-size: .9rem; min-height: auto; padding: 11px 14px; }
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
    border-color: var(--accent-text);
    box-shadow: var(--glow);
}

.fg input::placeholder {
    color: var(--text3);
}
.pw-hint {
    display: block;
    font-size: .7rem;
    color: var(--text3);
    margin-top: 6px;
}
.forgot-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: .85rem;
    color: var(--accent-text);
    text-decoration: none;
}
.forgot-link:hover {
    text-decoration: underline;
}

.fg select option {
    background: var(--bg2);
}

/* Mobile: touch targets min 44px */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 20px;
    min-height: 44px;
    border: none;
    border-radius: var(--rSm);
    font-family: var(--sans);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

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

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

.btn-spinner {
    width: 1em;
    height: 1em;
    border: 2px solid rgba(0, 0, 0, .2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    background: var(--neon);
    color: var(--text-on-accent);
    border: 1px solid var(--neon);
    box-shadow: var(--glow);
}

.btn-primary:hover:not(:disabled) {
    background: var(--neon2);
    box-shadow: var(--glowStrong);
}

.btn-secondary {
    background: var(--neon-dim);
    color: var(--accent-text);
    border: 1px solid var(--border2);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(0, 255, 157, .15);
}

.btn-ghost {
    background: rgba(255, 255, 255, .05);
    color: var(--text2);
    border: 1px solid var(--border);
}

.btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, .09);
    color: var(--text);
}

.btn-danger {
    background: rgba(244, 63, 94, .12);
    color: var(--rose);
    border: 1px solid rgba(244, 63, 94, .2);
}

.btn-danger:hover:not(:disabled) {
    background: rgba(244, 63, 94, .2);
}

.btn-amber {
    background: rgba(245, 158, 11, .12);
    color: var(--amber);
    border: 1px solid rgba(245, 158, 11, .2);
}

.btn-amber:hover:not(:disabled) {
    background: rgba(245, 158, 11, .2);
}

.btn-emerald {
    background: rgba(16, 185, 129, .12);
    color: var(--accent-text);
    border: 1px solid rgba(16, 185, 129, .2);
}

.btn-emerald:hover:not(:disabled) {
    background: rgba(16, 185, 129, .2);
}

.btn-sm {
    padding: 7px 14px;
    font-size: .78rem;
}

.btn-xs {
    padding: 5px 10px;
    font-size: .72rem;
}

.btn-icon {
    padding: 9px;
    border-radius: 10px;
}

#app {
    display: none;
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
#app.show-app {
    display: flex !important;
}

header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: 60px;
    min-height: 60px;
    flex-shrink: 0;
    background: rgba(7, 13, 26, .85);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 12px;
}

/* ═══ Panel layout (Web3 dashboard) ═══ */
.topbar {
    height: 56px;
    min-height: 56px;
    background: #0d0d14;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
}
.topbar-left {
    display: none;
    align-items: center;
}
.topbar-hamburger {
    margin: 0;
}
.topbar-center {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
}
.topbar-center .hd-search-wrap {
    max-width: 400px;
    width: 100%;
}
.topbar-center .hd-search-input {
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.topbar-chain-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    padding: 6px 12px;
}
.topbar-chain-pill .hd-dot { flex-shrink: 0; }
.topbar-chain-pill #hValid {
    margin-left: 2px;
    font-weight: 700;
}
.topbar-user-wrap {
    position: relative;
}
.topbar-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.topbar-user-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}
.topbar-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
}
.topbar-username {
    font-size: 0.85rem;
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 180px;
    background: #0d0d14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    z-index: 350;
    overflow: hidden;
}
.topbar-user-dropdown.open {
    display: block;
}
.topbar-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.topbar-user-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.topbar-user-dropdown-item .ic {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.6);
}
.topbar-user-dropdown-item-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.topbar-user-dropdown-item-danger .ic {
    color: #ef4444;
}

.layout {
    display: flex;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    overflow: hidden;
}
.layout aside#sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #0d0d14;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 20px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.sidebar-logo:hover {
    opacity: 0.9;
}
.sidebar-logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}
.sidebar-logo-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}
.layout aside .nav-section-label {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.25);
    padding: 20px 20px 6px;
    margin: 0;
    text-transform: uppercase;
}
.layout aside .nav-item {
    margin: 0 12px;
    padding: 12px 20px;
    border-radius: 10px;
    min-height: auto;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
}
.layout aside .nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}
.layout aside .nav-item.active {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-left: 3px solid #22c55e;
    margin-left: 12px;
    padding-left: 17px;
}
.layout aside .nav-item.active::before {
    display: none;
}
.sidebar-footer {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}
.sidebar-footer-user {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-footer-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a5b4fc;
    flex-shrink: 0;
    overflow: hidden;
}
.sidebar-footer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sidebar-footer-name {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-logout-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.sidebar-logout-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.sidebar-logout-btn .ic {
    width: 18px;
    height: 18px;
}

.main {
    background: #080810;
    padding: 32px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Dashboard page */
#tab-dashboard {
    padding: 0;
}
.welcome-banner {
    background: linear-gradient(135deg, #0d1f0d 0%, #0a1f0a 50%, #052e16 100%);
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.welcome-banner-text {
    flex: 1;
    min-width: 0;
}
.welcome-banner-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}
.dash-welcome-sub {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.welcome-banner-cta {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}
.welcome-banner-cta:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 0;
}
.stat-card-panel {
    background: #0d0d14;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px;
    transition: border-color 0.2s;
}
.stat-card-panel:hover {
    border-color: rgba(34, 197, 94, 0.3);
}
.stat-card-panel .stat-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.06);
}
.stat-card-panel .stat-card-icon .ic {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.7);
}
.stat-card-panel .stat-card-value {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}
.stat-card-panel .stat-card-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
}
.dashboard-bottom {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    margin-top: 20px;
}
.dashboard-bottom .panel-dash:first-child {
    flex: 1;
    min-width: 0;
}
.dashboard-bottom .panel-dash-chain {
    width: 340px;
    flex-shrink: 0;
}
.panel-dash {
    background: #0d0d14;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px;
}
.panel-dash .quick-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.panel-dash .quick-btn {
    flex: 1;
    min-width: 140px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    transition: background 0.2s;
}
.panel-dash .quick-btn:hover {
    background: rgba(34, 197, 94, 0.1);
}
.dash-chain-status {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 16px;
}
.dash-chain-status.valid .dash-chain-icon,
.dash-chain-status.valid .dash-chain-text {
    color: #22c55e;
}
.dash-chain-status.invalid .dash-chain-icon,
.dash-chain-status.invalid .dash-chain-text {
    color: #ef4444;
}
.dash-chain-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 8px;
    display: block;
}
.panel-dash-chain .dash-chain-icon {
    width: 48px;
    height: 48px;
    margin-left: auto;
    margin-right: auto;
    font-size: 2.5rem;
    font-weight: 700;
}
.dash-chain-text {
    font-size: 2rem;
    font-weight: 700;
    color: #22c55e;
}
.dash-chain-status.valid .dash-chain-text {
    color: #22c55e;
}
.dash-chain-status.invalid .dash-chain-text {
    color: #ef4444;
}
.dash-chain-blocks {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-top: 8px;
}
#tab-dashboard .activity-feed .act-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#tab-dashboard .activity-feed .act-item:last-child {
    border-bottom: none;
}
#tab-dashboard .chart-wrap {
    height: 200px;
    margin-top: 8px;
}

@media (max-width: 1024px) {
    .dashboard-bottom {
        grid-template-columns: 1fr;
    }
    .dashboard-bottom .panel-dash-chain {
        width: 100%;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .topbar-left {
        display: flex;
    }
    .welcome-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .stat-card-panel {
        padding: 16px;
    }
    .stat-card-panel .stat-card-value {
        font-size: 1.5rem;
    }
    .panel-dash .quick-actions {
        flex-direction: column;
    }
    .panel-dash .quick-btn {
        min-width: 0;
    }
    .layout aside#sidebar {
        width: 240px;
        transform: translateX(-100%);
        position: fixed;
        top: 56px;
        left: 0;
        height: calc(100vh - 56px);
        height: calc(100dvh - 56px);
        z-index: 299;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }
    body.mobile-menu-open .layout aside#sidebar {
        transform: translateX(0);
    }
    .main {
        padding: 20px 16px;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .layout aside#sidebar {
        width: 64px;
        padding: 12px 0;
    }
    .sidebar-logo-text,
    .layout aside .nav-label,
    .nav-section-label,
    .sidebar-footer-name {
        display: none !important;
    }
    .sidebar-logo {
        justify-content: center;
        padding: 12px;
    }
    .sidebar-logo-img {
        width: 32px;
        height: 32px;
    }
    .layout aside .nav-item {
        margin: 0 8px;
        padding: 12px;
        justify-content: center;
    }
    .layout aside .nav-item.active {
        margin-left: 8px;
        padding-left: 12px;
    }
    .sidebar-footer {
        padding: 12px;
        justify-content: center;
    }
    .sidebar-footer-user {
        flex: none;
    }
}
@media (min-width: 1921px) {
    .main {
        max-width: 1600px;
        margin: 0 auto;
        width: 100%;
    }
    .stats-grid,
    .dashboard-bottom {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Full-screen layout when app is visible */
html:has(#app.show-app),
body:has(#app.show-app) {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#app.show-app {
    display: flex !important;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
#topbar {
    height: 56px;
    min-height: 56px;
    flex-shrink: 0;
}
#main-area {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
}
#sidebar {
    width: 220px;
    min-width: 220px;
    overflow-y: auto;
    flex-shrink: 0;
    transition: left 0.3s ease;
}
#content-area {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    min-width: 0;
}
#content-area input:focus,
#content-area button:focus-visible,
.hd-search-input:focus {
    outline-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}
.sidebar-overlay.visible {
    display: block;
}
.hamburger-btn {
    display: flex;
}
#sidebar {
    position: fixed;
    left: -220px;
    top: 0;
    height: 100vh;
    z-index: 1000;
}
#sidebar.open {
    left: 0;
}
#content-area {
    padding: 16px;
}
.stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.dashboard-bottom {
    grid-template-columns: 1fr;
}
.welcome-banner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
}
.welcome-banner .mint-btn {
    width: 100%;
}
@media (min-width: 768px) {
    #sidebar {
        position: fixed;
        left: -220px;
    }
    #sidebar.open {
        left: 0;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    #content-area {
        padding: 20px 24px;
    }
}
@media (min-width: 1024px) {
    #sidebar {
        position: relative;
        left: 0 !important;
        height: 100%;
        width: 220px;
        min-width: 220px;
    }
    .sidebar-overlay {
        display: none !important;
    }
    .hamburger-btn {
        display: none;
    }
    #content-area {
        padding: 24px 32px;
    }
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .dashboard-bottom {
        grid-template-columns: 1fr 320px;
    }
    .dashboard-bottom .panel-dash-chain {
        width: 320px;
    }
    .welcome-banner {
        flex-direction: row;
        text-align: left;
    }
    .welcome-banner .mint-btn {
        width: auto;
    }
}
@media (min-width: 1920px) {
    #content-area {
        padding: 32px 48px;
    }
    .stats-grid {
        gap: 20px;
    }
}

.hd-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.hd-brand-icon {
    width: 48px;
    height: 48px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.hd-brand .hd-brand-icon {
    margin-right: 8px;
}
.hd-brand-icon .hd-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    vertical-align: middle;
}

.hd-brand-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -.01em;
}

.hd-brand-sub {
    font-size: .68rem;
    color: var(--text3);
    font-weight: 400;
    letter-spacing: .04em;
}

.hd-center {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.hd-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 200px;
    max-width: 280px;
}
.hd-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text3);
    pointer-events: none;
}
.hd-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 36px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    border-radius: 99px;
    color: var(--text);
    font-size: .85rem;
    outline: none;
    transition: var(--transition);
}
.hd-search-input::placeholder { color: var(--text3); }
.hd-search-input:focus {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 2px var(--neon-dim);
}
.hd-search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 320px;
    overflow-y: auto;
    z-index: 300;
    box-shadow: var(--shadow-lg);
}
.hd-search-dropdown.open { display: block; }
.hd-search-dropdown .search-hit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
.hd-search-dropdown .search-hit:hover { background: var(--surface2); }
.hd-search-dropdown .search-hit:last-child { border-bottom: none; }
.hd-search-dropdown .search-hit-icon { color: var(--text3); }
.hd-search-dropdown .search-hit-title { font-weight: 600; }
.hd-search-dropdown .search-hit-sub { font-size: .8rem; color: var(--text3); }

@media (min-width: 769px) {
    .nav-item-mobile-only { display: none !important; }
}

.user-search-modal { max-width: 420px; width: 94vw; }
.user-search-body { padding-top: 0; }
.user-search-input-wrap {
    position: relative;
    margin-bottom: 12px;
}
.user-search-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text3);
    pointer-events: none;
}
.user-search-input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    min-height: 48px;
    font-size: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    outline: none;
}
.user-search-input:focus {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 2px var(--neon-dim);
}
.user-search-hint {
    font-size: .85rem;
    color: var(--text3);
    margin-bottom: 8px;
    min-height: 1.2em;
}
.user-search-results {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface2);
}
.user-search-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
.user-search-hit:last-child { border-bottom: none; }
.user-search-hit:hover { background: rgba(255, 255, 255, .06); }
.user-search-hit .search-hit-icon { color: var(--text3); flex-shrink: 0; }
.user-search-hit .search-hit-title { font-weight: 600; color: var(--white); }
.user-search-hit .search-hit-sub { font-size: .8rem; color: var(--text3); }

.hd-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 5px 12px;
    font-size: .75rem;
    color: var(--text2);
}

.hd-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--emerald);
    box-shadow: 0 0 6px var(--emerald);
}

.hd-dot.invalid {
    background: var(--rose);
    box-shadow: 0 0 6px var(--rose);
}

.hd-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}


.hd-user {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 5px 12px 5px 5px;
    cursor: pointer;
    transition: var(--transition);
}

.hd-user:hover {
    border-color: var(--border2);
}

@media (max-width: 900px) {
    .nav-item,
    .icon-btn,
    .hd-user {
        touch-action: manipulation;
    }

    .nav-item {
        -webkit-tap-highlight-color: transparent;
    }
}

.hd-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--neon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-on-accent);
    overflow: hidden;
}
.hd-avatar img { width: 100%; height: 100%; object-fit: cover; }

.hd-username {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
}

.hd-balance {
    font-size: .72rem;
    color: var(--amber);
    font-weight: 600;
}

.hd-balance-mobile-label {
    display: none;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text3);
}

.icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border);
    background: var(--surface2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text2);
    font-size: .75rem;
    font-weight: 600;
}

.icon-btn:hover {
    border-color: var(--border2);
    color: var(--text);
    background: rgba(255, 255, 255, .07);
}

.notification-bell-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.notification-bell-wrap .icon-btn {
    position: relative;
}
.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-on-accent);
    background: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    z-index: 200;
    padding: 8px;
}
.notification-dropdown-loading,
.notification-dropdown-empty {
    padding: 24px;
    text-align: center;
    color: var(--text3);
    font-size: .9rem;
}
.notification-dropdown-content .notif-section-title {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text3);
    padding: 4px 8px 6px;
}
.notification-dropdown-content .notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 4px;
}
.notification-dropdown-content .notif-item:hover {
    background: rgba(255,255,255,.04);
}
.notification-dropdown-content .notif-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.notification-dropdown-content .notif-item-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notification-dropdown-content .notif-item-placeholder .ic {
    width: 20px;
    height: 20px;
    color: var(--text3);
}
.notification-dropdown-content .notif-item-body {
    flex: 1;
    min-width: 0;
}
.notification-dropdown-content .notif-item-body .notif-title {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text);
}
.notification-dropdown-content .notif-item-body .notif-sub {
    font-size: .8rem;
    color: var(--text3);
    margin-top: 2px;
}
.notification-dropdown-content .notif-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}
.notification-dropdown-content .notif-actions .btn {
    font-size: .75rem;
    padding: 4px 10px;
    height: 28px;
}

.hamburger-btn {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 250;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
}

.hamburger-btn:hover {
    border-color: var(--border2);
    background: rgba(255, 255, 255, .07);
}

.hamburger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--neon);
    border-radius: 2px;
    transition: var(--transition);
}

.hamburger-btn.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 298;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

/* === Mobil alt menü (m.youtube.com tarzı) === */
.bottom-nav {
    display: none;
}

@media (max-width: 900px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: rgba(5, 10, 20, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(var(--accent-rgb), 0.15);
        padding-bottom: env(safe-area-inset-bottom, 0);
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
        height: 56px;
        min-height: calc(56px + env(safe-area-inset-bottom, 0));
        align-items: center;
        justify-content: space-around;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 56px;
        padding: 6px 4px;
        background: none;
        border: none;
        color: var(--text3);
        font-size: 0.65rem;
        font-weight: 500;
        cursor: pointer;
        transition: color 0.2s, background 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav-item .ic {
        width: 24px;
        height: 24px;
    }

    .bottom-nav-item:hover,
    .bottom-nav-item:focus {
        color: var(--text2);
    }

    .bottom-nav-item.active {
        color: var(--accent-text);
    }

    .bottom-nav-item.active .ic {
        color: var(--accent-text);
    }

    .bottom-nav-item {
        position: relative;
    }

    .bottom-nav-badge {
        position: absolute;
        top: 2px;
        left: 50%;
        margin-left: 8px;
        background: var(--neon);
        color: var(--text-on-accent);
        font-size: 0.55rem;
        font-weight: 700;
        padding: 1px 4px;
        border-radius: 99px;
        min-width: 14px;
        text-align: center;
    }

    /* Main content padding when bottom nav visible */
    .layout .main {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0) + 16px) !important;
    }
}

@media (min-width: 901px) {
    .bottom-nav {
        display: none !important;
    }
}

.layout {
    display: flex;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    overflow: hidden;
}

.layout aside {
    width: 240px;
    flex-shrink: 0;
    padding: 16px 12px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    background: rgba(7, 13, 26, .5);
    display: flex;
    flex-direction: column;
}

.nav-section-label {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 4px 10px;
    margin-bottom: 4px;
    margin-top: 16px;
}

.nav-section-label:first-child {
    margin-top: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 44px;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text2);
    font-size: .85rem;
    font-weight: 500;
    position: relative;
}

.nav-item:hover {
    background: rgba(255, 255, 255, .05);
    color: var(--text);
}

.nav-item.active {
    background: var(--neon-dim);
    color: var(--accent-text);
    border: 1px solid var(--border2);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--neon);
    border-radius: 0 3px 3px 0;
    box-shadow: var(--glow);
}

.nav-icon {
    font-size: 1rem;
    width: 22px;
    min-width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.nav-badge {
    margin-left: auto;
    background: var(--neon);
    color: var(--text-on-accent);
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    min-width: 20px;
    text-align: center;
}

.nav-badge.amber {
    background: var(--amber);
}

.nav-sep {
    height: 1px;
    background: var(--border);
    margin: 12px 10px;
}

.nav-item-logout {
    margin-top: auto;
    color: var(--text3);
}

.nav-item-logout:hover {
    color: var(--rose);
    background: rgba(244, 63, 94, .08);
}

.main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* --- Profile tab (redesign) --- */
.tab-panel-profile { padding: 0; overflow-x: hidden; }
.profile-banner-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    margin: -4px -4px 0 0;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    background: var(--bg2);
}
.profile-banner {
    position: absolute;
    inset: 0;
}
.profile-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-banner-default.profile-hero-bg {
    position: absolute;
    inset: 0;
    border-radius: 0;
}
.profile-banner-upload {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    border-radius: 10px;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s ease;
}
.profile-banner-upload:hover { background: rgba(0, 0, 0, .7); }
.profile-hero {
    position: relative;
    padding: 24px 24px 28px;
    margin-bottom: 24px;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}
.profile-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(var(--accent-rgb), .18) 0%, rgba(99, 102, 241, .12) 40%, transparent 70%);
    pointer-events: none;
}
.profile-hero .profile-header {
    position: relative;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.profile-wallet {
    font-size: .8rem;
    color: var(--text2);
    margin: 0 0 8px;
    word-break: break-all;
}
.profile-mono { font-family: ui-monospace, monospace; }
.profile-section {
    padding: 0 4px 24px;
}
.profile-section-title {
    padding-left: 2px;
}
.profile-featured-section { padding-bottom: 24px; }
.profile-featured-card-wrap {
    max-width: 360px;
    margin-bottom: 8px;
}
.profile-featured-art.art-card { cursor: pointer; }
.profile-featured-hint {
    font-size: .9rem;
    color: var(--text2);
    margin: 0;
}
.profile-gallery-private .empty-state { padding: 32px 16px; }
.profile-bio-inline { max-width: 60ch; }

.profile-header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.tab-panel-profile .profile-header { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--neon), var(--sky));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-on-accent);
    flex-shrink: 0;
    overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.profile-avatar-wrap .profile-avatar-upload {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .8rem;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
}
.profile-avatar-wrap:hover .profile-avatar-upload {
    opacity: 1;
}
.profile-avatar-wrap .profile-avatar-upload .ic { width: 18px; height: 18px; }
.profile-info { flex: 1; min-width: 0; }
.profile-username {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    margin: 0 0 8px;
    letter-spacing: -.02em;
}
.profile-bio {
    font-size: .9rem;
    color: var(--text2);
    margin: 0 0 12px;
    line-height: 1.5;
}
.profile-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    font-size: .85rem;
    color: var(--text2);
}
.profile-stat { cursor: default; }
.profile-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.profile-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 16px;
}
.profile-artworks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.profile-artworks .art-card {
    cursor: pointer;
    margin-bottom: 0;
}

/* ── OS PROFILE (OpenSea-style layout) ───────────────────────────────────── */
.os-profile { background: #0d0d0d; min-height: 100vh; }

.os-banner {
    position: relative; width: 100%; height: 280px; overflow: hidden;
    background: linear-gradient(135deg, #0f1923 0%, #1a2535 50%, #0f2027 100%);
}
.os-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.os-banner-overlay {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; color: #fff; font-size: 13px; cursor: pointer; opacity: 0; transition: opacity 0.2s;
}
.os-banner:hover .os-banner-overlay { opacity: 1; }
.os-banner-overlay .material-icons { font-size: 32px; }

.os-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 0 32px 20px; background: #0d0d0d;
    border-bottom: 1px solid #1e1e1e;
}
.os-header-left { display: flex; align-items: flex-start; gap: 16px; }

.os-avatar-wrap { position: relative; margin-top: -44px; flex-shrink: 0; }
.os-avatar {
    width: 88px; height: 88px; border-radius: 50%;
    border: 3px solid #23d18b; background: #1a1a1a;
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 700; color: #23d18b;
}
.os-avatar img { width: 100%; height: 100%; object-fit: cover; }
.os-avatar-edit {
    position: absolute; inset: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55); cursor: pointer; opacity: 0; transition: opacity 0.2s; color: #fff;
}
.os-avatar-wrap:hover .os-avatar-edit { opacity: 1; }

.os-userinfo { padding-top: 12px; }
.os-username { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.os-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.os-meta-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 6px; background: #1e1e1e;
    border: 1px solid #2a2a2a; font-size: 11px; color: #8a8a8a;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.os-wallet-chip { cursor: pointer; }
.os-wallet-chip:hover { border-color: #23d18b; color: #23d18b; }
.os-copy-icon { cursor: pointer; opacity: 0.5; }
.os-copy-icon:hover { opacity: 1; color: #23d18b; }
.os-badge {
    padding: 3px 8px; border-radius: 4px; background: #23d18b22;
    border: 1px solid #23d18b55; font-size: 10px; color: #23d18b;
    font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}
.os-bio { font-size: 13px; color: #8a8a8a; margin-bottom: 10px; max-width: 500px; line-height: 1.5; }
.os-header-actions { display: flex; align-items: center; gap: 8px; }
.os-btn-primary {
    padding: 8px 18px; background: #23d18b; border: none; border-radius: 8px;
    color: #000; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.os-btn-primary:hover { opacity: 0.85; }
.os-btn-icon {
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid #2a2a2a;
    background: #1a1a1a; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #8a8a8a; transition: all 0.2s;
}
.os-btn-icon:hover { border-color: #23d18b; color: #23d18b; }
.os-btn-icon .material-icons { font-size: 16px; }

.os-header-stats {
    display: flex; align-items: center; gap: 0; padding-top: 24px;
}
.os-stat-col { text-align: center; padding: 0 20px; }
.os-stat-value { font-size: 20px; font-weight: 700; color: #fff; }
.os-stat-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.os-stat-divider { width: 1px; height: 36px; background: #2a2a2a; }

.os-tabs-bar {
    background: #0d0d0d; border-bottom: 1px solid #1e1e1e;
    position: sticky; top: 0; z-index: 20; padding: 0 32px;
}
.os-tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.os-tabs::-webkit-scrollbar { display: none; }
.os-tab {
    padding: 14px 18px; background: none; border: none; border-bottom: 2px solid transparent;
    color: #8a8a8a; font-size: 14px; cursor: pointer; white-space: nowrap;
    transition: all 0.15s; font-weight: 500;
}
.os-tab:hover { color: #fff; }
.os-tab.active { color: #fff; border-bottom-color: #23d18b; }

.os-content { display: flex; min-height: 600px; }

.os-sidebar {
    width: 240px; flex-shrink: 0; border-right: 1px solid #1e1e1e;
    background: #0d0d0d; overflow-y: auto; transition: width 0.2s, opacity 0.2s;
}
.os-sidebar.collapsed { width: 0; opacity: 0; overflow: hidden; }
.os-filter-section { border-bottom: 1px solid #1e1e1e; }
.os-filter-title {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; cursor: pointer; color: #fff; font-size: 14px; font-weight: 500;
}
.os-filter-title:hover { background: #141414; }
.os-chevron { font-size: 18px; color: #555; transition: transform 0.2s; }
.os-filter-section.collapsed .os-chevron { transform: rotate(-180deg); }
.os-filter-section.collapsed .os-filter-body { display: none; }
.os-filter-body { padding: 8px 16px 14px; }
.os-pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.os-pill {
    padding: 5px 12px; border-radius: 20px; border: 1px solid #2a2a2a;
    background: transparent; color: #8a8a8a; font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.os-pill:hover { border-color: #23d18b; color: #23d18b; }
.os-pill.active { background: #23d18b22; border-color: #23d18b; color: #23d18b; }
.os-search-mini {
    width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid #2a2a2a;
    background: #141414; color: #fff; font-size: 12px; margin-bottom: 8px;
    box-sizing: border-box;
}
.os-search-mini:focus { outline: none; border-color: #23d18b; }
.os-collection-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.os-coll-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 8px; border-radius: 6px; cursor: pointer; color: #aaa; font-size: 12px;
}
.os-coll-item:hover { background: #1a1a1a; color: #fff; }
.os-coll-item-count { color: #555; font-size: 11px; }

.os-main { flex: 1; min-width: 0; padding: 16px 24px; }

.os-toolbar {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
}
.os-sidebar-toggle {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid #2a2a2a;
    background: #1a1a1a; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #8a8a8a; flex-shrink: 0;
}
.os-sidebar-toggle:hover { border-color: #23d18b; color: #23d18b; }
.os-search-wrap {
    flex: 1; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 10px; border: 1px solid #2a2a2a; background: #141414;
    min-width: 0;
}
.os-search-wrap .material-icons { color: #555; font-size: 18px; flex-shrink: 0; }
.os-search-items { flex: 1; background: none; border: none; color: #fff; font-size: 13px; min-width: 0; }
.os-search-items:focus { outline: none; }
.os-toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.os-items-count { font-size: 12px; color: #555; white-space: nowrap; }
.os-sort-select {
    padding: 7px 10px; border-radius: 8px; border: 1px solid #2a2a2a;
    background: #141414; color: #fff; font-size: 12px; cursor: pointer;
}
.os-sort-select:focus { outline: none; border-color: #23d18b; }
.os-grid-btns { display: flex; gap: 4px; }
.os-grid-btn {
    width: 32px; height: 32px; border-radius: 6px; border: 1px solid #2a2a2a;
    background: #141414; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #555;
}
.os-grid-btn.active, .os-grid-btn:hover { border-color: #23d18b; color: #23d18b; }

.os-nft-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.os-nft-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.os-nft-card {
    background: #161616; border-radius: 12px; overflow: hidden;
    border: 1px solid #222; cursor: pointer; transition: all 0.2s;
    position: relative;
}
.os-nft-card:hover { border-color: #444; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.os-nft-card-chain {
    position: absolute; top: 8px; left: 8px; width: 24px; height: 24px;
    background: rgba(0, 0, 0, 0.7); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}
.os-nft-card-img-wrap { aspect-ratio: 1/1; overflow: hidden; background: #1a1a1a; }
.os-nft-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.os-nft-card:hover .os-nft-card-img { transform: scale(1.04); }
.os-nft-card-body { padding: 10px 12px; }
.os-nft-card-id { font-size: 11px; color: #555; margin-bottom: 2px; }
.os-nft-card-name { font-size: 13px; color: #23d18b; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.os-nft-card-offer { font-size: 12px; color: #8a8a8a; }
.os-nft-card-offer span { color: #aaa; }

.os-nft-empty {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
    padding: 80px 0; color: #333; gap: 14px; text-align: center;
}
.os-nft-empty .material-icons { font-size: 56px; }
.os-nft-empty p { font-size: 15px; color: #555; margin: 0; }

.os-tab-panel { padding: 60px 0; }
.os-coming-soon { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #333; }
.os-coming-soon .material-icons { font-size: 52px; }
.os-coming-soon p { font-size: 14px; color: #555; margin: 0; }

@media (max-width: 900px) {
    .os-banner { height: 180px; }
    .os-header { flex-direction: column; padding: 0 16px 16px; }
    .os-header-stats { padding-top: 0; margin-top: 12px; }
    .os-nft-grid { grid-template-columns: repeat(2, 1fr); }
    .os-sidebar { width: 200px; }
    .os-main { padding: 12px 16px; }
}
@media (max-width: 600px) {
    .os-content { flex-direction: column; }
    .os-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #1e1e1e; }
    .os-nft-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .os-tabs-bar { padding: 0 12px; }
}

/* --- Large screens (2K+): reduce whitespace, scale up --- */
@media (min-width: 1400px) {
    .layout .main {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    #tab-dashboard .stat-card {
        min-height: 140px;
    }
}

@media (min-width: 1920px) {
    .layout aside {
        width: 260px;
    }
    .layout .main {
        padding: 40px 48px;
    }
    .stat-card {
        padding: 32px;
    }
    .stat-card-value {
        font-size: 2.5rem;
    }
    .tab-panel-profile .profile-banner-wrap {
        height: 280px;
    }
    .tab-panel-profile .profile-avatar {
        width: 120px;
        height: 120px;
        font-size: 2.4rem;
    }
    .tab-panel-profile {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-text);
    cursor: pointer;
    font: inherit;
    font-size: inherit;
    text-decoration: none;
}
.link-btn:hover { text-decoration: underline; color: var(--sky); }

.panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-subtitle {
    font-size: .78rem;
    color: var(--text2);
    margin-top: 2px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: tabPanelIn .4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media(max-width:900px) {
    .hamburger-btn {
        display: flex;
    }

    .mobile-menu-backdrop {
        display: block;
    }

    .mobile-menu-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .layout aside {
        position: fixed;
        top: 60px;
        left: 0;
        width: 280px;
        max-width: 85vw;
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        z-index: 299;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
        padding: 16px 12px;
        padding-bottom: max(16px, env(safe-area-inset-bottom) + 16px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.mobile-menu-open .layout aside {
        transform: translateX(0);
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }
}

@media(min-width:901px) {
    .hamburger-btn {
        display: none !important;
    }

    .mobile-menu-backdrop {
        display: none !important;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }
}

@media(max-width:600px) {

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .layout {
        flex-direction: column;
    }

    .layout aside {
        width: 280px;
        max-width: 90vw;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .profile-header .profile-avatar {
        width: 100px;
        height: 100px;
        font-size: 2.2rem;
    }

    .profile-info {
        align-items: center;
    }

    .profile-actions {
        justify-content: center;
    }

    .profile-stats {
        justify-content: center;
    }

    .settings-dashboard {
        flex-direction: column;
    }

    .settings-sidebar {
        width: 100%;
        flex-direction: row;
        padding: 12px 8px;
        border-right: none;
        border-bottom: 1px solid rgba(var(--accent-rgb), .12);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        flex-wrap: nowrap;
    }

    .settings-nav-item {
        flex-shrink: 0;
        padding: 10px 14px;
        font-size: .85rem;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .settings-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--accent-text);
    }

    .settings-content {
        padding: 20px 16px;
    }
}

.stat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.stat-card:hover {
    border-color: rgba(255, 255, 255, .14);
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: .06;
    transform: translate(20px, -20px);
}

.stat-card.indigo::after,
.stat-card.violet::after,
.stat-card.amber::after,
.stat-card.emerald::after {
    background: var(--neon);
}

.stat-card.rose::after {
    background: var(--rose);
}

.stat-card.sky::after {
    background: var(--sky);
}

.stat-card-icon {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.stat-card-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
}

.stat-card-label {
    font-size: .75rem;
    color: var(--text2);
    margin-top: 6px;
    font-weight: 500;
}

.stat-card-delta {
    font-size: .72rem;
    color: var(--accent-text);
    margin-top: 4px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
}

.chip-indigo {
    background: var(--neon-dim);
    color: var(--accent-text);
}

.chip-amber {
    background: rgba(245, 158, 11, .15);
    color: #fcd34d;
}

.chip-emerald {
    background: rgba(16, 185, 129, .15);
    color: #6ee7b7;
}

.chip-rose {
    background: rgba(244, 63, 94, .15);
    color: #fda4af;
}

.chip-violet {
    background: rgba(139, 92, 246, .15);
    color: #c4b5fd;
}

.chip-sky {
    background: rgba(14, 165, 233, .15);
    color: #7dd3fc;
}

.file-drop {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    background: rgba(255, 255, 255, .015);
}

.file-drop:hover,
.file-drop.drag {
    border-color: var(--accent-text);
    background: var(--neon-dim);
    box-shadow: var(--glow);
}

.file-drop input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-drop-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
}

.file-drop-text {
    font-size: .85rem;
    color: var(--text2);
}

.file-drop-text strong {
    color: var(--accent-text);
}

.file-drop-name {
    font-size: .78rem;
    color: var(--accent-text);
    margin-top: 8px;
    font-family: var(--mono);
}

.img-preview-wrap {
    border-radius: var(--rSm);
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--border);
    margin-top: 12px;
}

.img-preview-wrap img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    display: block;
}

.hash-box {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--accent-text);
    background: var(--neon-dim);
    border: 1px solid var(--border2);
    border-radius: var(--rSm);
    padding: 10px 14px;
    word-break: break-all;
    letter-spacing: .04em;
    line-height: 1.6;
    cursor: pointer;
    transition: var(--transition);
}

.hash-box:hover {
    background: rgba(0, 255, 157, .12);
}

/* Mint wizard */
.mint-wizard { margin-top: 20px; }
.mint-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 24px;
}
.mint-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--rSm);
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text2);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}
.mint-step:hover { border-color: var(--accent-text); color: var(--text); }
.mint-step.active {
    border-color: var(--accent-text);
    background: var(--neon-dim);
    color: var(--accent-text);
}
.mint-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
}
.mint-step.active .mint-step-num { background: var(--accent-text); color: var(--text-on-accent); }
.mint-step-connector {
    width: 24px;
    height: 2px;
    background: var(--border);
}
.mint-panel { display: none; }
.mint-panel.active { display: block; }
.mint-formats-hint {
    font-size: .78rem;
    color: var(--text3);
    margin-bottom: 12px;
}
.mint-upload-grid { align-items: start; }
.mint-preview-panel .panel-title { margin-bottom: 12px; }
.mint-preview-area {
    min-height: 200px;
    border-radius: var(--rSm);
    border: 1px solid var(--border);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mint-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text3);
    font-size: .85rem;
}
.mint-preview-empty-icon { width: 48px; height: 48px; color: var(--text3); }
.mint-preview-content {
    width: 100%;
    max-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mint-preview-content img { max-width: 100%; max-height: 280px; object-fit: contain; display: block; }
.mint-audio-player { width: 100%; max-width: 320px; }
.mint-video-player { max-width: 100%; max-height: 280px; }
.mint-pdf-canvas-wrap { padding: 12px; }
.mint-pdf-canvas-wrap canvas { max-width: 100%; height: auto; display: block; }
.mint-preview-unsupported {
    padding: 24px;
    text-align: center;
    color: var(--rose);
}
.mint-preview-unsupported .ic { width: 40px; height: 40px; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; }
.mint-preview-unsupported p { font-size: .9rem; margin: 0; }
.mint-hash-label { font-size: .75rem; color: var(--text2); margin-bottom: 6px; display: block; }
.mint-wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.mint-confirm-panel .panel-title { margin-bottom: 16px; }
.mint-confirm-summary {
    font-size: .85rem;
    color: var(--text2);
    line-height: 1.7;
    padding: 16px;
    background: var(--bg2);
    border-radius: var(--rSm);
    border: 1px solid var(--border);
    margin-bottom: 16px;
}
.mint-success-panel { padding: 24px; text-align: center; }

#toastContainer {
    position: fixed;
    top: 72px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 18px;
    font-size: .82rem;
    font-weight: 500;
    max-width: 340px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideRight .3s ease, fadeIn .3s ease;
    pointer-events: all;
    border-left: 3px solid var(--neon);
    color: var(--text);
}

.toast.ok {
    border-left-color: var(--accent-text);
}

.toast.err {
    border-left-color: var(--rose);
}

.toast.warn {
    border-left-color: var(--amber);
}

.toast.info {
    border-left-color: var(--accent-text);
    color: var(--text);
}

.chain-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.chain-node {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 24px;
}

.chain-node:last-child {
    padding-bottom: 0;
}

.chain-node-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.chain-dot {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--bg3);
    transition: var(--transition);
    cursor: pointer;
}

.chain-dot.genesis,
.chain-dot.mint,
.chain-dot.transfer {
    background: var(--neon-dim);
    border-color: var(--border2);
    color: var(--accent-text);
}

.chain-dot.tampered {
    background: rgba(244, 63, 94, .15);
    border-color: rgba(244, 63, 94, .45);
    color: var(--rose);
    animation: pulse 1s infinite;
}

.chain-connector {
    flex: 1;
    width: 2px;
    background: linear-gradient(to bottom, var(--border), transparent);
    margin: 4px 0;
}

.chain-card {
    flex: 1;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--rSm);
    padding: 14px 16px;
    transition: var(--transition);
    cursor: default;
}

.chain-card:hover {
    border-color: rgba(255, 255, 255, .14);
}

.chain-card.tampered {
    border-color: rgba(244, 63, 94, .4);
}

.chain-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.chain-card-idx {
    font-family: var(--mono);
    font-size: .7rem;
    color: var(--text3);
}

.chain-card-body {
    font-size: .82rem;
    color: var(--text2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chain-hash {
    font-family: var(--mono);
    font-size: .65rem;
    color: var(--text3);
    margin-top: 8px;
    word-break: break-all;
}

.chain-hash span {
    color: var(--text2);
}

.art-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.art-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.art-card:hover {
    border-color: rgba(255, 255, 255, .14);
}

.art-thumb {
    height: 140px;
    background: var(--neon-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    position: relative;
    overflow: hidden;
}

.art-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.art-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 13, 26, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: var(--transition);
}

.art-card:hover .art-thumb-overlay {
    opacity: 1;
}

.art-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.art-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.art-meta {
    font-size: .72rem;
    color: var(--text2);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.art-hash {
    font-family: var(--mono);
    font-size: .62rem;
    color: var(--text3);
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.art-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.mkt-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    transition: var(--transition);
    position: relative;
}

.mkt-card:hover {
    border-color: rgba(255, 255, 255, .14);
    box-shadow: var(--shadow);
}

.mkt-card-clickable {
    cursor: pointer;
}

.mkt-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--amber);
    margin: 10px 0;
}

.mkt-offers {
    font-size: .75rem;
    color: var(--text2);
    margin-top: 10px;
}

.offer-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}

.sim-result-wrap {
    margin-top: 16px;
}

.sim-unique {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(16, 185, 129, .06);
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: var(--rSm);
}

.sim-warn-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(244, 63, 94, .06);
    border: 1px solid rgba(244, 63, 94, .2);
    border-radius: var(--rSm) var(--rSm) 0 0;
    margin-bottom: 0;
}

.sim-items {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--rSm) var(--rSm);
}

.sim-item {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.sim-item:last-child {
    border-bottom: none;
}

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

.sim-pct {
    font-size: 1.4rem;
    font-weight: 800;
    flex-shrink: 0;
    font-family: var(--mono);
}

.sim-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sim-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .75rem;
    color: var(--text2);
}

.sim-bar-label {
    width: 100px;
    flex-shrink: 0;
}

.sim-bar-val {
    width: 36px;
    text-align: right;
    flex-shrink: 0;
    font-family: var(--mono);
    color: var(--text);
}

.sim-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, .06);
    border-radius: 99px;
    overflow: hidden;
}

.sim-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--neon);
    transition: width .8s cubic-bezier(.4, 0, .2, 1);
}

.sim-explanation {
    font-size: .75rem;
    color: var(--text2);
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .02);
    border-radius: 6px;
}

.flip-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
    background: rgba(244, 63, 94, .12);
    color: var(--rose);
    border: 1px solid rgba(244, 63, 94, .2);
    margin-top: 8px;
}

.wallet-meta-card .wallet-meta-hero {
    text-align: center;
    padding: 24px 16px;
}
.wallet-meta-fox {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}
.wallet-meta-address-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.wallet-meta-address {
    font-size: 0.85rem;
    word-break: break-all;
    color: var(--text2);
    background: var(--bg3);
    padding: 8px 12px;
    border-radius: var(--rSm);
    max-width: 100%;
}
.wallet-meta-copy {
    flex-shrink: 0;
}
.wallet-meta-network,
.wallet-meta-status {
    font-size: 0.9rem;
    color: var(--text3);
    margin: 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.wallet-meta-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--emerald);
    display: inline-block;
}
.wallet-meta-change {
    margin-top: 16px;
}
.wallet-stats-card .wallet-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.wallet-stat-item {
    text-align: center;
    padding: 12px;
    background: var(--bg3);
    border-radius: var(--rSm);
    border: 1px solid var(--border);
}
.wallet-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-text);
}
.wallet-stat-label {
    font-size: 0.8rem;
    color: var(--text3);
    margin-top: 4px;
    display: block;
}
.wallet-security-card .wallet-security-row {
    margin: 8px 0;
    font-size: 0.9rem;
}
.wallet-security-label {
    color: var(--text3);
    margin-right: 8px;
}
.wallet-security-card .btn-danger {
    margin-top: 12px;
}

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

.wallet-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--rSm);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition);
    min-width: 0;
}

.wallet-card:hover {
    border-color: rgba(255, 255, 255, .14);
}

.wallet-card-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.wallet-delete-btn {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text3);
    padding: 6px;
}
.wallet-delete-btn:hover {
    color: var(--danger, #ef4444);
}

.wallet-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--neon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-on-accent);
    flex-shrink: 0;
}

.wallet-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-bal {
    font-size: .78rem;
    color: var(--amber);
    font-weight: 600;
    margin-top: 2px;
}

.int-status {
    text-align: center;
    padding: 32px;
    border-radius: var(--rSm);
    background: var(--bg3);
    border: 1px solid var(--border);
}

.int-status-text {
    font-size: 2rem;
    font-weight: 800;
    margin-top: 8px;
}

.int-status.valid .int-status-text {
    color: var(--accent-text);
}

.int-status.invalid .int-status-text {
    color: var(--rose);
}

.int-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.int-blk {
    padding: 6px 14px;
    border-radius: var(--rSm);
    font-size: .75rem;
    font-weight: 600;
    font-family: var(--mono);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .03);
    color: var(--text2);
}

.int-blk.ok {
    background: rgba(16, 185, 129, .08);
    border-color: rgba(16, 185, 129, .25);
    color: var(--accent-text);
}

.int-blk.bad {
    background: rgba(244, 63, 94, .08);
    border-color: rgba(244, 63, 94, .25);
    color: var(--rose);
    animation: pulse 1s infinite;
}

.int-blk.warn {
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .25);
    color: var(--amber);
}

.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.act-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    animation: fadeUp .3s ease;
}

.act-item:last-child {
    border-bottom: none;
}

.act-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.act-dot.MINT {
    background: var(--indigo);
}

.act-dot.TRANSFER {
    background: var(--amber);
}

.act-dot.REGISTER,
.act-dot.LOGIN {
    background: var(--emerald);
}

.act-dot.MARKET_LIST,
.act-dot.MARKET_BUY {
    background: var(--violet);
}

.act-dot.TAMPER {
    background: var(--rose);
}

.act-dot.RESTORE {
    background: var(--sky);
}

.act-time {
    font-size: .7rem;
    color: var(--text3);
    font-family: var(--mono);
    white-space: nowrap;
}

.act-text {
    font-size: .8rem;
    color: var(--text2);
}

.act-text strong {
    color: var(--text);
}

.verify-result {
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    animation: scaleIn .35s ease;
    overflow: hidden;
}
.verify-result .hash-box {
    word-break: break-all;
}

.verify-result.found {
    background: rgba(16, 185, 129, .06);
    border: 1px solid rgba(16, 185, 129, .25);
}

.verify-result.notfound {
    background: rgba(244, 63, 94, .06);
    border: 1px solid rgba(244, 63, 94, .25);
}

.verify-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(7, 13, 26, .85);
    display: none;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.overlay.open {
    display: flex;
}

.modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px;
    max-width: 500px;
    width: 94vw;
    max-height: calc(100vh - 2 * env(safe-area-inset-top, 0px) - 32px);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: scaleIn .3s ease;
    margin: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 6px;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .06);
}

/* Wallet Connect Modal */
.wallet-connect-overlay.open { display: flex; align-items: center; justify-content: center; }
.wallet-connect-modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 24px;
    max-width: 480px;
    width: 94vw;
    padding: 0;
    position: relative;
    box-shadow: var(--shadow-lg);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.wallet-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text3);
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 10px;
    transition: color 0.2s, background 0.2s;
    z-index: 1;
}
.wallet-modal-close:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}
.wallet-modal-header {
    padding: 32px 24px 20px;
    text-align: center;
}
.wallet-modal-fox {
    display: block;
    font-size: 48px;
    line-height: 1;
    margin-bottom: 12px;
}
.wallet-modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.3;
}
.wallet-modal-subtitle {
    font-size: 0.9rem;
    color: var(--text3);
    margin: 0;
    line-height: 1.5;
}
.wallet-connect-tabs {
    display: flex;
    margin: 0 auto 16px;
    padding: 4px;
    max-width: 280px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    gap: 2px;
}
.wallet-connect-tab {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text3);
    background: transparent;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.wallet-connect-tab:hover {
    color: var(--text2);
}
.wallet-connect-tab.active {
    background: var(--accent-text);
    color: var(--text-on-accent);
}
.wallet-connect-tab.active:hover {
    color: var(--text-on-accent);
    opacity: 0.95;
}
.wallet-connect-panel {
    display: none;
    padding: 0 24px 20px;
}
.wallet-connect-panel.active {
    display: block;
}
.wallet-panel-extension-ok,
.wallet-panel-extension-notfound,
.wallet-panel-extension-install-hint {
    text-align: center;
    padding: 8px 0 16px;
}
.wallet-icon-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.2);
    color: var(--accent-text);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.wallet-panel-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
}
.wallet-connect-btn-full {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.wallet-connect-btn-full:hover { opacity: 0.9; }
.wallet-icon-warn {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 12px;
    line-height: 1;
}
.wallet-notfound-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}
.wallet-notfound-sub {
    font-size: 0.85rem;
    color: var(--text3);
    margin: 0 0 16px;
    line-height: 1.4;
}
.wallet-qr-wrap {
    text-align: center;
    padding: 16px 0;
}
.wallet-qr-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
}
.wallet-qr-box {
    display: inline-block;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
}
.wallet-qr-box #walletQrContainer canvas,
.wallet-qr-box #walletQrContainer img {
    display: block;
    width: 200px;
    height: 200px;
}
.wallet-qr-hint {
    font-size: 0.85rem;
    color: var(--text3);
    margin: 0 0 8px;
    line-height: 1.5;
}
.wallet-qr-url {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text3);
    word-break: break-all;
    margin: 0;
}
.wallet-install-wrap {
    text-align: center;
    padding: 16px 0;
}
.wallet-install-fox {
    display: block;
    font-size: 64px;
    line-height: 1;
    margin-bottom: 12px;
}
.wallet-install-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}
.wallet-install-desc {
    font-size: 0.9rem;
    color: var(--text3);
    margin: 0 0 20px;
    line-height: 1.5;
}
.wallet-install-btn { margin-bottom: 10px; }
.wallet-install-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text2);
}
.wallet-install-after {
    font-size: 0.75rem;
    color: var(--text3);
    margin: 16px 0 0;
    line-height: 1.4;
}
.wallet-connect-actions {
    padding: 20px 24px 24px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.wallet-skip-btn {
    width: 100%;
    color: var(--text3);
    transition: color 0.2s, background 0.2s;
}
.wallet-skip-btn:hover {
    color: var(--text2);
    background: rgba(255, 255, 255, 0.04);
}
.wallet-skip-hint {
    font-size: 0.7rem;
    color: var(--text3);
    margin: 8px 0 0;
    line-height: 1.3;
}

.modal-body { margin-top: 0; }
.delete-disable-text { color: var(--text2); line-height: 1.5; margin: 0; }
.delete-disable-modal-actions { margin-top: 20px; flex-wrap: wrap; gap: 10px; }
.delete-artwork-message {
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 0;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.captcha-row .fg { margin-bottom: 0; }
.captcha-box { display: flex; align-items: center; gap: 8px; }
.captcha-box .captcha-input { width: 56px; text-align: center; padding: 8px; }

.settings-sections { max-width: 560px; }
.settings-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}
.settings-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-row { display: flex; flex-direction: column; gap: 14px; }
.settings-row .fg { margin-bottom: 0; }
.settings-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.settings-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--surface2);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text2);
    overflow: hidden;
}
.settings-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-fields { display: flex; flex-direction: column; gap: 10px; }
.settings-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .9rem; color: var(--text2); }
.settings-check input { accent-color: var(--accent-text); }
.settings-hint { font-size: .85rem; color: var(--text3); }

.tab-panel-settings { padding: 0; overflow: hidden; }
.settings-dashboard {
    display: flex;
    min-height: 0;
    flex: 1;
    background: #121212;
    border-radius: var(--radius);
    overflow: hidden;
    font-family: 'Inter', 'Roboto', var(--sans);
}
.settings-sidebar {
    width: 200px;
    flex-shrink: 0;
    padding: 24px 0;
    background: rgba(18, 18, 18, .95);
    border-right: 1px solid rgba(var(--accent-rgb), .12);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text3);
    cursor: pointer;
    transition: all .2s ease;
    border-left: 3px solid transparent;
    white-space: nowrap;
}
.settings-nav-item:hover { color: rgba(var(--accent-rgb), .9); background: rgba(var(--accent-rgb), .04); }
.settings-nav-item.active { color: var(--accent-text); background: rgba(var(--accent-rgb), .08); border-left-color: var(--accent-text); }
.settings-nav-icon .ic { color: inherit; }
.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
    background: linear-gradient(180deg, #0d0d0d 0%, #121212 100%);
}
.settings-content-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(var(--accent-rgb), .12);
}
.settings-page-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: -.02em;
}
.settings-page-sub {
    font-size: .9rem;
    color: var(--text3);
    margin: 0;
}
.settings-panel { display: none; }
.settings-panel.active { display: block; animation: fadeIn .25s ease; }
.settings-panel-header { margin-bottom: 24px; }
.settings-panel-title { font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; margin-bottom: 6px; }
.settings-panel-sub { font-size: .9rem; color: var(--text3); }
.settings-glass-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(var(--accent-rgb), .15);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.settings-glass-card:hover { border-color: rgba(var(--accent-rgb), .25); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .08); }
.settings-card-title { font-size: 1rem; font-weight: 600; color: var(--text2); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.settings-card-title .ic { color: var(--accent-text); flex-shrink: 0; }
.settings-card-actions { margin-top: 20px; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.profile-header-card { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.profile-header-slot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.settings-avatar-lg {
    width: 120px;
    height: 120px;
    font-size: 2.8rem;
    border: 3px solid rgba(var(--accent-rgb), .3);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), .15);
}
.avatar-engine-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    color: rgba(var(--accent-rgb), .85);
    letter-spacing: .04em;
}
.avatar-engine-badge .ic { width: 1em; height: 1em; }
.btn-settings-emerald {
    background: rgba(var(--accent-rgb), .12);
    color: var(--accent-text);
    border: 1px solid rgba(var(--accent-rgb), .4);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-settings-emerald:hover { background: rgba(var(--accent-rgb), .22); border-color: var(--accent-text); box-shadow: 0 0 16px rgba(var(--accent-rgb), .2); }
.profile-header-meta { display: flex; flex-direction: column; gap: 14px; }
.settings-toggle-row { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: .9rem; color: var(--text2); min-height: 32px; }
.settings-toggle-row input { accent-color: var(--accent-text); flex-shrink: 0; }
.settings-lang-row { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--text3); flex-wrap: wrap; }
.input-secure { width: 100%; max-width: 320px; padding: 12px 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(var(--accent-rgb), .2); border-radius: 10px; color: #fff; font-size: .95rem; }
.input-secure:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .15); }
.pw-strength-wrap { max-width: 420px; margin: 0 auto; }
.pw-strength-wrap .fg { margin-bottom: 14px; }
.strength-meter {
    height: 4px;
    max-width: 320px;
    margin-top: 8px;
    background: rgba(255, 255, 255, .08);
    border-radius: 99px;
    overflow: hidden;
}
.strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    transition: width .2s ease, background .2s ease;
    background: rgba(255, 255, 255, .2);
}
.strength-bar.weak { width: 25%; background: #ef4444; }
.strength-bar.fair { width: 50%; background: #f59e0b; }
.strength-bar.good { width: 75%; background: var(--avAccent); }
.strength-bar.strong { width: 100%; background: #00ff9d; }
.strength-label { font-size: .78rem; color: var(--text3); margin-top: 4px; display: block; }
.pw-strength-wrap .antibot-wrap { margin-top: 12px; }
#settings-panel-security .settings-glass-card { max-width: 480px; margin-left: auto; margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.security-web3-card { border-radius: 14px; }
.security-web3-card .settings-hint { margin-top: 8px; margin-bottom: 12px; font-size: .85rem; color: var(--text3); }
.security-email-input { max-width: 100%; width: 100%; }
.security-wallet-card .settings-card-title .ic { color: var(--accent-text); }
.security-wallet-address-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(var(--accent-rgb), .12);
    border-radius: 12px;
    margin: 12px 0;
}
.security-wallet-address {
    font-family: var(--mono);
    font-size: .9rem;
    font-weight: 500;
    color: var(--text2);
    letter-spacing: .02em;
    word-break: break-all;
    flex: 1;
    min-width: 0;
}
.security-copy-wallet { flex-shrink: 0; color: var(--text3); }
.security-copy-wallet:hover { color: var(--accent-text); }
.security-disconnect-btn { margin-top: 12px; }
.settings-2fa-row { margin-bottom: 12px; }
.settings-2fa-row .toggle-switch { margin-left: auto; flex-shrink: 0; }
.settings-recovery-codes-card .settings-hint { margin-bottom: 12px; display: block; }
.settings-recovery-codes-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.settings-recovery-codes-actions .btn { display: inline-flex; }
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: rgba(255, 255, 255, .1);
    border-radius: 99px;
    transition: .25s;
    border: 1px solid rgba(255, 255, 255, .15);
}
.toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background: rgba(255, 255, 255, .6);
    border-radius: 50%;
    transition: .25s;
}
.toggle-switch input:checked + .toggle-slider { background: rgba(var(--accent-rgb), .25); border-color: var(--accent-text); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(22px); background: var(--avAccent); }
.sessions-list { display: flex; flex-direction: column; gap: 12px; }
.session-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 18px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(var(--accent-rgb), .1);
    border-radius: 12px;
}
.session-item .session-device { width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--accent-rgb), .1); display: flex; align-items: center; justify-content: center; }
.session-item .session-device .ic { color: var(--accent-text); }
.session-item .session-meta { flex: 1; min-width: 0; }
.session-item .session-meta strong { display: block; color: var(--text2); font-size: .95rem; }
.session-item .session-meta span { font-size: .8rem; color: var(--text3); }
.session-item .session-revoke { flex-shrink: 0; }
.btn-danger { color: #ef4444 !important; border-color: rgba(239, 68, 68, .4) !important; }
.btn-danger:hover { background: rgba(239, 68, 68, .1) !important; }
.security-cues .cues-row { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--text3); margin-bottom: 10px; min-height: 24px; }
.security-cues .cues-row:last-child { margin-bottom: 0; }
.cue-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cue-dot.ssl { background: var(--avAccent); box-shadow: 0 0 8px var(--avAccent); }
.cue-dot.csrf { background: #00ff9d; box-shadow: 0 0 8px rgba(0, 255, 157, .5); }
.cue-dot.last { background: rgba(255, 255, 255, .4); }

.avatar-crop-modal { max-width: 420px; }
.avatar-crop-body { padding-top: 0; }
.avatar-crop-hint { font-size: .85rem; color: var(--text3); margin-bottom: 12px; }
.avatar-crop-wrap {
    width: 100%;
    aspect-ratio: 1;
    max-width: 320px;
    max-height: 320px;
    margin: 0 auto 16px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(0,0,0,.4);
    border: 2px solid rgba(var(--accent-rgb), .3);
}
.avatar-crop-view { width: 100%; height: 100%; position: relative; cursor: move; touch-action: none; -webkit-user-select: none; user-select: none; }
.avatar-crop-view canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.avatar-crop-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(var(--accent-rgb), .6);
    pointer-events: none;
    background: radial-gradient(circle, transparent 50%, rgba(0,0,0,.5) 50%);
}
.avatar-crop-controls { margin-bottom: 16px; }
.avatar-zoom-label { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--text2); }
.avatar-zoom-label input[type="range"] { flex: 1; max-width: 200px; accent-color: var(--accent-text); }

.twofa-qr-wrap { text-align: center; margin: 12px 0 16px; }
.twofa-qr-wrap img { border-radius: 8px; }
.backup-codes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; font-family: var(--mono); font-size: .85rem; }
.backup-code-item { padding: 8px 10px; background: rgba(255,255,255,.05); border-radius: 6px; color: var(--text2); word-break: break-all; }

@media (max-width: 480px) {
    .avatar-crop-modal { max-width: 100%; margin: 8px; width: calc(100vw - 16px); }
    .avatar-crop-wrap { max-width: 280px; max-height: 280px; }
    .avatar-zoom-label input[type="range"] { min-height: 44px; max-width: none; }
    .twofa-qr-wrap img { max-width: 100%; height: auto; }
    .modal-body .fg input { min-height: 44px; font-size: 16px; }
    .settings-content { padding: 16px; }
    .profile-header-slot { width: 100%; }
    .backup-codes-list { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    #tab-profile {
        padding-left: 4px;
        padding-right: 4px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    #tab-profile .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        padding-left: 8px;
        padding-right: 8px;
    }
    #tab-profile .profile-avatar {
        width: 96px;
        height: 96px;
        font-size: 2.2rem;
        margin-left: auto;
        margin-right: auto;
    }
    #tab-profile .profile-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    #tab-profile .profile-username { font-size: 1.35rem; word-break: break-word; text-align: center; }
    #tab-profile .profile-bio { font-size: .88rem; text-align: center; max-width: 100%; }
    #tab-profile .profile-email {
        text-align: center;
        word-break: break-all;
        font-size: .8rem;
        padding: 0 8px;
    }
    #tab-profile .profile-stats { justify-content: center; gap: 16px; font-size: .82rem; flex-wrap: wrap; }
    #tab-profile .profile-actions {
        justify-content: center;
        width: 100%;
        gap: 10px;
    }
    #tab-profile .profile-actions .btn { min-height: 44px; min-width: 44px; padding: 10px 18px; }
    #tab-profile .profile-section {
        margin-top: 20px;
        padding-left: 4px;
        padding-right: 4px;
    }
    #tab-profile .profile-section-title { font-size: .95rem; margin-bottom: 12px; }
    #tab-profile .profile-artworks {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    #tab-profile .profile-artworks .art-card { margin-bottom: 0; }
    #tab-profile .art-thumb { height: 100px; }
    #tab-profile .profile-artworks .empty-state { padding: 32px 16px; }
    #tab-profile .profile-artworks .empty-state .empty-icon { font-size: 2.25rem; }
    #tab-profile .profile-artworks .empty-text { font-size: .82rem; }

    #tab-mint .grid-2 { grid-template-columns: 1fr; gap: 16px; }
    #tab-mint .panel { padding: 18px; margin-bottom: 16px; }
    #tab-mint .panel .panel-title { font-size: 1rem; margin-bottom: 14px; }
    #tab-mint .file-drop {
        padding: 24px 16px;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #tab-mint .file-drop-icon { font-size: 1.75rem; }
    #tab-mint .file-drop-text { font-size: .82rem; text-align: center; }
    #tab-mint .fg { margin-bottom: 14px; }
    #tab-mint .fg input { min-height: 44px; font-size: 16px; }
    #tab-mint .antibot-code { font-size: 1.35rem; letter-spacing: 0.2em; }
    #tab-mint .btn-block { min-height: 44px; padding: 12px 16px; }
    #tab-mint .img-preview-wrap { max-width: 100%; border-radius: var(--rSm); overflow: hidden; }
    #tab-mint .img-preview-wrap img { width: 100%; height: auto; display: block; }
    #tab-mint .hash-box { font-size: .7rem; padding: 10px; word-break: break-all; }
    #tab-mint p[data-i18n="mint_info"] { font-size: .7rem; line-height: 1.5; }

    #tab-settings .settings-dashboard {
        flex-direction: column;
        min-height: 0;
    }
    #tab-settings .settings-sidebar {
        width: 100%;
        flex-direction: row;
        padding: 10px 8px;
        border-right: none;
        border-bottom: 1px solid rgba(var(--accent-rgb), .12);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    #tab-settings .settings-nav-item {
        flex-shrink: 0;
        padding: 12px 14px;
        font-size: .82rem;
        min-height: 44px;
        min-width: fit-content;
        align-items: center;
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    #tab-settings .settings-nav-item.active { border-left-color: transparent; border-bottom-color: var(--accent-text); }
    #tab-settings .settings-content {
        padding: 18px 14px;
        padding-bottom: max(18px, env(safe-area-inset-bottom) + 18px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #tab-settings .settings-panel-header { margin-bottom: 20px; }
    #tab-settings .settings-panel-title { font-size: 1.25rem; }
    #tab-settings .settings-panel-sub { font-size: .82rem; }
    #tab-settings .settings-glass-card {
        padding: 18px;
        margin-bottom: 16px;
    }
    #tab-settings .profile-header-card {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    #tab-settings .profile-header-slot { width: 100%; align-items: center; }
    #tab-settings .settings-avatar-lg { width: 100px; height: 100px; font-size: 2.4rem; }
    #tab-settings .profile-header-meta { gap: 12px; }
    #tab-settings .settings-toggle-row { font-size: .85rem; flex-wrap: wrap; }
    #tab-settings .input-secure { max-width: none; width: 100%; min-height: 44px; }
    #tab-settings .pw-strength-wrap .fg { margin-bottom: 12px; }
    #tab-settings .strength-meter { max-width: none; }
    #tab-settings .btn-settings-emerald { min-height: 44px; padding: 12px 16px; }
    #tab-settings .sessions-list { padding: 0; }
    #tab-settings .session-item { padding: 12px; flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 480px) {
    #tab-profile .profile-header { gap: 12px; padding-bottom: 16px; }
    #tab-profile .profile-avatar { width: 80px; height: 80px; font-size: 1.9rem; }
    #tab-profile .profile-username { font-size: 1.2rem; }
    #tab-profile .profile-email { font-size: .75rem; }
    #tab-profile .profile-stats { gap: 12px; font-size: .78rem; }
    #tab-profile .profile-actions { flex-direction: column; align-items: stretch; }
    #tab-profile .profile-actions .btn { width: 100%; justify-content: center; }
    #tab-profile .profile-section { margin-top: 16px; }
    #tab-profile .profile-artworks { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    #tab-profile .art-thumb { height: 90px; }
    #tab-profile .profile-artworks .empty-state { padding: 24px 12px; }
    #tab-profile .profile-artworks .empty-state .empty-icon { font-size: 2rem; }
    #tab-profile .profile-artworks .empty-text { font-size: .78rem; }

    #tab-mint .panel { padding: 14px; }
    #tab-mint .file-drop { padding: 20px 12px; min-height: 100px; }
    #tab-mint .antibot-code { font-size: 1.2rem; }

    #tab-settings .settings-sidebar { padding: 8px 6px; }
    #tab-settings .settings-nav-item { padding: 10px 12px; font-size: .78rem; }
    #tab-settings .settings-content { padding: 14px 12px; }
    #tab-settings .settings-glass-card { padding: 14px; }
    #tab-settings .settings-avatar-lg { width: 88px; height: 88px; font-size: 2.1rem; }
}

@media (max-width: 360px) {
    #tab-profile .profile-avatar { width: 72px; height: 72px; font-size: 1.65rem; }
    #tab-profile .profile-username { font-size: 1.1rem; }
    #tab-profile .profile-artworks { gap: 8px; }
    #tab-profile .art-thumb { height: 85px; }
    #tab-profile .profile-artworks .empty-state { padding: 20px 10px; }
    #tab-profile .profile-artworks .empty-state .empty-icon { font-size: 1.75rem; }
    #tab-profile .profile-artworks .empty-text { font-size: .75rem; }
    #tab-mint .file-drop { min-height: 90px; padding: 16px 10px; }
    #tab-mint .antibot-code { font-size: 1.1rem; letter-spacing: 0.15em; }
}

@media (max-width: 768px) {
    .main { padding: 14px; padding-bottom: max(14px, env(safe-area-inset-bottom) + 14px); }
    .page-title { font-size: 1.2rem; margin-bottom: 4px; }
    .page-sub { font-size: .78rem; margin-bottom: 14px; }
    .panel { padding: 16px; margin-bottom: 16px; }
    .panel-header { margin-bottom: 12px; }
    .panel-title { font-size: .95rem; }

    #tab-dashboard .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
    #tab-dashboard .stat-card { padding: 12px; }
    #tab-dashboard .stat-card-value { font-size: 1.15rem; }
    #tab-dashboard .stat-card-label { font-size: .68rem; }
    #tab-dashboard .grid-2 { grid-template-columns: 1fr; gap: 14px; }
    #tab-dashboard .chart-wrap { height: 180px; }
    #tab-dashboard .quick-actions { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    #tab-dashboard .quick-btn { padding: 12px 10px; font-size: .78rem; min-height: 44px; }

    #tab-wallet .panel .fg, #tab-wallet input[type="text"] { min-width: 0; }
    #tab-wallet .wallet-grid { grid-template-columns: 1fr; gap: 10px; }
    #tab-wallet .wallet-card { padding: 14px; }

    #tab-artworks .search-box { padding: 10px 12px; }
    #tab-artworks .art-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    #tab-artworks .art-thumb { height: 100px; }

    #tab-transfer .grid-2 { grid-template-columns: 1fr; }
    #tab-transfer .panel { max-width: none; }
    #tab-transfer .royalty-preview { font-size: .78rem; padding: 10px 12px; }

    #tab-market .grid-2 { grid-template-columns: 1fr; gap: 14px; }
    #tab-market .mkt-grid { grid-template-columns: 1fr; gap: 10px; }
    #tab-market .mkt-card { padding: 14px; }

    #tab-chain .chain-timeline { padding: 10px 0; }
    #tab-chain .chain-node { padding-bottom: 12px; gap: 8px; }
    #tab-chain .chain-card { padding: 10px 12px; }
    #tab-chain .chain-hash { font-size: .58rem; word-break: break-all; }


    #tab-verify .panel { max-width: none; }
    #tab-verify .fg input { font-size: 14px; }

    #tab-analytics .grid-2 { grid-template-columns: 1fr; }
    #tab-analytics .chart-wrap { height: 200px; }
    #tab-analytics .activity-feed .act-item { padding: 10px 0; gap: 8px; }

    #tab-edu .edu-grid { grid-template-columns: 1fr; gap: 12px; }
    #tab-edu .edu-card { padding: 16px; padding-left: 48px; }
    #tab-edu .edu-card-num { left: 14px; top: 16px; width: 22px; height: 22px; font-size: .7rem; }
    #tab-edu .edu-card-title { font-size: 1rem; }
    #tab-edu .edu-card-desc { font-size: .82rem; }
    #tab-edu .edu-detail { font-size: .8rem; line-height: 1.55; }
}

@media (max-width: 480px) {
    #tab-dashboard .grid-4 { grid-template-columns: 1fr; }
    #tab-dashboard .stat-card { display: flex; align-items: center; gap: 12px; padding: 12px; }
    #tab-dashboard .stat-card-icon { margin-bottom: 0; font-size: 1.25rem; }
    #tab-dashboard .stat-card-value { font-size: 1.1rem; }
    #tab-dashboard .stat-card-label { font-size: .7rem; margin-top: 0; }
    #tab-dashboard .chart-wrap { height: 160px; }
    #tab-artworks .art-grid { grid-template-columns: 1fr; }
    #tab-artworks .art-thumb { height: 140px; }
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    border-radius: var(--rSm);
    padding: 8px 14px;
    margin-bottom: 16px;
}

.search-box input {
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: .85rem;
    flex: 1;
}

.search-box input::placeholder {
    color: var(--text3);
}

.log-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--rSm);
    padding: 16px;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--text2);
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.8;
}

.log-time {
    color: var(--indigo);
}

.log-action {
    color: var(--amber);
}

.log-user {
    color: var(--accent-text);
}

.onboarding-overlay { background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; z-index: 9998; }
.onboarding-overlay:not(.open) { display: none; }
.onboarding-overlay.open { display: flex; }

.username-onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}
.username-onboarding-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse 60% 40% at 50% 60%, rgba(99, 102, 241, 0.06) 0%, transparent 45%);
    animation: usernameOnboardingBg 8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes usernameOnboardingBg {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.username-onboarding-card {
    position: relative;
    z-index: 1;
    background: #13131a;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    max-width: 420px;
    width: 100%;
}
.username-onboarding-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px;
}
.username-onboarding-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin: 0 0 8px;
}
.username-onboarding-subtitle {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.45);
    text-align: center;
    margin: 0 0 32px;
}
.username-onboarding-field {
    position: relative;
    margin-bottom: 16px;
}
.username-onboarding-input {
    width: 100%;
    height: 52px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    padding: 0 16px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.username-onboarding-input:focus {
    outline: none;
    border-color: #22c55e;
}
.username-onboarding-input::placeholder {
    color: rgba(255,255,255,0.35);
}
.username-onboarding-field .username-onboarding-input {
    padding-right: 44px;
}
.username-onboarding-status {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
}
.username-onboarding-status.valid { color: #22c55e; }
.username-onboarding-status.invalid { color: #ef4444; }
.username-onboarding-rules {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
}
.username-onboarding-rules li { margin-bottom: 6px; }
.username-onboarding-rules li.met { color: #22c55e; }
.username-onboarding-rules li.unmet { color: #ef4444; }
.username-onboarding-submit {
    width: 100%;
    height: 52px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.username-onboarding-submit:disabled {
    background: #1e293b !important;
    color: rgba(255,255,255,0.3) !important;
    cursor: not-allowed;
    transform: none !important;
}
.username-onboarding-submit:not(:disabled) {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
}
.username-onboarding-submit:not(:disabled):hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.username-onboarding-wallet {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    text-align: center;
    margin: 24px 0 0;
}

.onboarding-modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-width: 460px;
    width: 94vw;
    padding: 32px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb), 0.06);
    animation: scaleIn .35s ease;
    position: relative;
    overflow: hidden;
}

.onboarding-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}

.onboarding-header {
    text-align: center;
    margin-bottom: 28px;
}

.onboarding-brand img {
    height: 72px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 16px;
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.3));
    animation: logoPulse 3s ease-in-out infinite;
}

.onboarding-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.02em;
    margin-bottom: 6px;
}

.onboarding-sub {
    font-size: .88rem;
    color: var(--text3);
    line-height: 1.5;
}

.onb-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.onb-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
    overflow: hidden;
    transition: border-color .2s ease;
}

.onb-card.open {
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.03);
}

.onb-card-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text2);
    font-family: var(--sans);
    font-size: .9rem;
    font-weight: 600;
    transition: color .2s ease;
}

.onb-card-toggle:hover,
.onb-card.open .onb-card-toggle {
    color: var(--text);
}

.onb-card-icon {
    font-size: 1.1rem;
    color: var(--accent-text);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.onb-card-title {
    flex: 1;
}

.onb-card-arrow {
    color: var(--text3);
    font-size: 1.2rem;
    transition: transform .2s ease;
    line-height: 1;
}

.onb-card.open .onb-card-arrow {
    transform: rotate(90deg);
    color: var(--accent-text);
}

.onb-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    padding: 0 16px;
}

.onb-card.open .onb-card-body {
    max-height: 200px;
    padding: 0 16px 16px;
}

.onb-card-body p {
    font-size: .85rem;
    color: var(--text3);
    line-height: 1.65;
    margin: 0;
}

.onb-card-body strong {
    color: var(--accent-text);
}

.onboarding-actions .btn-primary {
    font-size: 1rem;
    padding: 14px 24px;
    border-radius: 12px;
    letter-spacing: .01em;
}

/* === Stat Card Hover Glow === */
.stat-card.indigo:hover,
.stat-card.violet:hover {
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.12), var(--shadow);
    border-color: rgba(var(--accent-rgb), 0.25);
}
.stat-card.amber:hover {
    box-shadow: 0 0 24px rgba(245,158,11,0.12), var(--shadow);
    border-color: rgba(245,158,11,0.25);
}
.stat-card.emerald:hover {
    box-shadow: 0 0 24px rgba(16,185,129,0.12), var(--shadow);
    border-color: rgba(16,185,129,0.25);
}
.stat-card.rose:hover {
    box-shadow: 0 0 24px rgba(244,63,94,0.12), var(--shadow);
    border-color: rgba(244,63,94,0.25);
}

.stat-card-value {
    animation: countUp .6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

/* === Panel Glow === */
.panel:hover {
    border-color: rgba(var(--accent-rgb), 0.12);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.05);
}

.nav-item.active {
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.08);
}

/* === Chain Status Pulse === */
.int-status.valid {
    box-shadow: inset 0 0 30px rgba(16,185,129,0.05);
    animation: chainValidPulse 4s ease-in-out infinite;
}

@keyframes chainValidPulse {
    0%, 100% { box-shadow: inset 0 0 30px rgba(16,185,129,0.05); }
    50%       { box-shadow: inset 0 0 50px rgba(16,185,129,0.10); }
}

/* === Prefers Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    .orb,
    .auth-brand-logo::after,
    .onboarding-brand img,
    .int-status.valid,
    .stat-card-value {
        animation: none !important;
    }
}

#tab-admin {
  --adm-pad: 24px;
  --adm-gap: 16px;
  --adm-radius: var(--radius);
  --adm-bg: rgba(15,15,26,.85);
  --adm-border: var(--border);
  --adm-accent: rgba(var(--accent-rgb), .12);
  --adm-accent-border: rgba(var(--accent-rgb), .25);
  --adm-rose: rgba(255,51,102,.2);
  padding: 0;
  min-height: 60vh;
}

#tab-admin .admin-dashboard { max-width: 1400px; margin: 0 auto; padding: 0; }

#tab-admin .admin-hero {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .08) 0%, rgba(var(--accent-rgb), .04) 50%, rgba(34,197,94,.06) 100%);
  border-bottom: 1px solid var(--adm-border);
  padding: var(--adm-pad) 28px;
}
#tab-admin .admin-hero-inner { max-width: 1200px; margin: 0 auto; }
#tab-admin .admin-hero-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
#tab-admin .admin-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent-text);
}
#tab-admin .admin-hero-badge .ic { width: 16px; height: 16px; }
#tab-admin .admin-hero-title {
  font-size: 1.5rem; font-weight: 800; color: var(--text);
  letter-spacing: -0.02em; margin: 0; line-height: 1;
}
#tab-admin .admin-hero-sep { color: var(--text3); font-weight: 300; user-select: none; }
#tab-admin .admin-hero-updated { font-size: .85rem; color: var(--text3); white-space: nowrap; }
#tab-admin .admin-hero-refresh { flex-shrink: 0; }

#tab-admin .admin-no-access { text-align: center; padding: 64px 32px; max-width: 480px; margin: 0 auto; }
#tab-admin .admin-no-access-icon {
  width: 80px; height: 80px; margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--adm-rose); color: var(--rose);
}
#tab-admin .admin-no-access-icon .ic { width: 40px; height: 40px; }
#tab-admin .admin-no-access h2 { font-size: 1.35rem; font-weight: 700; color: var(--text); margin-bottom: 12px; }
#tab-admin .admin-no-access p { font-size: .95rem; color: var(--text3); line-height: 1.6; margin: 0; }

#tab-admin .admin-layout { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 1fr auto; gap: 0; }
#tab-admin .admin-nav {
  grid-column: 1; grid-row: 1;
  padding: var(--adm-pad) 16px;
  border-right: 1px solid var(--adm-border);
  background: rgba(5,5,5,.5);
  display: flex; flex-direction: column; gap: 4px;
}
#tab-admin .admin-main { grid-column: 2; grid-row: 1; }
#tab-admin .admin-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  border-top: 1px solid var(--adm-border);
  background: rgba(5,5,5,.4);
  font-size: .85rem;
  color: var(--text3);
}
#tab-admin .admin-footer-updated { flex: 1; }
#tab-admin .admin-main { padding: 28px 32px; overflow-x: hidden; }
@media (max-width: 900px) {
  #tab-admin .admin-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  #tab-admin .admin-nav { grid-column: 1; grid-row: 1; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--adm-border); padding: 12px; }
  #tab-admin .admin-main { grid-column: 1; grid-row: 2; }
  #tab-admin .admin-footer { grid-column: 1; grid-row: 3; }
}

#tab-admin .admin-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: none; border-radius: var(--rSm);
  background: transparent; color: var(--text2); font-size: .9rem;
  font-family: inherit; cursor: pointer; transition: var(--transition);
  text-align: left; width: 100%;
}
#tab-admin .admin-nav-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
#tab-admin .admin-nav-item.active { background: var(--adm-accent); color: var(--accent-text); border: 1px solid var(--adm-accent-border); }
#tab-admin .admin-nav-item .ic { width: 20px; height: 20px; flex-shrink: 0; opacity: .9; }
#tab-admin .admin-nav-dot { margin-left: auto; font-size: .7rem; font-weight: 700; background: var(--bg3); color: var(--text3); padding: 2px 8px; border-radius: 10px; }
#tab-admin .admin-nav-dot-warn { background: var(--adm-rose); color: var(--rose); }

#tab-admin .admin-page { display: none; animation: fadeIn .25s ease; }
#tab-admin .admin-page.active { display: block; }

#tab-admin .admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--adm-gap); }
#tab-admin .admin-card {
  background: linear-gradient(145deg, var(--adm-bg) 0%, rgba(10,10,18,.95) 100%);
  border: 1px solid var(--adm-border); border-radius: var(--adm-radius);
  padding: 24px; text-align: center; transition: var(--transition);
  position: relative; overflow: hidden;
}
#tab-admin .admin-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), .06) 0%, transparent 60%);
  pointer-events: none;
}
#tab-admin .admin-card:hover { border-color: rgba(var(--accent-rgb), .3); box-shadow: 0 8px 32px rgba(0,0,0,.3); transform: translateY(-2px); }
#tab-admin .admin-card-icon {
  width: 44px; height: 44px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(var(--accent-rgb), .1); color: var(--accent-text);
}
#tab-admin .admin-card-icon .ic { width: 24px; height: 24px; }
#tab-admin .admin-card-val { font-size: 1.85rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; display: block; }
#tab-admin .admin-card-label { font-size: .75rem; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
#tab-admin .admin-card-accent .admin-card-icon { background: rgba(34,197,94,.2); color: #4ade80; }
#tab-admin .admin-card-rose .admin-card-icon { background: rgba(255,51,102,.15); color: var(--rose); }
#tab-admin .admin-card-emerald .admin-card-val { color: var(--accent-text); }

#tab-admin .admin-panel {
  background: linear-gradient(145deg, rgba(15,15,26,.6) 0%, rgba(10,10,18,.8) 100%);
  border: 1px solid var(--adm-border); border-radius: var(--adm-radius);
  padding: 28px; margin-bottom: 24px; 
}
#tab-admin .admin-panel-danger { border-color: var(--adm-rose); background: linear-gradient(145deg, rgba(255,51,102,.04) 0%, rgba(15,15,26,.8) 100%); }
#tab-admin .admin-panel-title { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
#tab-admin .admin-panel-title .ic { color: var(--accent-text); width: 24px; height: 24px; }

#tab-admin .admin-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: var(--adm-gap); }
#tab-admin .admin-hint { font-size: .88rem; color: var(--text3); margin-bottom: var(--adm-gap); line-height: 1.5; }
#tab-admin .admin-search-wrap { position: relative; display: inline-flex; align-items: center; }
#tab-admin .admin-search-wrap .ic { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--text3); pointer-events: none; }
#tab-admin .admin-search-wrap .input-text { padding-left: 40px; min-width: 220px; }
#tab-admin .admin-form-inline .input-text { min-width: 140px; max-width: 180px; }
#tab-admin .admin-textarea { width: 100%; max-width: 640px; min-height: 100px; resize: vertical; }
#tab-admin .admin-select { min-width: 160px; }
#tab-admin .admin-nft-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; align-items: center; }

#tab-admin .admin-panel-announcement .admin-announcement-form { display: flex; flex-direction: column; gap: 20px; }
#tab-admin .admin-panel-announcement .admin-textarea { max-width: 100%; min-height: 120px; display: block; }
#tab-admin .admin-announcement-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
#tab-admin .admin-announcement-actions .btn {
  min-width: 140px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
#tab-admin .admin-announcement-actions .btn .ic { width: 18px; height: 18px; flex-shrink: 0; }

#tab-admin .admin-table-wrap { overflow-x: auto; border-radius: var(--adm-radius); margin-top: var(--adm-gap); }
#tab-admin .admin-table-glass { background: rgba(5,5,5,.4); border: 1px solid var(--adm-border); border-radius: var(--adm-radius); overflow: hidden; }
#tab-admin .admin-table { width: 100%; border-collapse: collapse; }
#tab-admin .admin-table th {
  font-size: .7rem; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  padding: 14px 18px; border-bottom: 1px solid var(--adm-border); text-align: left; background: rgba(0,0,0,.2);
}
#tab-admin .admin-table td { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .9rem; color: var(--text); }
#tab-admin .admin-table tbody tr:last-child td { border-bottom: none; }
#tab-admin .admin-table tbody tr:hover td { background: rgba(255,255,255,.03); }
#tab-admin .admin-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }
#tab-admin .admin-table tbody tr:nth-child(even):hover td { background: rgba(255,255,255,.04); }
#tab-admin .admin-table .btn { margin-right: 8px; }

#tab-admin .admin-logs-wrap { max-height: 380px; overflow-y: auto; border-radius: var(--adm-radius); background: rgba(5,5,5,.4); border: 1px solid var(--adm-border); padding: 16px; }
#tab-admin .admin-logs-list { font-family: var(--mono); font-size: .8rem; color: var(--text3); }
#tab-admin .admin-logs-list .log-line { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
#tab-admin .admin-logs-list .log-line:last-child { border-bottom: none; }

#tab-admin .admin-empty { text-align: center; padding: 48px 24px; color: var(--text3); }
#tab-admin .admin-empty .ic { width: 48px; height: 48px; margin-bottom: 16px; opacity: .5; }
#tab-admin .admin-empty p { margin: 0; font-size: .95rem; }

#tab-admin .admin-ban-username { font-weight: 600; color: var(--text); margin-bottom: 16px; font-size: 1.05rem; }
.admin-modal-overlay {  background: rgba(0,0,0,.75); }
.admin-modal { max-width: 440px; border: 1px solid var(--border); box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.admin-modal-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin-modal-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-modal-icon .ic { width: 26px; height: 26px; }
.admin-modal-icon-danger { background: rgba(255,51,102,.2); color: var(--rose); }
.admin-modal-icon-emerald { background: rgba(var(--accent-rgb), .15); color: var(--accent-text); }
.admin-modal .fg { margin-bottom: 16px; }
.admin-modal .fg select { margin-bottom: 10px; }

.site-announcement { background: linear-gradient(90deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .08)); border-bottom: 1px solid var(--border); padding: 12px 24px; font-size: .9rem; color: var(--text2); text-align: center; }
.site-announcement:empty { display: none; }
.badge-banned { background: linear-gradient(135deg, #e11d48, #be123c); color: #fff; padding: 4px 10px; border-radius: 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.badge-ok { color: var(--accent-text); font-size: .85rem; font-weight: 600; }
.badge-verified { color: var(--sky); font-size: .8rem; }

/* --- Analytics tab (redesign) --- */
.tab-panel-analytics { padding-bottom: 24px; }
.analytics-header {
    margin-bottom: 24px;
}
.analytics-header .page-title { margin-bottom: 6px; }
.analytics-charts { margin-bottom: 20px; }
.analytics-panel .panel-header { margin-bottom: 16px; }
.analytics-activity .panel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.analytics-activity .activity-feed { max-height: 420px; overflow-y: auto; }

/* --- Edu tab (redesign) --- */
.tab-panel-edu { padding-bottom: 24px; }
.edu-header { margin-bottom: 24px; }
.edu-header .page-title { margin-bottom: 6px; }
.edu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.edu-card {
    position: relative;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    padding-left: 52px;
    cursor: pointer;
    transition: var(--transition);
}
.edu-card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.edu-card.onkeydown .edu-detail { max-height: 500px; opacity: 1; }

.edu-card-num {
    position: absolute;
    left: 18px;
    top: 22px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .2);
    color: var(--accent-text);
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.edu-card:hover {
    border-color: var(--border2);
}
.edu-card:hover .edu-card-num { background: rgba(var(--accent-rgb), .35); }

.edu-card-icon {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--accent-text);
}

.edu-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 6px;
}

.edu-card-desc {
    font-size: .8rem;
    color: var(--text2);
    line-height: 1.5;
    margin: 0;
}

.edu-detail {
    font-size: .8rem;
    color: var(--text2);
    line-height: 1.7;
    margin-top: 14px;
    padding: 14px;
    background: var(--neon-dim);
    border-radius: 8px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    white-space: pre-wrap;
    transition: max-height .35s ease, opacity .3s ease, margin .3s ease;
}

.edu-card.open .edu-detail {
    max-height: 500px;
    opacity: 1;
}

.edu-card.open {
    border-color: var(--border2);
    box-shadow: var(--glow);
}
.edu-card.open .edu-card-num { background: rgba(var(--accent-rgb), .4); }

/* --- Help / Guide page (app.html#help) --- */
.tab-panel-help { padding: 0; overflow: hidden; }
.tab-panel-help .help-layout {
    display: flex;
    gap: 24px;
    min-height: 100%;
    padding: 24px 0;
}
.help-toc {
    flex-shrink: 0;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.help-toc-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text2);
    margin-bottom: 8px;
    padding: 0 4px;
}
.help-toc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    color: var(--text2);
    text-decoration: none;
    font-size: .9rem;
    transition: background .2s, color .2s;
}
.help-toc-link:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--text);
}
.help-toc-icon { color: var(--accent-text); display: flex; align-items: center; }
.help-toc-icon .ic { width: 18px; height: 18px; }
.help-content {
    flex: 1;
    min-width: 0;
    padding-right: 16px;
}
.help-section {
    margin-bottom: 40px;
    padding-top: 16px;
    scroll-margin-top: 24px;
}
.help-section:first-child { padding-top: 0; }
.help-section-icon {
    color: var(--accent-text);
    margin-bottom: 12px;
}
.help-section-icon .ic { width: 28px; height: 28px; }
.help-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
    line-height: 1.3;
}
.help-what, .help-why {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--text2);
    margin: 0 0 12px;
}
.help-steps {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--text2);
    font-size: .9rem;
    line-height: 1.7;
}
.help-steps li { margin-bottom: 8px; }
.help-faq-block {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.help-faq-q {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px;
}
.help-faq-a {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--text2);
    margin: 0;
}
@media (max-width: 768px) {
    .tab-panel-help .help-layout { flex-direction: column; padding: 16px 0; }
    .help-toc { width: 100%; position: static; max-height: none; }
    .help-content { padding-right: 0; }
}

#qrContainer {
    background: white;
    padding: 12px;
    border-radius: 12px;
    display: inline-block;
}

.royalty-preview {
    font-size: .78rem;
    color: var(--text2);
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .03);
    border-radius: var(--rSm);
}

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text3);
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: .4;
}

.empty-text {
    font-size: .85rem;
}

#demoOv {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 600;
    background: rgba(7, 13, 26, .95);
    border-top: 1px solid var(--border);
    padding: 14px 24px;
    display: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#demoBbl {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 601;
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 16px 20px;
    max-width: 480px;
    width: 94vw;
    box-shadow: var(--shadow-lg);
    display: none;
    animation: fadeUp .3s ease;
}

#demoStep {
    font-size: .7rem;
    color: var(--text3);
    font-family: var(--mono);
    margin-bottom: 6px;
}

#demoMsg {
    font-size: .85rem;
    color: var(--text);
    line-height: 1.5;
}

.progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, .06);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 8px;
}

.progress-fill {
    height: 100%;
    background: var(--neon);
    border-radius: 99px;
    transition: width .6s ease;
}

.sep {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}

.page-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -.02em;
    margin-bottom: 4px;
}

.page-sub {
    font-size: .8rem;
    color: var(--text2);
    margin-bottom: 24px;
}

.quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.quick-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--rSm);
    cursor: pointer;
    transition: var(--transition);
    font-size: .82rem;
    font-weight: 500;
    color: var(--text2);
}

.quick-btn:hover {
    border-color: var(--border2);
    color: var(--accent-text);
    background: var(--neon-dim);
}

.quick-btn-icon {
    font-size: 1rem;
}

.chart-wrap {
    height: 200px;
    position: relative;
}

.ai-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ai-metric {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
    border-radius: var(--rSm);
    padding: 14px;
    text-align: center;
}

.ai-metric-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-text);
    font-family: var(--mono);
}

.ai-metric-label {
    font-size: .7rem;
    color: var(--text2);
    margin-top: 4px;
}

@media(max-width:900px) {
    #loginScreen {
        padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    #loginScreen .fg {
        margin-bottom: 12px;
    }

    #loginScreen .fg label {
        font-size: .7rem;
    }

    #loginScreen .fg input {
        padding: 10px 12px;
        font-size: 16px;
    }

    .email-status-banner {
        padding: 10px 12px;
        font-size: .75rem;
        margin-bottom: 14px;
    }

    .email-status-banner-close {
        width: 26px;
        height: 26px;
    }

    header {
        padding: max(0, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(56px, env(safe-area-inset-left) + 52px);
        min-height: 60px;
        height: 60px;
        gap: 12px;
    }

    .hd-brand {
        gap: 8px;
        flex-shrink: 0;
    }

    .hd-brand-name-wrap {
        display: none;
    }

    .hd-brand-icon {
        width: 44px;
        height: 44px;
    }

    .hd-center {
        gap: 4px;
    }

    .hd-right {
        gap: 6px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .hd-stat {
        padding: 3px 6px;
        font-size: .65rem;
    }

    .hd-stat [data-i18n] {
        display: none;
    }

    .hd-right .btn {
        padding: 6px 10px;
        font-size: .72rem;
    }

    .icon-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .main {
        padding: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom) + 12px);
    }

    .panel {
        padding: 12px;
    }

    .page-title {
        font-size: 1.1rem;
    }

    .page-sub {
        font-size: .75rem;
        margin-bottom: 12px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-card-value {
        font-size: 1.2rem;
    }

    .quick-actions {
        gap: 6px;
        margin-bottom: 12px;
    }

    .quick-btn {
        padding: 10px 12px;
        min-height: 42px;
        font-size: .75rem;
    }

    .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-amber, .btn-emerald {
        min-height: 42px;
        padding: 10px 14px;
        font-size: .85rem;
        touch-action: manipulation;
    }

    .btn-sm {
        min-height: 38px;
        padding: 8px 12px;
        font-size: .8rem;
    }

    .btn-xs {
        min-height: 34px;
        padding: 6px 10px;
        font-size: .75rem;
    }

    .fg input, .fg select, .fg textarea {
        min-height: 42px;
        font-size: 16px;
        padding: 10px 12px;
    }

    .file-drop {
        padding: 24px 16px;
        min-height: 110px;
    }

    .file-drop input[type=file] {
        font-size: 16px;
    }

    .art-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .art-thumb {
        height: 130px;
    }

    .art-card:hover {
        transform: none;
    }

    .mkt-grid {
        grid-template-columns: 1fr;
    }

    .wallet-grid {
        grid-template-columns: 1fr;
    }

    .chain-node {
        padding-bottom: 12px;
        gap: 10px;
    }

    .chain-card {
        padding: 10px;
    }

    .chain-card-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    .chain-hash {
        font-size: .6rem;
    }

    .modal {
        max-width: calc(100vw - 20px);
        width: calc(100vw - 20px);
        margin: 10px;
        padding: 16px;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
    }

    .modal-header {
        margin-bottom: 12px;
    }

    .modal-title {
        font-size: .95rem;
    }

    .overlay {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        align-items: flex-start;
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .overlay.open {
        overflow-y: auto;
    }

    #toastContainer {
        top: max(60px, env(safe-area-inset-top) + 60px);
        right: max(10px, env(safe-area-inset-right));
        left: max(10px, env(safe-area-inset-left));
        max-width: calc(100vw - 20px);
    }

    .toast {
        max-width: 100%;
        font-size: .8rem;
        padding: 8px 12px;
    }

    .search-box {
        padding: 8px 12px;
    }

    .search-box input {
        font-size: 16px;
    }

    .edu-grid {
        grid-template-columns: 1fr;
    }

    .chart-wrap {
        height: 150px;
    }

    .ai-result-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ai-metric {
        padding: 10px;
    }

    .ai-metric-val {
        font-size: 1.1rem;
    }

    .sim-item {
        padding: 10px;
    }

    .hash-box {
        font-size: .6rem;
        padding: 6px 10px;
    }

    .auth-page {
        max-width: calc(100vw - 16px);
    }

    .auth-brand h1 {
        font-size: 1.2rem;
    }

    .hamburger-btn {
        top: max(8px, env(safe-area-inset-top) + 8px);
        left: max(10px, env(safe-area-inset-left));
        width: 44px;
        height: 44px;
    }

    .layout aside {
        top: 60px;
        padding: 16px 12px;
        padding-top: max(16px, env(safe-area-inset-top) + 8px);
        padding-bottom: max(16px, env(safe-area-inset-bottom) + 16px);
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        -webkit-overflow-scrolling: touch;
    }

    .layout .main {
        min-width: 0;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }

    .nav-item {
        padding: 12px 14px;
        min-height: 44px;
        font-size: .9rem;
    }

    .nav-section-label {
        font-size: .7rem;
        margin: 12px 0 6px;
    }

    #demoOv {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    #demoBbl {
        bottom: max(60px, 60px + env(safe-area-inset-bottom));
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
    }

    header {
        background: rgba(5, 10, 20, .95);
        border-bottom: 1px solid rgba(var(--accent-rgb), .12);
    }
}

@media(max-width:480px) {
    header {padding: max(0, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 max(54px, env(safe-area-inset-left) + 50px); min-height: 60px; height: 60px; gap: 12px;}

    .hd-center {
        display: none;
    }

    .hd-brand {
        width: 44px;
        height: 44px;
        display: none;
    }

    .hd-brand-name-wrap {
        display: none;
    }

    .hd-brand-icon {
        /*! width: 44px; */
        height: 44px;
    }

    .hd-right {
        gap: 6px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        margin-right: 13px;
    }

    .hd-user {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 4px 8px 4px 6px;
        border-radius: 10px;
        min-width: 0;
    }

    .hd-user .hd-avatar {
        flex-shrink: 0;
    }

    .hd-user .hd-user-meta {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        min-width: 0;
    }

    .hd-user .hd-username {
        display: none;
    }

    .hd-user .hd-balance-mobile-label {
        display: none;
    }

    .hd-user .hd-balance {
        font-size: .95rem;
        font-weight: 700;
        color: var(--amber);
        white-space: nowrap;
    }

    .hd-avatar {
        width: 32px;
        height: 32px;
        font-size: .85rem;
    }

    .icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .demo-btn,
    #demoBtn {
        padding: 7px 10px;
        font-size: .75rem;
    }

    .main {
        padding: 10px;
    }

    .panel {
        padding: 10px;
    }

    .panel-title {
        font-size: .9rem;
    }

    .stat-card {
        padding: 10px;
    }

    .stat-card-value {
        font-size: 1.05rem;
    }

    .page-title {
        font-size: 1rem;
    }

    .page-sub {
        font-size: .72rem;
        margin-bottom: 10px;
    }

    .quick-btn {
        padding: 8px 10px;
        min-height: 38px;
        font-size: .72rem;
    }

    .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-amber, .btn-emerald {
        min-height: 40px;
        padding: 8px 12px;
        font-size: .8rem;
    }

    .btn-sm {
        min-height: 36px;
        padding: 6px 10px;
        font-size: .75rem;
    }

    .art-thumb {
        height: 110px;
    }

    .profile-header .profile-avatar {
        width: 80px;
        height: 80px;
        font-size: 1.8rem;
    }

    .profile-username {
        font-size: 1.2rem;
    }

    .profile-bio {
        font-size: .82rem;
    }

    .profile-section-title {
        font-size: .9rem;
    }

    .profile-artworks {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }

    .modal {
        margin: 8px;
        width: calc(100vw - 16px);
        padding: 12px;
    }

    .modal-title {
        font-size: .9rem;
    }

    #loginScreen {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }

    .auth-page {
        max-width: calc(100vw - 16px);
    }

    .auth-brand {
        margin-bottom: 14px;
    }

    .auth-brand-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
    }

    .auth-brand h1 {
        font-size: 1.05rem;
    }

    .auth-brand p {
        font-size: .65rem;
    }

    #loginScreen .fg {
        margin-bottom: 10px;
    }

    #loginScreen .fg label {
        font-size: .65rem;
    }

    #verifyPendingBox,
    #devLinkBox {
        margin-top: 12px;
        padding: 12px;
        font-size: .8rem;
    }

    #devLinkBox p {
        font-size: .82rem !important;
    }

    .hamburger-btn {
        width: 44px;
        height: 44px;
        top: max(8px, env(safe-area-inset-top) + 8px);
        left: max(8px, env(safe-area-inset-left));
    }

    header {background: rgba(5, 10, 20, 0.96);justify-content: right;}

    .layout aside {
        top: 60px;
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
    }

    #demoBbl {
        bottom: max(60px, 60px + env(safe-area-inset-bottom));
    }

    .nav-item {
        padding: 12px 12px;
        min-height: 44px;
        font-size: .88rem;
    }

    #qrContainer {
        max-width: 160px;
    }

    #qrContainer canvas, #qrContainer img {
        max-width: 100%;
        height: auto;
    }

    .chart-wrap {
        height: 130px;
    }
}

@media(max-width: 360px) {
    header {
        min-height: 60px;
        height: 60px;
        padding: max(0, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 0 max(50px, env(safe-area-inset-left) + 46px);
    }

    .hd-brand-icon {
        width: 40px;
        height: 40px;
    }

    #loginScreen {
        padding: max(6px, env(safe-area-inset-top)) 6px max(12px, env(safe-area-inset-bottom)) 6px;
    }

    .auth-page {
        max-width: calc(100vw - 12px);
    }

    .auth-brand-logo {
        width: 72px;
        height: 72px;
    }

    .auth-brand h1 {
        font-size: .95rem;
    }

    .auth-brand p {
        font-size: .6rem;
    }

    .layout aside {
        top: 60px;
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
    }

    #demoBbl {
        bottom: max(60px, 60px + env(safe-area-inset-bottom));
    }


    header {
        background: rgba(5, 10, 20, .96);
    }

    .hd-right {
        display: flex;
        align-items: center;
        margin-left: 60px;
    }

    .hd-user {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .hd-user .hd-user-meta {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .icon-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #demoBtn {
        display: none;
    }

    .hd-right .btn {
        padding: 6px 8px;
        font-size: .65rem;
    }

    .main {
        padding: 8px;
    }

    .panel {
        padding: 8px;
    }

    .page-title {
        font-size: .95rem;
    }

    .stat-card-value {
        font-size: 1rem;
    }

    .art-thumb {
        height: 100px;
    }

    .profile-header .profile-avatar {
        width: 72px;
        height: 72px;
        font-size: 1.6rem;
    }

    .hamburger-btn {
        width: 44px;
        height: 44px;
        top: max(6px, env(safe-area-inset-top) + 6px);
        left: max(8px, env(safe-area-inset-left));
    }

    .layout aside {
        top: 60px;
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
    }

    .nav-item {
        padding: 12px 10px;
        min-height: 44px;
        font-size: .85rem;
    }
}

/* ========== Login Page Redesign (mobile-first) ========== */
html:has(#loginScreen.login-redesign) {
    height: 100%;
}
body:has(#loginScreen.login-redesign) {
    height: 100%;
    overflow: auto;
}

#loginScreen.login-redesign {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow: auto;
    padding: 0;
    --login-left-bg: #0a0a0f;
    --login-right-bg: #111118;
    --login-card-bg: rgba(17, 17, 24, 0.95);
    --login-text: #ffffff;
    --login-text-muted: rgba(255, 255, 255, 0.6);
    --login-border: rgba(255, 255, 255, 0.08);
    --login-pill-bg: rgba(255, 255, 255, 0.06);
}
html[data-theme="light"] #loginScreen.login-redesign,
html[data-theme="mono-white"] #loginScreen.login-redesign,
html[data-theme="cream"] #loginScreen.login-redesign {
    --login-left-bg: #f0f0f8;
    --login-right-bg: #ffffff;
    --login-card-bg: #ffffff;
    --login-text: #1a1a2a;
    --login-text-muted: rgba(0, 0, 0, 0.55);
    --login-border: rgba(0, 0, 0, 0.1);
    --login-pill-bg: rgba(0, 0, 0, 0.06);
}

/* Base = mobile (max 768px) */
#loginScreen.login-redesign .login-split {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-height: 100vh;
}
#loginScreen.login-redesign .login-split-left {
    display: none;
}
#loginScreen.login-redesign .login-split-right {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 100vh;
    background: var(--login-right-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: background 0.2s ease;
}
#loginScreen.login-redesign .login-card-wrap {
    width: 100%;
    max-width: none;
}
#loginScreen.login-redesign .login-card-actions {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
}
#loginScreen.login-redesign .login-theme-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--login-border);
    background: var(--login-card-bg);
    color: var(--login-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#loginScreen.login-redesign .login-theme-btn:hover {
    background: var(--login-pill-bg);
}
#loginScreen.login-redesign .login-lang-wrap {
    display: flex;
    gap: 4px;
}
#loginScreen.login-redesign .login-lang-wrap .auth-lang-btn {
    min-width: 36px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--login-border);
    background: var(--login-card-bg);
    color: var(--login-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#loginScreen.login-redesign .login-lang-wrap .auth-lang-btn:hover {
    color: var(--login-text);
    background: var(--login-pill-bg);
}
#loginScreen.login-redesign .login-lang-wrap .auth-lang-btn.active {
    background: rgba(246, 133, 27, 0.15);
    border-color: rgba(246, 133, 27, 0.4);
    color: #f6851b;
}

#loginScreen.login-redesign .login-card {
    background: var(--login-card-bg);
    border: 1px solid var(--login-border);
    border-radius: 20px;
    padding: 32px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, border-color 0.2s ease;
}
#loginScreen.login-redesign .login-card-logo-mobile {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0 auto 12px;
}
#loginScreen.login-redesign .login-card-brand-mobile {
    display: block;
    font-family: var(--sans);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--login-text);
    text-align: center;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
}
#loginScreen.login-redesign .login-card-title {
    font-family: var(--sans);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--login-text);
    margin: 0 0 6px;
    transition: color 0.2s ease;
}
#loginScreen.login-redesign .login-card-subtitle {
    font-size: 0.85rem;
    color: var(--login-text-muted);
    margin: 0 0 20px;
    transition: color 0.2s ease;
}
#loginScreen.login-redesign .login-card-divider {
    height: 1px;
    background: var(--login-border);
    margin-bottom: 20px;
    transition: background 0.2s ease;
}
#loginScreen.login-redesign .login-btn-metamask {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 52px;
    padding: 0 24px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--sans);
    color: #fff;
    background: linear-gradient(180deg, #f6851b 0%, #e2761b 100%);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(226, 118, 27, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#loginScreen.login-redesign .login-btn-metamask:hover:not(:disabled) {
    transform: scale(1.02);
    filter: brightness(1.05);
    box-shadow: 0 6px 20px rgba(226, 118, 27, 0.45);
}
#loginScreen.login-redesign .login-btn-metamask:active:not(:disabled) {
    transform: scale(0.99);
}
#loginScreen.login-redesign .login-btn-metamask:disabled {
    opacity: 0.8;
    cursor: not-allowed;
    transform: none;
}
#loginScreen.login-redesign .login-btn-fox {
    font-size: 1.3rem;
    line-height: 1;
}
#loginScreen.login-redesign .login-or {
    text-align: center;
    font-size: 0.75rem;
    color: var(--login-text-muted);
    margin: 16px 0;
    transition: color 0.2s ease;
}
#loginScreen.login-redesign .login-install-box {
    border: 1px solid var(--login-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
    transition: border-color 0.2s ease;
}
#loginScreen.login-redesign .login-install-text {
    font-size: 0.85rem;
    color: var(--login-text-muted);
    margin: 0 0 6px;
    transition: color 0.2s ease;
}
#loginScreen.login-redesign .login-install-link {
    font-size: 0.8rem;
    color: #f6851b;
    text-decoration: none;
    word-break: break-all;
    transition: color 0.2s ease;
}
#loginScreen.login-redesign .login-install-link:hover {
    color: #ff9d2e;
    text-decoration: underline;
}
#loginScreen.login-redesign .login-security-note {
    font-size: 0.7rem;
    color: var(--login-text-muted);
    margin: 0;
    text-align: center;
    opacity: 0.9;
    transition: color 0.2s ease;
}

/* Left side (hidden on mobile, visible tablet+) */
#loginScreen.login-redesign .login-hero-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 20px;
}
#loginScreen.login-redesign .login-hero-title {
    font-family: var(--sans);
    font-size: 3rem;
    font-weight: 700;
    color: var(--login-text);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
}
#loginScreen.login-redesign .login-hero-subtitle {
    font-size: 1rem;
    color: var(--login-text-muted);
    margin: 0 0 32px;
    transition: color 0.2s ease;
}
#loginScreen.login-redesign .login-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 48px;
}
#loginScreen.login-redesign .login-pill {
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--login-pill-bg);
    color: var(--login-text-muted);
    transition: background 0.2s ease, color 0.2s ease;
}
#loginScreen.login-redesign .login-version {
    font-size: 0.7rem;
    color: var(--login-text-muted);
    margin: 0;
    opacity: 0.8;
    transition: color 0.2s ease;
}

/* Tablet: min-width 768px */
@media (min-width: 768px) {
    body:has(#loginScreen.login-redesign) {
        overflow: hidden;
    }
    #loginScreen.login-redesign {
        flex-direction: row;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }
    #loginScreen.login-redesign .login-split {
        flex-direction: row;
        min-height: auto;
    }
    #loginScreen.login-redesign .login-split-left {
        display: flex;
        flex: 0 0 50%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: var(--login-left-bg);
        padding: 48px;
    }
    #loginScreen.login-redesign .login-split-right {
        flex: 0 0 50%;
        min-height: auto;
        height: 100vh;
        padding: 32px;
    }
    #loginScreen.login-redesign .login-card-wrap {
        max-width: 360px;
    }
    #loginScreen.login-redesign .login-card {
        padding: 40px;
    }
    #loginScreen.login-redesign .login-card-logo-mobile,
    #loginScreen.login-redesign .login-card-brand-mobile {
        display: none;
    }
    #loginScreen.login-redesign .login-card-title {
        font-size: 1.5rem;
    }
    #loginScreen.login-redesign .login-card-subtitle {
        font-size: 0.9rem;
        margin: 0 0 24px;
    }
    #loginScreen.login-redesign .login-card-divider {
        margin-bottom: 24px;
    }
    #loginScreen.login-redesign .login-btn-metamask {
        height: 56px;
        font-size: 1.05rem;
    }
    #loginScreen.login-redesign .login-btn-fox {
        font-size: 1.4rem;
    }
    #loginScreen.login-redesign .login-or {
        font-size: 0.8rem;
        margin: 20px 0;
    }
    #loginScreen.login-redesign .login-install-box {
        padding: 16px;
        margin-bottom: 20px;
    }
    #loginScreen.login-redesign .login-install-text {
        font-size: 0.9rem;
    }
    #loginScreen.login-redesign .login-install-link {
        font-size: 0.85rem;
    }
    #loginScreen.login-redesign .login-security-note {
        font-size: 0.75rem;
    }
}

/* Desktop: min-width 1024px */
@media (min-width: 1024px) {
    #loginScreen.login-redesign .login-split-left {
        flex: 0 0 60%;
    }
    #loginScreen.login-redesign .login-split-right {
        flex: 0 0 40%;
    }
    #loginScreen.login-redesign .login-card-wrap {
        max-width: 380px;
    }
}

/* ============================================================
   ArteVia OS — OpenSea-Style Redesign Override Layer
   Dark: Black + Neon Green | Light: White + Electric Blue
   Fonts: Outfit (headings) + Plus Jakarta Sans (body)
   ============================================================ */


/* ── Root font upgrade ── */
body {
    font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
}

/* ── Scrollbar redesign ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(57, 255, 20, 0.15); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(57, 255, 20, 0.35); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, 0.15); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(37, 99, 235, 0.35); }

/* ── Background orbs — green in dark, blue in light ── */
.orb-1 {
    background: radial-gradient(circle, rgba(57, 255, 20, 0.06) 0%, transparent 70%);
}
.orb-2 {
    background: radial-gradient(circle, rgba(57, 255, 20, 0.04) 0%, transparent 70%);
}
.orb-3 {
    background: radial-gradient(circle, rgba(57, 255, 20, 0.03) 0%, transparent 65%);
}
html[data-theme="light"] .orb-1 {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
}
html[data-theme="light"] .orb-2 {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.04) 0%, transparent 70%);
}

/* ── TOPBAR — OpenSea style ── */
.topbar {
    height: 60px;
    min-height: 60px;
    background: rgba(5, 6, 15, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(57, 255, 20, 0.08);
}
html[data-theme="light"] .topbar {
    background: rgba(248, 250, 255, 0.92);
    border-bottom: 1px solid rgba(37, 99, 235, 0.10);
}
.topbar-center .hd-search-input {
    background: rgba(57, 255, 20, 0.04);
    border: 1px solid rgba(57, 255, 20, 0.10);
    border-radius: 12px;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.topbar-center .hd-search-input:focus {
    border-color: rgba(57, 255, 20, 0.35);
    box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.08);
    outline: none;
}
html[data-theme="light"] .topbar-center .hd-search-input {
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.12);
    color: var(--text);
}
html[data-theme="light"] .topbar-center .hd-search-input:focus {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.topbar-chain-pill {
    background: rgba(57, 255, 20, 0.06);
    border: 1px solid rgba(57, 255, 20, 0.12);
    border-radius: 99px;
    color: var(--text2);
}
html[data-theme="light"] .topbar-chain-pill {
    background: rgba(37, 99, 235, 0.07);
    border-color: rgba(37, 99, 235, 0.14);
}
.topbar-user-btn {
    background: rgba(57, 255, 20, 0.05);
    border: 1px solid rgba(57, 255, 20, 0.10);
    border-radius: 12px;
}
.topbar-user-btn:hover {
    background: rgba(57, 255, 20, 0.09);
    border-color: rgba(57, 255, 20, 0.20);
}
html[data-theme="light"] .topbar-user-btn {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.12);
}
html[data-theme="light"] .topbar-user-btn:hover {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.22);
}
.topbar-user-dropdown {
    background: #0a0c1a;
    border: 1px solid rgba(57, 255, 20, 0.10);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
html[data-theme="light"] .topbar-user-dropdown {
    background: #f8faff;
    border-color: rgba(37, 99, 235, 0.12);
    box-shadow: 0 12px 40px rgba(4, 17, 29, 0.12);
}
.topbar-user-dropdown-item {
    color: var(--text2);
}
.topbar-user-dropdown-item:hover {
    background: rgba(57, 255, 20, 0.05);
    color: var(--text);
}
html[data-theme="light"] .topbar-user-dropdown-item:hover {
    background: rgba(37, 99, 235, 0.05);
}

/* ── SIDEBAR — OpenSea style ── */
.layout aside#sidebar, #sidebar {
    background: #07091a;
    border-right: 1px solid rgba(57, 255, 20, 0.07);
}
html[data-theme="light"] .layout aside#sidebar,
html[data-theme="light"] #sidebar {
    background: #f0f4ff;
    border-right-color: rgba(37, 99, 235, 0.10);
}
.sidebar-logo-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--text);
}
html[data-theme="light"] .sidebar-logo-text { color: var(--text); }

.layout aside .nav-section-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    color: var(--text3);
    font-weight: 600;
}
.layout aside .nav-item {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text2);
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.18s ease;
}
.layout aside .nav-item:hover {
    background: rgba(57, 255, 20, 0.06);
    color: var(--text);
}
html[data-theme="light"] .layout aside .nav-item:hover {
    background: rgba(37, 99, 235, 0.07);
    color: var(--text);
}
.layout aside .nav-item.active {
    background: rgba(57, 255, 20, 0.10);
    color: #39ff14;
    border-left: 2px solid #39ff14;
    font-weight: 600;
}
html[data-theme="light"] .layout aside .nav-item.active {
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
    border-left-color: #2563eb;
}
.sidebar-footer {
    border-top: 1px solid rgba(57, 255, 20, 0.07);
}
html[data-theme="light"] .sidebar-footer {
    border-top-color: rgba(37, 99, 235, 0.09);
}
.sidebar-footer-avatar {
    background: rgba(57, 255, 20, 0.12);
    color: #39ff14;
}
html[data-theme="light"] .sidebar-footer-avatar {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}
.sidebar-logout-btn {
    border-radius: 10px;
}
.sidebar-logout-btn:hover {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
}

/* ── MAIN CONTENT AREA ── */
.main {
    background: var(--bg);
    padding: 28px 32px;
}
#content-area {
    background: var(--bg);
}

/* ── WELCOME BANNER ── */
.welcome-banner {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.08) 0%, rgba(57, 255, 20, 0.03) 50%, transparent 100%);
    border-radius: 18px;
    border: 1px solid rgba(57, 255, 20, 0.14);
    box-shadow: inset 0 1px 0 rgba(57, 255, 20, 0.08);
}
html[data-theme="light"] .welcome-banner {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.03) 50%, transparent 100%);
    border-color: rgba(37, 99, 235, 0.14);
    box-shadow: inset 0 1px 0 rgba(37, 99, 235, 0.08);
}
.welcome-banner-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}
.welcome-banner-cta {
    background: linear-gradient(135deg, #39ff14 0%, #2dcc10 100%);
    color: #000000;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 16px rgba(57, 255, 20, 0.30);
}
.welcome-banner-cta:hover { box-shadow: 0 6px 20px rgba(57, 255, 20, 0.45); opacity: 0.95; }
html[data-theme="light"] .welcome-banner-cta {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.30);
}
html[data-theme="light"] .welcome-banner-cta:hover { box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45); }

/* ── STAT CARDS ── */
.stat-card-panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.stat-card-panel:hover {
    border-color: var(--border2);
    box-shadow: var(--glow);
    transform: translateY(-1px);
}
.stat-card-panel .stat-card-value {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}
.stat-card-panel .stat-card-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text2);
}
.stat-card-panel .stat-card-icon .ic { color: var(--accent-text); }

.stat-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.stat-card:hover {
    border-color: var(--border2);
    box-shadow: var(--glow);
    transform: translateY(-1px);
}
.stat-card-value {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

/* ── PANELS ── */
.panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: none;
    transition: border-color 0.2s;
}
.panel:hover { border-color: var(--border2); }
.panel::before {
    background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.05), transparent);
}
html[data-theme="light"] .panel::before {
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.05), transparent);
}
.panel-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    font-size: 1rem;
}

/* ── BUTTONS — refined ── */
.btn {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 12px;
    padding: 11px 20px;
    transition: all 0.18s ease;
}
.btn-primary {
    background: linear-gradient(135deg, #39ff14 0%, #2dcc10 100%);
    color: #000000;
    border: none;
    box-shadow: 0 2px 12px rgba(57, 255, 20, 0.25);
    font-weight: 700;
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #4fff28 0%, #39ff14 100%);
    box-shadow: 0 4px 20px rgba(57, 255, 20, 0.40);
    transform: translateY(-1px);
}
html[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.25);
}
html[data-theme="light"] .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.40);
    transform: translateY(-1px);
}
.btn-secondary {
    background: rgba(57, 255, 20, 0.08);
    color: #39ff14;
    border: 1px solid rgba(57, 255, 20, 0.20);
}
.btn-secondary:hover:not(:disabled) {
    background: rgba(57, 255, 20, 0.14);
    border-color: rgba(57, 255, 20, 0.35);
}
html[data-theme="light"] .btn-secondary {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.20);
}
.btn-ghost {
    background: rgba(57, 255, 20, 0.04);
    color: var(--text2);
    border: 1px solid rgba(57, 255, 20, 0.09);
}
.btn-ghost:hover:not(:disabled) {
    background: rgba(57, 255, 20, 0.08);
    color: var(--text);
    border-color: rgba(57, 255, 20, 0.16);
}
html[data-theme="light"] .btn-ghost {
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.10);
}
html[data-theme="light"] .btn-ghost:hover:not(:disabled) {
    background: rgba(37, 99, 235, 0.09);
    border-color: rgba(37, 99, 235, 0.18);
}
.btn-emerald {
    background: rgba(57, 255, 20, 0.08);
    color: #39ff14;
    border: 1px solid rgba(57, 255, 20, 0.18);
}
.btn-emerald:hover:not(:disabled) {
    background: rgba(57, 255, 20, 0.14);
}
html[data-theme="light"] .btn-emerald {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.18);
}

/* ── NFT CARDS (os-nft-card) — OpenSea inspired ── */
.os-nft-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
    position: relative;
}
.os-nft-card:hover {
    border-color: var(--border2);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), var(--glow);
}
html[data-theme="light"] .os-nft-card {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.10);
    box-shadow: 0 2px 8px rgba(4, 17, 29, 0.06);
}
html[data-theme="light"] .os-nft-card:hover {
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 8px 32px rgba(4, 17, 29, 0.12), var(--glow);
}
.os-nft-card-img-wrap { background: var(--bg3); }
html[data-theme="light"] .os-nft-card-img-wrap { background: #e8eeff; }
.os-nft-card-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--accent-text);
    letter-spacing: -0.01em;
}
.os-nft-card-chain {
    background: rgba(5, 6, 15, 0.75);
    backdrop-filter: blur(8px);
    border-radius: 50%;
}
html[data-theme="light"] .os-nft-card-chain {
    background: rgba(248, 250, 255, 0.85);
}
.os-nft-card-id { color: var(--text3); }
.os-nft-card-offer { color: var(--text2); }

/* ── ART CARDS ── */
.art-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}
.art-card:hover {
    border-color: var(--border2);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), var(--glow);
}
html[data-theme="light"] .art-card {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.10);
}
html[data-theme="light"] .art-card:hover {
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 6px 24px rgba(4, 17, 29, 0.10), var(--glow);
}
.art-thumb { background: var(--bg3); }
html[data-theme="light"] .art-thumb { background: #e8eeff; }
.art-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* ── MKT CARDS ── */
.mkt-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}
.mkt-card:hover {
    border-color: var(--border2);
    box-shadow: var(--glow);
    transform: translateY(-2px);
}
html[data-theme="light"] .mkt-card {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.10);
}
html[data-theme="light"] .mkt-card:hover {
    border-color: rgba(37, 99, 235, 0.25);
}

/* ── MODALS & OVERLAYS ── */
.overlay {
    background: rgba(5, 6, 15, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
html[data-theme="light"] .overlay {
    background: rgba(4, 17, 29, 0.6);
}
.modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
}
html[data-theme="light"] .modal {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.12);
    box-shadow: 0 24px 64px rgba(4, 17, 29, 0.15);
}
.modal-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}
.modal-close {
    background: rgba(57, 255, 20, 0.06);
    border: 1px solid rgba(57, 255, 20, 0.10);
    border-radius: 10px;
    color: var(--text2);
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: all 0.18s;
}
.modal-close:hover {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
    border-color: rgba(244, 63, 94, 0.20);
}
html[data-theme="light"] .modal-close {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.10);
}
html[data-theme="light"] .modal-close:hover {
    background: rgba(244, 63, 94, 0.10);
    border-color: rgba(244, 63, 94, 0.18);
}

/* ── FORMS & INPUTS ── */
.fg input, .fg select, .fg textarea,
.auth-card .fg input, .auth-card .fg select {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus,
.auth-card .fg input:focus {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.10);
    outline: none;
}
html[data-theme="light"] .fg input:focus,
html[data-theme="light"] .fg select:focus,
html[data-theme="light"] .fg textarea:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
html[data-theme="light"] .fg input,
html[data-theme="light"] .fg select,
html[data-theme="light"] .fg textarea {
    background: #f0f4ff !important;
    border-color: rgba(37, 99, 235, 0.14) !important;
    color: var(--text) !important;
}
.fg label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text2);
    letter-spacing: 0.04em;
}

/* ── TOASTS ── */
.toast {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    border-left: 3px solid var(--accent-text);
    color: var(--text);
}
.toast.ok { border-left-color: #39ff14; }
.toast.err { border-left-color: #f43f5e; }
.toast.warn { border-left-color: #f59e0b; }
.toast.info { border-left-color: var(--accent-text); }
html[data-theme="light"] .toast { background: #ffffff; border-color: rgba(37, 99, 235, 0.12); }
html[data-theme="light"] .toast.ok { border-left-color: #059669; }

/* ── CHAIN CARDS ── */
.chain-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.chain-card:hover { border-color: var(--border2); }
.chain-dot.genesis, .chain-dot.mint, .chain-dot.transfer {
    background: rgba(57, 255, 20, 0.10);
    border-color: rgba(57, 255, 20, 0.25);
    color: #39ff14;
}
html[data-theme="light"] .chain-dot.genesis,
html[data-theme="light"] .chain-dot.mint,
html[data-theme="light"] .chain-dot.transfer {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.25);
    color: #2563eb;
}

/* ── HASH BOX ── */
.hash-box {
    background: rgba(57, 255, 20, 0.06);
    border: 1px solid rgba(57, 255, 20, 0.14);
    border-radius: 12px;
    color: #39ff14;
    font-family: 'JetBrains Mono', monospace;
}
.hash-box:hover { background: rgba(57, 255, 20, 0.10); }
html[data-theme="light"] .hash-box {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.14);
    color: #2563eb;
}

/* ── CHIPS ── */
.chip { border-radius: 99px; font-family: 'Plus Jakarta Sans', sans-serif; }
.chip-indigo { background: rgba(57, 255, 20, 0.10); color: #39ff14; }
html[data-theme="light"] .chip-indigo { background: rgba(37, 99, 235, 0.10); color: #2563eb; }

/* ── FILE DROP ── */
.file-drop {
    border: 2px dashed var(--border);
    border-radius: 16px;
    background: var(--surface2);
    transition: all 0.2s;
}
.file-drop:hover, .file-drop.drag {
    border-color: var(--accent-text);
    background: rgba(57, 255, 20, 0.05);
    box-shadow: var(--glow);
}
html[data-theme="light"] .file-drop:hover,
html[data-theme="light"] .file-drop.drag {
    background: rgba(37, 99, 235, 0.04);
}

/* ── VERIFY RESULT ── */
.verify-result.found {
    background: rgba(57, 255, 20, 0.05);
    border: 1px solid rgba(57, 255, 20, 0.20);
    border-radius: 18px;
}
.verify-result.notfound {
    background: rgba(244, 63, 94, 0.05);
    border: 1px solid rgba(244, 63, 94, 0.20);
    border-radius: 18px;
}
html[data-theme="light"] .verify-result.found {
    background: rgba(5, 150, 105, 0.05);
    border-color: rgba(5, 150, 105, 0.20);
}

/* ── PAGE TITLES ── */
.page-title, .panel-title, .welcome-banner-title, .modal-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.page-title { color: var(--text); }
.page-sub { color: var(--text2); font-family: 'Plus Jakarta Sans', sans-serif; }

/* ── MINT STEPS ── */
.mint-step {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text2);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.mint-step:hover { border-color: var(--border2); color: var(--text); }
.mint-step.active {
    background: rgba(57, 255, 20, 0.08);
    border-color: rgba(57, 255, 20, 0.22);
    color: #39ff14;
}
html[data-theme="light"] .mint-step.active {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.22);
    color: #2563eb;
}
.mint-step-num { background: var(--bg2); }
.mint-step.active .mint-step-num { background: var(--accent-text); color: var(--text-on-accent); }

/* ── INT STATUS (verification) ── */
.int-status {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.int-status.valid .int-status-text { color: var(--accent-text); }

/* ── PROFILE (OS-style) ── */
.os-header { background: var(--bg2); border-bottom: 1px solid var(--border); }
html[data-theme="light"] .os-header { background: #f0f4ff; border-bottom-color: rgba(37, 99, 235, 0.10); }
.os-banner { background: var(--bg3); }
html[data-theme="light"] .os-banner { background: #e8eeff; }

/* ── ADMIN PANEL ── */
.admin-card, .admin-panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.admin-card:hover { border-color: var(--border2); }

/* ── SETTINGS GLASS CARD ── */
.settings-glass-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-glass-card:hover {
    border-color: var(--border2);
    box-shadow: var(--glow);
}
html[data-theme="light"] .settings-glass-card {
    background: #f0f4ff;
    border-color: rgba(37, 99, 235, 0.10);
}
html[data-theme="light"] .settings-glass-card:hover {
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: var(--glow);
}

/* ── NOTIFICATION DROPDOWN ── */
.notification-dropdown-content {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .notification-dropdown-content {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.12);
    box-shadow: 0 12px 40px rgba(4, 17, 29, 0.12);
}

/* ── LOADING STATE ── */
#loading-state { background: #05060f; }
html[data-theme="light"] #loading-state { background: #f8faff; }
.loading-brand { font-family: 'Outfit', sans-serif; font-weight: 700; }

/* ── LOGIN PAGE REDESIGN — OpenSea split style ── */
#loginScreen.login-redesign {
    --login-left-bg: #07091a;
    --login-right-bg: #0a0c1a;
    --login-card-bg: rgba(15, 18, 37, 0.98);
    --login-text: #e8ecf5;
    --login-text-muted: rgba(232, 236, 245, 0.55);
    --login-border: rgba(57, 255, 20, 0.10);
    --login-pill-bg: rgba(57, 255, 20, 0.06);
}
html[data-theme="light"] #loginScreen.login-redesign,
html[data-theme="mono-white"] #loginScreen.login-redesign {
    --login-left-bg: #f0f4ff;
    --login-right-bg: #f8faff;
    --login-card-bg: #ffffff;
    --login-text: #04111d;
    --login-text-muted: rgba(4, 17, 29, 0.52);
    --login-border: rgba(37, 99, 235, 0.12);
    --login-pill-bg: rgba(37, 99, 235, 0.06);
}

/* Login card — glassmorphism in dark */
#loginScreen.login-redesign .login-card {
    background: var(--login-card-bg);
    border: 1px solid var(--login-border);
    border-radius: 22px;
    padding: 36px 32px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(57, 255, 20, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
html[data-theme="light"] #loginScreen.login-redesign .login-card {
    box-shadow: 0 8px 40px rgba(4, 17, 29, 0.08);
    border-color: rgba(37, 99, 235, 0.14);
}

/* Login card title */
#loginScreen.login-redesign .login-card-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    color: var(--login-text);
}
#loginScreen.login-redesign .login-card-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    color: var(--login-text-muted);
}

/* MetaMask button */
#loginScreen.login-redesign .login-btn-metamask {
    background: linear-gradient(135deg, #f6851b 0%, #e2761b 100%);
    border: none;
    border-radius: 14px;
    height: 56px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 20px rgba(226, 118, 27, 0.40);
    transition: all 0.2s ease;
}
#loginScreen.login-redesign .login-btn-metamask:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(226, 118, 27, 0.55);
    filter: brightness(1.06);
}

/* Login pills */
#loginScreen.login-redesign .login-pill {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--login-pill-bg);
    border: 1px solid var(--login-border);
    color: var(--login-text-muted);
    border-radius: 99px;
    padding: 7px 16px;
    transition: all 0.2s;
}
#loginScreen.login-redesign .login-pill:hover {
    background: rgba(57, 255, 20, 0.10);
    border-color: rgba(57, 255, 20, 0.20);
    color: var(--login-text);
}
html[data-theme="light"] #loginScreen.login-redesign .login-pill:hover {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.20);
}

/* Login hero title */
#loginScreen.login-redesign .login-hero-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 3.2rem;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: var(--login-text);
}
#loginScreen.login-redesign .login-hero-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    color: var(--login-text-muted);
    font-weight: 500;
}

/* Left panel grid pattern */
#loginScreen.login-redesign .login-split-left {
    position: relative;
    overflow: hidden;
    background: var(--login-left-bg);
}
#loginScreen.login-redesign .login-split-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(57, 255, 20, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 255, 20, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%);
    pointer-events: none;
}
html[data-theme="light"] #loginScreen.login-redesign .login-split-left::before {
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px);
}
#loginScreen.login-redesign .login-split-left::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    background: radial-gradient(circle, rgba(57, 255, 20, 0.12) 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
html[data-theme="light"] #loginScreen.login-redesign .login-split-left::after {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 65%);
}

/* Theme + lang buttons on login */
#loginScreen.login-redesign .login-theme-btn,
#loginScreen.login-redesign .login-lang-wrap .auth-lang-btn {
    background: var(--login-card-bg);
    border: 1px solid var(--login-border);
    border-radius: 10px;
    color: var(--login-text-muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    transition: all 0.18s;
}
#loginScreen.login-redesign .login-theme-btn:hover,
#loginScreen.login-redesign .login-lang-wrap .auth-lang-btn:hover {
    background: var(--login-pill-bg);
    color: var(--login-text);
}
#loginScreen.login-redesign .login-lang-wrap .auth-lang-btn.active {
    background: rgba(246, 133, 27, 0.12);
    border-color: rgba(246, 133, 27, 0.30);
    color: #f6851b;
}

/* Install box */
#loginScreen.login-redesign .login-install-box {
    border: 1px solid var(--login-border);
    border-radius: 14px;
    padding: 16px;
    background: var(--login-pill-bg);
    transition: border-color 0.2s;
}
#loginScreen.login-redesign .login-install-box:hover {
    border-color: rgba(57, 255, 20, 0.18);
}
html[data-theme="light"] #loginScreen.login-redesign .login-install-box:hover {
    border-color: rgba(37, 99, 235, 0.20);
}

/* Divider */
#loginScreen.login-redesign .login-card-divider {
    background: var(--login-border);
    height: 1px;
    margin: 20px 0;
}

/* Username onboarding modal */
.username-onboarding-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
html[data-theme="light"] .username-onboarding-card {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.12);
}
.username-onboarding-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}
.username-onboarding-input {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.username-onboarding-input:focus {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.10);
    outline: none;
}
html[data-theme="light"] .username-onboarding-input {
    background: #f0f4ff;
    border-color: rgba(37, 99, 235, 0.14);
}
html[data-theme="light"] .username-onboarding-input:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
.username-onboarding-submit.btn-primary {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Auth card in app */
.auth-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(57, 255, 20, 0.06);
}
html[data-theme="light"] .auth-card {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.12);
    box-shadow: 0 12px 48px rgba(4, 17, 29, 0.10);
}
.auth-brand h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

/* Dashboard quick action buttons */
.panel-dash .quick-btn {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text2);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    transition: all 0.2s;
}
.panel-dash .quick-btn:hover {
    background: rgba(57, 255, 20, 0.07);
    border-color: rgba(57, 255, 20, 0.18);
    color: var(--text);
    transform: translateY(-1px);
}
html[data-theme="light"] .panel-dash .quick-btn {
    background: #f0f4ff;
    border-color: rgba(37, 99, 235, 0.10);
}
html[data-theme="light"] .panel-dash .quick-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.20);
}

/* Spinner redesign */
.spinner {
    border: 2px solid rgba(57, 255, 20, 0.12);
    border-top-color: #39ff14;
}
html[data-theme="light"] .spinner {
    border-color: rgba(37, 99, 235, 0.12);
    border-top-color: #2563eb;
}

/* Focus ring */
#content-area input:focus,
#content-area button:focus-visible,
.hd-search-input:focus {
    outline-color: #39ff14;
    box-shadow: 0 0 0 3px rgba(57, 255, 20, 0.15);
}
html[data-theme="light"] #content-area input:focus,
html[data-theme="light"] #content-area button:focus-visible {
    outline-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Forgot / auth links */
.forgot-link, .auth-link { color: var(--accent-text); }
.auth-link-accent { color: var(--accent-text); font-weight: 600; }

/* Activity dot colors */
.act-dot.MINT { background: #39ff14; }
.act-dot.TRANSFER { background: #f59e0b; }
.act-dot.REGISTER, .act-dot.LOGIN { background: #39ff14; }
.act-dot.MARKET_LIST, .act-dot.MARKET_BUY { background: #38bdf8; }
.act-dot.TAMPER { background: #f43f5e; }
.act-dot.RESTORE { background: #38bdf8; }
html[data-theme="light"] .act-dot.MINT { background: #059669; }
html[data-theme="light"] .act-dot.REGISTER, 
html[data-theme="light"] .act-dot.LOGIN { background: #2563eb; }

/* ── PANEL-DASH CHAIN ── */
.panel-dash-chain .dash-chain-icon {
    background: rgba(57, 255, 20, 0.08);
    border: 1px solid rgba(57, 255, 20, 0.14);
    border-radius: 12px;
    color: #39ff14;
}
html[data-theme="light"] .panel-dash-chain .dash-chain-icon {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.14);
    color: #2563eb;
}

/* ── BACKUP CODES ── */
.backup-code-item {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--accent-text);
    font-family: 'JetBrains Mono', monospace;
}

/* ── AUTH ANTIBOT ── */
.auth-antibot-inner {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 14px;
}

/* ── DOCS PAGE (if exists) ── */
.docs-sidebar { background: var(--bg2); border-right: 1px solid var(--border); }
html[data-theme="light"] .docs-sidebar { background: #f0f4ff; border-right-color: rgba(37, 99, 235, 0.10); }

/* ── TOPBAR BRAND ── */
.profile-header-under-banner {
    padding: 14px 20px 8px;
    margin-top: -32px;
    position: relative;
    z-index: 1;
    align-items: flex-end;
}
@media (max-width: 768px) {
    .profile-header-under-banner { margin-top: -20px; padding: 12px 14px 8px; flex-wrap: wrap; }
}

/* ═══ Settings overhaul (scoped) ═══ */
#tab-settings.settings-overhaul .settings-dashboard.settings-ui-shell {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: linear-gradient(165deg, rgba(var(--accent-rgb), .04) 0%, var(--bg2) 38%, var(--bg) 100%);
    border: 1px solid rgba(var(--accent-rgb), .12);
    border-radius: var(--radius);
    min-height: 520px;
    overflow: hidden;
}
#tab-settings.settings-overhaul .settings-rail {
    width: min(300px, 32vw);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 16px 24px;
    background: rgba(0, 0, 0, .25);
    border-right: 1px solid rgba(var(--accent-rgb), .12);
}
html[data-theme="light"] #tab-settings.settings-overhaul .settings-rail {
    background: rgba(37, 99, 235, .04);
    border-right-color: rgba(37, 99, 235, .12);
}
#tab-settings.settings-overhaul .settings-rail-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding: 0 4px;
}
#tab-settings.settings-overhaul .settings-rail-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), .12);
    border: 1px solid rgba(var(--accent-rgb), .22);
    color: var(--accent-text);
}
#tab-settings.settings-overhaul .settings-rail-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 4px;
    letter-spacing: -.02em;
    color: var(--text);
}
#tab-settings.settings-overhaul .settings-rail-sub {
    margin: 0;
    font-size: .8rem;
    color: var(--text3);
    line-height: 1.35;
}
#tab-settings.settings-overhaul .settings-nav-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    width: 100%;
    border: none;
    background: transparent;
}
#tab-settings.settings-overhaul .settings-nav-item {
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 14px;
    border-left: 1px solid transparent;
    padding: 12px 12px;
    gap: 10px;
    background: rgba(255, 255, 255, .02);
    align-items: center;
}
#tab-settings.settings-overhaul .settings-nav-item:hover {
    background: rgba(var(--accent-rgb), .08);
    border-color: rgba(var(--accent-rgb), .15);
    color: var(--text);
}
#tab-settings.settings-overhaul .settings-nav-item.active {
    background: rgba(var(--accent-rgb), .12);
    border-color: rgba(var(--accent-rgb), .28);
    color: var(--accent-text);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .12);
}
#tab-settings.settings-overhaul .settings-nav-glyph {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .2);
    flex-shrink: 0;
}
#tab-settings.settings-overhaul .settings-nav-item.active .settings-nav-glyph {
    background: rgba(var(--accent-rgb), .18);
    color: var(--accent-text);
}
#tab-settings.settings-overhaul .settings-nav-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
#tab-settings.settings-overhaul .settings-nav-label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
}
#tab-settings.settings-overhaul .settings-nav-hint {
    font-size: .72rem;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#tab-settings.settings-overhaul .settings-nav-chevron {
    opacity: .35;
    flex-shrink: 0;
}
#tab-settings.settings-overhaul .settings-nav-item.active .settings-nav-chevron { opacity: .75; }
#tab-settings.settings-overhaul .settings-stage {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
#tab-settings.settings-overhaul .settings-content {
    flex: 1;
    background: transparent;
    padding: 28px 28px 36px;
}
#tab-settings.settings-overhaul .settings-panel-hero {
    position: relative;
    margin-bottom: 24px;
    padding: 4px 2px 18px;
    border-bottom: 1px solid rgba(var(--accent-rgb), .1);
}
#tab-settings.settings-overhaul .settings-hero-glow {
    position: absolute;
    width: 220px;
    height: 120px;
    left: -20px;
    top: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), .25) 0%, transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    opacity: .6;
}
#tab-settings.settings-overhaul .settings-hero-glow-amber {
    background: radial-gradient(circle, rgba(245, 158, 11, .22) 0%, transparent 70%);
}
#tab-settings.settings-overhaul .settings-hero-glow-indigo {
    background: radial-gradient(circle, rgba(99, 102, 241, .22) 0%, transparent 70%);
}
#tab-settings.settings-overhaul .settings-hero-glow-violet {
    background: radial-gradient(circle, rgba(167, 139, 250, .22) 0%, transparent 70%);
}
#tab-settings.settings-overhaul .settings-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
@media (max-width: 900px) {
    #tab-settings.settings-overhaul .settings-grid-2 { grid-template-columns: 1fr; }
}
#tab-settings.settings-overhaul .settings-card-surface {
    position: relative;
    overflow: hidden;
}
#tab-settings.settings-overhaul .settings-card-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-text), transparent);
    opacity: .5;
}
#tab-settings.settings-overhaul .settings-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
#tab-settings.settings-overhaul .settings-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), .1);
    border: 1px solid rgba(var(--accent-rgb), .18);
    color: var(--accent-text);
    flex-shrink: 0;
}
#tab-settings.settings-overhaul .settings-card-icon-warn {
    background: rgba(244, 63, 94, .1);
    border-color: rgba(244, 63, 94, .25);
    color: #fb7185;
}
#tab-settings.settings-overhaul .settings-card-blurb {
    margin: 4px 0 0;
    font-size: .82rem;
    color: var(--text3);
    line-height: 1.4;
}
#tab-settings.settings-overhaul .settings-avatar-orbit {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
#tab-settings.settings-overhaul .settings-avatar-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#tab-settings.settings-overhaul .settings-banner-placeholder {
    margin-top: 12px;
    min-height: 72px;
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(var(--accent-rgb), .08), rgba(99, 102, 241, .06));
    border: 1px dashed rgba(var(--accent-rgb), .2);
}
#tab-settings.settings-overhaul .settings-banner-thumb {
    margin-top: 12px;
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), .15);
}
#tab-settings.settings-overhaul .settings-wallet-reveal {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
#tab-settings.settings-overhaul .settings-wallet-chip {
    margin-top: 0;
}
#tab-settings.settings-overhaul .settings-option-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
#tab-settings.settings-overhaul .settings-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), .08);
}
#tab-settings.settings-overhaul .settings-option-last { border-bottom: none; }
#tab-settings.settings-overhaul .settings-option-label {
    font-size: .88rem;
    color: var(--text2);
}
#tab-settings.settings-overhaul .settings-toggle-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
#tab-settings.settings-overhaul .settings-toggle-modern input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
#tab-settings.settings-overhaul .settings-toggle-track {
    width: 46px;
    height: 26px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(var(--accent-rgb), .15);
    position: relative;
    transition: background .2s, border-color .2s;
}
#tab-settings.settings-overhaul .settings-toggle-track::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 2px;
    left: 3px;
    background: var(--text2);
    transition: transform .2s, background .2s;
}
#tab-settings.settings-overhaul .settings-toggle-modern input:checked + .settings-toggle-track {
    background: rgba(var(--accent-rgb), .25);
    border-color: var(--accent-text);
}
#tab-settings.settings-overhaul .settings-toggle-modern input:checked + .settings-toggle-track::after {
    transform: translateX(18px);
    background: var(--accent-text);
}
#tab-settings.settings-overhaul .settings-divider-soft {
    height: 1px;
    background: rgba(var(--accent-rgb), .08);
    margin: 8px 0 16px;
}
#tab-settings.settings-overhaul .settings-field-premium { margin-top: 4px; }
#tab-settings.settings-overhaul .settings-field-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text3);
    margin-bottom: 8px;
    letter-spacing: .04em;
}
#tab-settings.settings-overhaul .btn-settings-pill { border-radius: 99px !important; }
#tab-settings.settings-overhaul .btn-settings-wide { width: 100%; justify-content: center; }
#tab-settings.settings-overhaul .settings-form-stack .fg { margin-bottom: 12px; }
#tab-settings.settings-overhaul .settings-twofa-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
#tab-settings.settings-overhaul .settings-recovery-codes-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#tab-settings.settings-overhaul .settings-segment {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(var(--accent-rgb), .12);
}
html[data-theme="light"] #tab-settings.settings-overhaul .settings-segment {
    background: rgba(37, 99, 235, .06);
}
#tab-settings.settings-overhaul .settings-segment-btn { border-radius: 10px !important; }
#tab-settings.settings-overhaul .settings-lang-premium {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#tab-settings.settings-overhaul .settings-lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), .15);
    background: rgba(255, 255, 255, .03);
    color: var(--text2);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
}
#tab-settings.settings-overhaul .settings-lang-chip:hover {
    border-color: rgba(var(--accent-rgb), .35);
    color: var(--text);
}
#tab-settings.settings-overhaul .settings-lang-chip.active {
    border-color: var(--accent-text);
    background: rgba(var(--accent-rgb), .14);
    color: var(--accent-text);
}
#tab-settings.settings-overhaul .settings-lang-flag {
    font-size: .72rem;
    font-weight: 800;
    opacity: .75;
}
#tab-settings.settings-overhaul .settings-card-danger {
    border-color: rgba(244, 63, 94, .2);
}
#tab-settings.settings-overhaul .settings-active-pill {
    display: none;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(99, 102, 241, .12);
    border: 1px solid rgba(99, 102, 241, .22);
    font-size: .82rem;
    color: var(--text2);
    margin-bottom: 14px;
    line-height: 1.45;
}
#tab-settings.settings-overhaul .settings-sessions-toolbar { margin-bottom: 12px; }
#tab-settings.settings-overhaul .settings-empty-soft {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: var(--text3);
    font-size: .88rem;
}
#tab-settings.settings-overhaul .settings-empty-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .4);
    animation: pulse 1.5s ease-in-out infinite;
}
@media (max-width: 768px) {
    #tab-settings.settings-overhaul .settings-dashboard.settings-ui-shell {
        flex-direction: column;
        min-height: 0;
    }
    #tab-settings.settings-overhaul .settings-rail {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(var(--accent-rgb), .12);
        padding: 12px 10px 10px;
    }
    #tab-settings.settings-overhaul .settings-nav-stack.settings-sidebar {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    #tab-settings.settings-overhaul .settings-nav-item {
        min-width: min(200px, 85vw);
        flex-shrink: 0;
    }
    #tab-settings.settings-overhaul .settings-nav-chevron { display: none; }
    #tab-settings.settings-overhaul .settings-content {
        padding: 18px 14px 28px;
    }
}

/* ============================================================
   ▓▓▓  RUTHLESS UI/UX DISCIPLINE LAYER — FINAL CASCADE  ▓▓▓
   Sona eklenmiştir; tüm mirasçı karmaşayı ezerek bastırır.
   - Floating orb / bg noise kaldırıldı (bg-orbs HTML'den de çıkarıldı)
   - Disiplinli spacing/radius/z/timing tokenları
   - 44×44 touch-target ve overflow koruması
   - Bulletproof marketplace/NFT grid
   - Hamburger/sidebar: sayfa kaymadan açılır
   ============================================================ */

:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 56px;
    --space-10: 72px;
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;
    --t-fast: 140ms;
    --t-base: 220ms;
    --t-slow: 360ms;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --z-base: 1;
    --z-sticky: 100;
    --z-nav: 200;
    --z-drawer: 300;
    --z-dropdown: 400;
    --z-modal: 500;
    --z-toast: 900;
    --z-top: 9999;
    --ring: 0 0 0 3px rgba(var(--accent-rgb), .28);
    --max-content: 1600px;
}

/* 1) THE GREAT PURGE — decorative noise/orbs silinir */
.bg-orbs,
.bg-orbs .orb,
.bg-orbs .orb-1,
.bg-orbs .orb-2,
.bg-orbs .orb-3,
.auth-bg-orb,
.auth-bg-orb-1,
.auth-bg-orb-2,
.auth-bg-orb-3 {
    display: none !important;
}

/* body pseudo-noise hafifletildi (kaldırılmadı: arka plan hissi için düşük opasite) */
body::before { opacity: .18 !important; }
body::after { opacity: .55; }

/* 2) GLOBAL RESET — yatay scroll ve taşmalar kökten engellenir */
html,
body {
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-y: none;
}
img,
svg,
video,
canvas,
iframe,
picture {
    max-width: 100%;
    height: auto;
}
img { display: block; }
pre,
code,
table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: inherit;
}
::selection {
    background: rgba(var(--accent-rgb), .22);
    color: var(--text);
}

/* 3) TOUCH TARGETS — mobilde tüm etkileşimli öğeler min 44×44 */
@media (max-width: 900px) {
    .btn,
    .icon-btn,
    .nav-item,
    .bottom-nav-item,
    .settings-nav-item,
    a.link-btn,
    button:not(.modal-close):not(.os-grid-btn),
    input[type="button"],
    input[type="submit"],
    select,
    .fg input,
    .fg select,
    .fg textarea {
        min-height: 44px;
    }
    .icon-btn,
    button.icon-btn {
        min-width: 44px;
    }
}

/* 4) COMPONENT DISCIPLINE — birleşik radius & transition */
.btn,
.icon-btn,
.input-text,
.panel,
.stat-card,
.mkt-card,
.art-card,
.chain-card,
.modal,
.settings-glass-card,
.chip {
    transition:
        background-color var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out),
        color var(--t-base) var(--ease-out),
        box-shadow var(--t-base) var(--ease-out),
        transform var(--t-base) var(--ease-out);
}

/* Disiplinli kart hover — sadece dikey, jitter yok */
.panel:hover,
.stat-card:hover,
.mkt-card:hover,
.chain-card:hover,
.art-card:hover,
.settings-glass-card:hover {
    transform: translateY(-2px);
}

/* 5) BULLETPROOF GRID — pazaryeri ve NFT galerisi hizalı */
.mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 28vw, 280px), 1fr));
    gap: clamp(12px, 2vw, 20px);
    align-items: stretch;
}
.mkt-grid > .mkt-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}
.mkt-grid > .mkt-card > * { min-width: 0; }
.mkt-card .mkt-thumb {
    aspect-ratio: 4 / 3;
    height: auto !important;
    width: 100%;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--bg);
}
.mkt-card .mkt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mkt-card .mkt-price { margin-top: auto; }

.artwork-grid,
.profile-artworks,
.os-nft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 22vw, 260px), 1fr));
    gap: clamp(12px, 1.8vw, 18px);
}
.os-nft-grid.cols-2,
.os-nft-grid.cols-3,
.os-nft-grid.cols-4 {
    grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 22vw, 260px), 1fr));
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); }

/* 6) LAYOUT & MAIN — içerik merkezlenir, taşmaz */
.layout {
    max-width: var(--max-content);
    margin-inline: auto;
    width: 100%;
}
.main,
.layout .main {
    min-width: 0;
}
.tab-panel {
    min-width: 0;
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom, 0));
}
@media (max-width: 900px) {
    /* Bottom-nav için altta güvenli boşluk (içerik nav altına girmez) */
    body:not(.login-active) .main {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

/* 7) NAV & HAMBURGER — sayfa kaymaz, drawer üstten açılır */
.hamburger-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
@media (max-width: 900px) {
    body.mobile-menu-open {
        /* overflow:hidden zaten var; scroll hapsedilsin */
        position: fixed;
        inset: 0;
        width: 100%;
    }
    .layout aside#sidebar {
        will-change: transform;
    }
}

/* 8) MODAL/OVERLAY — responsive ve taşırmaz */
.overlay .modal {
    max-width: min(560px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100dvh - 2 * var(--space-4));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 9) TYPOGRAPHY HIERARCHY — tutarlı ölçek, okunurluk */
.page-title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; }
.page-sub   { font-size: clamp(.85rem, 1.1vw, .95rem); line-height: 1.5; }
.panel-title,
.settings-panel-title { line-height: 1.25; }
.settings-card-blurb,
.settings-panel-sub,
.settings-hint { line-height: 1.5; }

/* 10) KARTLAR — metin taşmaz, başlık tek/çift satır, ellipsize */
.mkt-card,
.art-card {
    container-type: inline-size;
}
.mkt-card .mkt-card-title,
.art-card .art-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* 11) ICON BUTTONS — yeknesak, 40×40 desktop / 44×44 mobil */
.icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text2);
    cursor: pointer;
    transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.icon-btn:hover {
    background: rgba(var(--accent-rgb), .08);
    color: var(--text);
    border-color: rgba(var(--accent-rgb), .18);
}

/* 12) UZUN CÜZDAN / HASH STRINGLERİ — sarmala ve parçala */
.hash-box,
.mkt-card .art-hash,
.profile-bio,
.os-wallet-chip,
.security-wallet-address {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 13) REDUCED MOTION — hareket duyarlılığı */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 14) DARK/LIGHT UYUMU — kritik metin kontrastı */
html[data-theme="light"] .mkt-card,
html[data-theme="light"] .art-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .chain-card {
    box-shadow: 0 2px 12px rgba(4, 17, 29, 0.04);
}
html[data-theme="light"] .mkt-card:hover,
html[data-theme="light"] .art-card:hover,
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .chain-card:hover {
    box-shadow: 0 10px 28px rgba(4, 17, 29, 0.08);
}

/* ===== LANG TOGGLE BUTTONS ===== */
.lang-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg2);
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
}
.lang-toggle-btn {
    padding: 5px 10px;
    font-size: .75rem;
    font-weight: 600;
    font-family: var(--sans);
    border: none;
    background: transparent;
    color: var(--text3);
    cursor: pointer;
    transition: all .2s ease;
    letter-spacing: .04em;
}
.lang-toggle-btn:hover {
    color: var(--text);
    background: rgba(var(--accent-rgb), .08);
}
.lang-toggle-btn.active,
.lang-toggle-btn[data-lang="tr"].active,
.lang-toggle-btn[data-lang="en"].active {
    color: var(--text-on-accent);
    background: rgba(var(--accent-rgb), .9);
}

/* ===== DASHBOARD WELCOME ===== */
.dash-welcome {
    margin-bottom: 16px;
}
.dash-welcome-text .page-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

/* ===== DASHBOARD TRENDING LIST ===== */
.dash-trending-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dash-trending-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--rSm);
    background: rgba(var(--accent-rgb), .04);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all .2s ease;
}
.dash-trending-item:hover {
    background: rgba(var(--accent-rgb), .08);
    border-color: var(--border2);
    transform: translateX(4px);
}
.dash-trending-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-trending-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dash-trending-info {
    flex: 1;
    min-width: 0;
}
.dash-trending-title {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-trending-owner {
    font-size: .75rem;
    color: var(--text3);
}
.dash-trending-price {
    font-size: .85rem;
    font-weight: 700;
    color: var(--accent-text);
    white-space: nowrap;
}