/* MaxHostZone — v9 · comparison tool */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#0f172a; --body:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-light:#f1f5f9;
  --accent:#0d9488; --accent-hover:#0f766e; --accent-bg:#f0fdfa; --accent-faint:#ccfbf1;
  --bg:#ffffff; --soft:#f8fafc; --panel:#f1f5f9;
  --green:#059669; --amber:#d97706; --red:#dc2626;
  --sans:'Inter',-apple-system,sans-serif;
  --mono:'JetBrains Mono','Consolas',monospace;
  --radius:8px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{background:var(--soft);color:var(--body);font:13px/1.5 var(--sans);}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
select{font-family:inherit;}

/* ═══ TOP BAR ═══ */
.top-bar{
  background:var(--bg);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
}
.top-inner{
  display:flex;align-items:center;gap:24px;
  max-width:1440px;margin:0 auto;padding:0 20px;height:48px;
}
.logo{
  display:flex;align-items:center;gap:7px;
  color:var(--ink);font-weight:700;font-size:14px;white-space:nowrap;
}
.logo:hover{text-decoration:none;}
.logo-mark{
  background:var(--accent);color:#fff;padding:2px 6px;border-radius:4px;
  font-family:var(--mono);font-size:10px;font-weight:600;
}
.top-nav{display:flex;gap:4px;margin-left:auto;}
.top-nav a{
  padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;
  color:var(--muted);transition:all .15s;
}
.top-nav a:hover{color:var(--ink);background:var(--panel);text-decoration:none;}
.top-nav a[aria-current="page"]{color:var(--accent);background:var(--accent-bg);}

/* ═══ APP HERO ═══ */
.app-hero{
  max-width:1440px;margin:0 auto;padding:20px 20px 12px;
}
.app-hero h1{
  font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.3;
}
.app-hero p{
  font-size:12px;color:var(--muted);margin-top:4px;
}

/* ═══ APP LAYOUT ═══ */
.app{
  display:flex;max-width:1440px;margin:0 auto;
  min-height:calc(100vh - 48px);
}

/* ═══ SIDEBAR ═══ */
.sidebar{
  width:248px;flex:none;background:var(--bg);
  border-right:1px solid var(--line);
  overflow-y:auto;position:sticky;top:48px;height:calc(100vh - 48px);
}
.sidebar-toggle{display:none;}
.sidebar-inner{padding:16px;}

.filter-section{margin-bottom:16px;}
.filter-section h3{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--faint);margin-bottom:6px;
  display:flex;align-items:center;gap:4px;
}
.filter-section h3 .unit{
  font-weight:400;text-transform:none;letter-spacing:0;
}

.collapsible{cursor:pointer;user-select:none;}
.collapsible .chevron{
  margin-left:auto;transition:transform .2s;
}
.collapsible.open .chevron{transform:rotate(180deg);}

.provider-count{
  font-size:10px;font-weight:500;color:var(--accent);
  background:var(--accent-bg);padding:1px 5px;border-radius:8px;
}

/* filter controls */
.filter-select{
  width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;
  font-size:12px;background:var(--bg);color:var(--ink);outline:none;
}
.filter-select:focus{border-color:var(--accent);}

.range-row{display:flex;gap:6px;align-items:center;}
.range-row input[type="number"]{
  width:72px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;
  font-size:12px;font-family:var(--mono);background:var(--bg);
  outline:none;
}
.range-row input:focus{border-color:var(--accent);}
.range-row .sep{color:var(--faint);font-size:11px;}

/* presets */
.preset-row{display:flex;flex-wrap:wrap;gap:4px;}
.preset-btn{
  padding:4px 8px;border:1px solid var(--line);border-radius:5px;
  background:var(--bg);font-size:11px;font-weight:500;color:var(--body);
  transition:all .15s;
}
.preset-btn:hover{border-color:var(--accent);color:var(--accent);}
.preset-btn.active{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

/* provider list */
.provider-list{max-height:200px;overflow-y:auto;margin-bottom:4px;}
.provider-list.collapsed{max-height:0;overflow:hidden;}
.provider-list label{
  display:flex;align-items:center;gap:6px;
  padding:2px 0;font-size:12px;color:var(--body);cursor:pointer;
}
.provider-list label:hover{color:var(--ink);}
.provider-list input[type="checkbox"]{
  accent-color:var(--accent);width:14px;height:14px;flex:none;
}
.provider-actions{
  display:flex;gap:8px;
}
.link-btn{
  font-size:11px;color:var(--accent);font-weight:500;
  padding:2px 0;
}
.link-btn:hover{text-decoration:underline;}

.reset-btn{
  width:100%;padding:7px;margin-top:8px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);font-size:12px;font-weight:500;
  color:var(--muted);transition:all .15s;
}
.reset-btn:hover{border-color:var(--red);color:var(--red);}

