/* RouteReel — app.css */
:root{
  --ink:#2c2f28; --muted:#7b8073; --line:#e4e7dd; --bg:#f6f8f3; --card:#ffffff;
  --accent:#ff5d8f; --accent-ink:#b3325f; --ok:#3aa76d; --radius:16px;
  --shadow:0 1px 2px rgba(40,44,36,.06),0 8px 24px rgba(40,44,36,.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ovfont:Arial,"Liberation Sans","Noto Sans",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:#fff;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;color:var(--ink);font-size:18px}
.brand-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,93,143,.18)}
.topbar .tag{color:var(--muted);font-size:13px}
.topbar .back{color:var(--accent-ink);text-decoration:none;font-weight:600;font-size:14px}

/* layout */
.wrap{max-width:760px;margin:0 auto;padding:22px 16px 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:18px}
h1{font-size:24px;margin:0 0 4px}
h2{font-size:18px;margin:0 0 14px}
.sub{color:var(--muted);margin:0 0 18px}

/* form */
.form .field{margin-bottom:16px;position:relative}
label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
input[type=text]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:16px;background:#fcfdfb}
input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,93,143,.15)}
input[type=color]{width:54px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:3px}
.swap-row{display:flex;justify-content:center;margin:-6px 0 6px}
.swap{border:1px solid var(--line);background:#fff;border-radius:50%;width:38px;height:38px;font-size:18px;cursor:pointer;color:var(--muted)}
.swap:hover{border-color:var(--accent);color:var(--accent-ink)}

/* autocomplete */
.suggest{list-style:none;margin:6px 0 0;padding:6px;position:absolute;z-index:20;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:280px;overflow:auto}
.suggest li{padding:9px 10px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.suggest li:hover{background:#f3f6ef}
.suggest strong{font-size:14px;font-weight:600}
.suggest span{font-size:12px;color:var(--muted)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 18px}

/* segmented control */
.seg{display:inline-flex;background:#f0f2ec;border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:8px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* buttons */
.btn{border:1px solid var(--line);background:#fff;padding:12px 18px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:#cfd3c8}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;width:100%}
.btn.primary:hover{filter:brightness(.97)}
.btn:disabled{opacity:.6;cursor:default}
.err{color:#c0392b;font-size:14px;margin:10px 0 0}

/* recent */
.recent{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.recent a{display:flex;justify-content:space-between;gap:12px;text-decoration:none;color:var(--ink);padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.recent a:hover{border-color:var(--accent)}
.rt-title{font-weight:600}
.rt-meta{color:var(--muted);font-size:13px;white-space:nowrap}

/* ---------- preview page ---------- */
.preview-wrap{display:flex;gap:22px;align-items:flex-start;max-width:1180px;margin:0 auto;padding:22px 16px 60px}
.stage-col{flex:1 1 auto;display:flex;justify-content:center;position:sticky;top:18px;align-self:flex-start}
.stage{position:relative;background:#eef3ec;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);max-width:100%}
.stage[data-ratio="9:16"]{aspect-ratio:9/16;height:min(74vh,760px)}
.stage[data-ratio="16:9"]{aspect-ratio:16/9;width:min(100%,920px)}
.stage[data-ratio="1:1"]{aspect-ratio:1/1;height:min(70vh,660px)}
.map{position:absolute;inset:0}
.maplibregl-canvas{outline:none}

/* overlays */
.ov{position:absolute;z-index:5;pointer-events:none}
.ov[hidden]{display:none!important}
.ov-dest{z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:80%;text-align:center}
.ov-dest-photo{display:block;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.35);background:#fff}
.ov-dest-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ov-dest-name{display:inline-block;background:rgba(255,255,255,.94);color:var(--ink);font-family:var(--ovfont);font-weight:800;line-height:1.2;padding:4px 12px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ov-title{top:0;left:0;right:0;padding:14px 18px 22px;font-size:18px;font-weight:800;color:#fff;text-align:center;
  text-shadow:0 1px 6px rgba(0,0,0,.5);background:linear-gradient(to bottom,rgba(20,22,18,.55),rgba(20,22,18,0));
  transition:opacity .25s}
.ov-badges{top:auto;bottom:54px;left:18px;display:flex;gap:8px}
.badge{background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;font-family:var(--ovfont);font-weight:700;font-size:13px;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.badge svg{vertical-align:-.14em;margin-right:.25em}
.ov-attrib{bottom:6px;right:8px;font-size:10px;color:#5c6152;background:rgba(255,255,255,.7);padding:2px 6px;border-radius:6px}

/* arrival: small pill anchored at point B, or a corner toast — never covers the route */
.ov-arrive-pill{transform:translate(-50%,-150%);background:#fff;color:var(--ink);font-weight:800;font-size:13px;
  padding:7px 13px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.22);white-space:nowrap}
.ov-arrive-pill .ap-check{color:#2e9e6b;font-weight:900;margin-right:.3em}
.ov-toast{left:auto;right:14px;bottom:54px;background:rgba(255,255,255,.95);color:var(--ink);font-weight:700;font-size:13px;
  padding:8px 14px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.2);animation:pop .35s ease}
.ov-toast .ap-check{color:#2e9e6b;font-weight:900;margin-right:.35em}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* markers */
.rr-pin{display:flex;flex-direction:column;align-items:center;transform:translateY(2px)}
.rr-pin-dot{width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.rr-pin-start .rr-pin-dot{background:#3aa76d}
.rr-pin-end .rr-pin-dot{background:var(--accent)}
.rr-pin-photo .rr-pin-dot{width:46px;height:46px;padding:0;overflow:hidden;background:#fff;border-width:3px}
.rr-pin-photo .rr-pin-dot img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.title-style{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.title-style .sel{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fcfdfb;font-size:14px;color:var(--ink)}
.title-style .rng{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.title-style .rng input[type=range]{flex:1;margin-left:auto;max-width:140px}
.title-style .rng span{min-width:30px;text-align:right;color:var(--ink);font-weight:600}
.dest-pos{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.dest-frame{position:relative;width:100%;max-width:260px;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#e9efe6,#d6e0d1);box-shadow:inset 0 0 0 1px var(--line)}
.df-title{position:absolute;top:0;left:0;right:0;padding:8px 10px 16px;text-align:center;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);background:linear-gradient(to bottom,rgba(20,22,18,.55),rgba(20,22,18,0));line-height:1.2}
.df-badge{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;max-width:82%;text-align:center}
.df-photo{display:block;border-radius:50%;overflow:hidden;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);background:#fff}
.df-photo img{width:100%;height:100%;object-fit:cover;display:block}
.df-name{display:inline-block;background:rgba(255,255,255,.95);color:var(--ink);font-weight:800;line-height:1.2;padding:3px 10px;border-radius:9px;box-shadow:0 1px 6px rgba(0,0,0,.2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dest-controls{flex:1;min-width:200px;display:flex;flex-direction:column;gap:16px}
.dest-controls .rng{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.dest-controls .rng span{font-weight:700;color:var(--ink)}
.dest-controls .rng input[type=range]{width:100%}
.thumb-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn.ghost:hover{background:var(--bg);color:var(--ink)}
.lib-modal{position:fixed;inset:0;z-index:50;background:rgba(20,22,18,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.lib-modal[hidden]{display:none}
.lib-box{background:var(--card);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:620px;max-height:80vh;display:flex;flex-direction:column;padding:18px}
.lib-head{display:flex;align-items:center;justify-content:space-between}
.lib-head h3{margin:0;font-size:18px}
.lib-close{border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--muted);line-height:1}
.lib-sub{color:var(--muted);margin:6px 0 14px;font-size:13px}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;overflow:auto}
.lib-cell{border:1px solid var(--line);border-radius:10px;background:repeating-conic-gradient(#eef1ea 0% 25%,#fff 0% 50%) 50%/16px 16px;padding:0;height:92px;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lib-cell:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.lib-cell img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.rr-pin-label{margin-top:4px;background:rgba(255,255,255,.94);border-radius:8px;padding:2px 8px;font-family:var(--ovfont);font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.2);max-width:160px;overflow:hidden;text-overflow:ellipsis}
.hide-labels .rr-pin-label{display:none}
.rr-pin-end.bounce .rr-pin-dot,.rr-pin-end.bounce .rr-pin-label{animation:bounce .6s ease infinite}
.rr-pin-photo.bounce .rr-pin-dot{margin-top:30px}
.rr-stop{position:relative;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid #ff5d8f;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.rr-stop-num{position:absolute;left:13px;top:50%;transform:translateY(-50%);font:700 10px/1 Arial,"Liberation Sans","Noto Sans",sans-serif;color:#fff;background:rgba(17,17,17,.72);padding:2px 5px;border-radius:6px;white-space:nowrap;pointer-events:none}
.rr-mover{position:relative;display:flex;align-items:center;justify-content:center}
.rr-mover-ring{position:absolute;width:30px;height:30px;border-radius:50%;border:2px solid var(--accent);opacity:.35}
.rr-mover.walking .rr-mover-ring{animation:pulse 1.2s ease-out infinite}
.rr-mover-icon{filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));transition:transform .08s linear}
.rr-mover.walking .rr-mover-icon{animation:walkbob .5s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes walkbob{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.2);opacity:0}}

/* controls */
.controls{flex:0 0 320px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.controls h2{margin-bottom:2px}
.route-sub{color:var(--muted);margin:0 0 2px;font-size:14px}
.ctrl-row{display:flex;gap:10px;margin:16px 0}
.ctrl-row .btn{flex:1}
.ctrl-label{display:block;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px}
.ctrl-hint{font-weight:600;text-transform:none;letter-spacing:0;opacity:.7}
.toggles{display:grid;gap:8px}
.toggles label{font-weight:500;font-size:14px;display:flex;align-items:center;gap:8px}
.hint{margin-top:18px;font-size:12px;color:var(--muted);background:#f3f6ef;border-radius:10px;padding:10px 12px}

/* export / render panel */
.render-box{display:grid;gap:10px}
.render-status .bar{position:relative;height:8px;border-radius:999px;background:#eceee7;overflow:hidden}
.render-status .bar span{display:block;height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .4s ease}
.render-status .bar.busy::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:rr-shimmer 1.1s linear infinite}
@keyframes rr-shimmer{to{transform:translateX(100%)}}
.render-msg{margin:0;font-size:13px;color:var(--muted)}
.download-link{background:var(--ok);border-color:var(--ok);color:#fff;text-align:center;text-decoration:none}
.download-link:hover{filter:brightness(.97)}

@media (max-width:860px){
  .preview-wrap{flex-direction:column}
  .controls{position:static;flex:1 1 auto;width:100%}
  .stage[data-ratio="9:16"]{height:min(52vh,460px)}
  .grid{grid-template-columns:1fr 1fr}
}

/* ---------- Phase 2: captions, watermark, custom marker, editor ---------- */
.rr-mover-img{display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.ov-caption{left:14px;right:14px;bottom:74px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cap-text{background:rgba(28,30,24,.82);color:#fff;border-radius:10px;padding:8px 12px;font-family:var(--ovfont);font-weight:700;font-size:14px;max-width:92%}
.cap-chips{display:flex;gap:6px;flex-wrap:wrap}
.cap-chips .chip{background:rgba(255,255,255,.95);color:#2c2f28;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700}
.cap-chips .chip-sheltered{background:#cfe8c0}.cap-chips .chip-lift{background:#cfe0ff}.cap-chips .chip-escalator{background:#ffe6b0}
.ov-watermark{top:auto;bottom:30px;right:10px;left:auto;max-width:30%;max-height:64px;opacity:.92;object-fit:contain}

.edit-link{display:block;text-align:center;margin-top:12px;text-decoration:none}
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.brand-item{display:flex;flex-direction:column;gap:8px}
.thumb{width:100%;height:120px;border:1px dashed var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fafbf8;color:var(--muted);overflow:hidden}
.thumb img{max-width:100%;max-height:100%;object-fit:contain}
.thumb.loading{opacity:.5}
.btn.small{padding:8px 12px;font-size:13px;align-self:flex-start}
.mt{margin-top:10px}
input[type=range]{width:100%}
.switch{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.cap-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.step{border:1px solid var(--line);border-radius:12px;padding:12px}
.step-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.step-n{background:var(--accent);color:#fff;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}
.step-instr{font-size:14px;color:var(--ink)}.step-instr em{color:var(--muted);font-style:normal}
.step-caption{width:100%;margin-bottom:8px}
.step-chips{display:flex;gap:14px;flex-wrap:wrap}
.step-chips label{font-size:13px;display:flex;align-items:center;gap:6px;font-weight:500}
.save-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;bottom:0;background:var(--bg);padding:14px 0}
.save-msg{color:var(--muted);font-size:14px}
@media (max-width:640px){.brand-grid{grid-template-columns:1fr}}

/* waypoints (editor) */
.wp-list{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px}
.wp{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.wp-fixed{background:#fafbf8}
.wp-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.wp-dot.start{background:#3aa76d}.wp-dot.end{background:var(--accent)}.wp-dot.mid{background:#8a8f80}
.wp-name{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-tag{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.wp-actions{display:flex;gap:4px}
.wp-actions button{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--muted);font-size:14px}
.wp-actions button:hover{border-color:var(--accent);color:var(--accent-ink)}
.route-totals{color:var(--muted);font-size:14px;align-self:center}

/* Phase 4: AI assist controls */
.title-row{display:flex;gap:8px;align-items:stretch}
.title-row input{flex:1}
.btn.ai{background:#f3eaff;border-color:#e4d3ff;color:#6a3fb3;white-space:nowrap}
.btn.ai:hover{filter:brightness(.98)}
.cap-head-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.social-text{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:14px;resize:vertical;background:#fcfdfb;margin-bottom:8px}
.social-text:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,93,143,.15)}