/* Shared by account.html and feedback.html: one quiet card on the site's night-sky ground. */
:root{
  --deep:#0C0926; --snow:#F7F3EC; --dim:rgba(247,243,236,.72); --faint:rgba(247,243,236,.48);
  --glacier:#3CCBEA; --spring:#5AE6A0; --line:rgba(247,243,236,.16); --bad:#F0A08F;
  --ui:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;font-family:var(--ui);font-size:16px;line-height:1.55;color:var(--snow);
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(60,203,234,.16),transparent 60%),
    radial-gradient(90% 70% at 90% 0%,rgba(90,230,160,.10),transparent 60%),
    linear-gradient(180deg,#1B1447 0%,var(--deep) 62%);
  background-attachment:fixed;
  display:flex;justify-content:center;
  padding:max(22px,env(safe-area-inset-top)) 18px max(34px,env(safe-area-inset-bottom));
}
a{color:var(--glacier)}
.card{
  width:100%;max-width:560px;align-self:flex-start;margin-top:clamp(0px,5vh,56px);
  padding:clamp(22px,4vw,34px);border-radius:24px;
  border:1px solid var(--line);background:rgba(16,13,46,.72);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(4,3,16,.5);
}
.back{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--dim);text-decoration:none}
.back:hover{color:var(--snow)}
h1{margin:0 0 6px;font-size:clamp(26px,5vw,32px);line-height:1.1;letter-spacing:-.02em}
h2{margin:0 0 6px;font-size:19px;letter-spacing:-.01em}
.lede{margin:0 0 20px;color:var(--dim)}
.info{margin:0 0 20px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px}
.info dt{color:var(--faint)}
.info dd{margin:0;overflow-wrap:anywhere}
.linkrow{margin:0 0 22px}

label,legend{display:block;margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--dim)}
fieldset{margin:0 0 16px;padding:0;border:0;min-width:0}
.kinds{display:flex;gap:10px;flex-wrap:wrap}
.kinds legend{float:left;width:100%}
.kinds label{
  flex:1 1 160px;margin:0;display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(247,243,236,.04);
  color:var(--snow);font-size:15px;font-weight:600;
}
.kinds input{accent-color:var(--spring);width:17px;height:17px;margin:0}
.kinds label:has(input:checked){border-color:var(--spring);background:rgba(90,230,160,.10)}
textarea,input[type="email"],input[type="password"]{
  width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(8,6,26,.6);color:var(--snow);font:inherit;outline:none;
}
textarea{min-height:150px;resize:vertical}
textarea:focus,input:focus{border-color:var(--glacier);box-shadow:0 0 0 3px rgba(60,203,234,.18)}
.count{margin:5px 2px 14px;text-align:right;font-size:12px;color:var(--faint)}
.field{margin:0 0 16px}
.who{margin:0 0 16px;font-size:14px;color:var(--dim)}
.check{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;font-size:14.5px;font-weight:500;color:var(--snow);cursor:pointer}
.check input{accent-color:var(--bad);width:18px;height:18px;margin:2px 0 0;flex:none}
.err{margin:0 0 14px;padding:10px 13px;border-radius:12px;border:1px solid rgba(240,160,143,.45);background:rgba(240,160,143,.10);color:#F6CFC6;font-size:14px}
.err[hidden],[hidden]{display:none !important}

.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 26px;
  border-radius:999px;border:1px solid transparent;font:inherit;font-weight:700;font-size:15.5px;
  color:#08210F;background:linear-gradient(112deg,var(--glacier),var(--spring));cursor:pointer;text-decoration:none;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn--wide{width:100%}
.btn--sec{background:transparent;color:var(--snow);border-color:var(--line)}
.btn--bad{background:#C8452F;color:#fff}
.btn--bad:not(:disabled):hover{background:#DB5540}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}

.danger{margin-top:8px;padding:18px;border-radius:18px;border:1px solid rgba(240,160,143,.38);background:rgba(240,160,143,.06)}
.danger p{margin:0 0 14px;color:var(--dim);font-size:14.5px}
.danger ul{margin:0 0 14px;padding-left:20px;color:var(--dim);font-size:14.5px}
.done{text-align:center}
.done .tick{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:28px;color:#08210F;background:linear-gradient(112deg,var(--glacier),var(--spring))}
.done p{color:var(--dim);margin:0 0 20px}
.done .btnrow{justify-content:center}