/* ═══ MAIN ═══ */
.main{flex:1;padding:12px 16px;min-width:0;}

.results-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:8px;flex-wrap:wrap;
}
.results-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.results-right{flex:none;}
.result-stat{font-size:12px;color:var(--muted);white-space:nowrap;}
.result-stat strong{color:var(--ink);}

.sort-select{
  padding:5px 8px;border:1px solid var(--line);border-radius:6px;
  font-size:12px;background:var(--bg);color:var(--ink);outline:none;
}
.sort-select:focus{border-color:var(--accent);}

/* active filter pills */
.active-filters{display:flex;gap:4px;flex-wrap:wrap;}
.filter-pill{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;
  background:var(--accent-bg);color:var(--accent);
}
.filter-pill .pill-x{
  font-size:13px;line-height:1;cursor:pointer;opacity:.6;
}
.filter-pill .pill-x:hover{opacity:1;}

/* ═══ VPS CARDS ═══ */
.cards{display:flex;flex-direction:column;gap:6px;}

.vps-card{
  display:grid;grid-template-columns:1fr auto;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 14px;gap:10px;align-items:center;
  transition:border-color .15s,box-shadow .15s;
}
.vps-card:hover{border-color:var(--accent);box-shadow:0 1px 6px rgba(13,148,136,.06);}

.card-main{min-width:0;}
.card-header{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;flex-wrap:wrap;}
.card-provider{font-size:13px;font-weight:700;color:var(--ink);}
.card-plan{font-size:12px;color:var(--muted);}
.card-billing{
  font-size:10px;color:var(--faint);background:var(--panel);
  padding:1px 5px;border-radius:3px;font-weight:500;
}

.card-specs{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.spec{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--body);}
.spec-icon{
  width:22px;height:22px;border-radius:5px;background:var(--panel);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;flex:none;
}
.spec-label{font-size:10px;color:var(--faint);display:block;line-height:1.1;}
.spec-value{
  font-family:var(--mono);font-size:12px;font-weight:500;
  color:var(--ink);display:block;line-height:1.2;
}

.card-locations{display:inline-flex;gap:2px;margin-left:8px;}
.loc-flag{font-size:11px;line-height:1;}

.card-side{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:4px;flex:none;min-width:100px;
}
.card-price{
  font-family:var(--mono);font-size:18px;font-weight:700;color:var(--accent);
  line-height:1;
}
.card-price small{font-size:11px;font-weight:400;color:var(--faint);}
.card-actions{display:flex;gap:4px;}
.btn{
  padding:5px 10px;border-radius:5px;font-size:11px;font-weight:600;
  border:none;transition:all .15s;text-decoration:none;
}
.btn-ghost{background:var(--bg);color:var(--muted);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;}

.verified-date{
  font-size:10px;color:var(--faint);font-weight:400;
}
.db-freshness{
  font-size:11px;color:var(--faint);
  padding:2px 6px;border:1px solid var(--line-light);border-radius:4px;
}

.no-results{
  text-align:center;padding:48px 20px;color:var(--muted);font-size:13px;
}
.card-detail{
  grid-column:1/-1;display:flex;gap:16px;flex-wrap:wrap;
  padding:8px 14px 4px;border-top:1px solid var(--line-light);
  font-size:12px;color:var(--body);
}
.vps-card.expanded{border-color:var(--accent);}

