/* Generator ofert elLED: te same tokeny, czcionka i kontrolki co elled.pl */

@font-face{
  font-family:"Onest"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("../fonts/onest-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Onest"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("../fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  color-scheme:dark;
  --bg:#0f0f11; --surface:#18181b; --text:#f2f2f3;
  --ink-2:#c8c8ce; --muted:#9d9da6;
  --line:#2a2a30; --line-2:#3b3b43;
  --grey:#161619;
  --red:#e11c23; --red-dark:#b8141b; --red-tint:#3a1517;
  --focus:rgba(242,242,243,.12);
  --gutter:24px; --r-img:12px; --r-ctl:10px; --header-h:76px;
  --font:"Onest", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.16, 1, .3, 1);
  --t:.24s var(--ease);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-color:var(--line-2) transparent; scrollbar-width:thin; }
body{
  margin:0; font-family:var(--font); font-size:1rem; line-height:1.55; color:var(--text);
  background:var(--bg); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; caret-color:var(--red);
}
::selection{ background:var(--red); color:#fff; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }
h1,h2,h3,p{ margin:0; }
h1{ font-size:clamp(2rem, 3.4vw, 2.75rem); line-height:1.06; letter-spacing:-.03em; font-weight:700; text-wrap:balance; }
h2{ font-size:1.375rem; line-height:1.2; letter-spacing:-.02em; font-weight:700; }
.lead{ font-size:1.125rem; color:var(--ink-2); margin-top:12px; max-width:52ch; }
.muted{ color:var(--muted); }
.small{ font-size:.9375rem; }

.wrap{ width:100%; max-width:1480px; margin-inline:auto; padding-inline:var(--gutter); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px;
  border:1.5px solid transparent; border-radius:var(--r-ctl); font:inherit; font-size:1rem; font-weight:600;
  cursor:pointer; white-space:nowrap; transition:background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.btn:active{ transform:translateY(1px); }
.btn--red{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn--line{ background:var(--surface); border-color:var(--line-2); color:var(--text); }
.btn--line:hover{ border-color:var(--text); }
.btn--sm{ height:44px; padding:0 18px; font-size:.9375rem; }
.btn--danger:hover{ border-color:var(--red); color:var(--red); }

.site-header{ position:sticky; top:0; z-index:60; background:var(--bg); border-bottom:1px solid var(--line); }
.header-inner{ display:flex; align-items:center; gap:12px; height:var(--header-h); }
.brand{ display:flex; align-items:center; gap:18px; margin-right:auto; min-width:0; }
.brand-logo{ display:block; height:56px; width:auto; flex:none; }.brand-title{ font-weight:600; color:var(--muted); padding-left:18px; border-left:1px solid var(--line-2); white-space:nowrap; }

.layout{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 620px); gap:48px; align-items:start; padding-block:48px 72px; }
.head{ margin-bottom:32px; }
.install-btn{ margin-top:16px; }
.install-btn[hidden]{ display:none; }

.panel{ background:var(--grey); border-radius:var(--r-img); padding:28px; margin-bottom:20px; }
.panel > h2{ margin-bottom:20px; }
.panel > .muted + .saved{ margin-top:14px; }

.field{ margin-bottom:18px; min-width:0; }
.panel > .field:last-child, .panel > .field-row:last-child .field{ margin-bottom:0; }
.field label{ display:block; font-size:.9375rem; font-weight:600; margin-bottom:7px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row--3{ grid-template-columns:1fr 1fr 1fr; }
.field-row--4{ grid-template-columns:1.2fr 1.4fr .7fr .7fr; }
input, select{
  width:100%; height:50px; padding:0 14px; font:inherit; color:var(--text); background:var(--surface);
  border:1.5px solid var(--line-2); border-radius:var(--r-ctl); transition:border-color var(--t), box-shadow var(--t);
}
input::placeholder{ color:#8a8a92; }
input:hover, select:hover{ border-color:#a9a9b0; }
input:focus, select:focus{ outline:none; border-color:var(--text); box-shadow:0 0 0 3px var(--focus); }
[aria-invalid="true"]{ border-color:var(--red); }

.variant-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.variant-tools{ display:flex; gap:8px; }

.items{ margin:6px 0 14px; }
.items-title{ font-size:.9375rem; font-weight:600; margin-bottom:8px; }
.item{ display:grid; grid-template-columns:28px minmax(0, 1fr) 96px 136px 44px; gap:8px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.item-no{ font-weight:700; color:var(--muted); text-align:right; }
.item-name{ grid-column:2 / 5; }
.item-model{ grid-column:2; grid-row:2; }
.item-power{ grid-column:3; grid-row:2; }
.item-price{ grid-column:4; grid-row:2; }
.item-del{ grid-column:5; grid-row:1; }
.item input{ height:46px; }
.item .money{ text-align:right; }
.item-del{ width:44px; padding:0; font-size:1.25rem; line-height:1; }
.item-tools{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }

.sums{ border-top:1px solid var(--line-2); padding-top:14px; margin-top:4px; }
.sums div{ display:flex; justify-content:space-between; gap:16px; padding:3px 0; }
.sums dt{ color:var(--muted); }
.sums dd{ margin:0; font-weight:600; text-align:right; }
.sums .sums-final dt{ color:var(--text); font-weight:700; }
.sums .sums-final dd{ font-size:1.1875rem; font-weight:700; }
.sums dl{ margin:0; }

.add-variant{ width:100%; margin-bottom:20px; border-style:dashed; }

.saved{ list-style:none; margin:0; padding:0; }
.saved li{ display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.saved-info{ flex:1; min-width:0; }
.saved-name{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.saved-meta{ display:block; color:var(--muted); font-size:.875rem; }
.saved .current .saved-name{ color:var(--red); }
.saved-empty{ color:var(--muted); border-top:0 !important; padding-top:0 !important; }

.preview-col{ align-self:stretch; }
.preview-sticky{ position:sticky; top:calc(var(--header-h) + 24px); }
#preview{ display:block; width:100%; height:calc(100vh - var(--header-h) - 150px); min-height:420px; background:var(--grey); border:1px solid var(--line); border-radius:var(--r-img); }
.status{ min-height:1.5em; margin-top:10px; font-size:.9375rem; color:var(--muted); }
.status.is-error{ color:var(--red); font-weight:600; }
.actions{ display:grid; grid-template-columns:1fr 2fr; gap:10px; margin-top:6px; }

@media (max-width:1180px){
  .layout{ grid-template-columns:minmax(0, 1fr); gap:0; padding-block:32px 170px; }
  #preview{ display:none; }
  .preview-col{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--bg); border-top:1px solid var(--line); padding:8px var(--gutter) max(12px, env(safe-area-inset-bottom)); }
  .preview-sticky{ position:static; }
  .status{ margin-top:0; }
}
@media (max-width:760px){
  :root{ --gutter:16px; --header-h:64px; }
  .brand-logo{ height:44px; }
  .brand-title{ display:none; }
  .panel{ padding:20px 16px; }
  .field-row, .field-row--3, .field-row--4{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .item{ grid-template-columns:24px minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .item-name{ grid-column:2 / 4; }
  .item-model{ grid-column:2 / 4; grid-row:2; }
  .item-power{ grid-column:2; grid-row:3; }
  .item-price{ grid-column:3; grid-row:3; }
  .item-del{ grid-column:4; grid-row:1; }
  .item-no{ grid-row:1; }
  input, select{ font-size:16px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }