[hidden]{
display:none!important}
button,a,label,summary{
cursor:pointer}
input,textarea,select{
color:var(--foreground);
background:var(--card);
border:1px solid var(--border);
border-radius:7px;
padding:9px 11px}
button{
color:inherit}
svg{
vertical-align:middle}
.card-tools a{
display:inline-flex;
color:var(--muted-foreground)}
.form-message{
padding:15px;
margin:15px 0;
background:var(--secondary);
border-radius:10px}
.error,.danger{
color:#b54840}
.auth-panel{
max-width:540px;
margin:0 auto 70px;
padding:30px}
.auth-panel form,.auth-panel label{
display:grid;
gap:16px}
.auth-panel p{
margin:12px 0 24px}
.manage-actions{
display:flex;
gap:12px;
flex-wrap:wrap}
.manage-hint{
color:var(--muted-foreground);
margin:20px 0}
.settings-editor{
padding:20px;
margin-bottom:24px}
.settings-editor summary{
font-weight:700}
.editor-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-top:18px}
.editor-grid label{
display:flex;
flex-direction:column;
gap:6px;
font-size:13px}
.editor-grid .wide{
grid-column:1/-1}
.editor-grid textarea{
min-height:90px;
resize:vertical}
.editor-grid h3{
grid-column:1/-1;
margin-top:20px}
.manage-editor-layout{
display:grid;
grid-template-columns:250px minmax(0,1fr);
gap:24px}
.manage-sidebar,.airport-editor{
padding:22px}
.manage-sidebar{
align-self:start;
position:sticky;
top:100px}
.manage-sidebar input{
width:100%}
#manage-list{
display:grid;
gap:6px;
margin-top:14px;
max-height:65vh;
overflow:auto}
#manage-list button{
text-align:left;
padding:10px;
border-radius:7px;
background:var(--muted)}
#manage-list button.active{
background:var(--secondary);
color:var(--primary)}
.save-bar{
position:sticky;
bottom:15px;
margin-top:22px;
padding:16px 20px;
border:1px solid var(--border);
background:var(--card);
box-shadow:var(--shadow);
border-radius:12px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:10}
.compare-picker{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px}
.compare-pick-item{
display:flex;
align-items:center;
gap:10px;
border:1px solid var(--border);
padding:18px;
border-radius:10px;
background:var(--card);
text-align:left}
.compare-pick-item b{
margin-left:auto}
.compare-pick-item.checked{
border-color:var(--primary);
background:var(--secondary)}
.compare-toolbar{
display:flex;
justify-content:space-between;
margin-bottom:20px}
.compare-table-wrap{
overflow:auto;
border:1px solid var(--border);
border-radius:12px}
.compare-table{
width:100%;
border-collapse:collapse;
min-width:550px}
.compare-table th,.compare-table td{
padding:18px;
border-bottom:1px solid var(--border);
text-align:left;
min-width:160px}
.compare-table th{
background:var(--secondary)}
.compare-table thead button{
margin-left:14px}
#toast{
position:fixed;
top:90px;
left:50%;
transform:translateX(-50%);
padding:13px 22px;
border-radius:10px;
background:var(--foreground);
color:var(--background);
z-index:100;
box-shadow:var(--shadow)}
.deal-official{
margin-top:12px}
.card-tools .is-active{
color:var(--primary)}
@media(max-width:700px){
.editor-grid{
grid-template-columns:1fr}
.manage-editor-layout{
grid-template-columns:1fr}
.manage-sidebar{
position:static}
#manage-list{
max-height:200px}
.compare-picker{
grid-template-columns:1fr 1fr}
.save-bar{
gap:12px}
.save-bar span{
font-size:12px}
input,textarea,select{
font-size:16px}
.manage-actions .button{
font-size:12px}
}


#manage-group{
width:100%;
margin-top:10px}
.compare-sort-label{
display:block;
margin:0 0 16px}


