body { font-family: 'Inter', sans-serif; background-color: #0f172a; color: #f8fafc; -webkit-font-smoothing: antialiased; }
.bento-card { background: #1e293b; border-radius: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); padding: 1.25rem; border: 1px solid rgba(255,255,255,0.05); }
.btn-vibrant { background: #4f46e5; color: white; border-radius: 1rem; font-weight: 800; transition: all 0.2s; }
.btn-vibrant:active { transform: translateY(2px); background: #4338ca; }
.market-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.market-table th { text-align: left; padding: 0.5rem; font-size: 0.55rem; font-weight: 900; color: #64748b; text-transform: uppercase; border-bottom: 2px solid #334155; white-space: nowrap; }
.market-table td { padding: 0.75rem 0.5rem; font-size: 0.75rem; border-bottom: 1px solid #334155; color: #cbd5e1; }
.animate-fade { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.no-scrollbar::-webkit-scrollbar { display: none; }
canvas { max-height: 200px !important; }
.hidden { display: none; }
.form-slide-in {
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Security Lock Screen Styles */
#lockScreen {
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
}

.num-btn {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    font-size: 1.5rem;
    font-weight: 800;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.num-btn:active {
    background: rgba(79, 70, 229, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
    transform: scale(0.9);
}

.pin-dot-active {
    background-color: #6366f1 !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
    transform: scale(1.2);
}

.pin-error {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
@keyframes slideIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.toggle-btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-active-buy { background: #10b981 !important; color: white !important; }
.toggle-active-sell { background: #f43f5e !important; color: white !important; }
.active-tab-sjc { background: #4f46e5 !important; color: white !important; border-color: #4f46e5 !important; }
.active-tab-nhan { background: #f59e0b !important; color: white !important; border-color: #f59e0b !important; }
.active-tab-doji { background: #f43f5e !important; color: white !important; border-color: #f43f5e !important; }
.active-tab-pnj { background: #10b981 !important; color: white !important; border-color: #10b981 !important; }
input, select { background-color: #334155 !important; border-color: #475569 !important; color: white !important; }
::placeholder { color: #94a3b8 !important; }

.filter-chip { 
    padding: 0.375rem 1rem;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 9999px;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid #334155;
    background-color: #1e293b;
    color: #94a3b8;
    cursor: pointer;
}
.filter-chip.active {
    background-color: #4f46e5;
    border-color: #6366f1;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(49, 46, 129, 0.2);
}

.pagination-btn {
    padding: 0.5rem;
    background-color: #1e293b;
    border-radius: 0.5rem;
    color: #94a3b8;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}
.pagination-btn:hover:not(:disabled) {
    background-color: #334155;
    color: white;
}
.pagination-btn:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}