/* ------------------------------------------------------------------------
      MWM Crew Points — shared styles
      Mobile-first (most MWM site traffic is on phones). Brand colors below
      match the navy/red used in the Mover Training Guide — tweak to taste.
      ------------------------------------------------------------------------ */
   
   :root {
        --navy: #1b2a4a;
        --navy-light: #2c4068;
        --red: #a32020;
        --red-light: #c62f2f;
        --green: #1f8a4c;
        --gray-50: #f7f7f8;
        --gray-100: #f0f1f3;
        --gray-200: #e3e5e9;
        --gray-400: #9aa0ab;
        --gray-600: #595f6b;
        --gray-900: #1c1f26;
        --radius: 10px;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   }
   
   * { box-sizing: border-box; }
   
   html, body {
        margin: 0;
        padding: 0;
        background: var(--gray-50);
        color: var(--gray-900);
        -webkit-font-smoothing: antialiased;
   }
   
   a { color: var(--navy); }
   
   /* ---------- layout shells ---------- */
   
   .auth-shell {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 16px;
        background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 60%, var(--red) 160%);
   }
   
   .auth-card {
        width: 100%;
        max-width: 380px;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 32px 28px;
   }
   
   .app-shell {
        min-height: 100vh;
        padding-bottom: 48px;
   }
   
   .topbar {
        background: var(--navy);
        color: #fff;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 10;
   }
   
   .topbar .brand {
        font-weight: 700;
        letter-spacing: 0.02em;
        font-size: 15px;
   }
   
   .topbar .brand small {
        display: block;
        font-weight: 400;
        font-size: 11px;
        opacity: 0.75;
   }
   
   .topbar button.link {
        background: none;
        border: none;
        color: #fff;
        opacity: 0.85;
        font-size: 14px;
        cursor: pointer;
        padding: 8px;
   }
   .topbar button.link:hover { opacity: 1; }
   
   .container {
        max-width: 760px;
        margin: 0 auto;
        padding: 20px 16px 0;
   }
   
   /* ---------- typography ---------- */
   
   h1 { font-size: 22px; margin: 0 0 4px; }
   h2 { font-size: 17px; margin: 28px 0 10px; color: var(--navy); }
   .subtle { color: var(--gray-600); font-size: 14px; }
   
   /* ---------- forms ---------- */
   
   label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--gray-600);
        margin: 14px 0 6px;
   }
   
   input, select, textarea {
        width: 100%;
        padding: 11px 12px;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        font-size: 15px;
        background: #fff;
        color: var(--gray-900);
   }
   input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--navy);
   }
   
   button.primary {
        width: 100%;
        margin-top: 20px;
        padding: 12px;
        border: none;
        border-radius: 8px;
        background: var(--red);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
   }
   button.primary:hover { background: var(--red-light); }
   button.primary:disabled { opacity: 0.6; cursor: default; }
   
   button.secondary {
        padding: 10px 14px;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        background: #fff;
        color: var(--navy);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
   }
   button.secondary:hover { background: var(--gray-100); }
   
   button.danger-text {
        background: none;
        border: none;
        color: var(--red);
        font-size: 13px;
        cursor: pointer;
        padding: 4px 0;
   }
   
   .error-msg {
        background: #fdecec;
        color: var(--red);
        border: 1px solid #f5c6c6;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 13px;
        margin-top: 14px;
        display: none;
   }
   .error-msg.show { display: block; }
   
   .ok-msg {
        background: #e9f7ef;
        color: var(--green);
        border: 1px solid #bfe8cf;
        border-radius: 8px;
        padding: 10px 12px;
        font-size: 13px;
        margin-top: 14px;
        display: none;
   }
   .ok-msg.show { display: block; }
   
   /* ---------- cards / stats ---------- */
   
   .card {
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 18px;
        margin-bottom: 16px;
   }
   
   .stat-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
   }
   
   .stat {
        flex: 1 1 140px;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 16px;
        text-align: center;
   }
   
   .stat .value { font-size: 28px; font-weight: 700; color: var(--navy); }
   .stat .value.pos { color: var(--green); }
   .stat .value.neg { color: var(--red); }
   .stat .label { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
   
   /* ---------- tables / lists ---------- */
   
   table { width: 100%; border-collapse: collapse; font-size: 14px; }
   th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--gray-100); }
   th { color: var(--gray-600); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
   
   .pts-pos { color: var(--green); font-weight: 600; }
   .pts-neg { color: var(--red); font-weight: 600; }
   
   .leaderboard-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 8px;
        border-bottom: 1px solid var(--gray-100);
   }
   .leaderboard-row:last-child { border-bottom: none; }
   .rank {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--gray-100);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 700;
        color: var(--navy);
        flex-shrink: 0;
   }
   .rank.rank-1 { background: #ffd84d; }
   .rank.rank-2 { background: #d9d9d9; }
   .rank.rank-3 { background: #e3a26a; }
   .leaderboard-row .name { flex: 1; font-weight: 500; }
   .leaderboard-row .score { font-weight: 700; }
   .leaderboard-row.me { background: var(--gray-50); margin: 0 -8px; padding: 12px 16px; border-radius: 8px; }
   
   /* ---------- avatars ---------- */
   
   .avatar {
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        background: var(--gray-100);
   }
   
   .avatar-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--navy);
        color: #fff;
        font-weight: 700;
        flex-shrink: 0;
        letter-spacing: 0.02em;
   }
   
   .avatar-row {
        display: flex;
        align-items: center;
        gap: 10px;
   }
   
   .avatar-upload {
        display: flex;
        align-items: center;
        gap: 18px;
   }
   
   .avatar-upload-label {
        display: inline-block;
        padding: 9px 14px;
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        color: var(--navy);
        background: #fff;
   }
   .avatar-upload-label:hover { background: var(--gray-100); }
   
   .pill {
        display: inline-block;
        padding: 2px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        background: var(--gray-100);
        color: var(--gray-600);
   }
   .pill.admin { background: var(--navy); color: #fff; }
   .pill.inactive { background: #fdecec; color: var(--red); }
   
   .toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 28px;
        margin-bottom: 10px;
        flex-wrap: wrap;
        gap: 8px;
   }
   
   .empty-state {
        text-align: center;
        color: var(--gray-400);
        padding: 24px 0;
        font-size: 14px;
   }
   
   /* ---------- modal ---------- */
   
   .modal-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 50;
   }
   .modal-backdrop.show { display: flex; }
   
   .modal {
        background: #fff;
        border-radius: var(--radius);
        padding: 22px;
        width: 100%;
        max-width: 420px;
        max-height: 90vh;
        overflow-y: auto;
   }
   
   .modal h3 { margin: 0 0 4px; font-size: 17px; }
   .modal .close-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
   
   @media (max-width: 480px) {
        .auth-card { padding: 26px 20px; }
   }