* { box-sizing: border-box; }
html, body { margin: 0; font-family: system-ui, sans-serif; background: #f6f7fa; color: #222; }
main { max-width: 720px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 16px 0 12px; }
h2 { font-size: 1.1rem; margin: 20px 0 8px; }
a { color: #0a6; text-decoration: none; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #0a6; color: #fff; }
.topbar .logo { color: #fff; font-weight: bold; }
.topbar nav { display: flex; gap: 12px; align-items: center; }
.topbar nav a, .topbar nav button.link { color: #fff; background: none; border: 0; cursor: pointer; font: inherit; }
.topbar form.inline { display: inline; }

.flash { padding: 10px; border-radius: 6px; margin: 8px 0; }
.flash.error { background: #fee; color: #933; }
.flash.info { background: #e6f2ff; color: #036; }
.banner.info { padding: 8px 12px; background: #fff3cd; border-radius: 6px; margin-bottom: 10px; }

.login-form { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 24px auto; }
.login-form label { display: flex; flex-direction: column; font-size: 0.9rem; }
.login-form input { font-size: 1.1rem; padding: 10px; border: 1px solid #bbb; border-radius: 6px; }
button.primary { background: #0a6; color: #fff; border: 0; padding: 12px; border-radius: 6px; font-size: 1.05rem; cursor: pointer; }

.sale-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sale-card { background: #fff; border-radius: 10px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.sale-card.just-saved { animation: flash-green 1s ease-in-out; }
@keyframes flash-green { 0% { background: #d1f7d5; } 100% { background: #fff; } }
.sale-card .head { display: flex; justify-content: space-between; align-items: baseline; }
.sale-card .amount { font-size: 1.5rem; font-weight: bold; }
.sale-card .date { color: #666; font-size: 0.9rem; }
.sale-card .client { margin: 4px 0 10px; color: #333; }
.sources { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sources .radio { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 20px; cursor: pointer; user-select: none; background: #fafafa; }
.sources .radio input { accent-color: #0a6; }
.sources .radio:has(input:checked) { background: #d1f7d5; border-color: #0a6; }
.sources.readonly .chip { padding: 8px 12px; border: 1px solid #ddd; border-radius: 20px; color: #888; }
.sources.readonly .chip.active { background: #d1f7d5; border-color: #0a6; color: #222; }
.saved-banner { margin-top: 8px; color: #0a6; font-size: 0.9rem; }

.kpi { display: flex; gap: 10px; margin: 10px 0; }
.kpi .card { flex: 1; background: #fff; padding: 12px; border-radius: 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.kpi .label { display: block; color: #666; font-size: 0.85rem; }
.kpi .value { display: block; font-size: 1.5rem; font-weight: bold; }

table.shops { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
table.shops th, table.shops td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #eee; }
table.shops tr.rate-red td { background: #fde2e2; }
table.shops tr.rate-orange td { background: #fff2d6; }
table.shops tr.rate-green td { background: #e5f7ea; }

.sources-chart { list-style: none; padding: 0; }
.sources-chart li { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.sources-chart .lbl { width: 120px; font-size: 0.9rem; }
.sources-chart .bar { background: #0a6; height: 14px; border-radius: 3px; }
.sources-chart .n { margin-left: 6px; color: #333; font-size: 0.9rem; }

.period-switch { display: flex; gap: 8px; margin-top: 16px; }
.period-switch button { padding: 8px 12px; border: 1px solid #0a6; background: #fff; border-radius: 6px; cursor: pointer; }

.admin-picker { margin-bottom: 16px; }
.admin-picker select { padding: 8px; border-radius: 6px; border: 1px solid #bbb; min-width: 220px; }