/* Desktop-only leaderboard content layout.
   Keeps global header/navigation and mobile layout untouched. */
@media (min-width:1024px){
  .bvt-main-stack{
    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    gap:16px!important;
    align-items:start!important;
  }

  /* Keep the current profile banner full width. */
  .bvt-profile-card{
    grid-column:1 / -1!important;
    grid-row:1!important;
  }

  /* Flatten only the two layout wrappers so their existing cards can be
     positioned in one coherent desktop dashboard. */
  .bvt-competency-layout,
  .bvt-bottom-layout{
    display:contents!important;
  }

  /* Row 2: competency + visual insight */
  .bvt-competency-card{
    grid-column:1 / span 7!important;
    grid-row:2!important;
    min-width:0!important;
  }

  .bvt-insight-column{
    grid-column:8 / span 5!important;
    grid-row:2!important;
    min-width:0!important;
    gap:16px!important;
  }

  /* Row 3: thinking habits + achievement badges */
  .bvt-thinking-section{
    grid-column:1 / span 7!important;
    grid-row:3!important;
    min-width:0!important;
  }

  .bvt-badges-section{
    grid-column:8 / span 5!important;
    grid-row:3!important;
    min-width:0!important;
    padding:16px!important;
    background:#fff!important;
    border:1px solid #e4e2de!important;
    border-radius:10px!important;
    box-shadow:0 3px 12px rgba(15,23,42,.05)!important;
  }

  /* Row 4: milestones + recent practice */
  .bvt-milestones-card{
    grid-column:1 / span 7!important;
    grid-row:4!important;
    min-width:0!important;
  }

  .bvt-history-card{
    grid-column:8 / span 5!important;
    grid-row:4!important;
    min-width:0!important;
  }

  /* Compact, consistent desktop card language under the profile. */
  .bvt-competency-card,
  .bvt-radar-card,
  .bvt-streak-card,
  .bvt-thinking-section,
  .bvt-milestones-card,
  .bvt-history-card{
    border-radius:10px!important;
    box-shadow:0 3px 12px rgba(15,23,42,.05)!important;
  }

  .bvt-competency-card,
  .bvt-radar-card,
  .bvt-thinking-section,
  .bvt-milestones-card,
  .bvt-history-card{
    padding:16px!important;
  }

  /* Competencies: use the PC width better, like the reference dashboard. */
  #bvt-competency-container{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  #bvt-competency-container>div{
    min-width:0!important;
    border-radius:10px!important;
    padding:12px!important;
  }

  /* Keep radar readable but reduce wasted height. */
  .bvt-radar-visual{
    width:210px!important;
    height:210px!important;
    margin:4px auto!important;
  }

  .bvt-daily-tip{
    border-radius:10px!important;
    padding:12px!important;
    margin-top:8px!important;
  }

  .bvt-streak-card{
    padding:14px!important;
  }

  .bvt-streak-card>div:first-child{
    width:64px!important;
    height:64px!important;
    border-radius:10px!important;
  }

  /* Thinking section: denser two-column list on desktop. */
  .bvt-thinking-section{
    background:linear-gradient(90deg,rgba(250,245,255,.76),rgba(238,242,255,.76))!important;
    border:1px solid #e9d5ff!important;
    gap:12px!important;
  }

  .bvt-thinking-head-icon,
  .bvt-section-head-icon{
    border-radius:10px!important;
  }

  #bvt-thinking-badges-container{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  #bvt-thinking-badges-container>div{
    min-width:0!important;
    border-radius:10px!important;
  }

  /* Achievement badges: compact 2xN mosaic in the right column. */
  .bvt-section-head{
    align-items:flex-start!important;
    gap:10px!important;
  }

  #bvt-badges-container{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  #bvt-badges-container>div{
    min-width:0!important;
    border-radius:10px!important;
  }

  /* Bottom row spacing and visual hierarchy. */
  .bvt-milestones-card,
  .bvt-history-card{
    gap:12px!important;
  }

  #bvt-growth-milestones-container,
  #bvt-recent-history-container{
    gap:8px!important;
  }

  #bvt-growth-milestones-container>div,
  #bvt-recent-history-container>div{
    border-radius:10px!important;
  }

  .bvt-share-button{
    height:42px!important;
    border-radius:10px!important;
  }

  /* Do not let long dynamic text force the right column wider. */
  .bvt-insight-column,
  .bvt-badges-section,
  .bvt-history-card,
  #bvt-badges-container,
  #bvt-thinking-badges-container{
    overflow-wrap:anywhere;
  }
}

