/* hullo Analytics Hub palette (Documentation/Hullo_Analytics_Hub.html) */
:root{
  --red:#E8341C;--dark:#0D2B22;--cream:#F5F2EB;--surf:#fff;--teal:#1A5C42;
  --tx:#0D2B22;--mu:#4A6B5A;--hi:#8AA090;--bd:rgba(13,43,34,.09);--bds:rgba(13,43,34,.18);
  --gbg:#E8F5E9;--gtx:#1B5E20;--rbg:#FFEBEE;--rtx:#B71C1C;--ntx:#6E6E6E;
  --sh:0 1px 3px rgba(13,43,34,.07),0 4px 20px rgba(13,43,34,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--cream);color:var(--tx);font-size:13px;min-height:100vh}
button,input{font-family:inherit}

.hdr{background:var(--dark);padding:0 28px;height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06)}
.hl,.hr{display:flex;align-items:center;gap:12px}
.logo{width:34px;height:34px;border-radius:50%;object-fit:cover}
.hd{width:1px;height:20px;background:rgba(255,255,255,.2)}
.ht{color:rgba(255,255,255,.75);font-size:12px;font-weight:500;letter-spacing:.03em}
.asof-lbl{font-size:9px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.08em}
.asof-val{font-size:11px;color:rgba(255,255,255,.6);font-weight:500}
.who{text-decoration:none}
.who:hover{color:#fff;text-decoration:underline}
.ghost{text-decoration:none;background:none;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);border-radius:20px;padding:3px 12px;font-size:10.5px;cursor:pointer}
.ghost:hover{color:#fff;border-color:rgba(255,255,255,.5)}

.tab-nav{background:var(--dark);border-bottom:1px solid rgba(255,255,255,.06);padding:0 24px;display:flex;overflow-x:auto}
.tabn{padding:0 18px;height:40px;border:none;border-bottom:3px solid transparent;background:transparent;color:rgba(255,255,255,.38);font-size:10.5px;font-weight:600;cursor:pointer;letter-spacing:.04em;white-space:nowrap}
.tabn:hover{color:rgba(255,255,255,.7)}
.tabn.active{color:#fff;border-bottom-color:var(--red)}

.panels{position:relative}
.panel{display:none;padding:20px 28px 40px;max-width:1400px;margin:0 auto}
.panel.active{display:block}
#panel-snapshot{padding:0;max-width:none}
#panel-snapshot iframe{width:100%;height:calc(100vh - 92px);border:0;display:block;background:var(--cream)}

.ctlbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surf);border:1px solid var(--bds);border-radius:10px;padding:10px 16px;margin-bottom:16px;box-shadow:var(--sh)}
.ctlbar label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--hi);display:flex;align-items:center;gap:6px}
.ctlbar select,.ctlbar input{border:1.5px solid var(--bds);border-radius:6px;padding:4px 8px;font-size:12px;color:var(--tx)}
.pill{padding:5px 16px;border-radius:20px;border:0;background:var(--red);color:#fff;font-size:11px;font-weight:600;cursor:pointer}
.pill:disabled{opacity:.5;cursor:default}
.note{font-size:11px;color:var(--mu)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--surf);border:1px solid var(--bd);border-radius:10px;padding:14px 16px;box-shadow:var(--sh)}
.kpi .k{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--hi)}
.kpi .v{font-size:22px;font-weight:600;margin-top:4px;letter-spacing:-.3px}

.card{background:var(--surf);border:1px solid var(--bd);border-radius:10px;padding:16px;margin-bottom:16px;box-shadow:var(--sh)}
.card h2{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:12px}
.chart svg{display:block;width:100%;height:auto}
.chart .bar{fill:var(--teal)}
.chart .bar.wkend{fill:var(--red)}
.chart .axis{font-size:9px;fill:var(--hi)}
.chart .grid{stroke:var(--bd)}

