/* ============================================================================
   PAYATE — Card Validator (2026). Self-contained; shared header/footer not styled.
   ============================================================================ */
#cval{
  --brand:#1d64d8; --brand-d:#1a59c1; --ink:#14233c; --ink-2:#4a5b73; --muted:#7c8aa4;
  --line:#e3e9f2; --field-line:#d5dfec; --card:#fff;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:var(--ink);
}
body{ background:radial-gradient(1100px 480px at 50% -8%, #eaf1fd 0%, rgba(234,241,253,0) 60%), #f4f6fb; color:var(--ink); }
#cval *, #cval *::before, #cval *::after{ box-sizing:border-box; }
#cval .container{ width:100%; max-width:820px; margin:0 auto; padding:0 15px; }

#cval .tool-banner{ display:flex; align-items:center; gap:16px; padding:16px; margin:28px 0 6px; background:var(--card); border-radius:8px; box-shadow:0 .125rem .25rem rgba(0,0,0,.075); }
#cval .tool-banner-icon{ width:48px; height:48px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:linear-gradient(135deg,#2a72e6 0%,#1a59c1 100%); color:#fff; box-shadow:0 6px 14px -6px rgba(29,100,216,.7); }
#cval .tool-banner-icon svg{ width:24px; height:24px; display:block; }
#cval .tool-banner-text{ line-height:1; }
#cval .tool-banner-title{ margin:0 0 4px; font-weight:700; font-size:20px; line-height:1.2; color:#4d629eba; }
#cval .tool-banner-desc{ margin:0; font-weight:600; font-size:16px; line-height:1.35; color:#4d629ee6; }

#cval .panel{ background:var(--card); border:1px solid #e6ecf5; border-radius:14px; padding:20px 18px; margin:18px 0 6px; box-shadow:0 1px 2px rgba(15,27,45,.05), 0 18px 40px -30px rgba(15,27,45,.5); }
#cval .cv-note{ font-size:13px; line-height:1.7; color:#4a5b73; background:#f2f7ff; border:1px solid #cfe0fb; border-radius:10px; padding:11px 13px; margin-bottom:14px; }
#cval .cv-label{ display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
#cval .cv-input{ width:100%; height:150px; resize:vertical; border:1px solid var(--field-line); border-radius:10px; padding:11px 13px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.7; color:#24344c; background:#fff; }
#cval .cv-input:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(29,100,216,.15); }

#cval .cv-actions{ display:flex; align-items:center; gap:10px; margin-top:12px; }
#cval .btn{ height:42px; padding:0 22px; border:0; border-radius:10px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; color:#fff; background:linear-gradient(180deg,#2a72e6 0%,var(--brand) 100%); box-shadow:0 8px 18px -8px rgba(29,100,216,.6); transition:background .15s,transform .15s; }
#cval .btn:hover{ background:linear-gradient(180deg,#2569db 0%,var(--brand-d) 100%); transform:translateY(-1px); }
#cval .btn:disabled{ opacity:.6; cursor:default; transform:none; }
#cval .btn-ghost{ color:var(--brand); background:#fff; border:1px solid #cfe0fb; box-shadow:none; }
#cval .btn-ghost:hover{ background:#f2f7ff; transform:none; }
#cval .cv-count{ margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:500; }

#cval .cv-results{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px; }
#cval .cv-group{ border:1px solid #e6ecf5; border-radius:12px; overflow:hidden; background:#fff; }
#cval .cv-group__head{ display:flex; align-items:center; gap:8px; padding:10px 14px; font-weight:600; font-size:14px; }
#cval .cv-group--valid .cv-group__head{ background:#eafaf0; color:#1f7a44; }
#cval .cv-group--invalid .cv-group__head{ background:#fdecec; color:#a3232b; }
#cval .cv-badge{ margin-left:auto; min-width:24px; text-align:center; padding:1px 9px; border-radius:999px; font-size:12px; color:#fff; }
#cval .cv-badge--valid{ background:#1f9d55; } #cval .cv-badge--invalid{ background:#d84a4a; }
#cval .cv-group__body{ padding:4px 0; }
#cval .cv-group__body:empty{ display:none; }
#cval .cv-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:8px 14px; border-bottom:1px solid #f0f3f8; }
#cval .cv-row:last-child{ border-bottom:0; }
#cval .cv-row__num{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13.5px; letter-spacing:.04em; color:var(--ink); }
#cval .cv-row__meta{ font-size:12.5px; color:var(--muted); }

#cval .ad-strip{ text-align:center; padding:16px 0; }
#cval .info{ background:var(--card); border:1px solid #e6ecf5; border-radius:14px; padding:22px; margin:18px 0; box-shadow:0 1px 2px rgba(15,27,45,.05); }
#cval .info h2{ margin:0 0 10px; font-size:19px; color:var(--ink); }
#cval .info h3{ margin:18px 0 8px; font-size:15.5px; color:var(--ink); }
#cval .info p{ margin:0 0 10px; font-size:14px; line-height:1.7; color:var(--ink-2); }
#cval .info a{ color:var(--brand); text-decoration:none; } #cval .info a:hover{ text-decoration:underline; }

#cval .faq h2{ margin-bottom:6px; }
#cval .faq details{ border-bottom:1px solid var(--line); padding:2px 0; }
#cval .faq details:last-child{ border-bottom:0; }
#cval .faq summary{ cursor:pointer; list-style:none; padding:12px 26px 12px 2px; position:relative; font-weight:600; font-size:14.5px; color:var(--ink); }
#cval .faq summary::-webkit-details-marker{ display:none; }
#cval .faq summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:18px; font-weight:400; color:var(--muted); transition:transform .15s; }
#cval .faq details[open] summary::after{ content:"\2212"; }
#cval .faq details p{ margin:0 2px 12px; font-size:13.5px; }

.add_right, .add_left{ display:none; }
@media (min-width:1750px){ .add_right{ display:block; position:fixed; bottom:20%; right:20px; z-index:50; } .add_left{ display:block; position:fixed; bottom:20%; left:20px; z-index:50; } }
@media (pointer:coarse){ #cval .cv-input{ font-size:16px; } }
@media (max-width:560px){ #cval .tool-banner-title{ font-size:18px; } #cval .tool-banner-desc{ font-size:14.5px; } }