/* Text sizing and contrast, shared by both themes. */
.desktop-nav > a,
.hero-copy > p,
.hero-bottom,
.art-label small,
.orbit-caption,
.search-field input::placeholder,
.slot-no,
.card-tools button,
.card-tools a,
.card-identity p,
.card-tags > span,
.rating-row,
.compare-check,
.card-metrics span,
.empty-description,
.card-price > div > span:last-child,
.card-price > span,
.footer-bottom {

  color: var(--muted-foreground);

}

.card-identity h3.unfilled,
.dark .card-identity h3.unfilled,
.rating-row b,
.card-metrics strong {

  color: var(--foreground);

}

.card-identity h3.unfilled {
 font-weight: 600;
 }

.desktop-nav > a.active,
.desktop-nav > a:hover,
.card-tools .is-active,
.compare-check.checked,
.card-tags > .running,
 .card-actions > a:not(.primary):hover {

  color: var(--secondary-foreground);

}

input::placeholder,
textarea::placeholder {
 color: var(--muted-foreground);
 opacity: 1;
 }

/* Coral and cream theme, inspired by Outbid. Theme variables live in style.css. */
:root, .dark {

  --action-background: #c34e38;

  --action-hover: #a93e2b;

  --action-text: #ffffff;

}

.brand-mark {
 background: var(--action-background);
 box-shadow: 0 3px 9px #c34e3826;
 }

.brand-mark i {
 background: #ffc3a9;
 }

.hero-art > img {

  filter: grayscale(1) sepia(.65) saturate(1.7) hue-rotate(325deg);

  mix-blend-mode: multiply;

}

.dark .hero-art > img {

  filter: grayscale(1) sepia(.75) saturate(1.7) hue-rotate(325deg);

  mix-blend-mode: screen;

  opacity: .32;

}

.art-label {
 background: #fffaf5ed;
 border-color: #eedcd0;
 color: #49372e;
 }

.art-label small, .dark .art-label small {
 color: #655d57;
 }

.art-label > span {
 background: #fce9e2;
 color: #c34e38;
 }

.airport-card, .article-card, .deal-card, .panel,
.library-banner, .review-summary, .contact-panel, .about-intro {

  border-color: var(--border);

  border-radius: 16px;

}

.airport-card:hover, .recommended-card {
 border-color: var(--primary);
 }

.card-metrics {
 background: var(--muted);
 border-radius: 10px;
 }

.airport-logo, .airport-logo.tone-1, .airport-logo.tone-2, .airport-logo.tone-3,
.dark .airport-logo {
 background: var(--secondary);
 color: var(--primary);
 }

.group-icon, .group-budget, .group-ai {
 color: var(--primary);
 }

.card-tags > span {
 background: var(--muted);
 color: var(--muted-foreground);
 border-radius: 999px;
 }

.card-tags > .running {
 background: var(--secondary);
 color: var(--primary);
 }

.button {
 border-radius: 999px;
 }

.button.primary, .dark .button.primary,
.card-actions > button[data-notice], .card-actions > a.button.primary,
.review-summary button[data-notice], .review-article section > button[data-notice],
.deal-official > button[data-notice] {

  background: var(--action-background);

  color: var(--action-text);

  border: 1px solid var(--action-background);

  border-radius: 999px;

  font-weight: 600;

  box-shadow: 0 3px 8px #c34e3826;

}

.button.primary:hover, .dark .button.primary:hover,
.card-actions > button[data-notice]:hover, .card-actions > a.button.primary:hover,
.review-summary button[data-notice]:hover, .review-article section > button[data-notice]:hover,
.deal-official > button[data-notice]:hover {

  background: var(--action-hover);

  color: var(--action-text);

  border-color: var(--action-hover);

}

.review-summary button[data-notice], .review-article section > button[data-notice],
.deal-official > button[data-notice] {
 padding: 9px 17px;
 min-height: 39px;
 }

