/* ==================== 全局 ==================== */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --p:#2563eb;--ph:#1d4ed8;--s:#10b981;--d:#ef4444;--w:#f59e0b;
  --bg:#f1f5f9;--c:#fff;--t:#1e293b;--t2:#64748b;--b:#e2e8f0;
  --r:12px;--sh:0 4px 6px -1px rgba(0,0,0,.1);
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--t);line-height:1.6;min-height:100vh;}
.container{max-width:720px;margin:0 auto;padding:18px;}

/* ==================== 头部 ==================== */
.header{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border-radius:var(--r);padding:30px 22px;margin-bottom:16px;text-align:center;box-shadow:0 10px 25px -5px rgba(37,99,235,.35);}
.header-main{background:linear-gradient(135deg,#059669,#0891b2);box-shadow:0 10px 25px -5px rgba(5,150,105,.35);}
.logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px;}
.logo-icon{font-size:38px;}
.header h1{font-size:1.85rem;font-weight:700;}
.subtitle{opacity:.9;font-size:.88rem;margin-top:2px;}
.header-stats{margin-top:10px;font-size:.82rem;opacity:.85;}

/* ==================== 标签导航 ==================== */
.tab-nav{display:flex;gap:4px;background:var(--c);border-radius:var(--r);padding:5px;margin-bottom:16px;box-shadow:var(--sh);}
.tab-btn{flex:1;padding:11px;border:none;background:transparent;border-radius:8px;font-size:.92rem;font-weight:600;cursor:pointer;transition:.2s;color:var(--t2);}
.tab-btn:hover{background:var(--bg);}
.tab-btn.active{background:var(--p);color:#fff;box-shadow:0 2px 6px rgba(37,99,235,.25);}

/* 面板 */
.tab-panel{display:none;animation:fadeIn .2s ease;}
.tab-panel.active{display:block;}

/* 区块通用 */
section{background:var(--c);border-radius:var(--r);padding:20px;margin-bottom:14px;box-shadow:var(--sh);}
h2{font-size:1.15rem;margin-bottom:14px;display:flex;align-items:center;gap:7px;}

/* 表单 */
.form-group{margin-bottom:13px;}
.form-group label{display:block;margin-bottom:4px;font-weight:600;font-size:.87rem;color:var(--t);}
.text-input,.select-input,.textarea-input{width:100%;padding:10px 13px;border:2px solid var(--b);border-radius:8px;font-size:.92rem;transition:.2s;background:#fff;}
.text-input:focus,.select-input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.form-row{display:flex;gap:12px;}
.form-row .form-group{flex:1;}
.form-section{border:1px solid var(--b);border-radius:10px;padding:16px 18px;margin-bottom:14px;background:#fafbfc;}
.fs-title{font-size:.98rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;}
.form-actions{display:flex;justify-content:center;gap:12px;margin-top:6px;}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:10px 20px;border:none;border-radius:8px;font-size:.92rem;font-weight:600;cursor:pointer;transition:.2s;width:100%;}
.btn-primary{background:linear-gradient(135deg,var(--p),#7c3aed);color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.3);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 15px rgba(37,99,235,.4);}
.btn-secondary{background:var(--bg);color:var(--t);border:2px solid var(--b);}
.btn-secondary:hover{background:var(--b);}
.btn-add{background:linear-gradient(135deg,var(--s),#059669);color:#fff;}
.btn-add:hover{box-shadow:0 3px 10px rgba(16,185,129,.35);}
.btn-cancel{background:var(--bg);color:var(--t);} .btn-cancel:hover{background:var(--b);}
.btn-danger{background:var(--d);color:#fff;} .btn-danger:hover{background:#dc2626;}
.btn-clear{background:transparent;color:var(--d);border:1px solid var(--d);} .btn-clear:hover{background:var(--d);color:#fff;}
.btn-sm{padding:6px 13px;font-size:.82rem;width:auto;}
.btn-xs{padding:4px 9px;font-size:.76rem;width:auto;}
.btn-edit{background:var(--w);color:#fff;} .btn-edit:hover{background:#d97706;}
.btn-link{background:none;border:none;color:var(--p);cursor:pointer;font-size:.86rem;padding:3px 7px;} .btn-link:hover{text-decoration:underline;}
.text-input-large{width:100%;padding:15px 17px;border:2.5px solid var(--b);border-radius:12px;font-size:1.1rem;text-align:center;letter-spacing:1.5px;}
.text-input-large:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 4px rgba(37,99,235,.12);}
.btn-large{padding:15px;font-size:1.08rem;border-radius:10px;}

/* 查询区 */
.query-section{text-align:center;}

/* 结果区 */
.result-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.result-toolbar h3{margin-bottom:0;font-size:1.08rem;}
.result-section h3{font-size:1.08rem;}

/* 订单信息卡 */
.order-info-card{background:linear-gradient(135deg,#f0f9ff,#eef2ff);border:2px solid #bfdbfe;border-radius:13px;padding:20px;margin-bottom:14px;}
.order-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.order-label{font-size:.84rem;color:var(--t2);}
.order-number-display{font-family:'Courier New',monospace;background:var(--p);color:#fff;padding:6px 15px;border-radius:9px;font-size:1rem;font-weight:800;letter-spacing:1.5px;}
.order-meta{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.meta-item{display:flex;gap:6px;font-size:.91rem;}
.meta-label{color:var(--t2);white-space:nowrap;} .meta-value{font-weight:600;}
.order-status-area{text-align:center;}

/* 状态标签 */
.status-badge-large{display:inline-block;padding:10px 26px;border-radius:26px;font-size:1.04rem;font-weight:800;letter-spacing:1px;transition:.2s;}
.status-transit{background:#dbeafe;color:#1d4ed8;}
.status-delivered{background:#d1fae5;color:#059669;}
.status-pending{background:#fef3c7;color:#d97706;}
.status-exception{background:#fee2e2;color:#dc2626;}

/* 时间线 */
.timeline-card{border:1px solid var(--b);border-radius:13px;padding:20px;margin-bottom:14px;}
.timeline-card h3{font-size:.98rem;margin-bottom:14px;}
.tracking-timeline{position:relative;padding-left:28px;}
.tracking-timeline::before{content:'';position:absolute;left:10px;top:0;bottom:3px;width:3px;background:linear-gradient(to bottom,var(--p),#c7d2fe);border-radius:3px;}
.timeline-item{position:relative;padding-bottom:19px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:'';position:absolute;left:-23px;top:5px;width:12px;height:12px;border-radius:50%;background:#94a3b8;border:3px solid #fff;box-shadow:0 0 0 2px var(--b);}
.timeline-item.current::before{background:var(--s);box-shadow:0 0 0 4px rgba(16,185,129,.25),0 0 0 2px var(--s);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(16,185,129,.25);}50%{box-shadow:0 0 0 8px rgba(16,185,129,.1);}}
.timeline-date{font-size:.81rem;color:var(--t2);margin-bottom:2px;}
.timeline-content{font-weight:700;font-size:.94rem;line-height:1.5;}
.timeline-location{font-size:.84rem;color:var(--t2);margin-top:2px;}

/* 备注 */
.note-card{background:#fefce8;border:2px solid #fde68a;border-radius:13px;padding:16px;margin-bottom:14px;}
.note-card h3{font-size:.93rem;margin-bottom:7px;color:#854d0e;}
.note-card p{font-size:.91rem;line-height:1.7;color:#a16207;}

/* 操作区 */
.action-area{text-align:center;margin-top:16px;display:flex;flex-direction:column;gap:9px;align-items:center;}

/* 本地历史 */
.local-history{margin-top:16px;padding-top:14px;border-top:1px dashed var(--b);}
.local-history h3{font-size:.88rem;color:var(--t2);margin-bottom:8px;}
.history-tag{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fff;border-radius:8px;margin-bottom:6px;cursor:pointer;border:1px solid var(--b);transition:.15s;}
.history-tag:hover{border-color:var(--p);background:#eff6ff;}
.tag-number{font-family:'Courier New',monospace;font-weight:700;font-size:.92rem;color:var(--p);}
.sd{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.sd-t{background:var(--p);} .sd-d{background:var(--s);} .sd-p{background:var(--w);} .sd-e{background:var(--d);}
.tag-time{font-size:.76rem;color:var(--t2);margin-left:auto;}

/* 未找到 */
.not-found{text-align:center;padding:38px 20px;}
.not-found-icon{font-size:58px;margin-bottom:12px;}
.not-found h2{font-size:1.25rem;margin-bottom:10px;color:var(--t);}
.not-found p{color:var(--t2);font-size:.9rem;margin-bottom:5px;}

/* ========== 录入表单 - 轨迹编辑器 ========== */
.tpl-chips-wrap{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:9px;padding:12px 14px;margin-bottom:12px;}
.tpl-chips{display:flex;gap:7px;flex-wrap:wrap;}
.chip{padding:7px 15px;border:2px solid var(--s);background:#fff;border-radius:18px;cursor:pointer;font-size:.83rem;font-weight:600;color:var(--s);transition:.15s;}
.chip:hover{background:var(--s);color:#fff;}
.chip-warn{border-color:var(--d);color:var(--d);} .chip-warn:hover{background:var(--d);color:#fff;}

.tl-row{background:#fff;border:1px solid var(--b);border-radius:9px;padding:13px 15px;margin-bottom:9px;transition:.15s;}
.tl-row:hover{border-color:var(--p);}
.tl-row-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:.84rem;font-weight:600;color:var(--p);}
.tl-row-idx{background:#eff6ff;padding:2px 9px;border-radius:10px;font-size:.8rem;}

/* ========== 订单列表 ========== */
.header-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.search-input{padding:8px 13px;border:2px solid var(--b);border-radius:8px;font-size:.86rem;width:170px;transition:.2s;}
.search-input:focus{outline:none;border-color:var(--p);}
.filter-sel{padding:8px 11px;border:2px solid var(--b);border-radius:8px;font-size:.86px;transition:.2s;}
.filter-sel:focus{outline:none;border-color:var(--p);}

.order-list{}
.order-row{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid var(--b);border-radius:10px;margin-bottom:8px;transition:.15s;cursor:pointer;}
.order-row:hover{border-color:var(--p);background:#eff6ff;}
.or-num{font-family:'Courier New',monospace;font-weight:700;color:var(--p);font-size:.9rem;min-width:120px;}
.or-product{flex:1;font-size:.87rem;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.or-status{flex-shrink:0;}
.or-st-tag{padding:4px 11px;border-radius:12px;font-size:.75rem;font-weight:600;}
.or-actions{display:flex;gap:5px;flex-shrink:0;}
.manage-bottom-bar{display:flex;justify-content:center;gap:12px;padding:14px 0 0;margin-top:8px;border-top:1px dashed var(--b);}

.empty-state{text-align:center;padding:36px 18px;}
.empty-icon{font-size:46px;margin-bottom:8px;}
.empty-state h3{font-size:1.1rem;margin-bottom:5px;} .empty-state p{color:var(--t2);font-size:.88rem;}

/* 弹窗 */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:999;animation:fadeIn .15s ease;padding:20px;}
.modal{background:#fff;border-radius:var(--r);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 30px rgba(0,0,0,.2);}
.modal-sm{max-width:420px;}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--b);}
.modal-header h3{font-size:1.06rem;}
.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:var(--t2);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.15s;}
.close-btn:hover{background:var(--bg);color:var(--t);}
.modal-body{padding:20px;}
.modal-footer{display:flex;justify-content:flex-end;gap:9px;padding:16px 20px;border-top:1px solid var(--b);}

/* Toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);background:#1e293b;color:#fff;padding:12px 24px;border-radius:10px;font-weight:600;z-index:1999;opacity:0;transition:.25s all;box-shadow:0 8px 24px rgba(0,0,0,.2);}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
.toast.success{background:var(--s);} .toast.error{background:var(--d);}

/* 页脚 */
.footer{text-align:center;padding:20px;color:var(--t2);font-size:.82rem;}

/* 动画 */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* 响应式 */
@media(max-width:520px){
  .container{padding:12px;}
  .header{padding:22px 14px;} .header h1{font-size:1.45rem;}
  .tab-nav{flex-direction:column;} .form-row{flex-direction:column;}
  .order-header{flex-direction:column;align-items:flex-start;}
  .header-actions{flex-direction:column;align-items:stretch;}
  .search-input{width:100%;}
  .order-row{flex-direction:column;align-items:flex-start;}
  .or-num{min-width:auto;}
}