/* ================================================================
   Friendly Dashboard — restyles the dashboard to match the landing
   page (kicker + Bricolage title, glowing New Match hero, rounded
   soft-shadow cards on the sky canvas, mono meta text).

   Scoped entirely under #dashboardPage. No JS or DOM changes: it
   only overrides the base dashboard classes in style.css. The rules
   are purely visual, so they apply at every width; the ≤700px block
   restyles the mobile greeting header to the same language.
   ================================================================ */
#dashboardPage{
  --fd-sky:#f1f4fb; --fd-line:#e4e7ee; --fd-line2:#d2d7e1;
  --fd-ink:#14171f; --fd-soft:#5b626f; --fd-faint:#8a909c;
  --fd-blue:#3a55e6; --fd-blue-deep:#2b40c4; --fd-blue-wash:#eef0fe;
  --fd-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --fd-mono:'JetBrains Mono',ui-monospace,monospace;
  --fd-shadow:0 12px 30px -18px rgba(32,38,75,.40);
  --fd-shadow-lg:0 26px 56px -30px rgba(32,38,75,.42);
  background:var(--fd-sky);min-height:100vh;
}

/* ── header ──────────────────────────────────────────────────── */
#dashboardPage .dash-title{
  font-family:var(--fd-display);font-weight:800;font-size:32px;
  letter-spacing:-.03em;color:var(--fd-ink);
}
/* kicker above the title, like the landing section headers */
#dashboardPage .dash-title::before{
  content:'Dashboard';display:block;
  font-family:'Plus Jakarta Sans','Manrope',system-ui,sans-serif;
  font-size:13px;font-weight:800;letter-spacing:.02em;
  color:var(--fd-blue);margin-bottom:7px;
}
#dashboardPage .dash-sub{color:var(--fd-soft);font-weight:600}

/* ── New Match hero ──────────────────────────────────────────── */
#dashboardPage .dash-newmatch{
  border-radius:24px;
  box-shadow:0 24px 50px -22px rgba(58,85,230,.9);
}
#dashboardPage .dash-newmatch:hover{box-shadow:0 30px 60px -22px rgba(58,85,230,.95)}
#dashboardPage .dash-newmatch-row{
  font-family:var(--fd-display);font-weight:800;letter-spacing:-.02em;
}

/* ── section head ────────────────────────────────────────────── */
#dashboardPage .section-title{
  font-family:var(--fd-display);font-weight:800;font-size:19px;
  letter-spacing:-.02em;color:var(--fd-ink);
}
#dashboardPage .section-title::before{width:6px;height:19px;border-radius:99px;background:var(--fd-blue)}

/* ── recent matches ──────────────────────────────────────────── */
#dashboardPage .recent-item{
  border-radius:16px;border-color:var(--fd-line);box-shadow:var(--fd-shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
#dashboardPage .recent-item:hover{
  transform:translateY(-2px);border-color:#c5cdfb;box-shadow:var(--fd-shadow-lg);
}
#dashboardPage .recent-meta{font-family:var(--fd-mono);font-size:11.5px;color:var(--fd-faint)}
#dashboardPage .recent-score{border-radius:9px}
#dashboardPage .recent-item:hover .recent-go{color:var(--fd-blue)}
#dashboardPage .empty-note{border-radius:16px;border-color:var(--fd-line2);background:#fff}

/* ── banners ─────────────────────────────────────────────────── */
#dashboardPage .ob-dash-reminder{border-radius:16px;box-shadow:var(--fd-shadow)}

/* ── phone: greeting header + compact cards ──────────────────── */
@media (max-width:700px){
  /* the mobile greeting header sits directly on the sky canvas */
  #dashboardPage .dash-mobile-header{background:transparent;padding-top:20px}
  #dashboardPage .dash-greeting-time{
    font-family:'Plus Jakarta Sans','Manrope',system-ui,sans-serif;
    font-size:12px;font-weight:800;letter-spacing:.02em;
    color:var(--fd-blue);margin-bottom:3px;
  }
  #dashboardPage .dash-greeting-name{
    font-family:var(--fd-display);font-weight:800;font-size:24px;
    letter-spacing:-.03em;color:var(--fd-ink);
  }
  #dashboardPage .dash-header-notif{
    border-radius:12px;border-color:var(--fd-line);box-shadow:var(--fd-shadow);
  }
  #dashboardPage .dash-newmatch{border-radius:22px;box-shadow:0 18px 40px -18px rgba(58,85,230,.85)}
  #dashboardPage .section-title{font-size:17px}
  #dashboardPage .section-title::before{height:16px}
  #dashboardPage .recent-item::before{border-radius:12px}
  #dashboardPage .recent-meta{font-size:11px}
}