header.topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--surface-1); }
  header.topbar h1 { font-size: 16px; margin:0; }
  header.topbar nav { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
  header.topbar nav a { color: var(--text-secondary); text-decoration:none; font-size:13px; }
  header.topbar nav a:hover { color: var(--accent); }
  header.topbar .who { font-size: 13px; color: var(--text-secondary); }
  header.topbar button { background:none; border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:12.5px; color: var(--text-secondary); }

  .plan-card { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
  .plan-card .name { font-size:20px; font-weight:700; margin:0 0 4px; }
  .plan-card .detail { font-size:13.5px; color:var(--text-secondary); margin:0; }
  .plan-card .actions { display:flex; gap:10px; flex-wrap:wrap; }
  .plan-card .actions button { width:auto; margin-top:0; }
  .status-note { font-size:12.5px; margin-top:10px; padding:8px 10px; border-radius:8px; }
  .status-note.warn { background: rgba(224,160,0,0.12); color:#8a6300; }
  .status-note.bad { background: rgba(192,54,44,0.1); color: var(--danger); }
  .status-note.good { background: rgba(27,175,122,0.12); color:#0a6b4c; }

  .upgrade-section { margin-top: 24px; }
  .cycle-toggle { display:inline-flex; border:1px solid var(--border); border-radius:9px; padding:3px; background:var(--surface-page); margin: 14px 0 18px; }
  .cycle-toggle button { background:none; border:none; padding:7px 16px; border-radius:7px; font-size:13px; font-weight:600; color:var(--text-secondary); width:auto; margin-top:0; }
  .cycle-toggle button.active { background:#fff; color:var(--text-primary); box-shadow:0 1px 2px rgba(11,11,11,0.08); }
  .feature-list { list-style:none; margin:14px 0; padding:0; display:grid; gap:8px; }
  .feature-list li { display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--text-secondary); }
  .feature-list svg { flex-shrink:0; width:16px; height:16px; margin-top:2px; color:var(--accent); }
  .price-line { font-size:26px; font-weight:700; margin:0; }
  .price-line span { font-size:13px; font-weight:500; color:var(--text-secondary); }

  .plan-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
  @media (max-width: 720px) { .plan-choice-grid { grid-template-columns:1fr; } }
  .pchoice { border:1px solid var(--border); border-radius:12px; padding:18px; display:flex; flex-direction:column; }
  .pchoice h3 { margin:0 0 4px; font-size:16px; }
  .pchoice .pchoice-sub { font-size:12.5px; color:var(--text-secondary); margin:0 0 10px; min-height:32px; }
  .pchoice .price-line { margin-top:auto; }
  .pchoice button { margin-top:12px; }

  .upgrade-cm-card { margin-top:24px; }
  .upgrade-cm-card p.sub { margin: 4px 0 0; }