/* Style kalkulatorow. Zaimportowane z osobnego projektu i zawezone do
   kontenera .calc, zeby nie zmienialy wygladu menu, slidera i stopki serwisu.
   Projekt zrodlowy juz nie istnieje - ten plik jest teraz jedynym zrodlem
   i edytujemy go wprost. */

.calc *, .calc *::before, .calc *::after{ box-sizing: border-box; margin: 0; padding: 0; }

.calc.dark{
  --bg:                #0f0f14;
  --surface:           #17171f;
  --border:            #2a2a38;
  --txt:               #e2e8f0;
  --txt-muted:         #64748b;
  --txt-dim:           #2a2a38;
  --accent:            #7c3aed;
  --accent-l:          #a78bfa;
  --input-bg:          #0f0f14;
  --result-bg:         #0f0f14;
  --copy-bg:           #17171f;
  --copy-hover:        #1e1b30;
  --copy-ok-bg:        #0d2015;
  --clear-bg:          #17171f;
  --clear-hover:       #1f1418;
  --badge-hex-bg:      #1e1b30;
  --badge-dec-bg:      #1a1f1a;
  --badge-bin-bg:      #1a1718;
  --badge-cfg-bg:      #1e1b2a;
  --slider-track:      #2a2a38;
  --footer:            #2a2a38;
  --card-hover-shadow: #7c3aed22;
}
.calc.light{
  --bg:                #f0f0f7;
  --surface:           #ffffff;
  --border:            #d1d5e8;
  --txt:               #1a1a2e;
  --txt-muted:         #64748b;
  --txt-dim:           #c0c0d0;
  --accent:            #6d28d9;
  --accent-l:          #7c3aed;
  --input-bg:          #f8f8fc;
  --result-bg:         #f0f0f8;
  --copy-bg:           #f4f4fb;
  --copy-hover:        #ede9ff;
  --copy-ok-bg:        #ecfdf5;
  --clear-bg:          #f4f4fb;
  --clear-hover:       #fff0f0;
  --badge-hex-bg:      #ede9ff;
  --badge-dec-bg:      #f0fdf4;
  --badge-bin-bg:      #fff7ed;
  --badge-cfg-bg:      #ede9ff;
  --slider-track:      #d1d5e8;
  --footer:            #c0c0d0;
  --card-hover-shadow: #6d28d920;
}
.calc{ background-color: var(--bg); color: var(--txt); font-family: 'Inter', sans-serif; transition: background-color 0.25s, color 0.25s; }
.calc ::-webkit-scrollbar{ width: 6px; }
.calc ::-webkit-scrollbar-track{ background: var(--surface); }
.calc ::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px; }

.calc .theme-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--txt-muted); cursor: pointer; transition: all 0.18s; flex-shrink: 0;
}
.calc .theme-toggle:hover{ border-color: var(--accent); color: var(--accent-l); }

.calc .conv-input{
  width: 100%; background: var(--input-bg); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 12px 16px; font-family: 'JetBrains Mono', monospace;
  font-size: 1rem; color: var(--txt); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.25s; letter-spacing: 0.03em;
}
.calc .conv-input::placeholder{ color: var(--txt-muted); }
.calc .conv-input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 27%, transparent),
              0 0 18px 2px color-mix(in srgb, var(--accent) 13%, transparent);
}
.calc .conv-input.has-value{ border-color: color-mix(in srgb, var(--accent-l) 50%, transparent); }
.calc .conv-input.error-val{ border-color: #f87171aa; box-shadow: 0 0 0 2px #f8717133; color: #f87171; }

.calc .copy-btn{
  flex-shrink: 0; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1.5px solid var(--border);
  background: var(--copy-bg); color: var(--txt-muted); cursor: pointer; transition: all 0.18s;
}
.calc .copy-btn:hover{ border-color: var(--accent); color: var(--accent-l); background: var(--copy-hover); }
.calc .copy-btn.copied{ border-color: #4ade80; color: #4ade80; background: var(--copy-ok-bg); }
.calc .copy-btn:disabled{ opacity: 0.35; cursor: not-allowed; }

.calc .clear-btn{
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px;
  border-radius: 8px; border: 1.5px solid var(--border); background: var(--clear-bg);
  color: var(--txt-muted); font-size: 0.875rem; font-weight: 500;
  cursor: pointer; transition: all 0.18s; font-family: 'Inter', sans-serif;
}
.calc .clear-btn:hover{ border-color: #f87171; color: #f87171; background: var(--clear-hover); }
.calc .clear-btn:active{ transform: scale(0.97); }

.calc .sys-badge{
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px;
  border-radius: 5px; display: inline-block; transition: background 0.25s;
}

.calc .conv-card{
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 22px 24px; transition: border-color 0.2s, background 0.25s;
}
.calc .conv-card.active-card{ border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.calc .back-link{ display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--txt-muted); text-decoration: none; font-family: 'JetBrains Mono', monospace; transition: color 0.15s; }
.calc .back-link:hover{ color: var(--accent-l); }

.calc .section-divider{ height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent); margin: 28px 0; }

.calc .glow-line{
  width: 100%; max-width: 600px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  margin: 40px 0 0;
}

.calc input[type=range]{ -webkit-appearance: none; width: 100%; height: 4px; background: var(--slider-track); border-radius: 2px; outline: none; cursor: pointer; transition: background 0.25s; }
.calc input[type=range]::-webkit-slider-thumb{ -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--accent-l); cursor: pointer; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); transition: background 0.15s; }
.calc input[type=range]::-webkit-slider-thumb:hover{ background: var(--accent-l); }