@media (min-width:1280px){
  .bvt-main-stack{gap:18px!important}

  .bvt-competency-card,
  .bvt-radar-card,
  .bvt-thinking-section,
  .bvt-badges-section,
  .bvt-milestones-card,
  .bvt-history-card{padding:18px!important}

  /* PC experiment only:
     - Radar moves to the wider left column.
     - Competency tree moves to the right as a compact progress list.
     Tablet/mobile remain governed by the existing rules above. */
  .bvt-insight-column{
    grid-column:1 / span 7!important;
    grid-row:2!important;
  }

  .bvt-competency-card{
    grid-column:8 / span 5!important;
    grid-row:2!important;
  }

  /* Give the seven-axis radar enough breathing room on PC. */
  .bvt-radar-card{
    min-height:520px!important;
  }

  .bvt-radar-visual{
    width:340px!important;
    height:340px!important;
    max-width:100%!important;
    margin:12px auto 10px!important;
  }

  .bvt-radar-title{
    font-size:28px!important;
    line-height:36px!important;
  }

  /* Right-side competency tree becomes a single compact progress list. */
  .bvt-competency-card{
    gap:12px!important;
  }

  .bvt-competency-header{
    gap:8px!important;
    padding-bottom:6px!important;
  }

  .bvt-competency-header #bvt-competency-title{
    font-size:24px!important;
    line-height:32px!important;
  }

  .bvt-updated-pill{
    padding:4px 10px!important;
  }

  #bvt-competency-container{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }

  #bvt-competency-container>div{
    width:100%!important;
    min-width:0!important;
    padding:12px!important;
    border-radius:10px!important;
    gap:8px!important;
  }

  #bvt-competency-container>div>div:first-child{
    align-items:center!important;
    gap:10px!important;
  }

  #bvt-competency-container>div>div:first-child>div:first-child{
    width:46px!important;
    height:46px!important;
    border-radius:10px!important;
  }

  #bvt-competency-container h3{
    font-size:18px!important;
    line-height:24px!important;
  }

  #bvt-competency-container>div>div:nth-child(2){
    padding-left:56px!important;
  }

  #bvt-competency-container>div>div:nth-child(2)>div:first-child{
    gap:8px!important;
  }

  #bvt-competency-container>div>div:nth-child(2)>p{
    display:none!important;
  }

  #bvt-competency-container [role="progressbar"]{
    height:10px!important;
  }

  /* Keep the blue streak card directly below the radar as in the PC mockup. */
  .bvt-streak-card{
    margin-top:0!important;
  }
}


/* PC daily stars leaderboard — replaces duplicate competency tree */
.bvt-today-leaderboard-card{display:none}