.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
th{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--hi);text-align:right;padding:6px 10px;border-bottom:1.5px solid var(--bds);white-space:nowrap}
td{padding:6px 10px;border-bottom:1px solid var(--bd);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
tfoot td{font-weight:600;border-top:1.5px solid var(--bds)}
.loadbar{display:inline-block;height:6px;border-radius:3px;background:var(--teal);vertical-align:middle;margin-right:6px}
.loadbar.hot{background:var(--red)}

.sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.src{background:var(--surf);border:1px solid var(--bd);border-left:4px solid var(--hi);border-radius:10px;padding:14px 16px;box-shadow:var(--sh)}
.src.ok{border-left-color:var(--teal)}
.src.error{border-left-color:var(--red)}
.src h3{font-size:13px;font-weight:600}
.src .kind{font-size:10px;color:var(--hi);text-transform:uppercase;letter-spacing:.08em}
.src .state{display:inline-block;margin-top:8px;font-size:10px;font-weight:700;padding:2px 10px;border-radius:20px;background:var(--cream);color:var(--ntx)}
.src.ok .state{background:var(--gbg);color:var(--gtx)}
.src.error .state{background:var(--rbg);color:var(--rtx)}
.src p{margin-top:8px;font-size:11.5px;color:var(--mu);word-break:break-word}
.src code{font-size:10.5px;background:var(--cream);padding:1px 5px;border-radius:4px}
.empty,.err{padding:24px;text-align:center;color:var(--mu)}
.err{color:var(--rtx)}

/* Sign-in */
body.signin{background:var(--dark);display:flex;align-items:center;justify-content:center;padding:24px}
.signin-card{width:min(400px,100%);background:var(--surf);border-radius:16px;padding:28px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.signin-logo{display:block;width:56px;height:56px;border-radius:50%;margin-bottom:14px}
.signin-card h1{font-size:1.7rem;font-weight:700}
.signin-mark{display:block;width:36px;height:3px;border-radius:99px;background:var(--red);margin:10px 0 14px}
.signin-card p{color:var(--mu);margin-bottom:16px}
.signin-error{color:var(--rtx)!important}
.signin-go{width:100%;background:var(--red);color:#fff;border:0;border-radius:8px;padding:12px;font-weight:600;cursor:pointer}
.signin-go:disabled{opacity:.6}
.signin-local{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.signin-kicker{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hi)}
.signin-field{padding:10px;border-radius:8px;border:1.5px solid var(--bds);font-size:13px}
a.signin-go{display:block;text-align:center;text-decoration:none}
.signin-alt{display:block;text-align:center;padding:10px;color:var(--mu);font-weight:500;text-decoration:none}
.signin-alt:hover{color:var(--rtx)}
.acct{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-bottom:20px;font-size:12.5px}
.acct dt{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hi);align-self:center}
.acct dd{color:var(--tx);word-break:break-word}
.acct-actions{display:flex;flex-direction:column;gap:6px}
.signin-local button{padding:10px;border-radius:8px;border:0;background:var(--teal);color:#fff;font-weight:600;cursor:pointer}
.signin-card.signin-wide{width:min(560px,100%)}
.access-add{margin:0 0 20px}
.access-row{display:flex;gap:8px}
.access-row input{flex:1;min-width:0}
.access-list{list-style:none;margin:6px 0 18px;border-top:1px solid var(--bd)}
.access-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--bd);font-size:12.5px}
.access-val{word-break:break-all;color:var(--tx)}
.access-val small{display:block;color:var(--hi);font-size:10.5px;word-break:normal}
.access-empty{color:var(--hi)}
.access-remove{background:none;border:1px solid var(--bds);border-radius:20px;padding:3px 12px;font-size:10.5px;color:var(--mu);cursor:pointer;flex-shrink:0}
.access-remove:hover{color:var(--rtx);border-color:var(--rtx)}
.signin-card p.access-hint{font-size:11px;margin:4px 0 0}

@media (max-width:640px){
  .hdr,.tab-nav{padding:0 16px}
  .panel{padding:16px}
  .ht,.asof-lbl{display:none}
}