.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

.plan-inline-badge,
.dashboard-plan-badge,
.plan-current{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--m);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  border:1px solid var(--bd2);background:var(--sf2);color:var(--t2)
}
.plan-inline-badge{font-size:8px;padding:3px 6px;border-radius:999px;margin-left:8px;vertical-align:2px}
.dashboard-plan-badge{width:max-content;font-size:9px;padding:6px 9px;border-radius:999px;margin:-8px 0 14px}
.plan-inline-badge.plus,.dashboard-plan-badge.plus{border-color:rgba(216,137,53,.36);background:var(--sky2);color:var(--sky)}
.plan-inline-badge.pro,.dashboard-plan-badge.pro{border-color:rgba(46,156,119,.34);background:var(--lo2);color:var(--lo)}

.pricing-preview{display:grid;gap:16px}
.pricing-hero{
  background:var(--hero);border:1px solid var(--bd);border-radius:var(--radius);
  padding:clamp(24px,5vw,54px);box-shadow:var(--shadow)
}
.pricing-eyebrow{
  font-family:var(--m);font-size:10px;letter-spacing:.16em;color:var(--sky);
  font-weight:700;margin-bottom:16px
}
.pricing-hero h1{
  max-width:780px;font-size:clamp(34px,5.4vw,68px);line-height:.98;
  letter-spacing:-.045em;text-wrap:balance;margin-bottom:18px
}
.pricing-hero p{max-width:680px;color:var(--t2);font-size:15px;line-height:1.7;text-wrap:pretty}
.pricing-safety{
  display:inline-flex;margin-top:22px;padding:8px 10px;border:1px solid var(--bd2);
  border-radius:8px;font-family:var(--m);font-size:9px;letter-spacing:.08em;color:var(--t3)
}

