* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, 'IRANSans', 'Vazirmatn', Segoe UI, Roboto, Arial, sans-serif; background: #0f1115; color: #e9e9ea; }
.topbar { position: sticky; top: 0; z-index: 10; background: #0f1115; border-bottom: 1px solid #222; padding: env(safe-area-inset-top) 16px 12px; }
.topbar .title { font-weight: 800; font-size: 20px; }
.topbar .sub { font-size: 12px; opacity: .7; margin-top: 4px; }
.topbar .today { font-size: 13px; opacity: .9; margin-top: 6px; }
.container { padding: 16px; display: grid; gap: 16px; max-width: 900px; margin: 0 auto; }
.card { background: #131720; border: 1px solid #21273a; border-radius: 14px; padding: 14px; }
h2 { margin: 0 0 12px 0; font-size: 16px; }
.row { display: grid; gap: 6px; margin-bottom: 10px; }
.row label { font-size: 13px; opacity: .9; }
input, select, textarea, button { font: inherit; }
input, select, textarea { background: #0f1423; color: #e9e9ea; border: 1px solid #2a3150; border-radius: 10px; padding: 10px 12px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: #4f6bdc; box-shadow: 0 0 0 3px rgba(79,107,220,.2); }
textarea { resize: vertical; }
.actions { display: flex; gap: 8px; margin-top: 6px; }
button { background: #20263a; color: #e9e9ea; border: 1px solid #2a3150; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
button.primary { background: #4f6bdc; border-color: #4f6bdc; color: white; }
button.primary-outline { border-color: #4f6bdc; color: #cfd7ff; background: transparent; }
button.danger { background: #3a2020; border-color: #553333; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.table-wrap { overflow: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid #22283d; padding: 10px 8px; font-size: 14px; vertical-align: top; }
.table th { text-align: right; opacity: .8; font-weight: 600; }
.table td .muted { opacity: .7; font-size: 12px; }
.badge { display: inline-block; border: 1px solid #2a3150; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat { background: #0f1423; border: 1px solid #2a3150; border-radius: 12px; padding: 10px; }
.stat-label { font-size: 12px; opacity: .75; }
.stat-value { font-size: 18px; font-weight: 800; margin-top: 4px; }
.daily-totals { display: grid; gap: 8px; }
.total-row { display: flex; justify-content: space-between; background: #0f1423; border: 1px solid #2a3150; border-radius: 12px; padding: 10px; }
.footer { padding: 20px 16px calc(env(safe-area-inset-bottom) + 20px); text-align: center; opacity: .8; }
.share { display: inline-block; border: 1px solid #444; padding: 0 6px; border-radius: 6px; }
.empty { opacity: .6; text-align: center; padding: 16px 8px; }
small { opacity: .7; }