/* Shared look for every page: Peakvision brand (warm grey, charcoal, coral accent, cut corners). */
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(fonts/Poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(fonts/Poppins-600.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:100 900;font-display:swap;src:url(fonts/WorkSans-var.woff2) format("woff2")}

:root{
  --grey:#d6d5d2;--paper:#ecebe8;--ink:#141414;--soft:#55534f;--mute:#7a7a74;--line:#bdbdb8;--white:#fff;
  --accent:#e6766f;--ok:#2f7d57;--warn:#b7791f;--bad:#b3261e;
  --a-bg:#111110;--a-panel:#171716;--a-raise:#1e1e1c;--a-hover:#232321;--a-line:#2b2b28;--a-ink:#efefec;--a-mute:#a4a49e;--a-dim:#6f6f69;
  --a-ok:#7fbf9b;--a-wait:#d9b46a;--a-act:#e6766f;
  --display:Poppins,"Helvetica Neue",Arial,sans-serif;--body:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);--fold:18px;--fold-sm:10px;--r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:15px;line-height:1.55;color:var(--ink);background:var(--grey);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.15}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.k{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.cut{clip-path:polygon(0 0,calc(100% - var(--fold)) 0,100% var(--fold),100% 100%,0 100%)}
.cut-sm{clip-path:polygon(0 0,calc(100% - var(--fold-sm)) 0,100% var(--fold-sm),100% 100%,0 100%)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;cursor:pointer;
  font-family:var(--display);font-weight:500;font-size:14px;text-decoration:none;transition:transform .15s var(--ease),background .15s,opacity .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn.ghost{background:transparent;color:inherit}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn.small{padding:7px 12px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.linkbtn{background:none;border:0;padding:4px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:inherit;font-size:13.5px}

/* forms */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label,.lbl{font-size:13px;font-weight:600;color:var(--soft)}
.field .hint{font-size:12.5px;color:var(--mute)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=time],input[type=url],select,textarea{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;font-size:15px;transition:border-color .15s,box-shadow .15s}
textarea{resize:vertical;min-height:90px}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(230,118,111,.25)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--soft)}
.check input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--ink)}
.err{color:var(--bad);font-size:14px;min-height:1.2em}
.err:empty{min-height:0}
.ok-msg{color:var(--ok);font-size:14px}

/* auth and public pages: centred card on warm grey */
.center{min-height:100vh;display:grid;place-items:center;padding:32px 16px}
.card{background:#fff;width:min(440px,100%);padding:30px;border-radius:2px;box-shadow:0 30px 60px -30px rgba(0,8,24,.35)}
.card .brand{width:150px;margin-bottom:22px}
.card h1{font-size:24px;margin-bottom:6px}
.card .lead{color:var(--soft);margin-bottom:20px}
.card .btn{width:100%;margin-top:6px}
.foot{margin-top:18px;font-size:12.5px;color:var(--mute);text-align:center}
.foot a{color:var(--soft)}

/* toast */
.toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:100;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);animation:rise .3s var(--ease) both;max-width:90vw}
.toast.bad{background:var(--bad)}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}