/* ============================================
   PlexiBuilder Pro 2.1 → v4 Design System v2
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* === NADPISZ ZMIENNE TEMPLATE === */
:root, html{
  --primary:#00d1b2!important;
  --secondary:#8b949e!important;
  --success:#00d1b2!important;
  --warning:#ffa657!important;
  --danger:#ff7b72!important;
  --bg:#0a0b0d!important;
  --card:rgba(20,26,35,.55)!important;
  --border:rgba(255,255,255,.08)!important;
  --text:#e6edf3!important;
  --text-muted:#8b949e!important;
  --dark:#0a0b0d!important;
  --radius:14px!important;
  --shadow:0 4px 24px rgba(0,0,0,.25)!important;
  --gray-light:rgba(255,255,255,.08)!important;

  --v4-acc:#00d1b2;
  --v4-acc-2:#0099ff;
  --v4-violet:#a78bfa;
  --v4-glass:rgba(20,26,35,.55);
  --v4-glass-2:rgba(13,17,23,.4);
  --v4-line:rgba(255,255,255,.08);
  --v4-f-d:'Space Grotesk',sans-serif;
  --v4-f-b:'Inter',-apple-system,system-ui,sans-serif;
}

/* === BASE === */
html, body{
  background:#0a0b0d!important;
  color:#e6edf3!important;
  font-family:var(--v4-f-b)!important;
  -webkit-font-smoothing:antialiased;
}

body{
  background:radial-gradient(ellipse 80% 50% at 20% 0%,rgba(0,209,178,.08),transparent 50%),
             radial-gradient(ellipse 60% 40% at 80% 30%,rgba(167,139,250,.06),transparent 50%),
             radial-gradient(ellipse 50% 50% at 50% 80%,rgba(0,153,255,.05),transparent 60%),
             #0a0b0d!important;
  background-attachment:fixed!important;
  min-height:100vh;
}

h1, h2, h3, h4, h5{
  font-family:var(--v4-f-d)!important;
  color:#e6edf3!important;
  letter-spacing:-.02em;
}

