:root{
  /* Base Colors */
  --bg-color: #181e2a;
  --primary-color: #60a5fa;
  --primary-color-dark: #2563eb;
  --primary-color-light: #bae6fd;
  --border-color: #23263a;
  --text-color: #f3f4f6;
  --muted-text: #b6c2d6;
  --white: #fff;
  --black: #000;
  
  /* Extended Color Palette */
  --accent-blue: #2970ff;
  --accent-orange: #ff6a3d;
  --accent-yellow: #f9bc60;
  --accent-red: #ef4565;
  --accent-green: #2cb67d;
  --console-bg: #181f2a;
  --input-focus-alt: #1a2332;
  --light-text: #e9eefc;
  --panel-bg: #21293a;
  --header-bg: #232946;
  --bg-light: #f7f7ff;
  --primary-blue-variant: #3da9fc;
  
  /* Semantic Colors */
  --fail-color: #7f1d1d;
  --fail-color-light: #fee2e2;
  --pass-color: #166534;
  --pass-color-light: #dcfce7;
  --warning-color: #eab308;
  --neutral-color: #64748b;
  --info-color: #1d4ed8;
  --info-bg: #e0e7ff;
  
  /* Input and Form Colors */
  --input-bg: #f3f4f6;
  --input-focus-bg: #fff;
  --input-border: #2563eb;
  --input-dark-bg: #181e2a;
  --input-dark-border: #23263a;
  --input-dark-focus-bg: #181e2a;
  --input-dark-focus-color: #bae6fd;
  --form-bg-alpha: rgba(35,38,58,0.65);
  --form-focus-bg-alpha: rgba(35,99,235,0.18);
  
  /* Navigation Colors */
  --nav-link-muted: #e5e7eb;
  --nav-link-hover: #60a5fa;
  --nav-link-active: #1d4ed8;
  
  /* Swatch Colors */
  --swatch-bg: #f9fafb;
  --swatch-border: #e5e7eb;
  --swatch-border-strong: #b6c2d6;
  --swatch-highlight: #dcfce7;
  --swatch-highlight-border: #a7f3d0;
  --swatch-fail: #b91c1c;
  --swatch-pass: #15803d;
  
  /* Glass and Effects */
  --glass-bg: rgba(35,38,58,0.72);
  --glass-blur: blur(12px);
  --backdrop-blur: blur(2px);
  
  /* Shadow Variations */
  --box-shadow: 0 2px 8px rgba(37,99,235,0.10);
  --box-shadow-strong: 0 8px 32px rgba(37,99,235,0.18);
  --box-shadow-light: 0 1px 4px rgba(37,99,235,0.06);
  --box-shadow-medium: 0 2px 12px rgba(37,99,235,0.12);
  --box-shadow-heavy: 0 6px 32px rgba(37,99,235,0.18);
  --box-shadow-verylight: 0 2px 8px rgba(37,99,235,0.04);
  --box-shadow-minimal: 0 1px 6px rgba(37,99,235,0.08);
  
  /* Gradients and Effects */
  --glow-primary: 0 0 16px 2px #60a5fa66, 0 0 2px 0 #2563eb44;
  --glow-accent: 0 0 8px 2px #bae6fd88;
  --card-gradient: linear-gradient(120deg, #23263a 60%, #2563eb 100%);
  --button-gradient: linear-gradient(100deg, #2563eb 0%, #60a5fa 60%, #bae6fd 100%);
  --button-gradient-hover: linear-gradient(100deg, #60a5fa 0%, #2563eb 80%, #bae6fd 100%);
  --glass-border: 1.5px solid #60a5fa44;
  --glass-border-active: 2.5px solid #60a5fa99;
  
  /* Typography */
  --font-mono: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
  --font-sans: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* Spacing and Layout */
  --border-radius: 10px;
  --border-radius-small: 6px;
  --border-radius-large: 18px;
  --transition-fast: 0.18s;
  --transition-slow: 0.25s;
}

/* Standardized utility classes */
.flex-row{display:flex;gap:1em;flex-wrap:wrap;align-items:center}
.flex-row-start{display:flex;gap:1em;flex-wrap:wrap;align-items:flex-start}
.flex-row-end{display:flex;gap:1em;flex-wrap:wrap;align-items:flex-end}
.flex-col{display:flex;flex-direction:column;gap:0.5em;align-items:center}
.grid{display:grid;gap:0.5em}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1em}

/* Color sample base styling */
.color-sample{
  padding:1em 2em;
  border-radius:var(--border-radius-small);
  font-weight:600;
  font-size:1em;
  display:inline-block;
  min-width:120px;
  text-align:center;
  margin:0 8px 8px 0;
  /* Default styling - will be overridden by specific classes */
  background: var(--border-color);
  color: var(--text-color);
  box-shadow: var(--box-shadow-verylight);
}

/* Monospace text utility */
.monospace{
  font-family:'Fira Mono','Consolas','Menlo',monospace;
}

/* Utility classes */
.hidden{display:none}
.tool-disclosure{margin-top:1em;font-size:0.95em;color:var(--muted-text)}

/* Home page specific styles */
.home-cta-link{font-size:1.18em;padding:16px 38px;margin-bottom:0}
.home-cta-icon{font-size:1.4em}

/* Form action sections */
.form-actions{margin-top:18px}

/* Color sample variants */
.color-sample-primary{background:var(--primary-blue-variant);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-accent-blue{background:var(--accent-blue);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-console-bg{background:var(--console-bg);color:var(--primary-blue-variant);box-shadow:var(--box-shadow-verylight)}
.color-sample-input-focus{background:var(--input-focus-alt);color:var(--primary-blue-variant);box-shadow:var(--box-shadow-verylight)}
.color-sample-light-text{background:var(--light-text);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-panel-bg{background:var(--panel-bg);color:var(--primary-blue-variant);box-shadow:var(--box-shadow-verylight)}
.color-sample-header-bg{background:var(--header-bg);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-bg-light{background:var(--bg-light);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-accent-orange{background:var(--accent-orange);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-accent-yellow{background:var(--accent-yellow);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-accent-red{background:var(--accent-red);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-accent-green{background:var(--accent-green);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-bg-color{background:var(--bg-color);color:var(--text-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-primary-color{background:var(--primary-color);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-primary-dark{background:var(--primary-color-dark);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-primary-light{background:var(--primary-color-light);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-border{background:var(--border-color);color:var(--primary-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-text{background:var(--text-color);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-muted{background:var(--muted-text);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-fail-light{background:var(--fail-color-light);color:var(--fail-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-fail{background:var(--fail-color);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-pass{background:var(--pass-color);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-pass-light{background:var(--pass-color-light);color:var(--pass-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-warning{background:var(--warning-color);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-neutral{background:var(--neutral-color);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-white{background:var(--white);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-black{background:var(--black);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-nav-muted{background:var(--nav-link-muted);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-nav-active{background:var(--nav-link-active);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-swatch-bg{background:var(--swatch-bg);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-swatch-highlight{background:var(--swatch-highlight-border);color:var(--bg-color);box-shadow:var(--box-shadow-verylight)}
.color-sample-swatch-fail{background:var(--swatch-fail);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-swatch-pass{background:var(--swatch-pass);color:var(--white);box-shadow:var(--box-shadow-verylight)}
.color-sample-glass{background:var(--glass-bg);color:var(--white);box-shadow:var(--box-shadow-verylight)}

/* Demo layout classes */
.demo-section{margin-bottom:2em}
.demo-grid{display:grid;gap:1em;max-width:400px}
.demo-buttons{display:flex;gap:1em;flex-wrap:wrap;align-items:center}
.demo-table{margin-bottom:1em}
.demo-alerts{display:flex;gap:1em;flex-wrap:wrap;align-items:center}
.demo-logos{display:flex;gap:2em;align-items:center;margin:2em 0;flex-wrap:wrap}
.demo-code{margin-bottom:1em}

/* Logo styling */
.logo-standard{height:64px;width:auto;max-width:180px;background:#fff;border-radius:12px;padding:8px;box-shadow:0 2px 8px var(--border-color)22}
.logo-small{height:32px;width:auto;max-width:90px;background:#fff;border-radius:8px;padding:4px;box-shadow:0 1px 4px var(--border-color)22}
.logo-large{height:120px;width:auto;max-width:320px;background:#fff;border-radius:18px;padding:12px;box-shadow:0 4px 16px var(--border-color)22}
.logo-dark{height:64px;width:auto;max-width:180px;background:var(--bg-color);border-radius:12px;padding:8px;box-shadow:0 2px 8px var(--primary-color)22}

/* Status badge styling */
.status-listed{
  display:inline-block;
  padding:2px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:0.9em;
  background:#166534;
  color:#dcfce7;
  margin-right:8px;
}
.status-not-listed{
  display:inline-block;
  padding:2px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:0.9em;
  background:#7f1d1d;
  color:#fee2e2;
  margin-right:8px;
}

/* Alert styling - consolidate duplicate alert classes */
.alert{
  padding:12px 18px;
  border-radius:var(--border-radius-small);
  margin:8px 0;
  font-weight:600;
  border:1.5px solid;
}
.alert.info{
  background:var(--info-bg);
  color:var(--info-color);
  border-color:var(--primary-color-dark);
}
.alert.success{
  background:var(--pass-color-light);
  color:var(--pass-color);
  border-color:var(--swatch-pass);
}
.alert.error{
  background:var(--fail-color-light);
  color:var(--fail-color);
  border-color:var(--swatch-fail);
} *{box-sizing: border-box} html, body{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility} body{margin: 0; padding: 0; font-family: var(--font-sans); background: linear-gradient(120deg, var(--border-color) 0%, var(--bg-color) 100%); color: var(--text-color); max-width: 98vw; min-width: 0; padding: 0 0.5vw; display: flex; flex-direction: column; align-items: center} header, main{width: 98%; max-width: 1200px; min-width: 0; box-sizing: border-box} header{background: linear-gradient(90deg, var(--border-color) 0%, var(--primary-color-dark) 100%); color: var(--text-color); padding: 18px 0 12px 0; text-align: center; box-shadow: var(--box-shadow-medium); margin-bottom: 32px; border-radius: var(--border-radius-large) var(--border-radius-large) var(--border-radius-large) var(--border-radius-large)}
header h2{margin: 0; font-size: 2em; font-weight: 800; letter-spacing: 1px}
header p{margin: 8px 0 0 0; font-size: 1.1em; color: var(--info-bg)} main{background: var(--border-color); color: var(--text-color); border-radius: var(--border-radius-large); box-shadow: var(--box-shadow-strong); padding: 36px 32px 32px 32px; margin-bottom: 40px; box-sizing: border-box} h2{color: var(--primary-color)} textarea{height: 180px; font-family: var(--font-mono); padding: 16px; border: 1.5px solid var(--border-color); border-radius: var(--border-radius); margin-top: 12px; background-color: var(--input-bg); color: var(--border-color); font-size: 1.1em; transition: border 0.2s; box-shadow: var(--box-shadow-verylight); min-width: 0; width: 100%; box-sizing: border-box}
textarea:focus{border: 1.5px solid var(--primary-color-dark); outline: none; background: var(--white); color: var(--bg-color)} button, .home-tool-link{background: var(--button-gradient); color: var(--white); border: none; border-radius: 12px; font-weight: 700; font-size: 1.12em; cursor: pointer; box-shadow: var(--box-shadow-medium), 0 0 0 0 var(--primary-color); transition: background 0.22s, box-shadow 0.22s, transform 0.13s, border var(--transition-fast); outline: none; padding: 13px 36px; margin-top: 18px; margin-bottom: 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 0; position: relative; overflow: hidden; z-index: 1; letter-spacing: 0.01em; backdrop-filter: var(--backdrop-blur)}
button::after, .home-tool-link::after{content: ""; position: absolute; left:-60%; top: 0; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 60%, var(--primary-color-light) 90%, transparent 100%); opacity: 0.7; transform: skewX(-24deg); transition: left 0.7s cubic-bezier(.4,2,.6,1); z-index: 2; pointer-events: none}
button:hover::after, .home-tool-link:hover::after{left: 120%; transition: left 0.7s cubic-bezier(.4,2,.6,1)}
button:hover, .home-tool-link:hover{background: var(--button-gradient-hover); color: var(--white); box-shadow: 0 4px 24px 0 var(--primary-color), var(--glow-accent); transform: translateY(-2px) scale(1.025)}
button:active, .home-tool-link:active{background: linear-gradient(100deg, var(--primary-color-dark) 0%, var(--primary-color) 100%); color: var(--white); box-shadow: var(--box-shadow-light); transform: scale(0.98)}
button:focus, .home-tool-link:focus{outline: none; box-shadow: 0 0 0 3px var(--primary-color), var(--glow-primary); border: 2px solid var(--primary-color); background: linear-gradient(100deg, var(--primary-color-dark) 0%, var(--primary-color) 100%)}
/* Button disabled state */
button[disabled], .home-tool-link[disabled], button:disabled{
  opacity: 0.55; 
  cursor: not-allowed; 
  filter: grayscale(0.2); 
  box-shadow: none; 
  background: linear-gradient(100deg, var(--border-color) 0%, var(--neutral-color) 100%); 
  color: var(--muted-text);
}

/* Consolidated form styling */
.form-container, .branding-form-demo{
  background: none; 
  box-shadow: none; 
  border-radius: 0; 
  padding: 0; 
  margin: 0 0 32px 0; 
  display: flex; 
  flex-direction: column; 
  gap: 18px; 
  max-width: 420px;
}

.form-container label, .branding-form-demo label{
  background: none; 
  color: var(--muted-text); 
  font-weight: 600; 
  font-size: 1.05em; 
  margin-bottom: 2px; 
  padding: 0 0 4px 0; 
  box-shadow: none;
}

.form-container input[type="text"], .form-container select,
.branding-form-demo input[type="text"], .branding-form-demo select{
  background: var(--border-color); 
  color: var(--text-color); 
  border: 1.5px solid var(--input-dark-border); 
  border-radius: var(--border-radius-small); 
  box-shadow: var(--box-shadow-light); 
  font-size: 1.08em; 
  font-family: inherit; 
  padding: 10px 14px; 
  margin-bottom: 14px; 
  transition: border var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); 
  outline: none; 
  width: auto; 
  min-width: 200px;
  backdrop-filter: none;
}

.form-container input[type="text"]:focus, .form-container select:focus,
.branding-form-demo input[type="text"]:focus, .branding-form-demo select:focus{
  border: 1.5px solid var(--primary-color); 
  background: var(--input-dark-focus-bg); 
  color: var(--primary-color-light); 
  box-shadow: var(--box-shadow-medium);
}
.branding-checkboxes{display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; align-items: flex-start}
/* Clean checkbox and radio label styling with electric blue */
.branding-checkboxes label.checkbox-modern,
.branding-checkboxes label.radio-modern {
  background: none !important; 
  color: var(--primary-color) !important;  /* Electric blue accent */
  border-radius: 0 !important; 
  padding: 8px 0 !important; 
  box-shadow: none !important; 
  margin-bottom: 0; 
  margin-right: 0; 
  cursor: pointer; 
  font-size: 1.08em; 
  font-weight: 500; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  border: none !important; 
  transition: color var(--transition-fast); 
  backdrop-filter: none;
  width: auto !important;  /* Don't span full width */
}
.branding-checkboxes label.checkbox-modern:hover,
.branding-checkboxes label.radio-modern:hover{background: transparent; color: var(--primary-color); border: none}
.branding-checkboxes input[type="checkbox"],
.branding-checkboxes input[type="radio"]{accent-color: var(--primary-color); width: 18px; height: 18px; border-radius: var(--border-radius-small); border: 1.5px solid var(--border-color); background: var(--white); margin-right: 10px; vertical-align: middle; transition: border var(--transition-fast); box-shadow: none; display: inline-block; cursor: pointer}
/* Consolidated form submit button styling */
.form-container button[type="submit"], .branding-form-demo button[type="submit"]{
  background: linear-gradient(90deg, var(--primary-color-dark) 0%, var(--primary-color) 100%); 
  color: var(--white); 
  border: none; 
  border-radius: var(--border-radius); 
  font-weight: 700; 
  font-size: 1.1em; 
  box-shadow: 0 4px 16px var(--box-shadow-medium); 
  padding: 12px 32px; 
  margin-top: 8px; 
  margin-bottom: 0; 
  transition: background var(--transition-fast), box-shadow 0.18s; 
  outline: none; 
  width: 100%; 
  max-width: 100%;
}

.form-container button[type="submit"]:hover, .branding-form-demo button[type="submit"]:hover{
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%); 
  box-shadow: 0 6px 32px var(--box-shadow-strong);
}

/* Mobile responsive form styles */
@media (max-width:600px){
  .form-container, .branding-form-demo{max-width: 100%; padding: 0} 
  .form-container input[type="text"], .form-container select,
  .branding-form-demo input[type="text"], .branding-form-demo select{width: 100%; min-width: 0} 
  .branding-checkboxes{flex-direction: column; gap: 8px} 
  .branding-checkboxes label.checkbox-modern, .branding-checkboxes label.radio-modern{width: 100%; max-width: 100%; margin-right: 0}
} 

/* Label styling - clean and consistent */
label {
  display: block;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 6px;
  margin-top: 12px;
  font-size: 1.08em;
}

label:first-child {
  margin-top: 0;
}

/* General input styling */
input[type="text"], input[type="email"], input[type="password"], select{
  background: var(--border-color); 
  color: var(--text-color); 
  border: 1.5px solid var(--input-dark-border); 
  border-radius: var(--border-radius-small); 
  font-size: 1.08em; 
  font-family: inherit; 
  padding: 10px 14px; 
  margin: 0 0 8px 0; 
  box-shadow: var(--box-shadow-light); 
  transition: border var(--transition-fast), background var(--transition-fast); 
  outline: none; 
  min-width: 0; 
  width: auto; 
  max-width: 350px; 
  box-sizing: border-box; 
  display: inline-block;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus{
  border: 1.5px solid var(--primary-color); 
  background: var(--input-dark-focus-bg); 
  color: var(--primary-color-light);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2), var(--box-shadow-medium);
}

/* Checkbox and radio styling */
input[type="checkbox"], input[type="radio"]{
  accent-color: var(--primary-color); 
  width: 20px; 
  height: 20px; 
  border-radius: var(--border-radius-small); 
  border: 1.5px solid var(--border-color); 
  background: var(--input-bg); 
  margin-right: 10px; 
  vertical-align: middle; 
  transition: border var(--transition-fast); 
  box-shadow: var(--box-shadow-light); 
  display: inline-block;
}

input[type="checkbox"]:focus, input[type="radio"]:focus{outline: 2px solid var(--primary-color-dark)}

/* Improved form styling for dark theme */

/* Fieldset legend styling - electric blue accent */
legend {
  color: var(--primary-color) !important;  /* Electric blue accent */
  font-weight: 700;
  font-size: 1.2em;
  margin-bottom: 12px;
}

/* Form organization improvements */
fieldset {
  border: 1.5px solid var(--input-dark-border);
  border-radius: var(--border-radius);
  padding: 18px;
  margin-bottom: 20px;
  background: rgba(35, 38, 58, 0.3);
}

/* Select dropdown styling - improved readability */
select {
  background: var(--border-color) !important;
  color: var(--text-color) !important;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f3f4f6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 10px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  padding-right: 32px !important;
}

select:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2360a5fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-color: var(--input-dark-focus-bg) !important;
  color: var(--primary-color-light) !important;
}

/* Select option styling */
select option {
  background: var(--border-color) !important;
  color: var(--text-color) !important;
  padding: 8px 12px;
}

/* Electric blue accent labels - compact and stylish */
/* Increased specificity for accent labels */
.form-container label, .branding-form-demo label, fieldset label, label[for] {
  color: var(--primary-color);  /* Electric blue accent */
  font-weight: 600;
  margin-bottom: 6px;
  display: inline-block;  /* Don't span full width */
  font-size: 1.08em;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  width: auto;  /* Compact width */
  max-width: none;
}

/* Label styling */
label, .checkbox-modern, .radio-modern{
  font-size: 1.08em; 
  font-weight: 600; 
  color: var(--border-color); 
  background: var(--input-bg); 
  border-radius: var(--border-radius-small); 
  padding: 8px 16px 8px 10px; 
  margin-bottom: 8px; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  box-shadow: var(--box-shadow-light); 
  cursor: pointer; 
  transition: background 0.15s;
}

label:hover, .checkbox-modern:hover, .radio-modern:hover{background: var(--info-bg)}

/* Inline input styling */
input[type="text"].input-inline, select.input-inline{
  width: 180px; 
  margin-left: 10px; 
  font-size: 1em; 
  padding: 8px 12px; 
  border-radius: var(--border-radius-small); 
  border: 1.5px solid var(--border-color); 
  background: var(--input-bg); 
  color: var(--border-color); 
  box-shadow: var(--box-shadow-verylight);
}

input[type="text"].input-inline:focus, select.input-inline:focus{
  border: 1.5px solid var(--primary-color-dark); 
  background: var(--white); 
  color: var(--bg-color);
}
/* Additional styling consolidated above */

/* Checkbox and radio styling - modern but not button-like */
.checkbox-modern, .radio-modern {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin-bottom: 8px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.checkbox-modern:hover, .radio-modern:hover {
  color: var(--primary-color);
  background: transparent !important;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--primary-color);
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.branding-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.branding-checkboxes label {
  margin: 0;
} table{width: auto; border-collapse: separate; border-spacing: 0; background: var(--bg-color, var(--bg-color)); color: var(--text-color, var(--text-color)); margin: 1.5em 0; font-size: 1em; box-shadow: 0 2px 8px var(--box-shadow-verylight); border-radius: var(--border-radius); overflow: hidden}
thead th{background: var(--border-color, var(--border-color)); color: var(--primary-color, var(--primary-color)); font-weight: 600; padding: 0.7em 1.2em; text-align: left; white-space: nowrap}
tbody td{padding: 0.6em 1.2em; border-top: 1px solid var(--border-color, var(--border-color)); white-space: nowrap}
tbody tr:last-child td{border-bottom: none}
table th, table td{min-width: 60px; max-width: 320px}
@media (max-width:600px){table, thead th, tbody td{font-size: 0.98em; padding: 0.5em 0.7em} table th, table td{min-width: 0; max-width: 100vw}} details, summary{width: 100%; min-width: 0; box-sizing: border-box}
details{margin-top: 18px; background: var(--border-color); color: var(--text-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow-verylight); padding: 0 0 12px 0; overflow: hidden}
details summary{font-weight: 600; font-size: 1.1em; color: var(--primary-color); background: var(--bg-color); padding: 14px 18px; cursor: pointer; outline: none; border-radius: var(--border-radius) var(--border-radius) 0 0; user-select: none}
details[open] summary{border-bottom: 1px solid var(--border-color)}
details:not([open]) summary{border-bottom: none}
details> *:not(summary){padding-left: 18px; padding-right: 18px} tr> td> details.headers-extra-details{background: none; border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; max-width: 100%}
.headers-extra-details summary{background: none; color: var(--primary-color); font-weight: 600; font-size: 1em; padding: 0; margin: 0; border-radius: 0; outline: none; cursor: pointer; border-bottom: none; display: table-cell}
.headers-extra-details[open] summary{border-bottom: none}
.headers-extra-details table{background: none; color: inherit; margin: 0; box-shadow: none; border-radius: 0}
.headers-extra-details tr th,
.headers-extra-details tr td{background: none; color: inherit; border-bottom: 1px solid var(--border-color); padding: 12px 14px}
.headers-extra-details tr:last-child td{border-bottom: none} tr> td> details.headers-extra-details{margin-bottom: 0; margin-top: 0} .home-header{width: 100%; max-width: 1200px; margin: 0 auto 18px auto; background: linear-gradient(90deg, var(--primary-color-dark) 0%, var(--primary-color) 100%); color: var(--text-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 10px 0 6px 0; text-align: center}
.home-header h1{margin: 0; font-size: 1.45em; font-weight: 800; letter-spacing: 1px}
.home-header nav.site-nav{margin-top: 18px}
.home-lead{margin: 6px 0 0 0; font-size: 1em; color: var(--white)} .home-main{width: 100%; max-width: 1200px; margin: 0 auto; background: var(--bg-color); color: var(--text-color); border-radius: var(--border-radius-large); box-shadow: var(--box-shadow-strong); padding: 36px 32px 32px 32px; margin-bottom: 40px; box-sizing: border-box} .home-hero{text-align: center; margin-bottom: 38px}
.home-hero h2{color: var(--primary-color); font-size: 2em; margin-bottom: 0.3em; margin-top: 0.1em}
.home-hero p{color: var(--muted-text); font-size: 1.15em; max-width: 700px; margin: 0 auto 18px auto}
.home-cta{margin-top: 24px}
.home-tool-link{display: inline-flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(90deg, var(--primary-color-dark) 0%, var(--primary-color) 100%); color: var(--white); font-weight: 700; font-size: 1.18em; padding: 14px 32px; border-radius: var(--border-radius); text-decoration: none; box-shadow: 0 2px 8px var(--box-shadow); transition: background var(--transition-fast), transform 0.1s; margin-bottom: 8px}
.home-tool-link:hover{background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%); color: #fff}
.home-tool-icon{font-size: 1.3em; margin-right: 10px; color: inherit; filter: none; -webkit-filter: none; -webkit-text-fill-color: initial} .home-tools{margin-bottom: 32px}
.home-tools h3{color: var(--primary-color); font-size: 1.25em; margin: .1em}
.home-tool-list{list-style: none; padding: 0 0 0 24px; margin: 0}
.home-tool-list li{margin-bottom: 22px}
.home-tool-desc{color: var(--muted-text); font-size: 1em; padding: 0 0 0 0px; margin-top: 2px} .home-tools-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px 28px; margin: 32px 0 0 0; padding: 0; align-items: stretch}
.home-tool-card{background: var(--border-color); border-radius: 14px; box-shadow: 0 2px 12px var(--box-shadow); padding: 28px 24px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; transition: box-shadow 0.18s, transform 0.12s; min-height: 240px; box-sizing: border-box; will-change: transform, box-shadow; isolation: isolate}
.home-tool-card:hover{box-shadow: 0 6px 24px var(--box-shadow-strong); z-index: 2; transform: scale(1.025)}
.home-tool-card::after{content: ""; display: block; height: 0; padding-bottom: 0.025em}
.home-tool-card h4{color: var(--primary-color); font-size: 1.18em; margin: 0 0 8px 0; font-weight: 700}
.home-tool-card .home-tool-icon{font-size: 1.6em; margin-right: 10px; vertical-align: middle; color: inherit; filter: none; -webkit-filter: none; -webkit-text-fill-color: initial}
.home-tool-card .home-tool-desc{color: var(--muted-text); font-size: 1em; margin: 8px 0 0 0; padding: 0}
.home-tool-card .home-tool-link{margin-top: 18px; font-size: 1.08em; padding: 10px 26px}
@media (max-width:700px){.home-tools-grid{grid-template-columns: 1fr; gap: 18px} .home-tool-card{padding: 18px 10px 14px 10px}} .home-about{margin-bottom: 32px}
.home-about h3{color: var(--primary-color); font-size: 1.15em; margin-bottom: 10px}
.home-about p{color: var(--muted-text); font-size: 1.05em; max-width: 700px; margin: 0 auto} .home-footer{margin-top: 40px; color: var(--muted-text); font-size: 0.98em; text-align: center} .site-nav{width: fit-content; justify-self: center; border-bottom: none; box-shadow: 0 2px 8px var(--box-shadow-verylight); z-index: 100; position: sticky; top: 0}
.site-nav-inner{width: fit-content; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 2vw; height: 58px}
.site-nav-logo{font-size: 1.25em; font-weight: 800; color: var(--primary-color-dark); text-decoration: none; letter-spacing: 1px; padding: 0 8px}
.site-nav-links{display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; align-items: center; height: 58px}
.site-nav-links li{display: flex; align-items: center; justify-content: center; height: 100%}
.site-nav-links a, 
.site-nav-dropbtn {
  color: var(--nav-link-muted, #fff);
  background: var(--bg-color, linear-gradient(90deg, rgba(35,38,58,0.9) 0%, rgba(45,48,68,0.95) 100%));
  font-weight: 700;
  text-decoration: none;
  font-size: 1.08em;
  padding: 12px 24px;
  border-radius: 12px;
  transition: all 0.25s ease;
  border: 1.5px solid rgba(96,165,250,0.3);
  cursor: pointer;
  line-height: 1.2;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 44px;
  min-width: 120px;
  margin: 0 4px;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(37,99,235,0.15);
  backdrop-filter: blur(8px);
}

.site-nav-links a:hover, 
.site-nav-dropbtn:hover, 
.site-nav-dropbtn:focus {
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
  color: #fff;
  border: 1.5px solid #60a5fa;
  box-shadow: 0 4px 16px rgba(96,165,250,0.3), 0 0 0 2px rgba(96,165,250,0.2);
  transform: translateY(-1px);
}

.site-nav-links a:active, 
.site-nav-dropbtn:active {
  transform: translateY(0px);
  box-shadow: 0 2px 8px rgba(37,99,235,0.15);
}

.site-nav-dropdown {
  position: relative;
}

.site-nav-dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: unset;
  width: max-content;
  max-width: 320px;
  background: var(--dropdown-bg, linear-gradient(135deg, rgba(24,30,42,0.95) 0%, rgba(35,38,58,0.98) 100%));
  box-shadow: 0 8px 32px rgba(37,99,235,0.25), 0 0 0 1px rgba(96,165,250,0.2);
  border-radius: 12px;
  z-index: 1000;
  margin-top: 0;
  padding: 8px 0;
  pointer-events: auto;
  white-space: nowrap;
  overflow-x: auto;
  text-align: left;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(96,165,250,0.15);
}

.site-nav-dropdown:hover .site-nav-dropdown-content,
.site-nav-dropdown:focus-within .site-nav-dropdown-content {
  display: block;
}

.site-nav-dropbtn {
  position: relative;
  z-index: 1001;
}

.site-nav-dropdown-content li {
  min-width: 180px;
  max-width: 320px;
  white-space: nowrap;
  text-align: left;
}

.site-nav-dropdown-content a {
  color: #e5e7eb;
  background: transparent;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.04em;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin: 2px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  min-width: 180px;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
}

.site-nav-dropdown-content a:hover {
  background: linear-gradient(90deg, rgba(37,99,235,0.2) 0%, rgba(96,165,250,0.15) 100%);
  color: #fff;
  border: 1px solid rgba(96,165,250,0.3);
  transform: translateX(4px);
}

.nav-desc {
  display: inline;
  font-size: 0.93em;
  color: var(--muted-text, #b6c2d6);
  font-weight: 400;
  margin-left: 6px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

@media (max-width:900px) {
  .site-nav-inner {max-width: 100vw; padding: 0 1vw}
  .site-nav-logo {font-size: 1em}
  .site-nav-links a {font-size: 1em; padding: 0 8px; height: 40px}
}

@media (max-width:600px){body{max-width: 98vw; padding: 0} header, main, .home-header, .home-main{max-width: 98vw; padding-left: 8px; padding-right: 8px; border-radius: 0} main, .home-main{max-width: 98vw; padding: 8px 0 8px 0} textarea{font-size: 1em; padding: 8px} table, .received-timeline li{font-size: 0.98em; padding: 8px 4px 8px 8px} .home-header h1{font-size: 2em} .home-hero h2{font-size: 1.1em} .site-nav-links a, .site-nav-dropbtn{min-width: 70px; font-size: 0.98em; padding: 0 4px; height: 38px}} .home-header #site-nav{margin-top: 8px} header.home-header{width: 100vw; max-width: none; border-radius: 0; margin-left: calc(-50vw+ 50%); margin-right: calc(-50vw+ 50%)} @media (max-width:900px){header.home-header{margin-left:-2vw; margin-right:-2vw; width: 100vw}} .site-brand{display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 6px}
.site-logo{height: 48px; width: auto; border-radius: var(--border-radius-small); background: var(--white); box-shadow: 0 2px 8px var(--box-shadow); padding: 2px; display: block}
.site-title{font-size: 2em; font-weight: 800; letter-spacing: 1px; margin: 0; color: var(--nav-link-muted); line-height: 1.1}
@media (max-width:600px){.site-title{font-size: 1.2em} .site-logo{height: 36px} .site-brand{gap: 10px}} .ip-attractive-box{background: var(--border-color); border: 2px solid var(--primary-color-dark); color: var(--text-color); border-radius: var(--border-radius); padding: 24px 20px 16px 20px; margin-bottom: 28px; margin-top: 10px; box-shadow: 0 2px 8px var(--box-shadow-medium); max-width: 600px}
.ip-attractive-box h2{margin-top: 0; color: var(--primary-color); font-size: 1.5em; margin-bottom: 16px}
.ip-list{list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 18px}
.ip-list li{background: var(--bg-color); color: var(--primary-color); border-radius: var(--border-radius-small); padding: 8px 16px; font-family: monospace; font-size: 1.08em; box-shadow: 0 1px 4px var(--box-shadow); transition: background 0.15s, color 0.15s}
.ip-list li a{color: var(--primary-color); text-decoration: none; transition: color 0.15s}
.ip-list li a:hover{color: var(--white); text-decoration: underline} .headers-extra-details{margin-top: 0; margin-bottom: 18px; background: var(--border-color); border-radius: var(--border-radius); box-shadow: 0 2px 8px var(--box-shadow); padding: 0 0 12px 0; overflow: hidden; border: 1.5px solid var(--primary-color-dark); max-width: 100%}
.headers-extra-details summary{font-weight: 600; font-size: 1.1em; color: var(--primary-color); background: var(--bg-color); padding: 14px 18px; cursor: pointer; outline: none; border-radius: 10px 10px 0 0; user-select: none}
.headers-extra-details[open] summary{border-bottom: 1px solid var(--border-color)}
.headers-extra-details:not([open]) summary{border-bottom: none}
.headers-extra-details table{background: var(--bg-color); color: var(--nav-link-muted); margin: 0 0 0 0; box-shadow: none; border-radius: 0} .spf-chip{display: inline-block; min-width: 54px; text-align: center; font-weight: 700; font-size: 1em; padding: 2px 14px; border-radius: 999px; margin-left: 8px; margin-right: 12px; background: var(--border-color); color: var(--white); box-shadow: 0 1px 4px var(--box-shadow)}
.spf-pass.spf-chip{background: #166534; color: #dcfce7}
.spf-fail.spf-chip{background: #7f1d1d; color: #fee2e2}
.spf-details{display: flex; flex-direction: column; gap: 2px; margin-top: 2px; margin-left: 0; font-size: 0.98em}
.spf-detail{color: var(--muted-text); margin-left: 0; font-size: 0.98em}
.spf-detail-label{color: var(--primary-color); font-weight: 600; margin-right: 4px}
.spf-analysis{color: var(--nav-link-muted); font-size: 1.05em; margin-bottom: 2px} .dns-loading{color: var(--primary-color); font-weight: 600; margin: 18px 0; font-size: 1.1em}
.dns-error{color: #ef4444; background: var(--border-color); border: 1.5px solid #ef4444; border-radius: var(--border-radius-small); padding: 12px 18px; margin: 18px 0; font-weight: 600; font-size: 1.08em}
.dns-table{width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 18px; background: var(--bg-color); color: var(--nav-link-muted); border-radius: var(--border-radius); box-shadow: 0 2px 8px var(--box-shadow); overflow: hidden; word-break: break-word; table-layout: fixed}
.dns-table th, .dns-table td{text-align: left; border-bottom: 1px solid var(--border-color); padding: 14px 12px; vertical-align: top; background: var(--border-color); color: var(--text-color); font-size: 1.04em}
.dns-table th{background: var(--border-color); color: var(--primary-color); font-size: 1.08em; letter-spacing: 0.5px}
.dns-table tr:last-child td{border-bottom: none}
.dns-domain{color: var(--primary-color); font-weight: 700}
.dns-type{color: var(--muted-text); font-weight: 600; margin-left: 6px}
#dnsForm{display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 18px; margin-top: 18px}
#dnsForm label{font-weight: 600; color: var(--muted-text); margin-right: 4px}
#dnsForm input[type="text"], #dnsForm select{padding: 8px 12px; border-radius: var(--border-radius-small); border: 1.5px solid var(--border-color); background: var(--text-color); color: var(--border-color); font-size: 1.08em; font-family: inherit; margin-right: 8px; min-width: 180px}
#dnsForm button{margin-top: 0; margin-bottom: 0; padding: 10px 28px; font-size: 1.08em}
@media (max-width:600px){#dnsForm{flex-direction: column; align-items: stretch; gap: 8px} #dnsForm input[type="text"], #dnsForm select{min-width: 0; width: 100%}} .spf-record-box{background: var(--border-color); border: 2px solid var(--primary-color-dark); color: var(--text-color); border-radius: var(--border-radius); padding: 18px 18px 12px 18px; margin-bottom: 18px; margin-top: 10px; box-shadow: 0 2px 8px var(--box-shadow-minimal); max-width: 600px; font-size: 1.08em; word-break: break-all}
.spf-record-box .spf-label{font-weight: 700; color: var(--primary-color); margin-right: 8px}
.spf-record-box .spf-value{font-family: var(--font-mono); color: var(--nav-link-muted); background: var(--bg-color); padding: 2px 8px; border-radius: 4px}
#spfForm{display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 18px; margin-top: 18px}
#spfForm label{font-weight: 600; color: var(--muted-text); margin-right: 4px}
#spfForm input[type="text"]{padding: 8px 12px; border-radius: var(--border-radius); border: 1.5px solid var(--border-color); background: var(--text-color); color: var(--border-color); font-size: 1.08em; font-family: var(--font-mono); margin-right: 8px; min-width: 220px; box-shadow: 0 2px 8px var(--box-shadow-verylight); transition: border 0.2s}
#spfForm input[type="text"]:focus{border: 1.5px solid var(--primary-color-dark); outline: none; background: var(--white); color: var(--bg-color)}
#spfForm button{background: linear-gradient(90deg, var(--primary-color-dark) 0%, var(--primary-color) 100%); color: var(--white); border: none; border-radius: var(--border-radius-small); font-weight: 700; font-size: 1.1em; cursor: pointer; box-shadow: 0 2px 8px var(--box-shadow-minimal); transition: background 0.2s, transform 0.1s, box-shadow 0.2s; outline: none; padding: 12px 32px; margin-top: 0; margin-bottom: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 0}
#spfForm button:hover{background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%); color: var(--white); box-shadow: 0 4px 16px var(--box-shadow-medium)}
#spfForm button:active{background: var(--primary-color-dark); color: var(--white); box-shadow: 0 1px 4px var(--box-shadow)}
@media (max-width:600px){#spfForm{flex-direction: column; align-items: stretch; gap: 8px} #spfForm input[type="text"]{min-width: 0; width: 100%}} .domain-input{padding: 8px 12px; border-radius: var(--border-radius); border: 1.5px solid var(--border-color); background: var(--border-color); color: var(--text-color); font-size: 1.08em; font-family: var(--font-mono); margin-right: 8px; min-width: 220px; max-width: 340px; width: auto; box-shadow: 0 2px 8px var(--box-shadow-verylight); transition: border 0.2s, background 0.18s}
.domain-input:focus{border: 1.5px solid var(--primary-color-dark); outline: none; background: var(--bg-color); color: var(--primary-color-light)}
#dnsForm input[type="text"], #spfForm input[type="text"]{all: unset; box-sizing: border-box}
#dnsForm input[type="text"].domain-input,
#spfForm input[type="text"].domain-input{all: unset; box-sizing: border-box; padding: 8px 12px; border-radius: var(--border-radius); border: 1.5px solid var(--border-color); background: var(--border-color); color: var(--text-color); font-size: 1.08em; font-family: var(--font-mono); margin-right: 8px; min-width: 220px; max-width: 340px; width: auto; box-shadow: 0 2px 8px var(--box-shadow-verylight); transition: border 0.2s, background 0.18s}
#dnsForm input[type="text"].domain-input:focus,
#spfForm input[type="text"].domain-input:focus{border: 1.5px solid var(--primary-color-dark); outline: none; background: var(--bg-color); color: var(--primary-color-light)}
@media (max-width:600px){#dnsForm input[type="text"].domain-input, #spfForm input[type="text"].domain-input{min-width: 0; width: 100%; max-width: 100%}} .swatch-demo{padding: 18px 24px; border-radius: var(--border-radius-small); font-weight: 600; font-size: 1.08em; margin-bottom: 18px; margin-right: 18px; display: inline-block; min-width: 120px; box-shadow: 0 1px 4px var(--box-shadow-minimal); border: 1.5px solid var(--border-color)}
.swatch-bg{color: var(--bg-color); background: #f9fafb; border: 1.5px solid var(--nav-link-muted)}
.swatch-border{color: var(--bg-color); background: var(--nav-link-muted); border: 1.5px solid var(--muted-text)}
.swatch-muted{color: var(--bg-color); background: var(--muted-text)}
.swatch-highlight{color: var(--bg-color); background: #dcfce7; border: 1.5px solid #a7f3d0}
.swatch-fail{color: var(--white); background: #b91c1c; border: 1.5px solid #fee2e2}
.swatch-pass{color: var(--white); background: #15803d; border: 1.5px solid #dcfce7} @media (max-width:600px){.swatch-demo{min-width: 0; width: 100%; margin-right: 0}} .spfgen-main{max-width: 600px; margin: 0 auto; padding-bottom: 32px}
.spfgen-hero{margin-bottom: 18px; text-align: center}
.spfgen-form{background: #20243a; border-radius: 16px; padding: 32px 28px 18px 28px; box-shadow: 0 2px 12px var(--box-shadow); margin-bottom: 32px; max-width: 540px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 18px}
.spfgen-row{display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 0; gap: 12px}
.spfgen-row-domain{margin-bottom: 10px}
.spfgen-label{min-width: 90px; font-weight: 500; color: var(--text-color); font-size: 1.08em}
.spfgen-input{background: var(--bg-color); border: 1.5px solid var(--border-color); border-radius: 7px; color: var(--text-color); font-size: 1.08em; padding: 8px 12px; margin-top: 4px; margin-bottom: 4px; width: 100%; transition: border var(--transition-fast)}
.spfgen-input:focus{border-color: var(--primary-color); outline: none}
.spfgen-section{border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 0; padding: 18px 18px 10px 18px; background: var(--border-color); display: flex; flex-direction: column; gap: 10px}
.spfgen-options{display: flex; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 0}
.spfgen-checkbox{background: var(--border-color); border-radius: 7px; padding: 7px 14px 7px 8px; margin-bottom: 6px; box-shadow: 0 1px 4px var(--box-shadow-light); cursor: pointer; transition: background 0.15s; display: flex; align-items: center; gap: 7px; font-size: 1.04em}
.spfgen-checkbox:hover{background: #1e293b}
.spfgen-includes{display: flex; flex-direction: column; gap: 6px; margin-top: 8px}
.spfgen-include{color: var(--muted-text); font-size: 0.98em; margin-left: 4px}
.spfgen-custom-include{width: 170px; margin-left: 8px; font-size: 1em; padding: 6px 10px}
.spfgen-radio{display: flex; align-items: center; gap: 7px; background: var(--border-color); border-radius: 7px; padding: 7px 14px 7px 8px; margin-bottom: 6px; box-shadow: 0 1px 4px var(--box-shadow-light); cursor: pointer; font-size: 1.04em}
.spfgen-radio:hover{background: #1e293b}
.spfgen-form input[type="checkbox"]{accent-color: var(--primary-color); width: 18px; height: 18px; margin-right: 7px; border-radius: 4px; border: 1.5px solid var(--border-color); background: var(--border-color); vertical-align: middle; transition: border var(--transition-fast)}
.spfgen-form input[type="checkbox"]:focus{outline: 2px solid var(--primary-color)}
.spfgen-form input[type="radio"]{accent-color: var(--primary-color); width: 18px; height: 18px; margin-right: 7px; vertical-align: middle}
.spfgen-policy-fail{color: var(--fail-color); font-weight: 600}
.spfgen-policy-softfail{color: #eab308; font-weight: 600}
.spfgen-policy-neutral{color: #64748b; font-weight: 600}
.spfgen-policy-allow{color: var(--pass-color); font-weight: 600}
.spfgen-policy-desc{color: var(--muted-text); font-size: 0.95em; margin-left: 2px}
.spfgen-actions{display: flex; gap: 16px; align-items: center; margin-top: 10px}
.spfgen-generate, .spfgen-copy{background: var(--primary-color); color: var(--white); border: none; border-radius: 7px; padding: 8px 22px; font-size: 1.08em; font-weight: 600; cursor: pointer; transition: background var(--transition-fast)}
.spfgen-generate:hover, .spfgen-copy:hover{background: var(--primary-color-dark)}
.spfgen-copy{background: #334155; color: #e0e7ff}
.spf-record{background: var(--bg-color); border-radius: 7px; padding: 12px 16px; margin: 18px 0 8px 0; font-family: var(--font-mono); font-size: 1.08em; word-break: break-all; color: var(--primary-color-light); box-shadow: 0 1px 6px var(--box-shadow-minimal)}
.spf-note{color: var(--muted-text); font-size: 1em; margin-bottom: 8px} .spfgen-row, .spfgen-options{flex-direction: column; gap: 7px} .analyzer-attractive-box{background: var(--border-color); border: 2px solid var(--primary-color-dark); color: var(--text-color); border-radius: var(--border-radius); padding: 24px 20px 16px 20px; margin-bottom: 28px; margin-top: 10px; box-shadow: 0 2px 8px var(--box-shadow-medium); width: fit-content}
.analyzer-attractive-box h2{margin-top: 0; color: var(--primary-color); font-size: 1.5em; margin-bottom: 16px}
.analyzer-attractive-box table{width: auto; border-collapse: separate; border-spacing: 0; background: none; color: inherit; margin: 0 0 0 0; box-shadow: none; border-radius: 0}
.analyzer-attractive-box th, .analyzer-attractive-box td{text-align: left; vertical-align: top; padding: 0.6em 1.2em; min-width: 10px; max-width: 480px; word-break: break-word; overflow-wrap: break-word; width: auto}
.analyzer-attractive-box th{background: none; color: var(--primary-color); font-weight: 600; white-space: nowrap}
.analyzer-attractive-box td{background: none; width: auto; color: inherit}
.analyzer-attractive-box tr:last-child td{border-bottom: none}
.analyzer-attractive-box th:nth-child(2), .analyzer-attractive-box td:nth-child(2){width: fit-content; white-space: pre; word-break: normal; overflow-wrap: normal; overflow-x: auto} .header-value-pre{} .received-timeline{list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; border-left: 3px solid var(--primary-color-dark); min-width: 0}
.received-timeline li{position: relative; margin-bottom: 22px; padding-left: 18px; color: var(--primary-color-light); font-family: var(--font-mono); font-size: 1.08em; background: none; word-break: break-word; transition: background 0.15s}
.received-timeline li:last-child{margin-bottom: 0}
.received-timeline li::before{content: ''; position: absolute; left:-18px; top: 4px; width: 13px; height: 13px; background: linear-gradient(135deg, var(--primary-color) 60%, var(--primary-color-dark) 100%); border: 2.5px solid var(--border-color); border-radius: 50%; box-shadow: 0 2px 8px var(--box-shadow-strong); z-index: 1}
.hop-time{display: inline-block; margin-left: 10px; padding: 2px 10px; background: var(--border-color); color: var(--primary-color); border-radius: 999px; font-size: 0.98em; font-weight: 600; box-shadow: 0 1px 4px var(--box-shadow); vertical-align: middle; margin-top: 4px}
@media (max-width:600px){.received-timeline{padding-left: 10px; border-left-width: 2px} .received-timeline li{font-size: 0.98em; padding-left: 12px} .received-timeline li::before{width: 9px; height: 9px; left:-12px; top: 6px; border-width: 1.5px} .hop-time{font-size: 0.93em; padding: 2px 7px}}:root{--glass-bg: rgba(35,38,58,0.72);--glass-blur: blur(12px);--glow-primary: 0 0 16px 2px var(--primary-color)66, 0 0 2px 0 var(--primary-color-dark)44;--glow-accent: 0 0 8px 2px var(--primary-color-light)88;--card-gradient: linear-gradient(120deg, var(--border-color) 60%, var(--primary-color-dark) 100%);--card-glass-border: 1.5px solid var(--primary-color)44;--card-glass-border-active: 2.5px solid var(--primary-color)99} .analyzer-attractive-box, .home-tool-card{background: var(--glass-bg); border: var(--card-glass-border); box-shadow: var(--box-shadow-blue), var(--glow-primary); transition: box-shadow 0.25s, border 0.22s, background 0.22s; position: relative; overflow: hidden}
.analyzer-attractive-box:hover, .home-tool-card:hover{border: var(--card-glass-border-active); box-shadow: var(--box-shadow-blue-strong), var(--glow-primary), 0 0 32px 2px var(--primary-color)33; background: linear-gradient(120deg, var(--border-color) 60%, var(--primary-color-dark) 100%)}
.analyzer-attractive-box::before, .home-tool-card::before{content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% 10%, var(--primary-color)22 0%, transparent 70%), radial-gradient(circle at 10% 90%, var(--primary-color-light)22 0%, transparent 70%); z-index: 0; transition: opacity 0.3s}
.analyzer-attractive-box> *, .home-tool-card> *{position: relative; z-index: 1} button:focus, .home-tool-link:focus, input:focus, textarea:focus, select:focus{outline: none; box-shadow: 0 0 0 3px var(--primary-color)55, 0 0 8px 2px var(--primary-color-dark)55; border-color: var(--primary-color); background: rgba(35,99,235,0.10); transition: box-shadow 0.18s, border 0.18s, background 0.18s} @keyframes card-border-glow{0%{box-shadow: 0 0 16px 2px var(--primary-color)66, 0 0 2px 0 var(--primary-color-dark)44} 50%{box-shadow: 0 0 32px 4px var(--primary-color)99, 0 0 8px 2px var(--primary-color-light)88} 100%{box-shadow: 0 0 16px 2px var(--primary-color)66, 0 0 2px 0 var(--primary-color-dark)44}}
.analyzer-attractive-box:focus-within, .home-tool-card:focus-within{animation: card-border-glow 2.2s infinite linear} .analyzer-attractive-box h2, .home-tool-card h4{font-family: var(--font-mono); letter-spacing: 0.04em; text-shadow: 0 2px 8px var(--primary-color-dark)33, 0 0 2px var(--primary-color)44; background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-light) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent; background-clip: text} .analyzer-attractive-box h2::after, .home-tool-card h4::after{content: ""; display: block; height: 3px; width: 0; background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-light) 100%); border-radius: 2px; transition: width 0.35s cubic-bezier(.4,2,.6,1); margin-top: 4px}
.analyzer-attractive-box:hover h2::after, .home-tool-card:hover h4::after{width: 60%} .analyzer-attractive-box table, .analyzer-attractive-box th, .analyzer-attractive-box td{background: transparent; border: none; box-shadow: none}
.analyzer-attractive-box th, .analyzer-attractive-box td{border-bottom: 1px solid var(--primary-color)22}
.analyzer-attractive-box tr:last-child td{border-bottom: none} .received-timeline li::before{background: radial-gradient(circle at 60% 40%, var(--primary-color) 70%, var(--primary-color-light) 100%); box-shadow: 0 0 12px 2px var(--primary-color)99, 0 0 2px 0 var(--primary-color-dark)44; border: 2.5px solid var(--primary-color-light); transition: box-shadow 0.18s}
.received-timeline li:hover::before{box-shadow: 0 0 24px 4px var(--primary-color)ee, 0 0 8px 2px var(--primary-color-light)cc} .analyzer-attractive-box, .home-tool-card{will-change: transform, box-shadow}
.analyzer-attractive-box:hover, .home-tool-card:hover{transform: scale(1.025)} .analyzer-attractive-box, .home-tool-card{color: var(--text-color)} .header-value-pre{font-family: var(--font-mono); font-size: 1em; background: rgba(35,38,58,0.85); color: var(--primary-color-light); border-radius: 7px; padding: 10px 12px; margin: 0; max-width: 1200px; max-height: 220px; overflow-x: auto; overflow-y: auto; white-space: pre; word-break: normal; box-shadow: 0 1px 6px var(--box-shadow-minimal); border: 1.5px solid var(--primary-color-dark)33; user-select: text; line-height: 1.5}
.header-value-pre::-webkit-scrollbar{height: 8px; width: 8px; background: var(--border-color); border-radius: 6px}
.header-value-pre::-webkit-scrollbar-thumb{background: rgba(from var(--primary-color-dark) r g b / 0.33); border-radius: 6px}
.analyzer-attractive-box th.key, .analyzer-attractive-box td.key, .analyzer-attractive-box td.key{white-space: pre; word-break: normal; overflow-wrap: normal; overflow-x: auto} .site-footer {  background: linear-gradient(90deg, var(--primary-color-dark) 0%, #1e293b 100%);  border-top: 2px solid #17407c;  color: #f7f8fa;  font-size: 0.97em;  padding: 0.7em 0 0.5em 0;  width: 100vw;  min-width: 100vw;  box-sizing: border-box;  text-align: center;  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;  letter-spacing: 0.01em;  box-shadow: 0 2px 16px 0 rgba(30,40,60,0.06);  position: fixed;  left: 0;  bottom: 0;  z-index: 100;}
body {
  padding-bottom: 60px; /* ensure content is not hidden behind footer */
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.2em;
  max-width: 900px;
  margin: 0 auto;
}
.footer-brand {
  font-weight: 700;
  font-size: 1em;
  color: #f7f8fa;
  letter-spacing: 0.03em;
}
.footer-home-link {
  color: #f7f8fa;
  text-decoration: none;
  font-weight: 700;
  margin-left: 0.2em;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}
.footer-home-link:hover,
.footer-home-link:focus {
  color: var(--primary-color-light);
  text-decoration: underline;
}
.footer-links {
  font-size: 1em;
  font-weight: 500;
}
.footer-links a {
  color: var(--primary-color-light);
  text-decoration: none;
  margin: 0 0.3em;
  font-weight: 500;
  transition: color 0.15s;
}
.footer-links a:hover,
.footer-links a:focus {
  color: var(--white);
  text-decoration: underline;
}
.footer-sep {
  color: var(--primary-color);
  margin: 0 0.4em;
  font-weight: 400;
}
.footer-note {
  color: #cbd5e1;
  font-size: 0.93em;
  font-style: italic;
}
@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    gap: 0.7em;
    font-size: 0.95em;
  }
  .footer-brand {
    font-size: 0.98em;
  }
  .site-footer {
    font-size: 0.93em;
    padding: 0.7em 0 0.7em 0;
  }
}
.email-timeline-demo {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--border-color);
}
.email-timeline-demo::-webkit-scrollbar {
  height: 10px;
  background: var(--border-color);
  border-radius: var(--border-radius-small);
}
.email-timeline-demo::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--primary-color-dark) 0%, var(--primary-color) 100%);
  border-radius: var(--border-radius-small);
  box-shadow: 0 2px 8px var(--box-shadow);
}
.email-timeline-demo::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
}