/* ============================================================
   Auction FPL — light-mode styles
   Pragmatic port of design handoff. Tokens + components used in
   the vertical slice (LiveBoard). Other tabs reuse same primitives.
   ============================================================ */

/* ---- Tokens (light mode only) ------------------------------ */
.afpl-app {
    --pl-purple:        #37003C;
    --pl-magenta:       #963CFF;
    --pl-cyan:          #04F5FF;
    --pl-cyan-ink:      #007680;

    --phase-auction:        #00FF87;
    --phase-auction-soft:   #D5FFE9;
    --phase-auction-ink:    #008F4C;
    --phase-open-market:    #FCC74D;
    --phase-open-market-soft: #FFF1CE;
    --phase-open-market-ink: #8A6500;
    --phase-sold:           #E90052;
    --phase-sold-soft:      #FFD9E5;

    --bg-0: #F4F4F6;
    --bg-1: #FFFFFF;
    --bg-2: #F0EDF4;
    --bg-3: #E6E1EE;

    --fg-1: #240223;
    --fg-2: #6B5B6F;
    --fg-3: #9A8E9D;
    --fg-4: rgba(36,2,35,0.18);

    --border-1: rgba(36,2,35,0.08);
    --border-2: rgba(36,2,35,0.14);
    --rule-ink: #37003C;

    --shadow-1: 0 1px 2px rgba(36,2,35,0.06), 0 1px 1px rgba(36,2,35,0.04);
    --shadow-2: 0 6px 18px rgba(36,2,35,0.08), 0 2px 4px rgba(36,2,35,0.05);
    --shadow-3: 0 18px 48px rgba(36,2,35,0.18), 0 4px 12px rgba(36,2,35,0.08);

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;

    --font-display: "PremierLeagueW01-Bold", "PremierLeagueW01", "Helvetica Neue", system-ui, sans-serif;
    /* For Vietnamese-heavy headings — Be Vietnam Pro renders diacritics like
       "đ", "ấ", "ồ", "ố" with proper proportions where PremierLeagueW01 falls
       back awkwardly to Helvetica Neue. Loaded via Google Fonts in Auction.aspx. */
    --font-display-vn: "Be Vietnam Pro", "Inter", "Helvetica Neue", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;

    color: var(--fg-1);
    font-family: var(--font-body);
}

/* ---- Layout ----------------------------------------------- */
/* Site.Master renders SocialSignIn (avatar + name + bell) at top-right of body-content,
   directly above MainContent. Strategy: leave the auction shell flush with that row
   (no margin-top), but reserve right padding inside TopNav so the auction bell stays
   clear of the user widget — and bump SocialSignIn z-index so it overlays cleanly. */
.afpl-app {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 60px);
    background: var(--bg-0);
    position: relative;
}
.afpl-header { position: relative; z-index: 1; }
.afpl-main { flex: 1; padding: 16px 24px 80px; max-width: 1280px; width: 100%; margin: 0 auto; }
@media (max-width: 768px) { .afpl-main { padding: 12px 14px 80px; } }

/* ---- Top nav ---------------------------------------------- */
.afpl-app .topnav {
    background: linear-gradient(180deg, #37003C 0%, #29002D 100%);
    position: relative;
}
.afpl-app .topnav::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--phase-auction) 0%, var(--pl-cyan) 50%, var(--pl-magenta) 100%);
}
.afpl-app .topnav-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 0 24px;
    height: 64px; display: flex; align-items: center; gap: 18px; color: #fff;
}
.afpl-app .brand { display: inline-flex; align-items: center; }
/* Guest mode: hide user-specific topnav controls (budget + bell). The tab
   bar stays visible so guests can browse Live / Stats / Leaderboard; personal
   tabs render a login placeholder when clicked. */
.afpl-app[data-guest="1"] #afpl-budget,
.afpl-app[data-guest="1"] #afpl-bell { display: none !important; }
/* SocialSignIn now sits inside the topnav. Its own CSS uses position:absolute
   top:5;right:5 which breaks layout here — override to flow in-place inside
   the .afpl-social-wrap container so it can occupy a flex/grid slot.
   On desktop, place it AFTER the bell button via flex `order` (DOM order has
   social before budget but the spacer + bell sit between via order:0). */