/* value badge */
.badge-best{
  font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 5px;border-radius:3px;
}
.badge-cheapest{background:#dcfce7;color:#166534;}
.badge-value{background:#fef9c3;color:#854d0e;}

/* ═══ ARTICLE (for review pages) ═══ */
.article{max-width:700px;margin:0 auto;padding:48px 28px 80px;}
.article h1{font-size:28px;font-weight:700;color:var(--ink);line-height:1.15;margin-bottom:8px;letter-spacing:-.02em;text-wrap:balance;}
.article h1::after{content:"";display:block;width:48px;height:3px;margin:14px 0 6px;background:var(--accent);border-radius:2px;}
.article h2{font-size:18px;font-weight:700;color:var(--ink);margin:2.5em 0 .6em;padding-top:.6em;border-top:1px solid var(--line);}
.article h3{font-size:15px;font-weight:600;color:var(--ink);margin:1.5em 0 .4em;}
.article p{margin:.8em 0;max-width:65ch;line-height:1.7;font-size:15px;}
.article ul,.article ol{padding-left:1.2em;font-size:15px;}
.article li{margin:.4em 0;max-width:65ch;line-height:1.7;}
.byline{color:var(--muted);font-size:13px;margin-bottom:1.5em;}
.lede{font-size:16px;color:var(--ink);line-height:1.8;max-width:60ch;}
.disclosure{
  background:var(--soft);border-left:3px solid var(--muted);border-radius:0 6px 6px 0;
  padding:12px 16px;font-size:13px;color:var(--muted);margin-bottom:1.8em;line-height:1.6;
}
.cta-box{
  background:var(--accent-bg);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  padding:16px 20px;margin:1.5em 0;font-size:14px;line-height:1.7;
}
.cta-box strong{color:var(--accent);}
.cta-box a{font-weight:600;}
.toc{background:var(--soft);border-radius:8px;padding:16px 20px;margin:1.5em 0;font-size:14px;}
.toc strong{display:block;margin-bottom:8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.toc ul{margin:0;padding-left:1.1em;}
.toc li{margin:.3em 0;max-width:none;}
.comparison-table-wrap{overflow-x:auto;margin:1.5em 0;}
.comparison-table{border-collapse:collapse;width:100%;font-size:13px;min-width:480px;font-variant-numeric:tabular-nums;}
.comparison-table th{background:var(--ink);color:#fff;text-align:left;padding:10px 14px;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;}
.comparison-table td{border:1px solid var(--line);padding:10px 14px;vertical-align:top;}
.comparison-table tr:nth-child(even) td{background:var(--soft);}
.chart-fig{border:1px solid var(--line);border-radius:10px;padding:20px;margin:1.5em 0;background:var(--bg);}
.chart-fig svg{width:100%;height:auto;display:block;}
.chart-fig figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5;}
.faq-item{background:var(--soft);border-radius:8px;padding:14px 18px;margin:10px 0;}
.faq-item h3{margin:0 0 .3em;font-size:14px;}
.faq-item p{margin:0;font-size:14px;line-height:1.6;max-width:none;}
.note{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:12px 16px;font-size:13px;color:var(--muted);line-height:1.6;margin:.8em 0;}
blockquote{margin:1.5em 0;padding:14px 20px;border-left:3px solid var(--accent);background:var(--accent-bg);border-radius:0 6px 6px 0;font-size:15px;}
.related{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:1.5em;margin-top:3em;}

/* ═══ FOOTER ═══ */
.site-footer{
  border-top:1px solid var(--line);padding:20px;
  max-width:1440px;margin:0 auto;
}
.footer-inner{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:24px;margin-bottom:8px;
}
.footer-brand{min-width:0;}
.footer-name{font-weight:700;font-size:13px;color:var(--ink);display:block;margin-bottom:4px;}
.footer-brand p{font-size:11px;color:var(--muted);line-height:1.5;margin:0;max-width:360px;}
.footer-links{display:flex;gap:16px;flex-shrink:0;font-size:12px;}
.footer-links a{color:var(--muted);}
.footer-links a:hover{color:var(--accent);}
.copyright{font-size:10px;color:var(--faint);}

/* ═══ RESPONSIVE ═══ */
@media(max-width:840px){
  .app{flex-direction:column;}
  .sidebar{
    width:100%;position:static;height:auto;
    border-right:none;border-bottom:1px solid var(--line);
  }
  .sidebar-toggle{
    display:flex;align-items:center;justify-content:center;
    width:100%;padding:10px;font-size:13px;font-weight:600;
    color:var(--accent);background:var(--bg);border-bottom:1px solid var(--line);
  }
  .sidebar-inner{display:none;padding:12px 16px;}
  .sidebar-inner.open{display:block;}
  .main{padding:10px 12px;}
  .vps-card{grid-template-columns:1fr;gap:8px;}
  .card-side{
    flex-direction:row;align-items:center;justify-content:space-between;
    width:100%;min-width:0;
  }
  .card-specs{gap:8px;}
  .top-nav{gap:2px;}
  .top-nav a{padding:6px 8px;font-size:12px;}
  .footer-inner{flex-direction:column;gap:12px;}
}

@media(max-width:480px){
  .top-inner{padding:0 12px;overflow-x:auto;scrollbar-width:none;}
  .top-inner::-webkit-scrollbar{display:none;}
  .top-nav{flex-shrink:0;}
  .top-nav a{padding:4px 6px;font-size:11px;white-space:nowrap;}
  .logo{flex-shrink:0;}
  .results-bar{flex-direction:column;align-items:flex-start;gap:6px;}
  .app-hero h1{font-size:17px;}
  .app-hero p{font-size:11px;}
}