.tracking-page { --track-bg:#111; --track-panel:#1a1a1a; --track-field:#ffffff07; --track-ink:#f4f4f4; --track-muted:#a2a2a2; --track-line:#ffffff20; --track-green:#0cc982; --track-red:#f05a61; min-height:calc(100dvh - var(--site-header-height)); background:var(--track-bg); color:var(--track-ink); }
.tracking-container { width:min(1240px,calc(100% - 80px)); margin-inline:auto; padding:62px 0 80px; }
.tracking-heading { margin-bottom:34px; max-width:800px; }
.tracking-heading h1 { margin:0 0 20px; color:var(--track-ink); font:600 clamp(38px,4.1vw,60px)/1.05 Arial,Helvetica,sans-serif; letter-spacing:-.045em; }
.tracking-heading>p:last-child { color:var(--track-muted); font-size:16px; line-height:1.6; }
.tracking-search,.tracking-admin-card { padding:26px; border:1px solid var(--track-line); border-radius:20px; background:var(--track-panel); }
.tracking-page button,.tracking-page input,.tracking-page select,.tracking-page textarea { font-family:Arial,Helvetica,sans-serif; }
.tracking-tabs { display:flex; gap:8px; margin-bottom:26px; }
.tracking-tabs button { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:12px 17px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--track-muted); font-size:14px; font-weight:500; }
.tracking-tabs button[aria-selected=true] { border-color:#0cc98260; background:#0cc9820c; color:var(--track-ink); }
.tracking-tabs button[aria-selected=true] svg { color:var(--track-green); }
.tracking-page svg { width:20px; height:20px; flex-shrink:0; }
.tracking-page label { display:grid; gap:10px; color:var(--track-muted); font-size:12px; line-height:1.4; min-width:0; }
.tracking-page :is(input,select,textarea) { width:100%; min-width:0; min-height:50px; border:1px solid var(--track-line); border-radius:10px; padding:14px 15px; background:var(--track-field); color:var(--track-ink); font-size:16px; line-height:1.4; }
.tracking-page input::placeholder,.tracking-page textarea::placeholder { color:var(--track-muted); opacity:.7; }
.tracking-page select { color-scheme:dark; }
.tracking-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:14px; }
.tracking-form label { max-width:850px; }
.tracking-page .tracking-primary,.tracking-page .tracking-secondary { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:52px; padding:14px 22px; border:1px solid #0cc98260; border-radius:10px; background:#0cc9821a; color:var(--track-ink); font-size:14px; font-weight:600; line-height:1.5; }
.tracking-page .tracking-primary:hover { background:#0cc9822e; border-color:var(--track-green); }
.tracking-page .tracking-secondary { border-color:var(--track-line); background:var(--track-field); color:var(--track-muted); }
.tracking-page button:disabled { cursor:wait; opacity:.5; }
.tracking-page :is(a,button,input,select,textarea,summary):focus-visible { outline:2px solid var(--track-green); outline-offset:4px; }
.tracking-hint { grid-column:1/-1; color:var(--track-muted); font-size:12px; line-height:1.6; margin:0; }
.tracking-error { margin-top:16px; color:var(--track-red); font-size:14px; line-height:1.5; }
.tracking-results:empty { display:none; }
.tracking-results { margin-top:36px; scroll-margin-top:calc(var(--site-header-height) + 20px); }
.tracking-results-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:22px; }
.tracking-results-heading>div>p { margin-bottom:8px; color:var(--track-muted); font-size:12px; overflow-wrap:anywhere; }
.tracking-results-heading h2 { margin:0; color:var(--track-ink); font:500 28px/1.2 Arial,Helvetica,sans-serif; letter-spacing:-.03em; }
.tracking-results-heading h2 span { color:var(--track-muted); margin-left:8px; font-size:19px; }
.tracking-results-heading>p { color:var(--track-muted); font-size:12px; line-height:1.7; }
.tracking-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.tracking-service-card { display:flex; flex-direction:column; min-width:0; padding:26px; border:1px solid var(--track-line); border-radius:20px; background:var(--track-panel); }
.tracking-card-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.tracking-status { display:inline-flex; align-items:center; gap:7px; width:fit-content; padding:7px 10px; border:1px solid var(--track-line); border-radius:7px; color:var(--track-muted); font-size:11px; line-height:1.4; }
.tracking-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.tracking-status.is-green { color:var(--track-green); border-color:#0cc98240; background:#0cc98209; }
.tracking-status.is-red { color:var(--track-red); border-color:#f05a6140; background:#f05a6109; }
.tracking-ekd { color:var(--track-muted); font:10px/1.4 monospace; overflow-wrap:anywhere; }
.tracking-service-card h3,.tracking-repair-card h3 { margin:0 0 8px; color:var(--track-ink); font:500 26px/1.2 Arial,Helvetica,sans-serif; letter-spacing:-.03em; overflow-wrap:anywhere; }
.tracking-device { margin-bottom:26px; color:var(--track-muted); font-size:13px; line-height:1.5; }
.tracking-period { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.tracking-period>div { display:grid; gap:7px; }
.tracking-period>div>span { color:var(--track-muted); font-size:11px; }
.tracking-period strong { font-size:16px; font-weight:500; }
.tracking-period>span { color:var(--track-muted); }
.tracking-days { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:12px; }
.tracking-days>strong { font-size:35px; line-height:1; font-weight:500; letter-spacing:-.04em; }
.tracking-days>span { color:var(--track-muted); font-size:12px; }
.tracking-days .tracking-duration { margin-left:auto; }
.tracking-progress { height:4px; width:100%; overflow:hidden; border-radius:4px; background:var(--track-line); }
.tracking-progress>span { display:block; height:100%; border-radius:inherit; background:var(--track-green); }
.tracking-service-card[data-state=expired]>.tracking-progress>span,.tracking-service-card[data-state=exhausted]>.tracking-progress>span,.tracking-progress.is-red>span { background:var(--track-red); }
.tracking-service-card[data-state=upcoming]>.tracking-progress>span { background:var(--track-muted); }
.tracking-usage { margin-top:24px; padding-top:20px; border-top:1px solid var(--track-line); }
.tracking-usage>div:first-child { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.tracking-usage>div:first-child>span { color:var(--track-muted); font-size:12px; }
.tracking-usage>div:first-child>strong { font-size:19px; font-weight:500; }
.tracking-usage>p,.tracking-attention { color:var(--track-muted); font-size:12px; line-height:1.6; margin-top:12px; }
.tracking-service-card .tracking-attention { color:var(--track-red); }
.tracking-usage-history { margin-top:16px; font-size:12px; color:var(--track-muted); }
.tracking-usage-history summary { padding-block:5px; cursor:pointer; }
.tracking-usage-history ul { list-style:none; margin-top:8px; padding:0; }
.tracking-usage-history li { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-block:7px; }
.tracking-card-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:auto; padding-top:28px; }
.tracking-card-bottom>span { display:grid; gap:6px; color:var(--track-muted); font-size:11px; }
.tracking-card-bottom strong { color:var(--track-ink); font-size:16px; font-weight:500; }
.tracking-card-bottom a { display:flex; align-items:center; gap:10px; color:var(--track-green); font-size:13px; }
.tracking-card-bottom a svg { width:16px; }
.tracking-demo-mark { display:inline-flex; color:var(--track-muted); border:1px solid var(--track-line); border-radius:5px; padding:4px 7px; font-size:10px; }
.tracking-repair-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.tracking-repair-card,.tracking-timeline-card { min-width:0; border:1px solid var(--track-line); border-radius:20px; background:var(--track-panel); padding:28px; }
.tracking-repair-device { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.tracking-repair-device>svg { width:36px; height:36px; color:var(--track-green); }
.tracking-repair-device h3 { font-size:22px; }
.tracking-repair-device p { color:var(--track-muted); font-size:12px; line-height:1.5; }
.tracking-repair-meta { display:grid; gap:18px; margin-bottom:26px; }
.tracking-repair-meta dt { margin-bottom:7px; color:var(--track-muted); font-size:11px; }
.tracking-repair-meta dd { margin:0; color:var(--track-ink); font-size:14px; line-height:1.6; }
.tracking-eta { padding:20px; margin-bottom:24px; border:1px solid #0cc98238; border-radius:12px; background:#0cc98207; }
.tracking-eta>span,.tracking-public-note>span { display:block; color:var(--track-muted); font-size:11px; margin-bottom:12px; }
.tracking-eta strong { display:block; font-size:clamp(23px,2.1vw,30px); line-height:1.2; letter-spacing:-.03em; font-weight:500; }
.tracking-eta p { color:var(--track-muted); font-size:12px; line-height:1.7; margin-top:12px; }
.tracking-eta[data-eta=overdue] { border-color:#f05a6140; background:#f05a6105; }
.tracking-public-note { margin-bottom:24px; }
.tracking-public-note p { font-size:14px; line-height:1.7; color:var(--track-ink); white-space:pre-line; overflow-wrap:anywhere; }
.tracking-text-link { display:inline-flex; margin-bottom:24px; font-size:13px; color:var(--track-green); }
.tracking-updated { color:var(--track-muted); font-size:11px; }
.tracking-timeline-card>h3 { margin:0 0 28px; font-size:18px; font-weight:500; }
.tracking-timeline { padding:0; margin:0; list-style:none; }
.tracking-timeline li { position:relative; display:flex; gap:18px; padding-bottom:28px; }
.tracking-timeline li:last-child { padding-bottom:0; }
.tracking-timeline li:not(:last-child)::after { content:''; position:absolute; left:13px; top:29px; bottom:3px; border-left:1px solid var(--track-line); }
.tracking-timeline-dot { display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border:1px solid var(--track-line); border-radius:50%; color:var(--track-muted); }
.tracking-timeline-dot svg { width:14px; height:14px; }
.tracking-timeline li[aria-current] .tracking-timeline-dot { color:var(--track-green); border-color:#0cc98270; background:#0cc9820d; }
.tracking-timeline time { color:var(--track-muted); font-size:10px; }
.tracking-timeline h4 { color:var(--track-ink); font-size:14px; font-weight:500; line-height:1.5; margin-top:5px; }
.tracking-timeline p { color:var(--track-muted); font-size:12px; line-height:1.7; white-space:pre-line; overflow-wrap:anywhere; margin-top:7px; }
.tracking-admin .tracking-container { max-width:920px; }
.tracking-admin-notice { margin-bottom:28px; }
.tracking-admin-notice p { color:var(--track-muted); font-size:13px; line-height:1.7; margin-top:12px; }
.tracking-admin-card>select { margin-top:10px; }
#tracking-admin-summary { display:grid; gap:12px; padding-block:24px; color:var(--track-muted); font-size:12px; }
#tracking-admin-summary strong,#tracking-admin-summary span { display:block; line-height:1.6; }
#tracking-admin-summary strong { color:var(--track-ink); font-size:16px; margin-bottom:5px; }
.tracking-admin-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:22px; }
.tracking-admin-fields small { font-size:11px; }
.tracking-admin-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
#tracking-admin-message { color:var(--track-muted); font-size:13px; line-height:1.6; margin-top:18px; }
.tracking-page [hidden] { display:none!important; }
html[data-theme=light] .tracking-page { --track-bg:#f6f7f5; --track-panel:#fff; --track-field:#17211d04; --track-ink:#17211d; --track-muted:#59645e; --track-line:#17211d24; --track-green:#087c51; --track-red:#bf3038; color-scheme:light; }
html[data-theme=light] .tracking-page select { color-scheme:light; }
html[data-theme=light] .tracking-page .tracking-primary { border-color:#087c5160; background:#087c5110; color:#17211d; }
@media(max-width:1100px) { .tracking-container { padding-top:44px; } }
@media(max-width:780px) { .tracking-container { width:calc(100% - 40px); padding-block:32px 48px; } .tracking-heading h1 { font-size:42px; } .tracking-service-grid,.tracking-repair-grid { grid-template-columns:1fr; } .tracking-search { padding:20px; } }
@media(max-width:550px) { .tracking-heading h1 { font-size:37px; } .tracking-heading>p:last-child { font-size:14px; } .tracking-form { grid-template-columns:1fr; } .tracking-tabs { gap:4px; } .tracking-tabs button { flex:1; justify-content:center; padding:12px 8px; gap:6px; font-size:12px; } .tracking-tabs svg { width:17px; height:17px; } .tracking-service-card,.tracking-repair-card,.tracking-timeline-card,.tracking-admin-card { padding:20px; border-radius:16px; } .tracking-admin-fields { grid-template-columns:1fr; } .tracking-results-heading h2 { font-size:25px; } .tracking-card-top { gap:10px; margin-bottom:20px; } .tracking-service-card h3 { font-size:24px; } .tracking-admin-actions>* { width:100%; } .tracking-days>strong { font-size:31px; } }