/* ============================================================
   SłużebnośćPRO — Główny arkusz stylów
   Theme: Dark Electric / Legal Precision
   Fonts: Syne (headings) + Outfit (body) + JetBrains Mono (data)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS Variables ── */
:root {
  --navy:       #050A14;
  --navy-2:     #080F1E;
  --navy-3:     #0D1829;
  --navy-4:     #112038;
  --gold:       #F5C518;
  --gold-dim:   #C49B12;
  --gold-glow:  rgba(245,197,24,0.25);
  --electric:   #00CFFF;
  --electric-2: #0090CC;
  --neon:       #00FF88;
  --neon-dim:   #00CC6A;
  --danger:     #FF3B30;
  --danger-dim: #C82D24;
  --warning:    #FF9500;
  --glass:      rgba(255,255,255,0.04);
  --glass-2:    rgba(255,255,255,0.07);
  --glass-3:    rgba(255,255,255,0.12);
  --border:     rgba(255,255,255,0.08);
  --border-2:   rgba(255,255,255,0.15);
  --text:       #E8EDF8;
  --text-dim:   #8A9AB8;
  --text-muted: #4A5A72;
  --radius:     16px;
  --radius-sm:  10px;
  --radius-lg:  24px;
  --shadow:     0 8px 40px rgba(0,0,0,0.6);
  --shadow-gold:0 0 40px rgba(245,197,24,0.2);
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family:'Outfit',sans-serif;
  background:var(--navy);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* ── Animated Background ── */
.bg-canvas {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 120% 80% at 10% 20%, rgba(0,207,255,0.06) 0%, transparent 50%),
              radial-gradient(ellipse 80% 60% at 90% 80%, rgba(245,197,24,0.05) 0%, transparent 50%),
              radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0,255,136,0.03) 0%, transparent 60%),
              var(--navy);
  animation: bgPulse 12s ease-in-out infinite alternate;
}
@keyframes bgPulse {
  0%   { background-position:0% 0%; }
  50%  { background-position:100% 100%; }
  100% { background-position:0% 50%; }
}

/* Grid overlay */
.bg-grid {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,207,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,207,255,0.03) 1px, transparent 1px);
  background-size:60px 60px;
  animation:gridShift 20s linear infinite;
}
@keyframes gridShift {
  0%   { transform:translateY(0); }
  100% { transform:translateY(60px); }
}

/* Lightning bolts */
.lightning-field { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bolt {
  position:absolute;
  top: calc(var(--t,20) * 1%);
  left:calc(var(--l,30) * 1%);
  width:2px;
  height:calc(var(--h,80) * 1px);
  background:linear-gradient(180deg, transparent 0%, var(--electric) 40%, var(--gold) 70%, transparent 100%);
  opacity:0;
  transform:skewX(calc(var(--sk,5) * 1deg));
  filter:blur(1px);
  animation:boltFlash var(--dur,4s) var(--delay,0s) infinite;
}
@keyframes boltFlash {
  0%,90%,100% { opacity:0; transform:scaleY(0) skewX(var(--sk,5deg)); }
  91%          { opacity:0.8; transform:scaleY(1) skewX(var(--sk,5deg)); }
  92%          { opacity:0.3; }
  93%          { opacity:0.9; }
  94%          { opacity:0; transform:scaleY(1.1) skewX(var(--sk,5deg)); }
}

/* Cursor trail */
#cursor-trail { position:fixed; inset:0; z-index:9999; pointer-events:none; }
.trail-particle {
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--electric);
  box-shadow:0 0 8px var(--electric), 0 0 16px var(--electric);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:opacity 0.4s ease;
}

/* ── Layout ── */
.app-wrapper {
  position:relative; z-index:1;
  max-width:1100px;
  margin:0 auto;
  padding:0 24px 120px;
}

