.fruit-ranking-page {
  --fr-ink: #102844;
  --fr-muted: #61758d;
  --fr-line: #d9e6f2;
  --fr-blue: #176be8;
  --fr-cyan: #19b8aa;
  --fr-gold: #f2bb2a;
  background: #f6faff;
  color: var(--fr-ink);
}
.fr-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 22px 0 72px; }
.fr-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; color: #73859a; font-size: .86rem; }
.fr-breadcrumb a { color: #35618e; text-decoration: none; }
.fr-subnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }
.fr-subnav a { display: grid; place-items: center; min-height: 43px; padding: 8px 12px; border: 1px solid #d5e3ef; border-radius: 13px; background: #fff; color: #294d72; font-size: .86rem; font-weight: 850; text-decoration: none; box-shadow: 0 4px 15px rgba(31,73,116,.05); }
.fr-subnav a:hover { border-color: #72a9e7; transform: translateY(-1px); }

.fr-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; min-height: 410px; padding: clamp(34px,5vw,64px); border-radius: 28px; background: radial-gradient(circle at 83% 18%,rgba(245,192,42,.3),transparent 27%), radial-gradient(circle at 8% 100%,rgba(47,137,255,.28),transparent 38%), linear-gradient(135deg,#071a3c 0%,#0a326c 55%,#075e78 100%); color: #fff; box-shadow: 0 24px 52px rgba(18,51,94,.2); }
.fr-hero::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(90deg,transparent,#000 58%); }
.fr-hero-copy { align-self: center; position: relative; z-index: 2; }
.fr-eyebrow,.fr-section-head p { margin: 0 0 9px; color: #4b7da7; font-size: .74rem; font-weight: 900; letter-spacing: .15em; }
.fr-eyebrow { color: #7bf0df; }
.fr-hero h1 { margin: 0; font-size: clamp(2.3rem,5vw,4.35rem); line-height: 1.06; letter-spacing: -.04em; }
.fr-hero h1 span { color: #80f0df; }
.fr-hero-copy > p:not(.fr-eyebrow) { max-width: 650px; margin: 20px 0 0; color: #d9e8f8; font-size: 1.02rem; line-height: 1.75; }
.fr-sync { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 18px; color: #bfd4e8; font-size: .82rem; }
.fr-sync span { display: inline-flex; align-items: center; gap: 7px; }
.fr-sync i { width: 8px; height: 8px; border-radius: 50%; background: #63e2b9; box-shadow: 0 0 0 5px rgba(99,226,185,.12); }
.fr-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 25px; }
.fr-hero-actions a { display: inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border:1px solid rgba(255,255,255,.28); border-radius:13px; background:rgba(255,255,255,.08); color:#fff; font-weight:850; text-decoration:none; }
.fr-hero-actions a:first-child { border-color:#80f0df; background:#80f0df; color:#073349; }
.fr-hero-actions a:hover { transform: translateY(-2px); }
.fr-hero-visual { position: relative; min-height: 280px; }
.fr-hero-medal { position:absolute; display:grid; place-items:center; width:150px; height:180px; padding:20px 12px 12px; border:1px solid rgba(255,255,255,.23); border-radius:24px; background:rgba(5,25,57,.62); box-shadow:0 18px 32px rgba(0,0,0,.25); backdrop-filter:blur(8px); }
.fr-hero-medal span { position:absolute; top:-16px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#f3bd31; color:#3a2b00; font-weight:950; }
.fr-hero-medal img { width:105px; height:105px; object-fit:contain; filter:drop-shadow(0 11px 12px rgba(0,0,0,.3)); }
.fr-hero-medal-1 { top:18px; left:38%; z-index:3; transform:scale(1.06); }
.fr-hero-medal-2 { bottom:5px; left:3%; z-index:2; transform:scale(.82) rotate(-5deg); }
.fr-hero-medal-3 { bottom:5px; right:0; z-index:1; transform:scale(.82) rotate(5deg); }
.fr-hero-medal-2 span { background:#d9e2ed; color:#34475e; }
.fr-hero-medal-3 span { background:#d79b62; color:#4d2d12; }

.fr-rules { position:relative; z-index:4; display:grid; grid-template-columns:repeat(4,1fr); margin:-25px 32px 0; border:1px solid var(--fr-line); border-radius:19px; background:rgba(255,255,255,.98); box-shadow:0 16px 36px rgba(32,71,112,.13); }
.fr-rules div { padding:18px 20px; border-right:1px solid #e3edf5; }
.fr-rules div:last-child { border-right:0; }
.fr-rules small { display:block; color:#76889d; font-size:.7rem; font-weight:800; }
.fr-rules strong { display:block; margin-top:4px; color:#1b426b; font-size:.86rem; line-height:1.4; }

.fr-ranking,.fr-actions,.fr-faq { margin-top:58px; }
.fr-ranking { padding:clamp(25px,4vw,40px); border:1px solid var(--fr-line); border-radius:23px; background:#fff; box-shadow:0 14px 36px rgba(32,71,112,.08); }
.fr-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:23px; }
.fr-section-head h2 { margin:0; color:#153453; font-size:clamp(1.55rem,3vw,2.2rem); letter-spacing:-.025em; }
.fr-section-head > a { color:#176be8; font-size:.84rem; font-weight:850; text-decoration:none; }
.fr-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px; border-radius:15px; background:#edf4fb; }
.fr-tabs button { min-height:46px; border:0; border-radius:11px; background:transparent; color:#587088; font:inherit; font-weight:850; cursor:pointer; }
.fr-tabs button[aria-selected="true"] { background:#176be8; color:#fff; box-shadow:0 6px 16px rgba(23,107,232,.22); }
.fr-rank-panel { padding-top:25px; }
.fr-rank-panel[hidden] { display:none; }
.fr-panel-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.fr-panel-intro h3 { margin:0; color:#173b60; font-size:1.3rem; }
.fr-panel-intro p { margin:6px 0 0; color:var(--fr-muted); font-size:.86rem; }
.fr-panel-intro > a { flex:0 0 auto; color:#176be8; font-size:.8rem; font-weight:850; text-decoration:none; }

.fr-podium { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.fr-podium-card { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; padding:22px 14px 17px; border:1px solid #d9e6f1; border-radius:17px; background:linear-gradient(160deg,#fff,#f5f9fe); color:inherit; text-align:center; text-decoration:none; }
.fr-podium-card:hover { transform:translateY(-3px); border-color:#75aee9; box-shadow:0 12px 25px rgba(36,77,119,.1); }
.fr-podium-rank { position:absolute; top:10px; left:10px; padding:4px 8px; border-radius:999px; background:#102b4f; color:#fff; font-size:.67rem; font-weight:900; }
.fr-podium-card img { width:92px; height:92px; object-fit:contain; filter:drop-shadow(0 9px 10px rgba(31,55,83,.18)); }
.fr-podium-card > strong { overflow:hidden; max-width:100%; margin-top:8px; color:#173b61; text-overflow:ellipsis; white-space:nowrap; }
.fr-podium-card > small { overflow:hidden; max-width:100%; margin-top:2px; color:#74879c; font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.fr-podium-card > b { margin-top:9px; color:#a46a09; font-size:1.15rem; }
.fr-podium-1 { border-color:#f0cf75; background:linear-gradient(160deg,#fffef7,#fff5d9); }
.fr-trend { margin-top:7px; padding:4px 8px; border-radius:999px; font-size:.67rem; font-style:normal; font-weight:900; }
.fr-trend-up { background:#e4f8ef; color:#10865e; }
.fr-trend-down { background:#fff0ef; color:#c0443b; }
.fr-trend-flat { background:#edf3f8; color:#65778d; }

.fr-rank-list { display:grid; gap:8px; }
.fr-rank-row { display:grid; grid-template-columns:58px 52px minmax(0,1fr) 115px 22px; gap:12px; align-items:center; min-height:76px; padding:10px 15px; border:1px solid #dde8f2; border-radius:14px; background:#fbfdff; color:inherit; text-decoration:none; }
.fr-rank-row:hover { border-color:#79afe7; background:#f5faff; transform:translateX(2px); }
.fr-rank-number { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:44px; border-radius:12px; background:#102b4f; color:#fff; }
.fr-rank-number b { font-size:.9rem; }
.fr-rank-number small { color:#b9d0e6; font-size:.58rem; }
.fr-rank-row > img { width:50px; height:50px; object-fit:contain; }
.fr-rank-name { min-width:0; }
.fr-rank-name strong,.fr-rank-name small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-rank-name strong { color:#173b60; font-size:.93rem; }
.fr-rank-name small { margin-top:3px; color:#74869b; font-size:.7rem; }
.fr-rank-value { text-align:right; }
.fr-rank-value small { display:block; color:#7b8ba0; font-size:.62rem; }
.fr-rank-value strong { display:block; margin-top:3px; color:#a46a09; font-size:.98rem; }
.fr-rank-arrow { color:#176be8; font-weight:900; }
.fr-ad-break { margin:10px 0; border-radius:13px; background:#f8fbff; }
.fr-ad-break .bf-ad { margin:0 auto; }

.fr-action-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.fr-action-grid a { display:grid; grid-template-columns:46px minmax(0,1fr) 24px; gap:13px; align-items:center; min-height:104px; padding:18px 20px; border:1px solid var(--fr-line); border-radius:16px; background:#fff; color:inherit; text-decoration:none; }
.fr-action-grid a:hover { border-color:#76aee9; transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,72,116,.09); }
.fr-action-grid a > span { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#edf5ff; font-size:1.3rem; }
.fr-action-grid strong { color:#173b61; }
.fr-action-grid p { margin:5px 0 0; color:#6c7e94; font-size:.8rem; }
.fr-action-grid b { color:#176be8; font-size:1.2rem; }

.fr-faq-list { display:grid; gap:9px; }
.fr-faq details { border:1px solid var(--fr-line); border-radius:14px; background:#fff; }
.fr-faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; color:#1d3d60; font-weight:850; cursor:pointer; list-style:none; }
.fr-faq summary::-webkit-details-marker { display:none; }
.fr-faq summary span { color:#176be8; font-size:1.15rem; transition:transform .2s ease; }
.fr-faq details[open] summary span { transform:rotate(45deg); }
.fr-faq details p { margin:0; padding:0 20px 18px; color:#62758c; line-height:1.7; }
.fr-source { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:26px; padding:20px 24px; border:1px solid #d7e5f1; border-radius:17px; background:#fff; }
.fr-source > div { display:flex; gap:12px; align-items:flex-start; }
.fr-source > div > span { display:grid; place-items:center; flex:0 0 32px; height:32px; border-radius:50%; background:#e7f2ff; color:#176be8; font-weight:900; }
.fr-source p { margin:0; color:#667a90; line-height:1.55; }
.fr-source strong { display:block; color:#1c3c5e; }
.fr-source > a { flex:0 0 auto; padding:11px 16px; border-radius:10px; background:#176be8; color:#fff; font-size:.82rem; font-weight:850; text-decoration:none; }

body.dark-mode.fruit-ranking-page { --fr-ink:#e6f0ff; --fr-muted:#a7b9ce; --fr-line:#2b4561; background:#091728; }
body.dark-mode .fr-subnav a,body.dark-mode .fr-rules,body.dark-mode .fr-ranking,body.dark-mode .fr-podium-card,body.dark-mode .fr-rank-row,body.dark-mode .fr-action-grid a,body.dark-mode .fr-faq details,body.dark-mode .fr-source { background:#10243c; border-color:#2b4561; }
body.dark-mode .fr-rules div { border-color:#2b4561; }
body.dark-mode .fr-rules strong,body.dark-mode .fr-section-head h2,body.dark-mode .fr-panel-intro h3,body.dark-mode .fr-podium-card>strong,body.dark-mode .fr-rank-name strong,body.dark-mode .fr-action-grid strong,body.dark-mode .fr-faq summary,body.dark-mode .fr-source strong { color:#e3efff; }
body.dark-mode .fr-tabs { background:#142c47; }

@media (max-width:900px) {
  .fr-hero { grid-template-columns:1fr .68fr; }
  .fr-rules { grid-template-columns:1fr 1fr; }
  .fr-rules div:nth-child(2) { border-right:0; }
  .fr-rules div:nth-child(-n+2) { border-bottom:1px solid #e3edf5; }
}

@media (max-width:700px) {
  .fr-main { width:min(100% - 24px,1180px); padding-top:14px; }
  .fr-breadcrumb { margin-bottom:10px; }
  .fr-subnav { gap:6px; }
  .fr-subnav a { min-height:41px; padding:6px; font-size:.72rem; }
  .fr-hero { grid-template-columns:1fr; min-height:0; padding:28px 21px 18px; border-radius:21px; }
  .fr-hero h1 { font-size:clamp(2rem,9vw,2.65rem); }
  .fr-hero-copy>p:not(.fr-eyebrow) { font-size:.91rem; line-height:1.68; }
  .fr-sync { display:grid; gap:7px; }
  .fr-hero-actions { display:grid; grid-template-columns:1fr 1fr; }
  .fr-hero-actions a { min-height:44px; padding:0 9px; font-size:.8rem; }
  .fr-hero-visual { min-height:135px; margin-top:15px; }
  .fr-hero-medal { width:95px; height:115px; padding:12px 8px 7px; border-radius:17px; }
  .fr-hero-medal img { width:67px; height:67px; }
  .fr-hero-medal span { top:-10px; width:27px; height:27px; font-size:.72rem; }
  .fr-hero-medal-1 { top:8px; left:38%; }
  .fr-hero-medal-2 { left:5%; bottom:-2px; }
  .fr-hero-medal-3 { right:4%; bottom:-2px; }
  .fr-rules { margin:11px 0 0; border-radius:15px; }
  .fr-rules div { padding:13px 12px; }
  .fr-rules strong { font-size:.74rem; }
  .fr-ranking,.fr-actions,.fr-faq { margin-top:43px; }
  .fr-ranking { padding:20px 14px; border-radius:18px; }
  .fr-section-head { align-items:flex-start; flex-direction:column; gap:8px; margin-bottom:18px; }
  .fr-tabs button { min-height:43px; font-size:.8rem; }
  .fr-panel-intro { align-items:flex-start; flex-direction:column; gap:7px; }
  .fr-podium { gap:7px; }
  .fr-podium-card { padding:25px 7px 12px; border-radius:13px; }
  .fr-podium-card img { width:58px; height:58px; }
  .fr-podium-card>strong { font-size:.82rem; }
  .fr-podium-card>small { font-size:.6rem; }
  .fr-podium-card>b { font-size:.9rem; }
  .fr-podium-rank { top:7px; left:7px; padding:3px 6px; font-size:.58rem; }
  .fr-trend { font-size:.58rem; }
  .fr-rank-list { gap:7px; }
  .fr-rank-row { grid-template-columns:43px 42px minmax(0,1fr) auto; gap:8px; min-height:67px; padding:9px; }
  .fr-rank-number { min-height:39px; border-radius:10px; }
  .fr-rank-number b { font-size:.78rem; }
  .fr-rank-row>img { width:40px; height:40px; }
  .fr-rank-name strong { font-size:.82rem; }
  .fr-rank-name small { font-size:.6rem; }
  .fr-rank-value small,.fr-rank-arrow { display:none; }
  .fr-rank-value strong { margin:0; padding:6px 8px; border-radius:9px; background:#fff5d7; font-size:.78rem; }
  .fr-action-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .fr-action-grid a { grid-template-columns:36px minmax(0,1fr); gap:8px; min-height:93px; padding:13px; }
  .fr-action-grid a>span { width:36px; height:36px; border-radius:11px; font-size:1.05rem; }
  .fr-action-grid p,.fr-action-grid b { display:none; }
  .fr-faq summary { padding:15px; font-size:.88rem; }
  .fr-faq details p { padding:0 15px 16px; font-size:.85rem; }
  .fr-source { align-items:stretch; flex-direction:column; padding:17px; }
  .fr-source>a { text-align:center; }
  .fruit-ranking-page .line-float,.fruit-ranking-page .guide-toc-fab,.fruit-ranking-page .guide-toc-overlay { display:none!important; }
  .fruit-ranking-page .bf-assistant { left:10px; bottom:12px; }
  .fruit-ranking-page .bf-assistant-toggle { width:46px; min-width:46px; height:46px; min-height:46px; padding:8px; border-radius:50%; justify-content:center; }
  .fruit-ranking-page .bf-assistant-toggle-text { display:none; }
}

@media (max-width:390px) {
  .fr-podium { grid-template-columns:1fr; }
  .fr-podium-card { display:grid; grid-template-columns:60px minmax(0,1fr) auto; gap:8px; align-items:center; text-align:left; }
  .fr-podium-card img { grid-row:1/4; }
  .fr-podium-card>strong,.fr-podium-card>small,.fr-podium-card>b { margin:0; }
  .fr-podium-card .fr-trend { grid-column:3; grid-row:1/4; }
}

@media (prefers-reduced-motion:reduce) { .fruit-ranking-page * { transition:none!important; scroll-behavior:auto!important; } }