/*
 * assets/sk-login/sk-login.css - NEW login pages (login-new, otp-verify-new,
 * reset-password-new). Designs L1-L5 = class on <body>. No Bootstrap.
 * Light only on purpose: the portal has no dark mode.
 */
:root{
	--green:#003c30; --green-2:#0b4a3d; --green-3:#26594f; --green-soft:#e3ece9; --green-ink:#d7e5e0; --green-mute:#a9c4bc;
	--amber:#f0b01e; --amber-ink:#1a1a1a;
	--ink:#1a1a1a; --ink-2:#545454; --ink-3:#8a8580;
	--cream:#f2eeeb; --card:#ffffff; --line:#e4ded8; --line-2:#f0ebe6;
	--crit:#b42318; --crit-soft:#fbe7e4; --good:#1f7a4a; --good-soft:#e3f2e8; --info:#1d4f91; --info-soft:#e7eef9; --warn:#9a5b00;
	--font:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
	--shadow:0 1px 2px rgba(0,60,48,.05),0 12px 36px rgba(0,60,48,.10);
	color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.skl{background:var(--cream);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* zero-specificity resets (:where) so .go, .lnk, .ghost etc. always win */
:where(.skl) a{color:inherit}
:where(.skl) button{font:inherit;color:inherit}
[hidden]{display:none !important}

.screen{position:relative;min-height:100vh;display:flex}
.side{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px max(20px,env(safe-area-inset-right,0px)) 64px max(20px,env(safe-area-inset-left,0px));min-width:0}
.logo{display:inline-block;line-height:0}
.logo img{display:block;height:46px;width:auto;max-width:100%}
.logo .dk{display:none}

/* ---------- card ---------- */
.card{width:100%;max-width:430px;background:var(--card);border-radius:18px;padding:34px 34px 26px}
.card h1{margin:0 0 4px;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--green);text-wrap:balance}
.card .lead{margin:0 0 22px;font-size:14px;color:var(--ink-2)}
.amz a{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:12px;border:1.5px solid var(--line);font-weight:700;color:var(--ink);text-decoration:none;background:#fff}
.amz a:hover{border-color:var(--ink-3)}
.amz a b{font-weight:800;color:#e47911;font-size:16px;letter-spacing:-.02em}
.or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--ink-3);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.msgs:empty{display:none}
.msgs{display:grid;gap:8px;margin-bottom:16px}
.msg{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.45}
.msg svg{width:18px;height:18px;flex:none;margin-top:1px}
.msg.err{background:var(--crit-soft);color:var(--crit)}
.msg.ok{background:var(--good-soft);color:var(--good)}
.msg.info{background:var(--info-soft);color:var(--info)}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:700;color:var(--ink)}
.field .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lnk{font-size:13px;font-weight:600;color:var(--green-3);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.lnk:hover{text-decoration:underline}
.inp{position:relative}
.inp input{width:100%;height:48px;border-radius:12px;border:1.5px solid var(--line);background:#fff;padding:0 14px 0 42px;font:inherit;font-size:15px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.inp input:focus{border-color:var(--green-3);box-shadow:0 0 0 4px rgba(38,89,79,.14)}
.inp input[aria-invalid="true"]{border-color:var(--crit)}
.inp input.code{letter-spacing:.5em;font-weight:700;font-size:20px;text-align:center;padding-left:14px}
.inp input[type=password]{padding-right:70px}
.inp > svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--ink-3);pointer-events:none}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:36px;padding:0 10px;border:0;background:transparent;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--green-3) !important;cursor:pointer}
.eye:hover{background:var(--line-2)}
.hint{display:none;font-size:12.5px;font-weight:600;color:var(--warn)}
.hint.on{display:block}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);margin:2px 0 14px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--green-3);margin:0}
.go{width:100%;height:50px;margin-top:6px;border:0;border-radius:12px;background:var(--amber);color:var(--amber-ink) !important;font-size:15.5px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none}
.go:hover{filter:brightness(1.05)}
.go[aria-busy="true"]{cursor:progress;filter:saturate(.7)}
.spin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(26,26,26,.25);border-top-color:var(--amber-ink);animation:skl-sp .8s linear infinite;display:none}
.go[aria-busy="true"] .spin{display:block}
@keyframes skl-sp{to{transform:rotate(360deg)}}
.go:focus-visible,.ghost:focus-visible,.eye:focus-visible,.lnk:focus-visible,.inp input:focus-visible,.store:focus-visible,.amz a:focus-visible,.links a:focus-visible{outline:2px solid var(--green-3);outline-offset:2px}
.btns{display:flex;gap:10px;margin-top:6px}
.btns .go{margin-top:0;flex:1}
.ghost{height:50px;padding:0 20px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-weight:700;cursor:pointer}
.ghost:hover{border-color:var(--ink-3)}
.new{margin:18px 0 0;text-align:center;font-size:13.5px;color:var(--ink-3)}
.new a{color:var(--green);font-weight:700;text-decoration:none}
.new a:hover{text-decoration:underline}
.split{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.stores{border-top:1px solid var(--line-2);margin-top:18px;padding-top:14px;display:grid;gap:10px}
.stores h2{margin:0;font-size:13px;color:var(--ink-2);font-weight:700}
.stores div{display:flex;gap:10px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;background:#111;color:#fff !important;text-decoration:none;font-size:12px;line-height:1.1}
.store b{display:block;font-size:14px}
.secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px 0 0;font-size:12px;color:var(--ink-3)}
.secure svg{width:14px;height:14px}
.copy{margin:0;font-size:12.5px;color:var(--ink-3);text-align:center}
.links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:12.5px;margin-top:-16px}
.links a{color:var(--ink-3);text-decoration:none}
.links a:hover{text-decoration:underline}

