/* ═══════════════════════════════════════════════════
   CalcVerse Pro — Design System & Global Styles
   Version 2.0 | Production-Ready
   ═══════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
  /* Space & Depth Colors */
  --bg-void:        #05051A;
  --bg-space:       #0A0A2E;
  --bg-nebula:      #0F0F3A;
  --bg-glass:       rgba(255,255,255,0.055);
  --bg-glass-hover: rgba(255,255,255,0.09);

  /* Accent Palette */
  --violet:         #7B2FFF;
  --violet-glow:    rgba(123,47,255,0.35);
  --violet-dim:     rgba(123,47,255,0.15);
  --cyan:           #00D4FF;
  --cyan-glow:      rgba(0,212,255,0.3);
  --emerald:        #00E5A0;
  --ember:          #FF6B35;
  --gold:           #FFD166;
  --rose:           #FF4D6D;

  /* Text */
  --text-primary:   #F0F0FF;
  --text-secondary: #A0A0C0;
  --text-muted:     #6060A0;
  --text-inverse:   #0A0A2E;

  /* Borders */
  --border-subtle:  rgba(255,255,255,0.07);
  --border-glass:   rgba(255,255,255,0.13);
  --border-active:  rgba(123,47,255,0.6);

  /* 3D Shadows */
  --shadow-xs:      0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm:      0 4px 12px rgba(0,0,0,0.5);
  --shadow-md:      0 8px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:      0 16px 48px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.5);
  --shadow-violet:  0 8px 32px var(--violet-glow), 0 0 0 1px var(--border-active);
  --shadow-cyan:    0 8px 32px var(--cyan-glow);
  --shadow-inset:   inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.3);

  /* Glass Morphism */
  --glass-bg:       rgba(15,15,58,0.7);
  --glass-blur:     blur(20px) saturate(180%);
  --glass-border:   1px solid var(--border-glass);

  /* Typography */
  --font-display:   'Space Grotesk', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-mono:      'Space Mono', 'Courier New', monospace;

  /* Type Scale (1.25 ratio) */
  --text-xs:        0.64rem;
  --text-sm:        0.8rem;
  --text-base:      1rem;
  --text-lg:        1.25rem;
  --text-xl:        1.563rem;
  --text-2xl:       1.953rem;
  --text-3xl:       2.441rem;
  --text-4xl:       3.052rem;
  --text-5xl:       3.815rem;

  /* Spacing (8px grid) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Border Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 9999px;

  /* Transitions */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     150ms;
  --dur-base:     250ms;
  --dur-slow:     400ms;

  /* Z-Index Stack */
  --z-base:     1;
  --z-card:     10;
  --z-sticky:   100;
  --z-nav:      200;
  --z-modal:    300;
  --z-toast:    400;
  --z-cookie:   500;
}

/* ── Light Theme Override ── */
[data-theme="light"] {
  --bg-void:        #E8E8F0;
  --bg-space:       #F0F0F8;
  --bg-nebula:      #FFFFFF;
  --bg-glass:       rgba(255,255,255,0.85);
  --bg-glass-hover: rgba(255,255,255,0.95);
  --glass-bg:       rgba(255,255,255,0.85);
  --text-primary:   #1A1A2E;
  --text-secondary: #4A4A6A;
  --text-muted:     #8080A0;
  --border-subtle:  rgba(0,0,0,0.08);
  --border-glass:   rgba(0,0,0,0.12);
  --shadow-md:      0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:      0 16px 48px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.1);
  --shadow-inset:   inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.05);
}

/* ── Base Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--text-primary);
  background:var(--bg-space);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(123,47,255,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(0,212,255,0.08) 0%, transparent 50%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration:none;transition:color var(--dur-fast)}
a:hover{color:var(--violet)}
a:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
::selection{background:var(--violet-dim);color:var(--text-primary)}

/* ── Container ── */
.container{
  width:100%;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--space-4);
  padding-right:var(--space-4);
}
.container-sm{max-width:900px}
.container-md{max-width:1100px}

/* ── Section Spacing ── */
.section{
  padding-top:var(--space-12);
  padding-bottom:var(--space-12);
}

/* ── 3D Glass Card ── */
.glass-card{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md), var(--shadow-inset);
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base);
  transform-style:preserve-3d;
  will-change:transform;
}
.glass-card:hover{
  transform:translateY(-4px) translateZ(8px);
  box-shadow:var(--shadow-lg), var(--shadow-violet), var(--shadow-inset);
  border-color:var(--border-active);
}

