* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #1a1a2e;
    color: #eee;
    min-height: 100vh;
}
header {
    padding: 16px;
    background: #16213e;
    position: sticky;
    top: 0;
    z-index: 10;
}
h1 { font-size: 20px; margin-bottom: 12px; }
.period-selector { display: flex; gap: 8px; }
.period-selector button {
    flex: 1; padding: 8px; border: none; border-radius: 8px;
    background: #0f3460; color: #eee; font-size: 14px; cursor: pointer;
}
.period-selector button.active { background: #e94560; }
#dashboard { padding: 16px; }
.total {
    background: #16213e; border-radius: 12px; padding: 16px;
    margin-bottom: 16px; text-align: center;
}
.total .label { display: block; font-size: 12px; color: #888; margin-bottom: 4px; }
#total-expenses { font-size: 28px; font-weight: bold; color: #e94560; }
#categories { display: flex; flex-direction: column; gap: 8px; }
.category-row {
    display: flex; align-items: center; gap: 12px;
    background: #16213e; border-radius: 8px; padding: 12px;
}
.category-row .emoji { font-size: 24px; }
.category-row .info { flex: 1; }
.category-row .name { font-size: 14px; }
.category-row .amount { font-size: 16px; font-weight: bold; }
#transactions { padding: 16px; }
#transactions h2 { font-size: 16px; margin-bottom: 12px; }
.transaction-row {
    display: flex; align-items: center; gap: 12px;
    background: #16213e; border-radius: 8px; padding: 12px; margin-bottom: 8px;
}
.transaction-row .emoji { font-size: 20px; }
.transaction-row .info { flex: 1; }
.transaction-row .desc { font-size: 14px; }
.transaction-row .date { font-size: 12px; color: #888; }
.transaction-row .amount { font-size: 16px; font-weight: bold; }