/* ---------- brand panel (L2, L4, L5) ---------- */
.brand{display:none}
.brand h2{margin:0;font-size:31px;line-height:1.2;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.brand p{margin:0;font-size:15px;line-height:1.6}
.brand-main{display:grid;gap:18px;position:relative;z-index:1}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px}
.facts{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.facts li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.facts li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.news-h{display:none}
.news{display:none;gap:10px}
.news article{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.news .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green-3);background:var(--green-soft);border-radius:6px;padding:2px 8px;margin-bottom:6px}
.news h3{margin:0 0 3px;font-size:15px;color:var(--green)}
.news p{font-size:13px;color:var(--ink-2)}
.bcopy{font-size:12.5px;position:relative;z-index:1}

/* ====== L1 Centred card on cream ====== */
.L1 .card{box-shadow:var(--shadow)}

/* ====== L2 Split: green brand panel left ====== */
.L2 .brand,.L5 .brand{display:flex;flex-direction:column;justify-content:space-between;gap:28px;width:46%;max-width:580px;background:var(--green);color:#fff;padding:44px 48px;position:relative;overflow:hidden}
.L2 .brand::after,.L5 .brand::after{content:"";position:absolute;right:-120px;bottom:-140px;width:420px;height:420px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 90 27v46L50 96 10 73V27z' fill='none' stroke='%23f0b01e' stroke-opacity='.2' stroke-width='3'/%3E%3Cpath d='M50 24 72 37v26L50 76 28 63V37z' fill='none' stroke='%23f0b01e' stroke-opacity='.12' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.L2 .brand > *,.L5 .brand > *{position:relative;z-index:1}
.L2 .brand .logo .lt,.L5 .brand .logo .lt{display:none}
.L2 .brand .logo .dk,.L5 .brand .logo .dk{display:block}
.L2 .brand p,.L5 .brand p{color:var(--green-ink)}
.L2 .brand .chips span,.L5 .brand .chips span{background:var(--green-2);color:#fff;border:1px solid var(--green-3)}
.L2 .brand .facts li{color:var(--green-ink)}
.L2 .side,.L5 .side,.L4 .side{background:var(--card)}
.L2 .side > .logo,.L5 .side > .logo{display:none}
.L2 .card,.L5 .card{padding-inline:12px}

/* ====== L3 Green with hexagon pattern ====== */
.L3{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='97' viewBox='0 0 84 97'%3E%3Cpath d='M42 1.5 82.5 25v47L42 95.5 1.5 72V25z' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.5'/%3E%3C/svg%3E") repeat !important}
.L3 .side > .logo .lt{display:none}
.L3 .side > .logo .dk{display:block}
.L3 .card{box-shadow:0 24px 60px rgba(0,0,0,.28);border-top:5px solid var(--amber)}
.L3 .copy,.L3 .links a{color:var(--green-mute)}

/* ====== L4 Form left, "What's new" right ====== */
.L4 .screen{flex-direction:row}
.L4 .side{align-items:flex-start;padding-left:7%;padding-right:7%}
.L4 .side > .logo{margin-bottom:auto}
.L4 .card{padding:0;max-width:410px;margin-block:20px}
.L4 .copy{margin-top:auto;text-align:left}
.L4 .links{justify-content:flex-start}
.L4 .brand{display:flex;flex-direction:column;justify-content:center;gap:16px;width:44%;max-width:540px;background:var(--cream);padding:44px;border-left:1px solid var(--line);order:2}
.L4 .brand .logo,.L4 .brand .brand-main,.L4 .brand .bcopy{display:none}
.L4 .brand .news-h{display:block;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.L4 .brand .news{display:grid}

/* ====== L5 Split brand panel + what's new ====== */
.L5 .brand h2{font-size:28px}
.L5 .brand .facts,.L5 .brand .bcopy{display:none}
.L5 .brand .news-h{display:block;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--amber);margin-bottom:-14px}
.L5 .brand .news{display:grid}
.L5 .brand .news article{background:rgba(255,255,255,.06);border:1px solid var(--green-3)}
.L5 .brand .news .tag{background:var(--amber);color:var(--amber-ink)}
.L5 .brand .news h3{color:#fff}
.L5 .brand .news p{color:var(--green-ink);font-size:13px}

/* ---------- narrow screens: split designs drop the panel ---------- */
@media (max-width:900px){
	.L2 .brand,.L4 .brand,.L5 .brand{display:none}
	.L2 .side > .logo,.L5 .side > .logo{display:inline-block}
	.L4 .side{align-items:center}
	.L4 .copy{text-align:center}
	.L4 .links{justify-content:center}
}
@media (max-width:480px){
	.card{padding:26px 20px 22px}
	.L2 .card,.L4 .card,.L5 .card{padding-inline:0}
	.btns{flex-direction:column-reverse}
	.btns .ghost{width:100%}
}
@media (prefers-reduced-motion:reduce){ .inp input{transition:none} .spin{animation:none} }

/* ---------- design preview bar (user 1 only) ---------- */
.skl-pv{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;background:#fff8e1;border-bottom:1px solid #f0d78a;padding:8px max(16px,env(safe-area-inset-left,0px));font-size:12.5px;color:var(--ink)}
.skl-pv-lbl{font-weight:800;color:var(--green)}
.skl-pv-lbl em{font-style:normal;font-weight:500;color:var(--ink-3)}
.skl-pv-grp{display:inline-flex;flex-wrap:wrap;gap:4px}
.skl-pv button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer;line-height:1.4}
.skl-pv button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.skl-pv button:focus-visible,.skl-pv a:focus-visible{outline:2px solid var(--green-3);outline-offset:2px}
.skl-pv-pub{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.skl-pv-live b{color:var(--green)}
.skl-pv button.pub{background:var(--amber);border-color:var(--amber);color:var(--amber-ink);font-weight:800}
.skl-pv button.pub[aria-disabled="true"]{background:#fff;border-color:var(--line);color:var(--ink-3);cursor:default;font-weight:600}
.skl-pv-back{font-weight:700;color:var(--green);text-decoration:underline}
.skl-pv ~ .screen{min-height:calc(100vh - 46px)}

/* browser autofill: keep the boxes white instead of the browser's blue */
.inp input:-webkit-autofill,.inp input:-webkit-autofill:hover,.inp input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 9999s}
.inp input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset,0 0 0 4px rgba(38,89,79,.14)}

/* ---------- signup ---------- */
.skl.wide .card{max-width:540px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:480px){ .two{grid-template-columns:1fr} }
.inp.plain input,.inp select,.inp textarea{padding-left:14px}
.inp select,.inp textarea{width:100%;border-radius:12px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:15px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.inp select{height:48px;padding-right:12px}
.inp textarea{min-height:76px;padding:12px 14px;resize:vertical}
.inp select:focus,.inp textarea:focus{border-color:var(--green-3);box-shadow:0 0 0 4px rgba(38,89,79,.14)}
.opt{font-weight:500;color:var(--ink-3);font-size:12px}
.fhelp{font-size:12.5px;color:var(--ink-3)}
.ferr{font-size:12.5px;font-weight:600;color:var(--crit)}
.ferr:empty{display:none}
.meter{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-3)}
.meter .bar{flex:1;height:5px;border-radius:3px;background:var(--line-2);overflow:hidden}
.meter .bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--crit);transition:width .2s,background-color .2s}
.meter[data-level="2"] .bar i{background:var(--warn)}
.meter[data-level="3"] .bar i{background:var(--good)}
.suggest{font-size:12.5px;font-weight:700;color:var(--green-3) !important;background:none;border:0;padding:0;cursor:pointer;justify-self:start}
.suggest:hover{text-decoration:underline}
.terms{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);margin:4px 0 12px;cursor:pointer}
.terms input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--green-3);flex:none}
.terms a{color:var(--green);font-weight:700}
.go:disabled{opacity:.55;cursor:not-allowed;filter:none}
.done-hero{text-align:center;display:grid;gap:10px;justify-items:center}
.done-hero .tick{width:56px;height:56px;border-radius:50%;background:var(--good-soft);color:var(--good);display:grid;place-items:center}
.done-hero .tick svg{width:28px;height:28px}