:root {
    --primary-color: #1890ff;
    --secondary-color: #fa8c16;
    --bg-color: #f5f5f5;
    --text-color: #333333;
    --white: #ffffff;
    --border-radius: 8px;
}

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.el-button--primary {
    --el-button-bg-color: var(--primary-color);
    --el-button-border-color: var(--primary-color);
}

.el-button--danger {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
}

.el-card {
    border-radius: var(--border-radius) !important;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Layout */
.app-container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    background-color: #001529; /* Dark sidebar for contrast or white? User said "Sidebar nav". Usually dark or white. */
    /* User said "Business Blue" main tone. Let's use white sidebar with blue accents or dark. 
       Let's stick to Element Plus Menu default which is white, or dark. 
       I'll use white for a "clean" look or dark for "business". 
       "Main content area layout... sidebar collapsible".
       Let's go with white sidebar to match "concise and atmospheric".
    */
    background-color: #ffffff;
    border-right: 1px solid #e6e6e6;
    transition: width 0.3s;
    display: flex;
    flex-direction: column;
}

.sidebar.collapsed {
    width: 64px;
}

.main-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: var(--bg-color);
}

/* Mobile */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        z-index: 1000;
        height: 100%;
        transform: translateX(-100%);
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    .main-content {
        padding: 10px;
    }
    /* Touch targets */
    .el-button {
        min-height: 44px;
    }
    .el-input__inner {
        min-height: 44px;
    }
}

.stat-card {
    text-align: center;
    padding: 20px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 10px;
}

.income-text { color: #52c41a; }
.expense-text { color: #f5222d; } /* Red for expense usually, or orange as user said "auxiliary color orange" */
/* User said "Auxiliary color Vitality Orange". Maybe for expense or specific highlights. */
/* Usually Expense is Red/Orange, Income Green. */

.text-orange { color: var(--secondary-color); }

.entry-page {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.entry-card {
    width: 100%;
    max-width: 640px;
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    padding: 24px 28px 28px;
}

.entry-header {
    margin-bottom: 16px;
}

.entry-title-main {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
}

.entry-title-sub {
    font-size: 13px;
    color: #888;
    margin-top: 4px;
}

.entry-datetime {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.entry-submit {
    width: 100%;
    margin-top: 8px;
}

.amount-unit {
    margin-top: 4px;
    font-size: 12px;
    color: #999;
}

.amount-upper {
    margin-top: 4px;
    font-size: 13px;
    color: #333;
}

.preset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 12px 0 4px;
}

.preset-item {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 10px 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-item .preset-icon {
    font-size: 18px;
    margin-bottom: 4px;
    color: #1890ff;
}

.preset-item .preset-text {
    font-size: 12px;
    color: #333;
}

.preset-item.active {
    background: rgba(24, 144, 255, 0.12);
    box-shadow: 0 0 0 1px #1890ff inset;
}

.preset-item.active .preset-icon {
    color: #fa8c16;
}

.preset-item.active .preset-text {
    color: #1890ff;
}

@media (max-width: 768px) {
    .entry-card {
        max-width: 100%;
        border-radius: 12px;
        padding: 16px 14px 18px;
    }
}

.login-page-web {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 40%, #f5f5f5 40%, #f5f5f5 100%);
}

.login-inner {
    width: 100%;
    max-width: 420px;
    padding: 24px 16px 32px;
}

.login-header-web {
    text-align: center;
    margin-bottom: 24px;
}

.login-logo-circle {
    width: 72px;
    height: 72px;
    border-radius: 36px;
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 12px;
}

.login-logo-text {
    font-size: 32px;
    color: #1890ff;
    font-weight: 700;
}

.login-title-web {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.login-subtitle-web {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.login-card-web {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.login-card-body {
    padding-top: 8px;
}

@media (max-width: 480px) {
    .login-inner {
        max-width: 100%;
        padding: 16px 12px 24px;
    }
}