:root{
  --bg:#0b1020;
  --bg-soft:#121933;
  --panel:#161e3d;
  --text:#eef0f7;
  --muted:#9aa4c2;
  --primary:#7a5cff;
  --primary-2:#5b8cff;
  --accent:#ff6f91;
  --warn:#ffb14a;
  --good:#3ddc97;
  --line:#2a335c;
  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.25);
  --max:1100px;
  --gap:18px;
  --gap-lg:32px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#0b1020 0%, #0f1530 100%);
  color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans CJK TC","Noto Sans CJK SC","Noto Sans JP",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary-2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

.container{max-width:var(--max);margin:0 auto;padding:0 18px}

/* Header */
.site-header{
  background:rgba(11,16,32,.85);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.site-header .container{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.brand{font-weight:800;font-size:1.05rem;color:var(--text);letter-spacing:.2px}
.brand:hover{text-decoration:none;color:var(--primary)}
.primary{display:flex;gap:14px;flex:1;flex-wrap:wrap}
.primary a{color:var(--text);font-size:.93rem}
.primary a:hover{color:var(--primary-2);text-decoration:none}
.lang-switch{display:flex;gap:6px}
.lang-switch a{
  font-size:.78rem;padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);
}
.lang-switch a.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.lang-switch a:hover{text-decoration:none;color:var(--text)}

/* Breadcrumbs */
.breadcrumbs{font-size:.85rem;color:var(--muted);margin:18px 0}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs .sep{margin:0 6px;opacity:.6}

/* Hero */
.hero{padding:48px 0 24px}
.hero h1{font-size:clamp(1.7rem,4vw,2.6rem);margin:0 0 12px;line-height:1.25}
.hero .lead{color:var(--muted);font-size:1.05rem;max-width:780px}
.search-wrap{position:relative;max-width:560px;margin-top:24px}
.search-wrap input{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-size:1rem;outline:none;
}
.search-wrap input:focus{border-color:var(--primary)}
#search-results{
  position:absolute;left:0;right:0;top:54px;list-style:none;margin:0;padding:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  max-height:380px;overflow:auto;z-index:60;
}
#search-results li{padding:0}
#search-results a{display:block;padding:10px 12px;border-radius:8px;color:var(--text)}
#search-results a:hover{background:var(--bg-soft);text-decoration:none}
#search-results .kind{display:inline-block;font-size:.7rem;padding:2px 6px;border-radius:6px;background:var(--bg-soft);color:var(--muted);margin-right:6px}

/* Blocks */
.block{margin:48px 0}
.block h2{font-size:1.5rem;margin:0 0 18px}

/* Cards */
.card-grid{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;color:var(--text);display:flex;flex-direction:column;gap:10px;
  transition:transform .12s ease, border-color .12s ease;
  position:relative;
}
.card:hover{transform:translateY(-2px);border-color:var(--primary)}

/* Editor's pick — strong visual emphasis */
.card.editor-pick{
  border:2px solid var(--accent);
  background:linear-gradient(180deg,rgba(255,111,145,.08) 0%,var(--panel) 60%);
  box-shadow:0 8px 28px rgba(255,111,145,.2);
}
.card.editor-pick:hover{border-color:var(--accent);transform:translateY(-3px)}
.ep-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,var(--accent) 0%,#ffae3d 100%);
  color:#1a0d12;font-weight:800;font-size:.72rem;letter-spacing:.5px;
  padding:5px 11px;border-radius:999px;
  position:absolute;top:-12px;left:14px;
  box-shadow:0 4px 14px rgba(255,111,145,.45);
  text-transform:uppercase;
}
.ep-badge.lg{font-size:.85rem;padding:7px 14px;top:-16px}
.ep-blurb{
  font-size:.85rem;color:var(--accent);font-weight:600;
  margin:0;padding:8px 10px;
  background:rgba(255,111,145,.08);border-radius:8px;
  border-left:3px solid var(--accent);
}
.review-header.editor-pick{position:relative;padding-top:36px}
a.card{color:var(--text)}
a.card:hover{text-decoration:none}
.card h3{margin:0;font-size:1.1rem}
.card .subtitle{color:var(--muted);font-size:.85rem;margin:0}
.card p{margin:0;color:var(--muted);font-size:.92rem}
.card header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rating{color:var(--warn);font-weight:700;font-size:.95rem}
.tagline{color:var(--text);font-size:.95rem;font-weight:500}
.kv{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-size:.78rem}
.kv li{display:flex;flex-direction:column;gap:2px}
.kv span{color:var(--muted)}
.kv strong{color:var(--text);font-size:.95rem}
.cta-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.cta-row.centered{justify-content:center;margin-top:24px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:10px;font-size:.92rem;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:filter .12s ease;
}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.lg{padding:14px 22px;font-size:1rem}

/* VPN review */
.review-header{padding:28px 0 8px;border-bottom:1px solid var(--line);margin-bottom:24px}
.review-header h1{margin:0 0 12px;font-size:1.8rem}
.review-header .meta{color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;font-size:.92rem;margin-bottom:18px}
.review-header .meta strong{color:var(--text)}
.verdict{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:24px 0}
.verdict h2{margin:0 0 8px;font-size:1.1rem;color:var(--primary-2)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:680px){.grid-2{grid-template-columns:1fr}}
.pros,.cons{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.pros h3{color:var(--good);margin:0 0 10px}
.cons h3{color:var(--accent);margin:0 0 10px}
.pros ul,.cons ul{margin:0;padding-left:18px;color:var(--text);font-size:.93rem}

.spec-table{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:14px}
.spec-table th,.spec-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.spec-table th{color:var(--muted);width:38%;font-weight:500}

.fanza-compat{margin:24px 0;padding:18px;border-left:3px solid var(--accent);background:var(--bg-soft);border-radius:8px}
.fanza-compat h2{margin:0 0 8px;font-size:1.05rem}

/* Service / Country / Info */
.service-guide,.country-guide,.info-page{padding:8px 0 32px}
.service-guide h1,.country-guide h1,.info-page h1{font-size:1.9rem;margin:0 0 14px;line-height:1.25}
.service-guide .lead,.country-guide .lead{color:var(--muted);font-size:1.05rem}
.svc-section,.country-guide section{margin:30px 0}
.svc-section h2,.country-guide h2,.info-page h2{font-size:1.3rem;margin:0 0 12px;color:var(--primary-2)}
.svc-section ul,.svc-section ol,.country-guide ul,.country-guide ol,.info-page ul,.info-page ol{padding-left:22px}
.svc-section p,.country-guide p,.info-page p{color:var(--text)}
.svc-section.recommended,.country-guide .recommended,.country-guide .related-services{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}

.warn{background:rgba(255,177,74,.08);border-left:3px solid var(--warn);padding:12px 14px;border-radius:8px;color:var(--warn)}

/* Footer */
.site-footer{margin-top:80px;border-top:1px solid var(--line);background:rgba(0,0,0,.2)}
.site-footer .container{padding-top:28px;padding-bottom:28px}
.site-footer p{color:var(--muted);font-size:.85rem;margin:6px 0}
.footer-disclosure{font-size:.8rem!important}
.footer-nav{margin:14px 0}
.footer-nav a{color:var(--muted);margin-right:14px;font-size:.85rem}
.footer-copyright{font-size:.78rem;opacity:.7}