/* ASKIPAINT CANVAS V2.0 - DW Entertainment • Developed by Keerthivardhan */
:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: 'Outfit', sans-serif;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-gradient: linear-gradient(135deg, #2563eb, #7c3aed);
    --secondary-gradient: linear-gradient(135deg, #3b82f6, #06b6d4);
    --bg-main: #e2e8f0;
    --card-bg: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --border-color: #cbd5e1;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --success: #10b981;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    min-height: 100%; font-family: var(--font-primary); background: var(--bg-main);
    color: var(--text-primary); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

/* LANDING GATEWAY */
.landing-gateway {
    min-height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center;
    position: relative; background: radial-gradient(circle at 20% 20%, #1e1b4b 0%, #0f172a 50%, #020617 100%);
    padding: 24px; overflow: hidden; z-index: 10;
}
.landing-background-glow {
    position: absolute; width: 550px; height: 550px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(59, 130, 246, 0.12) 40%, transparent 70%);
    filter: blur(60px); pointer-events: none; animation: floatGlow 8s ease-in-out infinite alternate;
}
@keyframes floatGlow {
    0% { transform: translate(-10%, -10%) scale(0.9); }
    100% { transform: translate(10%, 10%) scale(1.1); }
}
.landing-card {
    background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 25px 60px -15px rgba(0,0,0,0.7), 0 0 30px rgba(59,130,246,0.15);
    border-radius: 24px; padding: 44px 38px; width: 100%; max-width: 480px; text-align: center;
    position: relative; z-index: 20; transition: all 0.3s ease; animation: cardAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cardAppear {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.landing-logo-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; position: relative; }
.landing-logo { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(59, 130, 246, 0.4)); margin-bottom: 12px; }
.landing-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(147, 51, 234, 0.25));
    border: 1px solid rgba(99, 102, 241, 0.4); color: #93c5fd; font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; padding: 4px 12px; border-radius: 9999px; text-transform: uppercase;
}
.landing-title {
    font-family: var(--font-heading); font-size: 32px; font-weight: 800; color: #ffffff;
    letter-spacing: -0.5px; margin-bottom: 8px; background: linear-gradient(135deg, #ffffff 40%, #93c5fd 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.landing-tagline { font-size: 14px; color: #94a3b8; line-height: 1.5; margin-bottom: 32px; }
.landing-actions { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.landing-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: 15px 24px; font-family: var(--font-heading); font-size: 16px; font-weight: 700;
    border-radius: 14px; cursor: pointer; border: none; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.landing-btn .btn-icon { font-size: 18px; }
.landing-btn-primary {
    background: var(--primary-gradient); color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.landing-btn-primary:hover {
    transform: translateY(-2px); box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    filter: brightness(1.1);
}
.landing-btn-secondary {
    background: rgba(255, 255, 255, 0.07); color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px);
}
.landing-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14); border-color: rgba(99, 102, 241, 0.6);
    transform: translateY(-2px); color: #ffffff; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}
.landing-auth-form { animation: fadeIn 0.3s ease; text-align: left; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.auth-tabs { display: flex; background: rgba(0, 0, 0, 0.3); padding: 4px; border-radius: 12px; margin-bottom: 22px; border: 1px solid rgba(255, 255, 255, 0.08); }
.auth-tab-btn { flex: 1; padding: 10px; background: transparent; border: none; color: #94a3b8; font-weight: 600; font-size: 14px; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.auth-tab-btn.active { background: #2563eb; color: #ffffff; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
.auth-input-group { margin-bottom: 16px; }
.auth-input-group label { display: block; font-size: 13px; font-weight: 600; color: #cbd5e1; margin-bottom: 6px; }
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon .field-icon { position: absolute; left: 14px; font-size: 16px; pointer-events: none; opacity: 0.75; }
.input-with-icon input {
    width: 100%; padding: 12px 42px; background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; color: #ffffff;
    font-size: 14px; outline: none; transition: all 0.2s;
}
.input-with-icon input:focus { border-color: #3b82f6; background: rgba(15, 23, 42, 0.85); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); }
.toggle-password-field { position: absolute; right: 12px; background: none; border: none; cursor: pointer; font-size: 16px; opacity: 0.7; transition: 0.2s; }
.toggle-password-field:hover { opacity: 1; transform: scale(1.1); }
.auth-status-msg { min-height: 22px; font-size: 13px; margin-bottom: 14px; text-align: center; font-weight: 500; }
.auth-status-msg.error { color: #f87171; }
.auth-status-msg.success { color: #4ade80; }
.auth-submit-btn { margin-top: 6px; margin-bottom: 10px; }
.auth-back-link { background: none; border: none; color: #94a3b8; font-size: 13px; cursor: pointer; display: block; margin: 8px auto 0; transition: 0.2s; }
.auth-back-link:hover { color: #ffffff; }
.landing-footer { margin-top: 26px; font-size: 12px; color: #64748b; }

/* HEADER & USER PILL */
#header {
    background: linear-gradient(135deg, #1e40af, #2563eb); color: white;
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
#logo { display: flex; align-items: center; gap: 12px; }
.header-mini-logo { width: 32px; height: 32px; object-fit: contain; }
#logo h1 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; }
.header-right { display: flex; align-items: center; gap: 16px; }
.user-pill-badge {
    background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 6px 14px; border-radius: 9999px; font-size: 13px; font-weight: 600; color: #ffffff;
    cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s;
}
.user-pill-badge:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.user-pill-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.user-pill-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#version h2 { font-size: 14px; opacity: 0.85; font-weight: 500; }

/* MENU & TOOLBARS */
#menuBar {
    background: #ffffff; padding: 8px 16px; display: flex; gap: 8px;
    border-bottom: 1px solid #cbd5e1; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    flex-wrap: wrap;
}
.menuButton {
    border: 1px solid transparent; background: #f1f5f9; padding: 8px 16px;
    border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-secondary); transition: 0.2s;
}
.menuButton:hover { background: #2563eb; color: white; }
#toolBar {
    background: #ffffff; display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap;
}
#toolBar button {
    border: 1px solid #cbd5e1; background: #f8fafc; padding: 8px 14px;
    border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary); transition: 0.2s;
}
#toolBar button:hover { background: #2563eb; color: white; border-color: #2563eb; }
#toolBar button.active { background: #2563eb; color: white; border-color: #2563eb; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3); }

/* COLOR & HOME SCREEN */
#colorBar { background: #f8fafc; display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
#colorBar label { font-weight: 600; font-size: 13px; color: var(--text-secondary); }
#colorPicker { width: 42px; height: 34px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; }
#homeScreen { text-align: center; padding: 60px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
#homeScreen h1 { font-family: var(--font-heading); font-size: 38px; font-weight: 800; margin-bottom: 12px; color: #1e40af; }
#homeScreen p { font-size: 16px; color: #64748b; margin-bottom: 30px; }
#homeScreen button {
    border: none; background: #2563eb; color: white; padding: 12px 20px; margin: 6px;
    border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}
#homeScreen button:hover { background: #1d4ed8; transform: translateY(-1px); }

/* CANVAS WORKSPACE & STATUS BAR */
#workspace { background: #cbd5e1; width: 100%; min-height: 650px; display: flex; justify-content: center; align-items: center; padding: 30px; overflow: auto; }
#canvasWrapper { position: relative; display: inline-block; width: min(100%, 1000px); max-width: 100%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); border-radius: 4px; background: #ffffff; }
#paintCanvas { background: white; cursor: crosshair; display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 1000 / 650; touch-action: none; }
#traceOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#statusBar { background: #f1f5f9; color: #475569; padding: 8px 18px; border-top: 1px solid #cbd5e1; font-size: 13px; font-weight: 500; }

/* MODALS & OVERLAYS */
.overlay {
    display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000;
    justify-content: center; align-items: center; padding: 20px;
}
.overlay.show { display: flex; }
#aboutWindow, #settingsPanel { background: white; width: 480px; max-width: 95%; padding: 32px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.25); text-align: center; }
#aboutWindow h2, #settingsPanel h2 { font-family: var(--font-heading); color: #1e40af; margin-bottom: 14px; }
#aboutWindow p { color: #64748b; margin-bottom: 12px; line-height: 1.5; }
#aboutWindow ul { list-style: none; margin: 16px 0; }
#aboutWindow li { background: #f1f5f9; margin: 6px 0; padding: 10px; border-radius: 8px; font-weight: 500; color: #0f172a; }
#aboutWindow button, #settingsPanel button {
    background: #2563eb; color: white; border: none; padding: 10px 22px;
    border-radius: 8px; font-weight: 600; cursor: pointer; margin: 6px 4px; transition: 0.2s;
}
#aboutWindow button:hover, #settingsPanel button:hover { background: #1d4ed8; }

/* ACCOUNT MODAL WINDOW */
.account-modal-window {
    background: #ffffff; width: 820px; max-width: 95%; max-height: 90vh; border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; overflow: hidden; animation: modalScale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.modal-title-wrap { display: flex; align-items: center; gap: 10px; }
.modal-header-icon { font-size: 22px; }
.modal-title-wrap h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: #0f172a; }
.modal-close-icon { background: none; border: none; font-size: 18px; cursor: pointer; color: #64748b; padding: 6px; border-radius: 6px; transition: 0.2s; }
.modal-close-icon:hover { color: #0f172a; background: #e2e8f0; }
.account-profile-card { display: flex; align-items: center; gap: 20px; padding: 20px 26px; background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 100%); border-bottom: 1px solid #e2e8f0; }
.account-avatar-wrapper { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.account-avatar {
    width: 64px; height: 64px; border-radius: 18px; background: var(--primary-gradient);
    color: white; display: flex; align-items: center; justify-content: center; font-size: 28px;
    font-weight: 700; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3); flex-shrink: 0; overflow: hidden;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.account-details { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.account-field-row { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.field-tag { font-weight: 600; color: #475569; min-width: 110px; }
.field-value {
    font-weight: 700; color: #0f172a; font-family: monospace; font-size: 14px;
    background: rgba(255, 255, 255, 0.85); padding: 4px 10px; border-radius: 6px; border: 1px solid #cbd5e1;
}
.password-display-wrapper { display: flex; align-items: center; gap: 8px; }
.password-text.masked { letter-spacing: 2px; }
.field-value-sub { font-size: 13px; color: #64748b; }
.action-btn-mini {
    background: #ffffff; border: 1px solid #cbd5e1; padding: 4px 10px;
    border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; color: #2563eb; transition: 0.2s;
}
.action-btn-mini:hover { background: #2563eb; color: #ffffff; border-color: #2563eb; }

/* ACCOUNT TABS & GALLERY */
.account-tabs-nav { display: flex; border-bottom: 1px solid #e2e8f0; background: #ffffff; padding: 0 26px; }
.account-tab {
    padding: 14px 20px; background: none; border: none; border-bottom: 3px solid transparent;
    font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: #64748b; cursor: pointer; transition: 0.2s;
}
.account-tab:hover { color: #2563eb; }
.account-tab.active { color: #2563eb; border-bottom-color: #2563eb; }
.account-tab-content { display: none; padding: 20px 26px; overflow-y: auto; max-height: 420px; min-height: 240px; }
.account-tab-content.active { display: block; }
.tab-toolbar { margin-bottom: 16px; display: flex; justify-content: flex-end; }
.action-btn-primary {
    background: #2563eb; color: #ffffff; border: none; padding: 9px 18px;
    border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.action-btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.item-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: 0.2s; }
.item-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); border-color: #cbd5e1; }
.item-thumb-container { height: 120px; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid #e2e8f0; }
.item-thumb-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.item-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.item-title { font-size: 14px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-date { font-size: 12px; color: #64748b; }
.item-actions { display: flex; gap: 6px; margin-top: auto; }
.item-btn {
    flex: 1; padding: 6px 8px; font-size: 12px; font-weight: 600; border-radius: 6px;
    border: 1px solid #cbd5e1; background: #ffffff; cursor: pointer; transition: 0.2s; text-align: center;
}
.item-btn:hover { background: #2563eb; color: #ffffff; border-color: #2563eb; }
.item-btn-danger:hover { background: var(--danger); color: #ffffff; border-color: var(--danger); }
.empty-state-card { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: #64748b; }
.empty-state-icon { font-size: 42px; margin-bottom: 10px; opacity: 0.7; }
.empty-state-card h3 { font-size: 16px; font-weight: 700; color: #334155; margin-bottom: 4px; }
.empty-state-card p { font-size: 13px; }

/* MODAL FOOTER & DROPDOWNS */
.account-modal-footer { padding: 16px 26px; background: #f8fafc; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
.logout-button { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; padding: 9px 18px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; transition: 0.2s; }
.logout-button:hover { background: #dc2626; color: #ffffff; border-color: #dc2626; }
.secondary-button { background: #e2e8f0; color: #334155; border: none; padding: 9px 20px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.2s; }
.secondary-button:hover { background: #cbd5e1; }
.dropdownMenu {
    display: none; position: absolute; top: 50px; background: white; width: 200px;
    border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); padding: 6px; z-index: 50;
}
.dropdownMenu.show { display: block; }
..dropdownMenu button { display: block; width: 100%; border: none; background: transparent; text-align: left; padding: 10px 14px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; }
.dropdownMenu button:hover { background: #2563eb; color: white; }

@media (max-width: 768px) {
    #header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
    }
    .header-right {
        width: 100%;
        justify-content: space-between;
    }
    #logo h1 {
        font-size: 18px;
    }
    .user-pill-email {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #workspace {
        min-height: auto;
        padding: 12px;
    }
    #toolBar {
        gap: 6px;
        padding: 10px;
    }
    #toolBar button {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        font-size: 12px;
        padding: 8px 10px;
    }
    .menuButton {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }
    #colorBar {
        gap: 8px;
        padding: 8px 12px;
    }
    .landing-card {
        padding: 28px 20px;
    }
    .landing-title {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .landing-actions {
        gap: 10px;
    }
    .menuButton,
    #toolBar button {
        flex-basis: 100%;
    }
    .header-right {
        flex-wrap: wrap;
        gap: 8px;
    }
    .user-pill-badge {
        width: 100%;
        justify-content: center;
    }
    #version h2 {
        font-size: 12px;
    }
}

/* DARK MODE */
body.dark-mode { background: #0f172a; color: #f8fafc; }
body.dark-mode #header { background: #091224; }
body.dark-mode #menuBar, body.dark-mode #toolBar, body.dark-mode #colorBar, body.dark-mode #statusBar { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .menuButton, body.dark-mode #toolBar button { background: #334155; color: #f8fafc; border-color: #475569; }
body.dark-mode #homeScreen { background: #1e293b; border-color: #334155; }
body.dark-mode #homeScreen h1 { color: #60a5fa; }
body.dark-mode #homeScreen p, body.dark-mode #statusBar { color: #94a3b8; }
body.dark-mode #workspace { background: #0b0f19; }
body.dark-mode #aboutWindow, body.dark-mode #settingsPanel, body.dark-mode .account-modal-window, body.dark-mode .dropdownMenu { background: #1e293b; color: #f8fafc; border-color: #334155; }
body.dark-mode #aboutWindow li { background: #334155; color: #f8fafc; }
body.dark-mode .modal-header, body.dark-mode .account-modal-footer, body.dark-mode .account-tabs-nav { background: #0f172a; border-color: #334155; }
body.dark-mode .modal-title-wrap h2, body.dark-mode .item-title { color: #ffffff; }
body.dark-mode .account-profile-card { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-color: #334155; }
body.dark-mode .field-tag { color: #94a3b8; }
body.dark-mode .field-value { background: #0f172a; color: #60a5fa; border-color: #334155; }
body.dark-mode .field-value-sub { color: #94a3b8; }
body.dark-mode .account-avatar { border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(37, 99, 235, 0.4); }
body.dark-mode .item-card { background: #0f172a; border-color: #334155; }
body.dark-mode .item-thumb-container { background: #1e293b; border-color: #334155; }
body.dark-mode .item-btn { background: #334155; color: #e2e8f0; border-color: #475569; }
body.dark-mode .item-btn:hover { background: #2563eb; color: #ffffff; border-color: #2563eb; }
body.dark-mode .action-btn-mini { background: #2563eb; color: #ffffff; border: 1px solid #3b82f6; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); }
body.dark-mode .action-btn-mini:hover { background: #1d4ed8; color: #ffffff; border-color: #60a5fa; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.6); }
body.dark-mode .action-btn-mini:active { transform: translateY(0); }
body.dark-mode .dropdownMenu button { color: #f8fafc; }