/* Shutter Recap - style aplikacji. Port makiet: ekran-1-start.html,
   ekran-2-dashboard.html, ekran-3-eksport.html (te same tokeny i uklady). */
:root{
  --paper:#f7f4f0; --card:#ffffff;
  --ink:#222222; --ink2:#333333; --muted:#6b6b6b;
  --copper:#B85A18; --copper-deep:#8A3F0E; --bronze:#9a6230;
  --sand:#ddccb9; --track:#ece5da; --line:#e3dbcf;
  --mono:"SF Mono",Menlo,ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--paper);}
body{
  min-height:100vh; background:var(--paper); color:var(--ink);
  font-family:'Open Sans',sans-serif; min-width:1180px;
}
.mono{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--bronze);}
button{font-family:inherit;}

/* przelaczanie ekranow */
.screen{display:none; min-height:100vh; flex-direction:column; max-width:1440px; margin:0 auto;}
body[data-screen="start"] #screen-start{display:flex;}
body[data-screen="dash"] #screen-dash{display:flex;}
body[data-screen="export"] #screen-export{display:flex;}

/* ===== nawigacja ===== */
.nav{
  background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 64px; height:72px;
}
.nav-dash{padding:0 48px; height:68px;}
.logo{font-family:Montserrat,sans-serif; font-weight:800; font-size:21px; letter-spacing:-0.01em;}
.nav-dash .logo{font-size:19px;}
.logo em{font-style:normal; color:var(--copper);}
.logo small{
  display:block; font-family:var(--mono); font-weight:400; font-size:10px;
  letter-spacing:.1em; color:var(--muted); margin-top:1px;
}
.nav-right{display:flex; align-items:center; gap:32px;}
.nav-link{font-size:15px; font-weight:600; color:var(--ink2); text-decoration:none;}
.badge{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--copper-deep);
  border:1px solid var(--copper); border-radius:99px; padding:4px 12px;
}
.file-chip{
  display:flex; align-items:center; gap:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:99px;
  padding:8px 18px; max-width:640px; overflow:hidden;
}
.dot{width:8px; height:8px; border-radius:50%; background:#4a7c40; flex-shrink:0;}
.file-chip span:last-child{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.back{font-size:14.5px; font-weight:600; color:var(--ink2); text-decoration:none;}
.back b{color:var(--copper-deep);}

/* ===== przyciski ===== */
.btn{
  display:inline-block; background:var(--copper); color:#fff;
  font-family:Montserrat,sans-serif; font-weight:700; font-size:15px;
  border:0; border-radius:8px; padding:12px 26px; cursor:pointer;
}
.btn:hover{background:var(--copper-deep);}
.btn:disabled{opacity:.5; cursor:default;}
.btn-ghost{
  background:transparent; color:var(--copper-deep); font-family:Montserrat,sans-serif;
  font-weight:700; font-size:14.5px; border:1.5px solid var(--copper);
  border-radius:8px; padding:0 22px; cursor:pointer;
}

/* ===== EKRAN 1: START ===== */
.hero{display:flex; gap:72px; padding:72px 64px 64px; align-items:flex-start;}
.hero-left{flex:1; padding-top:20px;}
.hero h1{
  font-family:Montserrat,sans-serif; font-weight:800; font-size:52px;
  letter-spacing:-0.02em; line-height:1.1; margin-top:18px;
}
.hero h1 .akcent{color:var(--copper);}
.sub{font-size:20px; line-height:1.6; color:var(--ink2); margin-top:22px; max-width:560px;}
.sub b{color:var(--ink);}
.chips{display:flex; gap:12px; margin-top:30px;}
.chip{
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:99px;
  padding:9px 18px; font-size:14px; font-weight:600; color:var(--ink2);
}
.chip svg{flex-shrink:0;}
.hero-note{margin-top:34px; font-size:14px; color:var(--muted); max-width:520px; line-height:1.6;}

.hero-right{width:560px; flex-shrink:0;}
.drop-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:20px; box-shadow:0 12px 32px rgba(34,34,34,.06);
}
.drop-zone{
  border:2px dashed var(--sand); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:44px 40px 40px; transition:border-color .15s, background .15s;
}
.drop-zone.dragover{border-color:var(--copper); background:#fdf9f5;}
.drop-zone h2{
  font-family:Montserrat,sans-serif; font-weight:700; font-size:22px;
  letter-spacing:-0.01em; margin-top:20px;
}
.drop-zone p{font-size:15px; color:var(--muted); margin-top:8px;}
.drop-zone .btn{font-size:16px; padding:15px 34px; margin-top:24px;}
.drop-progress, .drop-error{
  border:2px dashed var(--sand); border-radius:12px; text-align:center;
  padding:56px 40px;
}
.drop-progress h2, .drop-error h2{
  font-family:Montserrat,sans-serif; font-weight:700; font-size:22px; letter-spacing:-0.01em;
}
.drop-error p{font-size:15px; color:var(--ink2); margin-top:12px; line-height:1.6;}
.drop-error .btn{margin-top:22px;}
.progress-track{height:8px; background:var(--track); border-radius:99px; margin:26px 10px 14px; overflow:hidden;}
.progress-fill{
  height:100%; width:30%; background:var(--copper); border-radius:99px;
  animation:slide 1.2s ease-in-out infinite;
}
@keyframes slide{0%{margin-left:-30%;}100%{margin-left:100%;}}
.drop-meta{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding:0 6px;}
.drop-meta .mono{font-size:10.5px; color:var(--muted);}
.privacy-strip{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--paper); border-radius:10px; padding:14px 16px; margin-top:14px;
}
.privacy-strip svg{flex-shrink:0; margin-top:2px;}
.privacy-strip p{font-size:13.5px; line-height:1.55; color:var(--ink2);}

.steps{padding:0 64px;}
.steps-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px;}
.steps-head h2{font-family:Montserrat,sans-serif; font-weight:700; font-size:26px; letter-spacing:-0.01em;}
.steps-grid{display:flex; gap:24px;}
.step{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:26px 28px 28px;
}
.step-num{font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--copper-deep);}
.step h3{font-family:Montserrat,sans-serif; font-weight:700; font-size:19px; letter-spacing:-0.01em; margin-top:10px;}
.step p{font-size:14.5px; line-height:1.6; color:var(--muted); margin-top:8px;}

