:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17231e; background: #edf2ee; }
* { box-sizing: border-box; } body { margin: 0; overflow: hidden; } #map { width: 100vw; height: var(--map-height, 100vh); }
.panel { position: fixed; z-index: 2; top: 20px; left: 20px; width: 356px; max-height: calc(100vh - 340px); overflow: auto; padding: 20px; background: rgba(255,255,255,.94); border: 1px solid rgba(20,38,29,.08); border-radius: 20px; box-shadow: 0 16px 46px rgba(26,43,34,.14); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; }.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: #18a46d; box-shadow: 0 0 0 5px #e7f7ef; }.brand h1 { margin: 0; font-size: 18px; letter-spacing: -.025em; }.brand p { margin: 3px 0 0; color: #7c8781; font-size: 12px; }
.search { display: flex; align-items: center; gap: 8px; margin: 20px 0 18px; padding: 0 10px; background: #f4f7f5; border: 1px solid #edf1ee; border-radius: 11px; }.search svg { width: 17px; stroke: #7d8982; fill: none; stroke-width: 1.8; }.search input { min-width: 0; flex: 1; padding: 11px 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 13px; }.search kbd { color: #89938e; font-size: 10px; white-space: nowrap; }
.section-label { margin: 0 0 9px; color: #7d8882; font-size: 11px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }.filters { display: flex; flex-wrap: wrap; gap: 6px; }.filter { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; color: #5e6b63; background: #fff; border: 1px solid #e7ece8; border-radius: 999px; cursor: pointer; font: 600 12px/1 inherit; transition: .16s ease; }.filter i { width: 7px; height: 7px; border-radius: 50%; background: var(--filter-color); }.filter:hover { border-color: #bfcec5; }.filter.active { color: #146c48; background: #ebf8f1; border-color: #bfe7d1; }
.companies { margin-top: 17px; border-top: 1px solid #e9eeeb; }.company { display: flex; width: 100%; gap: 10px; padding: 12px 2px; border: 0; border-bottom: 1px solid #edf1ee; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; }.company:hover b,.company.active b { color: #138255; }.company-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--dot); }.company b { display: block; font-size: 13px; line-height: 1.3; font-weight: 650; }.company small { display: block; margin-top: 3px; color: #859089; font-size: 11px; }.empty { padding: 18px 0 2px; color: #859089; font-size: 13px; text-align: center; }
.store-card { margin-top: 16px; padding: 15px; border: 1px solid #dcebe2; border-radius: 15px; background: #f7fbf8; }.store-card-head { display: flex; align-items: flex-start; gap: 10px; }.store-symbol { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; color: #fff; background: var(--store-color); border-radius: 9px; font-size: 20px; font-weight: 700; }.store-card-head p { margin: 1px 0 3px; color: #819087; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.store-card-head h2 { margin: 0; font-size: 14px; line-height: 1.28; letter-spacing: -.015em; }.store-status { display: inline-block; margin: 12px 0; padding: 5px 8px; color: #fff; background: var(--status-color); border-radius: 999px; font-size: 11px; font-weight: 700; }.store-details { border-top: 1px solid #e0ece4; }.store-detail { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #e6efe9; font-size: 11px; }.store-detail span { color: #718078; }.store-detail b { max-width: 61%; text-align: right; font-weight: 650; }.store-actions { display: flex; gap: 7px; margin-top: 13px; }.store-link { flex: 1; padding: 8px; color: #fff; background: #168257; border-radius: 8px; font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; }.store-link.map-link { color: #35604b; background: #e2f2e8; }
.weight-info { margin-top: 12px; padding: 10px; color: #266043; background: #e3f4e9; border-radius: 9px; font-size: 11px; }.weight-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.weight-summary span { display: flex; flex-direction: column; gap: 2px; }.weight-info small { color: #739484; font-size: 9px; }.weight-info b { font-size: 13px; }.shipment-list { display: grid; gap: 5px; margin: 9px 0 0; padding: 8px 0 0; border-top: 1px solid #cde7d8; list-style: none; }.shipment-list li { display: flex; justify-content: space-between; gap: 10px; }.shipment-list span { display: flex; gap: 5px; }.shipment-list small { color: #668978; }.shipment-empty { color: #718a7b; }.weight-error { color: #a35b45; }
.store-card { position: fixed; z-index: 2; top: var(--store-card-top, 440px); left: 20px; width: 356px; max-height: calc(100vh - var(--store-card-top, 440px) - 20px); margin: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #94a39a transparent; box-shadow: 0 12px 32px rgba(26,43,34,.10); }
.store-card::-webkit-scrollbar { width: 8px; }.store-card::-webkit-scrollbar-track { margin: 10px 3px; background: transparent; }.store-card::-webkit-scrollbar-thumb { background: #94a39a; border: 2px solid #f7fbf8; border-radius: 999px; }.store-card::-webkit-scrollbar-thumb:hover { background: #73847a; }
.notice { position: fixed; z-index: 6; right: 22px; bottom: 22px; max-width: 360px; padding: 13px 16px; color: #fff; background: #ad3d40; border-radius: 11px; box-shadow: 0 12px 32px rgba(0,0,0,.18); font-size: 14px; }
@media (max-width: 600px) { .panel { top: 10px; left: 10px; right: 10px; width: auto; max-height: 48vh; }.store-card { left: 10px; width: calc(100vw - 20px); max-height: calc(52vh - 20px); }.filter { padding: 6px 8px; } }