@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
.wpot-tracker { font-family:'Plus Jakarta Sans',-apple-system,sans-serif; max-width:720px; margin:0 auto; color:#1a1a2e; }
.wpot-tracker__header { background:linear-gradient(135deg,#1a1a2e 0%,#16213e 60%,#0f3460 100%); border-radius:16px 16px 0 0; padding:40px 36px 36px; text-align:center; position:relative; overflow:hidden; }
.wpot-tracker__title { color:#fff; font-size:26px; font-weight:700; margin:0 0 8px; letter-spacing:-.5px; }
.wpot-tracker__subtitle { color:rgba(255,255,255,.6); font-size:14px; margin:0 0 28px; }
.wpot-tracker__input-group { display:flex; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:12px; overflow:hidden; }
.wpot-tracker__input { flex:1; background:transparent; border:none; outline:none; padding:14px 18px; color:#fff; font-size:15px; font-family:inherit; }
.wpot-tracker__input::placeholder { color:rgba(255,255,255,.4); }
.wpot-tracker__btn { background:#e94560; color:#fff; border:none; padding:14px 22px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:8px; transition:background .2s; flex-shrink:0; }
.wpot-tracker__btn:hover { background:#c73652; }
.wpot-tracker__error { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:14px 18px; border-radius:0 0 12px 12px; font-size:14px; display:flex; align-items:center; gap:10px; }
.wpot-tracker__result { background:#fff; border:1px solid #e5e7eb; border-top:none; border-radius:0 0 16px 16px; overflow:hidden; }
.wpot-tracker__order-info { padding:24px 28px; background:#f9fafb; border-bottom:1px solid #e5e7eb; }
.wpot-tracker__order-header { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:18px; }
.wpot-tracker__label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#9ca3af; margin-bottom:4px; }
.wpot-tracker__code { font-size:15px; font-family:monospace; background:#e8f4fd; padding:2px 8px; border-radius:6px; color:#1a56db; }
.wpot-tracker__status { padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; }
.wpot-tracker__status--active    { background:#dcfce7; color:#166534; }
.wpot-tracker__status--completed { background:#dbeafe; color:#1d4ed8; }
.wpot-tracker__status--cancelled { background:#fee2e2; color:#991b1b; }
.wpot-tracker__progress-wrap { display:flex; align-items:center; gap:14px; }
.wpot-tracker__progress-bar { flex:1; height:8px; background:#e5e7eb; border-radius:4px; overflow:hidden; }
.wpot-tracker__progress-fill { height:100%; background:linear-gradient(90deg,#1d4ed8,#0ea5e9); border-radius:4px; transition:width .6s cubic-bezier(.25,.8,.25,1); }
.wpot-tracker__progress-label { font-size:13px; font-weight:700; color:#1d4ed8; flex-shrink:0; min-width:80px; text-align:right; }
.wpot-tracker__vo { display:flex; align-items:center; gap:16px; padding:18px 28px; border-bottom:1px solid #e5e7eb; background:#f8faff; flex-wrap:wrap; }
.wpot-tracker__vo--active        { background:#f0fdf4; }
.wpot-tracker__vo--expiring_soon { background:#fffbf0; }
.wpot-tracker__vo--expired       { background:#fff8f8; }
.wpot-tracker__vo--not_started   { background:#f9fafb; }
.wpot-tracker__vo-icon { font-size:28px; flex-shrink:0; line-height:1; }
.wpot-tracker__vo-body { flex:1; min-width:200px; }
.wpot-tracker__vo-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#9ca3af; margin-bottom:8px; }
.wpot-tracker__vo-dates { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wpot-tracker__vo-date-item { display:flex; flex-direction:column; gap:2px; }
.wpot-tracker__vo-date-label { font-size:11px; color:#9ca3af; font-weight:500; }
.wpot-tracker__vo-date-value { font-size:14px; font-weight:700; color:#111827; }
.wpot-tracker__vo--expired .wpot-tracker__vo-date-value { color:#6b7280; text-decoration:line-through; text-decoration-color:#fca5a5; }
.wpot-tracker__vo-date-sep { font-size:16px; color:#d1d5db; margin-top:12px; }
.wpot-tracker__vo-status-wrap { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.wpot-tracker__vo-badge { padding:5px 14px; border-radius:20px; font-size:12px; font-weight:700; display:inline-block; white-space:nowrap; }
.wpot-tracker__vo-badge--active        { background:#dcfce7; color:#166534; }
.wpot-tracker__vo-badge--expiring_soon { background:#fef3c7; color:#92400e; }
.wpot-tracker__vo-badge--expired       { background:#fee2e2; color:#991b1b; }
.wpot-tracker__vo-badge--not_started   { background:#f3f4f6; color:#6b7280; }
.wpot-tracker__vo-days { font-size:12px; font-weight:600; color:#6b7280; text-align:right; }
.wpot-tracker__vo--expiring_soon .wpot-tracker__vo-days { color:#d97706; }
.wpot-tracker__vo--expired .wpot-tracker__vo-days { color:#dc2626; }
.wpot-tracker__timeline { padding:28px 28px 12px; }
.wpot-tracker__step { display:flex; gap:16px; }
.wpot-tracker__step-indicator { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.wpot-tracker__step-dot { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; border:2px solid #e5e7eb; background:#f9fafb; color:#9ca3af; transition:all .2s; position:relative; z-index:1; }
.wpot-tracker__step--done .wpot-tracker__step-dot        { background:#16a34a; border-color:#16a34a; color:#fff; }
.wpot-tracker__step--in_progress .wpot-tracker__step-dot { background:#fff; border-color:#f59e0b; color:#d97706; box-shadow:0 0 0 4px #fef3c7; animation:wpot-pulse 2s infinite; }
.wpot-tracker__step--skipped .wpot-tracker__step-dot    { background:#f3f4f6; border-color:#d1d5db; color:#9ca3af; }
@keyframes wpot-pulse { 0%,100%{box-shadow:0 0 0 4px #fef3c7} 50%{box-shadow:0 0 0 8px rgba(251,191,36,.15)} }
.wpot-tracker__step-line { width:2px; flex:1; background:#e5e7eb; min-height:24px; margin:4px 0; }
.wpot-tracker__step-body { flex:1; padding-bottom:24px; }
.wpot-tracker__step:last-child .wpot-tracker__step-body { padding-bottom:8px; }
.wpot-tracker__step-header { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:34px; }
.wpot-tracker__step-name { font-size:15px; font-weight:600; color:#111827; }
.wpot-tracker__step--pending .wpot-tracker__step-name { color:#6b7280; font-weight:500; }
.wpot-tracker__step--skipped .wpot-tracker__step-name { color:#9ca3af; text-decoration:line-through; }
.wpot-tracker__step-badge { padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; display:inline-block; }
.wpot-tracker__step-badge--pending     { background:#f3f4f6; color:#6b7280; }
.wpot-tracker__step-badge--in_progress { background:#fef3c7; color:#92400e; }
.wpot-tracker__step-badge--done        { background:#dcfce7; color:#166534; }
.wpot-tracker__step-badge--skipped     { background:#f3f4f6; color:#9ca3af; }
.wpot-tracker__step-meta { font-size:12px; color:#9ca3af; margin-top:4px; }
.wpot-tracker__step-notes { font-size:13px; color:#4b5563; background:#f9fafb; border-left:3px solid #e5e7eb; padding:8px 12px; margin-top:8px; border-radius:0 6px 6px 0; }
@media(max-width:480px){
    .wpot-tracker__header{padding:28px 20px 24px;}
    .wpot-tracker__title{font-size:20px;}
    .wpot-tracker__input-group{flex-direction:column;}
    .wpot-tracker__btn{justify-content:center;}
    .wpot-tracker__order-info,.wpot-tracker__timeline{padding:18px 16px;}
    .wpot-tracker__order-header{grid-template-columns:1fr 1fr;}
    .wpot-tracker__vo{padding:16px;gap:12px;}
    .wpot-tracker__vo-status-wrap{align-items:flex-start;}
}