.calc .result-box{
  background: var(--result-bg); border: 1.5px solid color-mix(in srgb, var(--accent-l) 30%, transparent);
  border-radius: 8px; padding: 12px 16px; font-family: 'JetBrains Mono', monospace;
  font-size: 1rem; color: var(--accent-l); letter-spacing: 0.03em;
  min-height: 46px; display: flex; align-items: center; transition: background 0.25s;
}
.calc .result-box.empty{ color: var(--txt-dim); }
.calc .result-box.error-val{ color: #f87171; border-color: #f87171aa; }

@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0 #4ade8066; }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.calc .pulse-success{ animation: pulse-green 0.5s ease-out; }

.calc .top-controls{
  position: fixed; top: 18px; right: 18px;
  display: flex; align-items: center; gap: 6px; z-index: 100;
}
.calc .lang-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 7px;
  border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0;
  transition: border-color 0.15s, background 0.15s;
}
.calc .lang-btn.active{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}
.calc .lang-btn:hover:not(.active){
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.calc .page-title{ font-family: 'JetBrains Mono', monospace; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; }
.calc .page-subtitle{ font-size: 0.85rem; color: var(--txt-muted); margin-top: 6px; }

.calc .card-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; width: 100%; max-width: 600px; margin-top: 40px;
}

.calc .calc-card{
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 28px 24px; text-decoration: none; color: var(--txt);
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 0.2s, transform 0.18s, box-shadow 0.2s, background 0.25s;
  cursor: pointer; position: relative; overflow: hidden;
}
.calc .calc-card:hover{ border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-3px); box-shadow: 0 8px 32px var(--card-hover-shadow); }
.calc .calc-card:active{ transform: translateY(-1px); }

.calc .card-icon{
  width: 44px; height: 44px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background 0.25s;
}

.calc .card-title{ font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 600; }
.calc .card-title span{ color: var(--accent-l); }
.calc .card-desc{ font-size: 0.82rem; color: var(--txt-muted); line-height: 1.55; }

.calc .card-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.calc .tag{
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px;
  transition: background 0.25s;
}

.calc .card-arrow{
  margin-top: auto; display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--txt-muted);
  font-family: 'JetBrains Mono', monospace; transition: color 0.15s, gap 0.15s;
}
.calc .calc-card:hover .card-arrow{ color: var(--accent-l); gap: 10px; }

.calc .footer-note{ margin-top: 18px; font-size: 0.75rem; color: var(--footer); font-family: 'JetBrains Mono', monospace; }

.calc.dark  .tag-hex{ background: #1e1b30; color: #a78bfa; }
.calc.dark  .tag-dec{ background: #1a1f1a; color: #4ade80; }
.calc.dark  .tag-bin{ background: #1a1718; color: #fb923c; }
.calc.dark  .tag-muted{ background: #1e1b30; color: #64748b; }
.calc.dark  .tag-raw{ background: #1a1718; color: #fb923c; }
.calc.dark  .tag-adc{ background: #1a1f1a; color: #4ade80; }

.calc.light .tag-hex{ background: #ede9ff; color: #6d28d9; }
.calc.light .tag-dec{ background: #f0fdf4; color: #16a34a; }
.calc.light .tag-bin{ background: #fff7ed; color: #ea580c; }
.calc.light .tag-muted{ background: #f1f5f9; color: #64748b; }
.calc.light .tag-raw{ background: #fff7ed; color: #ea580c; }
.calc.light .tag-adc{ background: #f0fdf4; color: #16a34a; }


/* --- korekty osadzenia (dopisane przez Utils/make_calc_pages.py) --- */

/* W samodzielnej wersji pasek sterowania byl przyklejony do okna przegladarki.
   Wewnatrz strony serwisu wchodzil na przelacznik jezyka, wiec zostaje
   w obrebie kontenera kalkulatora. */
.calc .top-controls {
    position: static;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}

/* Po usunieciu linku powrotnego i przyciskow jezyka w gornym pasku zostaje
   sam przelacznik motywu - dosuwamy go do prawej krawedzi. */
.calc .theme-toggle {
    margin-left: auto;
}

/* Strona zbiorcza zajmowala cala wysokosc okna - wewnatrz serwisu ma zajmowac
   tyle, ile potrzebuje jej tresc. */