/* ── 3D Tilt Effect ── */
.tilt-card{
  perspective:800px;
  transform-style:preserve-3d;
}
.tilt-card .tilt-inner{
  transition:transform 0.1s var(--ease-out);
  transform-style:preserve-3d;
}

/* ── Gradient Text ── */
.grad-text{
  background:linear-gradient(135deg, var(--violet) 0%, var(--cyan) 60%, var(--emerald) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.grad-text-ember{
  background:linear-gradient(135deg, var(--ember) 0%, var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ── Animated Gradient Border ── */
.glow-border{
  position:relative;
  border-radius:var(--radius-lg);
}
.glow-border::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:conic-gradient(
    from var(--angle,0deg),
    var(--violet), var(--cyan), var(--emerald), var(--violet)
  );
  animation:border-spin 4s linear infinite;
  z-index:-1;
  opacity:0;
  transition:opacity var(--dur-slow);
}
.glow-border:hover::before{opacity:1}
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes border-spin{to{--angle:360deg}}

/* ── Pulse Glow ── */
.pulse-glow{
  animation:pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 0 0 var(--violet-glow)}
  50%{box-shadow:0 0 0 12px transparent}
}

/* ── Floating Particles ── */
@keyframes float-particle{
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:1}
  90%{opacity:0.3}
  100%{transform:translateY(-10vh) scale(1);opacity:0}
}

/* ── Mesh Gradient Animation ── */
@keyframes mesh-move{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-20px) scale(1.05)}
  66%{transform:translate(-20px,15px) scale(0.97)}
}

/* ── Float Animation ── */
@keyframes float-calc{
  0%,100%{transform:translateY(0) rotateY(0deg) rotateX(0deg)}
  25%{transform:translateY(-12px) rotateY(3deg) rotateX(2deg)}
  50%{transform:translateY(-6px) rotateY(-2deg) rotateX(-1deg)}
  75%{transform:translateY(-15px) rotateY(1deg) rotateX(3deg)}
}

/* ── Count Up ── */
@keyframes count-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Shimmer Loading ── */
.shimmer{
  background:linear-gradient(90deg,
    var(--bg-glass) 0%,
    rgba(255,255,255,0.08) 50%,
    var(--bg-glass) 100%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Slide Down (cookie banner dismiss) ── */
@keyframes slideDown{
  to{transform:translateY(100%);opacity:0}
}

/* ── Bounce Animation ── */
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateY(0) translateX(-50%)}
  40%{transform:translateY(-12px) translateX(-50%)}
  60%{transform:translateY(-6px) translateX(-50%)}
}

/* ── Fade In Up ── */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Button System ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;
  font-family:var(--font-display);font-size:var(--text-base);font-weight:600;
  border:none;border-radius:var(--radius-pill);cursor:pointer;
  transition:all var(--dur-base) var(--ease-out);
  text-decoration:none;white-space:nowrap;
  position:relative;overflow:hidden;
  line-height:1.4;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.1));
  opacity:0;transition:opacity var(--dur-fast);
}
.btn:hover::after{opacity:1}
.btn:active{transform:scale(0.97)}
.btn:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

