/* Base layout */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 0;
  position: relative;
}

/* Container */
.container { width: 100%; max-width: 980px; padding: 32px 24px 24px; margin: 0 auto; align-self: center; flex: 1 0 auto; position: relative; }

/* Headings & meta */
h2 { font-size: 32px; margin: 0 0 8px; letter-spacing: .1px; color: var(--text); }
h2 span.brand { color: var(--primary); }
h3 { font-size: 20px; margin: 0 0 12px; color: var(--text); }
h4 { font-size: 16px; margin: 0 0 8px; color: var(--text); font-weight: 600; }
p  { color: var(--muted); margin: 0 0 12px; line-height: 1.6; }
.meta { margin: 8px 0 16px; color: #1f2937; font-weight: 500; }

/* Card */
.card { background: var(--panel); border: 1px solid rgba(2,6,23,.06); border-radius: var(--card-radius); box-shadow: var(--shadow); padding: 24px; margin: 20px auto; text-align: left; }
.card + .card { margin-top: 16px; }
.card > *:first-child { margin-top: 0; }
.card > *:last-child { margin-bottom: 0; }
.card.accent { border-top: 4px solid var(--primary); }

/* Helpers */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
label { color: #1f2937; font-size: 14px; }
.hint { font-size: 12px; color: #6b7280; margin-top: 6px; }

/* Footer */
footer { position: static; width: 100%; background:#fff; border-top:1px solid #e0e0e0; padding:12px 20px; color:#666; font-size:11px; box-shadow:0 -2px 8px rgba(0,0,0,.06); min-height:45px; display:flex; align-items:center; justify-content:center; margin-top:auto; }

/* Global responsive tweaks moved to responsive.css */