img,svg,video{max-width:100%;height:auto;}header nav ul{display:flex;flex-wrap:wrap;gap:14px;}@media(max-width:768px){header nav ul{gap:10px}.login-btn{padding:6px 12px;border-radius:10px}}@media(max-width:900px){.hero{display:grid;grid-template-columns:1fr!important;gap:16px;padding:16px}.hero img{max-width:560px;margin:0 auto}}@media(min-width:1200px){.hero{gap:24px}}.benefits-grid,.feature-grid,.prc-updates #prc-container{display:grid;gap:18px}@media(max-width:1024px){.benefits-grid,.feature-grid{grid-template-columns:1fr 1fr}}@media(max-width:720px){.benefits-grid,.feature-grid{grid-template-columns:1fr}}@media(min-width:1025px){.prc-updates #prc-container{grid-template-columns:repeat(3,1fr)}}@media(max-width:1024px) and (min-width:721px){.prc-updates #prc-container{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.prc-updates #prc-container{grid-template-columns:1fr}}.feature-card img,.benefit img,.prc-updates img{width:100%;height:200px;object-fit:cover;border-radius:14px}@media(max-width:720px){.feature-card img,.benefit img,.prc-updates img{height:220px}}*{box-sizing:border-box}

/* ===== RANKING (mobile + desktop) ===== */
.ranking-section { max-width: 980px; margin: 0 auto; padding: 16px; }
.ranking-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.ranking-controls input[type="text"]{ flex:1 1 220px; min-width:180px; height:44px; }
.ranking-controls .btn, .ranking-controls button{ height:44px; padding:0 14px; border-radius:12px; }
.ranking-title{ color:#fff; letter-spacing:.02em; margin-bottom:10px; }
.ranking-table-wrap{ overflow-x:auto; }
.ranking-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.ranking-table th, .ranking-table td{ padding:14px 12px; word-wrap:break-word; vertical-align:middle; }
.ranking-table th:nth-child(1), .ranking-table td:nth-child(1){ width:60px; text-align:center; }
.ranking-table th:nth-child(3), .ranking-table td:nth-child(3){ width:120px; text-align:right; }
.ranking-table th:nth-child(4), .ranking-table td:nth-child(4){ width:180px; }
@media(max-width:640px){
  .ranking-table thead{ display:none; }
  .ranking-table, .ranking-table tbody, .ranking-table tr, .ranking-table td{ display:block; width:100%; }
  .ranking-table tr{ margin-bottom:12px; border-radius:14px; background:#0e1625; overflow:hidden; }
  .ranking-table td{ display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border:none!important; }
  .ranking-table td::before{ content:attr(data-label); font-weight:600; opacity:.8; }
  .ranking-table td:nth-child(1){ justify-content:center; font-weight:700; font-size:1rem; }
  .ranking-controls input[type="text"]{ min-width:0; flex:1 1 140px; }
}


/* ===== RANKING (tabular + theme aware) — 2025-09 rollout ===== */
:root{
  --rank-bg: #ffffff;
  --rank-text: #0b1220;
  --rank-header: #f6f7fb;
  --rank-border: rgba(0,0,0,.08);
}
body.dark, .dark-mode, [data-theme="dark"]{
  --rank-bg: #0e1625;
  --rank-text: #e8eefc;
  --rank-header: #121b2d;
  --rank-border: rgba(255,255,255,.08);
}
.ranking-section { max-width: 980px; margin: 0 auto; padding: 16px; }
.ranking-title { color: var(--rank-text); opacity: .9; letter-spacing: .02em; margin-bottom: 10px; }
.ranking-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.ranking-controls input[type="text"]{ flex:1 1 220px; min-width:180px; height:44px; }
.ranking-controls .btn, .ranking-controls button{ height:44px; padding:0 14px; border-radius:12px; }
.ranking-table-wrap { overflow-x:auto; background: var(--rank-header); border-radius: 14px; padding: 6px; }
.ranking-table { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; background: var(--rank-bg); color: var(--rank-text); border-radius: 12px; overflow: hidden; }
.ranking-table thead th {
  background: var(--rank-header); color: var(--rank-text);
  font-weight: 700; text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--rank-border);
}
.ranking-table td {
  padding: 14px 12px; vertical-align: middle; border-bottom: 1px solid var(--rank-border);
}
.ranking-table tr:last-child td { border-bottom: none; }
.ranking-table th:nth-child(1), .ranking-table td:nth-child(1) { width: 70px; text-align: center; }
.ranking-table th:nth-child(2), .ranking-table td:nth-child(2) { width: auto; }
.ranking-table th:nth-child(3), .ranking-table td:nth-child(3) { width: 120px; text-align: right; }
.ranking-table th:nth-child(4), .ranking-table td:nth-child(4) { width: 220px; }
/* Force real table on mobile (no card stacking); allow horizontal scroll */
@media (max-width: 640px){
  .ranking-table thead { display: table-header-group !important; }
  .ranking-table, .ranking-table tbody, .ranking-table tr, .ranking-table td { display: table !important; width: auto !important; }
  .ranking-table tr { background: transparent !important; margin: 0 !important; }
  .ranking-table td::before { content: none !important; }
  .ranking-controls input[type="text"]{ min-width: 0; flex: 1 1 140px; }
}


/* ===== RANKING hard overrides to prevent card-style rows (2025-09-12) ===== */
.ranking-table thead { display: table-header-group !important; }
.ranking-table tbody { display: table-row-group !important; }
.ranking-table tr { display: table-row !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.ranking-table td, .ranking-table th {
  display: table-cell !important; background: transparent !important; color: var(--rank-text) !important;
}
.ranking-table td::before, .ranking-table th::before { content: none !important; }
.ranking-table td { height: auto !important; line-height: 1.35 !important; }
.ranking-table { border-spacing: 0; }


/* === Ranking visibility & controls theme fix (Sep 12) === */
.ranking-title{ color: var(--rank-text) !important; text-shadow: none; }
.ranking-table-wrap{ background: var(--rank-header) !important; }

.ranking-controls input[type="text"],
.ranking-controls input[type="search"],
.ranking-controls select {
  background: #ffffff;
  color: #0b1220;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
body.dark .ranking-controls input[type="text"],
.dark-mode .ranking-controls input[type="text"],
[data-theme="dark"] .ranking-controls input[type="text"],
body.dark .ranking-controls input[type="search"],
.dark-mode .ranking-controls input[type="search"],
[data-theme="dark"] .ranking-controls input[type="search"],
body.dark .ranking-controls select,
.dark-mode .ranking-controls select,
[data-theme="dark"] .ranking-controls select {
  background: #0e1625;
  color: #e8eefc;
  border: 1px solid rgba(255,255,255,.18);
}

.ranking-controls .btn,
.ranking-controls button {
  background: #fff;
  color: #0b1220;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  cursor: pointer;
}
.ranking-controls .btn:hover,
.ranking-controls button:hover { filter: brightness(0.98); }

body.dark .ranking-controls .btn,
.dark-mode .ranking-controls .btn,
[data-theme="dark"] .ranking-controls .btn,
body.dark .ranking-controls button,
.dark-mode .ranking-controls button,
[data-theme="dark"] .ranking-controls button {
  background: #121b2d;
  color: #e8eefc;
  border: 1px solid rgba(255,255,255,.18);
}

.ranking-table thead th { opacity: 1 !important; }


/* === FONT COLOR ONLY: Ranking title, input text, helper note (scoped) === */
body:not(.dark):not([data-theme="dark"]) [id*="rank"] h1,
body:not(.dark):not([data-theme="dark"]) [id*="rank"] h2,
body:not(.dark):not([data-theme="dark"]) [class*="rank"] h1,
body:not(.dark):not([data-theme="dark"]) [class*="rank"] h2,
body:not(.dark):not([data-theme="dark"]) [id*="rank"] .ranking-title,
body:not(.dark):not([data-theme="dark"]) [class*="rank"] .ranking-title {
  color:#111 !important;
}
body.dark [id*="rank"] h1, body.dark [id*="rank"] h2,
[data-theme="dark"] [id*="rank"] h1, [data-theme="dark"] [id*="rank"] h2,
body.dark [class*="rank"] h1, body.dark [class*="rank"] h2,
[data-theme="dark"] [class*="rank"] h1, [data-theme="dark"] [class*="rank"] h2,
body.dark [id*="rank"] .ranking-title, [data-theme="dark"] [id*="rank"] .ranking-title,
body.dark [class*="rank"] .ranking-title, [data-theme="dark"] [class*="rank"] .ranking-title {
  color:#fff !important;
}

/* Input text inside ranking area only (no bg change) */
body:not(.dark):not([data-theme="dark"]) [id*="rank"] input[type="text"],
body:not(.dark):not([data-theme="dark"]) [class*="rank"] input[type="text"]{
  color:#111 !important;
}
body.dark [id*="rank"] input[type="text"],
[data-theme="dark"] [id*="rank"] input[type="text"],
body.dark [class*="rank"] input[type="text"],
[data-theme="dark"] [class*="rank"] input[type="text"]{
  color:#fff !important;
}

/* Helper/description (“Name saved …”) */
body:not(.dark):not([data-theme="dark"]) [id*="rank"] .status,
body:not(.dark):not([data-theme="dark"]) [id*="rank"] .save-note,
body:not(.dark):not([data-theme="dark"]) [id*="rank"] .desc,
body:not(.dark):not([data-theme="dark"]) [id*="rank"] .note,
body:not(.dark):not([data-theme="dark"]) [class*="rank"] .status,
body:not(.dark):not([data-theme="dark"]) [class*="rank"] .save-note,
body:not(.dark):not([data-theme="dark"]) [class*="rank"] .desc,
body:not(.dark):not([data-theme="dark"]) [class*="rank"] .note{
  color:#111 !important;
}
body.dark [id*="rank"] .status, body.dark [id*="rank"] .save-note,
body.dark [id*="rank"] .desc, body.dark [id*="rank"] .note,
[data-theme="dark"] [id*="rank"] .status, [data-theme="dark"] [id*="rank"] .save-note,
[data-theme="dark"] [id*="rank"] .desc, [data-theme="dark"] [id*="rank"] .note,
body.dark [class*="rank"] .status, body.dark [class*="rank"] .save-note,
body.dark [class*="rank"] .desc, body.dark [class*="rank"] .note,
[data-theme="dark"] [class*="rank"] .status, [data-theme="dark"] [class*="rank"] .save-note,
[data-theme="dark"] [class*="rank"] .desc, [data-theme="dark"] [class*="rank"] .note{
  color:#fff !important;
}

/* === Spacing fix: remove extra whitespace above hero title === */
html,body{margin:0!important;padding:0!important;}
.hero{margin-top:0!important;padding-top:0!important;overflow:auto;}
.hero h1,.hero .hero-title,h1:first-child{margin-top:0!important;}