Spaces:
Sleeping
Sleeping
| :root { | |
| --bg-gradient-start: #031b3a; | |
| --bg-gradient-end: #064663; | |
| --accent: #ffb347; | |
| --accent-soft: rgba(255, 179, 71, 0.15); | |
| --card-bg: rgba(10, 20, 45, 0.96); | |
| --border-subtle: rgba(255, 255, 255, 0.05); | |
| --text-main: #fdfdfd; | |
| --text-muted: #cdd3e3; | |
| --danger: #ff4d6a; | |
| --success: #3fd5a1; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| color: var(--text-main); | |
| background: radial-gradient(circle at top left, #0c2340, #020817 55%, #021126 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| padding: 24px; | |
| } | |
| .shell { | |
| width: 100%; | |
| max-width: 1200px; | |
| background: linear-gradient(145deg, rgba(6, 25, 56, 0.96), rgba(2, 12, 29, 0.98)); | |
| border-radius: 24px; | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65); | |
| padding: 24px 24px 28px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .shell::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: | |
| radial-gradient(circle at top right, rgba(66, 220, 255, 0.18), transparent 55%), | |
| radial-gradient(circle at bottom left, rgba(255, 179, 71, 0.15), transparent 55%); | |
| pointer-events: none; | |
| opacity: 0.9; | |
| } | |
| .hero { | |
| position: relative; | |
| z-index: 1; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| gap: 16px; | |
| align-items: center; | |
| } | |
| .hero-left { | |
| max-width: 420px; | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| background: rgba(3, 27, 58, 0.95); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--text-muted); | |
| margin-bottom: 10px; | |
| } | |
| .badge-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 999px; | |
| background: var(--success); | |
| box-shadow: 0 0 12px rgba(63, 213, 161, 0.85); | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: clamp(28px, 3.3vw, 34px); | |
| letter-spacing: 0.02em; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| h1 span.logo-pill { | |
| font-size: 13px; | |
| font-weight: 600; | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| background: linear-gradient(135deg, #ffb347, #ff6b6b); | |
| color: #1b1630; | |
| } | |
| .hero-tagline { | |
| margin-top: 8px; | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| max-width: 420px; | |
| } | |
| .hero-metrics { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .metric-chip { | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| background: rgba(3, 19, 49, 0.9); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| font-size: 11px; | |
| display: inline-flex; | |
| gap: 8px; | |
| align-items: center; | |
| color: var(--text-muted); | |
| } | |
| .metric-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 999px; | |
| background: var(--accent); | |
| } | |
| .hero-right { | |
| flex: 1; | |
| min-width: 260px; | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .map-card { | |
| width: 100%; | |
| max-width: 380px; | |
| background: radial-gradient(circle at top, rgba(13, 56, 105, 0.95), rgba(2, 10, 25, 0.98)); | |
| border-radius: 18px; | |
| padding: 14px 14px 18px; | |
| border: 1px solid rgba(163, 195, 255, 0.16); | |
| box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .map-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .map-legend { | |
| display: flex; | |
| gap: 8px; | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| } | |
| .legend-item { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .legend-swatch { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 999px; | |
| } | |
| .map-svg-wrapper { | |
| background: radial-gradient(circle at top, rgba(9, 18, 45, 0.95), rgba(2, 9, 24, 0.98)); | |
| border-radius: 14px; | |
| border: 1px solid rgba(255, 255, 255, 0.04); | |
| padding: 8px; | |
| overflow: hidden; | |
| } | |
| svg#park-map { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .content { | |
| position: relative; | |
| z-index: 1; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr); | |
| gap: 18px; | |
| } | |
| @media (max-width: 880px) { | |
| .content { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| .hero { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .hero-right { | |
| justify-content: flex-start; | |
| } | |
| } | |
| .panel { | |
| background: rgba(4, 16, 40, 0.96); | |
| border-radius: 18px; | |
| padding: 16px 16px 18px; | |
| border: 1px solid var(--border-subtle); | |
| box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); | |
| } | |
| .panel-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .panel-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| } | |
| .panel-sub { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 10px 12px; | |
| margin-top: 8px; | |
| } | |
| .form-row-full { | |
| grid-column: 1 / -1; | |
| } | |
| label { | |
| display: block; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-muted); | |
| margin-bottom: 4px; | |
| } | |
| input[type="text"], | |
| select { | |
| width: 100%; | |
| padding: 8px 10px; | |
| border-radius: 10px; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| background: rgba(3, 16, 36, 0.9); | |
| color: var(--text-main); | |
| font-size: 13px; | |
| outline: none; | |
| } | |
| input[type="text"]::placeholder { | |
| color: rgba(191, 195, 215, 0.65); | |
| } | |
| input[type="range"] { | |
| width: 100%; | |
| } | |
| .slider-labels { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| margin-top: 2px; | |
| } | |
| .chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin-top: 6px; | |
| min-height: 22px; | |
| } | |
| .chip { | |
| padding: 4px 8px; | |
| border-radius: 999px; | |
| background: rgba(6, 30, 72, 0.9); | |
| border: 1px solid rgba(99, 179, 237, 0.45); | |
| font-size: 11px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .chip button { | |
| border: none; | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 0; | |
| font-size: 11px; | |
| } | |
| .primary-btn { | |
| margin-top: 12px; | |
| padding: 9px 14px; | |
| border-radius: 999px; | |
| border: none; | |
| background: linear-gradient(135deg, #ffb347, #ff6b6b); | |
| color: #1d1630; | |
| font-weight: 600; | |
| font-size: 13px; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); | |
| } | |
| .primary-btn:disabled { | |
| opacity: 0.65; | |
| cursor: default; | |
| box-shadow: none; | |
| } | |
| .spinner { | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 999px; | |
| border: 2px solid rgba(29, 22, 48, 0.7); | |
| border-top-color: #1d1630; | |
| animation: spin 0.7s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 10px; | |
| margin-bottom: 10px; | |
| } | |
| @media (max-width: 720px) { | |
| .metrics-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| } | |
| .metric-card { | |
| padding: 10px 10px 9px; | |
| border-radius: 14px; | |
| background: radial-gradient(circle at top left, rgba(12, 40, 80, 0.95), rgba(3, 14, 36, 0.96)); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| font-size: 12px; | |
| } | |
| .metric-label { | |
| color: var(--text-muted); | |
| font-size: 11px; | |
| margin-bottom: 4px; | |
| } | |
| .metric-value { | |
| font-size: 16px; | |
| font-weight: 600; | |
| } | |
| .metric-bar { | |
| margin-top: 6px; | |
| width: 100%; | |
| height: 5px; | |
| border-radius: 999px; | |
| background: rgba(12, 32, 66, 0.9); | |
| overflow: hidden; | |
| } | |
| .metric-bar-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #3fd5a1, #ffb347); | |
| width: 0%; | |
| transition: width 0.4s ease-out; | |
| } | |
| .timeline { | |
| margin-top: 10px; | |
| max-height: 280px; | |
| overflow-y: auto; | |
| padding-right: 4px; | |
| } | |
| .stop-card { | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 8px 10px; | |
| padding: 10px 10px 9px; | |
| border-radius: 14px; | |
| background: rgba(5, 18, 42, 0.96); | |
| border: 1px solid rgba(255, 255, 255, 0.06); | |
| margin-bottom: 8px; | |
| } | |
| .stop-step { | |
| width: 26px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| } | |
| .stop-step-circle { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 999px; | |
| border: 2px solid rgba(111, 207, 255, 0.9); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 11px; | |
| } | |
| .stop-step-line { | |
| flex: 1; | |
| width: 2px; | |
| background: linear-gradient(to bottom, rgba(111, 207, 255, 0.7), transparent); | |
| } | |
| .stop-main { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .stop-title { | |
| font-size: 13px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .stop-title .suggested-badge { | |
| font-size: 10px; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| padding: 2px 6px; | |
| border-radius: 6px; | |
| background: rgba(102, 160, 255, 0.2); | |
| border: 1px solid rgba(102, 160, 255, 0.5); | |
| color: #9fc5ff; | |
| } | |
| .stop-time { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| .stop-meta { | |
| margin-top: 4px; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .pill { | |
| padding: 2px 8px; | |
| border-radius: 999px; | |
| background: rgba(7, 32, 70, 0.9); | |
| border: 1px solid rgba(111, 207, 255, 0.4); | |
| } | |
| .empty-state { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| padding: 18px 6px 8px; | |
| text-align: center; | |
| } | |
| .error-banner { | |
| margin-top: 10px; | |
| padding: 6px 9px; | |
| border-radius: 10px; | |
| background: rgba(255, 77, 106, 0.08); | |
| border: 1px solid rgba(255, 77, 106, 0.5); | |
| font-size: 12px; | |
| color: #ffcdd5; | |
| display: none; | |
| } | |
| .system-response-wrap { | |
| margin-top: 14px; | |
| border: 1px solid rgba(255,255,255,0.08); | |
| border-radius: 12px; | |
| background: rgba(2, 12, 28, 0.95); | |
| overflow: hidden; | |
| } | |
| .system-response-toggle { | |
| width: 100%; | |
| padding: 8px 12px; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--text-muted); | |
| background: rgba(6, 20, 45, 0.9); | |
| border: none; | |
| cursor: pointer; | |
| text-align: left; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .system-response-toggle:hover { | |
| background: rgba(10, 28, 58, 0.95); | |
| color: var(--text-main); | |
| } | |
| .system-response-body { | |
| display: none; | |
| padding: 10px 12px; | |
| max-height: 280px; | |
| overflow: auto; | |
| } | |
| .system-response-body.open { | |
| display: block; | |
| } | |
| .system-response-body pre { | |
| margin: 0; | |
| font-size: 10px; | |
| color: #a8b5cc; | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| } | |
| .suggested-note { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| margin-bottom: 10px; | |
| padding: 6px 10px; | |
| border-radius: 8px; | |
| background: rgba(102, 160, 255, 0.08); | |
| border: 1px solid rgba(102, 160, 255, 0.2); | |