/* 运单轨迹查询 - 前端样式（浅墨绿主题）
   设计目标：专业物流轨迹跟踪，移动端优先，兼容 IE11（不使用 CSS 变量/grid/gap）

   主题色（浅墨绿）：
     主色      #10805f      主色深    #0a5f47      主色亮     #17a077
     浅色底    #eaf7f1      更浅底    #f1faf6      浅色描边   #cfe9dd
     页面底    #f4f9f6      分隔线    #e6f1ec
     正文      #17251f      次要文字  #6b8a7d / #9db3aa
*/

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body.track {
    background: #f4f9f6;
    color: #17251f;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

/* 独立打开时：整页撑满，页脚贴底
   放在 @supports 里，IE11 不支持 @supports 会整段跳过，自动退回普通流式布局 */
@supports (display: flex) {
    html { height: 100%; }
    body.track { min-height: 100%; }

    body.track:not(.track-embed) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    body.track:not(.track-embed) .tk-main {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100%;
    }

    body.track:not(.track-embed) .tk-foot { margin-top: auto; padding-top: 28px; }
}

/* 被父页 iframe 嵌入时：
   - 不重复渲染页脚
   - 内层不再加左右内边距，保证卡片宽度与父页完全一致 */
body.track-embed .tk-foot { display: none; }

body.track-embed .tk-main {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

body.track-embed { background: transparent; }
body.track-embed .tk-card { box-shadow: none; border: 1px solid #e6f1ec; }

body.track a { color: #10805f; text-decoration: none; }

/* ---------- 顶部品牌区 ---------- */
.tk-hero {
    background: #0a5f47;
    background: -webkit-linear-gradient(135deg, #0a5f47 0%, #17a077 100%);
    background: linear-gradient(135deg, #0a5f47 0%, #17a077 100%);
    color: #ffffff;
    padding: 26px 18px 64px 18px;
    position: relative;
    overflow: hidden;
}

.tk-hero:after {
    content: "";
    position: absolute;
    right: -40px;
    top: -60px;
    width: 180px;
    height: 180px;
    border-radius: 90px;
    background: rgba(255, 255, 255, 0.10);
}

.tk-hero-inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.tk-brand {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.3;
    word-break: break-all;
}

.tk-brand-sub {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.86);
}

/* ---------- 主体容器 ---------- */
.tk-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 14px 30px 14px;
}

.tk-pull { margin-top: -46px; position: relative; z-index: 3; }

/* ---------- 卡片 ---------- */
.tk-card {
    background: #ffffff;
    border-radius: 14px;
    -webkit-box-shadow: 0 2px 12px rgba(10, 70, 53, 0.08);
    box-shadow: 0 2px 12px rgba(10, 70, 53, 0.08);
    padding: 16px;
    margin-bottom: 14px;
}

.tk-card-head {
    display: block;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e6f1ec;
    font-size: 15px;
    font-weight: 700;
    color: #17251f;
}

.tk-card-head .tk-head-right {
    float: right;
    font-size: 13px;
    font-weight: 400;
    color: #6b8a7d;
}

.tk-card-head:after { content: ""; display: block; clear: both; }

/* ---------- 查询表单 ---------- */
.tk-search-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.tk-input-wrap {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    position: relative;
}

.tk-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #dcebe4;
    border-radius: 10px;
    background: #f7fbf9;
    color: #17251f;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    -webkit-appearance: none;
}

.tk-input:focus {
    border-color: #10805f;
    background: #ffffff;
    -webkit-box-shadow: 0 0 0 3px rgba(16, 128, 95, 0.14);
    box-shadow: 0 0 0 3px rgba(16, 128, 95, 0.14);
}

.tk-btn {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    height: 46px;
    margin-left: 10px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: #10805f;
    background: -webkit-linear-gradient(top, #17a077 0%, #10805f 100%);
    background: linear-gradient(180deg, #17a077 0%, #10805f 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    -webkit-box-shadow: 0 2px 8px rgba(16, 128, 95, 0.26);
    box-shadow: 0 2px 8px rgba(16, 128, 95, 0.26);
}

.tk-btn:active {
    background: #0a5f47;
    background: -webkit-linear-gradient(top, #10805f 0%, #0a5f47 100%);
    background: linear-gradient(180deg, #10805f 0%, #0a5f47 100%);
}

.tk-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #9db3aa;
}

.tk-alert {
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    display: none;
}

/* ---------- 最近查询 ---------- */
.tk-chips { padding-top: 12px; }

.tk-chip {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 6px 13px;
    border: 1px solid #cfe9dd;
    border-radius: 999px;
    background: #eaf7f1;
    color: #0a5f47;
    font-size: 13px;
    cursor: pointer;
}

/* ---------- 状态卡 ---------- */
.tk-status {
    border-left: 5px solid #10805f;
    border-radius: 14px;
}

.tk-status.is-done { border-left-color: #10805f; }
.tk-status.is-moving { border-left-color: #2563eb; }
.tk-status.is-new { border-left-color: #a9bdb5; }
.tk-status.is-error { border-left-color: #dc2626; }

.tk-status-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.tk-status-text {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    font-size: 19px;
    font-weight: 700;
    color: #17251f;
    line-height: 1.35;
    word-break: break-all;
}

.tk-pill {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-left: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #eaf7f1;
    color: #0a5f47;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* 已签收：实心主色，一眼可辨 */
.tk-pill.is-done { background: #10805f; color: #ffffff; }
.tk-pill.is-moving { background: #eff6ff; color: #2563eb; }
.tk-pill.is-new { background: #f1f5f4; color: #6b8a7d; }
.tk-pill.is-error { background: #fef2f2; color: #b91c1c; }

.tk-status-time {
    margin-top: 6px;
    font-size: 13px;
    color: #6b8a7d;
}

.tk-ydno {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #dcebe4;
    font-size: 13px;
    color: #6b8a7d;
}

.tk-ydno b { color: #17251f; font-size: 15px; letter-spacing: 0.4px; }

.tk-copy {
    margin-left: 8px;
    padding: 2px 9px;
    border: 1px solid #cfe9dd;
    border-radius: 6px;
    background: #f7fbf9;
    color: #10805f;
    font-size: 12px;
    cursor: pointer;
}

/* ---------- 时间轴 ---------- */
.tk-timeline {
    list-style: none;
    margin: 0;
    padding: 14px 0 0 0;
}

.tk-node {
    position: relative;
    padding: 0 0 20px 26px;
}

.tk-node:last-child { padding-bottom: 2px; }

.tk-node:before {
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: -2px;
    width: 2px;
    background: #e2efe9;
}

.tk-node:last-child:before { display: none; }

.tk-node:after {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #bfd4cb;
    border: 2px solid #ffffff;
    -webkit-box-shadow: 0 0 0 1px #dcebe4;
    box-shadow: 0 0 0 1px #dcebe4;
}

.tk-node.is-first:after {
    background: #10805f;
    -webkit-box-shadow: 0 0 0 4px rgba(16, 128, 95, 0.18);
    box-shadow: 0 0 0 4px rgba(16, 128, 95, 0.18);
}

.tk-node.is-first.is-moving:after {
    background: #2563eb;
    -webkit-box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.tk-node.is-first.is-error:after {
    background: #dc2626;
    -webkit-box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18);
}

.tk-node-time {
    font-size: 12px;
    color: #9db3aa;
    letter-spacing: 0.2px;
}

.tk-node-text {
    margin-top: 3px;
    font-size: 14px;
    color: #3d5148;
    word-break: break-all;
}

.tk-node.is-first .tk-node-text {
    color: #17251f;
    font-weight: 600;
}

/* ---------- 信息网格 ---------- */
.tk-grid { padding-top: 6px; }

.tk-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 9px 0;
    border-bottom: 1px solid #f1f7f4;
}

.tk-row:last-child { border-bottom: 0; }

.tk-row-label {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 84px;
            flex: 0 0 84px;
    color: #9db3aa;
    font-size: 13px;
}

.tk-row-value {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    color: #17251f;
    font-size: 14px;
    word-break: break-all;
}

.tk-cols .tk-col {
    display: inline-block;
    width: 50%;
    padding: 9px 8px 9px 0;
    vertical-align: top;
}

.tk-col-label { color: #9db3aa; font-size: 12px; }
.tk-col-value { color: #17251f; font-size: 15px; font-weight: 600; word-break: break-all; }

/* ---------- 签收图片 ---------- */
.tk-imgbox { padding-top: 12px; text-align: center; }
.tk-imgbox img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid #e6f1ec;
}

/* ---------- 空状态 ---------- */
.tk-empty {
    text-align: center;
    padding: 46px 20px;
}

.tk-empty-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    background: #eaf7f1;
    color: #10805f;
    font-size: 34px;
    line-height: 74px;
    font-weight: 700;
}

.tk-empty-title { font-size: 17px; font-weight: 700; color: #17251f; }
.tk-empty-sub { margin-top: 8px; font-size: 13px; color: #9db3aa; line-height: 1.7; }

/* ---------- 加载 ---------- */
.tk-loading {
    text-align: center;
    padding: 34px 0;
    color: #9db3aa;
    font-size: 13px;
}

.tk-spinner {
    width: 26px;
    height: 26px;
    margin: 0 auto 12px auto;
    border: 3px solid #cfe9dd;
    border-top-color: #10805f;
    border-radius: 50%;
    -webkit-animation: tk-spin 0.8s linear infinite;
    animation: tk-spin 0.8s linear infinite;
}

@-webkit-keyframes tk-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes tk-spin { to { transform: rotate(360deg); } }

/* ---------- 结果区（iframe 承载） ---------- */
.tk-result-frame {
    display: block;
    width: 100%;
    height: 300px;
    border: 0;
    background: transparent;
}

.tk-foot {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    color: #a9bdb5;
    line-height: 1.8;
}