/* v4 訂閱 (Free / Pro active) and 帳號 pages. Prefix v4pl-. Built on the core paper cards and leather buttons. */

/* ── Shared bits ── */
html.v4 .v4pl-tag-pro{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:6px;border:1px solid var(--v4-pro-bg);background:var(--v4-pro-bg);color:var(--v4-pro-ink);font-size:12px;line-height:17px;font-weight:700;white-space:nowrap}
html.v4 .v4pl-tag-pro.sm{padding:2px 7px;font-size:11px;line-height:16px}
html.v4 .v4pl-chip{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:3px 8px;border-radius:6px;border:1px solid var(--v4-tile-line);background:var(--v4-tile);color:var(--v4-sub);font-size:12px;line-height:17px;font-weight:700;white-space:nowrap}
html.v4 .v4pl-chip.green{background:var(--v4-ok-bg);border-color:var(--v4-ok-line);color:var(--v4-ok-ink)}
html.v4 .v4pl-chip.sm{padding:2px 7px;font-size:11px;line-height:16px}
html.v4 .v4pl-mark{flex:none;width:54px;height:20px;display:flex;align-items:center;justify-content:center;font-size:18px}
html.v4 .v4pl-mark .v4-ic{stroke-width:2.6}
html.v4 .v4pl-mark.yes{color:var(--v4-green)}
html.v4 .v4pl-mark.no{color:var(--v4-tile-line)}
html.v4 .v4pl-note{margin:0;font-size:12px;line-height:18px;font-weight:400;color:var(--v4-muted-bg)}
html.v4 .v4pl-note.ok{font-weight:700;color:var(--v4-green)}
html.v4 .v4pl-links{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}
html.v4 .v4pl-links>a,html.v4 .v4pl-links>button{margin:0;padding:0;border:0;background:none;font-family:var(--v4-sans);font-size:13px;line-height:18px;font-weight:700;color:var(--v4-red-text);text-decoration:none;cursor:pointer;white-space:nowrap}

/* ── 訂閱 · Free ── */
html.v4 .v4pl-hero{gap:8px;overflow:hidden}
html.v4 .v4pl-hero-tags{display:flex;align-items:center;gap:8px}
html.v4 .v4pl-lic34{width:34px;height:34px;border-radius:10px;font-size:19px}
html.v4 .v4pl-hero-title{margin:0;font-family:var(--v4-serif);font-weight:900;font-size:24px;line-height:34px;letter-spacing:.04em;color:var(--v4-title);white-space:nowrap}
html.v4 .v4pl-hero-desc{margin:0;font-size:14px;line-height:21px;font-weight:700;color:var(--v4-sub)}
html.v4 .v4pl-hero .v4pl-chip{align-self:flex-start}
html.v4 .v4-card>.v4pl-hero-cat{position:absolute;right:12px;bottom:0;width:109px;height:124px;object-fit:contain;object-position:center bottom;pointer-events:none}
/* Narrow phones: a smaller cat, and the text keeps clear of it. */
@media (max-width:379.98px){
  html.v4 .v4-card>.v4pl-hero-cat{right:4px;width:74px;height:84px}
  html.v4 .v4pl-hero-desc{padding-right:68px}
  html.v4 .v4pl-hero .v4pl-chip{max-width:calc(100% - 72px);white-space:normal}
}

html.v4 .v4pl-cmp-head{display:flex;align-items:center;padding-bottom:8px}
html.v4 .v4pl-cmp-head>span{flex:1;min-width:0;font-size:12px;line-height:16px;font-weight:700;color:var(--v4-muted)}
html.v4 .v4pl-cmp-head>b{flex:none;width:54px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px;font-weight:700;color:var(--v4-muted)}
html.v4 .v4pl-cmp-row{display:flex;align-items:center;padding:9px 0}
html.v4 .v4pl-cmp-row>span:first-child{flex:1;min-width:0;font-size:14px;line-height:20px;font-weight:700;color:var(--v4-ink)}

