:root {
  --bg: #f3f4f6;
  --panel: rgba(255,255,255,.78);
  --line: rgba(15,23,42,.08);
  --text: #111827;
  --muted: #6b7280;
  --accent: #19744d;
  --accent-2: #69bb91;
  --shadow: 0 20px 60px rgba(17,24,39,.10);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 8% -5%, rgba(126, 198, 161, .17), transparent 26%),
    radial-gradient(circle at 92% 4%, rgba(171, 187, 255, .12), transparent 22%),
    var(--bg);
  font-family: "SF Pro Display", "SF Pro Text", "PingFang SC", "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(1440px, calc(100% - 44px)); margin: 0 auto; padding: 28px 0 52px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding: 8px 2px 26px; }
.eyebrow, .section-kicker { font-size:11px; letter-spacing:.18em; font-weight:800; color:#7a8492; }
.topbar h1 { margin:9px 0 0; max-width: 760px; font-size: clamp(28px, 4vw, 48px); line-height:1.03; letter-spacing:-.055em; }
.top-actions, .preview-actions { display:flex; gap:10px; }
.primary-btn, .secondary-btn, .ghost-btn, .share-btn, .icon-btn {
  border: 1px solid transparent; border-radius: 14px; min-height: 44px; padding: 0 17px; font-weight:700; transition:.22s ease; 
}
.primary-btn { background:#111827; color:#fff; box-shadow: 0 10px 24px rgba(17,24,39,.12); }
.primary-btn:hover { transform: translateY(-1px); box-shadow:0 14px 26px rgba(17,24,39,.16); }
.secondary-btn, .ghost-btn { background: rgba(255,255,255,.74); color:var(--text); border-color:var(--line); }
.secondary-btn:hover, .ghost-btn:hover, .share-btn:hover, .icon-btn:hover { background:#fff; }
.share-btn { background:transparent; border-color:var(--line); color:var(--text); }
.icon-btn { width:44px; padding:0; background:rgba(255,255,255,.7); border-color:var(--line); font-size:20px; }
.grow { flex:1; }

.layout { display:grid; grid-template-columns: 390px minmax(0,1fr); gap: 22px; align-items:start; }
.panel { background:var(--panel); border:1px solid rgba(255,255,255,.85); box-shadow:var(--shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius:var(--radius); }
.editor-panel { padding:24px; position:sticky; top:18px; }
.panel-heading, .preview-bar, .list-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.panel-heading h2, .preview-bar h2, .list-heading h3 { margin:5px 0 0; letter-spacing:-.03em; }
.panel-heading h2 { font-size:22px; }
.saved-dot { width:9px; height:9px; margin-top:8px; border-radius:50%; background:#52af7c; box-shadow:0 0 0 5px rgba(82,175,124,.10); }
.mode-switch { margin:22px 0 20px; display:grid; grid-template-columns:1fr 1fr; background:#eceef1; padding:4px; border-radius:16px; }
.mode-pill { min-height:44px; border:0; border-radius:12px; color:#75808e; background:transparent; font-weight:800; }
.mode-pill.is-active { background:#fff; color:#111827; box-shadow:0 7px 16px rgba(15,23,42,.08); }
.mode-icon { margin-right:7px; }
.field-grid { display:grid; gap:12px; }
.field-grid.two { grid-template-columns:1fr 1fr; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:13px; }
.field span { font-size:12px; font-weight:700; color:#697384; }
.field input { width:100%; height:46px; padding:0 13px; border:1px solid rgba(15,23,42,.08); border-radius:14px; outline:none; background:rgba(255,255,255,.72); color:var(--text); transition:.2s ease; }
.field input:focus { border-color:rgba(25,116,77,.5); box-shadow:0 0 0 4px rgba(25,116,77,.08); background:#fff; }
.time-hint { min-height:22px; color:#7a8492; font-size:12px; margin:5px 0 14px; }
.time-hint.is-good { color:var(--accent); }
.form-actions { display:flex; gap:10px; margin-top:2px; }
.privacy-note { display:flex; gap:8px; align-items:flex-start; color:#8a93a0; font-size:11px; line-height:1.45; margin-top:16px; }
.privacy-note span { font-size:15px; color:#6aae8a; }

.preview-column { min-width:0; }
.preview-bar { padding: 2px 3px 15px; align-items:center; }
.preview-bar h2 { font-size:22px; }

.story-card {
  --card-accent: #69bb91;
  --card-accent-deep: #19744d;
  position:relative; overflow:hidden; min-height: 650px; border-radius:34px; padding:34px 38px 26px; color:#f7fbf8;
  background:
    radial-gradient(circle at 74% 26%, rgba(115,216,161,.34), transparent 24%),
    radial-gradient(circle at 25% 105%, rgba(0,0,0,.55), transparent 40%),
    linear-gradient(145deg, #103126 0%, #142d27 48%, #0a1716 100%);
  box-shadow: 0 28px 70px rgba(11,31,25,.22);
  isolation:isolate;
}
.story-card.mode-flight {
  --card-accent:#b8d7ff;
  --card-accent-deep:#5c85c7;
  color:#142039;
  background:
    radial-gradient(circle at 80% 25%, rgba(255,255,255,.88), transparent 28%),
    radial-gradient(circle at 20% 10%, rgba(174,206,255,.7), transparent 25%),
    linear-gradient(165deg, #dbeaff 0%, #a6c3e8 45%, #5d7197 100%);
}
.ambient { position:absolute; border-radius:50%; filter:blur(2px); z-index:-1; opacity:.8; }
.ambient-a { width:330px; height:330px; right:-80px; top:50px; background:rgba(125,195,159,.16); animation: drift 9s ease-in-out infinite alternate; }
.ambient-b { width:210px; height:210px; left:-70px; bottom:-40px; background:rgba(80,130,255,.08); animation: drift 12s ease-in-out infinite alternate-reverse; }
.mode-flight .ambient-a { background:rgba(255,255,255,.33); }
.grid-lines { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 54px 54px; mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 80%); z-index:-1; }
.mode-flight .grid-lines { background-image:linear-gradient(rgba(255,255,255,.30) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.20) 1px, transparent 1px); opacity:.28; }
.story-top { display:flex; justify-content:space-between; align-items:center; }
.brand-lockup { display:flex; align-items:center; gap:12px; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(255,255,255,.24); border-radius:10px; font-weight:800; }
.mode-flight .brand-mark { border-color:rgba(20,32,57,.18); }
.brand-lockup strong { display:block; font-size:15px; letter-spacing:.02em; }
.brand-lockup small, .live-clock { font-size:10px; letter-spacing:.16em; opacity:.65; }
.live-clock { font-variant-numeric:tabular-nums; }
.status-zone { padding:96px 0 44px; max-width:680px; }
.status-chip { display:inline-flex; align-items:center; min-height:30px; padding:0 11px; border-radius:99px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); font-size:11px; font-weight:800; letter-spacing:.03em; backdrop-filter:blur(10px); }
.mode-flight .status-chip { border-color:rgba(20,32,57,.10); background:rgba(255,255,255,.25); }
.status-zone h3 { margin:17px 0 10px; font-size:clamp(42px,6vw,76px); line-height:.97; letter-spacing:-.065em; max-width:760px; }
.status-zone p { margin:0; font-size:15px; opacity:.72; }
.route-visual { margin: 34px 0 0; position:relative; --progress: 0; }
.route-line { position:absolute; left:28px; right:28px; top: 29px; height:2px; background:rgba(255,255,255,.18); overflow:hidden; border-radius:4px; }
.route-fill { display:block; width:0; height:100%; background:var(--card-accent); box-shadow:0 0 15px rgba(105,187,145,.6); transition:width .8s ease; }
.mode-flight .route-fill { background:var(--card-accent); box-shadow:0 0 15px rgba(184,215,255,.9); }
.route-points { position:relative; display:grid; grid-template-columns:1fr 86px 1fr; align-items:start; gap:16px; }
.stop { display:flex; gap:10px; align-items:center; }
.stop-dot { width:9px; height:9px; border:2px solid var(--card-accent); border-radius:50%; box-shadow:0 0 0 5px rgba(105,187,145,.08); flex:none; }
.mode-flight .stop-dot { box-shadow:0 0 0 5px rgba(184,215,255,.14); }
.stop small { display:block; font-size:9px; letter-spacing:.16em; opacity:.53; }
.stop strong { display:block; margin-top:3px; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }
.to-stop { justify-self:end; }
.vehicle-wrap { position:absolute; left:calc(28px + (100% - 56px) * var(--progress)); top:0; width:64px; height:68px; transform:translateX(-50%); z-index:2; transition:left .8s cubic-bezier(.2,.75,.25,1); }
.train-vehicle { position:absolute; left:50%; top:5px; width:56px; height:26px; transform:translateX(-50%); border-radius:8px 10px 4px 4px; background:#e9f8ef; box-shadow:0 7px 18px rgba(0,0,0,.16); animation: trainPulse 1.9s ease-in-out infinite; }
.train-vehicle::before { content:""; position:absolute; right:-7px; top:6px; width:7px; height:14px; border-radius:0 4px 4px 0; background:#b9dcca; }
.train-vehicle::after { content:""; position:absolute; left:7px; right:7px; top:7px; height:6px; border-radius:3px; background:#83bd9f; }
.train-vehicle span, .train-vehicle i { position:absolute; width:8px; height:8px; bottom:-7px; background:#0f2420; border-radius:50%; }
.train-vehicle span { left:9px; } .train-vehicle i:nth-child(2) { right:9px; } .train-vehicle i:nth-child(3) { display:none; }
.plane-vehicle { display:none; position:absolute; left:50%; top:0px; transform:translateX(-50%) rotate(0deg); font-size:31px; filter:drop-shadow(0 9px 11px rgba(43,68,108,.25)); animation: planeFloat 2.6s ease-in-out infinite; }
.mode-flight .train-vehicle { display:none; }
.mode-flight .plane-vehicle { display:block; }
.story-meta { display:grid; grid-template-columns: 1.3fr 1fr; gap:20px; margin-top:68px; padding:20px 0 18px; border-top:1px solid rgba(255,255,255,.12); }
.mode-flight .story-meta { border-color:rgba(20,32,57,.12); }
.story-meta small { display:block; font-size:9px; letter-spacing:.16em; opacity:.53; }
.story-meta strong { display:block; margin:6px 0 3px; font-size:18px; }
.story-meta span { font-size:11px; opacity:.68; }
.bottom-note { margin-top:14px; font-size:11px; opacity:.58; }
.share-mark { position:absolute; right:30px; bottom:22px; font-size:9px; letter-spacing:.14em; opacity:.27; }

.trip-list-wrap { margin-top:22px; padding:24px; border-radius:var(--radius); background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.78); box-shadow:var(--shadow); }
.list-heading h3 { font-size:19px; }
.list-count { min-width:28px; height:28px; border-radius:99px; display:grid; place-items:center; background:#eef0f2; color:#7b8490; font-size:12px; font-weight:800; }
.trip-list { display:grid; gap:10px; margin-top:17px; }
.trip-item { display:grid; grid-template-columns: 44px 1fr auto; gap:12px; align-items:center; padding:12px; border-radius:17px; border:1px solid rgba(15,23,42,.06); background:rgba(255,255,255,.72); transition:.18s ease; }
.trip-item:hover { transform:translateY(-1px); background:#fff; }
.trip-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:#eef5f0; font-size:19px; }
.trip-item.flight .trip-icon { background:#edf3fc; }
.trip-route { font-weight:800; font-size:14px; }
.trip-sub { margin-top:3px; color:#7c8592; font-size:11px; }
.trip-actions { display:flex; gap:7px; }
.small-btn { height:34px; padding:0 10px; border-radius:10px; border:1px solid rgba(15,23,42,.08); background:#fff; color:#444c58; font-weight:700; }
.small-btn.delete { color:#a64848; }
.empty-state { padding:28px 10px 22px; text-align:center; color:#87909d; font-size:12px; }

.share-overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.42); backdrop-filter:blur(12px); z-index:20; }
.share-overlay.is-open { display:flex; }
.share-sheet { width:min(430px,100%); position:relative; background:#fff; border-radius:28px; padding:30px; box-shadow:0 30px 90px rgba(15,23,42,.28); }
.close-share { position:absolute; top:13px; right:15px; width:36px; height:36px; border:0; border-radius:50%; background:#f1f2f4; font-size:24px; color:#626a75; }
.share-kicker { font-size:10px; letter-spacing:.18em; font-weight:800; color:#8b94a0; }
.share-sheet h2 { font-size:38px; line-height:1.02; margin:12px 0; letter-spacing:-.06em; }
.share-sheet h2 em { color:#23694b; font-style:normal; }
.share-sheet p { color:#7c8591; font-size:13px; line-height:1.55; margin-bottom:22px; }
.share-wide { width:100%; margin-top:9px; }

@keyframes drift { from { transform:translate3d(-9px,-5px,0) scale(1); } to { transform:translate3d(12px,10px,0) scale(1.08); } }
@keyframes trainPulse { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-2px); } }
@keyframes planeFloat { 0%,100% { transform:translateX(-50%) translateY(0) rotate(-4deg); } 50% { transform:translateX(-50%) translateY(-7px) rotate(2deg); } }

.story-card.mode-train::after { content:""; position:absolute; left:-25%; right:-25%; bottom:0; height:30%; z-index:-1; opacity:.16; background:repeating-linear-gradient(90deg, transparent 0 52px, rgba(130,210,169,.30) 53px 55px); transform:skewY(-5deg) translateX(0); animation:railSweep 6s linear infinite; }
.story-card.mode-flight::after { content:""; position:absolute; width:34%; height:90px; right:-4%; top:38%; opacity:.42; background:radial-gradient(ellipse, rgba(255,255,255,.95) 0 35%, transparent 68%); filter:blur(12px); animation:cloudDrift 11s ease-in-out infinite alternate; z-index:-1; }
@keyframes railSweep { to { transform:skewY(-5deg) translateX(110px); } }
@keyframes cloudDrift { from { transform:translateX(-35px); } to { transform:translateX(35px); } }

.share-mode .editor-panel, .share-mode .topbar, .share-mode .preview-bar, .share-mode .trip-list-wrap { display:none; }
.share-mode .layout { display:block; }
.share-mode .app-shell { width:min(1000px, calc(100% - 28px)); padding-top:28px; }
.share-mode .story-card { min-height:calc(100vh - 56px); display:flex; flex-direction:column; }
.share-mode .status-zone { flex:1; display:flex; flex-direction:column; justify-content:center; padding-top:40px; padding-bottom:40px; }

@media (max-width: 1020px) {
  .layout { grid-template-columns:1fr; }
  .editor-panel { position:static; }
}
@media (max-width: 640px) {
  .app-shell { width:min(100% - 20px, 1440px); padding-top:15px; }
  .topbar { align-items:flex-start; flex-direction:column; gap:16px; }
  .top-actions { width:100%; }
  .top-actions > * { flex:1; }
  .field-grid.two { grid-template-columns:1fr; gap:0; }
  .editor-panel, .trip-list-wrap { padding:18px; }
  .story-card { min-height:620px; padding:25px 22px 22px; border-radius:27px; }
  .status-zone { padding:86px 0 34px; }
  .status-zone h3 { font-size:46px; }
  .route-points { grid-template-columns:1fr 64px 1fr; }
  .stop strong { max-width:110px; }
  .story-meta { margin-top:52px; }
  .share-mode .story-card { min-height:calc(100vh - 30px); }
}

@media print {
  body { background:#fff; }
  .topbar, .editor-panel, .preview-bar, .trip-list-wrap, .share-overlay { display:none !important; }
  .layout { display:block; }
  .app-shell { width:100%; padding:0; }
  .story-card { border-radius:0; min-height:100vh; box-shadow:none; }
}

.exit-share { display:none; position:fixed; top:18px; right:18px; z-index:30; border:1px solid rgba(255,255,255,.3); background:rgba(17,24,39,.78); color:#fff; backdrop-filter:blur(14px); border-radius:12px; padding:10px 13px; font-size:12px; font-weight:800; box-shadow:0 12px 30px rgba(0,0,0,.18); }
.share-mode .exit-share { display:block; }
.pulse-save { animation:savePulse .5s ease; }
@keyframes savePulse { 50% { transform:scale(1.35); box-shadow:0 0 0 8px rgba(82,175,124,.16); } }