.customer-orders-page-header {
    position: relative;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 7rem 1.5rem 0;
}
body[data-view="customer-orders"] { overflow-x: hidden; }
.customer-orders-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1rem;
    border: 0;
    background: transparent;
    color: #4f46e5;
    padding: 0;
    font-size: .8rem;
    font-weight: 700;
}
.customer-orders-back svg { width: 1rem; height: 1rem; stroke-width: 2; }
.customer-orders-page-header h1 { margin: 0; color: #111827; font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; letter-spacing: -.035em; }
.customer-orders-page-header p { margin: .45rem 0 0; color: #6b7280; font-size: .95rem; line-height: 1.55; }
.customer-orders-page { display: grid; gap: 1.5rem; color: #111827; }
.customer-auth-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; overflow: hidden; border: 1px solid #dbeafe; border-radius: 1rem; background: linear-gradient(135deg, #eff6ff, #eef2ff); padding: 1.15rem 1.25rem; }
.customer-auth-copy > span { display: block; margin-bottom: .3rem; color: #4f46e5; font-size: .68rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.customer-auth-copy h2 { margin: 0; color: #111827; font-size: 1rem; }
.customer-auth-copy p { margin: .35rem 0 0; color: #64748b; font-size: .76rem; line-height: 1.55; }
.customer-auth-actions { display: flex; align-items: center; gap: .7rem; }
.customer-auth-actions button { border: 0; border-radius: .7rem; background: #4f46e5; color: #fff; padding: .7rem .9rem; font-size: .73rem; font-weight: 800; white-space: nowrap; }
.customer-auth-actions button:disabled { cursor: wait; opacity: .65; }
.customer-auth-user-button { display: grid; place-items: center; min-width: 2rem; min-height: 2rem; }
.customer-auth-state { color: #475569; font-size: .72rem; font-weight: 750; }
.customer-auth-state.is-error { color: #b91c1c; }
.customer-auth-mount { grid-column: 1 / -1; display: grid; place-items: center; border-top: 1px solid rgba(99, 102, 241, .18); padding-top: 1.1rem; }
.customer-auth-mount[hidden] { display: none; }

.customer-track-form {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(150px, .75fr) minmax(180px, .9fr) auto;
    gap: .85rem;
    align-items: end;
    border: 1px solid #c7d2fe;
    border-radius: .9rem;
    background: #eef2ff;
    padding: 1rem;
}
.customer-track-copy strong { display: block; font-size: .9rem; }
.customer-track-copy p { margin: .3rem 0 0; color: #6b7280; font-size: .76rem; line-height: 1.45; }
.customer-track-form label { display: grid; gap: .35rem; color: #4b5563; font-size: .72rem; font-weight: 700; }
.customer-track-form input {
    width: 100%;
    min-height: 2.55rem;
    border: 1px solid #d1d5db;
    border-radius: .55rem;
    background: #fff;
    color: #111827;
    padding: .65rem .75rem;
    font-size: .82rem;
}
.customer-track-form input:focus { border-color: #6366f1; outline: 3px solid rgba(99,102,241,.14); }
.customer-track-form > button {
    min-height: 2.55rem;
    border: 1px solid #4338ca;
    border-radius: .55rem;
    background: #4f46e5;
    color: #fff;
    padding: 0 1rem;
    font-size: .8rem;
    font-weight: 750;
    white-space: nowrap;
}
.customer-track-form > button:hover { background: #4338ca; }
.customer-track-form > small { grid-column: 1 / -1; color: #6b7280; font-size: .7rem; }

.customer-orders-section { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 1rem; background: #fff; }
.customer-orders-section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #e5e7eb; padding: 1rem 1.1rem; }
.customer-orders-section-header h2 { margin: 0; color: #111827; font-size: 1rem; }
.customer-orders-section-header p { margin: .25rem 0 0; color: #6b7280; font-size: .73rem; }
.customer-order-search { display: flex; width: min(260px, 45%); align-items: center; gap: .45rem; border: 1px solid #d1d5db; border-radius: .55rem; padding: 0 .65rem; }
.customer-order-search svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: #9ca3af; stroke-width: 1.8; }
.customer-order-search input { width: 100%; min-height: 2.2rem; border: 0; outline: 0; background: transparent; color: #111827; font-size: .76rem; }
.customer-orders-layout { display: grid; grid-template-columns: 255px minmax(0, 1fr); min-height: 32rem; }
.customer-order-list-panel { border-right: 1px solid #e5e7eb; background: #f9fafb; }
.customer-order-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: .7rem;
    width: 100%;
    align-items: center;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    background: transparent;
    color: #111827;
    padding: .85rem;
    text-align: left;
}
.customer-order-row:hover { background: #fff; }
.customer-order-row.is-selected { background: #eef2ff; box-shadow: inset 3px 0 #4f46e5; }
.customer-order-thumb { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .65rem; background: #e0e7ff; color: #4338ca; font-size: .72rem; font-weight: 900; }
.customer-order-row-main strong,
.customer-order-row-main code,
.customer-order-row-main small,
.customer-order-row-value strong,
.customer-order-row-value small { display: block; }
.customer-order-row-main strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-order-row-main code { margin-top: .2rem; color: #6b7280; font-size: .65rem; }
.customer-order-row-main small { margin-top: .35rem; color: #4f46e5; font-size: .66rem; font-weight: 700; }
.customer-order-row-value { align-self: start; text-align: right; }
.customer-order-row-value strong { font-size: .72rem; }
.customer-order-row-value small { margin-top: 1.15rem; color: #6b7280; font-size: .62rem; }
.customer-orders-empty { margin: 0; padding: 2rem 1rem; color: #6b7280; font-size: .76rem; line-height: 1.55; text-align: center; }

.customer-order-detail { min-width: 0; padding: 1.25rem; }
.customer-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.customer-detail-header h2 { margin: 0; font-size: 1.15rem; }
.customer-detail-header p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .4rem 0 0; color: #6b7280; font-size: .7rem; }
.customer-detail-header code { border-radius: .35rem; background: #f3f4f6; padding: .2rem .35rem; }
.customer-detail-status { border-radius: 999px; background: #eef2ff; color: #4338ca; padding: .35rem .65rem; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.customer-detail-status.status-ready,
.customer-detail-status.status-completed { background: #ecfdf5; color: #047857; }

.customer-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 2rem 0 1.7rem; padding: 0; list-style: none; }
.customer-timeline li { position: relative; display: grid; justify-items: center; gap: .35rem; color: #9ca3af; text-align: center; }
.customer-timeline li::before { position: absolute; top: .9rem; right: 50%; left: -50%; height: 2px; background: #e5e7eb; content: ''; }
.customer-timeline li:first-child::before { display: none; }
.customer-timeline li > span { position: relative; z-index: 1; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid #d1d5db; border-radius: 50%; background: #fff; font-size: .65rem; font-weight: 800; }
.customer-timeline li strong { color: #4b5563; font-size: .66rem; }
.customer-timeline li small { font-size: .6rem; }
.customer-timeline li.is-complete::before { background: #4f46e5; }
.customer-timeline li.is-complete > span { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.customer-timeline li.is-active > span { border-color: #4f46e5; color: #4338ca; box-shadow: 0 0 0 4px #eef2ff; }
.customer-timeline li.is-active strong { color: #4338ca; }

.customer-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: .85rem; }
.customer-production-card,
.customer-summary-card { border: 1px solid #e5e7eb; border-radius: .8rem; background: #fff; }
.customer-production-card { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; padding: 1rem; }
.customer-production-visual { display: grid; min-height: 6rem; place-items: center; border-radius: .65rem; background: #eef2ff; color: #4338ca; font-size: 1.25rem; font-weight: 900; }
.customer-production-main > span { color: #4f46e5; font-size: .7rem; font-weight: 750; }
.customer-production-main h3 { margin: .4rem 0 0; font-size: .85rem; }
.customer-production-main > p { margin: .55rem 0 0; color: #6b7280; font-size: .72rem; line-height: 1.5; }
.customer-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; margin-top: .8rem; }
.customer-progress::before { grid-column: 1; grid-row: 1; height: .35rem; border-radius: 99px; background: #e5e7eb; content: ''; }
.customer-progress span { z-index: 1; grid-column: 1; grid-row: 1; height: .35rem; border-radius: 99px; background: #4f46e5; }
.customer-progress b { color: #4338ca; font-size: .66rem; }
.customer-production-main dl { margin: .8rem 0 0; }
.customer-production-main dl div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; border-top: 1px solid #f0f1f3; padding: .55rem 0; font-size: .68rem; }
.customer-production-main dt { color: #6b7280; }
.customer-production-main dd { margin: 0; }
.customer-production-main dd strong { color: #047857; }
.customer-summary-card { padding: 1rem; }
.customer-summary-card h3 { margin: 0 0 .75rem; font-size: .83rem; }
.customer-summary-card dl { margin: 0; }
.customer-summary-card dl div { display: flex; justify-content: space-between; padding: .45rem 0; color: #6b7280; font-size: .72rem; }
.customer-summary-card dd { margin: 0; color: #111827; }
.customer-summary-card .is-total { margin-top: .35rem; border-top: 1px solid #e5e7eb; padding-top: .75rem; color: #111827; font-weight: 800; }
.customer-summary-card button { width: 100%; margin-top: .7rem; border: 1px solid #4f46e5; border-radius: .5rem; background: #fff; color: #4338ca; padding: .55rem; font-size: .7rem; font-weight: 700; }
.customer-summary-card button.is-link { border: 0; }
.customer-help-note { display: flex; gap: .5rem; margin-top: .85rem; border-radius: .6rem; background: #f3f4f6; padding: .75rem; color: #6b7280; font-size: .68rem; }
.customer-help-note strong { color: #374151; }
.customer-detail-empty { display: grid; min-height: 28rem; place-items: center; align-content: center; padding: 2rem; text-align: center; }
.customer-detail-empty svg { width: 2.5rem; height: 2.5rem; margin-bottom: .75rem; color: #a5b4fc; }
.customer-detail-empty h2 { margin: 0; font-size: 1rem; }
.customer-detail-empty p { max-width: 23rem; margin: .4rem 0 0; color: #6b7280; font-size: .76rem; line-height: 1.5; }

.dark .customer-orders-page-header { border-color: #374151; }
.dark .customer-orders-page-header h1,
.dark .customer-orders-page,
.dark .customer-auth-copy h2,
.dark .customer-orders-section-header h2,
.dark .customer-order-row,
.dark .customer-order-detail,
.dark .customer-detail-header h2,
.dark .customer-order-search input { color: #f9fafb; }
.dark .customer-orders-page-header p,
.dark .customer-auth-copy p,
.dark .customer-track-copy p,
.dark .customer-track-form > small,
.dark .customer-orders-section-header p { color: #9ca3af; }
.dark .customer-track-form { border-color: #4338ca; background: rgba(49,46,129,.3); }
.dark .customer-track-form input,
.dark .customer-orders-section,
.dark .customer-auth-panel,
.dark .customer-production-card,
.dark .customer-summary-card,
.dark .customer-timeline li > span { border-color: #4b5563; background: #111827; color: #f9fafb; }
.dark .customer-order-list-panel { border-color: #374151; background: #111827; }
.dark .customer-orders-section-header,
.dark .customer-order-row { border-color: #374151; }
.dark .customer-order-row:hover { background: #1f2937; }
.dark .customer-order-row.is-selected { background: rgba(49,46,129,.35); }
.dark .customer-help-note { background: #111827; }

@media (max-width: 860px) {
    .customer-track-form { grid-template-columns: 1fr 1fr; }
    .customer-track-copy { grid-column: 1 / -1; }
    .customer-orders-layout { grid-template-columns: 1fr; }
    .customer-auth-panel { grid-template-columns: 1fr; }
    .customer-auth-actions { justify-content: flex-start; }
    .customer-auth-mount { grid-column: auto; }
    .customer-order-list-panel { border-right: 0; border-bottom: 1px solid #e5e7eb; }
    #customer-order-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .customer-order-row { border-right: 1px solid #e5e7eb; }
}

@media (max-width: 620px) {
    .customer-orders-page-header { padding-top: 70px; padding-right: 0; }
    .customer-track-form { grid-template-columns: 1fr; }
    .customer-track-copy { grid-column: auto; }
    .customer-orders-section-header { align-items: flex-start; flex-direction: column; }
    .customer-order-search { width: 100%; }
    .customer-order-detail { padding: .9rem; }
    .customer-timeline { overflow-x: auto; grid-template-columns: repeat(5, 105px); padding: .3rem .2rem .75rem; }
    .customer-detail-grid,
    .customer-production-card { grid-template-columns: 1fr; }
    .customer-production-visual { min-height: 7rem; }
    .customer-help-note { display: grid; }
}