.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan-card{
  position:relative;min-width:0;background:var(--panel);border:1px solid var(--bd);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);overflow:hidden
}
.plan-card.recommended{border-color:rgba(216,137,53,.42)}
.plan-card.recommended::before{
  content:attr(data-badge);position:absolute;right:18px;top:0;padding:6px 9px;
  background:var(--sky2);border:1px solid rgba(216,137,53,.28);border-top:0;
  border-radius:0 0 8px 8px;color:var(--sky);font-family:var(--m);font-size:8px;font-weight:700;letter-spacing:.08em
}
.plan-card.is-current{box-shadow:inset 0 0 0 1px var(--t1),var(--shadow)}
.plan-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:24px}
.plan-name{font-size:24px;font-weight:800;letter-spacing:-.03em}
.plan-limit{font-family:var(--m);font-size:10px;color:var(--t3);margin-top:5px}
.plan-current{font-size:8px;padding:5px 7px;border-radius:999px}
.plan-early{font-family:var(--m);font-size:9px;color:var(--sky);letter-spacing:.08em;margin-bottom:5px}
.plan-price{font-size:34px;font-weight:800;letter-spacing:-.04em}
.plan-price span{font-family:var(--m);font-size:9px;font-weight:500;color:var(--t3);letter-spacing:0}
.plan-normal{font-family:var(--m);font-size:9px;color:var(--t3);margin-top:5px}
.plan-list{list-style:none;display:grid;gap:11px;margin:24px 0;min-height:92px}
.plan-list li{position:relative;padding-left:17px;color:var(--t2);font-family:var(--s);font-size:12px;line-height:1.6}
.plan-list li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:2px;background:var(--lo)}
.plan-cta{
  min-height:46px;width:100%;border:1px solid var(--bd2);border-radius:9px;
  background:var(--sf2);color:var(--t1);font-family:var(--s);font-size:12px;font-weight:800;
  cursor:pointer;transition:background var(--trans),color var(--trans),border-color var(--trans)
}
.plan-cta:hover,.plan-cta:focus-visible{border-color:var(--t1);outline:2px solid transparent}
.plan-cta.plus{background:#111318;color:#fff;border-color:#111318}
[data-theme="dark"] .plan-cta.plus{background:#e9dfcf;color:#080a0e;border-color:#e9dfcf}
.plan-cta.pro{background:var(--lo2);color:var(--lo);border-color:rgba(46,156,119,.32)}

.locked-feature-section{
  background:var(--panel);border:1px solid var(--bd);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow)
}
.locked-feature-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.locked-feature-head h2{font-size:22px;letter-spacing:-.025em;margin-bottom:6px}
.locked-feature-head p{max-width:650px;color:var(--t2);font-family:var(--s);font-size:13px;line-height:1.65}
.locked-feature-head>span{
  flex-shrink:0;border:1px solid rgba(216,137,53,.3);background:var(--sky2);color:var(--sky);
  border-radius:999px;padding:7px 9px;font-family:var(--m);font-size:8px;letter-spacing:.08em
}
.locked-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.locked-feature-card{
  min-height:112px;width:100%;display:grid;grid-template-columns:38px 1fr auto;gap:12px;
  align-items:start;text-align:left;background:var(--sf2);color:var(--t1);border:1px solid var(--bd);
  border-radius:11px;padding:16px;cursor:pointer;
  transition:background var(--trans),border-color var(--trans),box-shadow var(--trans)
}
.locked-feature-card:hover,.locked-feature-card:focus-visible{
  border-color:var(--bd2);background:var(--sf);box-shadow:0 10px 28px rgba(17,19,24,.06);outline:none
}
.locked-feature-icon{
  width:38px;height:38px;border:1px solid var(--bd2);border-radius:9px;
  display:flex;align-items:center;justify-content:center;color:var(--t2)
}
.locked-feature-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.locked-feature-copy{min-width:0;display:grid;gap:5px}
.locked-feature-copy b{font-size:13px}
.locked-feature-copy span{color:var(--t2);font-family:var(--s);font-size:12px;line-height:1.6;text-wrap:pretty}
.locked-feature-state{
  white-space:nowrap;font-family:var(--m);font-size:8px;color:var(--t3);
  border:1px solid var(--bd);border-radius:999px;padding:5px 7px
}

.plan-usage-banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--sf2);border:1px solid var(--bd);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:12px
}
.plan-usage-title{font-family:var(--m);font-size:10px;color:var(--t2)}
.plan-usage-copy{font-family:var(--s);font-size:11px;color:var(--t3);line-height:1.55;margin-top:5px}
.plan-usage-banner button{
  min-height:40px;flex-shrink:0;border:1px solid var(--bd2);background:transparent;color:var(--t1);
  border-radius:8px;padding:8px 12px;font-family:var(--s);font-size:11px;font-weight:800;cursor:pointer
}

