/* SalesPedal — shared styles. Light theme: indigo primary, orange for money. */
:root{
  --ground:#F6F7FB; --card:#FFFFFF; --ink:#0E1330; --muted:#4B5470; --line:#E3E6EF; --line2:#EEF0F5;
  --brand:#3A2BD8; --brand-dk:#2A1EB0; --brand-soft:#ECEAFE; --brand-mid:#8E86F0; --brand-pale:#C9C5F7;
  --orange:#FF7A2F; --money:#9A3A08; --money-soft:#FFF1E8;
  --good:#0F7A4A; --good-soft:#E3F5EC; --bad:#B42318; --bad-soft:#FDECEC; --grey-soft:#ECEEF5;
  --display:'Sora',Inter,system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
a{color:var(--brand)} a:hover{color:var(--brand-dk)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0}
.num{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid #B9B2FA;outline-offset:2px}

.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em}
.logo b{color:var(--brand);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;background:var(--brand);color:#fff;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--brand-dk);color:#fff}
.btn.ghost{background:#fff;border-color:#CDD2E0;color:var(--ink)} .btn.ghost:hover{border-color:var(--brand)}
.btn.dark{background:var(--ink)} .btn.small{min-height:40px;padding:0 16px;font-size:14px}
.btn.link{background:none;color:var(--brand);padding:0;min-height:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.muted{color:var(--muted)} .small{font-size:13px}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.p-good{background:var(--good-soft);color:#0F6B41} .p-money{background:var(--money-soft);color:var(--money)}
.p-grey{background:var(--grey-soft);color:#3A4160} .p-bad{background:var(--bad-soft);color:var(--bad)} .p-brand{background:var(--brand-soft);color:var(--brand-dk)}
label{font-weight:600;font-size:14px}
input[type=text],input[type=email],input[type=number],input[type=date],select,textarea{min-height:48px;border:1px solid #CDD2E0;border-radius:10px;padding:0 14px;background:#fff;width:100%}
textarea{padding:12px 14px;min-height:260px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.field{display:flex;flex-direction:column;gap:6px}
.msg{padding:12px 16px;border-radius:12px;font-weight:600;font-size:14px}
.msg.err{background:var(--bad-soft);color:var(--bad)} .msg.ok{background:var(--good-soft);color:#0F6B41}

/* app header */
.top{background:#fff;border-bottom:1px solid var(--line)}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--ground);border:1px solid var(--line);font-size:13px;font-weight:600}
.sync{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--good)}
.sync i{width:8px;height:8px;border-radius:50%;background:#12A15F}
.sync.warn{color:var(--money)} .sync.warn i{background:var(--orange)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:700}
.tabs{display:flex;gap:4px;overflow-x:auto}
.tabs button{min-height:48px;padding:0 18px;background:none;border:none;border-bottom:3px solid transparent;color:var(--muted);font-weight:600;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected=true]{border-bottom-color:var(--brand);color:var(--ink)}
.periods{display:flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;flex-wrap:wrap}
.periods button{min-height:40px;padding:0 15px;border:none;border-radius:999px;background:none;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer}
.periods button[aria-pressed=true]{background:var(--ink);color:#fff}

main.app{padding-top:26px;padding-bottom:56px;display:flex;flex-direction:column;gap:22px}
.headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:4px}
.kpi .l{font-size:13px;font-weight:600;color:var(--muted)}
.kpi .v{font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .d{font-size:13px;font-weight:600;color:var(--muted)}
.kpi.money{background:var(--money-soft)} .kpi.money .l,.kpi.money .v,.kpi.money .d{color:var(--money)}
.up{color:var(--good)!important} .down{color:var(--bad)!important}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:20px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sec-h h2{font-size:19px}
.bar-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.bar-row .t{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.track{height:12px;border-radius:999px;background:var(--grey-soft);overflow:hidden}
.track>span{display:block;height:100%;border-radius:999px}
.months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:210px}
.months .m{display:flex;flex-direction:column;align-items:center;gap:6px}
.months .bars{display:flex;gap:3px;align-items:flex-end;height:180px}
.months .bars span{width:10px;border-radius:5px 5px 0 0}
.months .lbl{font-size:11px;color:var(--muted);font-weight:600}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted)} .legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th{text-align:left;color:var(--muted);font-size:12px;letter-spacing:.04em;font-weight:600;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
th.r,td.r{text-align:right}
tr.click{cursor:pointer} tr.click:hover td{background:#FAFAFE}
.climb{display:flex;align-items:center;gap:8px;min-width:160px} .climb .track{flex:1;height:8px}
.rank1{color:#C2410C;font-weight:700}
.empty{padding:30px;text-align:center;color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters input,.filters select{width:auto;min-width:220px;min-height:44px}

.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.replist{display:flex;flex-direction:column;gap:8px}
.replist button{min-height:54px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;text-align:left;font-weight:600}
.replist button[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft)}
.replist .amt{color:var(--money);font-variant-numeric:tabular-nums}
.tot3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.tot3>div{background:var(--ground);border-radius:12px;padding:14px}
td.nw{white-space:nowrap}
.tot3 .v{font-family:var(--display);font-size:22px;font-weight:700}

/* rep (phone-first) */
.rep-hero{background:var(--brand);color:#fff;padding:calc(22px + env(safe-area-inset-top,0px)) 20px 26px;display:flex;flex-direction:column;gap:16px}
.rep-hero .sub{color:#DCD8FF}
.seg{display:flex;gap:6px;background:#2E21B8;border-radius:999px;padding:4px}
.seg button{flex:1;min-height:44px;border:none;border-radius:999px;background:none;color:#DCD8FF;font-weight:600;cursor:pointer}
.seg button[aria-pressed=true]{background:#fff;color:var(--brand)}
.rep-body{padding:18px 16px 90px;display:flex;flex-direction:column;gap:16px;max-width:640px;margin:0 auto}
.li{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:14px}
.li:last-child{border-bottom:none}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:6px 8px calc(10px + env(safe-area-inset-bottom,0px))}
.bottom-nav button{min-height:52px;background:none;border:none;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.bottom-nav button i{width:22px;height:4px;border-radius:999px;background:transparent}
.bottom-nav button[aria-pressed=true]{color:var(--brand)} .bottom-nav button[aria-pressed=true] i{background:var(--brand)}