/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0;}main{display:block;}h1{font-size:2em;margin:.67em 0;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-.25em;}sup{top:-.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:.35em .75em .625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:list-item;}template{display:none;}[hidden]{display:none;}
                    
*, *::before, *::after {
    box-sizing: border-box;
}
:root {
    --primary: #0d6efd;
    --secondary: #6c757d;
    --color3: #0dcaf0;
    --color4: #198754;
    --white: white;
    --light: #f8f9fa;
    --dark: #212529;
}body, html {
    min-height: 100vh;
}

/* === Enhanced theme and animations === */
*, *::before, *::after { box-sizing: border-box; }
:root {
    --primary: #3b82f6;
    --primary-600: #2563eb;
    --accent: #8b5cf6;
    --surface: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
}

/* Animated gradient background */
body {
    background: radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,.12), transparent),
                radial-gradient(1200px 700px at 90% 20%, rgba(139,92,246,.12), transparent),
                linear-gradient(180deg, #f6f9ff 0%, #f1f5ff 100%);
    animation: bgFloat 18s ease-in-out infinite alternate;
    min-height: 100vh;
    position: relative;
}
/* Ensure content is visible if animation fails */
body.page-fade {
    animation: fadeInUp .6s ease forwards, bgFloat 18s ease-in-out infinite alternate;
}
@keyframes bgFloat {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: -60px -40px, 80px 40px, 0 0; }
}

/* Page fade-in - with fallback to ensure visibility */
.page-fade { 
  opacity: 0; 
  transform: translateY(6px); 
  animation: fadeInUp .6s ease forwards;
}
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
/* Fallback: if animation doesn't work, ensure visibility after a delay */
@supports not (animation: fadeInUp) {
  .page-fade { opacity: 1; transform: none; }
}
/* Safety: ensure content is visible after animation completes */
@media (prefers-reduced-motion: no-preference) {
  body.page-fade {
    animation-delay: 0s;
  }
}

/* Glass card look for blocks */
.step-block {
    background: rgba(255,255,255,.75);
    backdrop-filter: saturate(140%) blur(8px);
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 10px 30px rgba(15,23,42,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
/* Remove hover shift on big blocks */
.step-block:hover { transform: none; box-shadow: 0 10px 30px rgba(15,23,42,.10); }

/* Headings accent underline */
.step-block h3 { position: relative; }
.step-block h3::after {
    content: "";
    position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
    width: 64px; height: 3px; border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* Platform pills */
.platform-option {
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
    transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
.platform-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15,23,42,.10);
    border-color: var(--primary);
    background: rgba(59,130,246,.08);
    color: var(--primary);
}
input[type="radio"]:checked + .platform-option {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(59,130,246,.10);
    box-shadow: 0 0 0 3px rgba(59,130,246,.12) inset;
}

/* Primary button micro-interaction (scoped) */
.back-button, #getBtn {
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.back-button:hover, #getBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(59,130,246,.20);
}
.back-button:active, #getBtn:active { transform: translateY(0); box-shadow: none; }
/* Disabled state */
#getBtn:disabled, .back-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}
#getBtn:disabled:hover, .back-button:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Loading state for primary button */
#getBtn { display:inline-flex; align-items:center; justify-content:center; }
#getBtn.loading { position: relative; pointer-events: none; opacity: .95; color: transparent; }
#getBtn.loading::after {
    content: "";
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 18px; height: 18px; border-radius: 999px;
    border: 2px solid rgba(255,255,255,.55); border-top-color: #fff;
    animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Result reveal */
#resultBox { transition: opacity .25s ease, transform .25s ease; }
#resultBox[style*="display: flex"] { opacity: 1 !important; transform: translateY(0) !important; }
#resultBox[style*="display: none"] { opacity: 0 !important; transform: translateY(6px) !important; }

/* Value pop-in and shine */
#valueBox.pop-in { animation: pop .22s ease-out, shine 1.4s ease-out; }
@keyframes pop { 0% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes shine {
  0% { box-shadow: 0 0 0 rgba(59,130,246,0); }
  25% { box-shadow: 0 0 0 6px rgba(59,130,246,.18); }
  100% { box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
}

/* Copy button pulse on success (icon change already in JS) */
#copyBtn { transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
#copyBtn:hover { transform: scale(1.04); box-shadow: 0 6px 16px rgba(15,23,42,.12); }

/* Dropdown animation */
.dropdown-panel { transform-origin: top left; transition: opacity .2s ease, transform .2s ease; opacity: 0; transform: scale(.98); }
.dropdown-panel.open { opacity: 1; transform: scale(1); }

/* Banner subtle float */
.neon-banner { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Dark theme background refinement (works with existing dark toggles) */
html.dark body {
    background: radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,.18), transparent),
                radial-gradient(1200px 700px at 90% 20%, rgba(139,92,246,.18), transparent),
                linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
}

/* Theme toggle hover highlight */
.theme-toggle { transition: box-shadow .2s ease, background .2s ease, transform .12s ease; }
.theme-toggle:hover { box-shadow: 0 10px 26px rgba(15,23,42,.18); transform: translateY(-1px); }
html.dark .theme-toggle:hover { box-shadow: 0 12px 30px rgba(0,0,0,.45); }

/* Toasts */
.toast-container { position: fixed; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 2000; }
.toast { background: #111827; color: #e5e7eb; padding: 10px 12px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; transform: translateY(-6px); animation: toastIn .22s ease forwards; }
.toast.success { background: #065f46; }
.toast.error { background: #7f1d1d; }
@keyframes toastIn { to { opacity: 1; transform: translateY(0); } }

/* Accessibility: focus-visible */
:focus-visible { outline: 3px solid rgba(59,130,246,.65); outline-offset: 2px; border-radius: 6px; }

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}