/* ===== MAILDROP THEME SYSTEM ===== */
/* Default: Light theme */
:root {
    --bg: #f8fafb;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --surface: #f1f5f9;
    --border: #e2e8f0;
    --border-glow: #0ea5e9;
    --text: #0f172a;
    --text-dim: #475569;
    --text-muted: #94a3b8;
    --accent: #0d9488;
    --accent-alt: #0284c7;
    --accent-warm: #d97706;
    --danger: #e11d48;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
    --hero-bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    --hero-text: #ffffff;
    --hero-dim: #cbd5e1;
    --hero-accent-bg: rgba(13,148,136,0.1);
    --hero-accent-border: rgba(13,148,136,0.25);
    --noise-opacity: 0.015;
    --input-bg: #ffffff;
    --code-bg: #f1f5f9;
    --code-color: #0d9488;
    --modal-bg: #ffffff;
    --toast-text: #ffffff;
    --scrollbar-thumb: #cbd5e1;
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

/* Dark theme */
[data-theme="dark"] {
    --bg: #0a0e1a;
    --bg-elevated: #111827;
    --bg-card: #151c2e;
    --bg-card-hover: #1a2340;
    --surface: #1e2942;
    --border: #253049;
    --text: #e2e8f0;
    --text-dim: #7a8baa;
    --text-muted: #4a5878;
    --accent: #06d6a0;
    --accent-alt: #0ea5e9;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
    --noise-opacity: 0.03;
    --input-bg: #0a0e1a;
    --code-bg: #0a0e1a;
    --code-color: #06d6a0;
    --modal-bg: #151c2e;
    --scrollbar-thumb: #253049;
}

/* ===== BASE ===== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-display);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;}
a{color:var(--accent-alt);text-decoration:none;transition:color 0.2s;}
a:hover{color:var(--accent);}

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

.container{max-width:1140px;margin:0 auto;padding:0 24px;}

/* ===== THEME TOGGLE ===== */
.theme-toggle{
    background:var(--surface);border:1px solid var(--border);
    color:var(--text-dim);width:34px;height:34px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all 0.2s;font-size:0.85rem;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);}
[data-theme="dark"] .theme-toggle .fa-moon{display:none;}
:root:not([data-theme="dark"]) .theme-toggle .fa-sun{display:none;}
[data-theme="dark"] .theme-toggle .fa-sun{display:inline;}
:root:not([data-theme="dark"]) .theme-toggle .fa-moon{display:inline;}

/* ===== SHARED NAV ===== */
.md-nav{
    position:sticky;top:0;z-index:100;
    background:var(--bg-elevated);
    border-bottom:1px solid var(--border);
    padding:10px 0;
    backdrop-filter:blur(16px);
}
.md-nav .container{display:flex;align-items:center;justify-content:space-between;}
.md-nav .brand{
    font-family:var(--font-mono);font-size:1.1rem;font-weight:600;
    color:var(--text);text-decoration:none;
    display:flex;align-items:center;gap:8px;
}
.md-nav .logo-icon{
    width:30px;height:30px;
    background:linear-gradient(135deg,var(--accent),var(--accent-alt));
    border-radius:8px;display:flex;align-items:center;justify-content:center;
    font-size:0.75rem;color:#fff;
}
.md-nav .nav-right{display:flex;align-items:center;gap:6px;}
.nb{
    background:var(--surface);border:1px solid var(--border);
    color:var(--text-dim);font-family:var(--font-display);
    font-size:0.8rem;font-weight:500;
    padding:7px 14px;border-radius:8px;
    cursor:pointer;transition:all 0.2s;text-decoration:none;
    display:inline-flex;align-items:center;gap:5px;
    white-space:nowrap;
}
.nb:hover{border-color:var(--accent-alt);color:var(--text);}
.nb-accent{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;}
.nb-accent:hover{opacity:0.9;}
.nb i{font-size:0.72rem;}

/* ===== DROPDOWN (dark-aware) ===== */
.dropdown-menu{
    background:var(--bg-card)!important;border:1px solid var(--border)!important;
    border-radius:12px!important;padding:4px!important;
    box-shadow:var(--shadow-lg)!important;
}
.dropdown-item{color:var(--text-dim)!important;border-radius:8px!important;font-size:0.85rem!important;padding:7px 12px!important;}
.dropdown-item:hover{background:var(--surface)!important;color:var(--text)!important;}

/* ===== FORM CONTROLS ===== */
.form-control,.form-select{background:var(--input-bg)!important;border-color:var(--border)!important;color:var(--text)!important;font-family:var(--font-display);}
.form-control:focus,.form-select:focus{border-color:var(--accent-alt)!important;box-shadow:0 0 0 2px rgba(2,132,199,0.12)!important;}
.form-label{font-size:0.85rem;font-weight:600;color:var(--text-dim);}
.input-group-text{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text-dim)!important;}
.form-check-input{background-color:var(--surface);border-color:var(--border);}
.form-check-input:checked{background-color:var(--accent-alt);border-color:var(--accent-alt);}

/* Buttons */
.btn-primary{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;font-weight:600;}
.btn-primary:hover{opacity:0.9;}
.btn-secondary{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text-dim)!important;}
.btn-outline-primary{border-color:var(--border)!important;color:var(--text-dim)!important;}
.btn-outline-primary:hover,.btn-check:checked+.btn-outline-primary{background:var(--accent-alt)!important;border-color:var(--accent-alt)!important;color:#fff!important;}
.btn-outline-secondary{border-color:var(--border)!important;color:var(--text-dim)!important;}
.btn-outline-secondary:hover{background:var(--surface)!important;color:var(--text)!important;}
.btn-outline-success{border-color:var(--accent)!important;color:var(--accent)!important;}
.btn-outline-success:hover{background:var(--accent)!important;color:#fff!important;}

/* Modal */
.modal-content{background:var(--modal-bg)!important;border:1px solid var(--border)!important;border-radius:16px!important;color:var(--text)!important;}
.modal-header{border-bottom:1px solid var(--border)!important;}
.modal-footer{border-top:1px solid var(--border)!important;}
.modal-title{font-family:var(--font-display);font-weight:700;}
[data-theme="dark"] .btn-close{filter:invert(1) brightness(0.7);}

/* Alerts */
.alert-info{background:rgba(2,132,199,0.08)!important;border-color:rgba(2,132,199,0.15)!important;color:var(--text-dim)!important;}
.alert-success{background:rgba(13,148,136,0.08)!important;border-color:rgba(13,148,136,0.15)!important;color:var(--text)!important;}
.text-danger{color:var(--danger)!important;}
.text-muted{color:var(--text-muted)!important;}

/* Scrollbar */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:5px;}

/* Monospace */
.font-monospace{font-family:var(--font-mono)!important;color:var(--code-color)!important;}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}