.plan-modal{
  position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(8,10,14,.68);backdrop-filter:blur(8px)
}
.plan-modal-card{
  width:min(520px,100%);max-height:min(680px,90dvh);overflow:auto;
  background:var(--bg);color:var(--t1);border:1px solid var(--bd2);border-radius:16px;
  padding:26px;box-shadow:0 28px 90px rgba(0,0,0,.35)
}
.plan-modal-kicker{font-family:var(--m);font-size:9px;letter-spacing:.12em;color:var(--sky);margin-bottom:14px}
.plan-modal-card h2{font-size:28px;line-height:1.05;letter-spacing:-.035em;margin-bottom:12px}
.plan-modal-card>p{color:var(--t2);font-family:var(--s);font-size:14px;line-height:1.7;text-wrap:pretty}
.plan-modal-note{
  margin:18px 0;padding:12px;border:1px solid var(--bd);border-radius:10px;
  color:var(--t2);font-family:var(--s);font-size:11px;line-height:1.6;background:var(--sf2)
}
.plan-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plan-modal-actions button{
  min-height:46px;border-radius:9px;border:1px solid var(--bd2);
  font-family:var(--s);font-size:12px;font-weight:800;cursor:pointer
}
.plan-modal-primary{background:#111318;color:#fff;border-color:#111318 !important}
[data-theme="dark"] .plan-modal-primary{background:#e9dfcf;color:#080a0e}
.plan-modal-primary.pro{background:var(--lo2);color:var(--lo);border-color:rgba(46,156,119,.34) !important}
.plan-modal-secondary{grid-column:1/-1;background:transparent;color:var(--t2)}

.plan-debug{
  background:var(--sf2);border:1px dashed var(--bd2);border-radius:12px;padding:14px;
  font-family:var(--m);font-size:10px;color:var(--t2)
}
.plan-debug summary{cursor:pointer;font-weight:700;color:var(--t1)}
.plan-debug p{line-height:1.55;margin:9px 0}
.plan-debug-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.plan-debug-grid span{background:var(--bg);border:1px solid var(--bd);border-radius:7px;padding:8px}
.plan-debug-actions{display:flex;gap:7px;margin-top:10px}
.plan-debug-actions button{
  min-height:38px;border:1px solid var(--bd2);background:var(--bg);color:var(--t1);
  border-radius:7px;padding:7px 10px;font-family:var(--m);font-size:9px;cursor:pointer
}

@media(max-width:900px){
  .plan-grid{grid-template-columns:1fr}
  .plan-list{min-height:0}
}
@media(max-width:720px){
  .pricing-hero{padding:24px 20px}
  .locked-feature-grid{grid-template-columns:1fr}
  .locked-feature-head{display:block}
  .locked-feature-head>span{display:inline-flex;margin-top:12px}
  .plan-debug-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .dashboard-plan-badge{margin-top:-4px}
  .plan-inline-badge{font-size:7px;padding:3px 5px;margin-left:5px}
  .plan-card,.locked-feature-section{padding:17px}
  .locked-feature-card{grid-template-columns:36px 1fr}
  .locked-feature-state{grid-column:2;margin-top:2px;width:max-content}
  .plan-usage-banner{display:block}
  .plan-usage-banner button{width:100%;margin-top:10px}
  .plan-modal{align-items:flex-end;padding:0}
  .plan-modal-card{width:100%;border-radius:16px 16px 0 0;padding:22px 18px max(22px,env(safe-area-inset-bottom))}
  .plan-modal-actions{grid-template-columns:1fr}
  .plan-modal-secondary{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  .plan-cta,.locked-feature-card{transition:none}
}

/* Phase 4A.8: keep plan and lock copy readable across mobile languages. */
.plan-inline-badge,
.dashboard-plan-badge,
.pricing-eyebrow,
.plan-kicker,
.plan-limit,
.plan-current,
.plan-early,
.plan-price span,
.plan-normal,
.plan-list li,
.plan-cta,
.locked-feature-copy span,
.locked-feature-state,
.plan-usage-title,
.plan-usage-copy,
.plan-usage-banner button,
.plan-modal-kicker,
.plan-modal-note,
.plan-modal-actions button,
.plan-debug,
.plan-debug-actions button{
  line-height:1.55;
}

.plan-list li,
.locked-feature-copy span,
.plan-usage-copy,
.plan-modal-note{
  font-size:13px;
}

.plan-cta,
.plan-usage-banner button,
.plan-modal-actions button,
.plan-debug-actions button{
  min-height:44px;
  font-size:13px;
}

@media(max-width:480px){
  .plan-inline-badge{
    font-size:11px;
    line-height:1.25;
  }
  .plan-modal-card h2{
    line-height:1.12;
  }
}

html[lang="zh-CN"] .plan-inline-badge,
html[lang="zh-CN"] .dashboard-plan-badge,
html[lang="zh-CN"] .plan-current,
html[lang="zh-CN"] .pricing-eyebrow,
html[lang="zh-CN"] .plan-early,
html[lang="zh-CN"] .plan-modal-kicker,
html[lang="zh"] .plan-inline-badge,
html[lang="zh"] .dashboard-plan-badge,
html[lang="zh"] .plan-current,
html[lang="zh"] .pricing-eyebrow,
html[lang="zh"] .plan-early,
html[lang="zh"] .plan-modal-kicker{
  letter-spacing:0;text-transform:none
}
