/* ==========================================================
   PicForge 高级视觉主题 v1
   与图标同色系：靛紫 #7c6cff → 青 #4dd4ff，金色点缀
   ========================================================== */
:root{
  --bg:#080a12; --card:#131729; --line:#252a45;
  --tx:#eef1f8; --mut:#8b93ad; --ac:#7c6cff; --ok:#2ee6a8; --warn:#f5b544;
  --pf-ac:#7c6cff; --pf-ac2:#4dd4ff; --pf-gold:#e8b84b;
  --pf-grad:linear-gradient(135deg,#6d5cff 0%,#3bb8f0 100%);
  --pf-grad-soft:linear-gradient(135deg,rgba(124,108,255,.16),rgba(77,212,255,.08));
  --pf-shadow:0 24px 60px -32px rgba(0,0,0,.95);
  --pf-glow:0 14px 34px -14px rgba(124,108,255,.85);
  color-scheme:dark;
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 620px at 10% -10%, rgba(124,108,255,.22), transparent 62%),
    radial-gradient(900px 520px at 92% -4%, rgba(77,212,255,.15), transparent 62%),
    radial-gradient(760px 520px at 50% 108%, rgba(232,184,75,.06), transparent 62%),
    #080a12 !important;
  background-attachment:fixed;
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 78%);
}
.wrap,.w{position:relative;z-index:1}

/* 标题 */
h1{letter-spacing:-.5px;font-weight:800;color:#fff}
h1 img{border-radius:10px;box-shadow:0 6px 18px -6px rgba(124,108,255,.9)}
h2{letter-spacing:-.3px;font-weight:700;color:#fff}
h3{letter-spacing:-.2px}
p,li{letter-spacing:.1px}

/* 卡片：玻璃拟态 + 顶部高光 */
.card,.plan,.buy-box,.pay,.panel,.result,.item,.plan{
  background:linear-gradient(180deg,rgba(30,35,60,.82),rgba(17,20,36,.94)) !important;
  border:1px solid rgba(124,108,255,.16) !important;
  border-radius:16px !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), var(--pf-shadow) !important;
  position:relative;
}
.card{padding:20px}
.card::after{
  content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,108,255,.75),transparent);
  pointer-events:none;
}

/* 按钮 */
button,.btn,.btn-buy{
  border:0 !important;
  background:var(--pf-grad) !important;
  color:#fff !important;
  font-weight:700 !important;
  letter-spacing:.2px;
  border-radius:12px !important;
  box-shadow:var(--pf-glow);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,filter .18s;
}
button:hover:not(:disabled),.btn:hover,.btn-buy:hover{
  transform:translateY(-2px);
  filter:brightness(1.09);
  box-shadow:0 20px 40px -14px rgba(124,108,255,1);
}
button:active:not(:disabled){transform:translateY(0) scale(.99)}
button:disabled{filter:saturate(.3) brightness(.72) !important;box-shadow:none !important;opacity:.75}
button.sec,.btn.sec{
  background:rgba(255,255,255,.05) !important;
  color:var(--tx) !important;
  border:1px solid rgba(124,108,255,.3) !important;
  box-shadow:none;
}
button.sec:hover:not(:disabled){background:rgba(124,108,255,.14) !important;box-shadow:none}
.btn.pop{background:var(--pf-grad) !important}

/* 拖拽区 */
#drop,#drop2,#drop3{
  border:1.5px dashed rgba(124,108,255,.42) !important;
  border-radius:16px !important;
  background:radial-gradient(420px 200px at 50% 0%, rgba(124,108,255,.10), transparent 72%) !important;
  transition:border-color .2s,background .25s,transform .2s,box-shadow .25s;
}
#drop:hover,#drop.over,#drop2:hover,#drop2.over,#drop3:hover,#drop3.over{
  border-color:rgba(124,108,255,.9) !important;
  background:radial-gradient(460px 220px at 50% 0%, rgba(124,108,255,.20), transparent 72%) !important;
  box-shadow:0 0 0 4px rgba(124,108,255,.10),0 22px 50px -26px rgba(124,108,255,.8);
}
#drop b,#drop2 b,#drop3 b{letter-spacing:-.2px}