.afpl-app .afpl-social-wrap {
    display: inline-flex; align-items: center;
    order: 99;        /* desktop: render last (after the bell) */
}
.afpl-app .afpl-social-wrap .user-info,
.afpl-app .afpl-social-wrap .sign-in {
    position: relative !important;
    top: auto !important;
    right: auto !important;
}
.afpl-app .topnav .gw-selector {
    background: rgba(255,255,255,0.10); color: #fff;
    padding: 7px 12px; border-radius: 8px;
    font: 800 12px/1 var(--font-display); letter-spacing: 0.06em;
}
.afpl-app .topnav .budget { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.afpl-app .topnav .budget-row {
    display: flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.55);
    font: 700 10px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
}
.afpl-app .topnav .budget-row .num {
    color: var(--phase-auction); font: 800 12px/1 var(--font-display); margin-left: auto;
}
.afpl-app .topnav .budget-bar {
    height: 6px; background: rgba(255,255,255,0.10); border-radius: 999px; overflow: hidden;
}
.afpl-app .topnav .budget-bar > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--phase-auction), var(--pl-cyan));
    border-radius: 999px;
    transition: width var(--dur-2) var(--ease-out);
}
.afpl-app .topnav .spacer { flex: 1; }
.afpl-app .topnav .icon-btn {
    width: 38px; height: 38px; border-radius: 8px;
    background: transparent; color: rgba(255,255,255,0.75); border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; font-size: 16px;
}
.afpl-app .topnav .icon-btn:hover { color: var(--pl-cyan); background: rgba(4,245,255,0.10); }
.afpl-app .topnav .icon-btn .badge-count {
    position: absolute; top: 4px; right: 4px;
    background: var(--phase-sold); color: #fff;
    font: 800 9px/1 var(--font-display);
    padding: 3px 5px; border-radius: 999px; min-width: 14px; text-align: center;
}

/* ---- Tab bar ---------------------------------------------- */
.afpl-app .tabbar {
    background: var(--bg-1);
    border-bottom: 1px solid var(--border-1);
    box-shadow: 0 1px 2px rgba(36,2,35,0.04);
}
.afpl-app .tabbar-inner {
    display: flex; gap: 4px; max-width: 1280px; margin: 0 auto;
    padding: 0 24px; overflow-x: auto; scrollbar-width: none;
}
.afpl-app .tabbar-inner::-webkit-scrollbar { display: none; }
.afpl-app .tab {
    font: 700 12px/1 var(--font-display);
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--fg-2); background: transparent; border: 0;
    padding: 16px 14px 14px; cursor: pointer; position: relative;
    white-space: nowrap; transition: color var(--dur-2);
}
.afpl-app .tab:hover { color: var(--pl-magenta); }
.afpl-app .tab.active { color: var(--rule-ink); }
.afpl-app .tab.active::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 0;
    height: 3px; background: var(--pl-magenta); border-radius: 2px;
}

/* ---- Section header --------------------------------------- */
.afpl-app .sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 14px; }
.afpl-app .sec-h h2 { font: 800 28px/1.2 var(--font-display-vn); letter-spacing: -0.01em; margin: 0; color: var(--fg-1); }
/* Highlighted meta line — was muted grey, now a pill badge so the
   "GW 38 · Hạn 21:30 23/05" stands out next to the section title. */
.afpl-app .sec-h .meta {
    font: 700 13px/1 var(--font-display);
    color: #fff;
    background: linear-gradient(135deg, var(--pl-magenta) 0%, var(--pl-purple) 100%);
    padding: 8px 14px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(150,60,255,0.25);
    white-space: nowrap;
}

.afpl-app .t-h2 { font: 700 24px/1.2 var(--font-display-vn); margin: 0; }
.afpl-app .t-h3 { font: 700 18px/1.28 var(--font-display-vn); margin: 0; }
.afpl-app .t-tiny { font: 500 11px/1.3 var(--font-body); }
.afpl-app .tnum { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }

