/* "The PYQS" Home Feed - standalone stylesheet (does not load style.css).
   Tenant primary colour arrives via --brand (see brand_css_vars); the
   fallbacks below are the platform's default palette. */
:root {
  --f-primary: var(--brand, #2563EB);
  --f-primary-dark: var(--brand-dark, #1D4ED8);
  --f-primary-light: var(--brand-light, #DBEAFE);
  --f-navy: #172554;
  --f-purple: #6D28D9;
  --f-yellow: #FBBF24;
  --f-green: #16A34A;
  --f-bg: #F8FAFC;
  --f-card: #FFFFFF;
  --f-text: #0F172A;
  --f-muted: #64748B;
  --f-line: #E5E7EB;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--f-bg); color: var(--f-text); font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
[hidden] { display: none !important; }

/* ---- header ---- */
.fh { position: sticky; top: 0; z-index: 30; height: 68px; display: flex; align-items: center; gap: 24px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--f-line); }
.fh-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fh-logo { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--f-primary), var(--f-purple)); display: flex; align-items: center; justify-content: center; }
.fh-logoimg { height: 38px; width: auto; border-radius: 8px; }
.fh-name { display: flex; flex-direction: column; line-height: 1.15; }
.fh-name b { font-size: 17px; font-weight: 800; color: var(--f-navy); }
.fh-name small { font-size: 10.5px; color: var(--f-muted); }
.fh-search { flex: 1; max-width: 560px; }
.fh-search input { width: 100%; height: 42px; border-radius: 10px; border: 1px solid var(--f-line); background: var(--f-bg); padding: 0 14px; font: inherit; font-size: 13.5px; }
.fh-search input:focus { outline: 2px solid var(--f-primary-light); border-color: var(--f-primary); background: #fff; }
.fh-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.fh-user { font-weight: 600; font-size: 13.5px; padding: 8px 14px; border-radius: 10px; background: var(--f-bg); border: 1px solid var(--f-line); }

.fbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.fbtn-primary { background: var(--f-primary); color: #fff; }
.fbtn-primary:hover { background: var(--f-primary-dark); }
.fbtn-yellow { background: var(--f-yellow); color: #422006; }
.fbtn-outline { background: #fff; border-color: var(--f-line); color: var(--f-text); }

/* ---- shell ---- */
.fshell { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 230px minmax(0, 1fr) 320px; gap: 24px; padding: 20px 24px 40px; align-items: start; }
.fshell.no-rail { grid-template-columns: 230px minmax(0, 1fr); }
.fside { position: sticky; top: 88px; }
.fside nav { display: flex; flex-direction: column; gap: 2px; }
.fside nav a { padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: #334155; }
.fside nav a:hover { background: #fff; }
.fside nav a.active { background: var(--f-primary-light); color: var(--f-primary-dark); }
.fside-cta { margin-top: 20px; padding: 16px; border-radius: 14px; background: linear-gradient(160deg, var(--f-navy), var(--f-purple)); color: #fff; }
.fside-cta p { margin: 6px 0 12px; font-size: 12.5px; color: #dbeafe; }
.fmain { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.fnote { padding: 10px 14px; border-radius: 10px; background: #fef3c7; color: #92400e; font-size: 12.5px; }
.fnote a { text-decoration: underline; font-weight: 600; }

/* ---- hero ---- */
.fhero { border-radius: 16px; padding: 34px 36px; color: #fff; background: radial-gradient(1200px 300px at 90% -20%, rgba(251,191,36,.25), transparent 60%), linear-gradient(120deg, var(--f-navy), var(--f-primary-dark) 70%, var(--f-purple)); }
.fhero h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.15; font-weight: 800; }
.fhero h1 span { color: var(--f-yellow); }
.fhero p { margin: 0 0 18px; color: #dbeafe; font-size: 13.5px; }

/* ---- chips / tabs ---- */
.fchips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fchips::-webkit-scrollbar { display: none; }
.fchips a { flex-shrink: 0; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--f-line); font-weight: 600; font-size: 13px; color: #475569; }
.fchips a.active { background: var(--f-primary); border-color: var(--f-primary); color: #fff; }
.ftabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ftabs button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--f-line); background: #fff; font-size: 12px; font-weight: 600; color: #475569; cursor: pointer; }
.ftabs button.active { background: var(--f-primary-light); color: var(--f-primary-dark); border-color: transparent; }

.fsec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fsec-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.fmuted { color: var(--f-muted); font-size: 12.5px; }

/* ---- cards ---- */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fcard { background: var(--f-card); border: 1px solid var(--f-line); border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.04); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fcard-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fbadge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 7px; background: var(--f-primary-light); color: var(--f-primary-dark); }
.fbadge-current_affairs { background: #FEE2E2; color: #B91C1C; }
.fbadge-concept { background: #FEF3C7; color: #92400E; }
.fbadge-vocabulary { background: #EDE9FE; color: var(--f-purple); }
.fbadge-pyq { background: #DCFCE7; color: #166534; }
.fchip { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: #EEF2FF; color: #4338CA; font-weight: 600; }
.fchip-warn { background: #FEF3C7; color: #92400E; }
.frev { margin-left: auto; font-size: 10.5px; color: var(--f-green); font-weight: 600; }
.fq, .fh3 { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; }
.fmeta { font-size: 12px; color: var(--f-muted); }
.fp { margin: 0; color: #334155; font-size: 13.5px; }
.fimg { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; background: #e2e8f0; }
.fbul { margin: 0; padding-left: 18px; color: #334155; font-size: 13px; }
.fbul li { margin: 3px 0; }
.fdet summary { cursor: pointer; color: var(--f-primary); font-weight: 700; font-size: 13px; list-style: none; padding: 8px 0; }
.fdet summary::-webkit-details-marker { display: none; }
.fdet[open] summary { color: var(--f-muted); }
.fformula { background: var(--f-primary-light); border-radius: 10px; padding: 12px 14px; font-weight: 600; color: var(--f-navy); }
.fformula small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--f-primary-dark); margin-bottom: 2px; }
.fword { margin: 0; font-size: 24px; font-weight: 800; }
.fvocab { display: flex; flex-direction: column; gap: 8px; }
.fex { margin: 0; padding: 10px 12px; background: var(--f-bg); border-radius: 8px; color: #475569; font-size: 13px; font-style: italic; }

.fopts { display: flex; flex-direction: column; gap: 8px; }
.fopt { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--f-line); background: #fff; font-size: 13.5px; cursor: pointer; color: var(--f-text); }
.fopt:hover:not(:disabled) { border-color: var(--f-primary); background: var(--f-primary-light); }
.fopt:disabled { cursor: default; }
.fopt .fl { width: 24px; height: 24px; border-radius: 6px; background: var(--f-bg); border: 1px solid var(--f-line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.fopt.is-correct { border-color: var(--f-green); background: #F0FDF4; }
.fopt.is-correct .fl { background: var(--f-green); border-color: var(--f-green); color: #fff; }
.fopt.is-wrong { border-color: #DC2626; background: #FEF2F2; }
.fopt.is-wrong .fl { background: #DC2626; border-color: #DC2626; color: #fff; }
.fexpl { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.fexpl p { margin: 4px 0 0; color: #166534; }
.fhint { margin: 0; font-size: 12px; color: var(--f-muted); }
.ftags { display: flex; gap: 6px; flex-wrap: wrap; }
.ftags span { font-size: 11.5px; color: var(--f-primary-dark); font-weight: 600; }
.fcard-foot { display: flex; gap: 4px; border-top: 1px solid #F1F5F9; padding-top: 8px; margin-top: auto; }
.fact { background: none; border: 0; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; color: var(--f-muted); cursor: pointer; font-weight: 600; }
.fact:hover { background: var(--f-bg); color: var(--f-text); }
.fact.on { color: var(--f-primary); }
.fempty { padding: 40px 20px; text-align: center; background: #fff; border: 1px dashed var(--f-line); border-radius: 14px; color: var(--f-muted); }
.fmore-wrap { text-align: center; margin-top: 16px; }

/* ---- latest updates ---- */
.fnews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fnews-card { background: #fff; border: 1px solid var(--f-line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.fnews-card img { width: 100%; height: 96px; object-fit: cover; border-radius: 8px; }
.fnews-card .fchip { align-self: flex-start; }
.fnews-card strong { font-size: 13.5px; line-height: 1.35; }
.fnews-card small { color: var(--f-muted); font-size: 11.5px; }
.ftrust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ftrust div { background: #fff; border: 1px solid var(--f-line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.ftrust b { color: var(--f-green); font-size: 13.5px; }
.ftrust span { color: var(--f-muted); font-size: 12.5px; }

/* ---- right rail ---- */
.frail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 88px; }
.fpanel { background: #fff; border: 1px solid var(--f-line); border-radius: 14px; padding: 16px; }
.fpanel h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.fstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.fstats b { display: block; font-size: 20px; }
.fstats span { font-size: 11px; color: var(--f-muted); }
.frev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.frev-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.frev-list input:checked + a { text-decoration: line-through; color: var(--f-muted); }
.ftrend { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ftrend a:hover { color: var(--f-primary); }

.fstatbar { max-width: 1440px; margin: 0 auto; padding: 22px 24px 30px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; border-top: 1px solid var(--f-line); background: #fff; }
.fstatbar div { display: flex; flex-direction: column; text-align: center; }
.fstatbar b { font-size: 22px; font-weight: 800; color: var(--f-navy); }
.fstatbar span { font-size: 12px; color: var(--f-muted); }

.fbottom { display: none; }

/* ---- design pass: matches the reference layout (4-across cards, icon rows,
   image update cards, blue revision panel, icon stats bar) ---- */
.fshell { max-width: 1560px; grid-template-columns: 230px minmax(0, 1fr) 300px; }
.fshell.no-rail { grid-template-columns: 230px minmax(0, 1fr); }
.fside nav a { display: flex; align-items: center; gap: 12px; }
.fside nav a svg { flex-shrink: 0; color: #64748b; }
.fside nav a.active svg { color: var(--f-primary-dark); }
.fside-cta ul { margin: 8px 0 14px; padding: 0; list-style: none; font-size: 12.5px; color: #dbeafe; display: flex; flex-direction: column; gap: 4px; }
.fside-cta li::before { content: "\2713  "; color: #86efac; font-weight: 700; }
.fbtn-light { background: #fff; color: var(--f-navy); width: 100%; }
.fbtn-solid { width: 100%; background: var(--f-primary); color: #fff; margin-top: 12px; }
.fbtn-solid:hover { background: var(--f-primary-dark); }

.fhero { min-height: 172px; display: flex; align-items: center; background: linear-gradient(90deg, rgba(11,27,77,.92) 0%, rgba(11,27,77,.55) 55%, rgba(11,27,77,0) 100%), url(/static/img/feed-hero.svg) right center / cover no-repeat, var(--f-navy); }
.fhero h1 { font-size: 30px; }
.fflame { font-size: 20px; margin-right: 2px; }

.fgrid { grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); gap: 14px; }
.fcard { padding: 14px; gap: 9px; }
.fcard-top { gap: 6px; }
.fico { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: #FEE2E2; color: #DC2626; flex-shrink: 0; }
.fico-concept { background: #FEF3C7; color: #D97706; }
.fico-vocabulary { background: #EDE9FE; color: var(--f-purple); }
.fico-pyq { background: #DCFCE7; color: #16A34A; }
.ftype { font-size: 12.5px; font-weight: 700; color: var(--f-text); }
.fago { margin-left: auto; font-size: 11px; color: var(--f-muted); }
.fsubchips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip-ok { background: #DCFCE7; color: #166534; }
.fq, .fh3 { font-size: 15px; }
.fopt { padding: 7px 10px; font-size: 12.5px; gap: 10px; border-radius: 9px; }
.fopt .fl { width: 22px; height: 22px; font-size: 11px; }
.fopt .ft { flex: 1; }
.ftick { color: #fff; background: var(--f-green); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.fsoft { display: block; text-align: center; background: var(--f-primary-light); color: var(--f-primary-dark); font-weight: 700; font-size: 12.5px; padding: 9px 10px; border-radius: 8px; cursor: pointer; list-style: none; }
.fsoft:hover { filter: brightness(.97); }
.fdet summary { padding: 9px 10px; }
.fdet[open] summary { color: var(--f-primary-dark); }
.fdet[open] { display: flex; flex-direction: column; gap: 8px; }
.fimg { height: 118px; }
.frev-line { font-size: 10.5px; color: var(--f-green); font-weight: 600; }
.ftags a { font-size: 11.5px; color: var(--f-primary-dark); font-weight: 600; }
.ftags a:hover { text-decoration: underline; }
.fcard-foot { gap: 2px; }
.fact { padding: 5px 8px; font-size: 12px; }

.fnews { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.fnews-card { padding: 10px; gap: 8px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.04); }
.fnews-img { display: block; height: 104px; border-radius: 9px; overflow: hidden; background: #e2e8f0; }
.fnews-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fnews-noimg, .fthumb { background: linear-gradient(135deg, var(--f-primary), var(--f-purple)); }
.fnews-concept { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.fnews-current_affairs { background: linear-gradient(135deg, #1d4ed8, #6d28d9); }
.fnews-pyq { background: linear-gradient(135deg, #16a34a, #0f766e); }
.fnews-mcq { background: linear-gradient(135deg, #2563eb, #0ea5e9); }
.fnews-vocabulary { background: linear-gradient(135deg, #7c3aed, #db2777); }
.fnews-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fnews-meta small { color: var(--f-muted); font-size: 11px; }

.fquote { border-radius: 14px; padding: 18px 18px 14px; color: #fff; font-weight: 700; font-size: 16px; line-height: 1.35; background: radial-gradient(400px 160px at 100% 0, rgba(74,222,128,.35), transparent 60%), linear-gradient(135deg, #0f766e, #14532d); position: relative; }
.fquote span { font-size: 26px; line-height: 0; vertical-align: -8px; margin-right: 2px; color: #bbf7d0; }
.fquote small { display: block; margin-top: 8px; font-weight: 500; font-size: 12px; color: #bbf7d0; }
.fexams { display: flex; flex-wrap: wrap; gap: 8px; }
.fexams a { padding: 6px 12px; border-radius: 8px; background: var(--f-bg); border: 1px solid var(--f-line); font-size: 12.5px; font-weight: 600; color: #334155; }
.fexams a.active, .fexams a:hover { background: var(--f-primary-light); border-color: transparent; color: var(--f-primary-dark); }
.fpanel-blue { background: linear-gradient(160deg, #eff6ff, #dbeafe); border-color: #bfdbfe; }
.fpanel-blue h3 { color: var(--f-primary-dark); }
.frev-list em { color: var(--f-muted); font-style: normal; }
.frev-list input { width: 16px; height: 16px; accent-color: var(--f-primary); }
.ftrend { list-style: none; padding: 0; gap: 4px; }
.ftrend a { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ftn { width: 22px; height: 22px; border-radius: 50%; background: var(--f-primary-light); color: var(--f-primary-dark); font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ftt { flex: 1; font-size: 12.5px; line-height: 1.3; }
.ftrend img, .fthumb { width: 44px; height: 34px; border-radius: 6px; object-fit: cover; flex-shrink: 0; display: block; }

.fstatbar { max-width: none; margin: 0; background: linear-gradient(180deg, #fff, #f8fafc); padding: 20px 32px 24px; gap: 10px; }
.fstatbar div { flex-direction: row; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.fstatbar p { margin: 0; display: flex; flex-direction: column; }
.fs-ic { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 18px; color: #fff; flex-shrink: 0; }
.fs-purple { background: #7c3aed; } .fs-green { background: #16a34a; } .fs-violet { background: #6d28d9; }
.fs-orange { background: #f97316; } .fs-pink { background: #ec4899; } .fs-blue { background: #2563eb; }
.fstatbar b { font-size: 17px; }

/* ---- tablet: sidebar hides, rail drops below, 2-col cards ---- */
@media (max-width: 1099px) {
  .fshell, .fshell.no-rail { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fside { position: static; }
  .fside nav { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .fside nav a { flex-shrink: 0; white-space: nowrap; background: #fff; border: 1px solid var(--f-line); }
  .fside-cta { display: none; }
  .frail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fnews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fstatbar { grid-template-columns: repeat(3, 1fr); }
}
/* ---- mobile: one card per row, bottom nav, sticky compact header ---- */
@media (max-width: 699px) {
  .fh { height: 60px; padding: 0 14px; gap: 10px; }
  .fh-name small, .fh-search { display: none; }
  .fshell { padding: 14px 14px 90px; }
  .fside { display: none; }
  .fgrid, .ftrust, .frail, .fnews { grid-template-columns: minmax(0, 1fr); }
  .fhero { padding: 22px 20px; }
  .fhero h1 { font-size: 24px; }
  .fq, .fh3 { font-size: 17px; }
  .fopt { padding: 14px 14px; font-size: 14.5px; }
  .fstatbar { grid-template-columns: repeat(2, 1fr); padding: 18px 14px 90px; }
  .fstatbar div { justify-content: flex-start; }
  .fnews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fhero { min-height: 150px; }
  .fbottom { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: #fff; border-top: 1px solid var(--f-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .fbottom a { flex: 1; text-align: center; padding: 10px 2px; font-size: 11.5px; font-weight: 700; color: var(--f-muted); border-radius: 10px; }
  .fbottom a.active { color: var(--f-primary); background: var(--f-primary-light); }
  .fbottom a.fb-login { color: #fff; background: var(--f-primary); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- unique item page (/q/<id>-<slug>) ---- */
.fq a:hover, .fh3 a:hover, .fword a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fitem { max-width: 760px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 18px; }
.fcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--f-muted); }
.fcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--f-line); }
.fcrumbs a:hover { color: var(--f-primary); }
.fitem h1.fq, .fitem h1.fh3 { font-size: 22px; line-height: 1.3; }
.fitem .fopt { font-size: 15px; }
.fcta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 14px; background: var(--f-primary-light); }
.fcta b { color: var(--f-primary-dark); }
.fcta p { margin: 2px 0 0; color: var(--f-muted); font-size: 13px; }
.frelated h2 { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.frelated ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; background: var(--f-card); border: 1px solid var(--f-line); border-radius: 14px; }
.frelated li + li { border-top: 1px solid var(--f-line); }
.frelated a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-weight: 600; font-size: 13.5px; }
.frelated a:hover { color: var(--f-primary); }
.frelated small { color: var(--f-muted); font-weight: 500; white-space: nowrap; }
@media (max-width: 640px) { .fitem h1.fq, .fitem h1.fh3 { font-size: 19px; } }
.fexam { font-weight: 800; color: var(--f-primary-dark); white-space: nowrap; }

/* ---- category page (/c/<slug>) ---- */
.fhub { max-width: 820px; }
.fhub-head h1 { margin: 0 0 6px; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--f-navy); }
.fhub-head h1 small { font-size: 13px; font-weight: 600; color: var(--f-muted); margin-left: 8px; }
.fhub-head p { margin: 0; color: var(--f-muted); font-size: 14px; max-width: 65ch; }
.fhub-list { display: flex; flex-direction: column; gap: 16px; }
.fpager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; font-weight: 700; font-size: 13.5px; }
.fpager a { color: var(--f-primary); padding: 8px 14px; border: 1px solid var(--f-line); border-radius: 10px; background: #fff; }
.fpager a:hover { background: var(--f-primary-light); }
@media (max-width: 640px) { .fhub-head h1 { font-size: 21px; } }

/* ---- rank, wrong-answers card, re-attempt page, leaderboard, "next question" ---- */
.frank { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, var(--f-primary-light), #fff); border: 1px solid var(--f-line); transition: box-shadow .15s, transform .15s; }
.frank:hover { box-shadow: 0 6px 16px rgba(37, 99, 235, .14); transform: translateY(-1px); }
.frank-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: #fef3c7; color: #b45309; display: flex; align-items: center; justify-content: center; }
.frank-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.frank-txt small { font-size: 11.5px; color: var(--f-muted); }
.frank-txt b { font-size: 20px; font-weight: 800; color: var(--f-navy); display: inline; }
.frank-txt em { font-style: normal; font-size: 12.5px; color: var(--f-muted); margin-left: 4px; }
.frank-go { font-size: 12.5px; font-weight: 700; color: var(--f-primary); white-space: nowrap; }
.fpanel-wrong .fwrong { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; transition: box-shadow .15s; }
.fpanel-wrong .fwrong:hover { box-shadow: 0 6px 16px rgba(220, 38, 38, .14); }
.fwrong-n { min-width: 44px; height: 44px; border-radius: 12px; background: #dc2626; color: #fff; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.fwrong-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.fwrong-txt b { font-size: 14px; color: #991b1b; }
.fwrong-txt small { font-size: 11.5px; color: var(--f-muted); }
.fnext { margin-top: 12px; width: 100%; }
.fretry-bar { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 16px; border-radius: 12px; background: var(--f-card); border: 1px solid var(--f-line); font-size: 13px; color: var(--f-muted); position: sticky; top: 76px; z-index: 5; }
.fretry-bar b { color: var(--f-navy); font-size: 15px; }
.fcard.is-recovered { border-color: #86efac; box-shadow: 0 0 0 2px #dcfce7; }
.flb-tabs { display: flex; gap: 8px; }
.flb-tabs a { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--f-line); font-weight: 600; font-size: 13px; color: #475569; }
.flb-tabs a.active { background: var(--f-primary); border-color: var(--f-primary); color: #fff; }
.flb-me { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--f-primary-light); }
.flb-me b { display: block; color: var(--f-primary-dark); font-size: 15px; }
.flb-me small { color: var(--f-muted); font-size: 12.5px; }
.flb-medal { min-width: 46px; height: 46px; border-radius: 12px; background: var(--f-primary); color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.flb-wrap { overflow-x: auto; background: var(--f-card); border: 1px solid var(--f-line); border-radius: 14px; }
.flb { width: 100%; border-collapse: collapse; font-size: 14px; }
.flb th { text-align: left; padding: 12px 14px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--f-muted); background: #f8fafc; border-bottom: 1px solid var(--f-line); }
.flb td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; }
.flb tr:last-child td { border-bottom: 0; }
.flb .num { text-align: right; font-variant-numeric: tabular-nums; }
.flb tr.is-me td { background: #eff6ff; font-weight: 600; }
.flb-gap td { text-align: center; color: var(--f-muted); padding: 4px; background: #fff; }
.flb-rank { display: inline-flex; min-width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 999px; font-weight: 800; font-size: 13px; background: #f1f5f9; color: #475569; }
.flb-rank-1 { background: #fde68a; color: #92400e; }
.flb-rank-2 { background: #e2e8f0; color: #334155; }
.flb-rank-3 { background: #fed7aa; color: #9a3412; }
.flb-you { font-size: 10.5px; font-weight: 800; background: var(--f-primary); color: #fff; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.fempty .fbtn { margin: 10px 8px 0 0; }
@media (max-width: 640px) { .fretry-bar { top: 68px; font-size: 12px; } .flb th, .flb td { padding: 10px 10px; } }

/* compact standing strip: only where the side rail is not shown (tablet + phone) */
.fmini { display: none; }
@media (max-width: 1099px) {
  .fmini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .fmini a { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; border-radius: 12px; background: var(--f-card); border: 1px solid var(--f-line); min-width: 0; }
  .fmini .fmini-l { font-size: 11px; font-weight: 600; color: var(--f-muted); }
  .fmini b { font-size: 20px; font-weight: 800; color: var(--f-navy); line-height: 1.15; }
  .fmini small { font-size: 11px; color: var(--f-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fmini .fmini-rank { background: linear-gradient(135deg, var(--f-primary-light), #fff); }
  .fmini .fmini-wrong b { color: #dc2626; }
  .fmini .fmini-wrong { background: #fef2f2; border-color: #fecaca; }
}
.fb-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10.5px; line-height: 18px; }
.flb-sub { display: block; font-size: 11px; font-weight: 500; color: var(--f-muted); white-space: nowrap; }
@media (max-width: 640px) {
  .flb { font-size: 13px; }
  .flb th, .flb td { padding: 9px 8px; }
  .flb td:nth-child(2) { min-width: 96px; }
  .flb .flb-sub { display: none; }            /* your own breakdown is in the summary card above */
}
@media (max-width: 520px) {
  .flb th:nth-child(4), .flb td:nth-child(4) { display: none; }   /* "Attempted" - keeps Rank / Student / Correct / Accuracy on one screen */
}

/* Dashboard button beside the signed-in name (feed header, every feed page) */
.fh-user { cursor: default; }
.fh-dash { padding: 8px 14px; font-size: 13.5px; gap: 7px; white-space: nowrap; }
@media (max-width: 699px) { .fh-dash { padding: 8px 11px; } .fh-user { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
@media (max-width: 480px) { .fh-user { display: none; } .fh-dash span { display: inline; } }