/* VPN Sydney — app styles: auth modal + account dashboard + legal pages.
   Reuses the design tokens from styles.css (--navy, --gold, etc.). */

/* ---------- Legal pages ---------- */
.legal{padding:3rem 0 4.5rem}
.legal h1{font-size:2rem;margin-bottom:.3rem}
.legal .updated{color:var(--muted);margin-bottom:2rem;font-size:.92rem}
.legal h2{font-size:1.2rem;margin:1.9rem 0 .5rem}
.legal p,.legal li{color:var(--body);margin-bottom:.7rem;line-height:1.7}
.legal ul{padding-left:1.3rem;margin-bottom:.8rem}
.legal a{color:var(--ocean)}
.legal .lead{font-size:1.1rem;color:var(--ink)}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(11,31,58,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:1rem;
}
.modal-overlay.open{display:flex}
.modal{
  background:#fff;border-radius:var(--radius);padding:2rem;width:min(420px,100%);
  box-shadow:var(--shadow);position:relative;animation:pop .18s ease;
}
.modal-wide{width:min(680px,100%)}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:1.4rem;margin-bottom:.3rem}
.modal-sub{color:var(--muted);margin-bottom:1.3rem;font-size:.95rem}
.modal-close{
  position:absolute;top:.9rem;right:1.1rem;background:none;border:0;font-size:1.6rem;
  line-height:1;color:var(--muted);cursor:pointer;
}
.modal form label{display:block;font-weight:600;color:var(--ink);margin-bottom:.9rem;font-size:.9rem}
.modal form input{
  width:100%;margin-top:.35rem;padding:.7rem .85rem;border:1.5px solid var(--line);
  border-radius:10px;font:inherit;
}
.modal form input:focus{outline:none;border-color:var(--ocean)}
.modal-error{color:#d33;font-size:.88rem;min-height:1.1rem;margin:.2rem 0 .6rem}
.modal-switch{margin-top:1.1rem;text-align:center;color:var(--muted);font-size:.9rem}
.modal-switch a{color:var(--ocean);font-weight:700}

/* ---------- Account page ---------- */
.account{padding:2.5rem 0 4rem;min-height:60vh}
.account h1{font-size:2rem}
.acct-email{color:var(--muted);margin-bottom:1.8rem}
.acct-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;margin-bottom:1.4rem;box-shadow:var(--shadow-sm);
}
.acct-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}
.acct-card-head h2{font-size:1.25rem}
.status-pill{display:inline-block;font-weight:700;padding:.45rem .9rem;border-radius:999px;font-size:.9rem;margin-bottom:.6rem}
.status-pill.ok{background:rgba(54,211,153,.15);color:#0a7a52}
.status-pill.warn{background:rgba(255,158,61,.15);color:#a85a14}

.device-list{display:grid;gap:.7rem;margin-bottom:1.6rem}
.device-row{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem 1.1rem;background:var(--bg-alt);border-radius:10px;
}
.btn-sm{padding:.45rem .9rem;font-size:.85rem}

.add-conn{border-top:1px dashed var(--line);padding-top:1.3rem}
.add-conn h3{font-size:1.1rem;margin-bottom:.3rem}
.add-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}
.add-row select,.add-row input{
  flex:1;min-width:160px;padding:.7rem .85rem;border:1.5px solid var(--line);border-radius:10px;font:inherit;
}
.add-row select:focus,.add-row input:focus{outline:none;border-color:var(--ocean)}

/* config + QR modal */
.cfg-grid{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;margin-top:1rem}
#cfgQr{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.cfg-side{min-width:0}
.cfg-text{
  background:var(--navy);color:#cfe3ff;border-radius:10px;padding:1rem;font-size:.78rem;
  overflow:auto;max-height:220px;white-space:pre-wrap;word-break:break-all;margin-bottom:.8rem;
}
@media (max-width:560px){
  .cfg-grid{grid-template-columns:1fr}
  #cfgQr{margin:0 auto}
}