.card-actions > a.button.primary {
 flex: 1;
 min-height: 32px;
 padding: 7px 9px;
 }

.card-actions > a:not(.primary) {

  background: var(--secondary);

  color: var(--secondary-foreground);

  border: 1px solid var(--border);

  border-radius: 999px;

  padding: 5px 7px;

  font-weight: 500;

}

.card-actions > a:not(.primary):hover {
 background: var(--muted);
 color: var(--secondary-foreground);
 border-color: var(--primary);
 }

.button.secondary {
 background: var(--card);
 color: var(--foreground);
 border-color: var(--border);
 }

.button.secondary:hover {
 background: var(--secondary);
 border-color: var(--primary);
 }

.filter-tabs > button {
 border-radius: 999px;
 }

.filter-tabs > button.active {

  background: var(--action-background);

  color: var(--action-text);

  box-shadow: 0 2px 6px #c34e3826;

}

.compare-check.checked, .compare-pick-item.checked {

  background: var(--secondary);
 color: var(--primary);
 border-color: var(--primary);

}

#manage-list button.active {
 background: var(--action-background);
 color: var(--action-text);
 }

.desktop-nav > a.active {
 color: var(--primary);
 font-weight: 700;
 }

.search-field, input:not([type="checkbox"]):not([type="file"]), select {
 border-radius: 999px;
 }

textarea {
 border-radius: 12px;
 }

.search-field input {
 border-radius: 0;
 }

.visual-0, .visual-1, .visual-2, .dark .article-visual {

  background: var(--secondary);
 color: var(--primary);

}

.gentle-notice, .dark .gentle-notice {
 background: var(--secondary);
 border-color: var(--border);
 color: var(--muted-foreground);
 }

.gentle-notice b, .dark .gentle-notice b {
 color: var(--foreground);
 }

@media (max-width: 1000px) {
 .card-actions > a.button.primary {
 flex-basis: 100%;
 }
 }


