/* ---------------------------------------------------------- rail */
.rail{display:flex;list-style:none;margin-bottom:var(--s5)}
.rail li{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;
  position:relative;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--text-faint);transition:color .3s var(--ease)}
.rail li::before{content:'';position:absolute;top:8px;left:-50%;width:100%;height:2px;
  border-radius:2px;background:var(--line);transition:background-color .4s var(--ease)}
.rail li:first-child::before{display:none}
.rail li i{width:17px;height:17px;border-radius:50%;background:var(--bg-surface);
  border:2px solid var(--line-hi);position:relative;z-index:1;
  transition:transform .35s var(--bounce),background-color .3s var(--ease),
             border-color .3s var(--ease),box-shadow .3s var(--ease)}
.rail li.done{color:var(--text-muted)}
.rail li.done i{background:var(--primary);border-color:var(--primary)}
.rail li.done::before{background:var(--primary)}
.rail li.on{color:var(--text-main)}
.rail li.on i{background:var(--primary);border-color:var(--primary);transform:scale(1.3);
  box-shadow:0 0 0 5px var(--primary-glow)}
@media(max-width:620px){.rail li span{display:none}}

/* ---------------------------------------------------------- tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s2)}
.tile{position:relative;display:flex;flex-direction:column;cursor:pointer;padding:0;
  background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;color:var(--text-main);font-family:var(--f-sans);text-align:left;
  transition:transform .28s var(--ease),border-color .28s var(--ease),
             box-shadow .28s var(--ease)}
.tile:hover{transform:translateY(-3px);border-color:var(--line-hi);box-shadow:var(--sh)}
.tile img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--art)}
.tile .cap{display:flex;align-items:center;gap:7px;padding:11px 13px;font-size:13.5px;
  font-weight:500;line-height:1.35}
.tile.sel{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}
.tile.sel .cap{color:var(--primary)}
.tile .ext{margin-left:auto;color:var(--accent-cyan);font-size:14px;flex:none}
.tile .ext:hover{color:var(--primary)}

/* ---------------------------------------------------------- adjust */
.adjust{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:var(--s4);align-items:start}
.adjust .stage{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--art)}
.adjust canvas{width:100%;height:auto;display:block}
@media(max-width:880px){.adjust{grid-template-columns:1fr}}

/* ---------------------------------------------------------- result */
.result{margin-top:var(--s4);text-align:center}
.result img{max-width:100%;max-height:430px;margin:0 auto;border-radius:var(--r);
  background:var(--art);border:1px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s2)}
.gallery .wide{grid-column:1/-1}
.gallery figure{background:var(--bg-surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.gallery img{width:100%;background:var(--art)}
.gallery figcaption{padding:9px 12px;font-size:12.5px;color:var(--text-muted)}

/* ---------------------------------------------------------- notices */
.notice{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-sm);
  font-size:14px;line-height:1.5;border:1px solid}
.notice.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.notice.bad{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
.notice.good{background:var(--primary-soft);border-color:var(--primary-glow);color:var(--primary)}
.status{font-family:var(--f-mono);font-size:12.5px;color:var(--text-muted);
  border-left:2px solid var(--line-hi);padding:4px 0 4px 12px;margin-top:var(--s2);
  min-height:19px}
.status.bad{color:var(--danger);border-left-color:var(--danger)}
.empty{padding:40px;border:1px dashed var(--line);border-radius:var(--r);
  text-align:center;color:var(--text-faint)}
.empty a{color:var(--primary)}

/* ---------------------------------------------------------- overlay */
.veil{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s3);
  background:var(--overlay);backdrop-filter:blur(5px)}
.veil p{color:var(--text-muted);font-size:14.5px}
.spin{width:34px;height:34px;border-radius:50%;border:2px solid var(--line-hi);
  border-top-color:var(--primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:95;
  max-width:min(540px,92vw);padding:13px 19px;border-radius:var(--r);font-size:14.5px;
  background:var(--bg-card-hover);border:1px solid var(--line-hi);
  border-left:3px solid var(--primary);backdrop-filter:blur(14px);box-shadow:var(--sh)}
.toast.bad{border-left-color:var(--danger)}


/* ---------------------------------------------------------- saved sets */
.saved-list{display:flex;flex-wrap:wrap;gap:8px}
.saved-chip{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--r-pill);overflow:hidden;background:var(--bg-surface);
  transition:border-color .2s var(--ease)}
.saved-chip:hover{border-color:var(--primary)}
.saved-chip button{background:none;border:none;color:var(--text-main);
  font-family:var(--f-sans);font-size:13.5px;padding:8px 14px;cursor:pointer}
.saved-chip em{font-style:normal;color:var(--text-faint);margin-left:7px;
  font-family:var(--f-mono);font-size:11.5px}
.saved-chip .x{padding:8px 12px;color:var(--text-faint);font-size:16px;
  border-left:1px solid var(--line)}
.saved-chip .x:hover{color:var(--danger)}

/* ---------------------------------------------------------- progress
   A real bar only when there is real progress to report: variations are
   separate calls, so "2 of 3" is true. A single generation has no signal
   from the model, so it gets an honest counting timer instead. */
.prog{width:260px;height:5px;border-radius:3px;background:var(--line-hi);overflow:hidden}
.prog-fill{height:100%;width:0;border-radius:3px;background:var(--primary);
  transition:width .4s var(--ease)}
.prog-note{color:var(--text-faint);font-size:13px;font-family:var(--f-mono);
  min-height:18px}

/* ---------------------------------------------------------- phones */
@media(max-width:760px){
  .toast{bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom,0px))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile .cap{padding:9px 10px;font-size:13px}
  .card{padding:var(--s3)}
  .card-head{margin-bottom:var(--s3)}
  .rail{margin-bottom:var(--s4)}
}