/* ====================================================================
   Customer Portal — base styles.
   Brand colour comes in via --brand / --ink / --paper (set per request).
   Chrome stays quiet; the brand accent and logo carry the identity.
==================================================================== */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--paper);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Auth screens ---- */
.auth-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}
.auth-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:40px 36px 32px;
  box-shadow:0 18px 50px -28px rgba(0,0,0,.30);
}
.brand-logo{max-height:46px;width:auto;display:block;margin:0 auto 26px}
.brand-wordmark{
  font-family:"Fraunces",Georgia,serif;
  font-size:24px;font-weight:500;letter-spacing:-.01em;
  text-align:center;color:var(--ink);margin:0 auto 26px;
}

.auth-card h1{
  font-family:"Fraunces",Georgia,serif;
  font-size:26px;font-weight:500;letter-spacing:-.01em;
  margin:0 0 8px;text-align:center;color:var(--ink);
}
.auth-card .sub{
  font-size:14.5px;line-height:1.55;color:#6b6760;
  text-align:center;margin:0 0 26px;
}

.field{margin:0 0 16px}
.field label{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:#55514b;margin:0 0 7px;
}
.field input{
  width:100%;border:1px solid rgba(0,0,0,.14);border-radius:11px;
  padding:13px 14px;font-size:15.5px;font-family:inherit;color:var(--ink);
  background:#fcfbf9;transition:border-color .15s, box-shadow .15s;
}
.field input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.field input.otp{
  text-align:center;font-size:26px;letter-spacing:.34em;font-weight:600;
  padding:14px 10px;
}

.btn{
  width:100%;border:none;border-radius:11px;cursor:pointer;
  background:var(--brand);color:#fff;
  font-family:inherit;font-size:15.5px;font-weight:600;
  padding:14px 16px;margin-top:6px;
  transition:filter .15s, transform .02s;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}

.auth-foot{
  text-align:center;font-size:13.5px;color:#7a766f;margin-top:20px;
}
.auth-foot a{font-weight:600}

/* ---- Flash / alerts ---- */
.alert{
  border-radius:11px;padding:11px 14px;font-size:14px;line-height:1.5;
  margin:0 0 20px;
}
.alert.info{background:#f1efe9;color:#5a554e;border:1px solid rgba(0,0,0,.05)}
.alert.success{background:#eaf4ec;color:#2f5d3a;border:1px solid #cfe6d4}
.alert.error{background:#fcecec;color:#8a3030;border:1px solid #f3d2d2}

/* ---- Footer ---- */
.portal-foot{
  text-align:center;font-size:12.5px;color:#9a958d;
  padding:22px 16px 26px;
}
.portal-foot a{color:#9a958d}
.portal-foot .dot{margin:0 8px;opacity:.6}

/* ---- Dashboard (Phase 1 stub) ---- */
.dash-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid rgba(0,0,0,.07);
  background:#fff;
}
.dash-top .brand-logo{margin:0;max-height:34px}
.dash-top .brand-wordmark{margin:0;font-size:19px}
.dash-top .logout{font-size:14px;font-weight:600}
.dash-main{flex:1;max-width:760px;margin:0 auto;padding:40px 24px;width:100%}
.dash-main h1{
  font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:30px;
  letter-spacing:-.01em;margin:0 0 6px;
}
.dash-main .lead{color:#6b6760;font-size:15.5px;margin:0 0 28px}
.panel{
  background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px;
  padding:24px 26px;margin:0 0 18px;
}
.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:#9a958d;margin:0 0 14px;font-weight:600}
.kv{display:flex;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid rgba(0,0,0,.05);font-size:15px}
.kv:last-child{border-bottom:none}
.kv .k{color:#6b6760}
.kv .v{font-weight:600}

@media (max-width:480px){
  .auth-card{padding:32px 24px 26px;border-radius:16px}
}