/* 表单控件 */
select,input[type=number],input[type=text],textarea{
  background:rgba(10,12,22,.85) !important;
  border:1px solid rgba(124,108,255,.22) !important;
  border-radius:10px !important;
  color:var(--tx) !important;
  transition:border-color .18s,box-shadow .18s;
}
select:focus,input:focus,textarea:focus{
  border-color:rgba(124,108,255,.8) !important;
  box-shadow:0 0 0 3px rgba(124,108,255,.16) !important;
  outline:none;
}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:rgba(255,255,255,.10)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--pf-grad);box-shadow:0 4px 14px -3px rgba(124,108,255,1);cursor:pointer;
  border:2px solid rgba(255,255,255,.9);
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:#6d5cff;cursor:pointer;
}

/* 表格 */
table{border-collapse:separate;border-spacing:0}
th{
  color:var(--mut) !important;font-weight:600 !important;letter-spacing:.6px;
  text-transform:uppercase;font-size:11.5px !important;
  border-bottom:1px solid rgba(124,108,255,.18) !important;
}
td{border-bottom:1px solid rgba(124,108,255,.09) !important}
tbody tr{transition:background .16s}
tbody tr:hover{background:rgba(124,108,255,.07)}
.thumb,.item img{border-radius:8px;box-shadow:0 4px 14px -6px rgba(0,0,0,.9)}

/* 进度条 */
.bar{background:rgba(255,255,255,.07) !important;border-radius:999px;overflow:hidden}
.bar i{background:var(--pf-grad) !important;box-shadow:0 0 12px rgba(124,108,255,.9)}

/* 徽章与导航 */
.badge{
  background:rgba(124,108,255,.12) !important;
  border:1px solid rgba(124,108,255,.32) !important;
  color:#c9c2ff !important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
header nav{
  background:var(--pf-grad-soft) !important;
  border:1px solid rgba(124,108,255,.22) !important;
  border-radius:14px !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
header nav a{font-weight:600;transition:color .16s}
header nav a:hover{color:#fff !important}
a{transition:color .16s}
a:hover{color:#a99bff}

/* 额度条 */
.pf-quota{
  background:var(--pf-grad-soft) !important;
  border:1px solid rgba(124,108,255,.28) !important;
  border-radius:12px !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.pf-quota a{color:#6ee7c4 !important}
.pf-quota-pro{background:rgba(46,230,168,.10) !important;border-color:rgba(46,230,168,.4) !important;color:#6ee7c4 !important}

/* 价格强调 */
.big-price{background:var(--pf-grad);-webkit-background-clip:text;background-clip:text;color:transparent !important;filter:drop-shadow(0 6px 20px rgba(124,108,255,.5))}
.price{color:#fff !important}
.plan.pop{border-color:rgba(124,108,255,.6) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 70px -34px rgba(124,108,255,.95) !important}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(124,108,255,.35);border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(124,108,255,.65);background-clip:content-box}

/* 焦点可见 */
:focus-visible{outline:2px solid var(--pf-ac);outline-offset:2px;border-radius:8px}

/* 入场动画 */
@keyframes pfRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.card,.plan,.buy-box,.pay{animation:pfRise .5s cubic-bezier(.2,.8,.2,1) both}
.card:nth-of-type(2){animation-delay:.05s}
.card:nth-of-type(3){animation-delay:.1s}

/* 链接按钮（iframe 内页面卡片） */
iframe{border:1px solid rgba(124,108,255,.16) !important;border-radius:16px !important;box-shadow:var(--pf-shadow)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}
/* 价格排版修正 */
.plan{display:flex;flex-direction:column}
.price{
  font-size:40px !important;font-weight:800 !important;letter-spacing:-1px;
  margin:16px 0 6px !important;line-height:1.05 !important;color:#fff !important;
}
.price small{
  display:block !important;font-size:13px !important;font-weight:400 !important;
  color:var(--mut) !important;margin-top:8px;letter-spacing:.2px;
}
.feat{margin-top:18px !important}
.feat li{padding:9px 0 !important;border-bottom:1px solid rgba(124,108,255,.10) !important;font-size:14px !important;line-height:1.6}
.feat li:before{color:var(--ok) !important;font-weight:800;margin-right:2px}
.plan .btn{margin-top:auto !important;padding-top:14px;padding-bottom:14px}
.name{font-size:19px !important;letter-spacing:-.2px}
.compare table{background:transparent !important;border-radius:14px;overflow:hidden}
.compare thead th{background:rgba(124,108,255,.10) !important}
td.yes,.yes{color:var(--ok) !important}
td.no,.no{color:#ff6b8a !important;opacity:.65}
.faq .q b{color:#a99bff !important}
.q{margin-bottom:18px;padding:14px 16px;background:rgba(255,255,255,.025);border:1px solid rgba(124,108,255,.10);border-radius:12px}