/* ---------- Base layout ---------- */
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
main{min-height:100svh;display:grid;place-items:center;padding:2rem;text-align:center}
.wrap{max-width:720px;width:100%}
h1{font-size:clamp(2rem,7vw,3.5rem);margin:0 0 .25rem;letter-spacing:.02em}
.tag{color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;margin-bottom:1rem}

/* ---------- Links & buttons ---------- */
.links a{color:var(--link);text-decoration:none}
.links a:hover{text-decoration:underline}

.btn{
  display:inline-block;padding:.75rem 1.1rem;border-radius:.75rem;text-decoration:none;
  background:var(--link);color:var(--btn-text);font-weight:600;border:0;cursor:pointer;
  transition:transform .15s ease,background-color .15s ease,opacity .15s ease;
}
.btn:hover{background:var(--link-hover);transform:translateY(-1px)}

.btn-secondary{
  background:transparent;color:var(--fg);
  border:1px solid var(--panel-border);
}
.btn-secondary:hover{
  background:var(--panel-hover);
  transform:none;
}

/* ---------- Panel (card) ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:16px;
  padding:2rem;
  box-shadow:var(--panel-shadow);
}

/* ---------- Flash message ---------- */
#flash{margin:.75rem auto 0;min-height:1.2rem;font-weight:600}
.flash-ok{color:var(--ok)}
.flash-warn{color:var(--warn)}

/* ---------- Dialog (modal) ---------- */
dialog{
  border:0;border-radius:1rem;padding:0;width:min(92vw,560px);
  background:var(--card);color:var(--fg);
  box-shadow:var(--dialog-shadow);
}
dialog::backdrop{background:var(--backdrop)}
.dlg-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;border-bottom:1px solid var(--panel-border)
}
.dlg-title{font-size:1.05rem;font-weight:700;margin:0}
.dlg-close{
  border:0;background:transparent;color:var(--muted);font-size:1.25rem;cursor:pointer;
  line-height:1;padding:.25rem .4rem;border-radius:.5rem
}
.dlg-close:hover{color:var(--fg);background:var(--panel-hover)}
.dlg-body{padding:1rem 1.25rem 0 1.25rem}
.dlg-actions{
  display:flex;gap:.6rem;justify-content:flex-end;padding:1rem 1.25rem 1.25rem;
  border-top:1px solid var(--panel-border);margin-top:1rem
}

/* ---------- Forms ---------- */
.form{display:grid;gap:.9rem;text-align:left}
.row{display:grid;gap:.35rem}
label{font-weight:600}
input,textarea{
  font:inherit;padding:.7rem .8rem;border:1px solid var(--input-border);
  border-radius:.6rem;background:var(--input-bg);outline:none;color:var(--fg)
}
input:focus,textarea:focus{box-shadow:0 0 0 3px var(--ring);border-color:transparent}

/* ---------- Honeypot helpers ---------- */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.visually-hidden{
  position:absolute!important;height:1px;width:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px
}

/* ---------- Minimal container for handler fallback page ---------- */
.page{max-width:720px;margin:10vh auto 0;padding:2rem}