:root {
    --primary:#5b45d6;
    --bg:#f4f5fb;
    --card:#fff;
    --text:#252438;
    --muted:#6b687d;
    --border:#e4e1ed;
    --plan-bg:#dff4e8;
    --plan-border:#91cfad;
    --plan-text:#185c43;
}
:root[data-theme="dark"] {
    --primary:#9b8cff;
    --bg:#171622;
    --card:#242232;
    --text:#f4f2ff;
    --muted:#b7b2c8;
    --border:#454158;
    --plan-bg:#274a3b;
    --plan-border:#4b8d70;
    --plan-text:#c5f6dc;
}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--bg); }
body {
    min-height:100vh; margin:0; background:var(--bg); color:var(--text);
    font-family:Arial,sans-serif;
}
main { width:min(980px,92%); margin:36px auto; }
.page-header {
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    margin-bottom:26px; padding:24px; border-radius:14px; background:var(--card);
    box-shadow:0 5px 22px #31266b14;
}
h1,p { margin-top:0; }
.upgrade-icon { color:#236f50; font-family:Arial,sans-serif; }
:root[data-theme="dark"] .upgrade-icon { color:#72d3a5; }
.page-header p { margin-bottom:0; color:var(--muted); }
.beta {
    display:inline-block; padding:4px 8px; border-radius:999px;
    background:#ece9ff; color:var(--primary); font-size:12px; vertical-align:middle;
}
.back-link {
    padding:11px 16px; border-radius:8px; background:var(--primary);
    color:#fff; font-weight:bold; text-decoration:none;
}
.message { min-height:22px; color:var(--muted); }
.message.error { color:#b42318; }
.plans {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:center;
    gap:20px;
}
.plan-card {
    display:flex; flex-direction:column; min-height:320px; padding:26px;
    border:1px solid var(--plan-border); border-radius:16px;
    background:var(--plan-bg); color:var(--plan-text);
    box-shadow:0 8px 26px #315f511f;
}
.plan-card h2 { margin:0 0 8px; font-size:28px; }
.plan-description { min-height:44px; margin:0 0 22px; color:var(--plan-text); opacity:.85; }
.plan-price { margin-bottom:22px; font-size:30px; font-weight:bold; }
.plan-price small { font-size:14px; font-weight:normal; }
.feature-list { flex:1; margin:0 0 24px; padding-left:22px; }
.feature-list li { margin-bottom:10px; }
.current-plan {
    width:100%; padding:13px 18px; border:0; border-radius:9px;
    background:#8fcdb0; color:#174d39; font-weight:bold;
}
.current-plan:disabled { cursor:not-allowed; opacity:1; }
.change-plan {
    display:block; width:100%; padding:13px 18px; border-radius:9px;
    background:var(--primary); color:#fff; font-weight:bold;
    text-align:center; text-decoration:none;
}
.future-plan { background:var(--card); color:var(--text); border-color:var(--border); }
.future-plan .plan-description,.future-plan .feature-list { color:var(--muted); }
@media(max-width:700px) {
    main { margin:18px auto; }
    .page-header { align-items:flex-start; flex-direction:column; }
    .plans { grid-template-columns:1fr; }
}
@media(min-width:701px) and (max-width:900px) {
    .plans { grid-template-columns:repeat(2,minmax(0,1fr)); }
}