/* Compact ranking entry and editable CMS panels. */
.ranking-home .catalog { padding-top: 24px; }
.ranking-home .catalog-title { margin-bottom: 18px; }
.ranking-home .catalog-title .eyebrow:empty { display: none; }
.ranking-intro { margin-top: 5px; color: var(--muted-foreground); font-size: 12px; }
.ranking-group { margin-top: 12px; }
.ranking-home .catalog-meta { margin-block: 10px; }
.ranking-home .empty-state { padding: 36px 16px; }
.cms-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.cms-tabs button { padding: 9px 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
.cms-tabs button.active { background: var(--action-background); color: var(--action-text); border-color: var(--action-background); }
.cms-editor { padding: 24px; }
.cms-editor > p { color: var(--muted-foreground); margin: 8px 0 18px; }
.cms-item { margin: 16px 0; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.cms-item > summary { font-weight: 600; }
.cms-item-controls { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.cms-section { padding: 0 16px 16px; margin: 16px 0; background: var(--muted); border-radius: 10px; }
.cms-prose { overflow-wrap: anywhere; }
.cms-prose p { margin: 0 0 20px; line-height: 1.9; color: var(--muted-foreground); }
.page-copy { margin-bottom: 24px; }
.desktop-nav { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.desktop-nav > a { flex-shrink: 0; }
@media(max-width:767px) {
  .ranking-home .catalog { padding-top: 18px; }
  .ranking-home .catalog-title { margin-bottom: 12px; }
  .ranking-intro { font-size: 12px; }
  .ranking-home .filter-toolbar { margin-top: 8px; }
  .ranking-home .catalog-meta { margin-block: 8px; }
  .ranking-group { margin-top: 8px; }
  .cms-editor { padding: 16px; }
  .cms-item { padding: 12px; }
  .cms-item-controls .button { padding: 7px 12px; }
}

.ranking-home .catalog-title h1 { font-size: 24px; line-height: 1.35; display: flex; align-items: center; gap: 10px; }
@media(max-width:767px) { .ranking-home .catalog-title h1 { font-size: 23px; } }

/* Unified Chinese-first typography. No downloaded fonts or per-widget font stacks. */
body { font-family: var(--site-font); font-size: 16px; line-height: 1.7; }
button, input, select, textarea, kbd { font-family: var(--site-font); }
button, .button, .text-button, .desktop-nav > a, .mobile-nav > a,
.filter-tabs > button, .catalog-meta select, .cms-tabs button { font-size: 14px; }
input, select, textarea, .search-field input { font-size: 16px; }
.desktop-nav > a { font-weight: 600; }
.manage-link, .footer-links, .footer-bottom, .breadcrumb,
.group-heading > p, .catalog-meta, .ranking-intro, .summary-tags,
.reading-meta, .category-label, .article-card-body > div { font-size: 14px; }
.hero-copy > p, .subpage-heading > div > p, .library-banner p,
.auth-panel p, .manage-hint, .cms-editor > p { font-size: 16px; }
.editor-grid label, .auth-panel label, .advanced-filters label { font-size: 14px; }
.card-identity h3, .card-identity h3.unfilled { font-size: 17px; font-weight: 700; }
.card-identity p, .card-description, .empty-description { font-size: 14px; line-height: 1.75; }
.card-tags > span, .rating-row, .rating-row small, .rating-row b,
.compare-check, .slot-no, .card-metrics span,
.card-price > span, .card-price > div > span:last-child { font-size: 12px; }
.card-metrics strong { font-size: 22px; }
.card-price strong { font-size: 27px; }
.card-actions > a, .card-actions > button[data-notice] { font-size: 14px; }
.card-top { height: auto; min-height: 24px; gap: 8px; }
.slot-no { letter-spacing: .3px; flex-wrap: wrap; }
.card-identity { align-items: flex-start; }
.card-identity h3, .card-identity p { white-space: normal; overflow-wrap: anywhere; }
.card-identity p { margin-top: 4px; }
.rating-row { flex-wrap: wrap; }
.card-metrics span { white-space: normal; text-align: center; line-height: 1.5; padding-inline: 2px; }
.card-metrics strong { white-space: normal; overflow-wrap: anywhere; text-align: center; }
.card-price { flex-wrap: wrap; }
/* Card description sizing is defined in the fixed ranking card section below. */
.card-actions { flex-wrap: wrap; }
.card-actions > a.button.primary, .card-actions > button[data-notice] { min-height: 40px; flex-basis: 100%; }
.card-actions > a:not(.primary) { min-height: 36px; flex-basis: 100%; }
.search-field { min-height: 44px; height: auto; }
.search-field input { padding-block: 0; }
.filter-tabs { min-width: 0; overflow-x: auto; }
.filter-tabs > button { flex-shrink: 0; min-height: 40px; }
.filter-toolbar > .search-field { flex-shrink: 0; }
.catalog-title { flex-wrap: wrap; }
.title-tools .text-button { font-size: 14px; }
.catalog-meta { gap: 12px; flex-wrap: wrap; }
.catalog-meta > div { min-width: 0; flex-wrap: wrap; }
.article-card-body p, .deal-card p, .deal-card small,
.faq-items summary, .faq-items p, .faq-section > div > p,
.about-intro p, .review-summary p, .pros-cons p,
.plans-grid p, .plans-grid b { font-size: 16px; }
.reading-page section p, .cms-prose p, .review-article section > p { font-size: 17px; line-height: 1.9; }
.article-deck { font-size: 17px; }
.reading-note, .gentle-notice p, .info-pair, .unlock-grid { font-size: 14px; }
.art-label small, .dark .art-label small { color: #504640; }
.ranking-home .catalog-title h1 { font-size: 28px; }
@media (max-width: 1100px) and (min-width: 768px) {
  .desktop-nav > a { font-size: 14px; }
  .filter-toolbar { flex-wrap: wrap; }
  .filter-toolbar > .search-field { width: 100%; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  .ranking-home .catalog-title h1 { font-size: 25px; }
  .card-identity h3, .card-identity h3.unfilled { font-size: 15px; }
  .card-identity p, .card-description, .empty-description { font-size: 12px; }
  .card-tags > span, .rating-row, .rating-row small, .rating-row b,
  .compare-check, .slot-no, .card-metrics span,
  .card-price > span, .card-price > div > span:last-child { font-size: 11px; }
  .card-metrics strong { font-size: 20px; }
  .card-price strong { font-size: 24px; }
  .card-actions > a, .card-actions > button[data-notice] { font-size: 14px; }
  .ranking-intro, .catalog-meta, .group-heading > p { font-size: 13px; }
  .catalog-meta > div:first-child, .catalog-meta > div:first-child > b,
  .catalog-meta .text-button, .catalog-meta select { font-size: 14px; }
  .title-tools { gap: 8px; }
  .title-tools .text-button { font-size: 14px; padding: 2px 0; }
  .filter-tabs > button { font-size: 14px; padding: 7px 10px; }
  .filter-toolbar { gap: 8px; padding-bottom: 8px; }
  .ranking-home .catalog-meta { padding-top: 4px; margin-block: 6px; gap: 6px; }
  .catalog-meta > div:first-child { display: none; }
  .ranking-home .catalog-title { gap: 6px; }
  .ranking-intro { margin-top: 3px; }
  .ranking-home .catalog { padding-top: 14px; }
  .reading-page section p, .cms-prose p, .review-article section > p { font-size: 16px; }
  .editor-grid label, .auth-panel label { font-size: 14px; }
  .manage-actions .button, .cms-tabs button, .save-bar span { font-size: 14px; }
  .save-bar { flex-wrap: wrap; }
}


/* Compact editorial cards, with a clear title and independent metric tiles. */
.ranking-home .airport-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.ranking-home .airport-card { padding:16px 12px 12px; border:1px solid var(--border); border-radius:22px; background:var(--card); box-shadow:0 5px 18px #40251a06; }
.ranking-home .recommended-card { background:linear-gradient(145deg,var(--card) 60%,var(--secondary)); }
.card-heading { display:flex; align-items:center; gap:5px; min-width:0; }
.ranking-home .slot-no { font-size:19px; font-weight:800; letter-spacing:-.5px; color:var(--foreground); flex-shrink:0; }
.card-heading h3 { font-size:19px; font-weight:800; letter-spacing:-.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; margin:0; }
.card-score { margin-left:auto; padding-left:3px; text-align:right; flex-shrink:0; line-height:1.1; }
.card-score span { display:block; font-size:10px; color:var(--muted-foreground); margin-bottom:4px; }
.card-score strong { font-size:21px; color:var(--foreground); }
.ranking-home .card-tags { display:flex; flex-wrap:nowrap; height:25px; min-height:25px; overflow:hidden; gap:4px; margin-top:12px; }
.ranking-home .card-tags > span { font-size:11px; padding:2px 6px; border:0; white-space:nowrap; flex-shrink:0; }
.ranking-home .card-tags .recommend-badge { background:#f8d991; color:#684500; }
.ranking-home .card-tags .price-badge { background:var(--foreground); color:var(--card); max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.card-subtitle { font-size:12px; color:var(--muted-foreground); height:20px; line-height:20px; margin:7px 0 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ranking-home .card-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; border:0; background:transparent; padding:0; margin:14px 0 12px; }
.ranking-home .card-metrics > div { align-items:flex-start; justify-content:space-between; border:0; border-radius:11px; background:var(--muted); padding:8px 5px; gap:5px; min-width:0; }
.ranking-home .card-metrics span { font-size:11px; line-height:1.35; height:2.7em; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ranking-home .card-metrics strong { font-size:17px; font-weight:750; line-height:1.3; height:1.3em; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.card-summary-label { font-size:12px; font-weight:700; margin-bottom:4px; }
.ranking-home .card-description { font-size:13px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:3.3em; min-height:3.3em; max-height:3.3em; overflow:hidden; margin:0; padding:0; flex:none; }
.card-utility { display:flex; justify-content:space-between; align-items:center; margin:12px 0; }
.card-utility button { display:flex; align-items:center; gap:3px; padding:2px 0; font-size:11px; color:var(--muted-foreground); background:transparent; }
.card-utility button.is-active,.card-utility button.checked { color:var(--primary); }
.ranking-home .card-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:0; border:0; margin-top:auto; }
.ranking-home .card-actions > a,.ranking-home .card-actions > button[data-notice] { min-width:0; min-height:37px; padding:6px 3px; font-size:13px; border:0; box-shadow:none; }
.ranking-home .card-actions > a.button.primary,.ranking-home .card-actions > button[data-notice] { background:#c34e38; color:#fff; font-weight:700; }
.ranking-home .card-actions > a:not(.primary) { background:var(--secondary); color:var(--secondary-foreground); font-weight:700; }
@media(min-width:768px) and (max-width:1023px) { .ranking-home .airport-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:767px) {
 .ranking-home .airport-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .ranking-home .airport-card { padding:12px 9px 10px; border-radius:18px; }
 .card-heading h3,.ranking-home .slot-no { font-size:15px; }
 .card-score strong { font-size:17px; }
 .ranking-home .card-tags > span { font-size:10px; padding:2px 4px; }
 .ranking-home .card-metrics { gap:3px; }
 .ranking-home .card-metrics strong { font-size:14px; }
 .ranking-home .card-metrics span { font-size:10px; }
 .ranking-home .card-description { font-size:12px; }
 .ranking-home .card-actions > a,.ranking-home .card-actions > button[data-notice] { font-size:12px; }
}

/* Stronger card copy, retaining readable contrast in both themes. */
.ranking-home .card-subtitle,
.ranking-home .card-description,
.ranking-home .card-metrics span,
.ranking-home .card-score span,
.ranking-home .card-utility button { color:var(--foreground); font-weight:600; }
.ranking-home .card-tags > span { font-weight:650; }
.ranking-home .card-actions > a.button.primary:hover,
.ranking-home .card-actions > button[data-notice]:hover { background:#a9402d; color:#fff; }

/* Brand image restored in the compact card heading. */
.card-brand-logo { width:30px; height:30px; flex:0 0 30px; display:flex; align-items:center; justify-content:center; border-radius:9px; overflow:hidden; background:var(--secondary); color:var(--primary); }
.card-brand-logo img { width:100%; height:100%; object-fit:contain; }
@media(max-width:1100px) {
 .card-heading { flex-wrap:wrap; }
 .card-brand-logo { width:26px; height:26px; flex-basis:26px; }
 .card-heading h3 { flex:1; }
 .card-score { width:100%; display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:2px; }
 .card-score span { margin:0; }
}

@media(min-width:1024px) {
 .ranking-home .airport-card { padding:20px 16px 16px; }
 .card-heading h3,.ranking-home .slot-no { font-size:21px; }
 .card-brand-logo { width:34px; height:34px; flex-basis:34px; }
 .ranking-home .card-description { font-size:14px; }
 .ranking-home .card-actions > a,.ranking-home .card-actions > button[data-notice] { min-height:40px; font-size:14px; }
}

.card-bottom-price { color:var(--primary); font-size:20px; font-weight:800; line-height:1.4; }

/* A little more breathing room in the four-column cards. */
@media(min-width:1024px) {
 .ranking-home .airport-card { min-height:460px; }
 .ranking-home .card-description { height:4.95em; min-height:4.95em; max-height:4.95em; -webkit-line-clamp:3; }
 .ranking-home .card-utility { margin-top:20px; margin-bottom:16px; }
}

/* Give the upper card sections clearer vertical separation. */
.ranking-home .card-tags { margin-top:18px; }
.ranking-home .card-subtitle { margin-top:12px; }
.ranking-home .card-metrics { margin-top:20px; }
@media(min-width:1024px) {
 .ranking-home .airport-card { padding-top:24px; }
}

/* Softer body copy and clear, orange metric values. */
.ranking-home .card-summary-label { color:#493a32; font-size:13px; font-weight:700; }
.ranking-home .card-description { color:#65564c; font-weight:500; }
.ranking-home .card-metrics span { color:#716157; font-size:12px; font-weight:500; }
.ranking-home .card-metrics strong { color:#ad4431; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.dark .ranking-home .card-summary-label { color:#f4e7dd; }
.dark .ranking-home .card-description,.dark .ranking-home .card-metrics span { color:#d6c5b9; }
.dark .ranking-home .card-metrics strong { color:#ffa58f; }
@media(max-width:767px) {
 .ranking-home .card-metrics span { font-size:11px; }
 .ranking-home .card-metrics strong { font-size:15px; }
}

.card-live-status { margin-left:auto; flex-shrink:0; text-align:right; line-height:1.4; }
.card-live-status > span { display:block; font-size:10px; color:var(--muted-foreground); }
.card-live-status b { display:flex; align-items:center; justify-content:flex-end; gap:5px; font-size:12px; font-weight:650; }
.card-live-status i { width:7px; height:7px; border-radius:50%; background:#8a817b; }
.card-live-status.is-normal i { background:#22a562; animation:status-pulse 1.8s ease-out infinite; }
@keyframes status-pulse { 0% {box-shadow:0 0 0 0 #22a56266;} 75%,100% {box-shadow:0 0 0 5px #22a56200;} }
.ranking-home .card-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.ranking-home .card-metrics > div { align-items:center; justify-content:center; text-align:center; padding:6px 2px; gap:3px; }
.ranking-home .card-metrics span { font-size:10px; line-height:1.25; height:2.5em; display:flex; align-items:center; justify-content:center; width:100%; }
.ranking-home .card-metrics strong { font-size:17px; line-height:1.2; height:1.2em; text-align:center; }
@media(max-width:767px) { .ranking-home .card-metrics strong {font-size:12px;} .ranking-home .card-metrics span {font-size:9px;} .card-live-status {margin-left:auto;} }
@media(prefers-reduced-motion:reduce) { .card-live-status.is-normal i {animation:none;} }

.ranking-home .card-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ranking-home .card-tags .star-rating { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; font-size:14px; background:#fff0c7; }
.star-rating .filled { color:#9b6500; }
.star-rating .unfilled { color:#bdb4a2; }
.card-bottom-rating { display:flex; align-items:baseline; gap:3px; color:var(--muted-foreground); font-size:11px; }
.card-bottom-rating strong { color:var(--primary); font-size:21px; font-weight:750; }
.card-bottom-rating small { font-size:10px; }
@media(max-width:767px) { .card-bottom-rating { gap:2px; } .card-bottom-rating > span {display:none;} .card-bottom-rating strong {font-size:17px;} .card-bottom-price {font-size:17px;} }

/* Preview: larger brand mark and tighter price-to-action spacing. */
.ranking-home .card-brand-logo { width:64px; height:64px; flex-basis:64px; border-radius:15px; }
.ranking-home .card-brand-logo > svg { width:44px; height:44px; }
.ranking-home .card-utility { margin-top:auto; margin-bottom:12px; padding-top:18px; }
.ranking-home .card-actions { margin-top:0; }
@media(max-width:767px) {
 .ranking-home .card-brand-logo { width:48px; height:48px; flex-basis:48px; }
 .ranking-home .card-brand-logo > svg {width:32px;height:32px;}
}