/* ── Header ── */
.app-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0 16px;
  border-bottom:1px solid var(--border);
  gap:16px; flex-wrap:wrap;
}
.logo {
  display:flex; align-items:center; gap:12px;
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.5rem;
}
.logo-icon {
  width:44px; height:44px;
  background:linear-gradient(135deg, var(--gold), var(--electric));
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  box-shadow:var(--shadow-gold);
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { box-shadow:0 0 20px rgba(245,197,24,0.3); }
  50%      { box-shadow:0 0 40px rgba(245,197,24,0.6), 0 0 80px rgba(0,207,255,0.2); }
}
.logo span { background:linear-gradient(90deg, var(--gold), var(--electric)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.header-meta {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.meta-badge {
  display:flex; flex-direction:column; align-items:center;
  padding:8px 14px;
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-dim);
  line-height:1.3;
}
.meta-badge strong {
  font-family:'JetBrains Mono',monospace;
  font-size:0.95rem; color:var(--text); line-height:1.2;
}
.meta-badge.danger strong { color:var(--danger); }
.meta-badge.gold strong   { color:var(--gold); }
.meta-badge.neon strong   { color:var(--neon); }

/* ── Countdown Banner ── */
.countdown-banner {
  margin:16px 0;
  background:linear-gradient(135deg, rgba(255,59,48,0.12), rgba(245,197,24,0.08));
  border:1px solid rgba(255,59,48,0.3);
  border-radius:var(--radius);
  padding:14px 20px;
  display:flex; align-items:center; gap:16px;
  flex-wrap:wrap;
}
.countdown-banner .icon { font-size:1.6rem; flex-shrink:0; }
.countdown-banner .text { flex:1; }
.countdown-banner .text h4 {
  font-family:'Syne',sans-serif; font-weight:700; font-size:0.85rem;
  color:var(--danger); margin-bottom:2px;
}
.countdown-banner .text p { font-size:0.78rem; color:var(--text-dim); }
.countdown-parts {
  display:flex; gap:8px;
}
.c-part {
  background:rgba(255,59,48,0.15); border:1px solid rgba(255,59,48,0.3);
  border-radius:8px; padding:6px 12px;
  text-align:center; min-width:58px;
  font-family:'JetBrains Mono',monospace;
}
.c-part .num { font-size:1.1rem; color:var(--danger); font-weight:500; display:block; }
.c-part .lbl { font-size:0.6rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; }

/* ── Progress Bar ── */
.progress-bar-outer {
  margin:24px 0;
  display:flex; align-items:center; gap:0;
  position:relative;
}
.progress-bar-outer::before {
  content:''; position:absolute; top:50%; left:0; right:0; height:2px;
  background:var(--border); transform:translateY(-50%); z-index:0;
}
.step-dot {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  flex:1;
}
.step-circle {
  width:44px; height:44px;
  border-radius:50%; border:2px solid var(--border-2);
  background:var(--navy-3);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:0.85rem; font-weight:500;
  color:var(--text-dim);
  transition:var(--transition);
  cursor:pointer;
}
.step-dot.active .step-circle {
  background:linear-gradient(135deg, var(--gold), var(--electric));
  border-color:var(--gold);
  color:var(--navy);
  box-shadow:0 0 24px rgba(245,197,24,0.5);
  animation:stepPulse 2s ease-in-out infinite;
}
@keyframes stepPulse {
  0%,100% { box-shadow:0 0 20px rgba(245,197,24,0.4); }
  50%      { box-shadow:0 0 40px rgba(245,197,24,0.7), 0 0 60px rgba(0,207,255,0.3); }
}
.step-dot.done .step-circle {
  background:var(--neon); border-color:var(--neon);
  color:var(--navy); box-shadow:0 0 16px rgba(0,255,136,0.3);
}
.step-dot.done .step-circle::after { content:'✓'; font-size:1rem; font-family:'Outfit',sans-serif; }
.step-label {
  font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-muted); text-align:center; max-width:80px; line-height:1.3;
}
.step-dot.active .step-label { color:var(--gold); }
.step-dot.done  .step-label  { color:var(--neon-dim); }

/* ── Step Content ── */
.step-pane { display:none; animation:fadeSlide 0.4s ease; }
.step-pane.active { display:block; }
@keyframes fadeSlide {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

.step-header { margin-bottom:28px; }
.step-header h2 {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.8rem;
  background:linear-gradient(90deg, var(--gold), var(--electric));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:6px;
}
.step-header p { color:var(--text-dim); font-size:0.9rem; line-height:1.6; }

/* ── Cards ── */
.glass-card {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px;
  backdrop-filter:blur(12px);
  transition:var(--transition);
  position:relative; overflow:hidden;
}
.glass-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--border-2), transparent);
}
.glass-card:hover { border-color:var(--border-2); background:var(--glass-2); }
.glass-card + .glass-card { margin-top:16px; }