@media (min-width:1024px){
  /* Cây năng lực chi tiết đã có ở Góc phụ huynh.
     Trên PC Bảng vàng dùng cột phải cho xếp hạng XP hôm nay. */
  .bvt-competency-card{
    display:none!important;
  }

  .bvt-today-leaderboard-card{
    display:flex!important;
    grid-column:8 / span 5!important;
    grid-row:2!important;
    min-width:0!important;
    min-height:520px!important;
    padding:18px!important;
    flex-direction:column!important;
    gap:14px!important;
    border:1px solid #e4e2de!important;
    border-radius:10px!important;
    box-shadow:0 3px 12px rgba(15,23,42,.05)!important;
    overflow:hidden!important;
  }

  .bvt-today-leaderboard-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding-bottom:4px;
  }

  .bvt-today-leaderboard-kicker{
    margin-bottom:4px;
    color:#9a5b00;
    font-size:12px;
    line-height:16px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
  }

  .bvt-today-leaderboard-head h2{
    margin:0;
    color:#0758b5;
    font-size:27px;
    line-height:34px;
    font-weight:900;
    letter-spacing:-.025em;
  }

  .bvt-today-leaderboard-head p{
    margin:4px 0 0;
    color:#2563a9;
    font-size:13px;
    line-height:18px;
    font-weight:800;
  }

  .bvt-today-leaderboard-date{
    display:flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:7px 9px;
    color:#0f3f72;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:10px;
  }

  .bvt-today-leaderboard-date>.material-symbols-outlined{
    font-size:20px;
  }

  .bvt-today-leaderboard-date>span:last-child{
    display:flex;
    flex-direction:column;
    gap:1px;
  }

  .bvt-today-leaderboard-date strong{
    font-size:10px;
    line-height:13px;
  }

  .bvt-today-leaderboard-date small{
    color:#0758b5;
    font-size:10px;
    line-height:13px;
    font-weight:900;
  }

  .bvt-today-leaderboard-list{
    display:flex;
    flex-direction:column;
    gap:7px;
  }

  .bvt-today-leaderboard-row{
    min-height:52px;
    display:grid;
    grid-template-columns:38px 44px minmax(0,1fr) auto auto;
    align-items:center;
    gap:9px;
    padding:7px 10px;
    background:#fafafa;
    border:1px solid #efede8;
    border-radius:10px;
  }

  .bvt-today-leaderboard-row:nth-child(1){
    background:linear-gradient(90deg,#fff5d9,#fffaf0);
    border-color:#f4d68b;
  }

  .bvt-today-leaderboard-row:nth-child(2){
    background:linear-gradient(90deg,#f6f8fb,#fff);
  }

  .bvt-today-leaderboard-row:nth-child(3){
    background:linear-gradient(90deg,#fff4ea,#fff);
  }

  .bvt-today-leaderboard-row.is-me{
    outline:2px solid rgba(16,185,129,.4);
    outline-offset:-2px;
    background:linear-gradient(90deg,#f0fdf4,#ffffff);
    box-shadow:0 0 10px rgba(16,185,129,.12);
  }

  .bvt-today-rank{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#12345b;
    font-size:15px;
    line-height:1;
    font-weight:900;
  }

  .bvt-today-rank.is-medal{
    font-size:24px;
  }

  .bvt-today-avatar{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#fff;
    box-shadow:0 2px 6px rgba(15,23,42,.06);
    font-size:24px;
  }

  .bvt-today-name{
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px;
  }

  .bvt-today-name strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#172033;
    font-size:14px;
    line-height:18px;
    font-weight:900;
  }

  .bvt-today-name small{
    flex:0 0 auto;
    padding:2px 5px;
    color:#047857;
    background:#d1fae5;
    border-radius:999px;
    font-size:9px;
    line-height:12px;
    font-weight:900;
  }

  .bvt-today-grade{
    padding:4px 8px;
    color:#1d4ed8;
    background:#dbeafe;
    border-radius:999px;
    font-size:10px;
    line-height:13px;
    font-weight:900;
    white-space:nowrap;
  }

  .bvt-today-xp{
    color:#c45c00;
    font-size:14px;
    line-height:18px;
    font-weight:900;
    white-space:nowrap;
  }

  @keyframes bvtShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  @keyframes bvtFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .bvt-today-fade-in {
    animation: bvtFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .bvt-today-skeleton-wrap {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .bvt-today-skeleton-row {
    min-height: 52px;
    display: grid;
    grid-template-columns: 38px 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    background: #fafafa;
    border: 1px solid #efede8;
    border-radius: 10px;
  }

  .bvt-skeleton {
    background: linear-gradient(90deg, #f0eee9 25%, #f9f8f6 50%, #f0eee9 75%);
    background-size: 200% 100%;
    animation: bvtShimmer 1.6s infinite linear;
    border-radius: 6px;
  }

  .bvt-sk-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin: 0 auto;
  }

  .bvt-sk-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .bvt-sk-name {
    width: 60%;
    height: 15px;
  }

  .bvt-sk-grade {
    width: 46px;
    height: 20px;
    border-radius: 999px;
  }

  .bvt-sk-xp {
    width: 52px;
    height: 18px;
    border-radius: 4px;
  }

  .bvt-sk-me-card {
    min-height: 100px;
    padding: 12px;
    background: #f7faf8;
    border: 1px solid #e1efe7;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .bvt-today-leaderboard-empty{
    min-height:254px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:24px;
    text-align:center;
    color:#64748b;
    background:#faf9f6;
    border:1px dashed #d9d6cf;
    border-radius:12px;
  }

  .bvt-today-leaderboard-empty>span{
    font-size:30px;
  }

  .bvt-today-leaderboard-empty strong{
    color:#334155;
    font-size:14px;
    line-height:19px;
  }

  .bvt-today-leaderboard-empty small{
    max-width:330px;
    font-size:11px;
    line-height:16px;
  }

  .bvt-today-leaderboard-empty a{
    margin-top:4px;
    padding:7px 12px;
    color:#fff;
    background:#10b981;
    border-radius:9px;
    font-size:11px;
    line-height:15px;
    font-weight:900;
    text-decoration:none;
  }

  .bvt-today-me-card{
    margin-top:auto;
    padding:12px;
    background:linear-gradient(105deg,#ecfdf5,#f0fdfa);
    border:1px solid #c7f3df;
    border-radius:12px;
  }

  .bvt-today-me-card[hidden]{
    display:none!important;
  }

  .bvt-today-me-label{
    margin-bottom:8px;
    color:#047857;
    font-size:12px;
    line-height:16px;
    font-weight:900;
  }

  .bvt-today-me-body{
    display:grid;
    grid-template-columns:54px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
  }

  .bvt-today-me-avatar{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#ffd28a;
    box-shadow:0 3px 0 #dc8c15;
    font-size:30px;
  }

  .bvt-today-me-name{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
  }

  .bvt-today-me-name strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#172033;
    font-size:17px;
    line-height:22px;
    font-weight:900;
  }

  .bvt-today-me-name span{
    width:max-content;
    padding:3px 7px;
    color:#1d4ed8;
    background:#dbeafe;
    border-radius:999px;
    font-size:10px;
    line-height:13px;
    font-weight:900;
  }

  .bvt-today-me-rank{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    white-space:nowrap;
  }

  .bvt-today-me-rank strong{
    color:#059669;
    font-size:17px;
    line-height:21px;
    font-weight:900;
  }

  .bvt-today-me-rank span{
    color:#047857;
    font-size:10px;
    line-height:13px;
    font-weight:800;
  }

  .bvt-today-me-message{
    margin-top:9px;
    padding:7px 9px;
    color:#047857;
    background:rgba(255,255,255,.7);
    border-radius:9px;
    font-size:10px;
    line-height:15px;
    font-weight:800;
  }

  .bvt-today-me-cta{
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .bvt-today-me-cta-body{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .bvt-today-me-cta-icon{
    font-size:24px;
    flex-shrink:0;
  }

  .bvt-today-me-cta-info{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .bvt-today-me-cta-info strong{
    color:#065f46;
    font-size:13px;
    line-height:16px;
    font-weight:900;
  }

  .bvt-today-me-cta-info small{
    color:#047857;
    font-size:11px;
    line-height:14px;
    font-weight:600;
  }

  .bvt-today-me-cta-btn{
    flex-shrink:0;
    padding:6px 12px!important;
    background:#059669!important;
    color:#ffffff!important;
    border-radius:10px!important;
    font-size:12px!important;
    font-weight:900!important;
    text-decoration:none!important;
    box-shadow:0 2px 0 #047857!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease;
  }

  .bvt-today-me-cta-btn:hover{
    background:#047857!important;
  }
}

@media (min-width:1280px) and (max-width:1450px){
  .bvt-today-leaderboard-card{
    padding:14px!important;
  }

  .bvt-today-leaderboard-head h2{
    font-size:23px;
    line-height:30px;
  }

  .bvt-today-leaderboard-row{
    grid-template-columns:34px 38px minmax(0,1fr) auto auto;
    gap:7px;
    padding-left:8px;
    padding-right:8px;
  }

  .bvt-today-avatar{
    width:36px;
    height:36px;
    font-size:22px;
  }

  .bvt-today-name strong,
  .bvt-today-xp{
    font-size:12px;
  }
}