/* ============================================================================
   PAYATE — Luhn Checker & Masking (2026). Self-contained; shared header/footer
   are injected by the site chrome and not styled here.
   ============================================================================ */
#lchk{
  --brand:#1d64d8; --brand-d:#1a59c1; --ink:#14233c; --ink-2:#4a5b73; --muted:#7c8aa4;
  --line:#e3e9f2; --field-line:#d5dfec; --card:#fff; --ok:#1f9d55; --bad:#d84a4a;
  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); }
#lchk *, #lchk *::before, #lchk *::after{ box-sizing:border-box; }
#lchk .container{ width:100%; max-width:960px; margin:0 auto; padding:0 15px; }

#lchk .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); }
#lchk .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); }
#lchk .tool-banner-icon svg{ width:24px; height:24px; display:block; }
#lchk .tool-banner-title{ margin:0 0 4px; font-weight:700; font-size:20px; line-height:1.2; color:#4d629eba; }
#lchk .tool-banner-desc{ margin:0; font-weight:500; font-size:14.5px; line-height:1.4; color:#4d629ee6; }

#lchk .ad-strip{ text-align:center; padding:14px 0; }
#lchk .lc-note{ font-size:13px; line-height:1.7; color:var(--ink-2); background:#f2f7ff; border:1px solid #cfe0fb; border-radius:10px; padding:11px 13px; margin-bottom:14px; }
#lchk .lc-alert{ border-radius:10px; padding:11px 13px; margin-bottom:14px; font-size:13.5px; font-weight:500; }
#lchk .lc-alert--err{ background:#fdecec; border:1px solid #f5c2c5; color:#a3232b; }

#lchk .lc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:760px){ #lchk .lc-grid{ grid-template-columns:1fr; } }
#lchk .lc-card{ background:var(--card); border:1px solid #e6ecf5; border-radius:14px; padding:18px; box-shadow:0 1px 2px rgba(15,27,45,.05), 0 18px 40px -30px rgba(15,27,45,.5); }
#lchk .lc-h{ margin:0 0 4px; font-size:17px; font-weight:700; color:var(--ink); }
#lchk .lc-h3{ margin:18px 0 8px; font-size:14px; font-weight:600; color:var(--ink); }
#lchk .lc-p{ margin:0 0 12px; font-size:13px; line-height:1.6; color:var(--muted); }
#lchk .lc-p code, #lchk .lc-faq-a code{ background:#eef2f8; border-radius:5px; padding:1px 6px; font-size:12px; color:var(--brand-d); }
#lchk .lc-label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }

#lchk .lc-row{ display:flex; gap:8px; }
#lchk .lc-input{ flex:1; height:44px; border:1px solid var(--field-line); border-radius:10px; padding:0 13px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; color:#24344c; background:#fff; letter-spacing:.04em; }
#lchk .lc-input:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(29,100,216,.15); }
#lchk .lc-area{ width:100%; height:108px; resize:vertical; border:1px solid var(--field-line); border-radius:10px; padding:11px 13px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; line-height:1.7; color:#24344c; background:#fff; }
#lchk .lc-area:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(29,100,216,.15); }
#lchk .lc-actions{ margin-top:10px; }

#lchk .lc-btn{ height:44px; 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; }
#lchk .lc-btn:hover{ background:linear-gradient(180deg,#2569db 0%,var(--brand-d) 100%); transform:translateY(-1px); }
#lchk .lc-btn--ghost{ color:var(--brand); background:#fff; border:1px solid #cfe0fb; box-shadow:none; }
#lchk .lc-btn--ghost:hover{ background:#f2f7ff; transform:none; }
#lchk #lcExport{ margin-top:12px; }

#lchk .lc-results{ margin-top:6px; display:flex; flex-direction:column; gap:8px; }
#lchk .lc-empty{ font-size:13px; color:var(--muted); text-align:center; padding:10px 0; margin:0; }
#lchk .lc-res{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 12px; border:1px solid #e6ecf5; border-radius:10px; background:#fbfcfe; font-size:13px; }
#lchk .lc-res--ok{ border-color:#c7ecd6; background:#f2fbf6; }
#lchk .lc-res--bad{ border-color:#f5cfd2; background:#fdf4f4; }
#lchk .lc-res--mask{ border-color:#d7e3f5; background:#f5f8fd; }
#lchk .lc-res__num{ font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.04em; color:var(--ink); }
#lchk .lc-res__brand{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); }
#lchk .lc-res__tag{ margin-left:auto; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:999px; color:#fff; background:var(--muted); }
#lchk .lc-res--ok .lc-res__tag{ background:var(--ok); }
#lchk .lc-res--bad .lc-res__tag{ background:var(--bad); }
#lchk .lc-res--mask .lc-res__tag{ background:var(--brand); }

#lchk .lc-info{ background:var(--card); border:1px solid #e6ecf5; border-radius:14px; padding:22px; margin:16px 0; box-shadow:0 1px 2px rgba(15,27,45,.05); }
#lchk .lc-info h2{ margin:0 0 10px; font-size:19px; color:var(--ink); }
#lchk .lc-info h3{ margin:18px 0 8px; font-size:15px; color:var(--ink); }
#lchk .lc-info p{ margin:0 0 10px; font-size:14px; line-height:1.7; color:var(--ink-2); }
#lchk .lc-table{ width:100%; border-collapse:collapse; font-size:13.5px; margin:6px 0; }
#lchk .lc-table th, #lchk .lc-table td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); }
#lchk .lc-table th{ color:var(--muted); font-weight:600; font-size:12.5px; }
#lchk .lc-table td:first-child{ display:flex; align-items:center; gap:8px; color:var(--ink); }
#lchk .lc-table td:last-child{ font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--ink-2); }
#lchk .lc-list{ margin:0; padding-left:20px; } #lchk .lc-list li{ font-size:14px; line-height:1.8; color:var(--ink-2); }

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

.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){ #lchk .lc-input, #lchk .lc-area{ font-size:16px; } }