.card-title {
  font-family:'Syne',sans-serif; font-weight:700; font-size:1rem;
  color:var(--gold); margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.card-title .icon { font-size:1.2rem; }

/* ── Form Elements ── */
.form-grid {
  display:grid; gap:16px;
}
.form-grid.cols-2 { grid-template-columns:1fr 1fr; }
.form-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
@media(max-width:640px) {
  .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns:1fr; }
}

.field { display:flex; flex-direction:column; gap:6px; }
.field label {
  font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-dim);
}
.field label .req { color:var(--danger); margin-left:3px; }

.field input, .field select, .field textarea {
  background:var(--navy-3); border:1px solid var(--border-2);
  border-radius:var(--radius-sm); padding:12px 16px;
  color:var(--text); font-family:'Outfit',sans-serif; font-size:0.92rem;
  outline:none; width:100%;
  transition:var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--electric); box-shadow:0 0 0 3px rgba(0,207,255,0.12);
  background:var(--navy-4);
}
.field input::placeholder, .field textarea::placeholder { color:var(--text-muted); }
.field select { cursor:pointer; appearance:none; 
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A9AB8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;
}
.field select option { background:var(--navy-3); }
.field textarea { resize:vertical; min-height:90px; }

.field input[type="checkbox"], .field input[type="radio"] {
  width:auto; cursor:pointer;
}

/* Checkbox/Radio custom */
.check-group, .radio-group { display:flex; flex-direction:column; gap:10px; }
.check-group.inline, .radio-group.inline { flex-direction:row; flex-wrap:wrap; gap:12px; }

.check-item, .radio-item {
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer; padding:12px 14px;
  background:var(--navy-3); border:1px solid var(--border);
  border-radius:var(--radius-sm); transition:var(--transition);
}
.check-item:hover, .radio-item:hover { border-color:var(--border-2); background:var(--navy-4); }
.check-item.selected, .radio-item.selected {
  border-color:var(--gold); background:rgba(245,197,24,0.06);
}
.check-item input, .radio-item input { display:none; }
.check-box, .radio-box {
  width:20px; height:20px; border-radius:5px; border:2px solid var(--border-2);
  background:var(--navy); flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition); font-size:0.7rem;
}
.radio-box { border-radius:50%; }
.check-item.selected .check-box, .radio-item.selected .radio-box {
  background:var(--gold); border-color:var(--gold); color:var(--navy);
}
.radio-item.selected .radio-box { background:var(--electric); border-color:var(--electric); }
.check-item .item-text, .radio-item .item-text { flex:1; }
.check-item .item-text strong, .radio-item .item-text strong {
  display:block; font-size:0.88rem; color:var(--text); margin-bottom:2px;
}
.check-item .item-text span, .radio-item .item-text span { font-size:0.77rem; color:var(--text-dim); }

/* ── Dynamic Lists (KW, Actions, Infrastructure) ── */
.dynamic-list { display:flex; flex-direction:column; gap:16px; }
.dynamic-item {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
  position:relative; animation:fadeSlide 0.35s ease;
}
.dynamic-item-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.dynamic-item-header h4 {
  font-family:'Syne',sans-serif; font-size:0.92rem; font-weight:700;
  color:var(--electric); display:flex; align-items:center; gap:8px;
}
.badge-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--electric); color:var(--navy);
  font-size:0.7rem; font-weight:700; font-family:'JetBrains Mono',monospace;
}
.sub-list { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.sub-item {
  background:var(--navy-3); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px;
  margin-top:10px; position:relative; animation:fadeSlide 0.3s ease;
}
.sub-item-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sub-item-header h5 { font-size:0.8rem; color:var(--gold); font-weight:600; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--radius-sm); border:none;
  font-family:'Outfit',sans-serif; font-size:0.9rem; font-weight:600;
  cursor:pointer; transition:var(--transition); text-decoration:none;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform:translateX(-100%); transition:transform 0.4s ease;
}
.btn:hover::after { transform:translateX(100%); }

.btn-gold {
  background:linear-gradient(135deg, var(--gold), #E8A800);
  color:#000; box-shadow:0 4px 20px rgba(245,197,24,0.35);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(245,197,24,0.5); }

.btn-electric {
  background:linear-gradient(135deg, var(--electric), var(--electric-2));
  color:#000; box-shadow:0 4px 20px rgba(0,207,255,0.3);
}
.btn-electric:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,207,255,0.5); }

