:root{--surat-black: #111;--surat-text: #171717;--surat-muted: #737373;--surat-light: #a3a3a3;--surat-border: #e5e5e5;--surat-bg: #fafafa;--surat-card-bg: #fff;--surat-success: #16a34a;--surat-warning: #d97706;--surat-danger: #dc2626;--surat-radius: 8px;--surat-shadow: 0 1px 3px rgba(0,0,0,.06);--surat-transition: .2s ease}.surat-tracking-wrap{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--surat-text);line-height:1.5;margin:0}.surat-tracking-wrap *,.surat-tracking-wrap *:before,.surat-tracking-wrap *:after{box-sizing:border-box}.surat-status-card{background:var(--surat-card-bg);border:1px solid var(--surat-border);border-radius:var(--surat-radius);padding:0;margin-bottom:16px;box-shadow:var(--surat-shadow);overflow:hidden}.surat-status-card__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--surat-border);background:var(--surat-bg)}.surat-status-card__title{font-size:14px;font-weight:600;color:var(--surat-black);margin:0;letter-spacing:-.01em;text-transform:uppercase}.surat-status-card__tracking{font-size:13px;font-weight:500;color:var(--surat-muted);font-family:SF Mono,Fira Code,monospace;letter-spacing:.02em}.surat-status-card__body{padding:20px}.surat-status-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;font-size:13px;font-weight:600;letter-spacing:-.01em}.surat-status-badge--delivered{background:#f0fdf4;color:var(--surat-success);border:1px solid #bbf7d0}.surat-status-badge--in-transit{background:#fafafa;color:var(--surat-black);border:1px solid var(--surat-border)}.surat-status-badge__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.surat-status-badge--delivered .surat-status-badge__dot{background:var(--surat-success)}.surat-status-badge--in-transit .surat-status-badge__dot{background:var(--surat-black);animation:surat-pulse 2s infinite}@keyframes surat-pulse{0%,to{opacity:1}50%{opacity:.4}}.surat-estimated-delivery{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--surat-muted)}.surat-estimated-delivery__icon{flex-shrink:0;width:16px;height:16px;color:var(--surat-muted)}.surat-estimated-delivery__date{font-weight:500;color:var(--surat-text)}.surat-progress{position:relative;padding:6px 16px 24px;margin:0}.surat-progress__track{position:absolute;top:22px;left:32px;right:32px;height:4px;background:#e5e5e5;border-radius:2px;z-index:0}.surat-progress__fill{height:100%;background:#111;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1);will-change:width}.surat-progress__steps{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1;padding:0;margin:0;list-style:none}.surat-progress__step{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}.surat-progress__dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;border:2px solid #d4d4d4;margin-bottom:10px;transition:all .3s ease}.surat-progress__step--done .surat-progress__dot{background:#111;border-color:#111}.surat-progress__step--active .surat-progress__dot{background:#111;border-color:#111;animation:surat-active-pulse 2.5s ease-in-out infinite}@keyframes surat-active-pulse{0%,to{box-shadow:0 0 #0000001f}50%{box-shadow:0 0 0 6px #0000}}.surat-progress__label{font-size:10px;font-weight:500;color:#a3a3a3;text-align:center;line-height:1.3;letter-spacing:-.01em;max-width:70px;word-wrap:break-word}.surat-progress__step--done .surat-progress__label,.surat-progress__step--active .surat-progress__label{color:#111;font-weight:600}.surat-timeline{margin:0;padding:0}.surat-timeline__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.surat-timeline__title{font-size:13px;font-weight:600;color:var(--surat-black);margin:0;letter-spacing:-.01em}.surat-timeline__list{list-style:none;margin:0;padding:0;position:relative}.surat-timeline__list:before{content:"";position:absolute;top:0;bottom:0;left:11px;width:1px;background:var(--surat-border)}.surat-timeline__item{position:relative;padding-left:36px;padding-bottom:20px}.surat-timeline__item:last-child{padding-bottom:0}.surat-timeline__item:before{content:"";position:absolute;left:5px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--surat-card-bg);border:2px solid var(--surat-border);z-index:1}.surat-timeline__item:first-child:before{background:var(--surat-black);border-color:var(--surat-black)}.surat-timeline__time{font-size:12px;font-weight:500;color:var(--surat-black);margin:0 0 2px}.surat-timeline__location{font-size:13px;font-weight:500;color:var(--surat-text);margin:0 0 1px}.surat-timeline__desc{font-size:12px;color:var(--surat-muted);margin:0}.surat-timeline__loading{display:flex;align-items:center;gap:12px;padding:20px 0}.surat-timeline__skeleton{display:flex;flex-direction:column;gap:16px}.surat-timeline__skeleton-row{display:flex;gap:10px;align-items:center}.surat-timeline__skeleton-dot{width:13px;height:13px;border-radius:50%;background:var(--surat-border);flex-shrink:0;animation:surat-shimmer 1.5s infinite}.surat-timeline__skeleton-lines{display:flex;flex-direction:column;gap:6px;flex:1}.surat-timeline__skeleton-line{height:12px;border-radius:3px;background:var(--surat-border);animation:surat-shimmer 1.5s infinite}.surat-timeline__skeleton-line:first-child{width:40%}.surat-timeline__skeleton-line:last-child{width:70%}@keyframes surat-shimmer{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.surat-timeline__empty{padding:20px 0;text-align:center;color:var(--surat-muted);font-size:13px}.surat-timeline__error{padding:20px 0;text-align:center;color:var(--surat-danger);font-size:13px}.surat-history-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:12px;font-weight:500;color:var(--surat-black);background:var(--surat-card-bg);border:1px solid var(--surat-border);border-radius:6px;cursor:pointer;transition:all var(--surat-transition);letter-spacing:-.01em;text-decoration:none;line-height:1.4}.surat-history-btn:hover{background:var(--surat-black);color:#fff;border-color:var(--surat-black)}.surat-history-btn:disabled{opacity:.5;cursor:not-allowed}.surat-history-btn__icon{width:14px;height:14px;flex-shrink:0}.surat-history-btn--loading .surat-history-btn__icon{animation:surat-spin .8s linear infinite}@keyframes surat-spin{to{transform:rotate(360deg)}}.surat-accordion{border:1px solid var(--surat-border);border-radius:var(--surat-radius);overflow:hidden;margin-top:16px}.surat-accordion__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;font-size:13px;font-weight:500;color:var(--surat-black);background:var(--surat-bg);border:none;cursor:pointer;text-align:left;letter-spacing:-.01em;transition:background var(--surat-transition)}.surat-accordion__toggle:hover{background:#f5f5f5}.surat-accordion__arrow{width:16px;height:16px;transition:transform .25s ease;flex-shrink:0;color:var(--surat-muted)}.surat-accordion--open .surat-accordion__arrow{transform:rotate(180deg)}.surat-accordion__body{max-height:0;overflow:hidden;transition:max-height .3s ease}.surat-accordion--open .surat-accordion__body{max-height:600px}.surat-accordion__inner{padding:16px 20px;border-top:1px solid var(--surat-border)}.surat-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 24px;font-size:13px}.surat-detail-grid__item{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #f5f5f5}.surat-detail-grid__label{color:var(--surat-muted);white-space:nowrap;flex-shrink:0}.surat-detail-grid__value{font-weight:500;color:var(--surat-text);text-align:right;word-break:break-all}.surat-alert{padding:12px 16px;border-radius:var(--surat-radius);font-size:13px;margin-bottom:12px}.surat-alert--warning{background:#fffbeb;border:1px solid #fde68a;color:#92400e}.surat-alert--info{background:var(--surat-bg);border:1px solid var(--surat-border);color:var(--surat-muted);font-style:italic}@media(max-width:782px){.surat-progress{padding:4px 12px 20px}.surat-progress__track{top:17px;left:21px;right:21px}.surat-progress__label{font-size:9px;max-width:55px}.surat-progress__dot{width:26px;height:26px}.surat-detail-grid{grid-template-columns:1fr}.surat-status-card__header{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 16px}.surat-status-card__body{padding:16px}}@media(max-width:480px){.surat-progress{padding:2px 10px 16px}.surat-progress__track{top:15px;left:17px;right:17px;height:3px}.surat-progress__fill{height:3px}.surat-progress__label{font-size:8px;max-width:45px}.surat-progress__dot{width:22px;height:22px}}