/* Installation Rules Study Mate: shared styles for login, register, reset and simulator pages */
:root{
  --paper:#F5F7FA;
  --surface:#FFFFFF;
  --ink:#10203A;
  --muted:#4A5A73;
  --line:#D5DCE6;
  --volt:#FFD43B;
  --volt-press:#F2C200;
  --earth:#17794A;
  --fault:#C8341F;
  --band:#10203A;
  --band-ink:#EAF0F8;
  --band-muted:#A9B8CE;
  --focus:#1F5FD6;
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0B1626;
    --surface:#12233B;
    --ink:#EAF0F8;
    --muted:#A9B8CE;
    --line:#25395A;
    --band:#060E1A;
    --focus:#7DB0FF;
    --earth:#3FBF86;
    --fault:#FF7A66;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-height:100%;display:flex;flex-direction:column;
  background:radial-gradient(900px 420px at 88% 0%,color-mix(in srgb,var(--volt) 14%,transparent),transparent 70%),var(--paper);
  color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2{font-family:var(--font-display);line-height:1.1;letter-spacing:-0.02em;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}

.wrap{width:min(1160px,100% - 40px);margin-inline:auto}

/* Top bar */
.topbar{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,transparent)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:-0.02em}
.brand img{height:36px;width:auto}
.back{font-weight:600;text-decoration:none;color:var(--muted)}
.back:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* Layout */
main{flex:1;display:grid;place-items:center;padding:clamp(28px,6vw,72px) 0}
.auth-single{width:min(480px,100% - 40px)}
.auth-wide{width:min(620px,100% - 40px)}
.register-grid{width:min(1040px,100% - 40px);display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:start}

/* Card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(16,32,58,.35)}
.stripe{height:10px;background:repeating-linear-gradient(135deg,var(--earth) 0 9px,var(--volt) 9px 18px)}
.card-body{padding:clamp(24px,4vw,40px)}
.card h1{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800}
.card .sub{margin-top:10px;color:var(--muted)}

/* Forms */
form{margin-top:26px;display:grid;gap:18px}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
.field input,.field select{
  width:100%;min-height:50px;padding:10px 14px;border:2px solid var(--line);border-radius:8px;
  background:var(--paper);color:var(--ink);font:400 1.05rem var(--font-body);
}
.field input:focus,.field select:focus{border-color:var(--focus);outline:none}
.field input[readonly]{font-weight:600;background:color-mix(in srgb,var(--volt) 14%,var(--paper))}
.field .hint{margin-top:6px;font-size:.92rem}
.field .hint a{font-weight:600;color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pw{position:relative}
.pw input{padding-right:78px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:38px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:600 .95rem var(--font-body);cursor:pointer}
.pw button:hover{color:var(--ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:8px;font:600 1.05rem/1 var(--font-body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.btn-primary{background:var(--volt);color:#10203A}
.btn-primary:hover{background:var(--volt-press)}
.btn-block{width:100%}

.note{margin-top:22px;text-align:center;color:var(--muted)}
.note a{font-weight:600;color:var(--ink)}

/* Register: summary panel */
.summary h2{font-size:1.6rem;font-weight:800}
.summary .art{background:#FDFDFE;border-radius:12px;padding:18px;display:grid;place-items:center;margin-top:18px}
.summary .art img{height:230px;width:auto}
.summary ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.summary li{display:flex;gap:10px;align-items:flex-start}
.summary li svg{flex:none;width:22px;height:22px;margin-top:2px;color:var(--earth)}
.summary .pay{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.summary .pay img{max-height:34px;width:auto;max-width:180px;border-radius:6px}

/* Simulator chooser */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:132px;padding:22px;text-align:left;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s}
.choice:hover{border-color:var(--ink);background:color-mix(in srgb,var(--volt) 14%,var(--paper))}
.choice strong{font-family:var(--font-display);font-size:1.5rem;font-weight:800;letter-spacing:-0.02em}
.choice span{color:var(--muted);font-size:.98rem;line-height:1.4}


/* Status pages (payment result, access denied, redirect) */
.status{text-align:center}
.status-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px}
.status-icon svg{width:38px;height:38px}
.status-icon.ok{background:color-mix(in srgb,var(--earth) 16%,transparent);color:var(--earth)}
.status-icon.fail{background:color-mix(in srgb,var(--fault) 14%,transparent);color:var(--fault)}
.status-icon.wait{background:color-mix(in srgb,var(--volt) 32%,transparent);color:var(--ink)}
.status .sub{max-width:42ch;margin-inline:auto}
.actions{display:grid;gap:12px;margin-top:28px}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.fine{margin-top:20px;font-size:.92rem;color:var(--muted)}
.spinner{width:56px;height:56px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--earth);margin:0 auto 22px;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pf-logo{margin:24px auto 0;max-height:40px;width:auto}
#frmPayment{margin:0;display:block}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

.notice{margin-top:18px;padding:12px 14px;border-radius:8px;background:color-mix(in srgb,var(--volt) 28%,transparent);font-weight:600}

/* Footer */
.foot{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:.95rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
.foot a{font-weight:600;color:var(--ink)}

@media (max-width:860px){
  .register-grid{grid-template-columns:1fr}
  .register-grid .summary{order:2}
}
@media (max-width:520px){
  .row2,.choices{grid-template-columns:1fr}
  .back{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .btn,.choice{transition:none}
}