.tr-result{position:relative;padding:56px 0 96px;background:linear-gradient(180deg,transparent,rgba(8,7,12,.04) 50%,transparent),var(--bg);border-top:1px solid var(--line)}.tr-loader,.tr-error{max-width:480px;margin:40px auto;text-align:center;padding:48px 32px;background:var(--bg-card);border:1px solid var(--line);border-radius:18px}.tr-loader-spin{width:48px;height:48px;margin:0 auto 20px;border:3px solid rgba(255,205,5,.18);border-top-color:var(--y);border-radius:50%;animation:trSpin .9s linear infinite}@keyframes trSpin{to{transform:rotate(360deg)}}.tr-loader p{color:var(--ink-2);font-size:15px}.tr-error-ico{width:56px;height:56px;margin:0 auto 16px;color:#ef4444}.tr-error-ico svg{width:100%;height:100%}.tr-error h3{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:8px}.tr-error p{color:var(--ink-2);font-size:14px;line-height:1.6;margin-bottom:20px}.tr-close-btn{padding:10px 22px;background:var(--ink);color:var(--bg);border:0;border-radius:10px;font-family:var(--font-display);font-weight:600;font-size:13px;cursor:pointer;letter-spacing:.02em}.tr-close-btn:hover{opacity:.9}.tr-card{background:var(--bg-card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 28px 60px -20px #00000073;animation:trCardIn .6s cubic-bezier(.2,.9,.3,1) both}@keyframes trCardIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.tr-head{display:grid;grid-template-columns:1fr auto;gap:24px;padding:32px 36px 28px;align-items:flex-start;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(255,205,5,.04),transparent 60%),var(--bg-card)}.tr-eyebrow{font-family:var(--font-mono);font-size:11px;color:var(--y);letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:10px}[data-theme=light] .tr-eyebrow{color:#b8761d}.tr-vehicle{margin:0 0 14px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}.tr-vehicle-reg{font-family:var(--font-mono);font-size:clamp(22px,3vw,32px);font-weight:700;padding:8px 16px;background:#08070c;color:var(--y);border:1px solid rgba(255,205,5,.35);border-radius:8px;letter-spacing:.08em;box-shadow:0 4px 16px -4px #0000008c,inset 0 0 0 2px #ffcd050f,inset 0 1px #ffffff0a;text-shadow:0 0 12px rgba(255,205,5,.18)}.tr-vehicle-model{font-size:clamp(20px,2.6vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}.tr-meta-row{display:flex;gap:28px;flex-wrap:wrap;padding-top:4px}.tr-mr{display:flex;flex-direction:column;gap:4px}.tr-mr-l{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em}.tr-mr-v{font-size:14px;color:var(--ink-2);font-weight:500}.tr-head-right{display:flex;justify-content:flex-end}.tr-status-pill{display:inline-flex;flex-direction:column;gap:4px;padding:14px 20px;background:linear-gradient(135deg,var(--y),var(--gold));color:#08070c;border-radius:14px;box-shadow:0 12px 28px -10px var(--y-glow);min-width:200px}.tr-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#08070c;box-shadow:0 0 8px #08070c99;animation:trDot 1.6s ease-in-out infinite;align-self:flex-start}@keyframes trDot{0%,to{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}.tr-status-l{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;opacity:.7}.tr-status-v{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.15}.tr-scene{position:relative;height:280px;overflow:hidden;background:linear-gradient(180deg,#1a0f08,#2a1d10 35%,#50281a 55%,#0a0a14);border-bottom:1px solid var(--line)}.tr-sky{position:absolute;inset:0 0 40%;background:radial-gradient(ellipse 70% 80% at 80% 25%,rgba(255,205,5,.22),transparent 55%),linear-gradient(180deg,#2a1d10 0%,#50281a 60%,transparent 100%)}.tr-sun{position:absolute;top:8%;right:12%;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,205,5,.95) 0%,rgba(252,180,36,.5) 30%,rgba(255,205,5,.1) 60%,transparent 80%);filter:blur(2px);animation:trSun 6s ease-in-out infinite}@keyframes trSun{0%,to{transform:scale(1);opacity:.95}50%{transform:scale(1.08);opacity:1}}.tr-sea{position:absolute;inset:60% 0 0;background:linear-gradient(180deg,#0a080f66,#08070cd9 60%,#08070c);overflow:hidden}.tr-wave{position:absolute;left:-10%;right:-10%;height:24px;background-repeat:repeat-x;background-size:200px 24px;pointer-events:none}.tr-wave-1{bottom:24%;background-image:radial-gradient(ellipse 100px 12px at center,rgba(255,205,5,.18),transparent 60%);animation:trWaveDrift 18s linear infinite reverse}.tr-wave-2{bottom:14%;background-image:radial-gradient(ellipse 120px 14px at center,rgba(255,205,5,.24),transparent 60%);animation:trWaveDrift 12s linear infinite}.tr-wave-3{bottom:4%;background-image:radial-gradient(ellipse 140px 16px at center,rgba(255,205,5,.3),transparent 60%);animation:trWaveDrift 8s linear infinite reverse}@keyframes trWaveDrift{to{transform:translate(200px)}}.tr-port{position:absolute;bottom:18%;width:60px;text-align:center}.tr-port svg{width:100%;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}.tr-port-left{left:6%}.tr-port-right{right:6%}.tr-port-l{display:block;margin-top:2px;font-family:var(--font-mono);font-size:9.5px;color:var(--y);letter-spacing:.14em}.tr-actor{position:absolute;top:38%;width:200px;height:70px;z-index:3;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}.tr-actor svg{width:100%;height:100%}.tr-scene-pickup .tr-actor{left:6%;animation:trActorBounce 1.6s ease-in-out infinite}.tr-scene-transit .tr-actor{left:50%;transform:translate(-50%);top:35%;animation:trActorBounce 2.2s ease-in-out infinite}.tr-scene-sailing .tr-actor{left:50%;transform:translate(-50%);animation:trActorSail 3.2s ease-in-out infinite}.tr-scene-port_arriving .tr-actor{right:8%;left:auto;animation:trActorBob 2.4s ease-in-out infinite}.tr-scene-delivery_process .tr-actor{left:-22%;animation:trActorDrive 9s linear infinite}.tr-scene-customer_confirmed .tr-actor{left:50%;transform:translate(-50%);top:30%;animation:trActorBounce 1.4s ease-in-out infinite}@keyframes trActorSail{0%,to{transform:translate(-50%) translateY(0) rotate(-1.2deg)}50%{transform:translate(-50%) translateY(-6px) rotate(1.2deg)}}@keyframes trActorBob{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(.6deg)}}@keyframes trActorBounce{0%,to{transform:translate(0) translateY(0)}50%{transform:translate(0) translateY(-4px)}}@keyframes trActorBounce2{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-4px)}}.tr-scene-transit .tr-actor,.tr-scene-customer_confirmed .tr-actor{animation-name:trActorBounce2}@keyframes trActorDrive{0%{transform:translate(-22%)}to{transform:translate(120vw)}}.tr-arc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.tr-arc-fill{stroke-dasharray:1000;stroke-dashoffset:1000}.tr-scene-pickup .tr-arc-fill{stroke-dashoffset:1000}.tr-scene-transit .tr-arc-fill{stroke-dashoffset:800}.tr-scene-sailing .tr-arc-fill{stroke-dashoffset:500;animation:trArcPulse 3s ease-in-out infinite}.tr-scene-port_arriving .tr-arc-fill{stroke-dashoffset:100}.tr-scene-delivery_process .tr-arc-fill{stroke-dashoffset:0}.tr-scene-customer_confirmed .tr-arc-fill{stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(74,222,128,.6));stroke:#4ade80}@keyframes trArcPulse{0%,to{opacity:.85}50%{opacity:1;filter:drop-shadow(0 0 6px rgba(255,205,5,.6))}}.tr-scene-pickup .tr-arc,.tr-scene-transit .tr-arc{opacity:.45}.tr-scene[data-theme-actor=container]:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,205,5,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,205,5,.05) 1px,transparent 1px);background-size:36px 36px;pointer-events:none;z-index:1;mask-image:radial-gradient(ellipse 70% 50% at 50% 60%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 50% at 50% 60%,#000 30%,transparent 80%)}.tr-scene[data-theme-actor=container].tr-scene-port_arriving .tr-actor{left:50%;right:auto;transform:translate(-50%);top:14%;width:240px;height:84px;animation:trGantry 3.4s ease-in-out infinite}@keyframes trGantry{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-4px)}}.tr-scene[data-theme-actor=container].tr-scene-sailing .tr-actor{width:260px;height:88px}.tr-scene[data-theme-actor=container].tr-scene-pickup .tr-actor,.tr-scene[data-theme-actor=container].tr-scene-delivery_process .tr-actor{width:220px;height:78px}.tr-timeline{list-style:none;margin:0;padding:32px 36px;display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-bottom:1px solid var(--line);background:var(--bg-card);position:relative}.tr-tl-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 8px;text-align:center}.tr-tl-step:not(:last-child):after{content:"";position:absolute;top:16px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:var(--line);z-index:0}.tr-tl-done:not(:last-child):after,.tr-tl-now:not(:last-child):after{background:var(--y)}.tr-tl-node{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg-card);border:2px solid var(--line);z-index:1;transition:transform .2s ease}.tr-tl-done .tr-tl-node{background:var(--y);border-color:var(--y);color:#08070c}.tr-tl-done .tr-tl-node svg{width:18px;height:18px}.tr-tl-now .tr-tl-node{background:var(--bg-card);border-color:var(--y);box-shadow:0 0 0 4px #ffcd052e}.tr-tl-pulse{width:14px;height:14px;border-radius:50%;background:var(--y);box-shadow:0 0 #ffcd05b3;animation:trPulse 1.6s ease-in-out infinite}@keyframes trPulse{0%{box-shadow:0 0 #ffcd0599}70%{box-shadow:0 0 0 12px #ffcd0500}to{box-shadow:0 0 #ffcd0500}}.tr-tl-wait .tr-tl-node{background:transparent}.tr-tl-num{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);font-weight:600}.tr-tl-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.tr-tl-short{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em}.tr-tl-now .tr-tl-short,.tr-tl-done .tr-tl-short{color:var(--ink)}.tr-tl-date{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.02em}.tr-tl-now .tr-tl-date{color:var(--y)}.tr-events{padding:28px 36px 8px}.tr-events-head{margin-bottom:16px}.tr-events-head .mono{font-size:11px;color:var(--y);letter-spacing:.14em}[data-theme=light] .tr-events-head .mono{color:#b8761d}.tr-events-list{list-style:none;margin:0;padding:0}.tr-ev{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line);position:relative}.tr-ev:last-child{border-bottom:0}.tr-ev-dot{width:12px;height:12px;border-radius:50%;background:var(--bg-card);border:2px solid var(--line);margin-top:4px;align-self:flex-start;transition:all .2s ease}.tr-ev-done .tr-ev-dot{background:var(--y);border-color:var(--y)}.tr-ev-now .tr-ev-dot{background:var(--y);border-color:var(--y);box-shadow:0 0 0 4px #ffcd0533}.tr-ev-body{display:flex;flex-direction:column;gap:4px;min-width:0}.tr-ev-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}.tr-ev-label{font-size:15px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em}.tr-ev-done .tr-ev-label,.tr-ev-now .tr-ev-label{color:var(--ink)}.tr-ev-date{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);letter-spacing:.02em;white-space:nowrap}.tr-ev-now .tr-ev-date{color:var(--y)}.tr-ev-sub{font-size:13.5px;color:var(--ink-3);line-height:1.5}.tr-ev-now .tr-ev-sub{color:var(--ink-2)}.tr-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 36px 28px;border-top:1px solid var(--line);flex-wrap:wrap}.tr-wa{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:12px;font-weight:700;font-size:14px;letter-spacing:.01em;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;box-shadow:0 8px 24px -8px #128c7e8c,inset 0 1px #ffffff2e}.tr-wa:hover{transform:translateY(-2px);box-shadow:0 12px 32px -8px #128c7eb3,inset 0 1px #ffffff38;filter:brightness(1.06)}.tr-wa svg{width:18px;height:18px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}.tr-foot .tr-close-btn{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}.tr-foot .tr-close-btn:hover{color:var(--y);border-color:var(--y);background:var(--ghost-bg)}@media(max-width:980px){.tr-head{grid-template-columns:1fr}.tr-head-right{justify-content:flex-start}.tr-status-pill{min-width:auto;align-self:flex-start}.tr-timeline{padding:24px 20px}.tr-tl-short{font-size:11.5px}.tr-tl-date{font-size:9.5px}.tr-events{padding:24px 20px 8px}.tr-foot{padding:20px}.tr-head{padding:26px 24px 22px}.tr-meta-row{gap:18px}}@media(max-width:640px){.tr-scene{height:200px}.tr-actor{width:140px;height:50px}.tr-sun{width:90px;height:90px}.tr-port{width:40px}.tr-timeline{grid-template-columns:repeat(3,1fr);gap:18px 8px}.tr-tl-step:nth-child(3n):after{display:none}.tr-tl-step:not(:last-child):after{left:calc(50% + 18px);right:calc(-50% + 18px)}.tr-vehicle{gap:10px}.tr-vehicle-reg,.tr-vehicle-model{font-size:18px}.tr-status-v{font-size:15px}.tr-ev-head{flex-direction:column;gap:4px;align-items:flex-start}}[data-theme=light] .tr-scene{background:linear-gradient(180deg,#ffeac4,#ffba6b 40%,#5e3b22,#2a1d10)}[data-theme=light] .tr-status-pill{box-shadow:0 12px 28px -10px #fcb4248c}
