:root{--navy:#092847;--blue:#0875ee;--ink:#14283d;--muted:#6c7f91;--line:#dce6f0;--bg:#f4f8fc;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif;background:var(--bg);color:var(--ink)}a{text-decoration:none;color:inherit}
.topbar{height:70px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 4%;position:sticky;top:0;z-index:20;box-shadow:0 2px 15px rgba(10,40,70,.08)}
.brand{display:flex;align-items:center;gap:10px}.logo{font-size:28px}.brand b{display:block}.brand small{display:block;color:#75889a;font-size:10px}.topbar nav{display:flex;gap:25px;font-size:12px;font-weight:800}.catalog-badge{background:#eaf4ff;color:#066ad6;border:1px solid #bee0ff;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:900}
.hero{height:540px;background:url("assets/hero-cars.jpg") center 58%/cover no-repeat;position:relative;display:flex;align-items:center;color:white}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,24,46,.85),rgba(6,34,62,.55) 48%,rgba(0,0,0,.12))}
.hero-inner{width:min(1180px,90%);margin:auto;position:relative;z-index:2}.eyebrow{letter-spacing:.16em;font-weight:900;font-size:11px;color:#a8d7ff}.hero h1{font-size:50px;line-height:1.18;margin:12px 0}.hero h1 em{font-style:normal;color:#fff}.hero p{line-height:1.9;color:#e8f3fe}
.hero-count{display:flex;align-items:center;gap:12px;margin:22px 0}.hero-count strong{font-size:25px;color:#fff}.hero-count span{font-size:11px;color:#d6e7f7;margin-right:15px}.primary{display:inline-block;background:linear-gradient(135deg,#0567e8,#1591ff);padding:15px 22px;border-radius:10px;font-weight:900}
main{width:min(1180px,94%);margin:auto}.sim-grid{display:grid;grid-template-columns:1.55fr .75fr;gap:18px;margin-top:25px}.panel,.result{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 30px rgba(10,50,90,.08)}.panel{padding:26px}.result{padding:27px;background:linear-gradient(180deg,#eef7ff,#fff)}
.head,.section-title{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.head h2,.section-title h2{margin:0 0 5px}.head p,.section-title p{margin:0;color:var(--muted);font-size:12px}.pill{background:#edf6ff;color:#0674e8;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:900}
.choose-grid,.cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}label{font-size:11px;font-weight:900;color:#53677c}select,input{width:100%;height:45px;margin-top:6px;border:1px solid #cedbe8;border-radius:8px;padding:0 11px;background:#fff;font-size:13px;color:#20364d;outline:none}select:focus,input:focus{border-color:#73aff5;box-shadow:0 0 0 3px rgba(0,115,235,.09)}
.quick-search{margin-top:14px;position:relative}.search-results{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;border:1px solid #d5e2ef;border-radius:10px;box-shadow:0 12px 30px rgba(10,40,70,.15);z-index:10;max-height:260px;overflow:auto}.search-results.show{display:block}.search-item{padding:10px 12px;border-bottom:1px solid #eef3f7;cursor:pointer;font-size:12px}.search-item:hover{background:#f2f8ff}.search-item b{display:block}.search-item span{color:#7b8da0;font-size:10px}
hr{border:0;border-top:1px solid #e5edf5;margin:24px 0}.panel h3{margin:0}.unit{position:relative}.unit input{padding-right:58px}.unit span{position:absolute;right:10px;top:50%;transform:translateY(-25%);font-size:10px;color:#76899a}.calc{width:65%;display:block;margin:22px auto 0;height:50px;border:0;border-radius:10px;background:linear-gradient(135deg,#0068e9,#0c8cff);color:white;font-weight:900;cursor:pointer}
.result-label{font-size:10px;color:#0875ee;font-weight:900;letter-spacing:.1em}.result h3{font-size:19px;margin:11px 0 2px}.result>small{color:#77899a}.price{margin-top:18px;color:#086cdf;font-size:42px;font-weight:950}.price b{font-size:16px;margin-left:4px}.caption{font-size:10px;color:#75889a;margin-top:-2px}.result-row{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid #e1ebf4;font-size:12px}.result-row span{color:#64778b}.compare{display:flex;gap:10px;align-items:center;background:#e9f8f5;color:#107d6c;padding:13px;border-radius:10px;margin-top:14px}.compare span{font-size:24px}.compare small,.compare b{display:block}.note{font-size:9px;line-height:1.6;color:#8392a2}
.valuation{margin:18px 0;background:linear-gradient(120deg,#eaf5ff,#fff);border:1px solid #d7e7f7;border-radius:17px;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px}.valuation h2{margin:0 0 6px;font-size:22px}.valuation p{margin:0;color:#6a7d90;font-size:12px}.valuation a{background:#0875ee;color:#fff;padding:14px 20px;border-radius:9px;font-weight:900;white-space:nowrap}
.catalog-section{padding:35px 0}.count{font-size:12px;color:#697d90}.count strong{font-size:18px;color:#0875ee}.brand-chips{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.brand-chip{border:1px solid #cfdde9;background:#fff;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:800;cursor:pointer}.brand-chip.active{background:#0875ee;color:#fff;border-color:#0875ee}
.catalog-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.model-card{background:#fff;border:1px solid #dde8f1;border-radius:10px;padding:12px;cursor:pointer;min-height:72px}.model-card:hover{border-color:#82b8ef;box-shadow:0 5px 14px rgba(10,60,100,.08)}.model-card b{display:block;font-size:12px}.model-card span{font-size:9px;color:#75899c}.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:15px 0 40px}.info-grid>div{background:#fff;border:1px solid #dde7f0;border-radius:13px;padding:18px}.info-grid b{font-size:14px}.info-grid p{font-size:11px;line-height:1.6;color:#708296}
footer{background:#fff;border-top:1px solid #dce6ef;padding:25px 5%;display:flex;justify-content:space-between;color:#6f8191;font-size:11px}
@media(max-width:900px){.topbar nav{display:none}.sim-grid{grid-template-columns:1fr}.catalog-list{grid-template-columns:repeat(3,1fr)}.info-grid{grid-template-columns:repeat(2,1fr)}.valuation{flex-direction:column;align-items:stretch}}
@media(max-width:600px){.catalog-badge{display:none}.hero{height:570px;background-position:60% center}.overlay{background:linear-gradient(180deg,rgba(3,24,46,.65),rgba(3,24,46,.82))}.hero h1{font-size:35px}.hero p{font-size:13px}.hero-count{flex-wrap:wrap}.choose-grid,.cost-grid{grid-template-columns:1fr}.calc{width:100%}.catalog-list{grid-template-columns:repeat(2,1fr)}.info-grid{grid-template-columns:1fr}.valuation a{text-align:center}.head,.section-title{flex-direction:column}}


/* v4: holding period selector + comparison */
.period-block{
  margin:0 0 24px;padding:18px;border:1px solid #d8e7f5;border-radius:14px;
  background:linear-gradient(135deg,#f5faff,#eef6ff)
}
.period-title{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}
.period-title h3{margin:0 0 4px!important;font-size:16px}
.period-title p{margin:0;color:#708396;font-size:10px;line-height:1.6}
.period-current{min-width:64px;text-align:center;background:#fff;border:1px solid #bcd8f5;border-radius:12px;padding:9px 12px;color:#0875ee;font-size:12px;font-weight:900}
.period-current b{font-size:22px;margin-right:2px}
.period-switch{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.period-switch button{
  border:1px solid #c8d9e9;background:#fff;color:#3e5872;border-radius:10px;height:42px;
  font-weight:900;cursor:pointer;transition:.18s
}
.period-switch button:hover{border-color:#76afe9;transform:translateY(-1px)}
.period-switch button.active{
  border-color:#0875ee;background:linear-gradient(135deg,#0875ee,#1592ff);color:#fff;
  box-shadow:0 7px 16px rgba(8,117,238,.20)
}
.period-compare-section{padding:34px 0 22px}
.best-period-badge{
  background:#fff7dd;border:1px solid #f0d071;color:#8d6512;border-radius:999px;
  padding:8px 13px;font-size:10px;font-weight:900
}
.best-period-badge strong{font-size:15px;margin-left:4px}
.best-period-card{
  margin-top:18px;background:linear-gradient(135deg,#fff9e8,#fff);border:1px solid #efd887;
  border-radius:15px;padding:18px 20px;display:flex;align-items:center;gap:15px;
  box-shadow:0 8px 22px rgba(120,90,20,.07)
}
.best-icon{font-size:34px}
.best-period-card small{color:#8c741e;font-weight:900}
.best-period-card h3{margin:3px 0 4px;font-size:18px;color:#6f5311}
.best-period-card p{margin:0;color:#7d735a;font-size:10px}
.period-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:16px}
.period-card{
  background:#fff;border:1px solid #dce7f0;border-radius:13px;padding:15px;cursor:pointer;
  transition:.18s;position:relative
}
.period-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,60,100,.08)}
.period-card.active{border:2px solid #0875ee;background:#f3f9ff}
.period-card.best{border-color:#e4bd3f;background:#fffaf0}
.period-card .badge{
  position:absolute;right:8px;top:8px;background:#f0c84f;color:#654a00;border-radius:999px;
  padding:3px 6px;font-size:8px;font-weight:900
}
.period-card .years{font-size:12px;color:#61758a;font-weight:900}
.period-card .years b{font-size:25px;color:#152d45;margin-right:2px}
.period-card .cost{font-size:15px;font-weight:950;color:#0875ee;margin:10px 0 3px}
.period-card .monthly{font-size:9px;color:#7b8c9c}
.compare-table-wrap{overflow:auto;margin-top:14px;border:1px solid #dce7f0;border-radius:13px;background:#fff}
.compare-table{width:100%;border-collapse:collapse;min-width:650px}
.compare-table th,.compare-table td{padding:12px 14px;border-bottom:1px solid #edf2f6;text-align:right;font-size:11px}
.compare-table th:first-child,.compare-table td:first-child{text-align:left}
.compare-table th{background:#f7fafe;color:#60758a;font-size:10px}
.compare-table tbody tr.selected{background:#eef7ff}
.compare-table tbody tr.best-row{background:#fff9e9}
.compare-table td strong{color:#0b6fd8}
@media(max-width:900px){
  .period-cards{grid-template-columns:repeat(5,minmax(115px,1fr));overflow-x:auto;padding-bottom:5px}
}
@media(max-width:600px){
  .period-title{align-items:flex-start}
  .period-switch{grid-template-columns:repeat(5,1fr);gap:5px}
  .period-switch button{height:38px;font-size:11px;padding:0}
  .period-current{min-width:56px}
  .period-cards{grid-template-columns:repeat(5,128px)}
}


/* v5: clearer gross total / resale / net burden */
.main-metric-label{
  margin-top:18px;
  font-size:12px;
  color:#4f6780;
  font-weight:900;
}
.main-metric-label b{color:#0875ee}
.money-summary{
  margin:16px 0 12px;
  border:1px solid #d8e5f1;
  background:#fff;
  border-radius:13px;
  padding:14px;
}
.money-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:7px 2px;
  font-size:12px;
}
.money-line span{color:#60758b}
.money-line strong{font-size:15px}
.resale-line strong{color:#13856f}
.money-divider{
  text-align:center;
  color:#9aabba;
  font-weight:900;
  line-height:1;
  padding:2px 0;
}
.net-line{
  margin-top:3px;
  padding-top:12px;
  border-top:1px dashed #cfdeea;
}
.net-line span{
  color:#18324d;
  font-weight:900;
}
.net-line strong{
  color:#086cdf;
  font-size:21px;
  font-weight:950;
}
.period-card .gross{
  font-size:9px;
  color:#8091a1;
  margin-top:7px;
}
.period-card .net-label{
  font-size:8px;
  color:#6d8297;
  font-weight:800;
}


/* v6 recommendation diagnosis */
.hero-actions-v6{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.secondary-v6{
  display:inline-block;border:1px solid rgba(255,255,255,.65);background:rgba(8,32,56,.25);
  color:#fff;padding:14px 20px;border-radius:10px;font-weight:900;backdrop-filter:blur(3px)
}
.recommend-section{padding:34px 0 18px}
.recommend-intro{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:18px}
.rec-eyebrow{font-size:10px;letter-spacing:.14em;color:#0875ee;font-weight:950}
.recommend-intro h2{margin:5px 0 6px;font-size:27px}
.recommend-intro p{margin:0;color:#6c8093;font-size:12px;line-height:1.7}
.rec-step-badge{background:#eaf5ff;border:1px solid #bee0ff;color:#0875ee;border-radius:999px;padding:9px 13px;font-size:11px;font-weight:900}
.recommend-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:start}
.recommend-form,.recommend-result{background:#fff;border:1px solid #dce7f0;border-radius:18px;box-shadow:0 12px 30px rgba(10,50,90,.08)}
.recommend-form{padding:24px}.recommend-result{padding:22px;position:sticky;top:90px}
.question-block{margin-bottom:20px;min-width:0}.question-block h3{font-size:13px;margin:0 0 10px;color:#203a55;display:flex;align-items:center;gap:8px}
.question-block h3>span{width:22px;height:22px;border-radius:50%;background:#eaf4ff;color:#0875ee;display:inline-grid;place-items:center;font-size:10px}
.question-block>select{margin-top:0}
.question-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice-grid{display:grid;gap:8px}.body-choice{grid-template-columns:repeat(4,1fr)}.use-choice{grid-template-columns:repeat(3,1fr)}.origin-choice{grid-template-columns:repeat(3,1fr)}
.choice-grid label{display:block;cursor:pointer}.choice-grid input{position:absolute;opacity:0;pointer-events:none}
.choice-grid label span{
  display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px;
  border:1px solid #cfdeeb;border-radius:10px;background:#fff;color:#546b82;font-size:11px;font-weight:850;text-align:center;transition:.16s
}
.choice-grid input:checked+span{border-color:#0875ee;background:#edf6ff;color:#086fdc;box-shadow:0 0 0 2px rgba(8,117,238,.07)}
.recommend-btn{width:100%;height:52px;border:0;border-radius:10px;background:linear-gradient(135deg,#0069e9,#1290ff);color:#fff;font-size:14px;font-weight:950;cursor:pointer}
.rec-result-head>span{font-size:9px;color:#0875ee;font-weight:950;letter-spacing:.12em}.rec-result-head h3{font-size:20px;margin:5px 0}.rec-result-head p{font-size:11px;color:#708397;line-height:1.6}
.rec-placeholder{text-align:center;padding:45px 8px;color:#7b8c9e}.rec-placeholder>div{font-size:48px}.rec-placeholder b{display:block;color:#425c76;margin:7px 0}.rec-placeholder p{font-size:10px}
.recommend-results{display:grid;gap:9px;margin-top:14px}
.rec-car{border:1px solid #dbe7f1;border-radius:13px;padding:13px;background:#fff;position:relative}
.rec-car:first-child{border-color:#dfbd4c;background:linear-gradient(135deg,#fff9e7,#fff)}
.rec-rank{position:absolute;top:11px;right:11px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#7890a8;color:#fff;font-size:11px;font-weight:950}
.rec-car:first-child .rec-rank{background:#d1a426}
.rec-car small{color:#77899b;font-size:9px}.rec-car h4{font-size:15px;margin:2px 35px 5px 0}.rec-score{display:flex;align-items:center;gap:7px;margin:7px 0}.rec-score-bar{height:6px;flex:1;background:#edf2f6;border-radius:999px;overflow:hidden}.rec-score-fill{height:100%;background:#0875ee;border-radius:999px}.rec-score b{font-size:10px;color:#0875ee}
.rec-reasons{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}.rec-reasons span{font-size:8px;background:#f1f6fa;color:#5b7085;padding:4px 6px;border-radius:999px}
.rec-car button{width:100%;border:1px solid #abd1f8;background:#f2f8ff;color:#0875ee;border-radius:8px;min-height:38px;font-size:10px;font-weight:900;cursor:pointer;margin-top:5px}
@media(max-width:900px){
  .recommend-layout{grid-template-columns:1fr}.recommend-result{position:static}.body-choice{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .recommend-intro{flex-direction:column}.recommend-intro h2{font-size:23px}
  .question-row{grid-template-columns:1fr}.body-choice,.use-choice,.origin-choice{grid-template-columns:repeat(2,1fr)}
  .hero-actions-v6{flex-direction:column;align-items:stretch}.hero-actions-v6 a{text-align:center}
}


/* v7: separate recommendation page */
.nav-current{color:#0875ee!important}
.rec-top-badge{text-decoration:none}
.recommend-hero{
  min-height:350px;
  background:
    linear-gradient(90deg,rgba(4,28,53,.90),rgba(4,31,58,.65),rgba(4,31,58,.25)),
    url("assets/hero-cars.jpg") center 55%/cover no-repeat;
  color:#fff;
  display:flex;
  align-items:center;
}
.recommend-hero-inner{width:min(1180px,92%);margin:auto;padding:48px 0}
.recommend-hero .rec-eyebrow{color:#a8d7ff}
.recommend-hero h1{font-size:42px;line-height:1.2;margin:9px 0 15px}
.recommend-hero p{font-size:14px;line-height:1.8;color:#e7f2fd;margin:0}
.recommend-hero-points{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.recommend-hero-points span{
  padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.24);font-size:10px;font-weight:900
}
.standalone-recommend{padding-top:30px}
.recommend-next{
  margin:20px 0 40px;padding:25px 28px;border-radius:16px;
  border:1px solid #d6e6f5;background:linear-gradient(120deg,#edf6ff,#fff);
  display:flex;justify-content:space-between;align-items:center;gap:20px
}
.recommend-next h2{margin:0 0 5px;font-size:20px}
.recommend-next p{margin:0;color:#6f8295;font-size:11px}
.recommend-next a{white-space:nowrap;background:#0875ee;color:#fff;padding:13px 18px;border-radius:9px;font-weight:900}
@media(max-width:700px){
  .recommend-hero{min-height:390px}
  .recommend-hero h1{font-size:32px}
  .recommend-next{flex-direction:column;align-items:stretch}
  .recommend-next a{text-align:center}
}


/* v8: car goods page */
.goods-hero{
  min-height:320px;
  background:
    linear-gradient(90deg,rgba(3,26,50,.90),rgba(3,31,58,.66),rgba(3,31,58,.20)),
    url("assets/hero-cars.jpg") center 56%/cover no-repeat;
  color:#fff;display:flex;align-items:center
}
.goods-hero-inner{width:min(1180px,92%);margin:auto;padding:48px 0}
.goods-hero h1{font-size:40px;margin:8px 0 12px}
.goods-hero p{font-size:14px;line-height:1.8;color:#e5f0fb;margin:0}
.goods-section{padding:32px 0}
.goods-filter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 20px}
.goods-filter button{
  border:1px solid #ccdce9;background:#fff;color:#4f657a;border-radius:999px;
  padding:9px 13px;font-size:11px;font-weight:900;cursor:pointer
}
.goods-filter button.active{background:#0875ee;color:#fff;border-color:#0875ee}
.goods-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.goods-card{
  position:relative;background:#fff;border:1px solid #dce7f0;border-radius:14px;
  padding:18px;box-shadow:0 8px 20px rgba(10,50,90,.06)
}
.goods-icon{font-size:34px;margin-bottom:10px}
.goods-tag{
  position:absolute;right:12px;top:12px;background:#eef6ff;color:#0875ee;
  border-radius:999px;padding:4px 7px;font-size:8px;font-weight:900
}
.goods-card h3{font-size:15px;margin:0 0 7px}
.goods-card p{font-size:11px;line-height:1.7;color:#6e8194;min-height:56px}
.goods-card a{
  display:block;text-align:center;background:linear-gradient(135deg,#d51f1f,#f1442e);
  color:#fff;border-radius:9px;padding:11px 10px;font-size:11px;font-weight:950
}
.goods-card small{display:block;margin-top:7px;color:#8a99a8;font-size:8px;line-height:1.5}
.goods-car-select{
  margin:14px 0 24px;padding:24px 26px;border:1px solid #d7e6f4;border-radius:16px;
  background:linear-gradient(120deg,#eef7ff,#fff);display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center
}
.goods-car-select h2{margin:5px 0 7px;font-size:22px}
.goods-car-select p{margin:0;color:#6d8093;font-size:11px;line-height:1.7}
.goods-car-box{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.goods-car-box button{
  grid-column:1/-1;height:44px;border:0;border-radius:9px;background:#0875ee;color:#fff;font-weight:900;cursor:pointer
}
.affiliate-note{
  margin:12px 0 40px;padding:22px 25px;background:#fff;border:1px solid #dce7f0;border-radius:15px;
  display:flex;justify-content:space-between;align-items:center;gap:20px
}
.affiliate-note h3{margin:0 0 5px;font-size:17px}.affiliate-note p{margin:0;color:#708397;font-size:10px}
.affiliate-flow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.affiliate-flow span{background:#f2f6fa;border-radius:999px;padding:7px 9px;font-size:9px;font-weight:900}
.affiliate-flow b{color:#9aabba}
@media(max-width:900px){
  .goods-grid{grid-template-columns:repeat(2,1fr)}
  .goods-car-select{grid-template-columns:1fr}
  .affiliate-note{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){
  .goods-hero{min-height:350px}
  .goods-hero h1{font-size:31px}
  .goods-grid{grid-template-columns:1fr}
  .goods-car-box{grid-template-columns:1fr}
  .goods-car-box button{grid-column:auto}
}


/* v9: ranked products */
.ranking-head{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin:16px 0 14px;padding:14px 16px;background:#fff;border:1px solid #dce7f0;border-radius:13px
}
.ranking-head>div{display:flex;align-items:center;gap:12px}
.ranking-head>div>span{font-size:28px}
.ranking-head small{font-size:8px;color:#0875ee;font-weight:950;letter-spacing:.12em}
.ranking-head h3{margin:2px 0 0;font-size:18px}
.ranking-head>a{font-size:10px;color:#0875ee;font-weight:900;white-space:nowrap}
.product-ranking{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rank-product{
  background:#fff;border:1px solid #dce7f0;border-radius:15px;padding:20px;position:relative;
  box-shadow:0 8px 22px rgba(10,50,90,.06)
}
.rank-product-best{border:2px solid #e0be4d;background:linear-gradient(180deg,#fffaf0,#fff)}
.rank-number{
  position:absolute;left:12px;top:12px;width:29px;height:29px;border-radius:50%;
  display:grid;place-items:center;background:#8297ab;color:#fff;font-weight:950;font-size:12px
}
.rank-product-best .rank-number{background:#d3a72a}
.best-label{
  position:absolute;right:12px;top:12px;background:#fff0bd;color:#8a6610;
  border-radius:999px;padding:4px 7px;font-size:8px;font-weight:950
}
.rank-product-icon{font-size:43px;text-align:center;margin:19px 0 8px}
.rank-product>small{color:#788b9e;font-size:9px}
.rank-product h3{font-size:17px;margin:3px 0 7px}
.product-score{display:inline-block;background:#eef6ff;color:#0875ee;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:900}
.rank-product p{min-height:58px;font-size:11px;line-height:1.7;color:#6e8194}
.price-guide{font-size:12px;font-weight:950;color:#253e56;margin:8px 0 12px}
.product-main-link{
  display:block;text-align:center;background:linear-gradient(135deg,#d52424,#f0472f);
  color:#fff;border-radius:9px;padding:12px 10px;font-size:11px;font-weight:950
}
.product-sub-link{display:block;text-align:center;color:#0875ee;font-size:9px;font-weight:900;padding:10px 5px 3px}
.demo-link-note{display:block;color:#8a99a8;font-size:7px;line-height:1.5;text-align:center;margin-top:6px}
.goods-popular{padding:20px 0 26px}
.quick-goods-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:16px}
.quick-good{
  background:#fff;border:1px solid #dce7f0;border-radius:12px;padding:15px 10px;text-align:center;
  transition:.18s
}
.quick-good:hover{transform:translateY(-2px);box-shadow:0 7px 17px rgba(10,50,90,.08)}
.quick-good>span{display:block;font-size:30px;margin-bottom:6px}
.quick-good>b{display:block;font-size:11px;color:#20384f}
.quick-good>small{display:block;font-size:8px;color:#0875ee;margin-top:6px}
.affiliate-note-v9{margin-top:18px}
@media(max-width:900px){
  .product-ranking{grid-template-columns:1fr}
  .quick-goods-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .ranking-head{align-items:flex-start;flex-direction:column}
  .quick-goods-grid{grid-template-columns:repeat(2,1fr)}
}


/* v10: Amazon button support (hidden until config SHOW_AMAZON=true) */
.commerce-links{display:grid;gap:7px}
.product-amazon-link{
  display:block;text-align:center;background:#232f3e;color:#fff;border-radius:9px;
  padding:11px 10px;font-size:11px;font-weight:950
}
.product-amazon-link:hover{opacity:.92}


/* v12: car/bike integrated navigation + real bike hero */
.vehicle-switch{
  display:flex;justify-content:center;gap:4px;background:#0a2038;padding:7px 10px;
  position:relative;z-index:30
}
.vehicle-tab{
  min-width:120px;text-align:center;padding:8px 16px;border-radius:999px;
  color:#c8d7e6;font-size:12px;font-weight:950
}
.vehicle-tab.active{background:#fff;color:#102b47}
.bike-hero{
  min-height:560px;
  position:relative;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(4,18,37,.88) 0%,rgba(5,24,46,.82) 22%,rgba(5,27,50,.58) 48%,rgba(5,25,45,.20) 74%),
    url("assets/bike-hero-v12.png") center center/cover no-repeat;
}
.bike-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.12)),
    linear-gradient(90deg,rgba(0,0,0,.18),transparent 45%,rgba(0,0,0,.10));
}
.bike-hero-inner,.bike-rec-inner{
  width:min(1180px,92%);
  margin:auto;
  position:relative;
  z-index:2;
  padding:54px 0;
}
.bike-hero h1{
  font-size:50px;
  line-height:1.16;
  margin:12px 0;
  max-width:680px;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.bike-hero h1 em{font-style:normal}
.bike-hero p{
  font-size:14px;
  line-height:1.9;
  color:#e7f0fa;
  max-width:700px;
  text-shadow:0 4px 18px rgba(0,0,0,.28);
}
.bike-hero .hero-count,
.bike-hero .hero-actions-v6{
  position:relative;
  z-index:2;
}
.bike-rec-hero,.bike-goods-hero{
  min-height:300px;
  display:flex;
  align-items:center;
  color:#fff;
  background:linear-gradient(135deg,#102f4e,#183f62 58%,#7a858a)
}
.bike-rec-hero h1,.bike-goods-hero h1{font-size:38px;line-height:1.2;margin:8px 0 12px}
.bike-rec-hero p,.bike-goods-hero p{color:#e1edf7;font-size:13px}
@media(max-width:900px){
  .bike-hero{
    min-height:520px;
    background:
      linear-gradient(180deg,rgba(4,18,37,.70),rgba(5,24,46,.55),rgba(5,25,45,.32)),
      url("assets/bike-hero-v12.png") 68% center/cover no-repeat;
  }
}
@media(max-width:700px){
 .vehicle-switch{justify-content:stretch}
 .vehicle-tab{flex:1;min-width:0}
 .bike-hero{
   min-height:540px;
   background:
     linear-gradient(180deg,rgba(4,18,37,.78),rgba(5,24,46,.60),rgba(5,25,45,.36)),
     url("assets/bike-hero-v12.png") 72% center/cover no-repeat;
 }
 .bike-hero h1{font-size:34px;max-width:100%}
 .bike-hero p{font-size:13px;max-width:100%}
 .bike-rec-hero h1,.bike-goods-hero h1{font-size:30px}
}


/* v12 visual polish */
.bike-hero .eyebrow{
  letter-spacing:.16em;
  color:#a6d6ff;
}
.bike-hero .primary,
.bike-hero .secondary-v6{
  box-shadow:0 10px 25px rgba(0,0,0,.22);
}


/* v13: stronger, easier-to-notice main navigation */
.topbar{
  min-height:82px;
  height:auto;
  padding-top:10px;
  padding-bottom:10px;
}
.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px!important;
  flex-wrap:wrap;
}
.main-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid #dbe6ef;
  background:#f7fafd;
  color:#29445e;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.01em;
  transition:.16s ease;
  white-space:nowrap;
}
.main-nav a:hover{
  background:#eaf4ff;
  border-color:#9bc8f3;
  color:#0875ee;
  transform:translateY(-1px);
}
.main-nav a.nav-current{
  background:#eaf4ff;
  border-color:#78b7f3;
  color:#0875ee!important;
  box-shadow:inset 0 0 0 1px rgba(8,117,238,.08);
}
.main-nav a.nav-cta{
  background:linear-gradient(135deg,#0875ee,#1394ff);
  border-color:#0875ee;
  color:#fff!important;
  box-shadow:0 7px 15px rgba(8,117,238,.19);
}
.main-nav a.nav-cta:hover{
  background:linear-gradient(135deg,#066bd9,#0b86ed);
  color:#fff;
}
@media(max-width:1100px){
  .topbar{gap:10px}
  .main-nav{gap:5px!important}
  .main-nav a{padding:0 9px;font-size:11px!important}
}
@media(max-width:900px){
  .topbar{
    align-items:flex-start;
    flex-wrap:wrap;
    padding:10px 4%;
  }
  .topbar .brand{margin-top:5px}
  .main-nav{
    display:flex!important;
    order:3;
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:4px 0 2px;
    scrollbar-width:thin;
  }
  .main-nav a{
    flex:0 0 auto;
    min-height:40px;
    font-size:11px!important;
  }
}
@media(max-width:600px){
  .main-nav a{padding:0 10px}
}


/* v14: make vehicle mode switch and main navigation unmistakable */
.vehicle-switch{
  background:linear-gradient(135deg,#071f37,#0a355a);
  padding:10px 14px;
  position:relative;
  z-index:35;
  box-shadow:0 3px 12px rgba(0,0,0,.18);
}
.vehicle-switch-inner{
  width:min(720px,96%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.vehicle-tab{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:8px 18px;
  border-radius:14px;
  color:#d8e7f6;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  transition:.18s ease;
}
.vehicle-tab:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.34);
}
.vehicle-tab.active{
  background:#fff;
  color:#102c47;
  border-color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.20);
}
.vehicle-icon{
  font-size:23px;
  line-height:1;
}
.vehicle-copy{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.vehicle-copy b{
  font-size:16px;
  font-weight:950;
}
.vehicle-copy small{
  font-size:9px;
  opacity:.72;
  margin-top:4px;
  white-space:nowrap;
}

/* Use the white header space more efficiently */
.topbar{
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  align-items:center !important;
  gap:20px;
  min-height:94px !important;
  padding:13px 4% !important;
  background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
  border-bottom:1px solid #dce8f3;
}
.topbar .brand{
  min-width:220px;
}
.topbar .brand b,
.topbar .brand strong{
  font-size:17px;
}
.topbar .brand small{
  font-size:10px;
  color:#71869a;
}
.main-nav{
  width:100%;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(120px,1fr));
  gap:10px !important;
}
.main-nav a{
  min-height:54px !important;
  width:100%;
  padding:8px 12px !important;
  border-radius:12px !important;
  border:1px solid #cfdfea !important;
  background:#fff !important;
  color:#29445e !important;
  font-size:12px !important;
  font-weight:950 !important;
  box-shadow:0 4px 10px rgba(20,55,90,.05);
}
.main-nav a:hover{
  background:#eef7ff !important;
  border-color:#7fb8ed !important;
  color:#0875ee !important;
  transform:translateY(-2px);
  box-shadow:0 7px 15px rgba(20,70,120,.10);
}
.main-nav a.nav-current{
  background:#eaf5ff !important;
  border-color:#69aceb !important;
  color:#0875ee !important;
  box-shadow:inset 0 0 0 1px rgba(8,117,238,.08),0 5px 12px rgba(8,117,238,.08);
}
.main-nav a.nav-cta{
  background:linear-gradient(135deg,#0875ee,#1498ff) !important;
  color:#fff !important;
  border-color:#0875ee !important;
  box-shadow:0 8px 18px rgba(8,117,238,.22);
}
.main-nav a.nav-cta:hover{
  color:#fff !important;
  background:linear-gradient(135deg,#066bd8,#0e89ec) !important;
}

/* Count badge uses remaining space without looking detached */
.topbar .catalog-badge{
  min-width:130px;
  text-align:center;
  padding:10px 13px;
  font-size:10px;
  background:#eef7ff;
  border:1px solid #bcdcff;
}

/* Car/bike brand header: stronger identity */
.topbar .logo,
.topbar .brand-icon{
  font-size:30px !important;
}

@media(max-width:1180px){
  .topbar{
    grid-template-columns:auto 1fr;
  }
  .topbar .catalog-badge{
    display:none;
  }
  .main-nav{
    grid-template-columns:repeat(5,minmax(105px,1fr));
  }
  .main-nav a{
    font-size:11px !important;
  }
}
@media(max-width:900px){
  .vehicle-switch-inner{
    width:100%;
  }
  .topbar{
    display:flex !important;
    flex-wrap:wrap;
    gap:10px;
    min-height:0 !important;
  }
  .topbar .brand{
    min-width:0;
  }
  .main-nav{
    order:3;
    width:100%;
    display:flex !important;
    gap:7px !important;
    overflow-x:auto;
    padding:3px 0 5px;
  }
  .main-nav a{
    flex:0 0 150px;
    min-height:48px !important;
  }
}
@media(max-width:600px){
  .vehicle-switch{
    padding:8px;
  }
  .vehicle-switch-inner{
    gap:6px;
  }
  .vehicle-tab{
    min-height:50px;
    padding:7px 9px;
    gap:7px;
  }
  .vehicle-icon{
    font-size:19px;
  }
  .vehicle-copy b{
    font-size:14px;
  }
  .vehicle-copy small{
    display:none;
  }
  .topbar{
    padding:9px 3% !important;
  }
  .main-nav a{
    flex-basis:138px;
  }
}


/* v16: keep car/bike switch identical without touching header/hero structure */
.vehicle-switch .vehicle-switch-inner{
  width:min(720px,96%) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}
.vehicle-switch .vehicle-tab{
  width:100% !important;
  min-width:0 !important;
  min-height:54px !important;
  box-sizing:border-box !important;
}
@media(max-width:600px){
  .vehicle-switch .vehicle-switch-inner{
    width:100% !important;
    gap:6px !important;
  }
}


/* v17: navigation positions are fixed on every page */
.main-nav{
  grid-template-columns:repeat(5,1fr) !important;
}
.main-nav a{
  min-width:0 !important;
  width:100% !important;
}
@media(min-width:901px){
  .topbar{
    grid-template-columns:220px minmax(650px,1fr) 140px !important;
  }
  .main-nav{
    width:100% !important;
  }
}


/* v18: bike recommendation page gets photo hero too */
.bike-rec-hero{
  min-height:300px;
  display:flex;
  align-items:center;
  color:#fff;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,18,37,.86) 0%,rgba(5,24,46,.76) 26%,rgba(5,27,50,.42) 56%,rgba(5,25,45,.18) 78%),
    url("assets/bike-hero-v12.png") center center/cover no-repeat !important;
}
.bike-rec-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.12)),
    linear-gradient(90deg,rgba(0,0,0,.12),transparent 48%,rgba(0,0,0,.08));
}
.bike-rec-hero .bike-rec-inner{
  position:relative;
  z-index:2;
}
.bike-rec-hero h1{
  text-shadow:0 10px 30px rgba(0,0,0,.32);
  max-width:620px;
}
.bike-rec-hero p{
  color:#e6eef8;
  text-shadow:0 4px 18px rgba(0,0,0,.26);
  max-width:720px;
}
.bike-rec-hero .recommend-hero-points{
  margin-top:14px;
}
.bike-rec-hero .recommend-hero-points span{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
}
@media(max-width:900px){
  .bike-rec-hero{
    background:
      linear-gradient(180deg,rgba(4,18,37,.74),rgba(5,24,46,.58),rgba(5,25,45,.34)),
      url("assets/bike-hero-v12.png") 68% center/cover no-repeat !important;
  }
}
@media(max-width:700px){
  .bike-rec-hero{
    min-height:280px;
    background:
      linear-gradient(180deg,rgba(4,18,37,.78),rgba(5,24,46,.60),rgba(5,25,45,.38)),
      url("assets/bike-hero-v12.png") 72% center/cover no-repeat !important;
  }
  .bike-rec-hero p br{
    display:none;
  }
}


/* v19: bike goods page gets photo hero too */
.bike-goods-hero{
  min-height:300px;
  display:flex;
  align-items:center;
  color:#fff;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,18,37,.86) 0%,rgba(5,24,46,.76) 26%,rgba(5,27,50,.42) 56%,rgba(5,25,45,.18) 78%),
    url("assets/bike-hero-v12.png") center center/cover no-repeat !important;
}
.bike-goods-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.12)),
    linear-gradient(90deg,rgba(0,0,0,.12),transparent 48%,rgba(0,0,0,.08));
}
.bike-goods-hero .bike-rec-inner{
  position:relative;
  z-index:2;
}
.bike-goods-hero h1{
  font-size:38px;
  line-height:1.2;
  margin:8px 0 12px;
  text-shadow:0 10px 30px rgba(0,0,0,.32);
  max-width:620px;
}
.bike-goods-hero p{
  color:#e6eef8;
  font-size:13px;
  text-shadow:0 4px 18px rgba(0,0,0,.26);
  max-width:720px;
}
.bike-goods-hero .recommend-hero-points{
  margin-top:14px;
}
.bike-goods-hero .recommend-hero-points span{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
}
@media(max-width:900px){
  .bike-goods-hero{
    background:
      linear-gradient(180deg,rgba(4,18,37,.74),rgba(5,24,46,.58),rgba(5,25,45,.34)),
      url("assets/bike-hero-v12.png") 68% center/cover no-repeat !important;
  }
}
@media(max-width:700px){
  .bike-goods-hero{
    min-height:280px;
    background:
      linear-gradient(180deg,rgba(4,18,37,.78),rgba(5,24,46,.60),rgba(5,25,45,.38)),
      url("assets/bike-hero-v12.png") 72% center/cover no-repeat !important;
  }
  .bike-goods-hero h1{
    font-size:30px;
  }
  .bike-goods-hero p br{
    display:none;
  }
}


/* v20: 2-3 vehicle comparison */
.main-nav{grid-template-columns:repeat(6,minmax(100px,1fr)) !important}
.compare-hero{
  min-height:330px;display:flex;align-items:center;color:#fff;position:relative;
}
.car-compare-hero{
  background:linear-gradient(90deg,rgba(4,22,43,.88),rgba(4,27,52,.64),rgba(4,22,42,.18)),url("assets/hero-cars.jpg") center 56%/cover no-repeat;
}
.bike-compare-hero{
  background:linear-gradient(90deg,rgba(4,18,37,.88),rgba(5,24,46,.64),rgba(5,25,45,.18)),url("assets/bike-hero-v12.png") center center/cover no-repeat;
}
.compare-hero-inner{width:min(1180px,92%);margin:auto;padding:44px 0}
.compare-hero h1{font-size:40px;line-height:1.18;margin:10px 0 12px;text-shadow:0 8px 25px rgba(0,0,0,.3)}
.compare-hero p{font-size:13px;line-height:1.8;color:#e6f0fa;max-width:700px}
.compare-controls{padding:30px 0 12px}
.compare-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.compare-slot{background:#fff;border:1px solid #d9e5ef;border-radius:15px;padding:17px;box-shadow:0 7px 20px rgba(10,50,90,.06)}
.slot-title{display:flex;align-items:center;gap:8px;margin-bottom:12px}.slot-title>b{font-size:14px}.compare-number{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#eaf4ff;color:#0875ee;font-weight:950}
.slot-title button{margin-left:auto;border:0;background:#f4f6f8;color:#66798b;border-radius:8px;padding:6px 8px;font-size:9px;cursor:pointer}
.compare-slot label{display:block;margin-top:9px}
.add-third-btn{margin-top:12px;border:1px dashed #8bbdec;background:#eff7ff;color:#0875ee;border-radius:10px;padding:11px 16px;font-weight:900;cursor:pointer}
.hidden{display:none !important}
.common-condition-card{margin-top:17px;background:#fff;border:1px solid #d9e5ef;border-radius:15px;padding:18px}
.compare-periods{max-width:600px;margin:0 auto 17px}
.compare-common-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.compare-run-btn{display:block;width:min(420px,100%);height:49px;border:0;border-radius:10px;background:linear-gradient(135deg,#0670ed,#1396ff);color:#fff;font-weight:950;margin:18px auto 0;cursor:pointer}
.compare-results-section{padding:16px 0 40px}
.compare-winner{display:flex;align-items:center;gap:15px;background:linear-gradient(135deg,#fff8df,#fff);border:1px solid #e6cb72;border-radius:15px;padding:17px 20px}
.winner-icon{font-size:35px}.compare-winner small{color:#856b1d;font-weight:900}.compare-winner h2{font-size:20px;margin:2px 0}.compare-winner p{margin:0;font-size:11px;color:#766b4f}
.compare-result-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:15px 0}
.compare-result-card{background:#fff;border:1px solid #dce7f0;border-radius:14px;padding:17px;position:relative}
.compare-result-card.best{border:2px solid #e1be43;background:#fffaf0}
.result-rank{position:absolute;right:10px;top:10px;width:27px;height:27px;border-radius:50%;background:#8094a8;color:#fff;display:grid;place-items:center;font-weight:950;font-size:10px}
.compare-result-card.best .result-rank{background:#d2a526}.compare-result-card small{color:#778a9c}.compare-result-card h3{font-size:17px;margin:3px 0}.compare-result-card p{font-size:10px;color:#73879a;margin:0}
.compare-big{font-size:26px;color:#0875ee;font-weight:950;margin:13px 0 0}.compare-result-card>span{font-size:9px;color:#6f8194}
.mini-stat{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding-top:11px;border-top:1px solid #e6edf3}.mini-stat b{font-size:12px}.mini-stat small{font-size:9px}
.compare-table-large{margin-top:12px}.compare-table-large .compare-table th,.compare-table-large .compare-table td{text-align:center}.compare-table-large .compare-table th:first-child,.compare-table-large .compare-table td:first-child{text-align:left;min-width:175px}
.compare-note{font-size:9px;color:#8292a1;line-height:1.6;margin-top:10px}
@media(max-width:1180px){
 .main-nav{grid-template-columns:repeat(6,minmax(92px,1fr)) !important}
}
@media(max-width:900px){
 .compare-slot-grid{grid-template-columns:1fr}
 .compare-common-grid{grid-template-columns:repeat(2,1fr)}
 .compare-result-cards{grid-template-columns:1fr}
}
@media(max-width:600px){
 .compare-hero h1{font-size:31px}
 .compare-common-grid{grid-template-columns:1fr}
}


/* v21: fuel type + live price panel */
.fuel-price-panel{
  margin:16px 0 20px;
  padding:16px;
  border:1px solid #cfe0ef;
  border-radius:14px;
  background:linear-gradient(135deg,#f4faff,#fff);
}
.fuel-price-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:12px;
}
.fuel-price-head>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fuel-price-head b{font-size:13px;color:#213d58}
.fuel-price-head small{font-size:9px;color:#6f8397}
.fuel-live-badge{
  background:#eef2f5;color:#65788b;border-radius:999px;padding:5px 8px;font-size:8px;font-weight:950;
}
.fuel-live-badge.live{background:#e6f8f2;color:#0a846c}
.fuel-price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.fuel-price-panel>p{margin:10px 0 0;color:#778b9e;font-size:8px;line-height:1.6}
.fuel-source-note{
  grid-column:span 1;
  display:flex;align-items:center;
  min-height:45px;
  color:#657a8e;
  font-size:9px;
  line-height:1.5;
  padding:7px 9px;
  background:#f3f7fa;
  border-radius:8px;
}
@media(max-width:700px){
  .fuel-price-grid{grid-template-columns:repeat(2,1fr)}
  .fuel-price-head{flex-direction:column}
}


/* v22: explicit 2-car / 3-car comparison selector */
.compare-count-switch{
  width:min(760px,100%);
  margin:18px auto 22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.compare-count-switch button{
  min-height:86px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:11px;
  align-items:center;
  text-align:left;
  padding:14px 17px;
  border:2px solid #d4e2ed;
  background:#fff;
  border-radius:14px;
  color:#29455f;
  cursor:pointer;
  box-shadow:0 5px 15px rgba(18,62,103,.05);
  transition:.16s ease;
}
.compare-count-switch button>span{
  grid-row:1/3;
  font-size:26px;
}
.compare-count-switch button>b{
  font-size:16px;
  font-weight:950;
}
.compare-count-switch button>small{
  color:#75899c;
  font-size:9px;
}
.compare-count-switch button:hover{
  border-color:#7ab7ed;
  transform:translateY(-1px);
}
.compare-count-switch button.active{
  border-color:#0875ee;
  background:linear-gradient(135deg,#eaf5ff,#f9fcff);
  color:#0875ee;
  box-shadow:0 8px 20px rgba(8,117,238,.12);
}
.compare-count-switch button.active>small{
  color:#4e7598;
}
.compare-subheading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin:4px 0 10px;
}
.compare-subheading b{
  font-size:14px;
  color:#263f58;
}
.compare-subheading span{
  font-size:9px;
  color:#74889b;
}
.compare-slot-grid.count-2{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  width:min(880px,100%);
  margin-left:auto;
  margin-right:auto;
}
.compare-slot-grid.count-3{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  width:100%;
}
.compare-result-cards.count-2{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  width:min(880px,100%);
  margin-left:auto;
  margin-right:auto;
}
.compare-result-cards.count-3{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  width:100%;
}
@media(max-width:700px){
  .compare-count-switch{
    grid-template-columns:1fr;
  }
  .compare-subheading{
    align-items:flex-start;
    flex-direction:column;
  }
  .compare-slot-grid.count-2,
  .compare-slot-grid.count-3,
  .compare-result-cards.count-2,
  .compare-result-cards.count-3{
    grid-template-columns:1fr !important;
    width:100%;
  }
}


/* ==========================================================
   v23 Favorites / compare candidates
   ========================================================== */
.favorites-bar{
  position:relative;
  z-index:30;
  background:#f8fbfe;
  border-bottom:1px solid #dce7f0;
}
.favorites-bar-inner{
  width:min(1240px,94%);
  margin:0 auto;
  min-height:58px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:15px;
  padding:8px 0;
}
.favorites-bar-title{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.favorites-bar-title>span{
  width:31px;height:31px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff0f3;color:#e74a68;
  font-size:17px;
}
.favorites-bar-title div{
  display:flex;flex-direction:column;
}
.favorites-bar-title b{
  font-size:11px;color:#29435c;
}
.favorites-bar-title small{
  font-size:8px;color:#7b8d9e;margin-top:1px;
}
.favorites-bar-title em{
  font-style:normal;
  font-size:9px;font-weight:950;
  padding:4px 7px;border-radius:999px;
  background:#e9f4ff;color:#0875ee;
}
.favorites-chips{
  display:flex;
  gap:7px;
  align-items:center;
  min-width:0;
  overflow-x:auto;
  padding:2px;
}
.favorite-empty{
  color:#8798a8;
  font-size:9px;
}
.favorite-chip{
  flex:0 0 auto;
  min-width:120px;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:7px 28px 7px 10px;
  border:1px solid #d5e3ee;
  background:#fff;
  border-radius:9px;
}
.favorite-chip b{
  font-size:10px;color:#253f58;
}
.favorite-chip small{
  font-size:8px;color:#7c8fa1;margin-top:1px;
}
.favorite-chip button{
  position:absolute;
  right:7px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;
  border:0;background:#eef3f7;color:#6e8295;
  cursor:pointer;font-size:11px;line-height:1;
}
.favorites-bar-actions{
  display:flex;gap:7px;align-items:center;
}
.favorites-bar-actions>button{
  border:0;background:transparent;color:#72879a;
  font-size:9px;cursor:pointer;padding:8px;
}
.favorites-bar-actions>button:disabled{opacity:.35;cursor:default}
.favorites-compare{
  display:flex;align-items:center;justify-content:center;
  min-width:145px;min-height:36px;
  padding:7px 12px;
  border-radius:9px;
  background:#0875ee;color:#fff;
  font-size:10px;font-weight:950;
  text-decoration:none;
}
.favorites-compare.disabled{
  background:#e8eef4;color:#8293a3;
  pointer-events:none;
}
.favorite-main-btn{
  margin-top:8px;
  border:1px solid #d7a8b3;
  color:#cf3f5c;
  background:#fff8fa;
  border-radius:9px;
  padding:8px 11px;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}
.favorite-main-btn.saved,
.rec-favorite-btn.saved,
.mini-favorite-btn.saved{
  border-color:#dc5570 !important;
  background:#fff0f3 !important;
  color:#c92d4c !important;
}
.model-card{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.model-card-copy{
  display:flex;flex-direction:column;min-width:0;
}
.mini-favorite-btn{
  flex:0 0 auto;
  border:1px solid #d9e3eb;
  background:#f8fafc;
  color:#6f8395;
  border-radius:8px;
  padding:6px 8px;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}
.rec-card-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  margin-top:10px;
}
.rec-card-actions button{
  width:100%;
}
.rec-favorite-btn{
  border:1px solid #d7a8b3 !important;
  background:#fff8fa !important;
  color:#cf3f5c !important;
}

/* ==========================================================
   v23 Best replacement / sell timing diagnosis
   ========================================================== */
.timing-diagnosis-section{
  padding:34px 0 42px;
}
.timing-status{
  border-radius:999px;
  padding:7px 11px;
  background:#eaf5ff;
  color:#0875ee;
  font-size:9px;
  font-weight:950;
}
.timing-card{
  margin-top:16px;
  border:1px solid #d8e6f0;
  border-radius:18px;
  background:
    radial-gradient(circle at 88% 8%,rgba(8,117,238,.09),transparent 28%),
    linear-gradient(135deg,#fff,#f7fbff);
  box-shadow:0 10px 28px rgba(13,55,93,.07);
  padding:21px;
}
.timing-main{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:20px;
  align-items:center;
}
.timing-year-badge{
  min-height:130px;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#0875ee,#1397ff);
  color:#fff;
  box-shadow:0 10px 24px rgba(8,117,238,.20);
}
.timing-year-badge span{
  font-size:9px;font-weight:900;opacity:.9;
}
.timing-year-badge strong{
  font-size:48px;line-height:1;font-weight:950;margin:5px 0 1px;
}
.timing-year-badge small{
  font-size:11px;font-weight:900;
}
.timing-copy small{
  color:#71869a;font-size:9px;font-weight:800;
}
.timing-copy h3{
  font-size:22px;
  line-height:1.35;
  color:#213d57;
  margin:6px 0 8px;
}
.timing-copy p{
  font-size:11px;
  line-height:1.8;
  color:#647b90;
  margin:0;
}
.timing-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:17px;
}
.timing-stats>div{
  border:1px solid #dfe9f1;
  border-radius:11px;
  background:#fff;
  padding:12px 13px;
  display:flex;
  flex-direction:column;
}
.timing-stats span{
  font-size:8px;color:#7b8fa0;
}
.timing-stats b{
  font-size:13px;color:#243f58;margin-top:4px;
}
.timing-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
}
.timing-actions .favorite-main-btn{
  margin-top:0;
}
.timing-secondary{
  border:1px solid #b9d4ec;
  background:#eef7ff;
  color:#0875ee;
  border-radius:9px;
  padding:9px 12px;
  font-size:9px;
  font-weight:950;
  cursor:pointer;
}
.timing-valuation{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 14px;
  border-radius:9px;
  background:#0875ee;
  color:#fff;
  text-decoration:none;
  font-size:10px;
  font-weight:950;
}
.timing-note{
  margin:12px 0 0;
  color:#8192a1;
  font-size:8px;
  line-height:1.6;
}

@media(max-width:900px){
  .favorites-bar-inner{
    grid-template-columns:1fr auto;
  }
  .favorites-chips{
    grid-column:1/-1;
    order:3;
  }
  .timing-main{
    grid-template-columns:120px 1fr;
  }
  .timing-year-badge{min-height:115px}
}
@media(max-width:650px){
  .favorites-bar-inner{
    display:flex;
    flex-wrap:wrap;
  }
  .favorites-chips{
    width:100%;
    order:3;
  }
  .favorites-bar-actions{
    margin-left:auto;
  }
  .favorites-bar-title small{display:none}
  .favorites-compare{min-width:125px}
  .timing-main{
    grid-template-columns:1fr;
  }
  .timing-year-badge{
    min-height:105px;
    flex-direction:row;
    gap:8px;
  }
  .timing-year-badge strong{
    font-size:39px;
  }
  .timing-stats{
    grid-template-columns:1fr;
  }
  .timing-valuation{
    margin-left:0;
    width:100%;
  }
}


/* ==========================================================
   v24 Community feedback / feature request board
   ========================================================== */
.main-nav{
  grid-template-columns:repeat(7,minmax(92px,1fr)) !important;
}
.feedback-hero{
  min-height:350px;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 78% 26%,rgba(26,143,255,.32),transparent 24%),
    linear-gradient(115deg,#061a31 0%,#0b355d 52%,#0a5ca2 100%);
  position:relative;
  overflow:hidden;
}
.feedback-hero:after{
  content:"💬  👍  💡";
  position:absolute;
  right:6%;
  bottom:-24px;
  font-size:78px;
  letter-spacing:18px;
  opacity:.11;
  transform:rotate(-6deg);
  white-space:nowrap;
}
.feedback-hero-inner{
  width:min(1180px,92%);
  margin:auto;
  padding:48px 0;
  position:relative;
  z-index:2;
}
.feedback-hero h1{
  font-size:42px;
  line-height:1.18;
  margin:10px 0 13px;
  text-shadow:0 8px 30px rgba(0,0,0,.26);
}
.feedback-hero p{
  width:min(760px,100%);
  color:#dcebf8;
  font-size:13px;
  line-height:1.85;
}
.feedback-hero-points{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}
.feedback-hero-points span{
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  border-radius:999px;
  font-size:9px;
  font-weight:900;
}
.feedback-main{
  width:min(1180px,92%);
  margin:0 auto;
}
.feedback-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:-30px;
  position:relative;
  z-index:5;
}
.feedback-summary-card{
  min-height:92px;
  background:#fff;
  border:1px solid #dbe7f0;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(13,53,91,.10);
  padding:15px 17px;
  display:flex;
  align-items:baseline;
  gap:5px;
  flex-wrap:wrap;
}
.feedback-summary-card small{
  width:100%;
  font-size:9px;
  color:#75899b;
  font-weight:800;
}
.feedback-summary-card b{
  font-size:26px;
  color:#0875ee;
  line-height:1;
}
.feedback-summary-card span{
  font-size:10px;
  color:#718699;
}
.feedback-compose-section{
  margin-top:26px;
  display:grid;
  grid-template-columns:300px 1fr;
  gap:20px;
  align-items:start;
  padding:25px;
  border:1px solid #dbe7f0;
  border-radius:18px;
  background:linear-gradient(135deg,#f8fbfe,#fff);
}
.feedback-compose-copy h2{
  margin:6px 0 8px;
  font-size:24px;
  color:#223f5a;
}
.feedback-compose-copy p{
  color:#70869a;
  font-size:10px;
  line-height:1.7;
}
.feedback-form{
  background:#fff;
  border:1px solid #dce7f0;
  border-radius:14px;
  padding:18px;
}
.feedback-form-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.feedback-form label{
  display:block;
  position:relative;
  font-size:9px;
  color:#5e7489;
  font-weight:800;
}
.feedback-form input,
.feedback-form select,
.feedback-form textarea{
  width:100%;
  box-sizing:border-box;
  margin-top:5px;
  border:1px solid #cfdee9;
  border-radius:9px;
  background:#fff;
  color:#223c55;
  padding:10px 11px;
  font:inherit;
  font-size:11px;
  outline:none;
}
.feedback-form input:focus,
.feedback-form select:focus,
.feedback-form textarea:focus{
  border-color:#55a3e9;
  box-shadow:0 0 0 3px rgba(8,117,238,.08);
}
.feedback-form textarea{
  min-height:115px;
  resize:vertical;
}
.feedback-title-label{
  margin:12px 0;
}
.feedback-char-count{
  position:absolute;
  right:8px;
  bottom:7px;
  font-size:8px;
  color:#8998a6;
  background:#fff;
  padding-left:5px;
}
.feedback-form-foot{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.feedback-form-foot p{
  margin:0;
  color:#8494a2;
  font-size:8px;
  line-height:1.55;
  max-width:520px;
}
.feedback-form-foot button{
  flex:0 0 auto;
  min-width:180px;
  height:42px;
  border:0;
  border-radius:9px;
  background:linear-gradient(135deg,#0875ee,#1597ff);
  color:#fff;
  font-size:10px;
  font-weight:950;
  cursor:pointer;
}
.feedback-board-section{
  padding:36px 0 18px;
}
.feedback-board-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.feedback-board-head h2{
  margin:5px 0 4px;
  font-size:26px;
  color:#223f59;
}
.feedback-board-head p{
  margin:0;
  font-size:10px;
  color:#74889a;
}
.feedback-controls{
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.feedback-sort{
  display:flex;
  background:#eef3f7;
  border-radius:9px;
  padding:3px;
}
.feedback-sort button{
  border:0;
  background:transparent;
  color:#657a8d;
  border-radius:7px;
  padding:8px 10px;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}
.feedback-sort button.active{
  background:#fff;
  color:#0875ee;
  box-shadow:0 2px 7px rgba(16,49,80,.08);
}
.feedback-controls select{
  height:35px;
  border:1px solid #d4e1eb;
  border-radius:8px;
  background:#fff;
  color:#50677d;
  font-size:9px;
  padding:0 9px;
}
.feedback-pinned,
.feedback-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.feedback-pinned{
  margin-bottom:12px;
}
.feedback-card{
  position:relative;
  background:#fff;
  border:1px solid #dce7ef;
  border-radius:15px;
  padding:17px;
  box-shadow:0 6px 18px rgba(15,50,83,.05);
}
.feedback-card.pinned{
  border:1px solid #d9bf63;
  background:linear-gradient(135deg,#fffdf5,#fff);
}
.feedback-pin{
  margin:-17px -17px 13px;
  padding:7px 12px;
  border-radius:14px 14px 0 0;
  background:#fff4c9;
  color:#8a6a06;
  font-size:8px;
  font-weight:950;
}
.feedback-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.feedback-tags{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.feedback-tags span{
  border-radius:999px;
  padding:5px 7px;
  font-size:8px;
  font-weight:900;
}
.feedback-scope{
  background:#eef7ff;
  color:#3275b6;
}
.feedback-category{
  background:#f2f4f6;
  color:#607587;
}
.feedback-status{
  background:#f5f5f5;
  color:#66798b;
}
.status-considering{background:#fff7d8;color:#987305}
.status-planned{background:#e9f3ff;color:#176bb7}
.status-done{background:#e9f8f1;color:#15805c}
.feedback-card time{
  font-size:8px;
  color:#8a99a6;
  white-space:nowrap;
  padding-top:4px;
}
.feedback-card h3{
  margin:13px 0 8px;
  color:#203d58;
  font-size:16px;
  line-height:1.45;
}
.feedback-card>p{
  margin:0;
  color:#667d91;
  font-size:10px;
  line-height:1.75;
  min-height:52px;
}
.feedback-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #e6edf3;
}
.feedback-author{
  display:flex;
  align-items:center;
  gap:5px;
  color:#7b8e9f;
}
.feedback-author span{font-size:12px}
.feedback-author small{font-size:8px}
.feedback-card-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.feedback-report{
  border:0;
  background:transparent;
  color:#8a99a5;
  font-size:8px;
  cursor:pointer;
  padding:6px 7px;
}
.feedback-report.reported{
  color:#9f6d6d;
}
.feedback-like{
  min-width:105px;
  min-height:38px;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  column-gap:5px;
  justify-content:center;
  align-items:center;
  border:1px solid #c9dbea;
  border-radius:10px;
  background:#f7fbff;
  color:#37637f;
  cursor:pointer;
}
.feedback-like>span{
  grid-row:1/3;
  font-size:16px;
}
.feedback-like>b{
  font-size:12px;
  line-height:1;
}
.feedback-like>small{
  font-size:7px;
  line-height:1;
  color:#7790a2;
}
.feedback-like.liked{
  border-color:#65aae8;
  background:#eaf5ff;
  color:#0875ee;
  box-shadow:0 4px 10px rgba(8,117,238,.08);
}
.feedback-empty-state{
  margin:18px 0;
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px dashed #cbdbe8;
  border-radius:14px;
  color:#7890a4;
  text-align:center;
}
.feedback-empty-state>span{font-size:30px}
.feedback-empty-state b{font-size:12px;margin-top:6px}
.feedback-empty-state p{font-size:9px;margin:4px 0 0}
.feedback-how{
  margin:20px 0 45px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.feedback-how>div{
  padding:15px;
  border-radius:12px;
  border:1px solid #dce7ef;
  background:#f9fbfd;
}
.feedback-how span{
  width:25px;height:25px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#0875ee;
  color:#fff;
  font-size:9px;
  font-weight:950;
  margin-bottom:8px;
}
.feedback-how b{
  font-size:11px;
  color:#2a455e;
}
.feedback-how p{
  margin:5px 0 0;
  color:#788b9b;
  font-size:8px;
  line-height:1.55;
}

@media(max-width:1180px){
  .main-nav{
    grid-template-columns:repeat(7,minmax(86px,1fr)) !important;
  }
}
@media(max-width:900px){
  .feedback-summary{
    grid-template-columns:repeat(2,1fr);
  }
  .feedback-compose-section{
    grid-template-columns:1fr;
  }
  .feedback-pinned,
  .feedback-list{
    grid-template-columns:1fr;
  }
  .feedback-how{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:650px){
  .feedback-hero h1{
    font-size:31px;
  }
  .feedback-summary{
    grid-template-columns:1fr 1fr;
    margin-top:-18px;
  }
  .feedback-form-grid{
    grid-template-columns:1fr;
  }
  .feedback-form-foot{
    flex-direction:column;
    align-items:stretch;
  }
  .feedback-form-foot button{
    width:100%;
  }
  .feedback-board-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .feedback-controls{
    width:100%;
    justify-content:flex-start;
  }
  .feedback-controls select{
    flex:1 1 150px;
  }
  .feedback-how{
    grid-template-columns:1fr;
  }
}


/* v25 production utilities */
.feedback-api-notice{
  width:min(1180px,92%);
  margin:20px auto 0;
  padding:12px 15px;
  border:1px solid #e5bd78;
  background:#fff8e9;
  color:#815f25;
  border-radius:10px;
  font-size:10px;
}
.footer-policy{
  margin-left:auto;
  color:inherit;
  opacity:.72;
  font-size:9px;
  text-decoration:underline;
}
.policy-page{
  width:min(850px,92%);
  margin:0 auto;
  padding:42px 0 70px;
}
.policy-back{font-size:10px;color:#0875ee;text-decoration:none}
.policy-page h1{font-size:32px;color:#213e58;margin:18px 0 8px}
.policy-lead{color:#708598;font-size:11px;line-height:1.8}
.policy-page section{
  margin-top:18px;padding:18px 20px;background:#fff;border:1px solid #dae6ef;border-radius:12px
}
.policy-page h2{font-size:16px;color:#29465f;margin:0 0 8px}
.policy-page section p{font-size:10px;line-height:1.9;color:#637b90;margin:0}
.policy-updated{font-size:9px;color:#8a99a6;margin-top:20px}
.notfound{
  width:min(600px,90%);margin:13vh auto;text-align:center;padding:35px;border:1px solid #dce7ef;border-radius:18px;background:#fff
}
.notfound>div{font-size:55px}.notfound h1{color:#233f58}.notfound p{color:#74899c;font-size:11px}
.notfound a{display:inline-block;margin-top:10px;background:#0875ee;color:#fff;padding:10px 18px;border-radius:9px;text-decoration:none;font-size:10px;font-weight:900}
.admin-page{width:min(1050px,94%);margin:0 auto;padding:35px 0 70px}
.admin-page h1{color:#213e58}.admin-page>p{font-size:10px;color:#73889b}
.admin-login{display:flex;gap:7px;margin:18px 0}
.admin-login input{flex:1;padding:10px;border:1px solid #cedde8;border-radius:8px}
.admin-login button,.admin-actions button{border:0;border-radius:8px;background:#0875ee;color:#fff;padding:9px 14px;font-weight:900;cursor:pointer}
.admin-list{display:grid;gap:9px;margin-top:15px}
.admin-card{background:#fff;border:1px solid #dce7ef;border-radius:12px;padding:14px}
.admin-card.hidden-post{opacity:.55}
.admin-card-head{display:flex;justify-content:space-between;gap:10px}
.admin-card-head b{font-size:13px;color:#2b465f}.admin-card-head span{font-size:9px;color:#74899a}
.admin-card p{font-size:10px;color:#637a8e;line-height:1.6}.admin-card>small{font-size:8px;color:#8294a3}
.admin-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid #e6edf3}
.admin-actions select{padding:8px;border:1px solid #cedde8;border-radius:8px}.admin-actions label{font-size:9px;color:#667c8f}