/* Fulfinex Visual System v2 - visual override only. Existing functionality remains in the original JS/CSS. */
:root,
html[data-theme="dark"]{
  --bg:#061329;--bg2:#081b38;--surface:#0b2142;--surface2:#0d2850;--surface3:#0a1f3e;
  --border:#174a86;--border-soft:#123867;--text:#f7faff;--muted:#a9b9d3;--muted2:#7184a5;
  --brand:#19e6f2;--brand-strong:#1687ff;--brand-soft:#c7e8ff;--violet:#7447ff;--magenta:#cb38ff;
  --danger:#ff5f72;--warn:#ffc857;--ok:#25e6a4;
  --brand-gradient:linear-gradient(100deg,#19e6f2 0%,#1687ff 43%,#7447ff 73%,#cb38ff 100%);
  --shadow:0 28px 74px rgba(1,8,24,.38);--shadow-soft:0 16px 40px rgba(1,8,24,.24);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f6f9ff;--bg2:#eef4fc;--surface:#ffffff;--surface2:#f7faff;--surface3:#eef4fc;
  --border:#cfe0f5;--border-soft:#dce8f7;--text:#081632;--muted:#62718d;--muted2:#8290a7;
  --brand:#13ccd9;--brand-strong:#1677ff;--brand-soft:#0f74bb;--violet:#7047eb;--magenta:#b83bea;
  --danger:#d9475b;--warn:#b77a06;--ok:#0ca976;
  --brand-gradient:linear-gradient(100deg,#13d8e4 0%,#1677ff 43%,#7047eb 73%,#c13ee9 100%);
  --shadow:0 22px 56px rgba(47,75,116,.13);--shadow-soft:0 12px 30px rgba(47,75,116,.08);
  color-scheme:light;
}
body{
  background:
    radial-gradient(circle at 10% -8%,rgba(25,230,242,.10),transparent 31%),
    radial-gradient(circle at 93% 3%,rgba(116,71,255,.11),transparent 32%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 48%,var(--bg) 100%);
  color:var(--text);
}
html[data-theme="light"] body{
  background:
    radial-gradient(circle at 10% -8%,rgba(19,204,217,.11),transparent 30%),
    radial-gradient(circle at 93% 2%,rgba(112,71,235,.08),transparent 29%),
    linear-gradient(180deg,#fbfdff,#f3f7fd 55%,#f6f9ff);
}

/* Unified Fulfinex brand */
.brandmark{
  background:url("/favicon-192.png") center/cover no-repeat!important;color:transparent!important;font-size:0!important;
  border:0!important;box-shadow:0 0 0 1px rgba(25,230,242,.36),0 0 20px rgba(116,71,255,.18)!important;
}
.brandcopy strong{font-size:17px;letter-spacing:-.02em}
.brandcopy small{color:var(--muted)!important}

/* Navigation + theme switch */
.nav{background:color-mix(in srgb,var(--bg) 84%,transparent);border-color:color-mix(in srgb,var(--border) 48%,transparent);box-shadow:0 8px 30px rgba(2,9,27,.08)}
html[data-theme="light"] .nav{background:rgba(251,253,255,.88);box-shadow:0 8px 28px rgba(45,70,105,.05)}
.navin{height:72px}
.navlinks{color:var(--muted)}
.navlinks a:not(.btn):hover{color:var(--text)}
.lang{color:var(--muted)}
.theme-toggle{
  min-height:36px;border:1px solid color-mix(in srgb,var(--border) 82%,transparent);border-radius:999px;padding:5px 10px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface2) 92%,transparent),color-mix(in srgb,var(--violet) 9%,var(--surface)));
  color:var(--text);display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:.16s ease;
}
.theme-toggle:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--brand-strong) 65%,var(--border));box-shadow:0 0 18px rgba(22,135,255,.10)}
.theme-toggle span:first-child{width:19px;height:19px;border-radius:999px;display:grid;place-items:center;background:var(--brand-gradient);color:#fff;font-size:11px}
.theme-toggle-label{font-size:10px;color:var(--muted)}

/* Buttons */
.btn{border-color:var(--border);border-radius:12px;background:linear-gradient(180deg,var(--surface2),var(--surface3));color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.btn:hover:not(:disabled){border-color:color-mix(in srgb,var(--brand-strong) 60%,var(--border));background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 90%,var(--brand-strong) 10%),var(--surface3));box-shadow:0 8px 18px rgba(22,135,255,.09)}
.btn:focus-visible{outline-color:rgba(25,230,242,.34)}
.btn.primary{border-color:rgba(43,205,255,.8);background:var(--brand-gradient);color:#061329;box-shadow:0 10px 24px rgba(22,135,255,.14),0 0 18px rgba(116,71,255,.08)}
.btn.primary:hover:not(:disabled){background:var(--brand-gradient);filter:brightness(1.06);border-color:#70efff}
.btn.danger{color:color-mix(in srgb,var(--danger) 65%,var(--text));border-color:color-mix(in srgb,var(--danger) 42%,transparent);background:color-mix(in srgb,var(--danger) 8%,var(--surface))}

/* Typography */
.eyebrow{color:color-mix(in srgb,var(--brand) 68%,var(--text));letter-spacing:.12em}
.badge{border-color:rgba(25,230,242,.25);background:linear-gradient(135deg,rgba(25,230,242,.08),rgba(116,71,255,.09));color:var(--brand-soft)}
.badge.neutral{border-color:var(--border);background:color-mix(in srgb,var(--surface2) 90%,transparent);color:var(--muted)}
.dot{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 12%,transparent),0 0 12px color-mix(in srgb,var(--ok) 32%,transparent)}
h1 em{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead,.sectionintro,.section-copy{color:var(--muted)}

/* Homepage */
.hero{padding-top:92px}
.hero-panel{
  border-color:color-mix(in srgb,var(--brand-strong) 42%,var(--border));border-radius:24px;
  background:radial-gradient(circle at 7% 2%,rgba(25,230,242,.09),transparent 30%),radial-gradient(circle at 100% 0%,rgba(203,56,255,.09),transparent 32%),linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 88%,#030c1e));
  box-shadow:var(--shadow),0 0 34px rgba(22,135,255,.08);
}
.hero-panel:before{background:linear-gradient(135deg,rgba(25,230,242,.6),rgba(22,135,255,.08) 48%,rgba(203,56,255,.58));opacity:.72}
.demo-head{border-color:var(--border-soft)}
.demo-status{color:#8deef3;border-color:rgba(25,230,242,.3);background:rgba(25,230,242,.07)}
.demo-card,.demo-field{border-color:var(--border-soft);background:color-mix(in srgb,var(--surface2) 88%,transparent)}
.demo-license span,.demo-brand small,.demo-foot{color:var(--muted)}
.demo-cta{background:var(--brand-gradient);color:#061329;box-shadow:0 8px 18px rgba(22,135,255,.12)}
.section.alt{background:color-mix(in srgb,var(--surface) 26%,transparent);border-color:color-mix(in srgb,var(--border) 36%,transparent)}
.card,.authcard,.legal-card,.install-panel,.guide-card{
  border-color:var(--border-soft);border-radius:18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface3) 95%,transparent));
  box-shadow:var(--shadow-soft);
}
html[data-theme="light"] .card,html[data-theme="light"] .authcard,html[data-theme="light"] .legal-card,html[data-theme="light"] .install-panel,html[data-theme="light"] .guide-card{background:rgba(255,255,255,.92)}
.card:hover{border-color:color-mix(in srgb,var(--brand-strong) 46%,var(--border))}
.icon{border-color:rgba(25,230,242,.24);background:linear-gradient(135deg,rgba(25,230,242,.10),rgba(116,71,255,.10));color:var(--brand-soft)}
.step:before{background:var(--brand-gradient);color:#061329;box-shadow:0 0 18px rgba(116,71,255,.11)}
.price.featured,.premium-card{border-color:color-mix(in srgb,var(--violet) 55%,var(--border));box-shadow:0 0 0 1px rgba(116,71,255,.10),var(--shadow-soft)}
.price .tag,.premium-tag{color:#d9b9ff!important}
.features li{color:color-mix(in srgb,var(--text) 76%,var(--muted))}.features li:before{color:var(--ok)}
.founder-meter{background:var(--surface3);border-color:var(--border)}.founder-meter-bar{background:var(--brand-gradient)}
.founder-counter{color:var(--brand-soft)}
.plan-rates span{border-color:var(--border);background:var(--surface3);color:var(--text)}

/* Auth + account */
.authpoint{color:var(--muted)}.authpoint:before{background:linear-gradient(135deg,rgba(25,230,242,.12),rgba(116,71,255,.12));color:var(--brand)}
.tabs{background:var(--surface3);border-color:var(--border-soft)}.tabs button{color:var(--muted)}.tabs button.active{background:linear-gradient(135deg,rgba(22,135,255,.18),rgba(116,71,255,.16));color:var(--text);box-shadow:inset 0 0 0 1px rgba(78,145,255,.18)}
.field label{color:color-mix(in srgb,var(--text) 82%,var(--muted))}
.field input,.profile-grid .field select,.devactions input{
  border-color:var(--border);border-radius:11px;background:var(--surface3);color:var(--text);
}
html[data-theme="light"] .field input,html[data-theme="light"] .profile-grid .field select,html[data-theme="light"] .devactions input{background:#fff}
.field input::placeholder{color:var(--muted2)}
.field input:focus,.profile-grid .field select:focus,.devactions input:focus{border-color:var(--brand-strong);box-shadow:0 0 0 3px rgba(22,135,255,.10)}
.password-toggle{color:var(--brand-soft)}.password-toggle:hover{background:rgba(22,135,255,.08);color:var(--text)}
.google-auth-host{border-color:var(--border-soft);background:var(--surface3)}
.account-display-name,.account-email{color:var(--text)}
.account-metrics{gap:12px}
.metric,.device,.security-row,.legal-meta>div,.legal-box,.guide-step,.install-mini-steps>span{
  border-color:var(--border-soft);background:color-mix(in srgb,var(--surface3) 94%,transparent);border-radius:13px;
}
html[data-theme="light"] .metric,html[data-theme="light"] .device,html[data-theme="light"] .security-row,html[data-theme="light"] .legal-meta>div,html[data-theme="light"] .legal-box,html[data-theme="light"] .guide-step,html[data-theme="light"] .install-mini-steps>span{background:#fbfdff}
.metric:hover{border-color:color-mix(in srgb,var(--brand-strong) 42%,var(--border))}
.metric span,.metric small,.device p{color:var(--muted)}
.billing-active{border-color:color-mix(in srgb,var(--violet) 45%,var(--border));background:linear-gradient(135deg,rgba(22,135,255,.12),rgba(116,71,255,.18),rgba(203,56,255,.09))}
.billing-active p{color:var(--muted)}.billing-plan{color:var(--brand-soft);border-color:rgba(25,230,242,.25);background:rgba(25,230,242,.06)}
.billing-tools{border-color:var(--border);background:linear-gradient(180deg,var(--surface),var(--surface3))}
.billing-action{background:var(--surface3)!important;border-color:var(--border)!important}.billing-action:hover{border-color:var(--brand-strong)!important;background:color-mix(in srgb,var(--surface3) 90%,var(--brand-strong) 10%)!important}.billing-action-title{color:var(--text)}.billing-action-copy{color:var(--muted)}
.account-menu{background:var(--surface);border-color:var(--border)}.account-menu button{color:var(--text)}.account-menu button:hover{background:var(--surface2)}

/* Install + legal */
.install-browser-option{border-color:var(--border);background:var(--surface3)}.install-browser-option:hover{border-color:var(--brand-strong);background:var(--surface2)}
.browser-badge{border-color:rgba(25,230,242,.26);background:linear-gradient(135deg,rgba(25,230,242,.10),rgba(116,71,255,.12));color:var(--brand-soft)}
.store-state{border-color:var(--border);color:var(--muted)}.install-browser-option.ready .store-state{border-color:rgba(25,230,242,.3);color:var(--brand-soft);background:rgba(25,230,242,.06)}
.install-success{border-color:rgba(37,230,164,.34);background:linear-gradient(135deg,rgba(37,230,164,.09),rgba(22,135,255,.08),var(--surface))}
.legal p,.legal li,.legal-table th,.legal-table td{color:var(--muted)}
.legal-table-wrap{border-color:var(--border-soft)}.legal-table{background:var(--surface3)}.legal-table th{background:var(--surface2);color:var(--brand-soft)}
.legal code{color:var(--brand-soft);background:var(--surface2);border-color:var(--border)}
.footer{border-color:var(--border-soft);color:var(--muted)}

/* Light-mode cleanup for elements with legacy fixed dark colors */
html[data-theme="light"] .demo-field,
html[data-theme="light"] .demo-card,
html[data-theme="light"] .tabs,
html[data-theme="light"] .billing-tools,
html[data-theme="light"] .billing-action,
html[data-theme="light"] .account-menu,
html[data-theme="light"] .install-browser-option,
html[data-theme="light"] .legal-table{background:#fff!important}
html[data-theme="light"] .billing-active{background:linear-gradient(135deg,#eef9ff,#f6f1ff)}
html[data-theme="light"] .google-auth-host{background:#fff}
html[data-theme="light"] .message.ok{color:#087653}html[data-theme="light"] .message.err{color:#a82f42}html[data-theme="light"] .message.warn{color:#875b08}
html[data-theme="light"] .legal-link{color:#0d6fb8}

@media(max-width:900px){.theme-toggle-label{display:none}.theme-toggle{padding-inline:8px}.hero{padding-top:70px}}
@media(max-width:620px){.navin{height:64px}.theme-toggle{min-height:34px}.brandmark{width:34px;height:34px}.hero{padding-top:58px}}


/* Fulfinex v2.1 - production polish */
.billing-grid .card{min-height:355px}
.billing-grid .features{flex:1}
.billing-grid .checkout-btn{
  min-height:58px;height:58px;display:flex;align-items:center;justify-content:center;text-align:center;
  line-height:1.15;padding:10px 14px;font-weight:800;border-radius:13px;
}
.billing-grid .checkout-pair{min-height:58px;align-items:stretch}
.billing-grid .checkout-pair .checkout-btn{height:58px;min-height:58px}
.billing-grid .founder-card>.checkout-btn{width:100%}

.install-browser-option.locked{opacity:.72;cursor:not-allowed;border-style:dashed}
.install-browser-option.locked:hover{transform:none;border-color:var(--border);background:var(--surface3)}
.install-browser-option.locked .store-state{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 38%,var(--border));background:color-mix(in srgb,var(--warn) 8%,var(--surface3))}

/* Motion is intentionally subtle so Fulfinex stays fast inside a workday browser session. */
@keyframes ff-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ff-soft-pop{0%{opacity:0;transform:scale(.985)}100%{opacity:1;transform:scale(1)}}
@keyframes ff-brand-breathe{0%,100%{box-shadow:0 0 0 1px rgba(25,230,242,.30),0 0 18px rgba(116,71,255,.13)}50%{box-shadow:0 0 0 1px rgba(25,230,242,.44),0 0 26px rgba(116,71,255,.22)}}
@keyframes ff-gradient-drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.hero-grid>*,.authgrid>*,.account-hero,.billing-grid .card,.grid3 .card,.steps .step,.install-panel,.guide-card{
  animation:ff-rise .52s cubic-bezier(.22,.8,.3,1) both;
}
.hero-grid>*:nth-child(2),.authgrid>*:nth-child(2),.billing-grid .card:nth-child(2),.grid3 .card:nth-child(2),.steps .step:nth-child(2){animation-delay:.07s}
.billing-grid .card:nth-child(3),.grid3 .card:nth-child(3),.steps .step:nth-child(3){animation-delay:.14s}
.steps .step:nth-child(4){animation-delay:.21s}
.account-metrics .metric,.device,.security-row,.install-browser-option{animation:ff-soft-pop .38s ease both}
.brandmark{animation:ff-brand-breathe 5.5s ease-in-out infinite}
.btn.primary{background-size:180% 180%;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,border-color .16s ease}
.btn.primary:hover:not(:disabled){animation:ff-gradient-drift 3s ease infinite;transform:translateY(-1px)}
.price,.authcard,.guide-card,.install-panel,.metric,.device,.install-browser-option{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.price:hover,.guide-card:hover,.install-panel:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft),0 0 24px rgba(22,135,255,.06)}

@media(max-width:620px){
  .billing-grid .card{min-height:0}
  .billing-grid .checkout-pair{grid-template-columns:1fr 1fr}
  .billing-grid .checkout-btn,.billing-grid .checkout-pair .checkout-btn{min-height:56px;height:56px}
}
@media(max-width:430px){.billing-grid .checkout-pair{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}

/* v2.2 - account email change */
.email-change-panel,.password-change-panel{background:color-mix(in srgb,var(--surface2) 92%,transparent);border-color:var(--border-soft)}
.email-change-note{color:var(--muted)}
html[data-theme="light"] .email-change-panel,html[data-theme="light"] .password-change-panel{background:#fbfdff}
.security-actions .btn{min-width:132px}
@media(max-width:620px){.security-actions .btn{flex:1 1 150px}}