.tj-page { min-height:100vh; background:var(--background); color:var(--text-primary); }
.tj-topbar { width:min(1480px, calc(100% - 48px)); min-height:92px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.tj-top-actions { display:flex; align-items:center; gap:10px; }
.tj-layout { width:min(1480px, calc(100% - 48px)); margin:0 auto 36px; display:grid; grid-template-columns:230px minmax(0,1fr); gap:22px; }
.tj-sidebar { min-height:calc(100vh - 134px); }
.tj-main { min-width:0; padding-bottom:36px; }
.tj-heading { margin-top:0; }
.tj-live-pill { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:999px; background:var(--surface-soft); border:1px solid var(--border); color:var(--text-secondary); font-size:12px; font-weight:800; white-space:nowrap; }
.tj-live-pill span { width:8px; height:8px; border-radius:50%; background:#3d9f68; box-shadow:0 0 0 4px rgba(61,159,104,.12); }
.tj-control-card, .tj-toolbar-card, .tj-grid-card { background:var(--surface); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow); }
.tj-control-card { padding:28px; }
.tj-control-header, .tj-section-heading { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.tj-control-header h2, .tj-section-heading h2 { margin:0; font-size:22px; }
.tj-now-button { min-width:154px; width:auto; max-width:100%; height:44px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; border-radius:14px; font-weight:800; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.tj-now-button:hover { transform:translateY(-1px); border-color:rgba(47,115,255,.35); box-shadow:0 8px 18px rgba(30,65,120,.10); }
.tj-now-button:focus-visible { outline:3px solid rgba(47,115,255,.22); outline-offset:2px; }
.tj-now-button:active { transform:translateY(0); }
.tj-journey-readout { margin-top:24px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:18px 20px; border-radius:18px; background:linear-gradient(135deg, rgba(47,115,255,.10), rgba(47,115,255,.02)); border:1px solid rgba(47,115,255,.12); }
.tj-label { display:block; margin-bottom:5px; color:var(--text-secondary); font-size:12px; font-weight:800; }
#journey-time { display:block; font-size:clamp(38px, 5vw, 62px); line-height:1; letter-spacing:-.04em; }
.tj-shift-badge { padding:9px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text-primary); font-size:12px; font-weight:900; }
.tj-manual-card { margin-top:18px; padding:18px 20px; border:1px solid var(--border); border-radius:18px; background:var(--surface-soft); display:grid; grid-template-columns:minmax(220px,.9fr) minmax(0,1.5fr); gap:18px; align-items:end; }
.tj-manual-copy h3 { margin:0; font-size:16px; }
.tj-manual-copy > p:last-child { margin:6px 0 0; color:var(--text-secondary); font-size:11px; line-height:1.5; }
.tj-manual-fields { display:grid; grid-template-columns:1fr 1fr auto auto; gap:10px; align-items:end; }
.tj-manual-fields label { display:grid; gap:6px; min-width:0; }
.tj-manual-fields label > span { color:var(--text-secondary); font-size:11px; font-weight:800; }
.tj-manual-fields input { width:100%; min-width:0; box-sizing:border-box; height:44px; padding:0 11px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text-primary); font:inherit; }
.tj-manual-fields input:focus { outline:2px solid rgba(47,115,255,.18); border-color:rgba(47,115,255,.45); }
.tj-manual-fields button { height:44px; padding:0 14px; border-radius:12px; font-size:12px; font-weight:800; white-space:nowrap; }
.tj-slider-wrap { width:min(100%, 920px); max-width:920px; margin:26px auto 0; padding-inline:4px; }
.tj-slider-labels { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--text-secondary); font-size:12px; font-weight:800; }
.tj-slider-labels strong { color:var(--text-primary); font-size:14px; }
.tj-slider { display:block; width:100%; max-width:920px; min-width:0; margin:14px auto 6px; accent-color:var(--primary); cursor:pointer; }
.tj-slider-ticks { display:grid; grid-template-columns:repeat(9,1fr); color:var(--text-secondary); font-size:10px; }
.tj-slider-ticks span { text-align:center; }
.tj-slider-ticks span:first-child { text-align:left; }
.tj-slider-ticks span:last-child { text-align:right; }
.tj-quick-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tj-quick-actions button { min-height:40px; border:1px solid var(--border); background:var(--surface); color:var(--text-primary); padding:9px 12px; border-radius:12px; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.tj-quick-actions button:hover { transform:translateY(-1px); border-color:rgba(47,115,255,.32); box-shadow:0 6px 14px rgba(30,65,120,.08); }
.tj-quick-actions button:focus-visible { outline:3px solid rgba(47,115,255,.18); outline-offset:2px; }
.tj-reference { margin-top:14px; color:var(--text-secondary); font-size:12px; }
.tj-toolbar-card { margin-top:18px; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tj-search-box { display:flex; align-items:center; gap:8px; min-width:0; flex:1; padding:0 12px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }
.tj-search-box span { color:var(--text-secondary); }
.tj-search-box input { min-width:0; width:100%; padding:11px 0; border:0; outline:0; background:transparent; color:var(--text-primary); font:inherit; }
.tj-toolbar-meta { display:flex; gap:14px; flex:none; color:var(--text-secondary); font-size:11px; }
.tj-toolbar-meta strong { color:var(--text-primary); }
.tj-grid-card { margin-top:18px; padding:24px; }
.tj-section-heading > span { color:var(--text-secondary); font-size:12px; padding-top:7px; white-space:nowrap; }
.tj-city-grid { margin-top:20px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; gap:14px; }
.tj-city-card { min-width:0; width:100%; min-height:196px; padding:17px; border:1px solid var(--border); border-radius:18px; background:var(--surface-soft); }
.tj-city-card.is-night { box-shadow:inset 0 0 0 1px rgba(64,96,156,.03); }
.tj-city-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; }
.tj-city-top h3 { margin:0; font-size:15px; line-height:1.28; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:38px; }
.tj-city-top p { margin:6px 0 0; color:var(--text-secondary); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tj-zone-pill { flex:none; max-width:100%; padding:5px 8px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text-secondary); font-size:10px; font-weight:800; }
.tj-city-time { display:flex; align-items:baseline; gap:6px; margin-top:18px; }
.tj-city-time strong { font-size:clamp(24px, 2.2vw, 30px); letter-spacing:-.03em; }
.tj-city-time span { color:var(--text-secondary); font-size:11px; font-weight:800; }
.tj-city-date { margin-top:6px; color:var(--text-secondary); font-size:11px; }
.tj-city-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.tj-city-meta span { padding:5px 7px; border-radius:8px; background:var(--surface); border:1px solid var(--border); color:var(--text-secondary); font-size:9px; font-weight:800; }
.tj-empty { padding:28px 10px; text-align:center; color:var(--text-secondary); }


.tj-timeline-card { margin-top:18px; padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow); }
.tj-timeline-heading { align-items:center; }
.tj-timeline-wrap { margin-top:18px; overflow:auto; max-height:68vh; overscroll-behavior:contain; }
.tj-timeline-head, .tj-timeline-row { min-width:800px; display:grid; grid-template-columns:190px minmax(560px,1fr); gap:20px; align-items:center; }
.tj-timeline-head { position:sticky; top:0; z-index:12; background:var(--surface); padding:0 0 10px; color:var(--text-secondary); font-size:10px; font-weight:900; letter-spacing:.08em; }
.tj-timeline-city-label { padding-left:1px; position:sticky; left:0; background:var(--surface); z-index:13; }
.tj-hour-scale { display:grid; grid-template-columns:repeat(13,1fr); }
.tj-hour-scale span { text-align:center; }
.tj-hour-scale span:first-child { text-align:left; }
.tj-hour-scale span:last-child { text-align:right; }
.tj-timeline-rows { display:grid; gap:12px; max-height:none; }
.tj-timeline-row { min-height:66px; }
.tj-timeline-city { min-width:0; }
.tj-timeline-city strong { display:block; font-size:13px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tj-timeline-city span { display:block; margin-top:3px; color:var(--text-secondary); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tj-timeline-track { position:relative; height:48px; overflow:visible; border:1px solid var(--border); border-radius:16px; background:#f7faff; }
.tj-timeline-grid-lines { position:absolute; inset:0; z-index:2; background-image:linear-gradient(to right, rgba(90,118,160,.14) 1px, transparent 1px); background-size:calc(100% / 24) 100%; pointer-events:none; }
.tj-day-window { position:absolute; top:0; bottom:0; z-index:1; background:rgba(247,198,93,.18); }
.tj-night-window { position:absolute; top:0; bottom:0; z-index:1; background:rgba(71,91,125,.23); }
.tj-timeline-cursor { position:absolute; top:-3px; bottom:-3px; z-index:4; width:2px; transform:translateX(-1px); background:rgba(47,115,255,.48); box-shadow:0 0 0 5px rgba(47,115,255,.08); }
.tj-timeline-cursor span { position:absolute; top:3px; left:50%; transform:translate(-50%,0); padding:6px 7px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text-primary); box-shadow:0 7px 18px rgba(15,31,58,.10); font-size:10px; line-height:1; font-weight:900; white-space:nowrap; }
.tj-timeline-track.is-night .tj-timeline-cursor span { top:4px; }
@media (max-width:760px) {
    .tj-timeline-card { padding:18px; }
    .tj-timeline-heading > span { padding-top:0; }
    .tj-timeline-wrap { margin-right:-4px; padding-right:4px; }
}

@media (max-width:1200px) {
    .tj-city-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:1024px) {
    .tj-topbar,
    .tj-layout { width:min(100% - 28px, 920px); }
    .tj-layout { grid-template-columns:190px minmax(0,1fr); gap:22px; }
    .tj-sidebar { min-height:calc(100vh - 134px); }
    .tj-city-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .tj-manual-card { grid-template-columns:minmax(190px,.8fr) minmax(0,1.5fr); }
    .tj-manual-fields { grid-template-columns:1fr 1fr; }
    .tj-manual-fields button { width:100%; }
}

@media (max-width:760px) {
    .tj-topbar,
    .tj-layout { width:calc(100% - 24px); }
    .tj-topbar { min-height:78px; }
    .tj-layout { display:block; margin-bottom:20px; }
    .tj-sidebar { display:none; }
    .tj-main { padding-bottom:92px; }
    .tj-heading { min-height:auto; margin:8px 0 14px; align-items:flex-start; flex-direction:column; gap:7px; }
    .tj-heading > div { width:100%; }
    .tj-live-pill { align-self:flex-start; }
    .tj-control-card,
    .tj-grid-card { border-radius:20px; padding:20px; }
    .tj-toolbar-card { align-items:stretch; flex-direction:column; }
    .tj-toolbar-meta { justify-content:space-between; }
    .tj-control-header,
    .tj-section-heading,
    .tj-journey-readout { flex-direction:column; align-items:stretch; }
    .tj-now-button { width:100%; }
    .tj-manual-card { grid-template-columns:1fr; }
    .tj-manual-fields { grid-template-columns:1fr 1fr; }
    .tj-manual-fields button { width:100%; }
    .tj-city-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .tj-slider-wrap { width:100%; max-width:100%; padding-inline:0; }
    .tj-slider { width:100%; max-width:100%; }
    .tj-slider-ticks { font-size:8px; }
}

@media (max-width:520px) {
    .tj-main { padding-top:0; }
    .tj-control-card,
    .tj-grid-card { padding:18px; }
    .tj-city-grid { grid-template-columns:1fr; }
    .tj-quick-actions { display:grid; grid-template-columns:1fr 1fr; }
    .tj-manual-fields { grid-template-columns:1fr; }
    .tj-now-button { width:100%; max-width:100%; }
    .tj-slider-ticks span:nth-child(2),
    .tj-slider-ticks span:nth-child(4),
    .tj-slider-ticks span:nth-child(6),
    .tj-slider-ticks span:nth-child(8) { display:none; }
    .tj-slider-ticks { grid-template-columns:repeat(5,1fr); }
    .tj-slider-ticks span:first-child { grid-column:1; }
    .tj-slider-ticks span:nth-child(3) { grid-column:3; }
    .tj-slider-ticks span:nth-child(5) { grid-column:5; }
    #journey-time { font-size:42px; }
    .tj-city-card { min-height:0; }
}

/* Advanced Timeline controls */
.tj-advanced-panel { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-soft); }
.tj-advanced-search-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
.tj-advanced-search { background: var(--surface); }
.tj-clear-filters { min-width: 142px; height: 44px; padding: 0 14px; border-radius: 12px; white-space: nowrap; font-size: 12px; font-weight: 800; }
.tj-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.tj-filter-field { display: grid; gap: 6px; min-width: 0; }
.tj-filter-field > span { color: var(--text-secondary); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.tj-filter-field select { width: 100%; min-width: 0; height: 42px; padding: 0 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text-primary); font: 700 12px/1.2 inherit; }
.tj-active-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.tj-active-chips { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.tj-filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 9px; border: 1px solid rgba(47,115,255,.20); border-radius: 999px; background: rgba(47,115,255,.08); color: var(--primary-dark); font: 800 10px/1 inherit; cursor: pointer; }
.tj-filter-chip:hover { background: rgba(47,115,255,.13); }
.tj-filter-chip span { font-size: 14px; line-height: 1; }
.tj-visible-count { flex: none; color: var(--text-primary); font-size: 11px; white-space: nowrap; }
.tj-timeline-row[data-state="twilight"] .tj-timeline-track { box-shadow: inset 0 0 0 1px rgba(251,146,60,.12); }
.tj-timeline-row[data-state="day"] .tj-timeline-cursor { background: rgba(245,158,11,.55); }
.tj-timeline-row[data-state="night"] .tj-timeline-cursor { background: rgba(71,91,125,.55); }

@media (max-width: 900px) {
    .tj-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .tj-advanced-panel { padding: 14px; }
    .tj-advanced-search-row { grid-template-columns: 1fr; }
    .tj-clear-filters { width: 100%; }
    .tj-active-filter-row { align-items: flex-start; flex-direction: column; gap: 8px; }
    .tj-visible-count { width: 100%; }
}
@media (max-width: 520px) {
    .tj-filter-grid { grid-template-columns: 1fr; }
}

/* 24-hour timeline state + UTC annotations */
.tj-timeline-city-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.tj-timeline-city-meta span { display:inline-flex; align-items:center; gap:3px; padding:4px 6px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text-secondary); font-size:8px; font-weight:800; line-height:1; white-space:nowrap; }
.tj-timeline-city-meta .tj-state-day { background:rgba(245,158,11,.10); }
.tj-timeline-city-meta .tj-state-twilight { background:rgba(251,146,60,.10); }
.tj-timeline-city-meta .tj-state-night { background:rgba(71,91,125,.10); }
.tj-timeline-track { overflow:visible; }
.tj-twilight-window { position:absolute; top:0; bottom:0; z-index:1; background:rgba(251,146,60,.22); }
.tj-utc-marker { position:absolute; top:2px; bottom:2px; z-index:3; width:1px; transform:translateX(-0.5px); background:rgba(22,101,52,.55); border-left:1px dashed rgba(22,101,52,.55); pointer-events:none; }
.tj-utc-marker span { position:absolute; bottom:3px; left:50%; transform:translate(-50%,100%); padding:3px 5px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text-secondary); font-size:8px; font-weight:900; line-height:1; white-space:nowrap; }
@media (max-width:760px) {
    .tj-timeline-city-meta { gap:4px; }
    .tj-timeline-city-meta span { font-size:7px; padding:3px 5px; }
}