/* ---- Surfaces --------------------------------------------- */
.afpl-app .surface-1 {
    background: var(--bg-1); border: 1px solid var(--border-1);
    border-radius: var(--r-md); box-shadow: var(--shadow-1);
}

/* ---- Buttons ---------------------------------------------- */
.afpl-app .btn {
    font: 700 13px/1 var(--font-display); letter-spacing: 0.04em;
    border-radius: 999px; padding: 0 16px; height: 38px; border: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; text-transform: uppercase;
    transition: background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
    white-space: nowrap;
}
.afpl-app .btn:active { transform: scale(0.97); }
.afpl-app .btn-primary {
    background: linear-gradient(180deg, #963CFF 0%, #7E2EE0 100%);
    color: #fff; box-shadow: 0 4px 12px rgba(150,60,255,0.30);
}
.afpl-app .btn-primary:hover { background: linear-gradient(180deg, #A85AFF 0%, #8C3CF0 100%); }
.afpl-app .btn-secondary {
    background: #fff; color: var(--fg-1);
    border: 1.5px solid var(--rule-ink);
}
.afpl-app .btn-secondary:hover { background: var(--rule-ink); color: #fff; }
.afpl-app .btn-success {
    background: var(--phase-auction); color: #002B16; font-weight: 800;
    box-shadow: 0 4px 12px rgba(0,255,135,0.30);
}
.afpl-app .btn-success:hover { background: #1AFF95; }
.afpl-app .btn-danger {
    background: var(--phase-sold); color: #fff;
    box-shadow: 0 4px 12px rgba(233,0,82,0.28);
}
.afpl-app .btn-danger:hover { background: #D10049; }
.afpl-app .btn-ghost { background: transparent; color: var(--fg-2); }
.afpl-app .btn-ghost:hover { background: rgba(36,2,35,0.06); color: var(--fg-1); }
.afpl-app .btn-sm { height: 30px; font-size: 11px; padding: 0 11px; gap: 6px; }
.afpl-app .btn:disabled, .afpl-app .btn.disabled { opacity: 0.4; cursor: not-allowed; }

/* Toolbar position-filter pills */
.afpl-app .afpl-pos {
    height: 30px; background: transparent; color: var(--fg-2);
    box-shadow: none; border-radius: 6px;
}
.afpl-app .afpl-pos.active { background: var(--pl-magenta); color: #fff; }

/* ---- Inputs ----------------------------------------------- */
.afpl-app .input {
    height: 38px; background: #fff;
    border: 1px solid var(--border-2); border-radius: 999px;
    padding: 0 14px; color: var(--fg-1);
    font: 500 14px/1 var(--font-body);
    display: flex; align-items: center; gap: 8px;
}
.afpl-app .input:focus-within {
    border-color: var(--pl-magenta);
    box-shadow: 0 0 0 3px rgba(150,60,255,0.18);
}

/* ---- Badges ----------------------------------------------- */
.afpl-app .badge {
    font: 800 10px/1 var(--font-display);
    letter-spacing: 0.1em; text-transform: uppercase;
    border-radius: 999px; padding: 5px 10px;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.afpl-app .badge.auc  { background: var(--phase-auction);     color: #002B16; }
.afpl-app .badge.om   { background: var(--phase-open-market); color: #4A2D00; }
.afpl-app .badge.sold { background: var(--phase-sold);        color: #fff; }
.afpl-app .badge.your { background: var(--pl-magenta);        color: #fff; }

.afpl-app .eyebrow {
    font: 800 10px/1 var(--font-display);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3);
}
.afpl-app .eyebrow.auc  { color: var(--phase-auction-ink); }
.afpl-app .eyebrow.om   { color: var(--phase-open-market-ink); }
.afpl-app .eyebrow.sold { color: var(--phase-sold); }

/* ---- Phase column header ---------------------------------- */
.afpl-app .phase-col-h { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.afpl-app .phase-col-h .dot { width: 12px; height: 12px; border-radius: 50%; }
.afpl-app .phase-col-h h3 {
    font: 800 14px/1 var(--font-display);
    letter-spacing: 0.06em; text-transform: uppercase; margin: 0; color: var(--fg-1);
}
.afpl-app .phase-col-h .count { color: var(--fg-3); font: 600 12px/1 var(--font-body); }

/* ---- Player card ------------------------------------------ */
.afpl-app .pcard {
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    border-radius: 8px;
    box-shadow: var(--shadow-1);
    padding: 14px 14px 14px 18px;
    display: flex; flex-direction: column; gap: 10px;
    cursor: pointer;
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.afpl-app .pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.afpl-app .pcard .rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.afpl-app .pcard .rail-auc  { background: var(--phase-auction); }
.afpl-app .pcard .rail-om   { background: var(--phase-open-market); }
.afpl-app .pcard .rail-sold { background: var(--phase-sold); }
.afpl-app .pcard.your { box-shadow: 0 0 0 2px var(--pl-magenta), 0 8px 24px rgba(150,60,255,0.20); }
.afpl-app .pcard.outbid { opacity: 0.65; }
.afpl-app .pcard.outbid .pname { text-decoration: line-through; }
.afpl-app .pcard.sold-card { opacity: 0.85; cursor: default; }
.afpl-app .pcard.closing {
    animation: afpl-pulse-danger 1.6s ease-in-out infinite;
}
@keyframes afpl-pulse-danger {
    0%,100% { box-shadow: 0 0 0 1.5px var(--phase-sold), 0 4px 12px rgba(233,0,82,0.20); }
    50%     { box-shadow: 0 0 0 2px   var(--phase-sold), 0 8px 24px rgba(233,0,82,0.40); }
}
.afpl-app .pcard .row { display: flex; align-items: center; gap: 8px; }
.afpl-app .pcard .pname { font: 700 14px/1.2 var(--font-display); }
.afpl-app .pcard .pmeta { font: 500 11px/1 var(--font-body); color: var(--fg-3); margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.afpl-app .pcard .pmeta .team { color: var(--fg-2); font-weight: 600; }
.afpl-app .pcard .price {
    font: 800 22px/1 var(--font-display);
    font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums;
}
.afpl-app .pcard .price-label { font: 500 11px/1.4 var(--font-body); color: var(--fg-3); margin-top: 4px; }
/* High-bidder / winner / "Bạn đang dẫn đầu" info popped out from the grey
   price-label baseline so the leader is scannable at a glance. */
.afpl-app .pcard .price-label b { color: var(--fg-1); font-weight: 800; }
.afpl-app .pcard .countdown {
    margin-left: auto; font: 700 11px/1 var(--font-mono);
    color: var(--fg-2); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums;
}
.afpl-app .pcard .countdown.danger { color: var(--phase-sold); }
.afpl-app .pcard .footer {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-top: auto; gap: 12px;
}
.afpl-app .pcard .badge-corner { position: absolute; right: 10px; top: 10px; }
/* Inline "Bid của bạn" / "Bạn thắng" tag (replaces badge-corner). Sits in the
   top row between the eyebrow and the star — never overlaps the countdown. */
.afpl-app .pcard .afpl-card-tag {
    font-size: 9px;
    padding: 3px 7px;
    letter-spacing: 0.08em;
    margin-left: 4px;
}

/* Fallback bubble when team_id is missing or image fails to load. */
.afpl-app .pkit {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: 800 11px/1 var(--font-display); color: #fff;
    background: linear-gradient(135deg, #37003C, #963CFF);
    box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--border-2);
    flex-shrink: 0;
}
/* Actual team kit image. */
.afpl-app .pkit-img {
    display: inline-block;
    flex-shrink: 0;
    background: transparent;
}

/* Watchlist toggle star on each card. */
.afpl-app .afpl-star {
    background: transparent;
    border: 0;
    color: var(--fg-3);
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: color var(--dur-1), background var(--dur-1), transform var(--dur-1);
    margin-left: 4px;
}
.afpl-app .afpl-star:hover { background: rgba(252, 199, 77, 0.15); color: var(--phase-open-market-ink); }
.afpl-app .afpl-star.on { color: var(--phase-open-market-ink); }
.afpl-app .afpl-star.on:hover { background: rgba(252, 199, 77, 0.25); }
.afpl-app .afpl-star:active { transform: scale(0.9); }

/* ---- Bid history: player chip list + score tooltip ------- */
.afpl-app .afpl-hist-players {
    display: flex; flex-wrap: wrap; gap: 6px; max-width: 280px;
}
.afpl-app .afpl-hist-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px 2px 2px;
    background: var(--bg-2);
    border-radius: 999px;
    font: 600 11px/1.2 var(--font-body);
    color: var(--fg-1);
    max-width: 130px;
}
.afpl-app .afpl-hist-chip .name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* History "Điểm vòng" cell — clickable expander to reveal detail row. */
.afpl-app .afpl-hist-expand {
    background: transparent; border: 0; cursor: pointer;
    padding: 0; display: inline-flex; align-items: center;
    color: inherit;
}
.afpl-app .afpl-hist-expand:hover { color: var(--pl-magenta); }
.afpl-app .afpl-hist-expand[aria-expanded="true"] { color: var(--pl-magenta); }
/* Leaderboard "Điểm vòng" cell — same as history expander. */
.afpl-app .afpl-lb-expand {
    background: transparent; border: 0; cursor: pointer;
    padding: 0; display: inline-flex; align-items: center;
    color: inherit;
}
.afpl-app .afpl-lb-expand:hover { color: var(--pl-magenta); }
.afpl-app .afpl-lb-expand[aria-expanded="true"] { color: var(--pl-magenta); }
.afpl-app .afpl-hist-toplay {
    background: var(--pl-magenta-soft, rgba(150,60,255,0.10));
    color: var(--pl-magenta);
    font: 700 10px/1 var(--font-display);
    padding: 3px 8px; border-radius: 999px; margin-left: 6px;
    letter-spacing: 0.04em;
}

/* Detail row revealed under a history row. */
.afpl-app .afpl-hist-detail-inner {
    background: linear-gradient(180deg, rgba(150,60,255,0.04) 0%, rgba(150,60,255,0.01) 100%);
    padding: 14px 18px;
    border-top: 2px solid var(--pl-magenta);
}
.afpl-app .afpl-hist-detail-inner .dh-head {
    font: 600 13px/1.4 var(--font-body); color: var(--fg-1); margin-bottom: 10px;
}
.afpl-app .afpl-hist-detail-inner .dh-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 6px 16px;
}
.afpl-app .afpl-hist-detail-inner .dh-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; background: #fff;
    border: 1px solid var(--border-1); border-radius: 6px;
    font: 500 12px/1.4 var(--font-body);
}
.afpl-app .afpl-hist-detail-inner .dh-name { flex: 1; font: 700 13px var(--font-display); color: var(--fg-1); }
.afpl-app .afpl-hist-detail-inner .dh-pos  { font: 600 10px var(--font-body); color: var(--fg-3); }
.afpl-app .afpl-hist-detail-inner .dh-status {
    font: 700 9px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 6px; border-radius: 4px;
}
.afpl-app .dh-status-played  { background: rgba(0,118,128,0.12);  color: var(--pl-cyan-ink); }
.afpl-app .dh-status-playing { background: rgba(0,143,76,0.12);   color: var(--phase-auction-ink); }
.afpl-app .dh-status-to_play { background: rgba(36,2,35,0.06);    color: var(--fg-3); }
.afpl-app .afpl-hist-detail-inner .dh-pts {
    font: 800 18px/1 var(--font-display); min-width: 32px; text-align: right;
}

/* ---- Board grid responsive -------------------------------- */
@media (max-width: 1024px) { .afpl-app .board-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width:  640px) { .afpl-app .board-grid { grid-template-columns: 1fr !important; } }

/* All phase columns use auto-fit grid so cards stay at a comfortable width
   and the column "fills up" with more cards per row when it has space.
   Card min ~220px → desktop board col (~400px) fits 1, wide col fits 2-3. */
.afpl-app .board-col-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    align-content: start;
}
.afpl-app .board-col-cards .afpl-scroll-sentinel {
    grid-column: 1 / -1;
}

/* ---- Modal ------------------------------------------------ */
.afpl-modal-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(36,2,35,0.55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: afpl-fade-in 220ms var(--ease-out);
}
.afpl-modal {
    background: var(--bg-1); border: 1px solid var(--border-1);
    border-radius: 12px; box-shadow: var(--shadow-3);
    width: 100%; max-width: 480px; overflow: hidden;
    animation: afpl-modal-in 280ms var(--ease-out);
}
.afpl-modal-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--border-1); }
.afpl-modal-head h3 { font: 800 18px/1.2 var(--font-display); margin: 0; color: var(--fg-1); }
.afpl-modal-body { padding: 18px 20px; }
.afpl-modal-foot { padding: 12px 20px 18px; display: flex; gap: 10px; justify-content: flex-end; }
.afpl-modal label { display: block; font: 600 12px/1 var(--font-body); color: var(--fg-2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.afpl-modal .price-input {
    font: 800 32px/1 var(--font-display); padding: 14px 16px;
    border: 2px solid var(--border-2); border-radius: 12px; background: #fff;
    width: 100%; color: var(--fg-1);
    font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums;
}
.afpl-modal .price-input:focus { outline: none; border-color: var(--pl-magenta); box-shadow: 0 0 0 3px rgba(150,60,255,0.18); }
.afpl-modal .err { color: var(--phase-sold); font: 600 13px/1.4 var(--font-body); margin-top: 8px; min-height: 19px; }
.afpl-modal .info { font: 500 13px/1.5 var(--font-body); color: var(--fg-2); margin-top: 12px; }
.afpl-modal .info b { color: var(--fg-1); }
@keyframes afpl-fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes afpl-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98) } to { opacity: 1; transform: translateY(0) scale(1) } }

/* ---- Toast host ------------------------------------------- */
.afpl-app .toast-host {
    position: fixed; top: 80px; right: 20px; z-index: 1100;
    display: flex; flex-direction: column; gap: 10px;
    width: min(380px, calc(100vw - 40px));
    pointer-events: none;
}
.afpl-app .toast-host > * { pointer-events: auto; }
.afpl-toast {
    position: relative;
    background: var(--bg-1); border: 1px solid var(--border-1);
    border-radius: 8px; box-shadow: var(--shadow-2);
    padding: 12px 14px 12px 18px;
    display: flex; align-items: center; gap: 12px;
    animation: afpl-toast-in 220ms var(--ease-out);
    font: 600 13px/1.4 var(--font-body); color: var(--fg-1);
}
.afpl-toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.afpl-toast.t-success::before { background: var(--phase-auction); }
.afpl-toast.t-danger::before  { background: var(--phase-sold); }
.afpl-toast.t-info::before    { background: var(--pl-cyan); }
.afpl-toast.t-warn::before    { background: var(--phase-open-market); }
@keyframes afpl-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Bell dropdown --------------------------------------- */
.afpl-bell-dropdown {
    position: absolute; top: 56px; right: 20px; z-index: 90;
    width: 340px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid rgba(55,0,60,0.12);
    border-radius: 12px; box-shadow: 0 12px 36px rgba(55,0,60,0.18);
    overflow: hidden;
}
.afpl-bell-dropdown .bd-head {
    display: flex; align-items: center; padding: 14px 16px;
    border-bottom: 1px solid var(--border-1);
}
.afpl-bell-dropdown .bd-title { font: 800 14px/1 var(--font-display); flex: 1; color: var(--fg-1); }
.afpl-bell-dropdown .bd-mark { font: 600 11px var(--font-body); color: var(--pl-magenta); cursor: pointer; }
.afpl-bell-dropdown .bd-mark:hover { text-decoration: underline; }
.afpl-bell-dropdown .bd-item {
    padding: 12px 16px; border-bottom: 1px solid var(--border-1); cursor: pointer;
    transition: background var(--dur-1);
}
.afpl-bell-dropdown .bd-item:hover { background: rgba(55,0,60,0.04); }
.afpl-bell-dropdown .bd-item.unread { background: rgba(150,60,255,0.05); }
.afpl-bell-dropdown .bd-itemtitle { font: 700 13px/1.3 var(--font-display); color: var(--fg-1); }
.afpl-bell-dropdown .bd-itemsub   { font: 500 12px/1.4 var(--font-body); color: var(--fg-2); margin-top: 2px; }
.afpl-bell-dropdown .bd-time      { font: 600 11px/1 var(--font-body); color: var(--fg-3); margin-top: 3px; }
.afpl-bell-dropdown .bd-empty     { padding: 24px 16px; text-align: center; color: var(--fg-3); font: 500 12px var(--font-body); }

/* ---- Sub-tab pills (Stats sub-tabs, Leaderboard scope) ---- */
.afpl-app .afpl-stats-sub,
.afpl-app .afpl-lb-tab {
    background: transparent;
    color: var(--fg-2);
    box-shadow: none;
    border-radius: 4px;
}
.afpl-app .afpl-stats-sub.active,
.afpl-app .afpl-lb-tab.active {
    background: var(--pl-magenta) !important;
    color: #fff !important;
}

/* ---- Tables — light surface ---- */
.afpl-app .dtable th {
    font: 700 10px/1 var(--font-display);
    letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--rule-ink); color: #fff;
    text-align: left; padding: 10px 14px;
}
.afpl-app .dtable td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(36,2,35,0.06);
    vertical-align: middle;
    font-size: 13px;
}
.afpl-app .dtable tr:hover td { background: var(--bg-2); }
.afpl-app .dtable tr.you td   { background: rgba(150,60,255,0.07); }

/* ---- Watchlist row (desktop): kit | info | price | close | actions in one row ---- */
.afpl-app .afpl-watch-row {
    padding: 12px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 14px;
}
.afpl-app .afpl-watch-row .aw-actions { display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================================
   MOBILE RESPONSIVE
   ========================================================================= */
@media (max-width: 768px) {
    body { padding-top: 0 !important; }
    /* SocialSignIn rendered in-flow inside the topnav (see grid below);
       compact padding so it fits next to the GW chip without overflow. */
    .afpl-app .afpl-social-wrap .user-info { padding: 4px 8px !important; }

    /* ---- Topnav: 2-row grid on mobile.
       Row 1: brand + SocialSignIn (right-aligned)
       Row 2: Ngân sách (spans 3 cols) + bell (justified right) ---- */
    .afpl-app .topnav-inner {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas:
            "brand social social social"
            "budget budget budget bell";
        height: auto;
        padding: 8px 12px 14px;
        gap: 10px 10px;
    }
    .afpl-app .brand              { grid-area: brand; }
    .afpl-app .afpl-social-wrap   { grid-area: social; justify-self: end; margin-left: 0 !important; }
    .afpl-app .topnav .budget     { grid-area: budget; min-width: 0; }
    .afpl-app .topnav .icon-btn   { grid-area: bell; width: 32px; height: 32px; font-size: 14px; justify-self: end; align-self: center; }
    .afpl-app .topnav .spacer     { display: none; }
    .afpl-app .brand img { height: 26px !important; }
    .afpl-app .brand strong { font-size: 13px !important; }
    .afpl-app .topnav .budget-row { font-size: 10px; }
    /* Meta pill: smaller on mobile, wraps to its own line under the H2. */
    .afpl-app .sec-h { flex-wrap: wrap; }
    .afpl-app .sec-h .meta { font-size: 11px; padding: 6px 10px; }
    /* Compact SocialSignIn so brand+gw+widget all fit on one row */
    .afpl-app .afpl-social-wrap .user-avatar { width: 22px !important; height: 22px !important; }
    .afpl-app .afpl-social-wrap #username { font-size: 11px !important; }

    /* ---- Tabbar: bigger touch targets, smoother scroll ---- */
    .afpl-app .tabbar-inner { padding: 0 8px; gap: 2px; }
    .afpl-app .tab { padding: 14px 10px 12px; font-size: 11px; letter-spacing: 0.04em; }
    .afpl-app .tab.active::after { left: 8px; right: 8px; }

    /* ---- Section header stack ---- */
    .afpl-app .sec-h { flex-wrap: wrap; gap: 6px; }
    .afpl-app .sec-h h2 { font-size: 22px !important; }

    /* ---- LiveBoard toolbar: pos-filter + search + sort stack with clear
       vertical breathing room (CSS gap + per-item margin so the rounded
       pills never feel glued together on small screens). ---- */
    .afpl-app .afpl-toolbar { flex-wrap: wrap; gap: 14px; }
    .afpl-app .afpl-toolbar .input {
        max-width: none !important;
        flex: 1 1 100%;
        margin: 0 !important;
    }
    /* Sort: hide the "Sắp xếp" label on mobile — the dropdown is self-
       describing. (On the desktop layout the label still gives context.) */
    .afpl-app .afpl-toolbar label[for="afpl-sort"] { display: none !important; }
    .afpl-app .afpl-toolbar #afpl-sort {
        flex: 1 1 100%;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 999px !important;   /* match search-input pill shape */
        height: 38px !important;
    }
    .afpl-app .afpl-toolbar > div[style*="flex:1"] { display: none; }
    .afpl-app .afpl-pos-filter { flex-wrap: nowrap; overflow-x: auto; }

    /* Bid modal: centered vertically with a small gutter ---- */
    .afpl-modal-backdrop { padding: 16px; align-items: center; }
    .afpl-modal { max-width: 100%; width: 100%; }
    .afpl-modal-head h3 { font-size: 16px; }
    .afpl-modal .price-input { font-size: 26px; padding: 12px; }

    /* ---- Tables: horizontal scroll wrapper. The .surface-1 around .dtable
       has inline `overflow:hidden` (ASCX markup) — override with !important so
       overflow-x:auto allows swipe access to clipped columns (incl. Action). ---- */
    .afpl-app .dtable { min-width: 560px; }
    .afpl-app .dtable th, .afpl-app .dtable td { padding: 8px 10px; font-size: 12px; }

    /* ---- Watchlist compact 2-row mobile layout (3 cols × 2 rows) ----
       Desktop is 5 cols in a single row; on mobile that overflows. Use named
       grid areas so price/close/actions tuck under the kit+info row. */
    .afpl-app .afpl-watch-row {
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas: "kit info close" "price price actions" !important;
        row-gap: 6px !important;
        column-gap: 10px !important;
    }
    .afpl-app .afpl-watch-row .aw-kit     { grid-area: kit; }
    .afpl-app .afpl-watch-row .aw-info    { grid-area: info; min-width: 0; }
    .afpl-app .afpl-watch-row .aw-price   { grid-area: price; text-align: left !important; display: flex; align-items: baseline; gap: 6px; }
    .afpl-app .afpl-watch-row .aw-price > div:nth-child(2) { margin-top: 0 !important; }
    .afpl-app .afpl-watch-row .aw-close   { grid-area: close; min-width: 0 !important; }
    .afpl-app .afpl-watch-row .aw-actions { grid-area: actions; display: flex; align-items: center; gap: 6px; justify-self: end; }

    /* History detail row: 1 col instead of auto-fit */
    .afpl-app .afpl-hist-detail-inner .dh-list { grid-template-columns: 1fr !important; }
    .afpl-app .afpl-hist-detail-inner { padding: 10px 12px; }

    /* Toast host: full-width banner */
    .afpl-app .toast-host { right: 10px; left: 10px; width: auto; top: 60px; }
}

/* Table-containing surface-1 needs horizontal scroll on mobile. Inline
   style="overflow:hidden" on the wrapper requires !important to override.
   Use direct-child selectors so summary tiles (nested inside .afpl-*-sum
   grids) stay unaffected. */
@media (max-width: 768px) {
    .afpl-app .afpl-tab-bids > .surface-1,
    .afpl-app .afpl-tab-history > .surface-1,
    .afpl-app .afpl-tab-leaderboard > .surface-1,
    .afpl-app .afpl-tab-stats > .afpl-stats-panel > .surface-1 {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}