/*
 * 页面专属样式：plans
 *
 * 由交付包样板的 <style> 提取，共用部分已经上移到 components.css。
 */

#nys-main .page {
	max-width:1080px;
	margin:0 auto;
	padding:44px 28px 90px;
}
.page-head { margin-bottom:28px; }
.page-head p {
	font-size:14px;
	color:var(--ink-soft);
	margin:0;
	max-width:560px;
	line-height:1.5;
}
.status-strip {
	display:grid;
	grid-template-columns:1.1fr 1fr 1fr 1.2fr;
	gap:0;
	border:1px solid var(--border);
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow);
	margin-bottom:14px;
}
.status-cell {
	padding:20px 22px;
	border-right:1px solid var(--border);
}
.status-cell:last-child { border-right:none; }
.status-cell .k {
	font-size:11px;
	color:var(--ink-soft);
	text-transform:uppercase;
	letter-spacing:.06em;
	margin-bottom:9px;
}
.status-cell .v {
	font-size:21px;
	font-weight:600;
}
.status-cell .n {
	font-size:11.5px;
	color:var(--ink-soft);
	margin-top:6px;
	line-height:1.4;
}
.plan-badge {
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:15px;
}
.plan-badge .chip {
	background:var(--green-soft);
	color:var(--green);
	font-size:11px;
	padding:3px 9px;
	border-radius:999px;
	font-weight:600;
}
.pool-sub .v { color:var(--ink); }
.pool-top .v { color:var(--blue); }
.pool-note {
	display:flex;
	align-items:flex-start;
	gap:9px;
	font-size:12.4px;
	color:#4B4B52;
	background:var(--blue-soft);
	border-radius:10px;
	padding:11px 14px;
	margin-bottom:46px;
	line-height:1.5;
}
.pool-note svg {
	width:15px;
	height:15px;
	color:var(--blue);
	flex-shrink:0;
	margin-top:1px;
}
.meter { margin-top:10px; }
.meter-track {
	height:6px;
	background:var(--bg-soft);
	border-radius:3px;
	overflow:hidden;
}
.meter-fill {
	height:100%;
	background:linear-gradient(90deg,var(--green),var(--amber),var(--accent));
	border-radius:3px;
}
.meter-ticks {
	display:flex;
	justify-content:space-between;
	font-size:10px;
	color:var(--ink-soft);
	margin-top:6px;
}
.section-title {
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	margin-bottom:18px;
	gap:16px;
}
.section-title h2 { font-size:18px; }
.section-title .hint {
	font-size:12.5px;
	color:var(--ink-soft);
	text-align:right;
}
.tiers {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
	margin-bottom:14px;
}
.tier {
	border:1px solid var(--border);
	border-radius:var(--radius);
	background:#fff;
	padding:24px 20px;
	display:flex;
	flex-direction:column;
	gap:14px;
	position:relative;
}
.tier.current {
	border-color:var(--green);
	box-shadow:0 0 0 3px var(--green-soft);
}
.tier.recommend {
	border-color:var(--accent);
	box-shadow:0 0 0 3px var(--accent-soft);
}
.tier .tag {
	position:absolute;
	top:-11px;
	left:20px;
	font-size:10.5px;
	padding:3px 10px;
	border-radius:999px;
	font-weight:600;
}
.tier.current .tag {
	background:var(--green);
	color:#fff;
}
.tier.recommend .tag {
	background:var(--accent);
	color:#fff;
}
.tier h3 {
	font-size:16px;
	font-weight:600;
	font-family:'Inter',sans-serif;
}
.tier .price {
	font-size:27px;
	font-family:'Fraunces',serif;
	font-weight:600;
}
.tier .price small {
	font-size:12.5px;
	color:var(--ink-soft);
	font-family:'Inter',sans-serif;
	font-weight:400;
}
.tier .quota {
	font-size:12.5px;
	color:var(--ink-soft);
	padding-bottom:12px;
	border-bottom:1px solid var(--border);
	font-weight:500;
}
.tier ul {
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:9px;
	flex:1;
}
.tier li {
	font-size:12.8px;
	color:#4B4B52;
	display:flex;
	gap:8px;
	line-height:1.4;
}
.tier li::before {
	content:"✓";
	color:var(--green);
	font-weight:700;
	flex-shrink:0;
}
.tier-btn {
	margin-top:4px;
	text-align:center;
	padding:10px;
	border-radius:10px;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
	border:1px solid var(--border);
}
.tier-btn:hover { background:var(--bg-soft); }
.tier-btn.primary {
	background:var(--ink);
	border-color:var(--ink);
	color:#fff;
}
.tier-btn.primary:hover { background:#000; }
.tier-btn.disabled {
	color:var(--ink-soft);
	cursor:default;
	background:var(--bg-soft);
}
.tier-btn.disabled:hover { background:var(--bg-soft); }
.invoice-hint {
	font-size:12.4px;
	color:var(--ink-soft);
	margin-bottom:56px;
}
.invoice-hint a {
	color:var(--ink);
	font-weight:500;
	text-decoration:underline;
}
.packs {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
	margin-bottom:56px;
}
.pack {
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:22px 20px;
	display:flex;
	flex-direction:column;
	gap:7px;
	position:relative;
	background:#fff;
}
.pack.best {
	border-color:var(--blue);
	box-shadow:0 0 0 3px var(--blue-soft);
}
.pack-tag {
	position:absolute;
	top:-11px;
	left:20px;
	background:var(--blue);
	color:#fff;
	font-size:10.5px;
	padding:3px 10px;
	border-radius:999px;
	font-weight:600;
}
.pack-n {
	font-size:16px;
	font-weight:600;
}
.pack-uses {
	font-size:12.3px;
	color:var(--ink-soft);
}
.pack-price {
	font-size:24px;
	font-family:'Fraunces',serif;
	font-weight:600;
	margin-top:6px;
}
.pack-save {
	font-size:11.5px;
	color:var(--green);
	background:var(--green-soft);
	padding:3px 9px;
	border-radius:999px;
	font-weight:600;
	align-self:flex-start;
}
.pack-btn {
	margin-top:12px;
	text-align:center;
	padding:9px;
	border-radius:10px;
	font-size:13px;
	font-weight:600;
	cursor:pointer;
	border:1px solid var(--border);
}
.pack-btn:hover { background:var(--bg-soft); }
.pack.best .pack-btn {
	background:var(--ink);
	border-color:var(--ink);
	color:#fff;
}
.pack.best .pack-btn:hover { background:#000; }
table {
	width:100%;
	border-collapse:collapse;
	border:1px solid var(--border);
	border-radius:var(--radius);
	overflow:hidden;
}
tbody td {
	padding:14px 18px;
	font-size:13.3px;
	border-bottom:1px solid var(--border);
	color:#3F3F45;
}
tbody tr:hover { background:var(--bg-soft); }
.status-tag {
	font-size:11.5px;
	padding:4px 10px;
	border-radius:999px;
	font-weight:600;
	display:inline-block;
}
.status-tag.paid {
	color:var(--green);
	background:var(--green-soft);
}
.status-tag.processing {
	color:var(--amber);
	background:var(--amber-soft);
}
.status-tag.refunded {
	color:var(--ink-soft);
	background:var(--bg-soft);
}
.status-tag.failed {
	color:var(--accent);
	background:var(--accent-soft);
}
.inv-link {
	color:var(--ink);
	text-decoration:underline;
	cursor:pointer;
	font-size:12.8px;
}
.table-note {
	font-size:11.8px;
	color:var(--ink-soft);
	margin-top:10px;
	margin-bottom:56px;
}
.billing-grid {
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:14px;
}
.billing-card {
	border:1px solid var(--border);
	border-radius:var(--radius);
	padding:20px 22px;
}
.billing-card .t {
	font-size:13.5px;
	font-weight:600;
	margin-bottom:7px;
}
.billing-card .d {
	font-size:12.7px;
	color:var(--ink-soft);
	line-height:1.6;
}
.billing-terms {
	font-size:12.4px;
	color:var(--ink-soft);
	margin-top:16px;
}
.billing-terms a {
	color:var(--ink);
	text-decoration:underline;
}
.toast {
	position:fixed;
	left:50%;
	bottom:26px;
	transform:translateX(-50%) translateY(12px);
	background:var(--ink);
	color:#fff;
	font-size:13px;
	padding:11px 20px;
	border-radius:999px;
	opacity:0;
	pointer-events:none;
	transition:opacity .18s, transform .18s;
	z-index:80;
	max-width:88vw;
	text-align:center;
}
@media (max-width:960px) {
  .tiers, .packs { grid-template-columns:repeat(2,1fr); }
  .status-strip, .billing-grid { grid-template-columns:1fr; }
  .status-cell {
  	border-right:none;
  	border-bottom:1px solid var(--border);
  }
}