.btn-neon {
  background:linear-gradient(135deg, var(--neon), var(--neon-dim));
  color:#000; box-shadow:0 4px 20px rgba(0,255,136,0.3);
}
.btn-neon:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,255,136,0.5); }

.btn-ghost {
  background:var(--glass); border:1px solid var(--border-2);
  color:var(--text-dim);
}
.btn-ghost:hover { border-color:var(--electric); color:var(--electric); background:rgba(0,207,255,0.06); }

.btn-danger {
  background:linear-gradient(135deg, var(--danger), var(--danger-dim));
  color:#fff; font-size:0.75rem; padding:6px 12px;
}
.btn-add {
  background:rgba(0,207,255,0.08); border:1px dashed rgba(0,207,255,0.4);
  color:var(--electric); font-size:0.85rem; padding:10px 20px;
  border-radius:var(--radius-sm);
  width:100%; margin-top:12px;
}
.btn-add:hover { background:rgba(0,207,255,0.14); border-style:solid; }

/* Navigation buttons */
.nav-buttons {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:32px; gap:12px;
}

/* ── Tip Drawer ── */
#tip-drawer {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  max-height:75vh;
  background:linear-gradient(180deg, rgba(8,15,30,0.97), var(--navy-2));
  border-top:2px solid var(--gold);
  border-radius:20px 20px 0 0;
  transform:translateY(100%);
  transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
  overflow:hidden;
  display:flex; flex-direction:column;
}
#tip-drawer.open { transform:translateY(0); }
.drawer-handle {
  width:48px; height:4px; border-radius:2px;
  background:var(--border-2); margin:12px auto 0;
  cursor:pointer; flex-shrink:0;
}
.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px 8px; flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.drawer-header h3 {
  font-family:'Syne',sans-serif; font-size:1rem; font-weight:700;
  color:var(--gold); display:flex; align-items:center; gap:8px;
}
.drawer-body {
  overflow-y:auto; padding:20px 24px;
  flex:1;
}
.drawer-tabs {
  display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;
}
.dtab {
  padding:6px 14px; border-radius:20px; font-size:0.78rem; font-weight:600;
  cursor:pointer; border:1px solid var(--border);
  background:var(--glass); color:var(--text-dim);
  transition:var(--transition);
}
.dtab.active { background:var(--gold); color:var(--navy); border-color:var(--gold); }

.tip-content { display:none; }
.tip-content.active { display:block; }

.tip-section { margin-bottom:20px; }
.tip-section h4 { font-size:0.85rem; font-weight:700; color:var(--electric); margin-bottom:8px; }
.tip-section p, .tip-section li { font-size:0.83rem; color:var(--text-dim); line-height:1.65; }
.tip-section ul { padding-left:18px; }
.tip-section li { margin-bottom:4px; }
.tip-section .highlight {
  background:rgba(245,197,24,0.08); border-left:3px solid var(--gold);
  padding:10px 14px; border-radius:0 8px 8px 0;
  font-size:0.83rem; color:var(--text); margin:8px 0;
}
.tip-section .formula {
  background:var(--navy-4); border:1px solid var(--border-2);
  padding:12px 16px; border-radius:var(--radius-sm); margin:8px 0;
  font-family:'JetBrains Mono',monospace; font-size:0.82rem; color:var(--neon);
}
.tip-section .formula span { color:var(--text-dim); }
.tip-link {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--electric); font-size:0.8rem; text-decoration:none;
  padding:4px 0; border-bottom:1px solid rgba(0,207,255,0.2);
  transition:var(--transition);
}
.tip-link:hover { color:var(--gold); border-color:var(--gold); }
.links-grid { display:flex; flex-direction:column; gap:8px; margin-top:8px; }

