/* KL Coloring Pages. Everything is scoped to .klcp / .klcp-dialog. */

.klcp{--klcp-accent:#1a1a1a;--klcp-accent-text:#fff;--klcp-gap:22px;font:inherit;color:inherit}
.klcp *,.klcp *::before,.klcp *::after{box-sizing:border-box}
.klcp-heading{margin:0 0 18px}
.klcp-empty{padding:24px;text-align:center;opacity:.75}

/* welcome-back bar */
.klcp .klcp-bar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;padding:12px 16px;margin:0 0 20px;border:1px solid rgba(0,0,0,.14);border-radius:10px;background:rgba(0,0,0,.035);font-size:.95em}
.klcp .klcp-bar[hidden]{display:none}
.klcp .klcp-link,.klcp-dialog .klcp-link{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal;min-height:0}

/* grid: fills the width automatically, or capped with columns="n" */
.klcp .klcp-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--klcp-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.klcp .klcp-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.klcp .klcp-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.klcp .klcp-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.klcp .klcp-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.klcp .klcp-cols-5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.klcp .klcp-cols-4,.klcp .klcp-cols-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.klcp .klcp-cols-3,.klcp .klcp-cols-4,.klcp .klcp-cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.klcp .klcp-grid{grid-template-columns:minmax(0,1fr)}}

.klcp .klcp-card{margin:0;padding:0;display:flex;flex-direction:column;gap:10px;list-style:none}
.klcp .klcp-img{position:relative;width:100%;aspect-ratio:1/1;background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:10px;overflow:hidden}
.klcp .klcp-img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;display:block;margin:0;border:0;border-radius:0}
.klcp .klcp-fit-cover .klcp-img img{object-fit:cover}
.klcp .klcp-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;color:#666;font-weight:600}
.klcp .klcp-title{margin:0;font-size:1.05em;font-weight:600;line-height:1.3;text-transform:none;letter-spacing:normal}
.klcp .klcp-desc{margin:0;font-size:.92em;line-height:1.45;opacity:.8}
.klcp .klcp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}

.klcp a.klcp-btn{display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:44px;padding:.55em 1.1em;border:2px solid var(--klcp-accent);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:.95em;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;text-transform:none;letter-spacing:normal;box-shadow:none;cursor:pointer;transition:background-color .15s,color .15s}
.klcp a.klcp-btn:hover{background:rgba(0,0,0,.06)}
.klcp a.klcp-btn.klcp-btn-primary{background:var(--klcp-accent);color:var(--klcp-accent-text)}
.klcp a.klcp-btn.klcp-btn-primary:hover{filter:brightness(1.18)}
.klcp a.klcp-btn:focus-visible,.klcp .klcp-link:focus-visible{outline:3px solid #2271b1;outline-offset:2px}

/* sign-up dialog (appended to <body>, so it carries its own colors) */
.klcp-dialog{--klcp-accent:#1a1a1a;--klcp-accent-text:#fff;border:0;border-radius:14px;padding:0;width:calc(100% - 24px);max-width:440px;background:#fff;color:#111;box-shadow:0 24px 70px rgba(0,0,0,.4);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.klcp-dialog::backdrop{background:rgba(0,0,0,.6)}
.klcp-dialog *,.klcp-dialog *::before,.klcp-dialog *::after{box-sizing:border-box}
.klcp-dialog-inner{position:relative;padding:28px 24px 22px}
.klcp-dialog .klcp-x{position:absolute;top:6px;right:8px;width:44px;height:44px;border:0;background:none;color:#555;font-size:28px;line-height:1;cursor:pointer;border-radius:8px;padding:0;box-shadow:none}
.klcp-dialog .klcp-x:hover{background:rgba(0,0,0,.06)}
.klcp-dialog .klcp-h{margin:0 36px 8px 0;font-size:1.4rem;line-height:1.2;color:#111;font-weight:700;text-transform:none;letter-spacing:normal}
.klcp-dialog .klcp-intro{margin:0 0 16px;color:#444}
.klcp-dialog .klcp-msg{margin:0 0 12px;min-height:0;color:#b32d2e;font-size:.95rem}
.klcp-dialog .klcp-msg:empty{display:none}
.klcp-dialog .klcp-msg-ok{color:#007017}
.klcp-dialog form[hidden],.klcp-dialog [hidden]{display:none!important}
.klcp-dialog label{display:block;margin:0 0 12px;font-size:.9rem;font-weight:600;color:#222}
.klcp-dialog input[type=text],.klcp-dialog input[type=email]{display:block;width:100%;margin:4px 0 0;padding:12px;border:1px solid #8c8f94;border-radius:8px;background:#fff;color:#111;font:inherit;font-size:16px;font-weight:400;line-height:1.3;box-shadow:none;height:auto}
.klcp-dialog input:focus-visible{outline:3px solid #2271b1;outline-offset:1px}
.klcp-dialog .klcp-two{display:grid;gap:0 12px;grid-template-columns:1fr}
@media (min-width:420px){.klcp-dialog .klcp-two{grid-template-columns:1fr 1fr}}
.klcp-dialog .klcp-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.klcp-dialog .klcp-check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.9rem}
.klcp-dialog .klcp-check input{margin-top:3px;flex:none;width:18px;height:18px}
.klcp-dialog .klcp-codebox{text-align:center;font-size:28px!important;letter-spacing:.4em;font-weight:700!important;padding-left:.8em!important}
.klcp-dialog .klcp-captcha{margin:0 0 4px}
.klcp-dialog .klcp-submit{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:6px 0 0;padding:.7em 1em;border:0;border-radius:8px;background:var(--klcp-accent);color:var(--klcp-accent-text);font:inherit;font-weight:700;text-decoration:none;text-transform:none;letter-spacing:normal;cursor:pointer;box-shadow:none}
.klcp-dialog .klcp-submit:hover{filter:brightness(1.18)}
.klcp-dialog .klcp-submit:disabled{opacity:.6;cursor:wait;filter:none}
.klcp-dialog .klcp-submit:focus-visible{outline:3px solid #2271b1;outline-offset:2px}
.klcp-dialog .klcp-link:disabled{opacity:.55;cursor:default;text-decoration:none}
.klcp-dialog .klcp-notice{margin:12px 0 0;font-size:.8rem;line-height:1.4;color:#555}
.klcp-dialog .klcp-alt{margin:14px 0 0;text-align:center;font-size:.9rem;color:#444}
.klcp-dialog .klcp-sent{margin:0 0 12px;color:#333}
.klcp-dialog .klcp-done-title{margin:0 0 6px;font-size:1.3rem;font-weight:700}

@media (prefers-reduced-motion:reduce){.klcp a.klcp-btn{transition:none}}