/* /gtv_shipment_status_indicator/static/src/scss/shipment_status.scss */
 .sp-theme-gtv{--sp-header-from: #1a237e; --sp-header-to: #2b3790; --sp-footer-bg: #1a237e; --sp-accent: #3949ab; --sp-btn-from: #2b3790; --sp-btn-to: #3949ab; --sp-pill-color: #2b3790; --sp-pill-border: #dce1f5; --sp-pill-bg: rgba(255,255,255,0.85); --sp-link-color: #2b3790; --sp-tile-blue: #1565c0; --sp-tile-indigo: #2b3790; --sp-tile-green: #2e7d32; --sp-tile-orange: #e65100; --sp-provider-left: #2b3790; --sp-provider-bg: linear-gradient(135deg, #e8eaf6 0%, #ede7f6 100%); --sp-provider-icon: #2b3790; --sp-bg: #f0f2ff; --sp-card-border: #e8ecf8; --sp-card-bg: #ffffff; --sp-tile-bg: #f7f8ff; --sp-tile-border: #eef0fb; --sp-input-border: #e0e4f0; --sp-input-bg: #f7f8ff; --sp-input-focus: #3949ab; --sp-input-shadow: rgba(57, 73, 171, 0.12); --sp-hero-icon-from: #2b3790; --sp-hero-icon-to: #3949ab; --sp-hero-shadow: rgba(26, 35, 126, 0.25); --sp-search-shadow: rgba(26, 35, 126, 0.12); --sp-tl-dot-bg: #2b3790; --sp-tl-dot-border: #c5cae9; --sp-tl-line-from: #3949ab; --sp-tl-line-to: #c5cae9; --sp-tl-active-bg: #2e7d32; --sp-tl-active-bdr: #a5d6a7; --sp-tl-content-bg: #f7f8ff; --sp-tl-content-bdr: #eef0fb; --sp-text-dark: #1a237e; --sp-text-mid: #455a64; --sp-text-muted: #90a4ae; --sp-header-btn-bdr: rgba(255,255,255,0.28); --sp-back-link-hover:#1a237e;}.sp-theme-parcel{--sp-primary: #2596be; --sp-primary-hover: #1f7fa2; --sp-primary-light: #4fb2d6; --sp-primary-soft: #e8f6fb; --sp-header-from: #2596be; --sp-header-to: #1f7fa2; --sp-footer-bg: #1f7fa2; --sp-accent: #2596be; --sp-btn-from: #2596be; --sp-btn-to: #4fb2d6; --sp-btn-hover: #1f7fa2; --sp-link-color: #2596be; --sp-card-bg: #ffffff; --sp-card-border: #c9e7f2; --sp-bg: #f6fbfe; --sp-tile-bg: #f0f9fc; --sp-tile-border: #c9e7f2; --sp-provider-left: #2596be; --sp-provider-bg: linear-gradient(135deg, #e8f6fb 0%, #d6eef7 100%); --sp-provider-icon: #2596be; --sp-input-border: #c9e7f2; --sp-input-bg: #f9fdff; --sp-input-focus: #2596be; --sp-input-shadow: rgba(37,150,190,0.15); --sp-hero-icon-from: #2596be; --sp-hero-icon-to: #4fb2d6; --sp-hero-shadow: rgba(37,150,190,0.25); --sp-search-shadow: rgba(37,150,190,0.1); --sp-tl-dot-bg: #2596be; --sp-tl-dot-border: #c9e7f2; --sp-tl-line-from: #2596be; --sp-tl-line-to: #c9e7f2; --sp-tl-active-bg: #2e7d32; --sp-tl-active-bdr: #a5d6a7; --sp-tl-content-bg: #f6fbfe; --sp-tl-content-bdr: #c9e7f2; --sp-text-dark: #1a1a2e; --sp-text-mid: #4b5d67; --sp-text-muted: #8a9aa3; --sp-header-btn-bdr: rgba(255,255,255,0.25); --sp-back-link-hover:#1f7fa2;}.status-public-body{margin: 0; padding: 0; background: var(--sp-bg); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--sp-text-mid); min-height: 100vh; display: flex; flex-direction: column;}.status-public-body #wrapwrap, .status-public-body #wrap{padding-top: 0 !important; margin-top: 0 !important;}.sp-header{background: linear-gradient(135deg, var(--sp-header-from) 0%, var(--sp-header-to) 100%); height: 62px; display: flex; align-items: center; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);}.sp-header-inner{width: 100%; max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;}.sp-logo-link{display: flex; align-items: center; text-decoration: none; flex-shrink: 0;}.sp-logo-img{height: 36px; object-fit: contain;}.sp-header-title{color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.3px;}.sp-header-title i{margin-right: 8px; opacity: 0.75;}@media (max-width: 576px){.sp-header-title{display: none;}}.sp-back-btn{display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.8); font-size: 0.82rem; font-weight: 500; text-decoration: none; border: 1px solid var(--sp-header-btn-bdr); padding: 5px 14px; border-radius: 20px; transition: all 0.2s ease; flex-shrink: 0;}.sp-back-btn:hover{background: rgba(255, 255, 255, 0.15); color: #fff; text-decoration: none;}@media (max-width: 400px){.sp-back-label{display: none;}}.sp-footer{background: var(--sp-footer-bg); padding: 1rem 1.5rem; margin-top: auto;}.sp-footer-inner{max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;}.sp-footer-copy{color: rgba(255, 255, 255, 0.5); font-size: 0.78rem;}.sp-footer-links{display: flex; gap: 1.25rem;}.sp-footer-links a{color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; text-decoration: none; transition: color 0.2s;}.sp-footer-links a:hover{color: #fff;}.sp-main{flex: 1; display: flex; flex-direction: column;}.sp-page-wrap{width: 100%; max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 3rem;}.sp-search-hero{display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1rem 2rem;}.sp-hero-icon{width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--sp-hero-icon-from) 0%, var(--sp-hero-icon-to) 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; box-shadow: 0 8px 24px var(--sp-hero-shadow);}.sp-hero-icon i{font-size: 2rem; color: #fff;}.sp-hero-title{font-size: 2rem; font-weight: 700; color: var(--sp-text-dark); margin-bottom: 0.5rem;}@media (max-width: 576px){.sp-hero-title{font-size: 1.6rem;}}.sp-hero-subtitle{color: var(--sp-text-mid); font-size: 1rem; margin-bottom: 2rem;}.sp-search-card{width: 100%; max-width: 560px; background: var(--sp-card-bg); border-radius: 14px; padding: 2rem; box-shadow: 0 4px 20px var(--sp-search-shadow); border: 1px solid var(--sp-card-border);}.sp-search-form{display: flex; flex-direction: column; gap: 1rem;}.sp-input-wrap{position: relative; display: flex; align-items: center;}.sp-input-icon{position: absolute; left: 14px; color: var(--sp-text-muted); font-size: 0.9rem; pointer-events: none;}.sp-input{width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; border: 1.5px solid var(--sp-input-border); border-radius: 10px; font-size: 0.95rem; color: var(--sp-text-dark); outline: none; transition: border-color 0.2s, box-shadow 0.2s; background: var(--sp-input-bg);}.sp-input:focus{border-color: var(--sp-input-focus); box-shadow: 0 0 0 3px var(--sp-input-shadow); background: #fff;}.sp-input::placeholder{color: var(--sp-text-muted); font-size: 0.88rem;}.sp-search-btn{width: 100%; padding: 0.8rem; background: linear-gradient(135deg, var(--sp-btn-from) 0%, var(--sp-btn-to) 100%); color: #fff; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.3px;}.sp-search-btn:hover{filter: brightness(0.9); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);}.sp-search-btn--sm{width: auto; padding: 0.6rem 1rem; border-radius: 6px;}.sp-search-hint{margin-top: 0.85rem; margin-bottom: 0; font-size: 0.78rem; color: var(--sp-text-muted); text-align: center;}.sp-info-pills{display: flex; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; justify-content: center;}.sp-pill{display: flex; align-items: center; gap: 6px; background: var(--sp-pill-bg); border: 1px solid var(--sp-pill-border); padding: 6px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 500; color: var(--sp-pill-color); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);}.sp-pill i{font-size: 0.72rem; opacity: 0.7;}.sp-result-wrap{padding-top: 1.25rem;}.sp-breadcrumb{margin-bottom: 1.25rem;}.sp-back-link{color: var(--sp-link-color); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: color 0.2s;}.sp-back-link:hover{color: var(--sp-back-link-hover); text-decoration: underline;}.sp-error-card{max-width: 560px; margin: 2rem auto; background: var(--sp-card-bg); border-radius: 14px; padding: 2.5rem 2rem; text-align: center; box-shadow: 0 4px 20px var(--sp-search-shadow); border: 1px solid var(--sp-card-border);}.sp-error-icon{width: 64px; height: 64px; border-radius: 50%; background: #fff3e0; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;}.sp-error-icon i{font-size: 1.5rem; color: #f57c00;}.sp-error-title{font-size: 1.3rem; font-weight: 700; color: var(--sp-text-dark); margin-bottom: 0.5rem;}.sp-error-msg{color: var(--sp-text-mid); font-size: 0.9rem; margin-bottom: 1.5rem;}.sp-mt-3{margin-top: 1.5rem;}.sp-status-banner{border-radius: 14px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, var(--sp-header-from) 0%, var(--sp-header-to) 100%); color: #fff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);}.sp-status-banner.sp-status-confirm{background: linear-gradient(135deg, #2e7d32 0%, #43a047 100%);}.sp-status-banner.sp-status-cancel{background: linear-gradient(135deg, #c62828 0%, #e53935 100%);}.sp-status-banner.sp-status-draft{background: linear-gradient(135deg, #37474f 0%, #546e7a 100%);}.sp-status-banner-inner{display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;}.sp-status-icon-wrap{width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.sp-status-text{flex: 1;}.sp-status-label{font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; opacity: 0.75;}.sp-status-name{font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin-top: 2px;}.sp-booking-badge{display: inline-flex; align-items: center; margin-top: 6px; background: rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 3px 10px; font-size: 0.78rem; font-weight: 500;}.sp-status-ref{text-align: right; flex-shrink: 0;}@media (max-width: 576px){.sp-status-ref{display: none;}}.sp-ref-label{display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.7;}.sp-ref-value{display: block; font-size: 0.9rem; font-weight: 700; font-family: 'Courier New', monospace; letter-spacing: 0.5px;}.sp-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start;}@media (max-width: 768px){.sp-grid{grid-template-columns: 1fr;}}.sp-card{background: var(--sp-card-bg); border-radius: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); overflow: hidden; border: 1px solid var(--sp-card-border);}.sp-card-header{background: linear-gradient(135deg, var(--sp-header-from) 0%, var(--sp-header-to) 100%); color: #fff; padding: 0.85rem 1.25rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.2px;}.sp-card-header i{opacity: 0.8;}.sp-card-body{padding: 1.25rem;}.sp-tiles{display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem;}.sp-tile{display: flex; align-items: flex-start; gap: 0.75rem; background: var(--sp-tile-bg); border-radius: 10px; padding: 0.85rem; border: 1px solid var(--sp-tile-border);}.sp-tile-icon{width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.sp-tile-icon i{font-size: 0.85rem; color: #fff;}.sp-tile-icon--blue{background: var(--sp-tile-blue);}.sp-tile-icon--indigo{background: var(--sp-tile-indigo);}.sp-tile-icon--green{background: var(--sp-tile-green);}.sp-tile-icon--orange{background: var(--sp-tile-orange);}.sp-tile-text{display: flex; flex-direction: column; gap: 2px; min-width: 0;}.sp-tile-label{font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--sp-text-muted);}.sp-tile-value{font-size: 0.9rem; font-weight: 600; color: var(--sp-text-dark); word-break: break-word;}.sp-provider-bar{display: flex; align-items: center; gap: 0.85rem; background: var(--sp-provider-bg); border-left: 4px solid var(--sp-provider-left); border-radius: 6px; padding: 0.85rem 1rem; margin-top: 0.25rem;}.sp-provider-icon{color: var(--sp-provider-icon); font-size: 1.1rem; flex-shrink: 0;}.sp-timeline{position: relative; padding-left: 28px;}.sp-timeline::before{content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #2e7d32, #a5d6a7); border-radius: 2px;}.sp-tl-item{position: relative; padding-bottom: 1.25rem;}.sp-tl-item:last-child{padding-bottom: 0;}.sp-tl-dot{position: absolute; left: -28px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #2e7d32; border-color: #a5d6a7; border: 2px solid var(--sp-tl-dot-border); display: flex; align-items: center; justify-content: center;}.sp-tl-dot i{font-size: 0.55rem; color: #fff;}.sp-tl-item:last-child .sp-tl-dot{background: var(--sp-tl-active-bg); border-color: var(--sp-tl-active-bdr); width: 22px; height: 22px; left: -29px;}.sp-tl-content{background: var(--sp-tl-content-bg); border-radius: 6px; padding: 0.65rem 0.85rem; border: 1px solid var(--sp-tl-content-bdr);}.sp-tl-status{font-size: 0.85rem; font-weight: 600; color: var(--sp-text-dark); margin-bottom: 2px;}.sp-tl-desc{font-size: 0.78rem; color: var(--sp-text-mid); margin-bottom: 3px;}.sp-tl-date{font-size: 0.7rem; color: var(--sp-text-muted); font-weight: 500;}.sp-search-again{margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--sp-card-bg); border-radius: 10px; padding: 1rem 1.25rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid var(--sp-card-border);}.sp-search-again > span{font-size: 0.85rem; color: var(--sp-text-mid); white-space: nowrap;}.sp-search-again-form{display: flex; align-items: center; gap: 0.5rem; flex: 1;}.sp-input-sm .sp-input{padding: 0.55rem 0.75rem 0.55rem 2.2rem; font-size: 0.85rem;}@media (max-width: 768px){.sp-grid{grid-template-columns: 1fr;}}@media (max-width: 576px){.sp-search-card{padding: 1.25rem;}.sp-tiles{grid-template-columns: 1fr;}.sp-search-again{flex-direction: column; align-items: flex-start;}.sp-footer-inner{flex-direction: column; text-align: center;}.sp-status-banner-inner{flex-direction: column; align-items: flex-start;}}.sp-loading{display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 50%; border-top-color: #fff; animation: sp-spin 0.8s linear infinite; vertical-align: middle; margin-right: 6px;}@keyframes sp-spin{to{transform: rotate(360deg);}}.status-icon{font-size: 3rem;}.text-status-draft{color: #6c757d !important;}.text-status-confirmed{color: #28a745 !important;}.text-status-cancelled{color: #dc3545 !important;}.sp-theme-gtv{--tr-brand: #1a237e; --tr-brand-to: #2b3790; --tr-cta: #F26522; --tr-cta-hover: #d94f0a; --tr-success: #10B981; --tr-info: #3B82F6; --tr-info-tint: #eff6ff; --tr-border: #e8ecf8; --tr-text: #1a237e; --tr-muted: #64748B; --tr-light: #94A3B8; --tr-radius: 12px; --tr-radius-sm: 8px;}.sp-theme-parcel{--tr-brand: #2596be; --tr-brand-to: #1f7fa2; --tr-cta: #2596be; --tr-cta-hover: #1f7fa2; --tr-success: #10B981; --tr-info: #3B82F6; --tr-info-tint: #eff6ff; --tr-border: #c9e7f2; --tr-text: #1a1a2e; --tr-muted: #64748B; --tr-light: #94A3B8; --tr-radius: 12px; --tr-radius-sm: 8px;}.mono{font-family: 'JetBrains Mono', 'Courier New', monospace; font-variant-numeric: tabular-nums;}.tr-entry-wrap{min-height: 100vh; background: var(--sp-bg); display: flex; flex-direction: column;}.tr-hero{background: linear-gradient(160deg, var(--tr-brand) 0%, var(--tr-brand-to) 100%); padding: 52px 20px 72px; text-align: center; color: #fff;}.tr-hero-inner{max-width: 480px; margin: 0 auto;}.tr-hero-icon{width: 60px; height: 60px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 22px;}.tr-hero-title{font-size: 26px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.3px;}.tr-hero-sub{font-size: 14px; opacity: .8; margin: 0;}.tr-body-wrap{flex: 1; max-width: 520px; width: 100%; margin: -36px auto 0; padding: 0 16px 40px; position: relative; z-index: 2;}.tr-search-card{background: var(--sp-card-bg); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1); padding: 24px 20px 20px; margin-bottom: 16px;}.tr-input-bar{display: grid; grid-template-columns: 38px 1fr 32px; align-items: center; border: 2px solid var(--tr-border); border-radius: var(--tr-radius-sm); background: var(--sp-card-bg); transition: border-color 180ms, box-shadow 180ms; margin-bottom: 12px; overflow: hidden;}.tr-input-bar:focus-within{border-color: var(--tr-cta); box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.15);}.tr-input-icon{color: var(--tr-light); text-align: center; font-size: 14px;}.tr-input{border: none !important; outline: none !important; background: transparent; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 13px; color: var(--tr-text); padding: 10px 4px;}.tr-input::placeholder{color: var(--tr-light); font-family: inherit;}.tr-clear-btn{border: none; background: transparent; color: var(--tr-light); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 8px; display: none; align-items: center; justify-content: center;}.tr-clear-btn.is-visible{display: flex;}.tr-clear-btn:hover{color: var(--tr-text);}.tr-track-btn{display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border: none; border-radius: var(--tr-radius-sm); background: var(--tr-light); color: #fff; font-size: 14px; font-weight: 700; cursor: not-allowed; transition: background 180ms, transform 140ms, box-shadow 180ms;}.tr-track-btn.is-active{background: linear-gradient(135deg, var(--tr-brand) 0%, var(--tr-brand-to) 100%); cursor: pointer;}.tr-track-btn.is-active:hover{transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);}.tr-or-divider{display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; color: var(--tr-light); font-size: 12px;}.tr-or-divider::before, .tr-or-divider::after{content: ''; flex: 1; height: 1px; background: var(--tr-border);}.tr-scan-btn{display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border: 1.5px dashed var(--tr-border); border-radius: var(--tr-radius-sm); background: transparent; color: var(--tr-muted); font-size: 13px; cursor: not-allowed; opacity: .7;}.tr-recents{border: 1.5px dashed var(--tr-border); border-radius: var(--tr-radius); background: var(--sp-card-bg); padding: 14px 16px; margin-bottom: 16px;}.tr-recents-head{font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--tr-muted); margin-bottom: 10px;}.tr-recent-row{display: grid; grid-template-columns: 20px 1fr 14px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--tr-border); cursor: pointer; transition: background 120ms; border-radius: 6px;}.tr-recent-row:last-child{border-bottom: none;}.tr-recent-row:hover{background: var(--sp-bg);}.tr-recent-row .tr-rr-icon{color: var(--tr-light); font-size: 12px; text-align: center;}.tr-recent-row .tr-rr-val{font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--tr-text);}.tr-recent-row .tr-rr-sub{font-size: 11px; color: var(--tr-muted);}.tr-recent-row .tr-rr-sub--delivered{color: #10B981; font-weight: 600;}.tr-recent-row .tr-rr-sub--transit{color: #3B82F6; font-weight: 600;}.tr-recent-row .tr-rr-arrow{color: var(--tr-light); font-size: 11px; text-align: right;}.tr-how-section{background: var(--sp-card-bg); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); padding: 18px 20px; margin-bottom: 16px;}.tr-how-step{display: flex; align-items: flex-start; gap: 14px; font-size: 13px; color: var(--tr-muted); line-height: 1.5;}.tr-how-step + .tr-how-step{margin-top: 12px;}.tr-how-badge{flex-shrink: 0; width: 22px; height: 22px; background: linear-gradient(135deg, var(--tr-brand), var(--tr-brand-to)); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;}.tr-footer-hint{font-size: 12px; color: var(--tr-muted); text-align: center; margin-top: 8px;}.tr-footer-hint a{color: var(--tr-cta); text-decoration: none;}.tr-footer-hint a:hover{text-decoration: underline;}.tr-result-wrap{background: var(--sp-bg); min-height: 100vh; padding-bottom: 80px;}.tr-error-wrap{display: flex; align-items: center; justify-content: center; padding: 60px 20px;}.tr-error-card{background: var(--sp-card-bg); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 36px 28px; max-width: 440px; width: 100%; text-align: center;}.tr-error-icon{font-size: 40px; color: #EF4444; margin-bottom: 14px;}.tr-error-title{font-size: 20px; font-weight: 700; color: var(--tr-text); margin: 0 0 8px;}.tr-error-msg{font-size: 14px; color: var(--tr-muted); margin: 0 0 20px;}.tr-retry-form{text-align: left; margin-bottom: 16px;}.tr-retry-form .tr-track-btn{margin-top: 10px;}.tr-back-link{display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tr-cta); text-decoration: none; font-weight: 600;}.tr-back-link:hover{text-decoration: underline;}.tr-result-topbar{display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--sp-card-bg); border-bottom: 1px solid var(--tr-border); position: sticky; top: 0; z-index: 30;}.tr-ref-chip{flex: 1; font-size: 13px; font-weight: 700; color: var(--tr-text); text-align: center;}.tr-share-icon-btn{width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sp-bg); color: var(--tr-muted); text-decoration: none; font-size: 13px; transition: background 150ms;}.tr-share-icon-btn:hover{background: var(--tr-border); color: var(--tr-text);}.tr-status-banner{background: linear-gradient(135deg, var(--tr-brand) 0%, var(--tr-brand-to) 100%); color: #fff; padding: 20px;}.tr-banner-inner{max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;}.tr-banner-left{display: flex; align-items: center; gap: 14px;}.tr-status-icon{width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;}.tr-status-label{font-size: 20px; font-weight: 700; line-height: 1.2;}.tr-status-sub{font-size: 13px; opacity: .8; margin-top: 2px;}.tr-banner-right{text-align: right; border-left: 1px dashed rgba(255, 255, 255, 0.25); padding-left: 20px; min-width: 120px;}.tr-est-label{font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .7;}.tr-est-date{font-size: 18px; font-weight: 700; font-family: 'JetBrains Mono', monospace; margin: 2px 0;}.tr-carrier-sub{font-size: 12px; opacity: .75;}.tr-info-strip{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--tr-border); border-bottom: 1px solid var(--tr-border);}.tr-mini-pill{background: var(--sp-card-bg); padding: 12px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px;}.tr-pill-icon{font-size: 14px; color: var(--tr-brand); margin-bottom: 2px;}.tr-pill-val{font-size: 13px; font-weight: 700; color: var(--tr-text); line-height: 1.2;}.tr-pill-label{font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--tr-light);}.tr-result-main{max-width: 1200px; margin: 0 auto; padding: 20px 16px 20px; display: flex; flex-direction: column; gap: 16px;}@media (min-width: 1024px){.tr-result-main{display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; padding: 28px 40px 40px; align-items: start;}}.tr-result-left, .tr-result-right{display: flex; flex-direction: column; gap: 16px;}.tr-card-head{padding: 14px 18px; background: linear-gradient(135deg, var(--tr-brand), var(--tr-brand-to)); color: #fff; font-size: 14px; font-weight: 700; border-radius: var(--tr-radius) var(--tr-radius) 0 0;}.tr-timeline-card{background: var(--sp-card-bg); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}.tr-timeline{padding: 20px 20px 6px;}.tr-tl-event{display: grid; grid-template-columns: 22px 1fr; gap: 0 12px; padding-bottom: 22px; position: relative;}.tr-tl-event::after{content: ''; position: absolute; left: 10px; top: 18px; bottom: 0; border-left: 2px solid var(--tr-success);}.tr-tl-event--current::after{border-left-color: var(--tr-info);}.tr-tl-event--past::after{border-left-color: var(--tr-success);}.tr-tl-event--last::after{display: none;}.tr-tl-dot{display: flex; align-items: flex-start; justify-content: center; padding-top: 3px; position: relative; z-index: 1;}.tr-tl-dot-inner{display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--sp-card-bg); border: 2px solid var(--tr-light);}.tr-tl-event--past .tr-tl-dot-inner{background: var(--tr-success); border-color: var(--tr-success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);}.tr-tl-event--current .tr-tl-dot-inner{width: 14px; height: 14px; background: var(--tr-brand); border-color: var(--tr-brand); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);}.tr-tl-info{padding-top: 1px;}.tr-tl-badge{display: inline-block; padding: 2px 8px; border-radius: 20px; background: var(--tr-info-tint); color: var(--tr-info); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;}.tr-tl-title{font-size: 14px; font-weight: 700; color: var(--tr-text); line-height: 1.3;}.tr-tl-desc{font-size: 12px; color: var(--tr-muted); margin-top: 2px; line-height: 1.4;}.tr-tl-when{font-size: 11px; color: var(--tr-light); margin-top: 4px; font-family: 'JetBrains Mono', monospace;}.tr-tl-detail{display: none; margin-top: 8px; padding: 9px 12px; background: var(--tr-info-tint); border: 1.5px solid #c0d4f5; border-radius: var(--tr-radius-sm); font-size: 12px; color: #1d3a7a; line-height: 1.5; cursor: default;}.tr-tl-detail.is-open{display: block;}.tr-tl-event--current .tr-tl-detail{display: block; background: var(--tr-info-tint);}.tr-scan-toggle{display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 14px; border: 1.5px dashed var(--tr-border); border-radius: var(--tr-radius-sm); background: transparent; color: var(--tr-muted); font-size: 13px; cursor: pointer; transition: border-color 150ms, color 150ms;}.tr-scan-toggle:hover{border-color: var(--tr-brand); color: var(--tr-brand);}.tr-scan-events{margin-top: 8px;}.tr-carrier-error{padding: 10px 14px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: var(--tr-radius-sm); font-size: 13px; color: #92400e; margin-bottom: 8px;}.tr-scan-table{width: 100%; font-size: 12px; border-collapse: collapse;}.tr-scan-table th{background: var(--sp-bg); padding: 8px 12px; font-weight: 600; text-align: left; color: var(--tr-muted); border-bottom: 1px solid var(--tr-border); font-size: 11px; text-transform: uppercase; letter-spacing: .4px;}.tr-scan-table td{padding: 8px 12px; border-bottom: 1px solid var(--tr-border); color: var(--tr-text); vertical-align: top;}.tr-scan-table td:first-child{font-family: 'JetBrains Mono', monospace; white-space: nowrap; color: var(--tr-muted);}.tr-scan-table tr:last-child td{border-bottom: none;}.tr-details-card{background: var(--sp-card-bg); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}.tr-details-body{padding: 6px 0;}.tr-dr{display: grid; grid-template-columns: 100px 1fr; gap: 8px; padding: 9px 18px; border-bottom: 1px solid var(--tr-border); align-items: center;}.tr-dr:last-child{border-bottom: none;}.tr-dr-label{font-size: 11px; font-weight: 600; color: var(--tr-muted); text-transform: uppercase; letter-spacing: .4px;}.tr-dr-val{font-size: 13px; font-weight: 600; color: var(--tr-text); word-break: break-word;}.tr-actions-card{background: var(--sp-card-bg); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}.tr-action-btn{display: flex; align-items: center; justify-content: center; height: 42px; border-radius: var(--tr-radius-sm); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; transition: transform 140ms, box-shadow 140ms;}.tr-action-btn:hover{transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);}.tr-action-btn--wa{background: #25D366; color: #fff;}.tr-action-btn--dl{background: var(--tr-brand); color: #fff;}.tr-action-btn--copy{background: var(--sp-bg); color: var(--tr-brand); border: 1.5px solid var(--tr-border);}.tr-action-btn--support{background: transparent; color: var(--tr-muted); border: 1.5px dashed var(--tr-border);}.tr-notify-row{display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--sp-bg); border: 1px solid var(--tr-border); border-radius: var(--tr-radius-sm);}.tr-notify-label{font-size: 12px; color: var(--tr-muted); flex: 1;}.tr-notify-btn{flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; background: #25D366; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; transition: background 140ms;}.tr-notify-btn:hover{background: #1da851; color: #fff; text-decoration: none;}.tr-notify-btn--login{background: var(--tr-brand);}.tr-notify-btn--login:hover{background: var(--tr-brand-to);}.tr-share-card{background: var(--sp-card-bg); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); padding: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}.tr-share-head{font-size: 12px; font-weight: 700; color: var(--tr-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;}.tr-share-row{display: flex; gap: 8px;}.tr-share-input{flex: 1; height: 36px; border: 1.5px solid var(--tr-border); border-radius: var(--tr-radius-sm); padding: 0 10px; font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--tr-muted); background: var(--sp-bg); outline: none; min-width: 0;}.tr-share-copy-btn{flex-shrink: 0; height: 36px; padding: 0 14px; border: none; border-radius: var(--tr-radius-sm); background: var(--tr-brand); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 150ms;}.tr-share-copy-btn:hover{background: var(--tr-brand-to);}.tr-share-copy-btn.is-copied{background: #10B981;}.tr-bottom-bar{position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--tr-border);}@media (min-width: 768px){.tr-bottom-bar{display: none;}}.tr-bottom-btn{flex: 1; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--tr-radius-sm); font-size: 13px; font-weight: 700; text-decoration: none; border: none; cursor: pointer;}.tr-bottom-btn--share{background: var(--tr-cta); color: #fff;}.tr-bottom-btn--dl{background: var(--tr-brand); color: #fff;}@media (max-width: 480px){.tr-info-strip{grid-template-columns: repeat(2, 1fr);}.tr-banner-right{display: none;}.tr-hero-title{font-size: 22px;}}@keyframes tr-pulse{0%, 100%{box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35);}50%{box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);}}.tr-tl-event--current .tr-tl-dot-inner{animation: tr-pulse 2s ease-in-out infinite;}@keyframes tr-ring-flash{0%{box-shadow: 0 0 0 0 rgba(242, 101, 34, 0.5);}50%{box-shadow: 0 0 0 5px rgba(242, 101, 34, 0.2);}100%{box-shadow: 0 0 0 0 rgba(242, 101, 34, 0);}}.tr-input-bar.tr-ring-flash{border-color: var(--tr-cta); animation: tr-ring-flash .6s ease-out;}.text-status-unknown{color: #17a2b8 !important;}.tr-header-search{display: none; flex: 1; max-width: 420px; margin: 0 16px; align-items: center; gap: 8px;}@media (min-width: 1024px){.tr-header-search{display: flex;}}.tr-hs-bar{flex: 1; display: flex; align-items: center; background: rgba(255, 255, 255, 0.12); border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: var(--tr-radius-sm); overflow: hidden; transition: border-color 180ms, background 180ms; min-width: 0;}.tr-hs-bar:focus-within{background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5);}.tr-hs-icon{padding: 0 10px; color: rgba(255, 255, 255, 0.55); font-size: 13px; flex-shrink: 0; pointer-events: none;}.tr-hs-input{flex: 1; height: 36px; border: none !important; outline: none !important; background: transparent; color: #fff; font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 12px; padding: 0 6px 0 0; min-width: 0;}.tr-hs-input::placeholder{color: rgba(255, 255, 255, 0.45); font-family: inherit;}.tr-hs-btn{flex-shrink: 0; height: 30px; padding: 0 16px; margin: 3px; border: none; border-radius: 6px; background: var(--tr-cta); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 150ms, transform 120ms; white-space: nowrap;}.tr-hs-btn:hover{background: var(--tr-cta-hover); transform: translateY(-1px);}.tr-card-head-inner{display: flex; align-items: center; justify-content: space-between; gap: 12px;}.tr-tl-tabs{display: flex; gap: 4px;}.tr-tl-tab{padding: 3px 10px; border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, 0.28); background: transparent; color: rgba(255, 255, 255, 0.65); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 140ms; line-height: 1.6; white-space: nowrap;}.tr-tl-tab--active{background: rgba(255, 255, 255, 0.2); color: #fff; border-color: rgba(255, 255, 255, 0.55);}.tr-tl-tab:not(.tr-tl-tab--active):hover{background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9);}.tr-timeline--key-only .tr-tl-event:not(.tr-tl-event--key){display: none;}.tr-route-card{background: var(--sp-card-bg); border: 1px solid var(--tr-border); border-radius: var(--tr-radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); margin-bottom: 16px;}.tr-route-hdr{display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--tr-border); font-size: 12px; font-weight: 600; color: var(--tr-text);}.tr-route-badge{font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 2px 9px; border-radius: 10px; background: var(--tr-brand); color: #fff;}.tr-prog-wrap{padding: 0 20px 6px; background-image: linear-gradient(var(--tr-border) 1px, transparent 1px), linear-gradient(90deg, var(--tr-border) 1px, transparent 1px); background-size: 22px 22px; background-color: var(--sp-card-bg);}.tr-prog-track{height: 4px; background: var(--tr-border); border-radius: 2px; margin: 26px 14px 0; position: relative;}.tr-prog-fill{height: 100%; background: linear-gradient(90deg, var(--tr-brand), var(--tr-success)); border-radius: 2px; max-width: 100%; transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);}.tr-prog-steps{display: flex; justify-content: space-between; margin-top: -26px; padding: 0 8px; position: relative;}.tr-ps{display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1;}.tr-ps-dot{width: 30px; height: 30px; border-radius: 50%; background: var(--sp-card-bg); border: 2px solid var(--tr-border); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--tr-muted); position: relative; z-index: 1; transition: background 250ms, border-color 250ms, box-shadow 250ms;}.tr-ps-label{font-size: 8.5px; font-weight: 600; color: var(--tr-muted); text-align: center; max-width: 58px; line-height: 1.3; padding-bottom: 8px;}.tr-ps--done .tr-ps-dot{background: var(--tr-success); border-color: var(--tr-success); color: #fff;}.tr-ps--done .tr-ps-label{color: var(--tr-success);}.tr-ps--active .tr-ps-dot{background: var(--tr-brand); border-color: var(--tr-brand); color: #fff; box-shadow: 0 0 0 5px rgba(14, 30, 64, 0.12);}.tr-ps--active .tr-ps-label{color: var(--tr-brand); font-weight: 700;}.tr-route-pins{display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 12px; border-top: 1px solid var(--tr-border);}.tr-rpin{display: flex; align-items: center; gap: 7px;}.tr-rpin-code{display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; flex-shrink: 0;}.tr-rpin-name{font-size: 11px; font-weight: 600; color: var(--tr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;}.tr-rpin--origin .tr-rpin-code{background: var(--tr-brand); color: #fff;}.tr-rpin--dest .tr-rpin-code{background: var(--tr-success); color: #fff;}@media (max-width: 479px){.tr-prog-wrap{padding: 0 12px 6px;}.tr-prog-track{margin: 8px 10px 0;}.tr-prog-steps{margin-top: -12px; padding: 0 3px 26px; position: relative;}.tr-ps{gap: 0;}.tr-ps-dot{width: 20px; height: 20px; font-size: 9px;}.tr-ps-label{display: none;}.tr-ps--active .tr-ps-label{display: block; position: absolute; bottom: 2px; left: 0; right: 0; max-width: none; text-align: center; font-size: 11px; font-weight: 700; color: var(--tr-brand); line-height: 1; white-space: nowrap;}}.tr-map-inner{display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 12px 24px 4px; background-image: linear-gradient(var(--tr-border) 1px, transparent 1px), linear-gradient(90deg, var(--tr-border) 1px, transparent 1px); background-size: 22px 22px; background-color: var(--sp-card-bg);}.tr-map-svg{width: 100%; height: 76px; overflow: visible;}.tr-map-path--bg{stroke: var(--tr-border); opacity: .8;}.tr-map-path{stroke: var(--tr-brand); stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1);}.tr-map-dot--origin{fill: var(--tr-brand);}.tr-map-dot--dest{fill: var(--tr-success);}.tr-map-dot--ring{fill: none; opacity: .2;}.tr-map-dot--ring-origin{stroke: var(--tr-brand); stroke-width: 2;}.tr-map-dot--ring-dest{stroke: var(--tr-success); stroke-width: 2;}.tr-map-traveler{fill: #F26522; transition: opacity 0.4s ease;}.tr-map-traveler-ring{fill: rgba(242, 101, 34, 0.18); animation: tr-traveler-pulse 2s ease-in-out infinite; transition: opacity 0.4s ease;}@keyframes tr-traveler-pulse{0%, 100%{opacity: .5;}50%{opacity: .1;}}.tr-map-labels{display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding: 4px 8.57% 10px;}.tr-map-pin-group{display: flex; flex-direction: column; align-items: center; gap: 3px;}.tr-map-pin-group--dest{align-items: center;}.tr-map-pin{font-size: 11px; font-weight: 700; font-family: var(--sp-font-mono, "JetBrains Mono", monospace); padding: 3px 8px; border-radius: 4px; letter-spacing: .5px; flex-shrink: 0;}.tr-map-pin--origin{background: var(--tr-brand); color: #fff;}.tr-map-pin--dest{background: var(--tr-success); color: #fff;}.tr-map-pin-name{font-size: 9px; color: var(--tr-muted); text-align: center; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.tr-map-route-line{flex: 1; height: 0; border-top: 1.5px dashed var(--tr-border); margin-top: 12px;}.tr-intl-phases{display: flex; justify-content: space-between; align-items: center; padding: 10px 4px 2px; border-top: 1px solid var(--tr-border); margin-top: 8px; gap: 2px;}.tr-ip{display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--tr-light); opacity: .45;}.tr-ip i{font-size: 12px;}.tr-ip--done{opacity: 1; color: var(--tr-success);}.tr-ip--done i{color: var(--tr-success);}.tr-ip--active{opacity: 1; color: var(--tr-brand); font-weight: 700;}.tr-ip--active i{color: var(--tr-brand); filter: drop-shadow(0 0 3px rgba(37, 150, 190, 0.35));}