/* daftar — mintbot conversion & traffic dashboard.

   Visual system: a near-black slate base lit by two fixed aurora glows, glass
   cards that sit on it rather than boxing it in, and ONE accent ramp
   (mint -> cyan -> sky -> indigo -> violet) reused everywhere. The funnel
   walks that ramp top to bottom, so the colour itself reads as "further down
   the funnel" instead of being decoration. Numbers are tabular everywhere so
   columns line up as values change. */

:root{
  /* Surfaces */
  --bg:#070910;
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.07);
  --line-lit:rgba(255,255,255,.15);

  /* Text */
  --fg:#eef2f9;
  --muted:#8593a9;
  --faint:#5b6879;

  /* Accent ramp — the single source of colour for the whole page */
  --mint:#3ddc97;
  --cyan:#25d0dd;
  --sky:#3f9bfa;
  --indigo:#6f7bf7;
  --violet:#a97bf5;
  --accent:var(--mint);
  --danger:#fb7185;

  --radius:16px;
  --shadow:0 24px 48px -24px rgba(0,0,0,.9);
  --ring:0 0 0 3px rgba(61,220,151,.22);

  font-synthesis:none;
  color-scheme:dark;
}

*{box-sizing:border-box}
/* [hidden] must win over author display rules (e.g. .login-wrap flex),
   otherwise the login gate stays visible after a successful sign-in. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}

body{
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}
/* Two fixed aurora glows. Fixed (not scrolled) so the light source stays put
   and the page feels lit rather than painted. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60rem 34rem at 12% -8%, rgba(61,220,151,.13), transparent 62%),
    radial-gradient(52rem 32rem at 92% 4%, rgba(139,110,246,.14), transparent 60%),
    radial-gradient(40rem 40rem at 60% 108%, rgba(63,155,250,.09), transparent 65%);
}

/* Tabular numerals: counts change on every refresh, columns must not jitter. */
.funnel-bar,.funnel-pct,.bd-count,.generated,.tile-val{font-variant-numeric:tabular-nums}

/* ---- Login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid var(--line);
  border-radius:22px;
  padding:38px 32px 32px;
  width:100%; max-width:360px;
  text-align:center;
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow);
}
/* Hairline of accent light along the top edge of the card. */
.login-card::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:22px 22px 0 0;
  background:linear-gradient(90deg,transparent,rgba(61,220,151,.7),rgba(169,123,245,.7),transparent);
}
.login-logo{
  font-size:30px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px;
  background:linear-gradient(100deg,var(--mint),var(--cyan) 40%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-sub{color:var(--muted);margin:0 0 26px;font-size:13px}
.login-card input{
  width:100%;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line);background:rgba(0,0,0,.3);color:var(--fg);
  font-size:15px;margin-bottom:14px;transition:border-color .18s,box-shadow .18s;
}
.login-card input::placeholder{color:var(--faint)}
.login-card input:focus{outline:none;border-color:rgba(61,220,151,.6);box-shadow:var(--ring)}
.login-card button{
  width:100%;padding:13px;border:0;border-radius:12px;
  background:linear-gradient(100deg,var(--mint),var(--cyan));
  color:#04150d;font-weight:700;font-size:15px;cursor:pointer;
  transition:transform .12s,filter .18s,box-shadow .18s;
  box-shadow:0 10px 26px -10px rgba(61,220,151,.75);
}
.login-card button:hover{filter:brightness(1.06);box-shadow:0 14px 32px -10px rgba(61,220,151,.9)}
.login-card button:active{transform:translateY(1px)}
.login-err{color:var(--danger);font-size:13px;margin-top:12px}

/* ---- Topbar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 22px;position:sticky;top:0;z-index:5;
  background:rgba(7,9,16,.72);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.brand-mark{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(140deg,var(--mint),var(--violet));
  box-shadow:0 8px 20px -8px rgba(61,220,151,.8);
}
.brand-mark svg{width:17px;height:17px;display:block}
.brand-tag{
  margin-left:2px;padding:3px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--glass);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.topbar-right{display:flex;align-items:center;gap:10px}
.generated{display:flex;align-items:center;gap:7px;color:var(--faint);font-size:12px}
/* Breathing dot: the only motion in the chrome, signals "data is live". */
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(61,220,151,.55);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(61,220,151,.5)}
  70%{box-shadow:0 0 0 7px rgba(61,220,151,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}
}
.ghost{
  background:var(--glass);border:1px solid var(--line);color:var(--muted);
  border-radius:10px;width:36px;height:36px;cursor:pointer;
  display:grid;place-items:center;transition:all .18s;
}
.ghost svg{width:16px;height:16px;display:block}
.ghost:hover{color:var(--fg);border-color:var(--line-lit);background:var(--glass-2)}
#refresh:hover svg{transform:rotate(180deg);transition:transform .5s ease}
#logout:hover{color:var(--danger);border-color:rgba(251,113,133,.45)}

main{max-width:1080px;margin:0 auto;padding:26px 22px 56px}