/* Floating buttons */
.fab-contact {
  position:fixed; bottom:24px; right:24px; z-index:200;
  background:linear-gradient(135deg, var(--neon), #00AA60);
  color:#000; border:none; border-radius:50px;
  padding:14px 22px; font-weight:700; font-size:0.9rem;
  cursor:pointer; box-shadow:0 6px 30px rgba(0,255,136,0.4);
  display:flex; align-items:center; gap:8px;
  animation:fabPulse 3s ease-in-out infinite;
  text-decoration:none;
}
@keyframes fabPulse {
  0%,100% { box-shadow:0 6px 30px rgba(0,255,136,0.4); }
  50%      { box-shadow:0 8px 40px rgba(0,255,136,0.7); }
}
.fab-tips {
  position:fixed; bottom:24px; left:24px; z-index:200;
  background:linear-gradient(135deg, var(--gold), var(--electric));
  color:#000; border:none; border-radius:50px;
  padding:14px 20px; font-weight:700; font-size:0.88rem;
  cursor:pointer; box-shadow:var(--shadow-gold);
  display:flex; align-items:center; gap:8px;
}
.fab-tips:hover, .fab-contact:hover { transform:translateY(-3px) scale(1.03); }

/* ── Summary / PDF ── */
.summary-block {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; margin-bottom:16px;
}
.summary-block h4 {
  font-family:'Syne',sans-serif; font-size:0.88rem; font-weight:700;
  color:var(--electric); text-transform:uppercase; letter-spacing:0.06em;
  margin-bottom:12px; display:flex; align-items:center; gap:6px;
}
.summary-row {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:8px 0; border-bottom:1px solid var(--border); gap:16px;
  flex-wrap:wrap;
}
.summary-row:last-child { border-bottom:none; padding-bottom:0; }
.summary-row .key { font-size:0.8rem; color:var(--text-dim); flex-shrink:0; min-width:140px; }
.summary-row .val { font-size:0.88rem; color:var(--text); text-align:right; }
.summary-row .val strong { color:var(--gold); }

.wps-display {
  text-align:center; padding:24px;
  background:linear-gradient(135deg, rgba(245,197,24,0.08), rgba(0,207,255,0.05));
  border:1px solid var(--gold-dim); border-radius:var(--radius);
  margin:20px 0;
}
.wps-display .label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); margin-bottom:4px; }
.wps-display .amount { font-family:'JetBrains Mono',monospace; font-size:2.4rem; font-weight:500; color:var(--gold); }
.wps-display .note { font-size:0.75rem; color:var(--text-muted); margin-top:4px; }

/* Alert / Notice */
.alert {
  display:flex; gap:12px; padding:14px 18px;
  border-radius:var(--radius-sm); margin:12px 0; font-size:0.83rem;
}
.alert-danger  { background:rgba(255,59,48,0.1); border:1px solid rgba(255,59,48,0.3); }
.alert-gold    { background:rgba(245,197,24,0.08); border:1px solid rgba(245,197,24,0.3); }
.alert-electric{ background:rgba(0,207,255,0.07); border:1px solid rgba(0,207,255,0.25); }
.alert-danger .icon  { color:var(--danger); font-size:1.2rem; flex-shrink:0; }
.alert-gold .icon    { color:var(--gold);   font-size:1.2rem; flex-shrink:0; }
.alert-electric .icon{ color:var(--electric); font-size:1.2rem; flex-shrink:0; }
.alert p { color:var(--text-dim); line-height:1.55; }
.alert strong { color:var(--text); }

