/* muonlinetop100 — content/form pages (register, login, account, server,
   legal). Loaded AFTER home.css, which supplies the shared chrome
   (header, nav, footer, wrap, buttons, chips, tags, prose, crumbs). This file
   adds forms, cards, tables and the centered content container. */

/* Sticky footer: short pages keep the footer at the bottom. */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1;padding:40px 0 56px}
footer{margin-top:auto}

/* Centered content column. Header/footer keep the full 1120 wrap; the page
   body sits in a readable, centered column sized to its content. */
.page{margin:0 auto;width:100%}
.page-form{max-width:460px;text-align:center}
.page-narrow{max-width:760px}
.page-normal{max-width:900px}
.page-wide{max-width:1060px}
.page-form .card,.page-form form,.page-form .formfoot{text-align:left}

/* Headings */
main h1{font-family:var(--display);font-size:clamp(23px,3.6vw,32px);font-weight:700;letter-spacing:.8px;margin-bottom:8px;line-height:1.15}
main h1 b{color:var(--gold)}
.sub{color:var(--muted);margin-bottom:26px;font-size:15px}
.mut{color:var(--muted)}
.page-form .sub{margin-bottom:22px}

/* Cards fill their (already width-constrained) page column. */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.card + .card{margin-top:18px}

/* Forms */
label{display:block;font-weight:700;font-size:13.5px;margin:16px 0 6px}
label:first-of-type{margin-top:0}
label .opt{color:var(--muted);font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=date],select,textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:10px 13px;
  color:var(--text);font-size:14.5px;outline:none;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--gold-dim);outline:2px solid var(--gold-dim);outline-offset:1px}
textarea{min-height:96px;resize:vertical}
.hint{color:var(--muted);font-size:12.5px;margin-top:4px}
.formfoot{margin-top:24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Buttons (home.css styles the <a> variants; add the <button> essentials). */
.btn{border:0;cursor:pointer;font-family:inherit}
.btn.danger{background:#3a1a1a;color:#f0a0a0;border:1px solid #5a2a2a}
.btn.danger:hover{filter:brightness(1.1)}
.btn.sm{padding:7px 14px;font-size:13.5px}

/* Alerts */
.alert{border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:14.5px}
.alert.error{background:#2a1414;border:1px solid #5a2a2a;color:#f0a0a0}
.alert.success{background:#14261a;border:1px solid #245a34;color:#9fe0b0}
.alert.info{background:#141d2a;border:1px solid #2a3f5a;color:#a0c4f0}
.alert a{color:inherit;text-decoration:underline}

/* Tables (account dashboard) */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:1px;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--bg2)}
.tablewrap{overflow-x:auto}

@media (max-width:640px){
  main{padding:28px 0 44px}
  .card{padding:18px}
}