a{ color:#0099ff; }
a:hover{ color:#00d1b2; }

/* === HEADER === */
.header{
  background:rgba(20,26,35,.65)!important;
  backdrop-filter:blur(20px)saturate(1.5);
  -webkit-backdrop-filter:blur(20px)saturate(1.5);
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  padding:14px 32px!important;
  box-shadow:none!important;
}

.brand-logo{
  color:#e6edf3!important;
  font-family:var(--v4-f-d)!important;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand-logo img{
  max-height:32px;
  width:auto;
  filter:none;
}

.brand-logo span{
  color:#e6edf3!important;
  font-family:var(--v4-f-d)!important;
  font-weight:600;
  font-size:1rem;
  letter-spacing:-.01em;
}

.back-link{
  color:#8b949e!important;
  font-size:.88rem;
  text-decoration:none;
  transition:color .2s;
}
.back-link:hover{ color:#00d1b2!important; }

.app-title{ display:flex; align-items:center; gap:10px; }
.app-name{
  font-family:var(--v4-f-d)!important;
  color:#e6edf3!important;
  font-weight:600;
}

.version-badge{
  background:linear-gradient(135deg,#00d1b2,#0099ff)!important;
  color:#001a16!important;
  font-family:var(--v4-f-d)!important;
  font-weight:600;
  border-radius:100px;
  padding:3px 11px;
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:0 2px 12px rgba(0,209,178,.3);
}

/* === HERO === */
.hero{
  background:transparent!important;
  padding:80px 24px 60px!important;
  border-bottom:none!important;
  text-align:center;
}

.hero-container{ max-width:980px; margin:0 auto; }

.hero h1{
  font-size:clamp(2rem,5vw,3.5rem)!important;
  background:linear-gradient(135deg,#e6edf3 30%,#00d1b2 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:22px!important;
  line-height:1.1;
}

.hero-description{
  color:#8b949e!important;
  font-size:1.1rem;
  max-width:680px;
  margin:0 auto 36px!important;
}

.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* === MAIN LAYOUT (sidebar + preview + info-panel) === */
.main-container, .app-container, main{
  background:transparent!important;
}

.sidebar, .info-panel{
  background:rgba(20,26,35,.45)!important;
  backdrop-filter:blur(20px)saturate(1.3);
  -webkit-backdrop-filter:blur(20px)saturate(1.3);
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:18px!important;
  padding:20px!important;
  color:#e6edf3!important;
}

.sidebar{
  border-right:1px solid rgba(255,255,255,.08)!important;
}

.info-panel{
  border-left:1px solid rgba(255,255,255,.08)!important;
}

/* Section blocks wewnątrz sidebar */
.section{
  background:rgba(13,17,23,.4)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:14px!important;
  padding:18px!important;
  margin-bottom:14px!important;
  color:#e6edf3!important;
  box-shadow:none!important;
}

.section-title, .section-header{
  font-family:var(--v4-f-d)!important;
  color:#8b949e!important;
  font-size:.7rem!important;
  font-weight:500!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  margin-bottom:12px!important;
}

/* === FORM ELEMENTS === */
.form-group{ margin-bottom:14px; }

.form-label{
  color:#8b949e!important;
  font-family:var(--v4-f-b);
  font-size:.78rem!important;
  font-weight:500!important;
  margin-bottom:6px!important;
  display:block;
}

input[type=text], input[type=email], input[type=tel],
input[type=number], input[type=search], textarea, select,
.form-input{
  background:rgba(0,0,0,.35)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  color:#e6edf3!important;
  font-family:var(--v4-f-b)!important;
  border-radius:10px!important;
  padding:11px 14px!important;
  font-size:.92rem!important;
  width:100%;
  transition:border-color .2s,background .2s;
  box-shadow:none!important;
}

input:focus, textarea:focus, select:focus, .form-input:focus{
  border-color:#00d1b2!important;
  background:rgba(0,0,0,.55)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(0,209,178,.15)!important;
}

/* select dropdown */
select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b949e' d='M6 8L0 0h12z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 14px center!important;
  background-size:10px!important;
  padding-right:36px!important;
}

select option{
  background:#0d1117!important;
  color:#e6edf3!important;
}

.input-with-unit{ position:relative; }
.input-with-unit::after{
  color:#8b949e!important;
}

/* === BUTTONS === */
.btn-primary, button.btn-primary, .hero-cta a.btn-primary,
.modal-btn-primary, button[type="submit"]{
  background:linear-gradient(135deg,#00d1b2,#0099ff)!important;
  color:#001a16!important;
  font-family:var(--v4-f-d)!important;
  font-weight:600!important;
  border:none!important;
  border-radius:100px!important;
  padding:13px 28px!important;
  font-size:.95rem!important;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 24px rgba(0,209,178,.3)!important;
  text-decoration:none!important;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,209,178,.45)!important;
}

.btn-secondary-outline, button.btn-secondary-outline{
  background:transparent!important;
  color:#e6edf3!important;
  border:1px solid rgba(255,255,255,.15)!important;
  font-family:var(--v4-f-d)!important;
  font-weight:500!important;
  border-radius:100px!important;
  padding:13px 28px!important;
  font-size:.95rem!important;
  transition:all .2s;
  text-decoration:none!important;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-secondary-outline:hover{
  border-color:#00d1b2!important;
  background:rgba(0,209,178,.05)!important;
  color:#00d1b2!important;
}

/* === EXPORT BUTTONS === */
.export-section{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }

.export-btn{
  background:rgba(20,26,35,.5)!important;
  color:#e6edf3!important;
  border:1px solid rgba(255,255,255,.1)!important;
  font-family:var(--v4-f-d)!important;
  font-weight:500!important;
  border-radius:10px!important;
  padding:11px 16px!important;
  transition:all .2s;
  text-align:center;
  cursor:pointer;
  font-size:.88rem!important;
}
.export-btn:hover{
  border-color:#00d1b2!important;
  color:#00d1b2!important;
  background:rgba(0,209,178,.05)!important;
  transform:translateY(-1px);
}

.export-btn.primary{
  background:linear-gradient(135deg,#00d1b2,#0099ff)!important;
  color:#001a16!important;
  border:none!important;
  font-weight:600!important;
}

/* === SLIDERS === */
.slider-group{
  background:rgba(0,0,0,.25)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:12px!important;
  padding:14px!important;
  margin-bottom:10px!important;
}

.slider-header{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  margin-bottom:10px!important;
}

.slider-header label, .slider-header span:first-child{
  color:#e6edf3!important;
  font-family:var(--v4-f-d)!important;
  font-weight:500!important;
  font-size:.85rem!important;
}

.slider-value{
  color:#00d1b2!important;
  font-family:var(--v4-f-d)!important;
  font-weight:600!important;
  background:rgba(0,209,178,.1)!important;
  border:1px solid rgba(0,209,178,.2)!important;
  padding:3px 12px!important;
  border-radius:100px!important;
  font-size:.82rem!important;
  min-width:60px;
  text-align:center;
}

.slider, input[type=range]{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:100%!important;
  height:6px!important;
  background:rgba(255,255,255,.08)!important;
  border-radius:100px!important;
  outline:none!important;
  cursor:pointer;
}

.slider::-webkit-slider-thumb, input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;
  height:20px;
  background:linear-gradient(135deg,#00d1b2,#0099ff);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(0,209,178,.5);
  transition:transform .15s;
  border:2px solid rgba(255,255,255,.1);
}
.slider::-webkit-slider-thumb:hover{ transform:scale(1.2); }

.slider::-moz-range-thumb, input[type=range]::-moz-range-thumb{
  width:20px;
  height:20px;
  background:linear-gradient(135deg,#00d1b2,#0099ff);
  border-radius:50%;
  cursor:pointer;
  border:2px solid rgba(255,255,255,.1);
}

/* === TYPE CARDS / MODE CARDS === */
.type-card, .mode-card{
  background:rgba(20,26,35,.6)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:12px!important;
  padding:16px!important;
  cursor:pointer;
  transition:all .25s;
  color:#e6edf3!important;
  position:relative;
}

.type-card:hover, .mode-card:hover{
  transform:translateY(-2px);
  border-color:#00d1b2!important;
  background:rgba(0,209,178,.04)!important;
}

.type-card.active, .type-card.selected,
.mode-card.active, .mode-card.selected{
  border-color:#00d1b2!important;
  background:rgba(0,209,178,.08)!important;
  box-shadow:0 0 0 1px #00d1b2 inset;
}

.type-icon{
  color:#00d1b2!important;
  font-size:1.5rem;
}

.type-card h3, .mode-card h3{
  font-family:var(--v4-f-d)!important;
  color:#e6edf3!important;
  font-size:1rem!important;
  margin-bottom:4px!important;
}

.type-card p, .mode-card p{
  color:#8b949e!important;
  font-size:.85rem!important;
}

.type-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

.type-tag{
  background:rgba(255,255,255,.06)!important;
  color:#8b949e!important;
  font-family:var(--v4-f-d)!important;
  font-size:.68rem!important;
  letter-spacing:.05em!important;
  padding:3px 9px!important;
  border-radius:100px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  text-transform:uppercase;
}

/* === STATS GRID === */
.stats-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-bottom:18px!important;
}

.stat-card{
  background:rgba(13,17,23,.5)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  padding:16px!important;
  border-radius:12px!important;
  text-align:center;
  transition:border-color .2s;
}

.stat-card:hover{
  border-color:rgba(0,209,178,.3)!important;
}

.stat-value{
  font-family:var(--v4-f-d)!important;
  font-size:1.6rem!important;
  font-weight:700!important;
  background:linear-gradient(135deg,#00d1b2,#0099ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent!important;
}

.stat-label{
  color:#8b949e!important;
  font-family:var(--v4-f-d)!important;
  font-size:.65rem!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  margin-top:4px;
}

/* === PANEL LIST === */
.panel-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.panel-item{
  background:rgba(13,17,23,.4)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:8px!important;
  padding:10px 14px!important;
  color:#e6edf3!important;
  font-size:.85rem!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
}

.panel-item:hover{
  border-color:rgba(0,209,178,.3)!important;
  background:rgba(13,17,23,.6)!important;
}

.panel-item .panel-dimensions{
  color:#8b949e!important;
  font-family:var(--v4-f-d)!important;
  font-size:.78rem!important;
}

/* === TOGGLE === */
.toggle, .joint-mode-toggle{
  display:inline-flex!important;
  background:rgba(0,0,0,.35)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:100px!important;
  padding:4px!important;
  width:fit-content;
  gap:0;
}

.toggle-label, .joint-mode-toggle label{
  padding:7px 16px!important;
  cursor:pointer;
  border-radius:100px!important;
  font-family:var(--v4-f-d)!important;
  font-size:.82rem!important;
  color:#8b949e!important;
  transition:all .2s;
  border:none!important;
}

.toggle input:checked + .toggle-label,
.joint-mode-toggle input:checked + label,
.toggle-label.active{
  background:linear-gradient(135deg,#00d1b2,#0099ff)!important;
  color:#001a16!important;
  font-weight:600!important;
}

.toggle input{ display:none; }

/* === PREVIEW PANEL === */
.preview, .preview-container{
  background:rgba(13,17,23,.3)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:18px!important;
  padding:20px!important;
}

.preview-header{
  background:transparent!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  padding-bottom:14px!important;
  margin-bottom:18px!important;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.preview-header h2, .preview-header .preview-title{
  font-family:var(--v4-f-d)!important;
  color:#e6edf3!important;
  font-size:1.1rem!important;
  font-weight:600!important;
}

/* View toggle (2D/3D) */
.view-toggle{
  display:inline-flex!important;
  background:rgba(0,0,0,.35)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:100px!important;
  padding:3px!important;
}

.view-toggle button{
  padding:7px 14px!important;
  border:none!important;
  background:transparent!important;
  color:#8b949e!important;
  font-family:var(--v4-f-d)!important;
  font-size:.82rem!important;
  font-weight:500!important;
  cursor:pointer;
  border-radius:100px!important;
  transition:all .2s;
}

.view-toggle button.active{
  background:linear-gradient(135deg,#00d1b2,#0099ff)!important;
  color:#001a16!important;
  font-weight:600!important;
}

/* Canvas */
canvas, .canvas-container, #preview-2d, #preview-3d, .preview-canvas{
  background:#0d1117!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:12px!important;
}

#svg-preview, .svg-preview{
  background:#0d1117!important;
  border-radius:12px!important;
}

/* SVG paths in preview */
.svg-preview svg path, .svg-preview svg line, .svg-preview svg polyline,
canvas + svg path{
  stroke:#00d1b2!important;
}

/* === FAQ === */
.faq-list{ display:flex; flex-direction:column; gap:10px; }

.faq-item{
  background:rgba(20,26,35,.5)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:14px!important;
  overflow:hidden;
  transition:border-color .2s;
}

.faq-item:hover{ border-color:rgba(0,209,178,.3)!important; }

.faq-question{
  padding:18px 22px!important;
  font-family:var(--v4-f-d)!important;
  font-weight:500!important;
  color:#e6edf3!important;
  background:transparent!important;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.faq-icon{
  color:#00d1b2!important;
  font-size:1.2rem;
  transition:transform .2s;
}

.faq-item.active .faq-icon{ transform:rotate(45deg); }

.faq-answer{
  background:rgba(0,0,0,.25)!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
  color:#8b949e!important;
  padding:18px 22px!important;
  font-size:.92rem!important;
  line-height:1.65;
}

/* === FEATURES / STEPS === */
.feature-item, .step-card{
  background:rgba(20,26,35,.5)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:14px!important;
  padding:24px!important;
}

.feature-icon, .step-number{
  background:linear-gradient(135deg,#00d1b2,#0099ff)!important;
  color:#001a16!important;
  font-family:var(--v4-f-d)!important;
  font-weight:600!important;
  border-radius:100px;
}

.feature-item h3, .step-card h3{
  font-family:var(--v4-f-d)!important;
  color:#e6edf3!important;
}

.feature-item p, .step-card p{
  color:#8b949e!important;
}

/* === CTA SECTION === */
.cta-section{
  background:linear-gradient(135deg,rgba(0,209,178,.06),rgba(0,153,255,.04))!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:22px!important;
  padding:48px 32px!important;
  text-align:center;
}

.cta-section h2{
  font-family:var(--v4-f-d)!important;
  color:#e6edf3!important;
}

.cta-link{
  color:#00d1b2!important;
  font-family:var(--v4-f-d);
}

.cta-links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* === FOOTER === */
.footer{
  background:rgba(13,17,23,.5)!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
  color:#8b949e!important;
  padding:48px 24px 32px!important;
  margin-top:80px!important;
  font-size:.88rem;
}

.footer a{ color:#8b949e!important; text-decoration:none; }
.footer a:hover{ color:#00d1b2!important; }

.footer-divider{
  border-color:rgba(255,255,255,.08)!important;
  opacity:.5;
}

/* === MODAL === */
.modal, .modal-overlay{
  background:rgba(0,0,0,.75)!important;
  backdrop-filter:blur(10px);
}

.modal-content{
  background:linear-gradient(135deg,rgba(20,26,35,.97),rgba(13,17,23,.97))!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:22px!important;
  box-shadow:0 40px 100px rgba(0,0,0,.6)!important;
  color:#e6edf3!important;
}

.modal-header{
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  padding:20px 28px!important;
}

.modal-header h2, .modal-header h3{
  font-family:var(--v4-f-d)!important;
  color:#e6edf3!important;
}

.modal-form{ padding:24px 28px!important; }

.modal-btn{
  font-family:var(--v4-f-d)!important;
  border-radius:100px!important;
  padding:11px 22px!important;
}

/* === MOBILE TABS === */
.mobile-tab{
  background:rgba(20,26,35,.6)!important;
  color:#8b949e!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:100px!important;
  padding:8px 16px!important;
  font-family:var(--v4-f-d)!important;
  font-size:.82rem!important;
}

.mobile-tab.active{
  background:linear-gradient(135deg,#00d1b2,#0099ff)!important;
  color:#001a16!important;
  border:none!important;
  font-weight:600!important;
}

/* === LOADING === */
.loading{
  color:#8b949e!important;
}

/* === FORM ERROR === */
.form-error{
  color:#ff7b72!important;
  background:rgba(248,81,73,.08)!important;
  border:1px solid rgba(248,81,73,.3);
  border-radius:8px;
  padding:8px 12px;
  margin-top:6px;
  font-size:.85rem;
}

/* === SCROLLBAR === */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:100px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(0,209,178,.4); }

/* === MOBILE === */
@media(max-width:768px){
  .header{ padding:12px 18px!important; }
  .section{ padding:14px!important; }
  .hero{ padding:48px 18px 32px!important; }
  .hero h1{ font-size:1.8rem!important; }
  .stats-grid{ grid-template-columns:1fr!important; }
}

/* === SUPRESS LEGACY === */
body, body *{
  -webkit-tap-highlight-color:transparent;
}

/* Wymuś tekst aspect everywhere */
p, span, div, label{
  color:inherit;
}

/* === HEADER CTA === */
.header-cta{
  background:linear-gradient(135deg,#00d1b2,#0099ff)!important;
  color:#001a16!important;
  font-family:var(--v4-f-d)!important;
  font-weight:600!important;
  border-radius:100px!important;
  padding:9px 18px!important;
  font-size:.85rem!important;
  text-decoration:none!important;
  box-shadow:0 2px 12px rgba(0,209,178,.25)!important;
  transition:transform .2s,box-shadow .2s;
}
.header-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(0,209,178,.4)!important;
  color:#001a16!important;
}

/* ============================================
   v3 — Sidebar / panel-item compact layout
   ============================================ */

/* SIDEBARS — szerokość minimalna żeby tekst się nie łamał */
.sidebar{
  min-width:260px!important;
  max-width:280px!important;
}
.info-panel{
  min-width:240px!important;
  max-width:260px!important;
}

/* Sekcje wewnątrz sidebarów — mniejszy padding */
.section{
  padding:14px!important;
  margin-bottom:10px!important;
}

.section-title{
  font-size:.68rem!important;
  margin-bottom:10px!important;
}

/* TYP GENERATORA select — pełna szerokość, nowrap */
.section select{
  width:100%!important;
  font-size:.85rem!important;
}

/* === SLIDER GROUPS — kompaktowe === */
.slider-group{
  padding:12px!important;
  margin-bottom:8px!important;
}
.slider-header{ margin-bottom:8px!important; }
.slider-header label, .slider-header span:first-child{ font-size:.82rem!important; }
.slider-value{
  font-size:.78rem!important;
  padding:2px 10px!important;
  min-width:54px!important;
}

/* === STATS GRID === */
.stats-grid{
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin-bottom:14px!important;
}
.stat-card{
  padding:12px 8px!important;
  border-radius:10px!important;
}
.stat-value{
  font-size:1.3rem!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stat-label{
  font-size:.6rem!important;
  margin-top:2px!important;
}

/* === PANEL ITEMS — compact horizontal === */
.panel-list{ gap:6px!important; }

.panel-item{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:8px 12px!important;
  border-radius:10px!important;
  background:rgba(13,17,23,.4)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  transition:border-color .2s,background .2s;
}

.panel-item:hover{
  border-color:rgba(0,209,178,.3)!important;
  background:rgba(13,17,23,.6)!important;
}

.panel-icon{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  background:linear-gradient(135deg,#00d1b2,#0099ff)!important;
  border-radius:8px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem!important;
  flex-shrink:0;
}

.panel-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.panel-name{
  font-family:var(--v4-f-d)!important;
  font-size:.82rem!important;
  font-weight:500!important;
  color:#e6edf3!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}

.panel-dims, .panel-dimensions{
  font-family:var(--v4-f-b)!important;
  font-size:.7rem!important;
  color:#8b949e!important;
  white-space:nowrap;
  line-height:1.2;
}

/* === MATERIAŁ section — mniejszy hint text === */
.section p, .section .hint{
  font-size:.7rem!important;
  color:#8b949e!important;
  line-height:1.4!important;
  margin:6px 0!important;
}

/* === Color picker / kolor materiału === */
input[type=color]{
  height:36px!important;
  border-radius:8px!important;
  border:1px solid rgba(255,255,255,.1)!important;
  background:rgba(0,0,0,.3)!important;
  cursor:pointer;
  padding:2px!important;
}

/* === FORM input compact === */
.form-group{ margin-bottom:10px!important; }
.form-label{ font-size:.72rem!important; margin-bottom:4px!important; }
input[type=text], input[type=number], input[type=email], select, textarea, .form-input{
  padding:9px 12px!important;
  font-size:.88rem!important;
}

/* === RESPONSIVE: tablet/mobile === */
@media(max-width:1280px){
  .sidebar{ min-width:240px!important; max-width:260px!important; }
  .info-panel{ min-width:220px!important; max-width:240px!important; }
}

@media(max-width:1024px){
  .sidebar, .info-panel{
    min-width:auto!important;
    max-width:none!important;
    width:100%!important;
  }
}

/* ============================================
   v3.1 — Footer inline styles override + mobile
   ============================================ */

/* Footer linki — nadpisz inline color: #3b82f6 */
.footer a[style*="color"]{
  color:#8b949e!important;
  transition:color .2s;
}
.footer a[style*="color"]:hover{
  color:#00d1b2!important;
}

/* Cloudflare email protection */
.__cf_email__{
  color:#8b949e!important;
  text-decoration:none;
}

/* Footer telefon */
.footer a[href^="tel:"]{
  color:#e6edf3!important;
  font-family:var(--v4-f-d)!important;
  font-weight:500;
}

/* Hero CTA wewnętrzne SVG */
.btn-primary svg, .btn-secondary-outline svg{
  fill:currentColor;
}

/* CONSTRAIN sidebar wszelkie style="background: var(--bg)" inline */
.section[style*="background"]{
  background:rgba(13,17,23,.4)!important;
}

/* Hero z anchor #generator — żeby smooth scroll działał */
html{ scroll-behavior:smooth; }

/* Better preview area placeholder */
.preview-content{
  background:transparent!important;
}

/* === Mobile fine-tuning === */
@media(max-width:768px){
  .header{
    padding:10px 14px!important;
    flex-wrap:wrap;
    gap:8px!important;
  }
  .header-left, .header-right{ flex:1; min-width:0; }
  .brand-logo span{ font-size:.9rem!important; }
  .app-name{ font-size:.85rem!important; }
  .back-link{ font-size:.78rem!important; }
  .back-link svg{ width:14px!important; height:14px!important; }
  
  .hero{ padding:40px 16px 24px!important; }
  .hero h1{ font-size:1.7rem!important; }
  .hero-description{ font-size:.95rem!important; }
  .hero-cta{ flex-direction:column; }
  .hero-cta a{ width:100%; justify-content:center; }
  
  .sidebar, .info-panel{
    padding:14px!important;
    border-radius:14px!important;
  }
  
  .footer{
    padding:32px 16px 24px!important;
    font-size:.82rem!important;
  }
}

@media(max-width:480px){
  .hero h1{ font-size:1.5rem!important; }
  .section{ padding:12px!important; }
}