/* Stonel — sign-in / sign-up pages. Standalone (no framework), tiny, fast. */
:root{--brand:#1f6b45;--brand-2:#2d8659;--soft:#e4f1ea;--bg:#f5f7f6;--card:#fff;--text:#14201a;--muted:#617068;--border:#d9e1dd;--danger:#c0344f;--danger-bg:#fde8ec;--ok-bg:#e4f1ea}
@media (prefers-color-scheme:dark){:root{--brand:#3aa270;--brand-2:#4cb783;--soft:#15291f;--bg:#0b130f;--card:#111c16;--text:#e6efe9;--muted:#9bada3;--border:#25362d;--danger:#ff6b86;--danger-bg:#3a1620;--ok-bg:#15291f}}
*{box-sizing:border-box}html,body{margin:0}
body{font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.wrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.hero{background:linear-gradient(155deg,#0e1b15,#16402c 70%,#1f6b45);color:#cfe0d6;padding:44px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.hero img.logo{height:64px;width:auto;align-self:flex-start;filter:brightness(0) invert(1)}
.hero h1{margin:0 0 12px;font-size:32px;line-height:1.2;color:#fff;max-width:440px}.hero p{max-width:440px;margin:0;color:#b3c8bb}
.hero ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;max-width:440px}.hero li{display:flex;gap:12px;align-items:flex-start;color:#d4e4da}
.hero li i{flex:none;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px}
.hero small{color:#7f9388}
.panel{display:flex;align-items:center;justify-content:center;padding:28px 20px}
.box{width:100%;max-width:440px}
.box .mobile-logo{display:none;height:48px;margin-bottom:18px}
h2{margin:0 0 4px;font-size:25px}.sub{margin:0 0 22px;color:var(--muted)}
.field{margin-bottom:15px}.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}.field .hint{font-size:12px;color:var(--muted);margin-top:5px}
.input,select.input{width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font:inherit;outline:none;transition:border-color .12s,box-shadow .12s}
.input:focus{border-color:var(--brand-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-2) 18%,transparent)}
.input.bad{border-color:var(--danger)}.err{color:var(--danger);font-size:12.5px;margin-top:5px;min-height:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pw{position:relative}.pw .toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);font-weight:600;font-size:12.5px;cursor:pointer;padding:6px 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 18px;border-radius:12px;border:1.5px solid var(--brand);background:var(--brand);color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:filter .12s}
.btn:hover{filter:brightness(1.07)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn.loading{color:transparent;position:relative;pointer-events:none}.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border:2.5px solid #fff;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.btns{display:flex;gap:10px;margin-top:20px}.btns .btn.ghost{width:auto;flex:0 0 auto}
.alert{padding:12px 14px;border-radius:12px;font-size:13.5px;margin-bottom:16px;display:none}.alert.show{display:block}.alert.err-a{background:var(--danger-bg);color:var(--danger)}.alert.ok-a{background:var(--ok-bg);color:var(--brand)}
.steps{display:flex;gap:6px;margin:0 0 6px}.steps i{flex:1;height:5px;border-radius:5px;background:var(--border);transition:background .2s}.steps i.on{background:var(--brand)}
.step-label{font-size:12.5px;color:var(--muted);margin-bottom:18px;display:flex;justify-content:space-between}
.meter{height:5px;border-radius:5px;background:var(--border);margin-top:8px;overflow:hidden}.meter b{display:block;height:100%;width:0;transition:width .2s,background .2s}
.pin-boxes{display:flex;gap:10px;justify-content:center;margin:6px 0 4px}.pin-boxes input{width:56px;height:60px;text-align:center;font-size:24px;font-weight:700;border:1.5px solid var(--border);border-radius:14px;background:var(--card);color:var(--text);outline:none}.pin-boxes input:focus{border-color:var(--brand-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-2) 18%,transparent)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin:10px 0}.check input{margin-top:3px;accent-color:var(--brand);width:17px;height:17px}
.notice{display:flex;gap:11px;padding:13px 14px;border-radius:12px;background:var(--soft);color:var(--text);font-size:13px;margin:6px 0 4px}
.foot{margin-top:22px;text-align:center;color:var(--muted);font-size:14px}.links{display:flex;justify-content:space-between;align-items:center;margin:-4px 0 14px;font-size:13.5px}
.hidden{display:none!important}
.review{border:1.5px solid var(--border);border-radius:14px;padding:4px 14px;margin-bottom:12px}.review div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px}.review div:last-child{border:0}.review span{color:var(--muted)}.review b{text-align:right;word-break:break-all}
@media (max-width:900px){.wrap{grid-template-columns:1fr}.hero{display:none}.box .mobile-logo{display:block}.row2{grid-template-columns:1fr}}