/* assets/kslmw.css */

:root{
  --ksl-navy:#0b2a4a;
  --ksl-ink:#0f172a;
  --ksl-muted:#64748b;
  --ksl-line:#e5e7eb;
  --ksl-bg:#f8fafc;
  --ksl-cream:#fbf7ef;
  --ksl-gold:#b9904a;
  --r:16px;
}

.kslmw{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ksl-ink);}
.kslmw-shell{max-width:980px;margin:0 auto;background:#fff;border:1px solid var(--ksl-line);border-radius:24px;box-shadow:0 10px 30px rgba(15,23,42,.08);overflow:hidden}
.kslmw-top{padding:18px 18px 14px;background:linear-gradient(180deg,#fff, #fbfdff)}
@media (min-width:768px){.kslmw-top{padding:22px 26px 16px}}

.kslmw-brand{display:flex;gap:14px;align-items:flex-start}
.kslmw-mark{width:48px;height:48px;border-radius:16px;background:var(--ksl-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:.6px}
.kslmw-title{margin:0;font-size:20px;line-height:1.2}
.kslmw-subtitle{margin:6px 0 0;color:var(--ksl-muted);font-size:14px;line-height:1.35}

.kslmw-top-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.kslmw-hero-media{margin-top:12px;border-radius:18px;overflow:hidden;border:1px solid var(--ksl-line)}
.kslmw-hero-media img{width:100%;height:auto;display:block}

.kslmw-progress{margin-top:14px}
.kslmw-dots{display:flex;gap:10px;flex-wrap:wrap}
.kslmw-dot{appearance:none;border:1px solid var(--ksl-line);background:#fff;border-radius:999px;padding:8px 10px;display:flex;gap:10px;align-items:center;cursor:pointer}
.kslmw-dot span{width:26px;height:26px;border-radius:999px;background:#eef2ff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1e293b}
.kslmw-dot div{font-size:13px;color:#334155}
.kslmw-dot.is-on{border-color:rgba(11,42,74,.25);box-shadow:0 6px 16px rgba(11,42,74,.10)}
.kslmw-dot.is-on span{background:var(--ksl-navy);color:#fff}
.kslmw-dot.is-done span{background:#dcfce7;color:#166534}

.kslmw-bar{height:10px;border-radius:999px;background:#eef2f7;margin-top:10px;overflow:hidden}
.kslmw-fill{height:100%;background:var(--ksl-navy);border-radius:999px;transition:width .25s ease}

.kslmw-alert{margin:14px 18px 0;border-radius:14px;padding:12px 14px;border:1px solid var(--ksl-line)}
@media (min-width:768px){.kslmw-alert{margin-left:26px;margin-right:26px}}
.kslmw-alert-error{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
.kslmw-alert-ok{background:#ecfeff;border-color:#a5f3fc;color:#155e75}

.kslmw-steps{padding:18px}
@media (min-width:768px){.kslmw-steps{padding:22px 26px 26px}}
.kslmw-h3{margin:0 0 12px;font-size:18px}

.kslmw-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:768px){.kslmw-grid{grid-template-columns:1fr 1fr}}

.kslmw-label{font-size:13px;color:#334155;margin-bottom:6px;display:block}
.kslmw-input,.kslmw-textarea{width:100%;border:1px solid var(--ksl-line);border-radius:14px;padding:12px 12px;font-size:16px;background:#fff;outline:none}
.kslmw-input:focus,.kslmw-textarea:focus{border-color:rgba(11,42,74,.35);box-shadow:0 0 0 4px rgba(11,42,74,.08)}
.kslmw-textarea{resize:vertical}

.kslmw-device{margin-top:14px}
.kslmw-device-row{display:flex;gap:10px;flex-wrap:wrap}
.kslmw-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--ksl-line);border-radius:999px;padding:10px 12px;cursor:pointer;background:#fff}
.kslmw-chip input{margin:0}

.kslmw-block{margin-top:14px}
.kslmw-radio-row{display:flex;gap:10px;flex-wrap:wrap}
.kslmw-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--ksl-line);border-radius:999px;padding:10px 12px;cursor:pointer;background:#fff}
.kslmw-pill input{margin:0}

.kslmw-hint{color:var(--ksl-muted);font-size:13px;margin:8px 0 0}

.kslmw-nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px;align-items:center}
.kslmw-nav-left,.kslmw-nav-right{display:flex;gap:10px;flex-wrap:wrap}

.kslmw-btn{appearance:none;border:1px solid transparent;border-radius:14px;padding:12px 14px;font-weight:700;font-size:16px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.kslmw-btn:active{transform:translateY(1px)}
.kslmw-btn-primary{background:var(--ksl-navy);color:#fff}
.kslmw-btn-primary:hover{filter:brightness(.98)}
.kslmw-btn-ghost{background:#fff;border-color:var(--ksl-line);color:#0f172a}
.kslmw-btn-ghost:hover{background:#f8fafc}

.kslmw-token{margin-top:12px;border:1px solid var(--ksl-line);border-radius:18px;padding:12px;background:#fff}
.kslmw-token-row{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:768px){.kslmw-token-row{grid-template-columns:160px 1fr;align-items:center}}
.kslmw-token-found{margin-top:10px;color:#0f172a;background:#f1f5f9;border:1px solid var(--ksl-line);border-radius:14px;padding:10px;font-size:13px}

.kslmw-upload-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.kslmw-upload-grid{grid-template-columns:1fr 1fr}}

.kslmw-drop{border:1px solid var(--ksl-line);border-radius:22px;background:#fff;overflow:hidden}
.kslmw-drop-alt{border-color:rgba(185,144,74,.45);background:var(--ksl-cream)}
.kslmw-drop-head{padding:14px 14px 0}
.kslmw-drop-title{font-weight:800}
.kslmw-drop-sub{color:var(--ksl-muted);font-size:13px;margin-top:4px}

.kslmw-drop-box{margin:12px 14px 14px;border:2px dashed #cbd5e1;border-radius:20px;padding:14px;background:rgba(248,250,252,.7);text-align:center}
.kslmw-drop-alt .kslmw-drop-box{border-color:rgba(185,144,74,.55);background:rgba(251,247,239,.85)}
.kslmw-drop-box.is-drag{border-color:rgba(11,42,74,.55);box-shadow:0 0 0 4px rgba(11,42,74,.08)}
.kslmw-drop-cta{font-weight:800}
.kslmw-drop-or{color:var(--ksl-muted);margin-top:6px}

.kslmw-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}

/* iOS/Safari-friendly file inputs: invisible overlay on the button */
.kslmw-filebtn{position:relative;overflow:hidden;min-height:46px;min-width:170px}
.kslmw-hidden-input{
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;
  height:100%;
  cursor:pointer;
  font-size:16px; /* helps avoid iOS zoom quirks */
}

.kslmw-thumbs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.kslmw-thumb{width:150px;border:1px solid var(--ksl-line);border-radius:18px;background:#fff;padding:10px;display:flex;flex-direction:column;gap:8px}
.kslmw-thumb-img{width:100%;height:110px;border-radius:14px;overflow:hidden;border:1px solid var(--ksl-line);background:#f8fafc;display:flex;align-items:center;justify-content:center}
.kslmw-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kslmw-pdf{font-weight:800;color:#334155}
.kslmw-thumb-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#475569}
.kslmw-thumb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:95px}
.kslmw-thumb-del{appearance:none;border:1px solid #fecaca;background:#fff1f2;color:#991b1b;border-radius:12px;padding:10px;font-weight:800;cursor:pointer}

.kslmw-meter{margin-top:16px;border:1px solid var(--ksl-line);border-radius:18px;padding:12px;background:#fff}
.kslmw-meter-row{display:flex;justify-content:space-between;gap:12px;color:#334155;font-size:13px}
.kslmw-meter-bar{height:10px;border-radius:999px;background:#eef2f7;margin-top:10px;overflow:hidden}
.kslmw-meter-fill{height:100%;width:0;background:var(--ksl-navy);border-radius:999px;transition:width .2s ease}

.kslmw-hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}

/* Overlay */
.kslmw-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:18px}
.kslmw-overlay-box{background:#fff;border-radius:22px;border:1px solid var(--ksl-line);padding:18px 18px;text-align:center;max-width:360px;width:100%}
.kslmw-spin{width:42px;height:42px;border-radius:999px;border:4px solid #e2e8f0;border-top-color:var(--ksl-navy);margin:0 auto 12px;animation:kslmwspin 1s linear infinite}
@keyframes kslmwspin{to{transform:rotate(360deg)}}
.kslmw-overlay-title{font-weight:800}
.kslmw-overlay-sub{color:var(--ksl-muted);margin-top:6px}
.kslmw-overlay-timer{color:#334155;margin-top:10px;font-size:13px}

.kslmw-thanks{text-align:center;padding:22px}
.kslmw-thanks h3{margin:0 0 8px}
.kslmw-thanks p{margin:0;color:var(--ksl-muted)}