/* ---------------- Shared components ----------------
   These rules used to live inside styles/courses.css and styles/drawer.css. Both files were
   deleted when the course system / exam-reference-material system were removed — but most of
   what they defined were actually generic, app-wide component classes (card grids, chips, the
   account/admin stat blocks, .content-title section headers) that plenty of *other* screens
   depend on: the takeable-exam cards, the "บันทึกไว้" stats, every admin panel, analytics,
   pricing, profile. Only the truly course/course-search-specific rules (the old home hero
   title/subtitle, the course search box, the course-only .card-source/.card-price) were left
   out on purpose — everything below is still in active use. */

  .home-header{padding:24px 20px 8px;}
  .brand-row{display:flex; align-items:center; gap:10px;}
  .home-login-btn{width:auto !important; margin-left:auto; padding:9px 18px !important; font-size:var(--fs-base) !important;}
  .brand-badge{width:30px;height:30px;border-radius:50%;background:var(--black);color:var(--yellow);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-sm);}
  .brand-label{font-size:var(--fs-xs); letter-spacing:0.14em; color:var(--muted); font-weight:600;}

  .chip-row{display:flex; gap:8px; overflow-x:auto; padding:14px 20px 4px; scrollbar-width:none;}
  .chip-row::-webkit-scrollbar{display:none;}
  .chip{flex:none; border:1.5px solid var(--line); background:var(--card); border-radius:999px; padding:8px 14px; font-size:var(--fs-sm); font-weight:500; color:var(--ink); white-space:nowrap; transition:background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;}
  .chip.active{background:var(--black); color:#fff; border-color:var(--black);}
  .chip:active{transform:scale(0.94);}

  /* Stacked stats shown on the "บันทึกไว้" tab (saved/total exams) and reused inside the
     account panel's dark card. */
  .bookmark-stats{padding:16px 20px 0;}
  .bookmark-stats .stat-row:first-child{margin-top:0;}
  @media (min-width:860px){ .bookmark-stats{padding-left:0; padding-right:0;} }

  .bookmark-section-title{padding:16px 20px 0; font-size:var(--fs-md); font-weight:800;}
  @media (min-width:860px){ .bookmark-section-title{padding-left:0; padding-right:0;} }
  #bookmark-exams-section{border-top:1px solid var(--line); margin-top:18px; padding-bottom:100px;}
  #bookmark-exams-section .grid{padding-top:14px;}
  @media (min-width:860px){ #bookmark-exams-section{padding:0 36px 60px;} }

  .grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; padding:0 20px;}
  @media (min-width:860px){ .grid{padding:0; grid-template-columns:repeat(2,1fr);} }
  @media (max-width:480px){ .grid{grid-template-columns:1fr;} }

  /* Round 11: added box-shadow to the transition (was transform-only) so pointer devices get a
     lift-on-hover to match the tap-scale that touch devices already had — .course-card is the
     base class for every card grid in the app (courses, marketplace listings via
     .mkt-market-card, seller listings via .mkt-listing-card), so this one rule covers all of
     them. Hover lift is gated to devices that actually have hover (desktop/mouse) so it doesn't
     leave a "stuck" raised card on touch screens, which have no hover-out event. */
  .course-card{background:var(--card); border-radius:var(--radius); padding:16px; border:1px solid var(--line); display:flex; flex-direction:column; gap:9px; cursor:pointer; transition:transform 180ms var(--ease-pop), box-shadow 180ms var(--ease-pop);}
  .course-card:active{transform:scale(0.97);}
  @media (hover:hover){
    .course-card:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(18,18,18,0.09);}
  }
  .card-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .card-no{font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.06em; background:var(--yellow); color:var(--black); padding:3px 8px; border-radius:6px;}
  /* Round 11: bookmark heart previously flipped color with no feedback at all — the
     `.active` state now replays the shared motionPop keyframe (main.css) so saving/un-saving an
     exam gets the same quick "acknowledged" bounce apps like this are expected to have. Scoped to
     .active only (not a permanent animation) so it plays once per toggle-on, not on every
     re-render of a card that was already saved. */
  .bookmark-btn{border:none; background:none; color:#C9C6BA; display:flex; transition:color 150ms ease;}
  .bookmark-btn.active{color:var(--coral); animation:motionPop 320ms var(--ease-pop);}
  @media (prefers-reduced-motion:reduce){ .bookmark-btn.active{animation:none;} }
  .card-name{font-size:var(--fs-md); font-weight:700; line-height:1.4;}
  .tag-row{display:flex; gap:6px; flex-wrap:wrap;}
  .tag{font-size:var(--fs-2xs); font-weight:600; padding:4px 9px; border-radius:999px;}
  .tag-yellow{background:#FBEBAF; color:#6B5A05;} .tag-blue{background:#D9F1F6; color:var(--info);}
  .card-teacher{font-size:var(--fs-xs); color:var(--muted); font-weight:300;}
  .card-cta{display:flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:600; color:var(--black); margin-top:auto;}

  .empty-state{text-align:center; padding:70px 30px; color:var(--muted);}
  .empty-state h3{font-size:var(--fs-lg); font-weight:700; color:var(--ink); margin-bottom:6px;}
  .empty-state p{font-size:var(--fs-base); font-weight:300; margin-bottom:20px;}
  .empty-state.empty-state-compact{padding:10px 20px 22px; text-align:left;}
  .empty-state.empty-state-compact h3{font-size:var(--fs-base); margin-bottom:4px;}
  .empty-state.empty-state-compact p{font-size:var(--fs-sm); margin-bottom:0;}

  .bottom-nav{position:fixed; left:0; right:0; bottom:0; height:78px; background:var(--black); display:flex; align-items:center; justify-content:space-around; z-index:5; border-top-left-radius:22px; border-top-right-radius:22px; padding-bottom:10px;}
  /* Round 11: nav-btn icon+label swapped color instantly on tab switch. Now fades the color and
     gives the icon a tiny lift so the currently-active tab reads as "risen" rather than just
     "recolored" — subtle, but this is the single most-tapped control in the app so it's worth
     the extra care. transform lives on .nav-btn svg (not the button itself) so the tap-target
     size/position never shifts, only the icon inside it. */
  .nav-btn{background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:4px; color:#7C7A72; font-size:var(--fs-2xs); font-weight:600; transition:color 180ms ease;}
  .nav-btn svg{transition:transform 220ms var(--ease-pop);}
  .nav-btn.active{color:var(--yellow);}
  .nav-btn.active svg{transform:translateY(-2px);}

  .account-wrap{padding:26px 20px 40px;}
  .z-results .account-wrap{padding-left:0; padding-right:0;}
  .account-card{background:var(--black); color:#fff; border-radius:20px; padding:22px; display:flex; align-items:center; gap:14px;}
  .account-avatar{width:50px;height:50px;border-radius:50%; background:var(--yellow); color:var(--black); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:var(--fs-lg);}
  .account-email{font-size:var(--fs-sm); color:#B7B5AB; margin-top:2px;}
  .account-name{font-weight:700; font-size:var(--fs-md);}
  .stat-row{display:flex; gap:10px; margin-top:16px;}
  .stat-box{flex:1; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; text-align:center; transition:box-shadow 180ms ease, transform 180ms var(--ease-pop);}
  @media (hover:hover){ .stat-box:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(18,18,18,0.07);} }
  .stat-num{font-size:var(--fs-xl); font-weight:800;}
  .stat-label{font-size:var(--fs-2xs); color:var(--muted); margin-top:2px;}
  .account-auth-btn{margin-top:22px; width:100%;}
  .mode-note{margin-top:18px; font-size:var(--fs-xs); color:var(--muted); line-height:1.6; background:var(--card); border:1px dashed var(--line); border-radius:12px; padding:12px;}

  /* The feedback widget's textarea reuses .admin-input, which is styled for light-background
     admin forms elsewhere (dark text, near-transparent-dark fill) — but it sits inside the
     black .account-card here, which made the typed text unreadable (near-black on near-black).
     Override just this instance for a dark background instead. */
  #fb-comment{background:rgba(255,255,255,0.1); color:#fff;}
  #fb-comment::placeholder{color:#B7B5AB;}
  #fb-comment:focus{outline:2px solid var(--yellow);}

  /* ---- from styles/drawer.css (also deleted along with the course/exam drawers) — this one
     section-header class is still used everywhere: analytics, pricing, profile, admin panels. ---- */
  .content-title{font-size:var(--fs-xs); color:var(--muted); font-weight:700; letter-spacing:0.05em; margin:24px 0 12px;}