/* БюджетСвітлофор — design system (light / dark / custom via CSS variables on ) */ :root { --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --radius: 14px; --radius-sm: 10px; --radius-lg: 20px; --green: #22c55e; --yellow: #eab308; --red: #ef4444; --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark light; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: 15px; line-height: 1.55; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; transition: background-color var(--transition), color var(--transition); } .bg-mesh { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 10% -10%, rgba(var(--primary-rgb), 0.22), transparent 55%), radial-gradient(ellipse 60% 40% at 95% 10%, rgba(var(--primary-rgb), 0.12), transparent 50%), radial-gradient(ellipse 50% 30% at 50% 100%, rgba(var(--primary-rgb), 0.08), transparent 45%); } a { color: var(--primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--primary-hover); } .container { width: min(1080px, 100% - 2rem); margin: 0 auto; } /* ——— Header ——— */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-glass); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 0.75rem 1rem; padding: 0.65rem 0; flex-wrap: wrap; } .logo { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; } .logo:hover { text-decoration: none; color: var(--text); } .logo-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; overflow: hidden; background: transparent; } .logo-icon { display: block; width: 100%; height: 100%; object-fit: cover; } .nav { display: flex; gap: 0.15rem; flex: 1; flex-wrap: wrap; } .nav a { color: var(--muted); padding: 0.45rem 0.8rem; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; text-decoration: none; transition: background var(--transition), color var(--transition); } .nav a:hover, .nav a.active { color: var(--text); background: var(--surface2); } .header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .theme-switcher-wrap { display: flex; align-items: center; gap: 0.25rem; padding: 3px; background: var(--surface2); border-radius: 999px; border: 1px solid var(--border); } .theme-switcher-form, .guest-theme { display: flex; gap: 2px; } .theme-menu { position: relative; } .theme-menu-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: background var(--transition), color var(--transition); } .theme-menu-toggle:hover { background: var(--surface); color: var(--text); } .theme-menu-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; padding: 0.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 100; } .theme-menu-dropdown[hidden] { display: none; } .theme-menu-dropdown a { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--text); font-size: 0.9rem; font-weight: 500; text-decoration: none; } .theme-menu-dropdown a:hover { background: var(--surface2); text-decoration: none; } .theme-btn { width: 32px; height: 32px; border: none; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.95rem; line-height: 1; transition: background var(--transition), color var(--transition), transform 0.15s; } .theme-btn:hover { color: var(--text); background: var(--surface); } .theme-btn.is-active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.4); } .user-chip { display: flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; border-radius: 999px; text-decoration: none; color: inherit; border: 1px solid transparent; transition: background var(--transition), border-color var(--transition); } .user-chip:hover { background: var(--surface2); border-color: var(--border); text-decoration: none; } .user-chip.is-active { background: var(--surface2); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); } .user-avatar { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; } .user-name { color: var(--muted); font-size: 0.88rem; font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auth-top { padding: 0.75rem 0; border-bottom: 1px solid var(--border); background: var(--header-glass); backdrop-filter: blur(12px); } .auth-top-inner { display: flex; align-items: center; justify-content: space-between; } .main { padding: 1.75rem 0 3.5rem; } .site-footer { border-top: 1px solid var(--border); padding: 1.5rem 0 2rem; } .footer-inner p { margin: 0; color: var(--muted); font-size: 0.85rem; text-align: center; } /* ——— Typography ——— */ h1 { margin: 0 0 0.35rem; font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } h2 { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; } h3.section-title { margin: 1.5rem 0 0.75rem; font-size: 0.95rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .lead { margin: 0; color: var(--muted); font-size: 1rem; } .muted { color: var(--muted); } .small { font-size: 0.85rem; } .page-hero { margin-bottom: 1.75rem; } .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .page-hero-row { align-items: center; } .month-nav { display: flex; gap: 0.25rem; align-items: center; } /* ——— Cards ——— */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.35rem 1.4rem; margin-bottom: 1rem; box-shadow: var(--shadow); transition: border-color var(--transition), box-shadow var(--transition); } .card:hover { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); } .card-highlight { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--primary) 6%, var(--surface))); position: relative; overflow: hidden; } .card-highlight::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-hover)); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; } .card-header h2 { margin: 0; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .stat-big { font-size: clamp(1.75rem, 5vw, 2.35rem); font-weight: 800; letter-spacing: -0.03em; margin: 0.2rem 0; background: linear-gradient(135deg, var(--text), var(--muted)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-medium { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.25rem 0; } /* ——— Progress & traffic ——— */ .progress { height: 9px; background: var(--surface2); border-radius: 99px; overflow: hidden; margin: 0.85rem 0 0.5rem; } .progress-sm { height: 6px; margin: 0.4rem 0 0; } .progress-bar { height: 100%; border-radius: 99px; transition: width 0.45s ease; } .progress-green { background: linear-gradient(90deg, var(--green), #4ade80); } .progress-yellow { background: linear-gradient(90deg, var(--yellow), #facc15); } .progress-red { background: linear-gradient(90deg, var(--red), #f87171); } .progress-none { background: var(--muted); } .traffic { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); } .traffic-sm { width: 9px; height: 9px; } .traffic-green { background: var(--green); color: var(--green); } .traffic-yellow { background: var(--yellow); color: var(--yellow); } .traffic-red { background: var(--red); color: var(--red); } .traffic-none { background: var(--muted); color: var(--muted); } .status-label { font-size: 0.88rem; font-weight: 600; margin: 0; } .status-green { color: var(--green); } .status-yellow { color: var(--yellow); } .status-red { color: var(--red); } /* ——— Forms ——— */ .form { display: flex; flex-direction: column; gap: 1rem; } .form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.88rem; } .form label > span { color: var(--muted); font-weight: 500; } .form input:not([type="color"]):not([type="checkbox"]):not([type="radio"]), .form select { padding: 0.62rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.95rem; transition: border-color var(--transition), box-shadow var(--transition); } .form input:focus, .form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2); } .form-inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; } .form-inline label { min-width: 110px; } .flex-grow { flex: 1; min-width: 160px; } .hint { color: var(--muted); font-size: 0.78rem; } /* ——— Buttons ——— */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.58rem 1.1rem; border-radius: var(--radius-sm); border: none; font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform 0.15s, box-shadow var(--transition), background var(--transition); } .btn:active { transform: scale(0.98); } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.35); } .btn-primary:hover { box-shadow: 0 6px 22px rgba(var(--primary-rgb), 0.45); color: #fff; text-decoration: none; } .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); } .btn-ghost:hover { color: var(--text); background: var(--surface2); text-decoration: none; } .btn-sm { padding: 0.38rem 0.7rem; font-size: 0.85rem; } .btn-block { width: 100%; } .btn-danger-text { color: var(--red) !important; } /* ——— Alerts ——— */ .alert { padding: 0.8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.92rem; font-weight: 500; } .alert-success { background: var(--alert-success-bg); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); color: var(--alert-success-text); } .alert-error { background: var(--alert-error-bg); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); color: var(--alert-error-text); } /* ——— Auth ——— */ .auth-card { max-width: 420px; margin: 1.5rem auto 3rem; padding: 2rem 2rem 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .auth-card h1 { margin-bottom: 0.35rem; } .auth-link { text-align: center; margin-top: 1.35rem; color: var(--muted); font-size: 0.92rem; } .code-block { display: block; margin: 0.75rem 0 1rem; padding: 0.85rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: ui-monospace, monospace; font-size: 1rem; text-align: center; } .verify-command { margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--muted); } .login-wait-card { text-align: center; } .login-wait-spinner { width: 48px; height: 48px; margin: 0 auto 1.25rem; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: login-spin 0.9s linear infinite; } @keyframes login-spin { to { transform: rotate(360deg); } } .login-wait-meta { margin: 1.25rem 0; text-align: left; font-size: 0.92rem; } .login-wait-meta dt { color: var(--muted); margin-top: 0.5rem; } .login-wait-meta dd { margin: 0.15rem 0 0; } .card-inset { margin: 1rem 0 1.25rem; padding: 1rem 1.1rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); } .card-inset p { margin: 0.35rem 0; } .card-inset p:first-child { margin-top: 0; } .card-inset p:last-child { margin-bottom: 0; } .link { font-size: 0.9rem; font-weight: 500; } /* ——— Lists ——— */ .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.35rem; vertical-align: middle; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 15%, transparent); } .category-list { display: flex; flex-direction: column; gap: 1.1rem; } .category-row { padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .category-row:last-child { border-bottom: none; padding-bottom: 0; } .category-info { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; } .category-amounts { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.25rem; } .expense-list { list-style: none; margin: 0; padding: 0; } .expense-list li { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 0.5rem 0.75rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--border); transition: background var(--transition); } .expense-list li:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: var(--radius-sm); } .expense-list li:last-child { border-bottom: none; } .expense-amount { font-weight: 700; color: var(--expense); white-space: nowrap; font-variant-numeric: tabular-nums; } .inline-form { display: inline; margin: 0; } .budget-table { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.25rem; } .budget-row { display: grid; grid-template-columns: 1fr min(200px, 42%); gap: 1rem; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid var(--border); } .budget-row:last-child { border-bottom: none; } .budget-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .category-edit-list { list-style: none; margin: 0; padding: 0; } .category-edit-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); } .category-edit-form input[type="text"] { min-width: 140px; } .month-picker input { padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-family: inherit; } .quick-add { border-style: dashed; border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); } /* ——— Appearance page ——— */ .appearance-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 1.25rem; align-items: start; } .appearance-form-card, .appearance-preview-card { min-width: 0; } .appearance-form { min-width: 0; } .theme-mode-picker { border: none; margin: 0 0 1rem; padding: 0; } .theme-mode-picker legend { font-weight: 600; margin-bottom: 0.65rem; color: var(--muted); font-size: 0.88rem; } .mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; } .mode-card { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.85rem 0.5rem; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface2); transition: border-color var(--transition), box-shadow var(--transition); } .mode-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2); } .mode-card input { position: absolute; opacity: 0; pointer-events: none; } .mode-preview { width: 100%; height: 48px; border-radius: 8px; border: 1px solid var(--border); } .mode-preview-light { background: linear-gradient(180deg, #f4f6fb, #fff); } .mode-preview-dark { background: linear-gradient(180deg, #080d14, #101827); } .mode-preview-custom { background: linear-gradient(135deg, #5b8def, #a855f7, #f43f5e); } .mode-label { font-size: 0.85rem; font-weight: 600; } .custom-colors.is-hidden { display: none; } .color-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; max-width: 100%; } .color-field > span { font-size: 0.88rem; font-weight: 500; color: var(--muted); } .color-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem; } .color-input-wrap { display: flex; gap: 0.5rem; align-items: center; min-width: 0; max-width: 100%; } .color-input-wrap input[type="color"] { flex-shrink: 0; width: 44px; height: 44px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--bg); } .hex-mirror { flex: 1 1 0; min-width: 0; max-width: 100%; width: 100%; font-family: ui-monospace, monospace; font-size: 0.88rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); } .appearance-form > .color-field { max-width: 100%; } .appearance-form > .color-field .color-input-wrap { max-width: min(100%, 320px); } .preset-section-title { margin-top: 1.25rem; } .preset-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; } .preset-form { margin: 0; } .preset-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--text); font-family: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: border-color var(--transition), transform 0.15s; } .preset-chip:hover { border-color: var(--preset-accent); transform: translateY(-1px); } .preset-swatch { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--preset-accent), var(--preset-bg)); border: 2px solid var(--surface); } .form-actions { margin-top: 0.5rem; } .appearance-preview-card { position: sticky; top: 5.5rem; } .preview-shell { padding: 1rem; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); } .preview-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; } .preview-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); } .preview-title { font-weight: 700; font-size: 0.9rem; } .preview-stat strong { display: block; font-size: 1.35rem; margin: 0.15rem 0 0.5rem; } .preview-label { font-size: 0.78rem; color: var(--muted); } .preview-progress { height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden; } .preview-progress span { display: block; height: 100%; background: var(--primary); border-radius: 99px; } .preview-list { list-style: none; margin: 0.85rem 0; padding: 0; font-size: 0.85rem; } .preview-list li { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0; color: var(--muted); } .preview-list li span:last-child { color: var(--expense); font-weight: 600; } .preview-btn { width: 100%; } /* ——— Responsive ——— */ @media (max-width: 900px) { .appearance-layout { grid-template-columns: 1fr; } .appearance-preview-card { position: static; } .appearance-form > .color-field .color-input-wrap { max-width: 100%; } } /* ——— Telegram profile ——— */ .telegram-card h2 { margin-bottom: 0.75rem; } .telegram-status-ok { color: var(--green); font-weight: 600; margin: 0 0 0.5rem; } .telegram-steps { margin: 0.75rem 0 1rem; padding-left: 1.25rem; color: var(--muted); } .telegram-steps li { margin-bottom: 0.35rem; } .telegram-code { padding: 0.75rem 1rem; background: var(--surface2); border-radius: var(--radius-sm); margin: 0.75rem 0; font-size: 1.1rem; } .telegram-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } /* ——— Profile ——— */ .profile-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; margin-bottom: 1rem; } .profile-hero-main { display: flex; align-items: center; gap: 1rem; } .profile-avatar-lg { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.35); } .profile-name { margin: 0 0 0.2rem; font-size: 1.35rem; } .stat-big-inline { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; } .stat-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.25rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .stat-card-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.35rem; } .stat-card-value { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.35rem; } .stat-card-meta { margin: 0; font-size: 0.85rem; color: var(--muted); } .trend-up { color: var(--red); font-weight: 600; } .trend-down { color: var(--green); font-weight: 600; } .budget-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem 0; margin-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .traffic-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .traffic-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.65rem; border-radius: 999px; font-size: 0.82rem; font-weight: 500; background: var(--surface2); border: 1px solid var(--border); } .mini-category-list { list-style: none; margin: 0; padding: 0; } .mini-category-list li { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .mini-category-list li:last-child { border-bottom: none; } .mini-amount { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; } .stats-dl { display: grid; grid-template-columns: 1fr auto; gap: 0.65rem 1rem; margin: 0; } .stats-dl dt { color: var(--muted); font-size: 0.9rem; } .stats-dl dd { margin: 0; font-weight: 600; text-align: right; } .bar-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; min-height: 180px; padding-top: 0.5rem; } .bar-chart-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 0; } .bar-chart-bar-wrap { width: 100%; max-width: 48px; height: 120px; display: flex; align-items: flex-end; background: var(--surface2); border-radius: 8px 8px 4px 4px; overflow: hidden; } .bar-chart-bar { width: 100%; background: linear-gradient(180deg, var(--primary), var(--primary-hover)); border-radius: 6px 6px 0 0; min-height: 4px; transition: height 0.4s ease; } .bar-chart-value { font-size: 0.7rem; color: var(--muted); text-align: center; line-height: 1.2; word-break: break-word; } .bar-chart-label { font-size: 0.75rem; color: var(--muted); text-transform: capitalize; } .rank-list { list-style: none; margin: 0; padding: 0; } .rank-list li { display: grid; grid-template-columns: auto auto 1fr minmax(60px, 80px) auto; gap: 0.5rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--border); } .rank-list li:last-child { border-bottom: none; } .rank-num { width: 1.25rem; color: var(--muted); font-size: 0.85rem; font-weight: 700; } .rank-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-bar { height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden; } .rank-bar span { display: block; height: 100%; background: var(--primary); border-radius: 99px; } .rank-amount { font-weight: 700; font-size: 0.88rem; white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .user-name { display: none; } .rank-list li { grid-template-columns: auto auto 1fr auto; } .rank-bar { display: none; } .nav a { padding: 0.4rem 0.55rem; font-size: 0.82rem; } .expense-list li { grid-template-columns: auto 1fr auto; } .expense-date { grid-column: 2; font-size: 0.78rem; } .budget-row { grid-template-columns: 1fr; } .mode-cards { grid-template-columns: 1fr; } .header-inner { flex-direction: column; align-items: stretch; } .header-actions { margin-left: 0; justify-content: space-between; } }