/* ===== stopka (wspolna) ===== */
.foot{
  margin-top:auto; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  padding:0 48px; height:64px; background:var(--card);
}
.screen-start .foot{padding:0 64px; height:76px;}
.foot .mono{color:var(--muted); font-size:10.5px;}
.foot .site{font-size:15px; font-weight:700; color:var(--copper-deep);}
.screen-dash .foot, .screen-export .foot{background:transparent; height:56px; margin-top:26px;}

/* ===== EKRAN 2: DASHBOARD ===== */
.range-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 48px 0; gap:18px;
}
.range-left{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.seg{display:flex; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:4px; gap:4px;}
.seg button{
  font-family:'Open Sans',sans-serif; font-size:14px; font-weight:600;
  color:var(--ink2); background:transparent; border:0; border-radius:7px;
  padding:9px 16px; cursor:pointer; white-space:nowrap;
}
.seg button.on{background:var(--copper); color:#fff;}
.range-detail{display:flex; align-items:center; gap:8px;}
.range-input{
  font-family:'Open Sans',sans-serif; font-size:14px; font-weight:600; color:var(--ink2);
  background:var(--card); border:1px solid var(--line); border-radius:8px; padding:9px 12px;
}
.range-dash{color:var(--muted); font-weight:700;}
#rangeMeta{white-space:nowrap;}

.kpis{display:flex; gap:16px; padding:24px 48px 0;}
.kpi{flex:1; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px 16px;}
.kpi b{
  display:block; font-family:Montserrat,sans-serif; font-weight:700; font-size:30px;
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kpi.main b{color:var(--copper-deep);}
.kpi span{display:block; font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.35;}

.grid{display:flex; gap:20px; padding:20px 48px 0; align-items:flex-start;}
.col-main{flex:1; display:flex; flex-direction:column; gap:20px; min-width:0;}
.col-side{width:420px; flex-shrink:0; display:flex; flex-direction:column; gap:20px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px 26px;}
.card-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;}
.card-head h2, .card h2{font-family:Montserrat,sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.01em;}
.card-head .mono{font-size:10.5px;}

/* wykres */
.chart{display:flex; align-items:flex-end; height:190px; padding-top:26px;}
.colm{flex:1; position:relative; display:flex; align-items:flex-end; height:100%;}
.bar{width:100%; background:var(--sand); border-radius:4px 4px 0 0;}
.bar.max{background:var(--copper);}
.colm .val{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--copper-deep);
  white-space:nowrap;
}
.chart-base{height:2px; background:var(--ink);}
.chart-labels{display:flex; margin-top:7px;}
.chart-labels i{
  flex:1; text-align:center; font-style:normal; font-family:var(--mono);
  font-size:10px; color:var(--muted); overflow:hidden;
}
/* podpis o latach odcietych od osi (sumy pozostaja pelne) */
.chart-note{margin-top:10px; text-align:right; font-size:10px; color:var(--muted); letter-spacing:.04em;}

/* obiektywy */
.lens{display:flex; flex-direction:column; gap:13px;}
.lens-row{display:flex; align-items:center; gap:14px;}
.lens-name{width:280px; font-size:14px; font-weight:600; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lens-track{flex:1; height:9px; background:var(--track); border-radius:0 4px 4px 0; position:relative;}
.lens-fill{position:absolute; left:0; top:0; bottom:0; background:var(--copper); border-radius:0 4px 4px 0;}
.lens-val{
  width:118px; text-align:right; font-family:Montserrat,sans-serif; font-weight:700;
  font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.lens-val small{font-family:'Open Sans',sans-serif; font-weight:400; color:var(--muted); font-size:11.5px;}

/* podglad infografiki (dashboard) */
.preview-card{padding-bottom:20px;}
.preview-box{
  width:302px; height:378px; margin:2px auto 0; overflow:hidden;
  border:1px solid var(--line); border-radius:8px;
  box-shadow:0 10px 26px rgba(34,34,34,.10); background:var(--paper);
}
/* Podglad to dokladnie ten sam SVG, ktory trafia do PNG. */
.preview-box svg{display:block; width:100%; height:100%; pointer-events:none;}
.format-chips{display:flex; gap:8px; justify-content:center; margin-top:16px;}
.fchip{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  border:1px solid var(--line); border-radius:99px; padding:6px 14px; color:var(--muted);
  background:transparent; cursor:pointer;
}
.fchip.on{border-color:var(--copper); color:var(--copper-deep); font-weight:700;}
.preview-card .btn{display:block; width:100%; margin-top:16px; text-align:center;}

/* aparaty */
.cam-row{display:flex; justify-content:space-between; align-items:baseline; padding:9px 0;}
.cam-row + .cam-row{border-top:1px solid var(--paper);}
.cam-name{font-size:14px; font-weight:600; color:var(--ink2);}
.cam-val{font-family:Montserrat,sans-serif; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums;}

/* ===== EKRAN 3: EKSPORT ===== */
.page-head{padding:34px 48px 0;}
.page-head h1{font-family:Montserrat,sans-serif; font-weight:800; font-size:32px; letter-spacing:-0.02em; margin-top:8px;}
.grid-export{gap:24px; padding:28px 48px 0;}
.col-a{width:400px; flex-shrink:0; display:flex; flex-direction:column; gap:20px;}
.col-b{width:512px; flex-shrink:0; display:flex; flex-direction:column; gap:14px; align-items:center;}
.col-c{flex:1; display:flex; flex-direction:column; gap:20px; min-width:0;}

.fmt{display:flex; flex-direction:column; gap:14px; margin-top:16px;}
.fmt-card{
  display:flex; align-items:center; gap:16px;
  border:1.5px solid var(--line); border-radius:12px; padding:16px 18px; cursor:pointer;
  position:relative;
}
.fmt-card.on{border-color:var(--copper); background:#fdf9f5;}
.fmt-thumb{background:var(--sand); border-radius:4px; flex-shrink:0;}
.fmt-thumb.ig{width:36px; height:45px;}
.fmt-thumb.li{width:40px; height:40px;}
.fmt-name{font-family:Montserrat,sans-serif; font-weight:700; font-size:16px;}
.fmt-dim{display:block; font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:3px; letter-spacing:.06em;}
.fmt-check{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; background:var(--copper);
  display:none; align-items:center; justify-content:center;
}
.fmt-card.on .fmt-check{display:flex;}
.col-a .btn{display:block; width:100%; font-size:17px; padding:17px 0; margin-top:20px; text-align:center;}
.dl-note{margin-top:12px; text-align:center;}
.dl-note .mono{font-size:10.5px; color:var(--muted);}

.mail-head{display:flex; justify-content:space-between; align-items:baseline;}
.opt{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:3px 10px;
}
.mail p{font-size:14px; line-height:1.6; color:var(--muted); margin-top:10px;}
.mail-row{display:flex; gap:10px; margin-top:16px;}
.mail input{
  flex:1; font-family:'Open Sans',sans-serif; font-size:14.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:12px 14px;
}
.mail input::placeholder{color:#a89f93;}

.preview-box-export{
  width:512px; height:640px; margin:0;
  border-radius:10px; box-shadow:0 16px 40px rgba(34,34,34,.12);
}
.preview-box-export.sq{height:512px;}

.gear-sub{font-size:13.5px; color:var(--muted); margin-top:6px; line-height:1.5;}
.gear{display:flex; flex-direction:column; margin-top:8px;}
.gear-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0;}
.gear-row + .gear-row{border-top:1px solid var(--paper);}
.gear-info b{display:block; font-size:14.5px; font-weight:700; color:var(--ink);}
.gear-info span{display:block; font-size:12px; color:var(--muted); margin-top:2px;}
.gear-link{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--copper-deep);
  border:1px dashed var(--copper); border-radius:8px; padding:8px 12px; white-space:nowrap;
  text-decoration:none;
}
a.gear-link{border-style:solid; background:#fdf9f5;}
.gear-note{margin-top:14px;}
.gear-note .mono{font-size:10px; color:var(--muted);}

/* ===== overlay / modal / toast ===== */
.overlay{
  position:fixed; inset:0; background:rgba(34,34,34,.45);
  display:flex; align-items:center; justify-content:center; z-index:50;
}
.overlay[hidden]{display:none;}
.overlay-card{
  background:var(--card); border-radius:16px; padding:40px 48px; text-align:center;
  box-shadow:0 24px 64px rgba(34,34,34,.25); max-width:440px;
}
.overlay-card-wide{max-width:560px; text-align:left;}
.overlay-card h2{font-family:Montserrat,sans-serif; font-weight:700; font-size:22px; letter-spacing:-0.01em;}
.overlay-card p{font-size:15px; line-height:1.6; color:var(--ink2); margin-top:12px;}
.overlay-card p.mono{font-size:11px; color:var(--bronze); margin-top:14px; line-height:1.6;}
.modal-actions{display:flex; gap:12px; margin-top:24px;}
.modal-actions .btn-ghost{padding:12px 22px;}
.spinner{
  width:44px; height:44px; margin:0 auto 18px; border-radius:50%;
  border:4px solid var(--track); border-top-color:var(--copper);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
#loadingMeta{margin-top:10px; min-height:16px;}

.toast{
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  padding:13px 22px; border-radius:10px; z-index:60;
  box-shadow:0 10px 30px rgba(34,34,34,.3);
}