.btn-primary{
  background:linear-gradient(135deg,var(--violet),#5B0FD4);
  color:#fff;box-shadow:var(--shadow-violet);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px var(--violet-glow);color:#fff}

.btn-secondary{
  background:var(--bg-glass);color:var(--text-primary);
  border:1px solid var(--border-glass);backdrop-filter:blur(8px);
}
.btn-secondary:hover{background:var(--bg-glass-hover);border-color:var(--border-active);color:var(--text-primary)}

.btn-ember{background:linear-gradient(135deg,var(--ember),#D44400);color:#fff}
.btn-ember:hover{transform:translateY(-2px);color:#fff}

.btn-lg{padding:16px 36px;font-size:var(--text-lg)}
.btn-sm{padding:8px 16px;font-size:var(--text-sm)}
.btn-xs{padding:6px 12px;font-size:var(--text-xs)}

/* ── Input System ── */
.input-field{
  width:100%;padding:14px 18px;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  font-family:var(--font-body);font-size:var(--text-base);
  transition:all var(--dur-base);outline:none;
  line-height:1.5;
}
.input-field:focus{
  border-color:var(--violet);
  background:rgba(123,47,255,0.08);
  box-shadow:0 0 0 3px var(--violet-dim);
}
.input-field::placeholder{color:var(--text-muted)}

.input-label{
  display:block;margin-bottom:8px;
  font-size:var(--text-sm);font-weight:500;
  color:var(--text-secondary);letter-spacing:0.03em;
}
.input-group{margin-bottom:var(--space-3)}

.input-unit{
  display:flex;align-items:stretch;
}
.input-unit .unit-tag{
  padding:14px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-subtle);
  border-left:none;border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--text-muted);font-size:var(--text-sm);white-space:nowrap;
  display:flex;align-items:center;
}
.input-unit .input-field{border-radius:var(--radius-md) 0 0 var(--radius-md)}

select.input-field{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A0A0C0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}

/* ── Result Display Card ── */
.result-card{
  background:linear-gradient(135deg,rgba(123,47,255,0.15),rgba(0,212,255,0.1));
  border:1px solid rgba(123,47,255,0.3);
  border-radius:var(--radius-lg);padding:var(--space-4);
  text-align:center;margin-top:var(--space-4);
  animation:fadeInUp 0.4s var(--ease-out);
}
.result-value{
  font-family:var(--font-mono);font-size:var(--text-4xl);font-weight:700;
  background:linear-gradient(135deg,var(--cyan),var(--emerald));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  display:block;margin-bottom:8px;
  word-break:break-all;
}
.result-label{color:var(--text-secondary);font-size:var(--text-sm)}

.result-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--border-subtle);
}
.result-row:last-child{border-bottom:none}
.result-row-label{color:var(--text-secondary);font-size:var(--text-sm)}
.result-row-value{font-family:var(--font-mono);font-weight:600;color:var(--text-primary)}

/* ── AdSense Wrapper ── */
.ad-unit-wrapper{
  width:100%;overflow:hidden;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.02);
  border:1px dashed var(--border-subtle);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  min-height:90px;
}
.ad-unit-wrapper::before{
  content:'Advertisement';
  position:absolute;top:4px;left:50%;transform:translateX(-50%);
  font-size:9px;color:var(--text-muted);letter-spacing:0.1em;
  text-transform:uppercase;
}

/* ── Toast Notifications ── */
.toast{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px;
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  box-shadow:var(--shadow-md);
  transform:translateX(120%);
  transition:transform var(--dur-base) var(--ease-spring);
  backdrop-filter:blur(12px);
  max-width:380px;
}
.toast-enter{transform:translateX(0)}
.toast-exit{transform:translateX(120%);opacity:0}
.toast-success{background:rgba(0,229,160,0.15);border:1px solid rgba(0,229,160,0.3);color:var(--emerald)}
.toast-error{background:rgba(255,77,109,0.15);border:1px solid rgba(255,77,109,0.3);color:var(--rose)}
.toast-info{background:rgba(0,212,255,0.15);border:1px solid rgba(0,212,255,0.3);color:var(--cyan)}
.toast button{
  background:none;border:none;color:inherit;cursor:pointer;
  font-size:16px;padding:0;line-height:1;opacity:0.7;
}
.toast button:hover{opacity:1}

/* ── Back To Top ── */
#back-to-top{
  opacity:0;transform:translateY(20px);pointer-events:none;
}
#back-to-top.visible{
  opacity:1;transform:translateY(0);pointer-events:auto;
}

/* ── FAQ Accordion ── */
details.faq-item{
  background:var(--glass-bg);
  backdrop-filter:blur(12px);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-2);
  overflow:hidden;
}
details.faq-item summary{
  padding:var(--space-3);
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--text-lg);
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  transition:background var(--dur-fast);
}
details.faq-item summary:hover{
  background:rgba(255,255,255,0.03);
}
details.faq-item summary::after{
  content:'+';
  font-size:var(--text-xl);
  color:var(--violet);
  transition:transform var(--dur-base);
  flex-shrink:0;
}
details.faq-item[open] summary::after{
  content:'−';
  transform:rotate(180deg);
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item .faq-answer{
  padding:0 var(--space-3) var(--space-3);
  color:var(--text-secondary);
  line-height:1.8;
}

/* ── Tables ── */
.styled-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-sm);
}
.styled-table th{
  background:rgba(123,47,255,0.15);
  color:var(--text-primary);
  font-family:var(--font-display);
  font-weight:600;
  padding:14px 16px;
  text-align:left;
  border-bottom:2px solid var(--border-active);
}
.styled-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-secondary);
}
.styled-table tr:hover td{
  background:rgba(255,255,255,0.02);
}

