/* app.css — dark theme for authenticated app screens (dashboard, settings) */
/* Loaded AFTER style.css to override old light-theme inline styles */

/* ─── APP NAV ─────────────────────────────────────── */
.app-nav {
    position: sticky; top: 0; z-index: 500;
    background: rgba(1,8,40,0.92);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.app-nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 32px;
    height: 60px; display: flex; align-items: center; gap: 40px;
}
.app-brand {
    font-family: 'Anton', sans-serif; font-size: 16px; letter-spacing: 0.08em;
    color: #EFF4FF; text-decoration: none; white-space: nowrap;
}
.app-links { display: flex; gap: 32px; flex: 1; }
.app-link {
    font-family: 'Anton', sans-serif; font-size: 12px; letter-spacing: 0.14em;
    color: rgba(239,244,255,0.5); text-decoration: none;
    transition: color 0.15s;
}
.app-link:hover, .app-link.active { color: #6FFF00; }
.btn-nav-logout {
    margin-left: auto; font-family: 'Anton', sans-serif; font-size: 11px;
    letter-spacing: 0.12em; padding: 7px 18px; cursor: pointer;
    background: transparent; border: 1px solid rgba(239,244,255,0.2);
    color: rgba(239,244,255,0.45); border-radius: 2px; transition: all 0.15s;
}
.btn-nav-logout:hover { border-color: #ef4444; color: #ef4444; }

/* ─── BODY / PAGE ─────────────────────────────────── */
body { background: #010828 !important; color: #EFF4FF !important; }

/* ─── DASHBOARD HEADER ────────────────────────────── */
.dashboard-header {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 28px 0 !important; margin-bottom: 40px;
}
.dashboard-welcome { color: #EFF4FF !important; font-family: 'Anton', sans-serif; font-size: 18px; letter-spacing: 0.04em; }

/* ─── CARDS ───────────────────────────────────────── */
.card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}
.card-title { color: rgba(239,244,255,0.45) !important; }
.card-value { color: #EFF4FF !important; }
.card-meta { color: rgba(239,244,255,0.35) !important; }
.progress-bar { background: rgba(255,255,255,0.08) !important; }
.progress-fill { background: #6FFF00 !important; }

/* ─── TABLES ──────────────────────────────────────── */
th { color: rgba(239,244,255,0.4) !important; }
td { color: rgba(239,244,255,0.75) !important; }
tr { border-color: rgba(255,255,255,0.05) !important; }

/* ─── TAB BAR ─────────────────────────────────────── */
.tab-btn { background: rgba(255,255,255,0.04) !important; color: rgba(239,244,255,0.4) !important; border-color: rgba(255,255,255,0.08) !important; }
.tab-btn.active { background: rgba(111,255,0,0.1) !important; color: #6FFF00 !important; border-color: #6FFF00 !important; }

/* ─── TOKEN BOX ───────────────────────────────────── */
.token-box { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; }
.token-label { color: rgba(239,244,255,0.35) !important; }

/* ─── SECTION TITLES ──────────────────────────────── */
.section-title { color: #EFF4FF !important; border-color: rgba(255,255,255,0.06) !important; font-family: 'Anton', sans-serif; }

/* ─── SETTINGS ────────────────────────────────────── */
.settings-header { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.06) !important; padding: 28px 0 !important; }
.settings-title { color: #EFF4FF !important; font-family: 'Anton', sans-serif; }
.settings-subtitle { color: rgba(239,244,255,0.4) !important; }
.section { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.07) !important; }
.form-group label { color: rgba(239,244,255,0.7) !important; }
.form-group input, .form-group textarea {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #EFF4FF !important;
}
.form-group input:focus, .form-group textarea:focus {
    border-color: #6FFF00 !important;
    box-shadow: 0 0 0 3px rgba(111,255,0,0.1) !important;
}
.help-text { color: rgba(239,244,255,0.35) !important; }
.help-text a { color: #6FFF00 !important; }
.back-link { color: #6FFF00 !important; }

/* ─── BUTTONS ─────────────────────────────────────── */
.btn-primary { background: #6FFF00 !important; color: #010828 !important; border: none !important; font-family: 'Anton', sans-serif; letter-spacing: 0.1em; }
.btn-primary:hover { opacity: 0.85 !important; background: #6FFF00 !important; }
.btn-primary:disabled { background: rgba(111,255,0,0.3) !important; color: rgba(1,8,40,0.5) !important; }
.btn-copy { background: rgba(255,255,255,0.08) !important; color: #EFF4FF !important; }
.btn-copy:hover { background: rgba(255,255,255,0.15) !important; }
.btn-copy.copied { background: #6FFF00 !important; color: #010828 !important; }
.copy-btn { background: rgba(255,255,255,0.08) !important; color: #EFF4FF !important; border: none; }
.copy-btn:hover { background: rgba(255,255,255,0.15) !important; }
.copy-btn.copied { background: #6FFF00 !important; color: #010828 !important; }

/* ─── STATUS / ERROR ──────────────────────────────── */
.error { background: rgba(239,68,68,0.15) !important; border-color: rgba(239,68,68,0.3) !important; color: #fca5a5 !important; }
.status-message.success { background: rgba(111,255,0,0.1) !important; border-color: rgba(111,255,0,0.3) !important; color: #6FFF00 !important; }
.status-message.error { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.3) !important; color: #fca5a5 !important; }
.success-message { background: rgba(111,255,0,0.1) !important; border-color: rgba(111,255,0,0.3) !important; color: #6FFF00 !important; }

/* ─── CONTENT CONTAINER ──────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ─── SIGNUP/LOGIN FORM ───────────────────────────── */
.form-container { background: rgba(255,255,255,0.05) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 60px rgba(0,0,0,0.4) !important; border-radius: 12px !important; }
.form-container h2 { color: #EFF4FF !important; font-family: 'Anton', sans-serif !important; letter-spacing: 0.04em; }
.form-group input { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #EFF4FF !important; }
.form-group input::placeholder { color: rgba(239,244,255,0.3) !important; }
.btn-signup, .btn-login { background: #6FFF00 !important; color: #010828 !important; font-family: 'Anton', sans-serif; letter-spacing: 0.1em; }
.btn-signup:hover, .btn-login:hover { opacity: 0.85 !important; background: #6FFF00 !important; }
.form-footer { color: rgba(239,244,255,0.5) !important; }
.form-footer a { color: #6FFF00 !important; }