/* ===== from keyword-tool.html ===== */

.kw-search { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 10px; display:flex; gap:8px; max-width: 640px; }
.kw-search input { flex:1; border:none; outline:none; font-family:var(--font); font-size:16.5px; font-weight:600; color:var(--ink); padding:0 16px; }
.kw-search input::placeholder{ color:var(--muted); font-weight:500; }
.ov-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.ov { padding: 22px; }
.ov .k { font-size:13px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:7px; }
.ov .v { font-size:34px; font-weight:800; color:var(--ink); letter-spacing:-.03em; margin-top:8px; line-height:1; }
.ov .sub { font-size:13px; margin-top:8px; font-weight:600; }
.kd-meter { height:7px; background:var(--line); border-radius:100px; overflow:hidden; margin-top:12px; }
.kd-meter i { display:block; height:100%; border-radius:100px; }
.layout-2 { display:grid; grid-template-columns: 1.55fr 1fr; gap:24px; align-items:start; }
.panel { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow:hidden; }
.panel-head { padding:18px 22px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; }
.panel-head h3 { font-size:16px; }
.kw-row td { padding:14px 22px; border-bottom:1px solid var(--line-soft); font-size:14.5px; }
.kw-row:last-child td { border-bottom:none; }
.kw-row td.kw { font-weight:600; color:var(--ink); }
.vol { font-weight:800; color:var(--ink); }
.pill-kd { font-size:12px; font-weight:700; padding:3px 9px; border-radius:6px; }
.kd-easy { background:var(--green-50); color:var(--green-700); }
.kd-mid { background:var(--amber-50); color:var(--amber-500); }
.kd-hard { background:#fdeceb; color:var(--rose-500); }
.trend-box { padding: 22px; }
.bars { display:flex; align-items:flex-end; gap:8px; height:120px; margin-top:18px; }
.bars .bar { flex:1; background:linear-gradient(180deg,var(--green-400),var(--green-500)); border-radius:6px 6px 0 0; min-height:8px; transition: height .3s; }
.bars .bar.dim { background: var(--green-100); }
.months { display:flex; gap:8px; margin-top:8px; }
.months span { flex:1; text-align:center; font-size:10.5px; color:var(--muted); font-weight:600; }
@media (max-width: 900px){ .ov-grid{ grid-template-columns: repeat(2,1fr);} .layout-2{ grid-template-columns:1fr;} }

/* ===== from domain-deals.html ===== */

.deals-layout { display: grid; grid-template-columns: 1fr; gap: 28px; }
table.price td .prov { font-size: 14px; }
table.price td .prov-mark { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
.tld-tag { font-weight: 800; color: var(--ink); font-size: 16px; }
.save-tag { font-size: 12px; font-weight: 700; color: var(--green-600); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.search-mini { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; min-width: 240px; box-shadow: var(--shadow-sm); }
.search-mini input { border: none; outline: none; font-family: var(--font); font-size: 14px; font-weight: 500; width: 100%; }
.search-mini svg { width: 16px; height: 16px; color: var(--muted); }
@media (max-width: 760px){ table.price { font-size: 13px; } table.price th, table.price td { padding: 12px 12px; } .hide-sm { display: none; } }

/* ===== from hosting-vps.html ===== */

.pcard { padding: 26px 24px; display: flex; flex-direction: column; position: relative; }
.pcard.popular { border-color: var(--green-400); box-shadow: 0 14px 40px rgba(31,164,91,.16); }
.pcard .ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); }
.pcard-prov { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pcard h3 { font-size: 18px; }
.pcard-price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; }
.pcard-price .now { font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.pcard-price .unit { font-size: 14px; color: var(--muted); font-weight: 600; }
.pcard-old { font-size: 13.5px; }
.pcard ul { margin: 18px 0 22px; flex: 1; }
.pcard ul li { font-size: 14px; color: var(--slate-600); display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.pcard ul li:last-child { border-bottom: none; }
.pcard ul svg { width: 16px; height: 16px; color: var(--green-500); flex-shrink: 0; }
.pcard ul b { color: var(--ink); font-weight: 700; }
.toggle-tabs { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 100px; padding: 5px; gap: 4px; }
.toggle-tabs a { font-size: 15px; font-weight: 700; color: var(--slate-600); padding: 10px 26px; border-radius: 100px; transition: all .15s; }
.toggle-tabs a.active { background: #fff; color: var(--green-700); box-shadow: var(--shadow-sm); }
.vps-spec { display: flex; gap: 6px; align-items: center; font-weight: 700; color: var(--ink); }
.vps-spec span { font-size: 13px; color: var(--muted); font-weight: 600; }
@media (max-width: 760px){ table.price { font-size: 13px; } table.price th, table.price td { padding: 12px 12px; } .hide-sm { display:none; } }

/* ===== from compare.html ===== */

.cmp { width:100%; border-collapse:collapse; }
.cmp th, .cmp td { padding:18px 20px; text-align:center; border-bottom:1px solid var(--line-soft); font-size:14.5px; }
.cmp thead th { background:var(--bg-soft); border-bottom:1px solid var(--line); vertical-align:bottom; }
.cmp thead .prov { flex-direction:column; gap:8px; }
.cmp thead .prov-mark { width:44px; height:44px; font-size:17px; }
.cmp tbody td:first-child, .cmp thead th:first-child { text-align:left; font-weight:700; color:var(--ink); position:sticky; left:0; background:#fff; }
.cmp thead th:first-child { background:var(--bg-soft); }
.cmp tbody tr:hover td { background:var(--bg-tint); }
.cmp tbody tr:hover td:first-child { background:var(--bg-tint); }
.cmp .best { color:var(--green-700); font-weight:800; }
.yes { color:var(--green-500); } .no { color:#cfd8d3; }
.cmp .col-pop { background: rgba(31,164,91,.04); }
.detail-card { padding:24px; display:flex; flex-direction:column; }
.detail-card .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.detail-card h3 { font-size:17px; }
.rate { display:flex; align-items:center; gap:8px; margin:4px 0 14px; }
.rate b { font-size:20px; color:var(--ink); font-weight:800; }
.detail-card ul { margin-bottom:18px; flex:1; }
.detail-card li { font-size:13.5px; color:var(--slate-600); display:flex; gap:9px; padding:4px 0; }
.detail-card li svg { width:15px; height:15px; color:var(--green-500); flex-shrink:0; }
.tbl-scroll { overflow-x:auto; }
@media (max-width: 820px){ .cmp { min-width:680px; } }