/* ── Badge / Pill ── */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;
  background:var(--bg-glass);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-pill);
  font-size:var(--text-xs);
  font-weight:500;
  color:var(--text-secondary);
  white-space:nowrap;
}
.badge-violet{background:var(--violet-dim);color:var(--violet);border-color:rgba(123,47,255,0.3)}
.badge-cyan{background:rgba(0,212,255,0.1);color:var(--cyan);border-color:rgba(0,212,255,0.3)}
.badge-emerald{background:rgba(0,229,160,0.1);color:var(--emerald);border-color:rgba(0,229,160,0.3)}

/* ── Chart Container ── */
.chart-container{
  position:relative;
  width:100%;
  max-height:350px;
  margin-top:var(--space-3);
}
.chart-container canvas{
  max-height:350px;
}

/* ── Responsive Breakpoints ── */
@media(max-width:1200px){
  :root{
    --text-5xl:3rem;
    --text-4xl:2.5rem;
  }
  .container{padding-left:var(--space-3);padding-right:var(--space-3)}
}
@media(max-width:768px){
  :root{
    --text-5xl:2.5rem;
    --text-4xl:2rem;
    --text-3xl:1.75rem;
  }
  .section{padding-top:var(--space-8);padding-bottom:var(--space-8)}
}
@media(max-width:480px){
  :root{
    --text-5xl:2rem;
    --text-4xl:1.75rem;
    --text-3xl:1.5rem;
    --text-2xl:1.35rem;
  }
  .container{padding-left:var(--space-2);padding-right:var(--space-2)}
  .section{padding-top:var(--space-6);padding-bottom:var(--space-6)}
}

/* ── Print Styles ── */
@media print{
  body{background:#fff!important;color:#000!important}
  .navbar,.ad-unit-wrapper,.cookie-banner,.btn-primary,#particles-canvas,#back-to-top,#toast-container,#cookie-banner{display:none!important}
  .glass-card{background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,0.15)!important;border:1px solid #ddd!important}
  .result-value{-webkit-text-fill-color:#000!important;color:#000!important}
  .grad-text{-webkit-text-fill-color:#333!important;color:#333!important}
  a{color:#333!important}
}

/* ── Reduced Motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ==========================================================================
   CalcVerse Pro 7D Redesign Layer
   Centralized visual upgrade for Hostinger/PHP pages.
   ========================================================================== */
:root{
  --cv-ink:#f7f8ff;
  --cv-soft:#b8bfd8;
  --cv-muted:#757f9f;
  --cv-deep:#070914;
  --cv-panel:rgba(12,16,34,.78);
  --cv-panel-strong:rgba(17,22,46,.92);
  --cv-line:rgba(255,255,255,.11);
  --cv-line-strong:rgba(111,231,255,.32);
  --cv-teal:#23f0c7;
  --cv-sky:#4cc9f0;
  --cv-violet:#8b5cf6;
  --cv-amber:#ffd166;
  --cv-coral:#ff6b6b;
  --cv-shadow:0 24px 80px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.08) inset;
  --cv-radius:18px;
}

html{background:var(--cv-deep)}
body{
  color:var(--cv-ink);
  background:
    linear-gradient(180deg,rgba(7,9,20,.96),rgba(9,13,29,.98)),
    radial-gradient(circle at 50% -20%,rgba(76,201,240,.14),transparent 42%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,.16) 55%,transparent);
}

#cv-webgl,
#cv-particles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.62;
  mix-blend-mode:screen;
}
.no-webgl #cv-webgl,
.reduced-webgl #cv-webgl{display:none}

.mesh-orb{display:none!important}

.cv-navbar{
  background:rgba(7,9,20,.72)!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;
  box-shadow:0 10px 40px rgba(0,0,0,.22);
}
.cv-navbar.scrolled{
  background:rgba(7,9,20,.94)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.38)!important;
}
.cv-logo__icon{
  background:linear-gradient(135deg,var(--cv-teal),var(--cv-violet))!important;
  box-shadow:0 10px 28px rgba(35,240,199,.22);
}
.cv-logo__text span{color:var(--cv-teal)!important}
.cv-nav__link,
.cv-mobile-menu__link{border:1px solid transparent}
.cv-nav__link:hover,
.cv-nav__link.active,
.cv-mobile-menu__link:hover,
.cv-mobile-menu__link.active{
  color:#fff!important;
  background:rgba(76,201,240,.1)!important;
  border-color:rgba(76,201,240,.18);
}
.cv-btn-theme,
.cv-hamburger,
.cv-mobile-menu__close{
  background:rgba(255,255,255,.06)!important;
  border:1px solid var(--cv-line)!important;
  color:var(--cv-ink)!important;
}
.cv-btn-cta,
.btn-primary,
.btn.btn-primary{
  background:linear-gradient(135deg,var(--cv-teal),var(--cv-sky) 48%,var(--cv-violet))!important;
  color:#06111e!important;
  box-shadow:0 14px 40px rgba(35,240,199,.18)!important;
}
.btn-secondary,
.cv-btn-secondary,
.calc-reset-btn{
  background:rgba(255,255,255,.065)!important;
  color:var(--cv-ink)!important;
  border:1px solid var(--cv-line)!important;
}

