:root{--slate: #00242e;--slate-deep: #001a21;--panel: #0b2e38;--panel-2: #103a45;--panel-3: #15454f;--frost: #1f9cb6;--frost-br: #37bdd6;--sky: #076e81;--sage: #a6be85;--sage-br: #c3d6a6;--amber: #e0a45a;--red: #e0705f;--ink: #e6e8e4;--ink-2: rgba(230, 232, 228, .66);--ink-3: rgba(230, 232, 228, .42);--line: rgba(226, 228, 225, .1);--line-2: rgba(226, 228, 225, .18);--ff-disp: "Darker Grotesque", system-ui, sans-serif;--ff-body: "Helvetica Neue", Helvetica, Arial, sans-serif;--ff-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;--r-sm: 10px;--r-md: 13px;--r-lg: 18px;--r-xl: 26px;--shadow-md: 0 10px 30px rgba(0, 0, 0, .3);--shadow-lg: 0 20px 50px rgba(0, 0, 0, .4);--glow-frost: 0 8px 24px rgba(31, 156, 182, .35);--transition: .16s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%}body{font-family:var(--ff-body);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;background:radial-gradient(130% 90% at 50% -20%,#0d3945 0%,var(--slate) 45%,var(--slate-deep) 100%);background-attachment:fixed;display:flex;justify-content:center;padding:clamp(16px,4vw,56px) clamp(12px,3vw,32px)}.app-shell{width:100%;max-width:960px;background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 100%);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:clamp(20px,4vw,40px);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.app-shell:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--frost)}.app-header{display:flex;align-items:center;gap:16px;padding-bottom:clamp(16px,3vw,24px);margin-bottom:clamp(20px,4vw,32px);border-bottom:1px solid var(--line)}.app-header .brand-logo{height:34px;width:auto;flex:0 0 auto}.app-header .brand-divider{width:1px;height:34px;background:var(--line-2);flex:0 0 auto}.app-header .brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}.app-header .brand-eyebrow{font-family:var(--ff-mono);font-size:10.5px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--frost-br)}.app-header .brand-product{font-family:var(--ff-disp);font-weight:700;font-size:clamp(20px,3.4vw,26px);line-height:1;color:var(--ink);letter-spacing:.2px}.title-brand{font-family:var(--ff-disp);font-weight:800;font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.02;letter-spacing:.3px;color:var(--ink);margin:0 0 6px}.title-sub{font-size:.95rem;color:var(--ink-2);margin:0 0 clamp(20px,4vw,30px);max-width:62ch}.section-label{display:flex;align-items:center;gap:10px;font-family:var(--ff-mono);font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);margin:clamp(18px,3vw,26px) 0 14px}.section-label:after{content:"";flex:1;height:1px;background:var(--line)}.section-label .dot{width:7px;height:7px;border-radius:50%;background:var(--frost-br);box-shadow:0 0 0 3px #37bdd62e}.section-label.optional .dot{background:var(--sage);box-shadow:0 0 0 3px #a6be852e}.section-hint{font-size:.8rem;color:var(--ink-3);margin:-6px 0 14px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.form-grid.compact{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.form-field{display:flex;flex-direction:column;gap:7px}.form-field label{font-size:.82rem;font-weight:600;color:var(--ink-2);padding-left:2px}.form-field input,.binary-select{width:100%;height:48px;padding:0 14px;font-size:.95rem;font-family:var(--ff-body);color:var(--ink);background:#ffffff0b;border:1px solid var(--line-2);border-radius:var(--r-md);transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}.form-field input::placeholder{color:var(--ink-3)}.form-field input:hover,.binary-select:hover{background:#ffffff12}.form-field input:focus,.binary-select:focus{outline:none;border-color:var(--frost-br);background:#ffffff12;box-shadow:0 0 0 3px #1f9cb640}.form-field input[type=number]::-webkit-outer-spin-button,.form-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.form-field input[type=number]{-moz-appearance:textfield}.form-field input[type=date]{color-scheme:dark;cursor:pointer}.form-field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.75) sepia(.4) saturate(3) hue-rotate(150deg);cursor:pointer;opacity:.85}.binary-select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--frost-br) 50%),linear-gradient(135deg,var(--frost-br) 50%,transparent 50%);background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 15px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}.binary-select option{color:#10202a;background:var(--ink)}.btn-primary{width:100%;height:54px;margin-top:clamp(20px,4vw,30px);font-family:var(--ff-body);font-size:1rem;font-weight:700;letter-spacing:.3px;color:#00242e;border:none;border-radius:var(--r-lg);background:var(--frost);cursor:pointer;transition:background var(--transition),transform var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:10px}.btn-primary:hover:not(:disabled){background:var(--frost-br)}.btn-primary:active:not(:disabled){transform:scale(.99)}.btn-primary:disabled{opacity:.55;cursor:default}.btn-spinner{width:17px;height:17px;border:2.5px solid rgba(0,36,46,.35);border-top-color:#00242e;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.form-error{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 16px;font-size:.9rem;font-weight:600;color:#f4c3ba;background:#e0705f1f;border:1px solid rgba(224,112,95,.32);border-radius:var(--r-md)}.form-error:before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--red);color:#2a0f0b;font-weight:800;font-size:.8rem;flex:0 0 auto}.result-card{margin-top:clamp(22px,4vw,32px);padding:clamp(18px,3vw,26px);background:linear-gradient(180deg,var(--panel-3) 0%,var(--panel-2) 100%);border:1px solid var(--line-2);border-radius:var(--r-xl);position:relative;overflow:hidden;animation:rise .32s cubic-bezier(.2,.7,.2,1)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.result-eyebrow{font-family:var(--ff-mono);font-size:10.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}.result-hero{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:20px;background:linear-gradient(135deg,#a6be8529,#1f9cb61a);border:1px solid rgba(166,190,133,.3);border-radius:var(--r-lg)}.result-hero .pill{flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:linear-gradient(150deg,var(--sage-br),var(--sage));display:flex;align-items:center;justify-content:center;color:#1c3318;font-weight:800;font-size:1.2rem;font-family:var(--ff-disp)}.result-hero .rec-label{font-family:var(--ff-mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3)}.result-hero .rec-name{font-family:var(--ff-disp);font-weight:800;font-size:clamp(1.5rem,4vw,2rem);line-height:1;color:var(--ink)}.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.rank-row .rank-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}.rank-name{font-size:.92rem;color:var(--ink-2)}.rank-row.is-top .rank-name{color:var(--ink);font-weight:700}.rank-pct{font-family:var(--ff-mono);font-size:.9rem;font-weight:600;color:var(--ink-2)}.rank-row.is-top .rank-pct{color:var(--sage-br)}.rank-bar{height:9px;border-radius:99px;background:#ffffff0f;overflow:hidden}.rank-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--frost),var(--frost-br));transition:width .42s cubic-bezier(.2,.7,.2,1)}.rank-row.is-top .rank-fill{background:linear-gradient(90deg,var(--sage),var(--sage-br))}.app-footer{margin-top:clamp(22px,4vw,30px);padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-3)}.app-footer .disclaimer{max-width:60ch}.app-footer .powered{display:flex;align-items:center;gap:8px;font-family:var(--ff-mono);letter-spacing:.5px}.app-footer .powered img{height:16px;opacity:.8}@media (max-width: 560px){.app-header{gap:12px}.app-header .brand-logo{height:28px}.result-hero{flex-wrap:wrap}}
