:root {
      --tsi-dark: #001E41;
      --tsi-blue: #4396F6;
      --tsi-blue-tint: #EAF3FF;
      --text: #0f2447;
      --muted: #50617d;
      --line: rgba(0, 30, 65, 0.14);
      --shadow: 0 20px 48px rgba(0, 30, 65, 0.10);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; background: linear-gradient(180deg,#fff 0%,#f3f7fb 100%); color: var(--text); font-family: Poppins, Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
    .page { width: min(1536px, 100%); margin: 0 auto; overflow-x: hidden; }
    .topbar { height: 100px; display:flex; align-items:center; justify-content:space-between; padding:0 46px; background:#fff; border-bottom:1px solid rgba(0,30,65,.08); }
    .brand img { display:block; height:44px; width:auto; }
    .lang { color:var(--tsi-dark); font-size:16px; font-weight:500; display:flex; align-items:center; gap:8px; text-decoration:none; }
    .lang svg { width:24px; height:24px; stroke:var(--tsi-dark); fill:none; stroke-width:2; }
    .hero { position:relative; min-height:408px; padding:44px 80px 34px; background: radial-gradient(900px 340px at 38% 88%, rgba(67,150,246,.15), transparent 55%), radial-gradient(760px 300px at 86% 70%, rgba(255,255,255,.08), transparent 48%), linear-gradient(180deg,#0041a1 0%, #001E41 100%); overflow:hidden; }
    .hero::before, .hero::after { content:""; position:absolute; pointer-events:none; }
    .hero::before { left:-10%; bottom:-8%; width:70%; height:45%; background: radial-gradient(circle at 30% 75%, rgba(67,150,246,.22), transparent 24%), radial-gradient(circle at 50% 75%, rgba(67,150,246,.18), transparent 22%), radial-gradient(circle at 70% 75%, rgba(67,150,246,.14), transparent 18%); filter:blur(2px); opacity:.9; transform:skewX(-10deg); }
    .hero::after { right:-6%; top:10%; width:32%; height:75%; background: linear-gradient(120deg, rgba(255,255,255,.03), transparent 55%), radial-gradient(circle at 10% 20%, rgba(67,150,246,.16), transparent 20%), radial-gradient(circle at 18% 46%, rgba(67,150,246,.10), transparent 18%), radial-gradient(circle at 30% 60%, rgba(67,150,246,.08), transparent 14%); opacity:.65; }
    .hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr; gap:44px; align-items:start; }
    .hero-copy { padding-top:12px; max-width:680px; color:#fff; }
    .hero-copy h1 { margin:0 0 18px; font-size:clamp(3.05rem,4vw,4.5rem); line-height:.98; letter-spacing:-.055em; font-weight:700; }
    .hero-copy p { margin:0; font-size:clamp(1rem,1.15vw,1.12rem); line-height:1.5; color:rgba(255,255,255,.94); max-width:100%; }
    .feature-row { display:flex; gap:28px; margin-top:48px; flex-wrap:wrap; }
    .feature { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; min-width:175px; color:#fff; }
    .feature .icon { width:62px; height:62px; border-radius:50%; border:2px solid rgba(255,255,255,.58); display:grid; place-items:center; background:rgba(255,255,255,.02); box-shadow:0 0 0 1px rgba(67,150,246,.08) inset; }
    .feature .icon svg { width:31px; height:31px; stroke:#fff; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
    .feature strong { display:block; font-size:.98rem; margin-bottom:4px; }
    .feature span { display:block; font-size:.9rem; line-height:1.45; color:rgba(255,255,255,.88); max-width:14ch; }
    .payment-card { justify-self:end; width:min(100%,572px); background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:26px 30px 24px; color:var(--text); }
    .payment-head { display:grid; grid-template-columns:84px 1fr; gap:18px; align-items:center; margin-bottom:22px; }
    .card-badge { width:84px; height:84px; border-radius:50%; background:var(--tsi-blue-tint); display:grid; place-items:center; }
    .card-badge svg { width:46px; height:46px; stroke:var(--tsi-dark); fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
    .payment-head h2 { margin:0 0 8px; font-size:1.45rem; line-height:1.1; color:var(--tsi-dark); font-weight:700; }
    .payment-head p { margin:0; font-size:.95rem; color:var(--muted); }
    .payment-alert { display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start; margin:-6px 0 18px; padding:14px 15px; border:1px solid rgba(198,40,40,.24); border-left:5px solid #d6040f; border-radius:10px; background:#fff3f3; color:#7f151b; box-shadow:0 10px 20px rgba(214,4,15,.08); }
    .payment-alert-icon { width:28px; height:28px; border-radius:50%; background:#d6040f; color:#fff; display:grid; place-items:center; font-weight:800; line-height:1; margin-top:1px; }
    .payment-alert-copy { min-width:0; }
    .payment-alert-copy strong { display:block; color:#7f151b; font-size:.96rem; line-height:1.25; margin-bottom:3px; }
    .payment-alert-copy span { display:block; color:#7f151b; font-size:.9rem; line-height:1.45; }
    .cta { display:flex; align-items:center; justify-content:center; gap:18px; width:100%; height:72px; border:0; border-radius:10px; color:#fff; background:linear-gradient(180deg,#0044a9 0%,#083a8e 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); font:inherit; font-weight:700; font-size:1.16rem; letter-spacing:-.02em; cursor:pointer; }
    .cta:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
    .cta .lock, .cta .arrow { width:20px; height:20px; display:inline-grid; place-items:center; flex:0 0 auto; }
    .cta .lock svg, .cta .arrow svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
    .accepted { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin:28px 0 18px; color:var(--tsi-dark); font-size:.92rem; }
    .accepted::before, .accepted::after { content:""; height:1px; background:var(--line); }
    .brands { display:flex; justify-content:center; align-items:center; gap:12px; padding:2px 0; flex-wrap:nowrap; width:100%; }
    .brand-chip { display:grid; place-items:center; height:62px; user-select:none; flex:0 0 auto; }
    .brand-chip.cards { width:210px; }
    .brand-chip.wallet { width:124px; }
    .brand-chip.cards img { display:block; width:210px; height:68px; object-fit:contain; }
    .brand-chip.wallet img { display:block; width:118px; max-height:50px; object-fit:contain; }
    .brand-chip svg { display:block; object-fit:contain; }
    @media (max-width: 560px) {
      .brands { gap:8px; }
      .brand-chip.cards { width:180px; }
      .brand-chip.wallet { width:104px; }
      .brand-chip.cards img { width:180px; height:58px; }
      .brand-chip.wallet img { width:100px; max-height:44px; }
    }
    .bottom { background:#f5f8fc; padding:26px 80px 32px; }
    .access-title { text-align:center; color:var(--tsi-dark); font-size:1.45rem; font-weight:700; letter-spacing:-.03em; margin:4px 0 6px; }
    .access-subtitle { text-align:center; color:var(--tsi-dark); font-size:.98rem; margin:0 0 24px; opacity:.92; }
    .access-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; max-width:1038px; margin:0 auto; }
    .access-card { background:#fff; border:1px solid rgba(0,30,65,.08); border-radius:15px; box-shadow:0 10px 22px rgba(0,30,65,.05); overflow:hidden; scroll-margin-top:18px; }
    .access-card-toggle { width:100%; box-sizing:border-box; background:none; border:0; cursor:pointer; font:inherit; color:inherit; text-align:left; display:grid; grid-template-columns:54px 1fr 24px; gap:16px; align-items:center; padding:22px 22px 20px; min-height:132px; }
    .access-card-toggle:hover { background:rgba(67,150,246,.04); }
    .access-card-toggle:focus-visible { outline:2px solid var(--tsi-blue); outline-offset:-2px; }
    .access-icon { width:54px; height:54px; border-radius:50%; background:rgba(67,150,246,.16); display:grid; place-items:center; color:var(--tsi-dark); }
    .access-icon svg { width:28px; height:28px; stroke:var(--tsi-dark); fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
    .access-card h3 { margin:0 0 5px; color:var(--tsi-dark); font-size:1.08rem; line-height:1.15; }
    .access-card p { margin:0; color:var(--muted); font-size:.94rem; line-height:1.5; max-width:25ch; }
    .chevron { color:var(--tsi-dark); justify-self:end; font-size:32px; line-height:1; font-weight:300; transform:translateY(-2px); transition:transform .25s ease; }
    .access-card.open .chevron { transform:translateY(-2px) rotate(90deg); }
    .access-drawer .drawer-inner { padding:0 22px 22px; }
    .help { max-width:1152px; margin:20px auto 0; padding:18px 20px; background:rgba(234,243,255,.72); border-radius:12px; border:1px solid rgba(0,30,65,.06); display:grid; grid-template-columns:1.15fr .95fr 1fr .95fr; gap:16px; align-items:center; }
    .help-col { display:flex; align-items:center; gap:14px; color:var(--tsi-dark); min-width:0; }
    .help-col + .help-col { border-left:1px solid rgba(0,30,65,.10); padding-left:20px; }
    .help-icon { width:44px; height:44px; border-radius:50%; background:rgba(67,150,246,.16); display:grid; place-items:center; flex:0 0 auto; }
    .help-icon svg { width:23px; height:23px; stroke:var(--tsi-dark); fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
    .help strong, .help a, .help span { display:block; color:var(--tsi-dark); text-decoration:none; line-height:1.35; }
    .help strong { font-size:.99rem; margin-bottom:2px; }
    .help span, .help a { font-size:.94rem; color:var(--tsi-dark); opacity:.96; }
    .footer { background:linear-gradient(180deg,#00306c 0%,#001E41 100%); color:#fff; min-height:108px; display:grid; align-items:center; grid-template-columns:1fr 1fr 1fr; padding:16px 44px; gap:24px; }
    .footer-brand { display:flex; align-items:center; gap:12px; }
    .footer-brand img { height:52px; width:auto; display:block; }
    #google_translate_element { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .goog-te-banner-frame.skiptranslate,
    .goog-te-gadget,
    .goog-te-gadget-icon,
    .goog-te-balloon-frame,
    iframe.skiptranslate { display:none !important; }
    html.translated-ltr body,
    html.translated-rtl body,
    body { top:0 !important; }
    .footer-links { display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; color:rgba(255,255,255,.95); font-size:.94rem; }
    .footer-links a { color:rgba(255,255,255,.95); text-decoration:none; }
    .footer-links a:hover, .help a:hover, .lang:hover { text-decoration:underline; }
    .footer-links span { opacity:.45; }
    .footer-right { display:flex; justify-content:flex-end; align-items:center; gap:12px; font-size:.9rem; line-height:1.35; text-align:left; }
    .footer-lock { width:18px; height:18px; display:inline-grid; place-items:center; flex:0 0 auto; }
    .footer-lock svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
    .muted-note { opacity:.9; }

    /* ============================================================
       MOBILE RULES — phones (≤ 640px)
       Same tokens/colors/typography as desktop; layout re-flows to
       a single column and the payment CTA moves above the fold.
       ============================================================ */
    @media (max-width: 640px) {
      :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }

      .page { width: 100%; box-shadow: none; }

      /* Top bar */
      .topbar { height:auto; min-height:64px; padding: calc(var(--safe-top) + 10px) 14px 10px; position:sticky; top:0; z-index:20; }
      .brand img { height:28px; }
      .lang { font-size:13px; padding:8px 6px; gap:5px; }
      .lang svg { width:18px; height:18px; }

      /* Hero: collapse the 2-col grid to a single flexible column and
         reorder so the payment card sits right under the headline,
         with the trust features below it. */
      .hero { min-height:0; padding:22px 18px 26px; }
      .hero-inner { display:flex; flex-direction:column; gap:0; }
      .hero-copy { display:contents; }
      .hero-copy h1 { font-size:1.9rem; line-height:1.05; margin:0 0 8px; }
      .hero-copy p { font-size:.94rem; max-width:34ch; margin-bottom:18px; }
      .payment-card { order:2; justify-self:stretch; width:100%; border-radius:16px; padding:20px 18px 18px; margin-top:0; }
      .feature-row { order:3; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; flex-wrap:nowrap; }
      .feature { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; min-width:0; }
      .feature .icon { width:44px; height:44px; }
      .feature .icon svg { width:21px; height:21px; }
      .feature strong { font-size:.78rem; margin-bottom:0; }
      .feature span { font-size:.68rem; max-width:none; }

      .payment-head { grid-template-columns:52px 1fr; gap:12px; margin-bottom:16px; }
      .card-badge { width:52px; height:52px; }
      .card-badge svg { width:28px; height:28px; }
      .payment-head h2 { font-size:1.12rem; }
      .payment-head p { font-size:.85rem; }
      .payment-alert { grid-template-columns:32px 1fr; gap:10px; margin:-2px 0 14px; padding:12px; border-radius:9px; }
      .payment-alert-icon { width:24px; height:24px; font-size:.85rem; }
      .payment-alert-copy strong { font-size:.9rem; }
      .payment-alert-copy span { font-size:.82rem; }
      .cta { height:56px; font-size:1.02rem; gap:12px; }
      .cta .lock, .cta .arrow { width:18px; height:18px; }
      .cta .lock svg, .cta .arrow svg { width:18px; height:18px; }
      .drawer-actions { grid-template-columns: 1fr; gap: 10px; }
      .secondary-action { height: 56px; }
      .accepted { gap:10px; margin:20px 0 14px; font-size:.82rem; }

      .brands { gap:8px; }
      .brand-chip { height:50px; }
      .brand-chip.cards { width:150px; }
      .brand-chip.wallet { width:92px; }
      .brand-chip.cards img { width:150px; height:48px; }
      .brand-chip.wallet img { width:88px; max-height:38px; }

      /* Bottom / access section */
      .bottom { padding:26px 18px 30px; }
      .access-title { text-align:left; font-size:1.18rem; margin:0 0 4px; }
      .access-subtitle { text-align:left; font-size:.86rem; margin:0 0 18px; }
      .access-grid { grid-template-columns:1fr; gap:10px; max-width:none; }
      .access-card { border-radius:14px; scroll-margin-top:12px; }
      .access-card-toggle { grid-template-columns:46px 1fr 20px; gap:12px; min-height:0; padding:16px; }
      .access-drawer .drawer-inner { padding:0 16px 16px; }
      .access-icon { width:46px; height:46px; }
      .access-icon svg { width:23px; height:23px; }
      .access-card h3 { font-size:.98rem; margin:0 0 3px; }
      .access-card p { font-size:.82rem; max-width:none; }
      .chevron { font-size:26px; }

      .help { margin:22px 0 0; padding:16px; flex-direction:column; align-items:stretch; display:flex; grid-template-columns:none; gap:14px; max-width:none; }
      .help-col { gap:12px; justify-content:flex-start; text-align:left; width:100%; }
      .help-col + .help-col { border-left:0; padding-left:0; border-top:1px solid rgba(0,30,65,.10); padding-top:14px; }
      .help-icon { width:40px; height:40px; }
      .help-icon svg { width:21px; height:21px; }
      .help strong { font-size:.92rem; margin-bottom:1px; }
      .help span, .help a { font-size:.86rem; }

      /* Footer */
      .footer { grid-template-columns:none; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:26px 18px calc(22px + var(--safe-bottom)); min-height:0; }
      .footer-brand img { height:34px; }
      .footer-links { font-size:.86rem; gap:14px; }
      .footer-right { justify-content:center; text-align:left; font-size:.8rem; gap:10px; }
      .footer-lock { width:16px; height:16px; }
      .footer-lock svg { width:16px; height:16px; }
    }

    /* Extra-small phones (e.g. iPhone SE) */
    @media (max-width: 380px) {
      .hero-copy h1 { font-size:1.65rem; }
      .brand-chip.cards { width:130px; }
      .brand-chip.cards img { width:130px; height:42px; }
      .brand-chip.wallet { width:80px; }
      .brand-chip.wallet img { width:76px; max-height:34px; }
      .feature strong { font-size:.72rem; }
      .feature span { font-size:.63rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    }

    /* ============================================================
       PAY NOW INLINE PANEL
       Expands directly beneath the "Pay by credit card" header,
       inside the card itself — no overlay/pop-up.
       ============================================================ */
    .inline-drawer {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      transition: grid-template-rows .35s ease, opacity .28s ease, margin-top .35s ease;
    }
    .inline-drawer.open { grid-template-rows: 1fr; opacity: 1; margin-top: 4px; }
    .drawer-inner { overflow: hidden; min-height: 0; }
    .drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-top: 6px; border-top: 1px solid rgba(0,30,65,.08); }
    .drawer-top .drawer-label { font-size: .92rem; font-weight: 600; color: var(--tsi-dark); margin-top: 16px; }
    .drawer-close { width: 32px; height: 32px; margin-top: 16px; border-radius: 50%; border: 0; background: rgba(0,30,65,.06); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
    .drawer-close:hover { background: rgba(0,30,65,.1); }
    .drawer-close svg { width: 16px; height: 16px; stroke: var(--tsi-dark); fill: none; stroke-width: 2.2; stroke-linecap: round; }
    .drawer-form { display: flex; flex-direction: column; padding-bottom: 4px; }
    .field { display: block; margin-bottom: 16px; }
    .field-label { display: block; font-size: .85rem; font-weight: 600; color: var(--tsi-dark); margin-bottom: 7px; }
    .field input,
    .field select {
      width: 100%; height: 52px; border-radius: 10px;
      border: 1.5px solid rgba(0,30,65,.16);
      padding: 0 16px; font: inherit; font-size: 1rem; color: var(--text);
      background: #fff; box-sizing: border-box;
    }
    .field select {
      appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--tsi-dark) 50%), linear-gradient(135deg, var(--tsi-dark) 50%, transparent 50%);
      background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
      padding-right: 42px;
    }
    .field input::placeholder { color: rgba(15,36,71,.4); }
    .field input:focus,
    .field select:focus { outline: none; border-color: var(--tsi-blue); box-shadow: 0 0 0 3px rgba(67,150,246,.18); }
    .field input.field-invalid,
    .field select.field-invalid,
    .terms-field input.field-invalid { border-color: #d33; box-shadow: 0 0 0 3px rgba(221,51,51,.12); }
    .field-error { display: none; font-size: .78rem; color: #c62828; margin-top: 6px; }
    .field-error.show { display: block; }
    .field input.input-error, .field select.input-error { border-color: #d33; box-shadow: 0 0 0 3px rgba(221,51,51,.12); }
    .validation-summary { margin: 0 0 14px; padding: 12px 14px; border-left: 4px solid #c62828; border-radius: 8px; background: #fff3f3; }
    .validation-summary p { margin: 0; color: #7f151b; font-size: .86rem; line-height: 1.4; }

    /* ASP.NET model validation output (ModelState.AddModelError / asp-validation-for) */
    .field-validation-error { display: block; margin-top: 6px; color: #c62828; font-size: .78rem; font-weight: 600; line-height: 1.4; }
    .field input.input-validation-error, .field select.input-validation-error, .field textarea.input-validation-error { border-color: #d33; box-shadow: 0 0 0 3px rgba(221,51,51,.12); }
    .validation-summary-errors { margin: 0 0 14px; padding: 12px 14px; border-left: 4px solid #c62828; border-radius: 8px; background: #fff3f3; }
    .validation-summary-errors ul { margin: 0; padding-left: 18px; }
    .validation-summary-errors li { color: #7f151b; font-size: .86rem; line-height: 1.4; }
    .field-hint { display: block; margin-top: 7px; color: var(--muted); font-size: .76rem; line-height: 1.4; }
    .form-status { margin: 0 0 14px; padding: 12px 14px; border-left: 4px solid var(--tsi-blue); border-radius: 8px; background: var(--tsi-blue-tint); color: var(--tsi-dark); font-size: .86rem; line-height: 1.4; font-weight: 600; }
    .form-status-error { border-left-color: #d6040f; background: #fff3f3; color: #7f151b; }
    .register-step[hidden] { display: none !important; }
    .terms-field { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0 0 4px; color: var(--text); font-size: .86rem; line-height: 1.45; }
    .terms-field input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tsi-dark); }
    .terms-field a { color: var(--tsi-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
    .terms-error { margin: 6px 0 12px; }
    .drawer-actions { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: 12px; align-items: stretch; margin-top: 6px; }
    .secondary-action { width: 100%; height: 72px; border-radius: 10px; border: 1.5px solid rgba(0,30,65,.18); background: #fff; color: var(--tsi-dark); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
    .secondary-action:hover { background: rgba(67,150,246,.06); }
    .secondary-action:focus-visible { outline: 2px solid var(--tsi-blue); outline-offset: 2px; }
    .reset-password-link { height: 52px; margin-top: 10px; font-size: .95rem; }
    .amount-input-wrap { position: relative; }
    .amount-prefix { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--tsi-dark); font-weight: 600; pointer-events: none; }
    .amount-input-wrap input { padding-left: 30px; }
    .drawer-submit { margin-top: 6px; }
    .drawer-note { font-size: .78rem; color: var(--muted); text-align: center; margin: 14px 0 0; }
    #pay-now-trigger.trigger-hidden { display: none; }

    /* Modal (registration success) */
    body.modal-open { overflow: hidden; }
    .modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,30,65,.55); animation: modal-fade .18s ease-out; }
    .modal-overlay.modal-hidden { display: none; }
    .modal-card { width: min(430px, 100%); padding: 34px 30px 30px; border-radius: 16px; background: #fff; text-align: center; box-shadow: 0 30px 64px rgba(0,30,65,.34); animation: modal-pop .2s ease-out; }
    .modal-icon { width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%; background: rgba(34,160,94,.14); display: grid; place-items: center; color: #22a05e; }
    .modal-icon svg { width: 34px; height: 34px; stroke: #22a05e; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
    .modal-icon.error { background: rgba(214,4,15,.12); color: #d6040f; }
    .modal-icon.error svg { stroke: #d6040f; }
    .modal-title { margin: 0 0 8px; color: var(--tsi-dark); font-size: 1.4rem; line-height: 1.2; letter-spacing: -.02em; }
    .modal-message { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
    .modal-message a { color: var(--tsi-blue); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
    @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

    /* Busy / loading overlay */
    .busy-overlay { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0,30,65,.45); animation: modal-fade .15s ease-out; }
    .busy-overlay.busy-visible { display: flex; }
    .busy-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 32px; border-radius: 14px; background: #fff; color: var(--tsi-dark); font-weight: 700; box-shadow: 0 24px 54px rgba(0,30,65,.30); }
    .busy-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(0,30,65,.14); border-top-color: var(--tsi-blue); animation: busy-spin .7s linear infinite; }
    .busy-text { font-size: .95rem; }
    @keyframes busy-spin { to { transform: rotate(360deg); } }

    .terms-page { min-height: 100vh; background: #f5f8fc; color: var(--text); padding: 32px 18px 48px; }
    .terms-header { width: min(1120px, 100%); margin: 0 auto 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .terms-logo img { display: block; height: 44px; width: auto; }
    .terms-header h1 { margin: 0; color: var(--tsi-dark); font-size: 1.6rem; line-height: 1.2; letter-spacing: -.02em; text-align: right; }
    .terms-header-end { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
    .terms-card { width: min(1120px, 100%); margin: 0 auto; background: #fff; border: 1px solid rgba(0,30,65,.08); border-radius: 12px; box-shadow: 0 14px 30px rgba(0,30,65,.07); padding: 28px 30px; }
    .terms-card h2 { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid #d9d9d9; color: var(--tsi-dark); font-size: 1.35rem; line-height: 1.2; }
    .terms-content { max-height: calc(100vh - 220px); overflow: auto; padding-right: 14px; }
    .terms-content h3 { margin: 22px 0 8px; color: var(--tsi-dark); font-size: 1.02rem; line-height: 1.35; }
    .terms-content p { margin: 0 0 14px; color: var(--text); font-size: .94rem; line-height: 1.58; }
    .terms-content a { color: var(--tsi-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

    @media (max-width: 640px) {
      .drawer-actions { grid-template-columns: 1fr; gap: 10px; }
      .secondary-action { height: 56px; }
      .terms-page { padding: 20px 14px 32px; }
      .terms-header { align-items: flex-start; flex-direction: column; gap: 14px; }
      .terms-header-end { align-items: flex-start; }
      .terms-logo img { height: 34px; }
      .terms-header h1 { text-align: left; font-size: 1.28rem; }
      .terms-card { padding: 20px 16px; border-radius: 10px; }
      .terms-content { max-height: none; overflow: visible; padding-right: 0; }
      .terms-content p { font-size: .88rem; }
    }

    .account-shell { min-height: 100vh; background: #fff; color: #002f6c; font-family: Arial, "Segoe UI", sans-serif; }
    .account-tabs { display: grid; grid-template-columns: 1fr 1fr 1.45fr 1.15fr 1fr 1fr; border: 1px solid #d4dcdf; border-bottom: 4px solid #eee; background: #dce4e7; }
    .account-tab { min-height: 41px; display: flex; align-items: center; justify-content: center; padding: 8px 14px; color: #002f6c; font-size: 20px; line-height: 1.15; text-decoration: none; border: 0; background: transparent; cursor: pointer; font-family: inherit; white-space: nowrap; }
    .account-tab.active { background: #afd5f5; }
    .account-tab:hover, .account-menu.open > .account-tab { background: #c7dce9; }
    .account-menu { position: relative; min-width: 0; }
    .account-menu-trigger { width: 100%; gap: 8px; }
    .account-menu-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #002f6c; }
    .account-menu-list { position: absolute; z-index: 20; top: 100%; left: 0; min-width: 292px; display: none; background: #fff; border: 1px solid #aebbc1; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
    .account-menu.open .account-menu-list { display: block; }
    .account-menu-list a { display: block; padding: 11px 14px; color: #002f6c; font-size: 16px; text-decoration: none; border-bottom: 1px solid #e7ecef; }
    .account-menu-list a:hover, .account-menu-list a:focus { background: #eaf5ff; outline: none; }
    .account-content { display: grid; grid-template-columns: 520px 1fr; gap: 14px; padding-top: 8px; }
    .account-sidebar { border-right: 1px solid #c8cdd1; padding-right: 16px; }
    .side-panel { background: #dfe8eb; border: 1px solid #e4eaec; margin: 0 0 14px; padding: 14px 16px 16px; min-height: 200px; }
    .side-panel h2, .section-title h2 { margin: 0; color: #002f6c; font-size: 24px; line-height: 1.2; font-weight: 500; }
    .panel-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
    .panel-heading-row a { color: #064f8f; font-size: 18px; text-decoration: underline; }
    .info-list { margin: 16px 0 0; display: grid; gap: 12px; }
    .info-list div { display: grid; grid-template-columns: 220px 1fr; align-items: start; gap: 14px; }
    .info-list dt, .info-list dd { color: #002f6c; font-size: 20px; line-height: 1.25; }
    .info-list dt { font-weight: 400; }
    .info-list dd { margin: 0; overflow-wrap: anywhere; }
    .help-badge { width: 28px; height: 28px; margin-right: 8px; display: inline-grid; place-items: center; border-radius: 50%; border: 2px solid #6e8db8; background: linear-gradient(#e7f3ff,#9ebee4); color: #002f6c; font-weight: 700; box-shadow: inset 0 0 2px rgba(0,0,0,.3); }
    .contact-panel { min-height: 380px; }
    .contact-list { gap: 8px; }
    .account-main { padding-right: 30px; }
    .account-summary { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 24px; padding: 24px 0 20px; }
    .account-summary h1 { margin: 0 0 0 14px; color: #2d70b8; font-size: 32px; line-height: 1.2; font-weight: 400; }
    .account-balance { color: #002f6c; font-size: 24px; font-weight: 700; padding-right: 48px; white-space: nowrap; }
    .account-section { margin-bottom: 34px; }
    .section-title { min-height: 35px; display: flex; align-items: center; justify-content: space-between; background: #e7e7e7; padding: 5px 6px 5px 8px; border-bottom: 1px solid #bbb; }
    .section-title h2 { font-size: 20px; font-weight: 700; }
    .section-title button { border: 0; background: transparent; color: #002f6c; cursor: pointer; font-size: 18px; font-weight: 700; font-family: inherit; }
    .section-title button span { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; color: #fff; background: #002f6c; border-radius: 4px; line-height: 1; }
    .account-table-wrap { overflow-x: auto; }
    .account-table { width: 100%; border-collapse: collapse; color: #111; font-size: 18px; }
    .account-table th { text-align: left; color: #111; font-size: 18px; padding: 4px 0 3px; border-bottom: 1px solid #8f8f8f; }
    .account-table td { padding: 3px 0 4px; border-bottom: 1px solid #8f8f8f; color: #1b1b1b; }
    .payment-section .section-title { margin-bottom: 46px; }
    .payment-intro { margin: 0 0 2px 20px; color: #111; font-size: 20px; }
    .payment-options { display: grid; gap: 13px; padding: 0 26px 0 12px; }
    .payment-option { min-height: 72px; display: grid; grid-template-columns: 220px 1fr 180px; align-items: center; gap: 28px; padding: 12px 118px 12px 28px; background: #dfe8eb; border-radius: 20px; color: #002f6c; }
    .payment-title { font-size: 20px; }
    .payment-description { color: #000; font-size: 18px; }
    .payment-option button { width: 116px; height: 38px; justify-self: end; border: 1px solid #a8bfce; border-radius: 10px; color: #002f6c; background: linear-gradient(#f9fdff, #98d0fb); box-shadow: 6px 7px 11px rgba(0,0,0,.32); font-size: 20px; cursor: pointer; font-family: inherit; }

    @media (max-width: 1180px) {
      .account-tabs { grid-template-columns: repeat(3, 1fr); }
      .account-content { grid-template-columns: 380px 1fr; }
      .info-list div { grid-template-columns: 155px 1fr; }
      .payment-option { grid-template-columns: 190px 1fr 140px; padding-right: 34px; }
    }

    @media (max-width: 820px) {
      .account-tabs { grid-template-columns: 1fr; }
      .account-tab { justify-content: flex-start; min-height: 44px; font-size: 17px; padding: 10px 16px; }
      .account-menu-list { position: static; min-width: 0; box-shadow: none; border-left: 0; border-right: 0; }
      .account-content { grid-template-columns: 1fr; gap: 0; padding: 8px 0 0; }
      .account-sidebar { border-right: 0; padding: 0; }
      .account-main { padding: 0 12px 24px; }
      .account-summary { grid-template-columns: 1fr; gap: 8px; padding: 20px 0 14px; }
      .account-summary h1 { margin-left: 0; font-size: 26px; }
      .account-balance { padding-right: 0; font-size: 21px; }
      .side-panel { margin-bottom: 10px; padding: 14px 16px; min-height: 0; }
      .side-panel h2 { font-size: 22px; }
      .info-list div { grid-template-columns: 130px 1fr; gap: 8px; }
      .info-list dt, .info-list dd { font-size: 17px; }
      .panel-heading-row { margin-bottom: 14px; }
      .panel-heading-row a { font-size: 16px; }
      .payment-section .section-title { margin-bottom: 20px; }
      .payment-intro { margin: 0 0 10px; font-size: 17px; }
      .payment-options { padding: 0; }
      .payment-option { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 18px; border-radius: 14px; }
      .payment-title { font-size: 18px; }
      .payment-description { font-size: 16px; }
      .payment-option button { justify-self: start; width: 108px; height: 36px; font-size: 18px; box-shadow: 4px 5px 9px rgba(0,0,0,.25); }
    }

    .account-page { background: linear-gradient(180deg,#fff 0%,#f3f7fb 100%); min-height: 100vh; color: var(--text); }
    .account-page .topbar { position: sticky; top: 0; z-index: 30; }
    .account-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; color: var(--tsi-dark); font-size: .94rem; font-weight: 600; }
    .account-top-actions a { color: var(--tsi-dark); text-decoration: none; }
    .account-top-actions a:hover { text-decoration: underline; }
    .account-logout { padding: 10px 14px; border: 1px solid rgba(0,30,65,.12); border-radius: 10px; background: var(--tsi-blue-tint); }
    .account-hero { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 22px; align-items: stretch; padding: 30px 60px 28px; background: radial-gradient(900px 340px at 18% 92%, rgba(67,150,246,.16), transparent 55%), linear-gradient(180deg,#0041a1 0%, #001E41 100%); color: #fff; }
    .account-hero-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
    .account-kicker { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 8px; padding: 5px 9px; border-radius: 999px; background: rgba(67,150,246,.14); color: var(--tsi-blue); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .account-hero .account-kicker { background: rgba(255,255,255,.12); color: #fff; }
    .account-hero h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.65rem); line-height: 1; letter-spacing: -.035em; }
    .account-hero p { max-width: 620px; margin: 12px 0 0; color: rgba(255,255,255,.82); font-size: .96rem; line-height: 1.45; }
    .balance-card { display: grid; align-content: center; align-self: center; gap: 6px; min-height: 112px; padding: 18px 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.95); color: var(--tsi-dark); box-shadow: 0 14px 30px rgba(0,30,65,.20); }
    .balance-card span { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
    .balance-card strong { font-size: 1.85rem; line-height: 1; letter-spacing: -.03em; }
    .balance-card small { color: var(--muted); font-size: .82rem; }
    .account-nav { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; max-width: 1080px; margin: -18px auto 0; padding: 0 24px; position: relative; z-index: 5; }
    .account-nav > a, .account-nav .account-menu-trigger { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(0,30,65,.08); border-radius: 10px; background: #fff; color: var(--tsi-dark); box-shadow: 0 8px 18px rgba(0,30,65,.05); font: inherit; font-size: .9rem; font-weight: 800; text-decoration: none; cursor: pointer; }
    .account-nav > a.active, .account-nav > a:hover, .account-nav .account-menu.open .account-menu-trigger { background: var(--tsi-blue-tint); border-color: rgba(67,150,246,.26); }
    .account-page .account-menu { position: relative; }
    .account-page .account-menu-caret { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--tsi-dark); width: 0; height: 0; }
    .account-page .account-menu-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 260px; display: none; overflow: hidden; border: 1px solid rgba(0,30,65,.1); border-radius: 12px; background: #fff; box-shadow: 0 16px 34px rgba(0,30,65,.16); z-index: 30; }
    .account-page .account-menu.open .account-menu-list { display: block; }
    .account-page .account-menu-list a { display: block; padding: 13px 15px; color: var(--tsi-dark); text-decoration: none; font-size: .92rem; font-weight: 700; border-bottom: 1px solid rgba(0,30,65,.07); }
    .account-page .account-menu-list a:hover { background: var(--tsi-blue-tint); }
    .account-dashboard { max-width: 1080px; margin: 22px auto 38px; padding: 0 24px; }
    .account-dashboard-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 14px; }
    .account-dashboard-heading h2 { margin: 0; color: var(--tsi-dark); font-size: 1.45rem; line-height: 1.1; letter-spacing: -.03em; }
    .account-pay-now { width: min(220px, 100%); min-height: 54px; }
    .account-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-bottom: 12px; }
    .account-card { background: #fff; border: 1px solid rgba(0,30,65,.08); border-radius: 12px; box-shadow: 0 10px 22px rgba(0,30,65,.06); padding: 18px; }
    .account-card-head { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; margin-bottom: 14px; }
    .account-card-icon { width: 46px; height: 46px; border-radius: 50%; background: rgba(67,150,246,.16); display: grid; place-items: center; color: var(--tsi-dark); }
    .account-card-icon svg { width: 23px; height: 23px; stroke: var(--tsi-dark); fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
    .account-card h3 { margin: 0 0 3px; color: var(--tsi-dark); font-size: 1rem; line-height: 1.2; }
    .account-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }
    .account-card-toggle { min-width: 64px; height: 34px; border: 1px solid rgba(0,30,65,.12); border-radius: 999px; background: var(--tsi-blue-tint); color: var(--tsi-dark); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 800; }
    .account-card-toggle:hover { background: #fff; border-color: rgba(67,150,246,.45); }
    .account-card-toggle:focus-visible { outline: 2px solid var(--tsi-blue); outline-offset: 2px; }
    .account-details-toggle { min-width: 118px; height: 38px; align-self: center; }
    .modern-info-list { display: grid; gap: 7px; margin: 0; }
    .modern-info-list div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid rgba(0,30,65,.08); }
    .modern-info-list dt { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
    .modern-info-list dd { margin: 0; color: var(--tsi-dark); font-weight: 700; overflow-wrap: anywhere; }
    .account-secondary-action { display: grid; place-items: center; height: 44px; margin-top: 12px; text-decoration: none; font-size: .9rem; }
    .payment-options-card, .manage-card { margin-top: 12px; }
    .modern-payment-options { display: grid; gap: 10px; }
    .modern-payment-option { display: grid; grid-template-columns: 1fr 120px; gap: 14px; align-items: center; padding: 14px; border: 1px solid rgba(0,30,65,.08); border-radius: 10px; background: #f8fbff; }
    .modern-payment-option h4 { margin: 0 0 4px; color: var(--tsi-dark); font-size: .92rem; }
    .modern-payment-option p { margin: 0; }
    .modern-payment-option .secondary-action { height: 42px; font-size: .9rem; }
    .manage-action-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
    .manage-action-grid a { min-height: 66px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; border: 1px solid rgba(0,30,65,.08); border-radius: 10px; background: var(--tsi-blue-tint); color: var(--tsi-dark); font-size: .86rem; font-weight: 800; line-height: 1.22; text-decoration: none; }
    .manage-action-grid a:hover { border-color: rgba(67,150,246,.4); background: #fff; box-shadow: 0 10px 22px rgba(0,30,65,.06); }

    @media (max-width: 900px) {
      .account-top-actions { gap: 10px; font-size: .82rem; flex-wrap: wrap; }
      .account-hero { grid-template-columns: 1fr; padding: 26px 18px 34px; }
      .balance-card { min-height: 0; }
      .account-nav { grid-template-columns: 1fr; margin-top: -24px; }
      .account-page .account-menu-list { position: static; margin-top: 8px; }
      .account-dashboard-heading, .account-grid { grid-template-columns: 1fr; display: grid; }
      .account-pay-now { width: 100%; }
      .manage-action-grid { grid-template-columns: 1fr; }
      .modern-payment-option { grid-template-columns: 1fr; }
      .modern-payment-option .secondary-action { width: 100%; }
    }

    @media (max-width: 560px) {
      .account-top-actions a:not(.account-logout) { display: none; }
      .modern-info-list div { grid-template-columns: 1fr; gap: 4px; }
      .account-card { padding: 15px; }
      .account-card-head { grid-template-columns: 42px 1fr auto; }
      .account-card-icon { width: 42px; height: 42px; }
    }

    /* View My Payments table */
    .payments-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid rgba(0,30,65,.08); border-radius: 10px; }
    .payments-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
    .payments-table thead th { text-align: left; padding: 11px 16px; background: var(--tsi-blue-tint); color: var(--tsi-dark); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid rgba(0,30,65,.1); white-space: nowrap; }
    .payments-table tbody td { padding: 12px 16px; color: var(--tsi-dark); font-weight: 600; border-bottom: 1px solid rgba(0,30,65,.07); }
    .payments-table tbody tr:nth-child(even) { background: rgba(0,30,65,.02); }
    .payments-table tbody tr:last-child td { border-bottom: 0; }
    .payments-empty { margin-top: 14px; padding: 14px 16px; border-left: 4px solid var(--tsi-blue); border-radius: 8px; background: var(--tsi-blue-tint); color: var(--tsi-dark); font-size: .9rem; font-weight: 600; }

    /* Manage-account info cards (two-column layout) */
    .cards-wrapper { display: flex; flex-direction: row; gap: 16px; margin-top: 16px; }
    /* A <form> may wrap the cards; contents lets the cards be the flex columns. */
    .cards-wrapper > form { display: contents; }
    .cards-wrapper .info-card { flex: 1; min-width: 0; background: #fff; border: 1px solid rgba(0,30,65,.08); border-radius: 12px; box-shadow: 0 10px 22px rgba(0,30,65,.06); overflow: hidden; }
    .cards-wrapper .card-header { background: var(--tsi-blue-tint); color: var(--tsi-dark); padding: 13px 16px; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; border-bottom: 1px solid rgba(0,30,65,.08); }
    .cards-wrapper .card-body { padding: 18px; color: var(--text); }
    .cards-wrapper .radio-group { margin-bottom: 12px; }
    .cards-wrapper .radio-group:last-child { margin-bottom: 0; }
    .cards-wrapper .radio-group label { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 600; color: var(--tsi-dark); line-height: 1.4; cursor: pointer; }
    .cards-wrapper .radio-group input[type="radio"] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--tsi-blue); cursor: pointer; }
    .cards-wrapper .form-check { display: flex; align-items: center; gap: 10px; }
    .cards-wrapper .form-check-input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--tsi-blue); cursor: pointer; }
    .cards-wrapper .form-check-label { font-size: .95rem; font-weight: 600; color: var(--tsi-dark); line-height: 1.4; cursor: pointer; }
    .cards-wrapper .text-danger { display: block; margin-top: 8px; color: #c62828; font-size: .78rem; }
    .cards-wrapper .chapter-field { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }
    .cards-wrapper .chapter-field > label { flex: 0 0 210px; max-width: 210px; display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .9rem; font-weight: 600; color: var(--tsi-dark); line-height: 1.3; }
    .cards-wrapper .chapter-field > select,
    .cards-wrapper .chapter-field > input,
    .cards-wrapper .chapter-field > textarea { flex: 1 1 200px; min-width: 180px; height: 42px; padding: 0 12px; border: 1.5px solid rgba(0,30,65,.16); border-radius: 10px; font: inherit; font-size: .92rem; color: var(--text); background-color: #fff; box-sizing: border-box; }
    .cards-wrapper .chapter-field > input[type="date"] { cursor: pointer; }
    .cards-wrapper .chapter-field > textarea { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; }
    .cards-wrapper .chapter-field > select { appearance: none; padding-right: 38px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--tsi-dark) 50%), linear-gradient(135deg, var(--tsi-dark) 50%, transparent 50%); background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
    .cards-wrapper .chapter-field > select:focus,
    .cards-wrapper .chapter-field > input:focus,
    .cards-wrapper .chapter-field > textarea:focus { outline: none; border-color: var(--tsi-blue); box-shadow: 0 0 0 3px rgba(67,150,246,.18); }
    .cards-wrapper .chapter-field > span { flex: 1 0 100%; }
    .cards-wrapper .help-tip { display: inline-grid; place-items: center; color: var(--tsi-blue); cursor: help; }
    .cards-wrapper .help-tip svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .cards-wrapper .field-note { font-size: .72rem; line-height: 1.4; color: var(--muted); }
    .cards-wrapper .date-warning { display: block; margin-top: 6px; color: #c62828; font-weight: 600; }
    .cards-wrapper .form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 20px; }
    .cards-wrapper .form-actions button, .cards-wrapper .form-actions .btn-cancel { min-width: 130px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none; box-sizing: border-box; }
    .cards-wrapper .form-actions button[type="submit"] { border: 0; background: linear-gradient(180deg,#0044a9 0%,#083a8e 100%); color: #fff; }
    .cards-wrapper .form-actions button[type="submit"]:hover { filter: brightness(1.06); }
    .cards-wrapper .form-actions .btn-cancel { border: 1.5px solid rgba(0,30,65,.18); background: #fff; color: var(--tsi-dark); }
    @media (max-width: 768px) { .cards-wrapper { flex-direction: column; } }

    /* Payments page */
    .payment-layout { display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 12px; align-items: start; }
    .payment-sidebar { display: grid; gap: 12px; }
    .payment-method-card { padding: 0; overflow: hidden; }
    .payment-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; padding: 6px 6px 0; background: var(--tsi-blue-tint); border-bottom: 1px solid rgba(0,30,65,.1); }
    .payment-tab { min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; background: transparent; color: var(--muted); font: inherit; font-size: .9rem; font-weight: 700; line-height: 1.2; cursor: pointer; }
    .payment-tab:hover { color: var(--tsi-dark); }
    .payment-tab.active { background: #fff; color: var(--tsi-dark); border-color: rgba(0,30,65,.1); box-shadow: 0 -3px 0 var(--tsi-blue) inset; }
    .payment-tab:focus-visible { outline: 2px solid var(--tsi-blue); outline-offset: -2px; }
    .payment-tab-panels { padding: 24px; }
    .payment-panel-heading { margin-bottom: 16px; }
    .payment-panel-heading h3 { margin: 0; color: var(--tsi-dark); font-size: 1.2rem; line-height: 1.25; letter-spacing: -.02em; }
    .instruction-box { padding: 16px 18px; border: 1px solid rgba(67,150,246,.24); border-left: 4px solid var(--tsi-blue); border-radius: 10px; background: var(--tsi-blue-tint); color: var(--text); }
    .instruction-box p { margin: 0 0 10px; font-size: .92rem; line-height: 1.55; }
    .instruction-box p:last-child { margin-bottom: 0; }
    .instruction-box .instruction-title { display: block; margin-bottom: 10px; color: var(--tsi-dark); font-size: .95rem; }
    .instruction-box ul, .instruction-box ol { margin: 0; padding-left: 22px; }
    .instruction-box li { margin: 0 0 8px; font-size: .92rem; line-height: 1.5; }
    .instruction-box li:last-child { margin-bottom: 0; }
    .instruction-box strong { color: var(--tsi-dark); }
    .payment-detail-form { margin-top: 20px; }
    .payment-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 22px 28px; align-items: center; }
    .payment-detail-fields { display: grid; gap: 2px; }
    .payment-detail-fields .field { margin-bottom: 8px; }
    .payment-detail-fields .field-label { margin-bottom: 4px; font-size: .8rem; }
    .payment-detail-fields .field input { height: 40px; font-size: .92rem; border-radius: 8px; }
    .payment-detail-fields .field select { height: 40px; font-size: .92rem; border-radius: 8px; background-position: calc(100% - 20px) 17px, calc(100% - 14px) 17px; }
    .payment-detail-fields input[readonly] { background: #eef2f7; color: var(--muted); cursor: default; }
    .input-busy { position: relative; display: block; }
    .input-busy > input { width: 100%; }
    .input-busy.is-loading > input { padding-right: 38px; }
    .input-busy-spinner { display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,30,65,.18); border-top-color: var(--tsi-blue); animation: busy-spin .7s linear infinite; pointer-events: none; }
    .input-busy.is-loading .input-busy-spinner { display: block; }
    .password-field { position: relative; display: block; }
    .password-field > input { width: 100%; padding-right: 44px; }
    .password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
    .password-toggle svg { width: 20px; height: 20px; display: block; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .password-toggle:hover svg { stroke: var(--tsi-dark); }
    .password-toggle:focus-visible { outline: 2px solid var(--tsi-blue); outline-offset: 2px; border-radius: 6px; }
    .password-field .icon-eye-off { display: none; }
    .password-field.show .icon-eye { display: none; }
    .password-field.show .icon-eye-off { display: block; }
    .req { color: #c62828; font-weight: 700; }
    .field input[type="date"] { cursor: pointer; }
    .field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
    .field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
    .mandatory-note { margin: 8px 0 0; color: #c62828; font-size: .82rem; font-weight: 700; }

    /* PAD e-signature agreement */
    .pad-agreement { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(0,30,65,.12); }
    .pad-recourse { margin: 0 0 18px; color: var(--text); font-size: .9rem; line-height: 1.6; }
    .pad-recourse a { color: var(--tsi-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
    .pad-consent { display: flex; justify-content: center; margin-bottom: 18px; }
    .radio-toggle { display: inline-flex; gap: 12px; }
    .radio-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .radio-toggle label { min-width: 88px; padding: 11px 22px; text-align: center; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 700; color: var(--tsi-dark); background: #fff; border: 1px solid rgba(0,30,65,.18); border-radius: 10px; box-shadow: 0 6px 14px rgba(0,30,65,.06); transition: background .15s ease, color .15s ease, border-color .15s ease; }
    .radio-toggle label:hover { background: var(--tsi-blue-tint); }
    .radio-toggle input:checked + label { background: var(--tsi-blue); color: #fff; border-color: var(--tsi-blue); }
    .radio-toggle input:focus-visible + label { outline: 2px solid var(--tsi-dark); outline-offset: 2px; }
    .payment-confirm { margin-top: 4px; }
    .confirm-list { max-width: 640px; margin: 0 0 20px; }
    .confirm-list div { grid-template-columns: 200px 1fr; }
    .confirm-list dt { white-space: nowrap; }
    .pad-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .confirm-actions { justify-content: flex-end; flex-wrap: nowrap; }
    .confirm-actions .cta, .confirm-actions .secondary-action { width: auto; min-width: 150px; height: 52px; font-size: 1rem; }
    .pad-actions a.secondary-action { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
    .pad-actions .pad-submit { width: auto; min-width: 168px; height: 52px; font-size: 1rem; }
    .pad-actions .pad-cancel { width: auto; min-width: 140px; height: 52px; font-size: 1rem; }
    .void-cheque { align-self: center; }
    .void-cheque img { display: block; width: 100%; height: auto; border: 1px solid rgba(0,30,65,.12); border-radius: 10px; box-shadow: 0 8px 18px rgba(0,30,65,.06); }

    @media (max-width: 980px) {
      .payment-layout { grid-template-columns: 1fr; }
      .payment-detail-grid { grid-template-columns: 1fr; }
      .void-cheque { max-width: 320px; }
    }

    @media (max-width: 560px) {
      .payment-tabs { grid-template-columns: 1fr; gap: 4px; }
      .payment-tab { min-height: 44px; border-radius: 8px; box-shadow: none; }
      .payment-tab.active { box-shadow: none; }
      .payment-tab-panels { padding: 16px; }
    }