/*
Theme Name: 翻乐兔AI翻译
Theme URI: https://vckoko.com
Author: Fanle
Description: 翻乐兔AI翻译官网主题（赛博风格）
Version: 1.0.0
Requires at least: 6.0
License: GNU General Public License v2 or later
*/

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(0, 240, 255, .12), transparent 60%),
    radial-gradient(1000px 600px at 90% 110%, rgba(255, 43, 214, .12), transparent 60%),
    #070a17;
  color: #e6e9ef; line-height: 1.7;
}
.grid-bg {
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(0, 240, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
}
.wrap { max-width: 960px; margin: 0 auto; padding: 40px 24px 60px; }
header.site { text-align: center; margin-bottom: 40px; }
.logo { width: 96px; height: 96px; border-radius: 24px; overflow: hidden; margin: 0 auto 18px; box-shadow: 0 0 30px rgba(0,240,255,.45); animation: float 3.6s ease-in-out infinite; }
.logo img { width: 100%; height: 100%; display: block; }
@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} }
h1 {
  font-size: 32px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(90deg, #00f0ff, #7ea6ff 45%, #ff2bd6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub { color: #8b93a7; margin-top: 8px; }
.version-badge { display: inline-block; margin-top: 14px; padding: 6px 16px; border: 1px solid #2f6fed; border-radius: 999px; color: #7ea6ff; font-size: 13px; }
.card { background: rgba(16,23,37,.85); border: 1px solid #2b3654; border-radius: 16px; padding: 22px; margin-bottom: 22px; }
.card h2 { color: #9fb3ff; font-size: 18px; margin-bottom: 14px; }
.downloads { display: flex; gap: 16px; flex-wrap: wrap; }
.dl { flex: 1; min-width: 240px; text-align: center; padding: 22px 16px; border: 1px solid #38466b; border-radius: 14px; background: #0f1420; text-decoration: none; color: #e6e9ef; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.dl:hover { transform: translateY(-4px); }
.dl.mac:hover { border-color: #25d366; box-shadow: 0 0 22px rgba(37,211,102,.3); }
.dl.win:hover { border-color: #00f0ff; box-shadow: 0 0 22px rgba(0,240,255,.3); }
.dl .icon { font-size: 38px; }
.dl .name { font-size: 16px; font-weight: 700; margin: 8px 0 4px; }
.dl .desc { font-size: 12px; color: #8b93a7; }
.dl .size { font-size: 12px; color: #6ee7a8; margin-top: 8px; }
ul.features { list-style: none; }
ul.features li { padding: 5px 0 5px 24px; position: relative; }
ul.features li::before { content: "▸"; position: absolute; left: 0; color: #00f0ff; }
.checksum { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #9fd8ff; word-break: break-all; background: #0a0e1a; padding: 10px; border-radius: 8px; margin-top: 8px; }
.faq p { margin: 8px 0; color: #c6cde0; }
.faq b { color: #e6e9ef; }
.plans { display: flex; gap: 14px; flex-wrap: wrap; }
.plan { flex: 1; min-width: 170px; text-align: center; border: 1px solid #38466b; border-radius: 12px; padding: 18px 12px; background: #0f1420; }
.plan .pname { font-size: 15px; font-weight: 700; }
.plan .price { font-size: 22px; font-weight: 800; color: #00f0ff; margin: 8px 0 4px; }
.plan .desc { font-size: 12px; color: #8b93a7; }
.plan.hot { border-color: #d4a017; }
.plan.hot .price { color: #ffd479; }
.qrs { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.qr-item { flex: 1; min-width: 240px; max-width: 320px; text-align: center; padding: 12px; border: 1px solid #38466b; border-radius: 14px; background: #0f1420; }
.qr-item .qname { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.qr-item img { width: 220px; height: 220px; border-radius: 12px; border: 1px solid #38466b; object-fit: contain; background: #fff; padding: 8px; max-width: 100%; height: auto; }
.qr-item .tip { color: #8b93a7; font-size: 12px; margin-top: 8px; }
.pay-list { list-style: none; }
.pay-list li { padding: 6px 0 6px 24px; position: relative; color: #c6cde0; font-size: 14px; }
.pay-list li::before { content: "✓"; position: absolute; left: 0; color: #00f0ff; font-weight: 700; }
.notice { border-color: rgba(212,160,23,.55); }
.notice h2 { color: #ffd479; }
.steps { counter-reset: step; list-style: none; }
.steps li { position: relative; padding: 8px 0 8px 40px; color: #c6cde0; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: #2f6fed; color: #fff; text-align: center; line-height: 26px; font-size: 13px; font-weight: 700; }
.contact { text-align: center; font-size: 15px; }
.contact b { color: #00f0ff; font-size: 18px; }
.contact-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.contact-line .label { color: #8b93a7; font-size: 14px; }
.contact-line .value { color: #00f0ff; font-size: 16px; font-weight: 700; }
.legal p, .legal li { color: #c6cde0; font-size: 14px; margin: 8px 0; }
.legal ul, .legal ol { padding-left: 22px; }
.legal h3 { color: #7ea6ff; font-size: 15px; margin: 16px 0 8px; }
.updated { color: #8b93a7; font-size: 13px; }
.nav { text-align: center; margin-bottom: 20px; font-size: 13px; }
.nav a { color: #7ea6ff; text-decoration: none; margin: 0 10px; display: inline-block; }
.nav a:hover { color: #00f0ff; }
footer.site { text-align: center; color: #4b5470; font-size: 12px; margin-top: 30px; }
footer.site a { color: #4b6aa0; text-decoration: none; margin: 0 8px; display: inline-block; }
footer.site a:hover { color: #7ea6ff; }
@media (max-width: 720px) {
  .wrap { padding: 24px 14px 48px; }
  h1 { font-size: 24px; letter-spacing: 1px; }
  .logo { width: 80px; height: 80px; }
  .downloads, .plans, .qrs { flex-direction: column; }
  .dl, .plan, .qr-item { min-width: 100%; max-width: 100%; }
  .qr-item img { width: 100%; max-width: 260px; }
  .nav a, footer.site a { margin: 3px 6px; }
}