html.v4 .v4pl-plans{display:flex;flex-direction:column;gap:12px}
html.v4 .v4pl-plan{display:flex;flex-wrap:wrap;align-items:center;gap:12px;width:100%;min-width:0;padding:14px;border-radius:16px;border:1.25px solid var(--v4-card-line);background:var(--v4-card);box-shadow:0 2px 0 rgba(90,58,38,.1);text-align:left;cursor:pointer;font:inherit;color:inherit}
html.v4 .v4pl-plan.on{border:2px solid var(--v4-pick-line);background:var(--v4-pick-bg)}
html.v4 .v4pl-plan:focus-visible{outline:2px solid var(--v4-brown);outline-offset:2px}
html.v4 .v4pl-radio{position:relative;flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--v4-tile-line);background:var(--v4-card)}
html.v4 .v4pl-plan.on .v4pl-radio{border-color:var(--v4-brown)}
html.v4 .v4pl-plan.on .v4pl-radio::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--v4-brown)}
html.v4 .v4pl-plan-text{flex:1 1 130px;min-width:0;display:flex;flex-direction:column;gap:3px}
html.v4 .v4pl-plan-name{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px}
html.v4 .v4pl-plan-name>b{font-family:var(--v4-serif);font-weight:900;font-size:16px;line-height:22px;letter-spacing:.04em;color:var(--v4-title);white-space:nowrap}
html.v4 .v4pl-plan-name>em{font-style:normal;padding:2px 6px;border-radius:6px;border:1px solid var(--v4-new-line);background:var(--v4-new-bg);color:var(--v4-new-ink);font-size:10px;line-height:15px;font-weight:700;white-space:nowrap}
html.v4 .v4pl-plan-text>small{font-size:12px;line-height:16px;font-weight:700;color:var(--v4-muted)}
html.v4 .v4pl-price{flex:none;display:flex;align-items:baseline;gap:2px;margin-left:auto;white-space:nowrap}
html.v4 .v4pl-price>b{font-size:22px;line-height:28px;font-weight:900;color:var(--v4-ink)}
html.v4 .v4pl-price>small{font-size:12px;line-height:16px;font-weight:700;color:var(--v4-sub)}

html.v4 .v4pl-body .v4-btn.v4pl-cta{height:auto;min-height:52px;padding-top:8px;padding-bottom:8px;border-radius:16px;font-size:17px;line-height:22px;letter-spacing:.1em;white-space:normal}
html.v4 .v4-btn.v4pl-cta::before{border-radius:12px}
html.v4 .v4pl-legal{margin:0;text-align:center;font-size:12px;line-height:18px;font-weight:400;color:var(--v4-muted)}
html.v4 .v4pl-fine{margin:0;text-align:center;font-size:11px;line-height:16px;font-weight:400;color:var(--v4-muted)}
html.v4 .v4pl-cur{padding:14px;gap:4px}
html.v4 .v4pl-cur-head{display:flex;align-items:center;gap:8px}
html.v4 .v4pl-cur-head>span:first-child{font-size:13px;line-height:18px;font-weight:700;color:var(--v4-muted)}
html.v4 .v4pl-cur>p{margin:0;font-size:12px;line-height:18px;font-weight:400;color:var(--v4-muted)}