.glass-card,
.cv-calc-card,
.cv-related-card,
.category-card,
.cat-card,
.featured-card,
.step-card,
.hiw-step,
.newsletter-card,
.calc-input-panel,
.calc-result-panel{
  border-radius:var(--cv-radius)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),
    var(--cv-panel)!important;
  border:1px solid var(--cv-line)!important;
  box-shadow:var(--cv-shadow)!important;
  transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(0);
}
.glass-card:hover,
.cv-calc-card:hover,
.cv-related-card:hover{
  border-color:var(--cv-line-strong)!important;
  box-shadow:0 28px 96px rgba(0,0,0,.52),0 0 0 1px rgba(76,201,240,.14) inset!important;
}
.glow-border::before{display:none}

.grad-text,
.hero-h1 .grad-text{
  background:linear-gradient(135deg,var(--cv-teal),var(--cv-sky),var(--cv-amber))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

.input-field,
.form-input,
.calc-form input[type="number"],
.calc-form input[type="text"],
.calc-form input[type="email"],
.calc-form input[type="date"],
.calc-form select,
#calc-search,
#directory-search{
  min-height:48px;
  background:rgba(255,255,255,.07)!important;
  color:var(--cv-ink)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:12px!important;
}
.input-field:focus,
.form-input:focus,
.calc-form input:focus,
.calc-form select:focus,
#calc-search:focus,
#directory-search:focus{
  border-color:rgba(35,240,199,.7)!important;
  box-shadow:0 0 0 4px rgba(35,240,199,.12),0 18px 42px rgba(0,0,0,.22)!important;
}
.calc-form label,
.input-label{color:var(--cv-soft)!important}
.radio-option,
.calc-tab,
.filter-tab{
  background:rgba(255,255,255,.06)!important;
  border:1px solid var(--cv-line)!important;
  border-radius:12px!important;
  color:var(--cv-soft)!important;
}
.radio-option:has(input:checked),
.radio-option.selected,
.calc-tab.active,
.filter-tab.active{
  color:#06111e!important;
  background:linear-gradient(135deg,var(--cv-teal),var(--cv-sky))!important;
  border-color:transparent!important;
}

.result-card,
.result-main,
.result-mini,
.result-breakdown{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:14px!important;
}
.result-value,
.result-mini-value{
  color:var(--cv-teal)!important;
  -webkit-text-fill-color:initial!important;
  background:none!important;
}
.result-label,
.result-mini-label,
.text-secondary{color:var(--cv-soft)!important}

.ad-unit-wrapper,
.cv-ad-leaderboard{
  min-height:96px;
  border-radius:14px;
}
.ad-unit-wrapper{
  background:rgba(255,255,255,.025)!important;
  border:1px dashed rgba(255,255,255,.16)!important;
}
.cv-ad-leaderboard ins,
.ad-unit-wrapper ins{
  min-height:90px;
  width:100%;
}

.cv-toast-container{
  position:fixed;
  top:84px;
  right:20px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.toast{
  background:var(--cv-panel-strong)!important;
  border:1px solid var(--cv-line)!important;
  color:var(--cv-ink)!important;
}
.toast-enter{transform:translateX(0)!important}
.toast-success{border-color:rgba(35,240,199,.45)!important}
.toast-error{border-color:rgba(255,107,107,.45)!important}

#cookie-banner{
  background:rgba(7,9,20,.96)!important;
  border-top:1px solid var(--cv-line)!important;
}

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .45s ease,transform .45s ease;
}
.reveal.visible,
.reveal.revealed{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:768px){
  .cv-toast-container{left:12px;right:12px;top:76px}
  .toast{max-width:none}
  .glass-card,
  .calc-input-panel,
  .calc-result-panel{border-radius:14px!important}
}

@media print{
  #cv-webgl,
  .cv-navbar,
  .cv-mobile-menu,
  .cv-mobile-menu__overlay,
  .cv-ad-leaderboard,
  .ad-unit-wrapper,
  #cookie-banner,
  .cv-back-top,
  .cv-toast-container,
  .cv-personalized-rails{display:none!important}
  body{background:#fff!important;color:#111!important}
  body::before{display:none!important}
}