/* ---- Cards ---- */
.card{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px 22px;
  margin-bottom:20px;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.card h2{
  margin:0 0 18px;display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.card-ico{display:grid;place-items:center;width:15px;height:15px;color:var(--accent);flex:0 0 auto}
.card-ico svg{width:15px;height:15px;display:block}

/* ---- Card header with a period switcher on the right ---- */
.card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.card-head h2{margin:0}
.periods{display:flex;gap:3px;position:relative;padding:3px;border-radius:11px;background:rgba(0,0,0,.3);border:1px solid var(--line)}
.pbtn{
  padding:5px 10px;border:0;background:transparent;color:var(--faint);
  border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.03em;
  cursor:pointer;transition:all .16s;font-family:inherit;
}
.pbtn:hover{color:var(--fg);background:var(--glass-2)}
.pbtn.active{
  background:linear-gradient(100deg,var(--mint),var(--cyan));
  color:#04150d;box-shadow:0 6px 16px -8px rgba(61,220,151,.9);
}
.range-popup{
  position:absolute;top:calc(100% + 8px);right:0;z-index:20;
  display:flex;flex-direction:column;gap:12px;min-width:242px;padding:16px;
  background:rgba(13,16,24,.96);border:1px solid var(--line-lit);border-radius:14px;
  backdrop-filter:blur(20px);box-shadow:0 26px 50px -20px rgba(0,0,0,.95);
}
.range-popup[hidden]{display:none}
.range-popup label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.range-popup input{
  padding:9px 11px;border-radius:9px;border:1px solid var(--line);
  background:rgba(0,0,0,.4);color:var(--fg);font-size:13px;font-family:inherit;
}
.range-popup input:focus{outline:none;border-color:rgba(61,220,151,.6);box-shadow:var(--ring)}
.range-actions{display:flex;gap:8px;justify-content:flex-end}
.range-actions .pbtn{padding:7px 13px;border:1px solid var(--line)}
.pbtn.apply{background:linear-gradient(100deg,var(--mint),var(--cyan));color:#04150d;border-color:transparent}

/* Shared range switcher above the four breakdown cards. */
/* Same 20px gap above and below as between the cards themselves, so the label
   row sits centred in the gap instead of hugging the cards beneath it. */
.breakdown-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:20px 2px}
.breakdown-bar-label{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid2 .card{margin-bottom:0}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

/* ---- Funnel ----
   Label row sits ABOVE its bar (the meta block is order:-1), so each step
   reads as a labelled measure instead of a bar with a caption bolted on.
   Each step takes the next colour on the accent ramp. */
.funnel{display:flex;flex-direction:column;gap:14px}
.funnel-step{display:flex;flex-direction:column;gap:7px;--c1:var(--mint);--c2:var(--cyan)}
.funnel-step:nth-child(1){--c1:#3ddc97;--c2:#2fd8b4}
.funnel-step:nth-child(2){--c1:#2fd3c4;--c2:#25c2e0}
.funnel-step:nth-child(3){--c1:#28bfe4;--c2:#3f9bfa}
.funnel-step:nth-child(4){--c1:#4a92f8;--c2:#6f7bf7}
.funnel-step:nth-child(5){--c1:#7a7cf6;--c2:#a97bf5}
.funnel-step:nth-child(6){--c1:#a97bf5;--c2:#d073e8}
.funnel-meta{order:-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.funnel-label{font-size:13px;font-weight:600;color:var(--fg)}
.funnel-pct{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--faint)}
.funnel-bar{
  height:40px;border-radius:11px;min-width:64px;
  display:flex;align-items:center;padding:0 14px;
  background:linear-gradient(100deg,var(--c1),var(--c2));
  color:#050c14;font-weight:800;font-size:14px;letter-spacing:-.01em;
  box-shadow:0 12px 26px -14px var(--c1);
  transition:width .55s cubic-bezier(.22,1,.36,1),filter .18s;
}
.funnel-step:hover .funnel-bar{filter:brightness(1.08)}

/* ---- Chart figures (headline number + bars + axis) ----
   Bars alone say nothing, so every chart leads with its total and carries the
   peak/average beside it; the axis under the bars names the range they span. */
.chart-stats{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:-4px 0 14px}
.stat-total{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat-unit{margin-left:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.stat-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11px;color:var(--faint);text-align:right}
.stat-side b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.axis{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}

/* ---- Bars (30-day) ---- */
.bars{display:flex;align-items:flex-end;gap:4px;height:140px}
/* 96 fifteen-minute slots at half page width: hairline gaps, square tops. */
.bars.dense{gap:1px}
.bars.dense .bar{border-radius:2px 2px 1px 1px}
.bar{
  flex:1;min-height:3px;position:relative;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--cyan),rgba(63,155,250,.35));
  transition:filter .18s,transform .18s;
}
.bar:hover{filter:brightness(1.25);transform:scaleY(1.03);transform-origin:bottom}
.bar span{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  background:rgba(10,13,20,.97);color:var(--fg);border:1px solid var(--line-lit);
  font-size:11px;font-weight:600;padding:5px 9px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .14s;margin-bottom:8px;
  box-shadow:0 12px 26px -12px rgba(0,0,0,.95);
}
.bar:hover span{opacity:1}

/* ---- Breakdown rows ---- */
.breakdown{display:flex;flex-direction:column;gap:9px}
.bd-row{display:flex;align-items:center;gap:12px;font-size:13px}
.bd-name{flex:0 0 42%;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-track{flex:1;height:7px;background:rgba(0,0,0,.36);border-radius:6px;overflow:hidden}
.bd-fill{
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--mint),var(--sky));
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.bd-count{flex:0 0 auto;color:var(--muted);font-weight:600;min-width:44px;text-align:right}
.bd-empty{color:var(--faint);font-size:13px;padding:6px 0}

@media(max-width:520px){
  main{padding:18px 14px 44px}
  .card{padding:16px 16px 18px}
  .bd-name{flex-basis:52%}
}

/* Respect a reduced-motion preference: keep the layout, drop the animation. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}