@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Source+Sans+Pro:200,300,400,600,700,900");
:root { --bg: #fafafa; --fg: #171717; --muted: #6b7280; --card: #ffffff; --border: #e5e7eb; --accent: #000000; --accent-2: #111827; --radius: 16px; --radius-lg: 24px; --shadow: 0 10px 25px rgba(0,0,0,.06); --shadow-sm: 0 4px 12px rgba(0,0,0,.06); --focus: 0 0 0 3px rgba(0,0,0,.12); --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
html, body { line-height: 1.5; background: var(--bg) !important; color: var(--fg) !important; font-family: var(--font-sans) !important; }
body > table, body > div > table { width: min(1100px, 92vw) !important; margin: 32px auto !important; border-collapse: separate !important; border-spacing: 0px !important; background: transparent !important; box-shadow: none !important; }
#content, #main, #container, body > div, body > table td { background: transparent !important; border: none !important; }
h1, .page-title, .header1 { font-size: clamp(28px, 2.6vw, 36px) !important; font-weight: 800 !important; letter-spacing: -0.01em !important; margin: 8px 0px 6px !important; }
h2, .sectionheader, .header2 { font-size: clamp(18px, 2vw, 22px) !important; font-weight: 700 !important; margin: 18px 0px 8px !important; }
h3, .header3 { font-size: 16px !important; font-weight: 600 !important; color: var(--fg) !important; margin: 14px 0px 6px !important; }
.page-subtitle, .lead, .info-text, .intro { color: var(--muted) !important; margin-top: 4px !important; }
.banner-card, .top-info, #eventHeader { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow) !important; padding: 18px 20px !important; margin-bottom: 18px !important; }
form, .form, .registrationForm, #regForm, .contentbox, .module, .content { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow) !important; padding: clamp(16px, 2.3vw, 28px) !important; }
.formtable, .regtable, .FormTable { width: 100% !important; border-collapse: separate !important; border-spacing: 0px 12px !important; }
label, .label, .fieldlabel, .FormLabel, td.label { font-size: 13px !important; color: var(--fg) !important; font-weight: 600 !important; display: block !important; margin-bottom: 6px !important; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="time"], select, textarea, .textbox, .dropdown, .textarea { transition: box-shadow 0.2s, border-color 0.2s, background 0.2s; appearance: none; padding: 10px 12px; width: 100% !important; background: rgb(255, 255, 255) !important; color: var(--fg) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: var(--shadow-sm) !important; }
textarea { min-height: 96px !important; }
input:focus, select:focus, textarea:focus { outline: none !important; border-color: rgb(203, 213, 225) !important; box-shadow: var(--focus) !important; }
.required, .requiredlabel, label .required { margin-left: 4px; color: rgb(239, 68, 68) !important; font-weight: 700 !important; }
input[type="radio"], input[type="checkbox"] { accent-color: rgb(0, 0, 0); transform: translateY(1px); margin-right: 6px; }
tr, .row, .FormRow { background: transparent !important; }
td, .cell { border: none !important; padding: 6px 0px !important; vertical-align: top !important; }
.formtable tr > td:first-child { padding-right: 16px !important; width: 40% !important; }
button, input[type="submit"], .btn, .submit, .NextButton, .SaveButton { transition: transform 0.06s, background 0.15s; background: var(--accent); color: rgb(255, 255, 255) !important; border: 1px solid var(--accent) !important; border-radius: 18px !important; padding: 10px 18px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: var(--shadow-sm) !important; }
button:hover, input[type="submit"]:hover, .btn:hover { transform: translateY(-1px); background: var(--accent-2) !important; }
button:disabled, input[type="submit"]:disabled { background: rgb(209, 213, 219) !important; border-color: rgb(209, 213, 219) !important; cursor: not-allowed !important; }
.secondary, .btn-secondary, .CancelButton, a.button { background: rgb(255, 255, 255) !important; color: var(--fg) !important; border: 1px solid var(--border) !important; }
.section, .fieldset, fieldset, .panel { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; padding: 14px 16px !important; margin: 12px 0px !important; }
.legend, legend { font-weight: 700 !important; color: var(--fg) !important; }