/* ── Range/Calculator ── */
.calc-widget {
  background:var(--navy-3); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
}
.calc-widget h4 { font-size:0.85rem; font-weight:700; color:var(--neon); margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.calc-row { display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
.calc-row label { font-size:0.78rem; color:var(--text-dim); font-weight:500; }
.calc-row input  { width:100%; background:var(--navy); border:1px solid var(--border-2); border-radius:8px; padding:10px 12px; color:var(--text); font-family:'JetBrains Mono',monospace; font-size:0.9rem; box-sizing:border-box; transition:border-color .2s; }
.calc-row input:focus { outline:none; border-color:var(--electric); }
.calc-result {
  background:rgba(0,255,136,0.05); border:1px solid rgba(0,255,136,0.15);
  border-radius:var(--radius-sm); padding:16px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:12px; margin-top:16px;
}
.calc-block { background:rgba(0,0,0,0.2); border-radius:10px; border:1px solid var(--border-2); padding:12px; text-align:center; }
.calc-result .rlabel { font-size:0.72rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.calc-result .rval { font-family:'JetBrains Mono',monospace; font-size:1.3rem; color:var(--neon); font-weight:700; }
.calc-result .rval-sm { font-family:'JetBrains Mono',monospace; font-size:1rem; color:var(--electric); font-weight:600; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media(max-width:700px) { .cols-3 { grid-template-columns:1fr; } }


/* ── Chat page ── */
.chat-wrapper { max-width:820px; margin:0 auto; padding:0 24px 80px; position:relative; z-index:1; }
.chat-box {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius); height:55vh; overflow-y:auto; padding:20px;
  display:flex; flex-direction:column; gap:12px;
  scroll-behavior:smooth;
}
.msg { display:flex; gap:10px; max-width:90%; }
.msg.user { flex-direction:row-reverse; align-self:flex-end; }
.msg-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.msg.ai .msg-avatar { background:linear-gradient(135deg, var(--gold),var(--electric)); color:var(--navy); }
.msg.user .msg-avatar { background:var(--glass-3); color:var(--text); }
.msg-bubble {
  padding:12px 16px; border-radius:16px; font-size:0.88rem; line-height:1.6;
}
.msg.ai .msg-bubble { background:var(--navy-3); border:1px solid var(--border); border-radius:4px 16px 16px 16px; color:var(--text); }
.msg.user .msg-bubble { background:linear-gradient(135deg, var(--electric), var(--electric-2)); color:#000; border-radius:16px 4px 16px 16px; }
.typing-dots { display:flex; gap:4px; padding:8px 0; }
.typing-dots span {
  width:8px; height:8px; border-radius:50%; background:var(--text-muted);
  animation:typingBounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay:0.2s; }
.typing-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes typingBounce { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-8px); } }

.chat-input-row { display:flex; gap:10px; margin-top:14px; }
.chat-input-row input {
  flex:1; background:var(--navy-3); border:1px solid var(--border-2);
  border-radius:var(--radius-sm); padding:14px 18px;
  color:var(--text); font-family:'Outfit',sans-serif; font-size:0.92rem; outline:none;
}
.chat-input-row input:focus { border-color:var(--electric); }
.chat-send { background:linear-gradient(135deg,var(--gold),var(--electric)); border:none; border-radius:var(--radius-sm); padding:0 22px; cursor:pointer; color:#000; font-weight:700; font-size:1.1rem; }

.chat-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.suggestion-btn {
  padding:8px 14px; border-radius:20px; font-size:0.78rem;
  background:var(--glass); border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer; transition:var(--transition);
}
.suggestion-btn:hover { border-color:var(--electric); color:var(--electric); background:rgba(0,207,255,0.06); }

/* nav */
.main-nav { display:flex; gap:6px; margin-bottom:20px; padding:6px; background:var(--glass); border:1px solid var(--border); border-radius:var(--radius); }
.nav-link {
  padding:10px 18px; border-radius:10px; text-decoration:none;
  font-size:0.85rem; font-weight:600; color:var(--text-dim);
  transition:var(--transition); display:flex; align-items:center; gap:6px;
}
.nav-link.active, .nav-link:hover { background:var(--glass-2); color:var(--gold); }
.nav-link.active { box-shadow:inset 0 0 0 1px var(--border-2); }

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* Utility */
.mt-4 { margin-top:16px; }
.mt-6 { margin-top:24px; }
.mt-8 { margin-top:32px; }
.text-gold { color:var(--gold); }
.text-electric { color:var(--electric); }
.text-neon { color:var(--neon); }
.text-danger { color:var(--danger); }
.text-dim { color:var(--text-dim); }
.text-sm { font-size:0.82rem; }
.font-mono { font-family:'JetBrains Mono',monospace; }
.hidden { display:none !important; }
.divider { height:1px; background:var(--border); margin:20px 0; }
.tag {
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
  border-radius:20px; font-size:0.72rem; font-weight:600;
  background:rgba(245,197,24,0.1); border:1px solid rgba(245,197,24,0.25);
  color:var(--gold);
}
.tag.electric { background:rgba(0,207,255,0.1); border-color:rgba(0,207,255,0.25); color:var(--electric); }
.tag.danger   { background:rgba(255,59,48,0.1); border-color:rgba(255,59,48,0.25); color:var(--danger); }

/* Responsive */
@media(max-width:480px) {
  .app-wrapper { padding:0 12px 100px; }
  .logo { font-size:1.2rem; }
  .step-label { display:none; }
  .step-circle { width:36px; height:36px; font-size:0.75rem; }
  .countdown-parts { flex-wrap:wrap; }
  .fab-contact, .fab-tips { font-size:0.78rem; padding:12px 16px; }
}