* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui, sans-serif; background: #f9fafb; color: #1a1a1a; padding-bottom: 80px; }

.btn-primary { background:#dc2626; color:white; border:none; padding:0.75rem 1.5rem; border-radius:2rem; font-weight:600; cursor:pointer; }
.btn-primary:hover { background:#b91c1c; }
.btn-sm { padding:0.5rem 1.25rem; font-size:0.875rem; }
.btn-full { width:100%; }

.btn-secondary { background:#f3f4f6; color:#1a1a1a; border:2px solid #e5e7eb; padding:0.5rem 1.25rem; border-radius:2rem; font-weight:600; cursor:pointer; }
.btn-secondary:hover { background:#e5e7eb; }

.btn-link { background:none; border:none; color:#dc2626; font-weight:600; cursor:pointer; font-size:0.875rem; }
.btn-logout { background:none; border:none; font-size:1.5rem; cursor:pointer; }

.card { background:white; border-radius:1.5rem; padding:1.25rem; margin-bottom:1rem; box-shadow:0 4px 6px rgba(0,0,0,0.05); border:1px solid #e5e7eb; }
.project-card { cursor:pointer; }
.project-card:hover { box-shadow:0 8px 20px rgba(0,0,0,0.1); }

.project-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; }
.project-status { font-size:0.7rem; padding:0.2rem 0.75rem; border-radius:1rem; background:#f3f4f6; }
.project-status.active { background:#d1fae5; color:#065f46; }
.project-status.completed { background:#dbeafe; color:#1e40af; }
.project-meta { color:#6b7280; font-size:0.85rem; }
.project-footer { display:flex; justify-content:space-between; font-size:0.85rem; color:#6b7280; border-top:1px solid #e5e7eb; padding-top:0.75rem; }
.project-profit { font-weight:700; color:#dc2626; }

.note-card { background:white; border-radius:1.5rem; padding:1.25rem; margin-bottom:1rem; box-shadow:0 4px 6px rgba(0,0,0,0.05); border-left:4px solid #dc2626; }
.note-title { font-weight:600; font-size:1.05rem; margin-bottom:0.5rem; }
.note-content { color:#4b5563; margin-bottom:0.5rem; white-space:pre-wrap; }
.note-meta { font-size:0.8rem; color:#9ca3af; }

.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:white; display:flex; justify-content:space-around; padding:0.5rem 0; border-top:1px solid #e5e7eb; }
.nav-item { background:none; border:none; display:flex; flex-direction:column; align-items:center; font-size:0.7rem; color:#9ca3af; cursor:pointer; padding:0.25rem 1rem; }
.nav-item .icon { font-size:1.5rem; }
.nav-item.active { color:#dc2626; }

.app-header { background:white; padding:1rem 1.25rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:100; }
.section { padding:1rem; max-width:768px; margin:0 auto; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }

.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.modal-content { background:white; padding:2rem; border-radius:1.5rem; max-width:560px; width:100%; max-height:90vh; overflow-y:auto; position:relative; }
.modal-close { position:sticky; top:0; float:right; font-size:2rem; cursor:pointer; color:#9ca3af; background:white; padding:0 0.25rem; line-height:1; }
.modal-large { max-width:700px; }

.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; margin-bottom:0.4rem; font-weight:600; font-size:0.9rem; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:0.75rem 1rem; border:2px solid #e5e7eb; border-radius:1rem; font-size:1rem; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:#dc2626; }
.form-group textarea { min-height:80px; resize:vertical; }

.login-card { background:white; border-radius:1.5rem; padding:2.5rem; max-width:420px; width:100%; margin:2rem auto; box-shadow:0 10px 40px rgba(0,0,0,0.1); text-align:center; }
.login-card h1 { font-size:2rem; margin-bottom:0.5rem; }
.login-card .subtitle { color:#6b7280; margin-bottom:2rem; }
.help-text { font-size:0.85rem; color:#6b7280; margin-top:1rem; }

.spinner { width:40px; height:40px; margin:1rem auto; border:4px solid #e5e7eb; border-top:4px solid #dc2626; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:white; border-radius:1rem; padding:1rem; text-align:center; box-shadow:0 4px 6px rgba(0,0,0,0.05); border:1px solid #e5e7eb; }
.stat-label { display:block; font-size:0.8rem; color:#6b7280; }
.stat-value { font-size:1.25rem; font-weight:700; }

.chart-container { background:white; border-radius:1.5rem; padding:1.5rem; box-shadow:0 4px 6px rgba(0,0,0,0.05); border:1px solid #e5e7eb; }
.positive { color:#dc2626; }

.empty-state { text-align:center; padding:3rem 1rem; color:#6b7280; }
.loading-spinner { text-align:center; padding:2rem; color:#6b7280; }

.detail-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1rem 0; }
.detail-stat { background:#f9fafb; border-radius:1rem; padding:1rem; text-align:center; }
.detail-items { margin:1rem 0; }
.item-row { display:flex; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid #f3f4f6; }
.detail-actions { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:1rem; }

@media (min-width:768px) {
    .bottom-nav { max-width:480px; left:50%; transform:translateX(-50%); border-radius:2rem 2rem 0 0; }
    .section { padding:1.5rem 2rem; }
}