/* ── 訂閱 · Pro 已啟用 ── */
html.v4 .v4-card.v4pl-active{border:2px solid #b0782a;gap:8px}
html.v4 .v4-card.v4pl-active::before{inset:3px}
html.v4 .v4pl-active-head{display:flex;align-items:center;gap:10px;min-width:0}
html.v4 .v4pl-active-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
html.v4 .v4pl-active-text>b{font-family:var(--v4-serif);font-weight:900;font-size:22px;line-height:30px;letter-spacing:.04em;color:var(--v4-title);overflow-wrap:anywhere}
html.v4 .v4pl-active-text>small{font-size:13px;line-height:18px;font-weight:700;color:var(--v4-sub);overflow-wrap:anywhere}
html.v4 .v4pl-kv{display:flex;align-items:center;gap:10px;padding:3px 0}
html.v4 .v4pl-kv>span{flex:none;max-width:46%;font-size:13px;line-height:18px;font-weight:700;color:var(--v4-muted)}
html.v4 .v4pl-kv>b{flex:1;min-width:0;font-size:14px;line-height:20px;font-weight:900;color:var(--v4-ink);text-align:right;overflow-wrap:anywhere}
html.v4 .v4pl-ok{display:flex;align-items:center;gap:10px;padding:8px 0}
html.v4 .v4pl-ok>.v4pl-mark{width:18px;height:18px}
html.v4 .v4pl-ok>span:last-child{flex:1;min-width:0;font-size:14px;line-height:20px;font-weight:700;color:var(--v4-ink)}
html.v4 .v4pl-body .v4-btn.v4pl-manage{height:48px;border-radius:14px;font-size:16px;letter-spacing:.1em}
html.v4 .v4-btn.v4pl-manage::before{border-radius:10px}
html.v4 .v4pl-rec{display:flex;align-items:center;gap:10px;padding:9px 0}
html.v4 .v4pl-rec>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
html.v4 .v4pl-rec b{font-size:14px;line-height:20px;font-weight:700;color:var(--v4-ink)}
html.v4 .v4pl-rec small{font-size:12px;line-height:17px;font-weight:400;color:var(--v4-muted)}
html.v4 .v4pl-rec>strong{flex:none;font-size:15px;line-height:21px;font-weight:900;color:var(--v4-ink)}
html.v4 .v4pl-rec-empty{padding:9px 0;font-size:12px;line-height:18px}

/* ── 帳號 ── */
html.v4 .v4pl-acc{display:flex;flex-direction:column;gap:10px}
html.v4 .v4pl-me{gap:12px}
html.v4 .v4pl-me-row{display:flex;align-items:center;gap:14px;min-width:0}
html.v4 .v4pl-ava{position:relative;flex:none;width:72px;height:72px;border-radius:18px;border:1.25px solid var(--v4-card-line);background:var(--v4-tile);overflow:hidden}
html.v4 .v4pl-ava>img{position:absolute;left:5.05px;top:3.05px;width:59.4px;height:67.7px;object-fit:contain}
html.v4 .v4pl-ava>img.photo{left:0;top:0;width:100%;height:100%;object-fit:cover}
html.v4 .v4pl-me-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.v4 .v4pl-me-text>b{font-family:var(--v4-serif);font-weight:900;font-size:22px;line-height:30px;letter-spacing:.04em;color:var(--v4-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v4 .v4pl-me-text>small{font-size:12px;line-height:17px;font-weight:700;color:var(--v4-sub);overflow-wrap:anywhere}
html.v4 .v4pl-me-text>small.warn{color:var(--v4-red-text)}
html.v4 .v4pl-me-btns{display:flex;gap:8px}
html.v4 .v4pl-me-btns>.v4-btn{flex:1 1 0;min-width:0;margin:0;padding:0 8px}
html.v4 .v4pl-me-btns>label.v4-btn{display:inline-flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}

html.v4 .v4pl-prov{display:flex;align-items:center;gap:12px;padding:8px 0;min-width:0}
html.v4 .v4pl-prov-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--v4-tile-line);font-family:var(--v4-sans);font-weight:900;white-space:nowrap}
html.v4 .v4pl-prov-ic.google{background:#fff;color:#4285f4;font-size:17px;line-height:20px}
html.v4 .v4pl-prov-ic.line{background:#06c755;color:#fff;font-size:10px;line-height:20px}
html.v4 .v4pl-prov-ic.apple{background:#1d1d1f;color:#fff;font-size:16px}
html.v4 .v4pl-prov-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
html.v4 .v4pl-prov-text>b{font-size:15px;line-height:21px;font-weight:700;color:var(--v4-ink);white-space:nowrap}
html.v4 .v4pl-prov-text>small{font-size:12px;line-height:17px;font-weight:400;color:var(--v4-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.v4 .v4pl-body .v4-btn.v4pl-link-btn{flex:none;width:62px;height:34px;padding:0;border-radius:10px;font-size:13px;letter-spacing:.1em}
html.v4 .v4-btn.v4pl-link-btn::before{border-radius:6px}

html.v4 .v4pl-profile{padding:14px;gap:10px}
html.v4 .v4pl-name-row{display:flex;align-items:flex-end;gap:8px}
html.v4 .v4pl-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;margin:0}
html.v4 .v4pl-field>span{font-size:12px;line-height:16px;font-weight:700;color:var(--v4-muted)}
html.v4 .v4-sub-body input.v4pl-name{display:block;width:100%;height:42px;margin:0;padding:9px 12px!important;border:1px solid var(--v4-tile-line)!important;border-radius:11px!important;background:var(--v4-field)!important;color:var(--v4-ink)!important;font-family:var(--v4-sans);font-size:16px;line-height:22px;font-weight:900;box-shadow:none!important;-webkit-appearance:none;appearance:none}
html.v4 .v4-sub-body input.v4pl-name:focus{outline:2px solid #d9a35a;outline-offset:1px}
html.v4 .v4-sub-body input.v4pl-name::placeholder{color:var(--v4-placeholder);font-weight:700}
html.v4 .v4pl-body .v4-btn.v4pl-save{flex:none;width:72px;height:42px;padding:0;border-radius:12px;font-size:14px;letter-spacing:.1em}
html.v4 .v4-btn.v4pl-save::before{border-radius:8px}
html.v4 .v4-btn.v4pl-logout{height:46px}
html.v4 .v4pl-danger{display:flex;align-items:center;justify-content:center;width:100%;height:46px;margin:0;padding:0 16px;border-radius:14px;border:1.5px solid var(--v4-red);background:var(--v4-card);color:var(--v4-red);font-family:var(--v4-sans);font-size:15px;line-height:20px;font-weight:700;cursor:pointer}
html.v4 .v4pl-danger:active{background:var(--v4-danger-press)}