:root {
    --sky-navy: #071f47;
    --sky-navy-soft: #0d3268;
    --sky-blue: #1267e5;
    --sky-blue-dark: #0b55c5;
    --sky-canvas: #f4f7fb;
    --sky-card: #ffffff;
    --sky-line: #dfe7f1;
    --sky-line-soft: #edf2f7;
    --sky-text: #14243c;
    --sky-muted: #738198;
    --sky-danger: #e14141;
    --sky-success: #26aa69;
}

/* Factory AI assistant */
.factory-ai-assistant {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear .28s;
}

.factory-ai-assistant.is-open {
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}
.factory-ai-assistant.is-closing { visibility: visible; }

.factory-ai-assistant-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    background: rgba(15, 23, 42, .28);
    backdrop-filter: blur(2px);
    transition: opacity .24s ease;
}

.factory-ai-assistant.is-open .factory-ai-assistant-backdrop { opacity: 1; }

.factory-ai-drawer {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(580px, calc(100vw - 48px));
    height: 100%;
    color: #172033;
    background: #fff;
    box-shadow: -22px 0 60px rgba(15, 23, 42, .18);
    transform: translateX(104%);
    transition: transform .28s cubic-bezier(.2, .72, .2, 1);
    overflow: hidden;
}

.factory-ai-mobile-handle { display: none; }

.factory-ai-assistant.is-open .factory-ai-drawer { transform: translateX(0); }
body.factory-ai-open { overflow: hidden; }

.factory-ai-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-height: 92px;
    padding: 18px 22px;
    border-bottom: 1px solid #e6ecf4;
    background: rgba(255, 255, 255, .97);
}

.factory-ai-brand,
.factory-ai-title-row,
.factory-ai-header-actions { display: flex; align-items: center; }
.factory-ai-conversation-scope {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 10px;
    padding: 12px 24px;
    border-bottom: 1px solid #d7e5f8;
    background: #eef5ff;
    color: #244d80;
    font-size: 14px;
    line-height: 1.6;
}
.factory-ai-conversation-scope[hidden] { display: none; }
.factory-ai-scope-label { flex: 0 0 auto; color: #617c9d; font-size: 12px; }
.factory-ai-conversation-scope strong { overflow-wrap: anywhere; }
.factory-ai-scope-hint { flex-basis: 100%; color: #617c9d; font-size: 12px; }
@media (max-width: 600px) { .factory-ai-conversation-scope { padding: 10px 16px; } }
.factory-ai-brand { min-width: 0; gap: 12px; }
.factory-ai-brand > div { min-width: 0; }
.factory-ai-title-row { gap: 9px; }

.factory-ai-brand-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -.02em;
    background: linear-gradient(145deg, #1267e5, #20a4f3);
    box-shadow: 0 8px 22px rgba(18, 103, 229, .24);
}

.factory-ai-title-row h2 {
    margin: 0;
    color: #111827;
    font-size: 22px;
    font-weight: 800;
}

.craft-ai-powered {
    color: #a86222;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
    white-space: nowrap;
}

.factory-ai-brand p {
    max-width: 275px;
    margin: 3px 0 0;
    color: #7b879b;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.factory-ai-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #19875f;
    background: #ebf9f2;
    font-size: 12px;
    font-weight: 750;
}

.factory-ai-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #23b77f;
    box-shadow: 0 0 0 3px rgba(35, 183, 127, .12);
}

.factory-ai-header-actions { flex: 0 0 auto; gap: 8px; }
.factory-ai-header-actions button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 11px;
    color: #66758c;
    background: transparent;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.factory-ai-header-actions #factory-ai-clear-btn,
.factory-ai-header-actions .factory-ai-clear-btn {
    display: inline-flex;
    gap: 7px;
    width: auto;
    min-width: 110px;
    padding: 0 14px;
    border: 1px solid #d7e3f1;
    color: #315c8d;
    background: #fff;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}
.factory-ai-clear-icon { width: 16px; height: 16px; display: grid; place-items: center; }
.factory-ai-clear-icon svg,
.factory-ai-header-actions #factory-ai-close-btn svg,
.factory-ai-header-actions #craft-ai-close-btn svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.factory-ai-header-actions button:hover { color: #155cae; background: #edf5ff; }
.factory-ai-header-actions #factory-ai-clear-btn:hover,
.factory-ai-header-actions .factory-ai-clear-btn:hover { border-color: #b8d0ea; background: #f3f8fd; }
.factory-ai-header-actions button:active { transform: scale(.96); }
.factory-ai-header-actions button:focus-visible { outline: 3px solid rgba(18, 103, 229, .22); outline-offset: 2px; }

.factory-ai-messages {
    flex: 1 1 auto;
    min-height: 0;
    padding: 28px 22px 34px;
    overflow-y: auto;
    scrollbar-width: none;
    scrollbar-gutter: auto;
    overscroll-behavior: contain;
    background:
        radial-gradient(circle at 80% 0, rgba(18, 103, 229, .07), transparent 32%),
        #f6f8fc;
}

.factory-ai-messages::-webkit-scrollbar,
.factory-ai-composer textarea::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.factory-ai-composer textarea { scrollbar-width: none; scrollbar-gutter: auto; }

.factory-ai-welcome { max-width: 420px; margin: 18px auto 0; text-align: center; }
.factory-ai-welcome-mark {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border: 1px solid #cfe0f8;
    border-radius: 18px;
    color: #1267e5;
    background: linear-gradient(145deg, #fff, #eaf3ff);
    box-shadow: 0 10px 28px rgba(18, 103, 229, .12);
    font-size: 25px;
}
.factory-ai-welcome h3 { margin: 0; color: #172033; font-size: 24px; font-weight: 850; }
.factory-ai-welcome > p { max-width: 420px; margin: 9px auto 14px; color: #627189; font-size: 14px; line-height: 1.7; }

.factory-ai-agent-skills { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.factory-ai-agent-skills span { padding: 5px 9px; border-radius: 999px; color: #37648f; background: #eaf3fc; font-size: 12px; font-weight: 700; }

.factory-ai-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; text-align: left; }
.factory-ai-presets button {
    min-height: 80px;
    padding: 12px 13px;
    border: 1px solid #dce5f0;
    border-radius: 14px;
    color: #26344a;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 16px rgba(33, 54, 81, .05);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.factory-ai-presets button:hover {
    border-color: #9dc2ef;
    box-shadow: 0 9px 22px rgba(18, 103, 229, .1);
    transform: translateY(-1px);
}
.factory-ai-presets span { display: block; margin-bottom: 5px; color: #2780df; font-size: 12px; font-weight: 800; }
.factory-ai-presets strong { display: block; font-size: 15px; line-height: 1.5; }

/* 问生产：用简短用途说明和非交互示例引导自由提问。 */
#factory-ai-welcome.factory-ai-welcome-compact {
    max-width: 360px;
    margin: clamp(24px, 9vh, 88px) auto 0;
}
#factory-ai-welcome .factory-ai-welcome-mark {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border: 0;
    border-radius: 16px;
    background: #eaf2ff;
    box-shadow: none;
    font-size: 25px;
}
#factory-ai-welcome h3 { font-size: 23px; font-weight: 650; letter-spacing: .02em; }
#factory-ai-welcome .factory-ai-welcome-purpose { margin: 12px auto 0; color: #5d6f88; font-size: 14px; line-height: 1.85; }
#factory-ai-welcome .factory-ai-welcome-hint { margin: 22px auto 0; color: #6c7d94; font-size: 13px; line-height: 1.7; }
.factory-ai-welcome-example {
    max-width: 320px;
    margin: 26px auto 0;
    padding: 18px 20px;
    border-left: 3px solid #bed6f7;
    border-radius: 0 14px 14px 0;
    background: rgba(255, 255, 255, .65);
    text-align: left;
}
.factory-ai-example-label { color: #75859b; font-size: 12px; }
.factory-ai-example-question { margin: 8px 0 12px; color: #244d80; font-size: 17px; font-weight: 600; line-height: 1.6; }
.factory-ai-example-followup { margin: 0; color: #75859b; font-size: 13px; line-height: 1.7; }
.factory-ai-example-followup strong { color: #465e7c; font-weight: 500; }
.dark #factory-ai-welcome .factory-ai-welcome-mark { color: #8ec1ff; background: #172c49; }
.dark #factory-ai-welcome .factory-ai-welcome-purpose,
.dark #factory-ai-welcome .factory-ai-welcome-hint { color: #a4b5cc; }
.dark .factory-ai-welcome-example { border-color: #365982; background: #172131; }
.dark .factory-ai-example-question { color: #b4d5ff; }
.dark .factory-ai-example-label, .dark .factory-ai-example-followup { color: #99abc3; }
.dark .factory-ai-example-followup strong { color: #c0cfe2; }
@media (max-width: 430px) {
    .factory-ai-purpose-break { display: none; }
    .factory-ai-welcome-example { padding: 16px; }
}
@media (max-height: 600px) {
    #factory-ai-welcome.factory-ai-welcome-compact { margin-top: 4px; }
    #factory-ai-welcome .factory-ai-welcome-mark { margin-bottom: 10px; }
    .factory-ai-welcome-example { margin-top: 18px; }
}

.factory-ai-message { display: flex; gap: 9px; width: 100%; margin-bottom: 18px; }
.factory-ai-message.is-user { justify-content: flex-end; }
.factory-ai-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    margin-top: 3px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, #1267e5, #22a7f1);
    font-size: 11px;
    font-weight: 900;
}
.factory-ai-message-body { min-width: 0; max-width: calc(100% - 40px); }
.factory-ai-message.is-user .factory-ai-message-body { max-width: 84%; }
.factory-ai-bubble {
    padding: 16px 18px;
    border: 1px solid #dfe7f1;
    border-radius: 5px 17px 17px 17px;
    color: #29364a;
    background: #fff;
    box-shadow: 0 5px 18px rgba(31, 49, 74, .055);
    font-size: 16px;
    line-height: 1.72;
    overflow-wrap: anywhere;
}
.factory-ai-message.is-user .factory-ai-bubble {
    border: 0;
    border-radius: 17px 17px 5px 17px;
    color: #fff;
    background: linear-gradient(145deg, #1b71e8, #0d5dcc);
    box-shadow: 0 8px 20px rgba(18, 103, 229, .18);
}
.factory-ai-bubble > :first-child { margin-top: 0; }
.factory-ai-bubble > :last-child { margin-bottom: 0; }
.factory-ai-bubble p { margin: 7px 0; }
.factory-ai-bubble strong { color: #172033; font-weight: 850; }
.factory-ai-markdown-table-wrap { max-width: 100%; margin: 12px 0; overflow-x: auto; border: 1px solid #dbe5f1; border-radius: 9px; overscroll-behavior-x: contain; }
.factory-ai-markdown-table-wrap:focus-visible { outline: 2px solid #1267e5; outline-offset: 2px; }
.factory-ai-bubble table { width: 100%; border-collapse: collapse; font-size: .94em; line-height: 1.55; }
.factory-ai-bubble th, .factory-ai-bubble td { min-width: 5em; padding: 9px 12px; border-right: 1px solid #dbe5f1; border-bottom: 1px solid #dbe5f1; text-align: left; vertical-align: top; overflow-wrap: normal; }
.factory-ai-bubble th { color: #25476f; background: #edf4fc; font-weight: 700; white-space: nowrap; }
.factory-ai-bubble td { font-variant-numeric: tabular-nums; }
.factory-ai-bubble tr:nth-child(even) td { background: #f7faff; }
.factory-ai-bubble th:last-child, .factory-ai-bubble td:last-child { border-right: 0; }
.factory-ai-bubble tbody tr:last-child td { border-bottom: 0; }
.factory-ai-bubble .factory-ai-cell-right { text-align: right; white-space: nowrap; }
.factory-ai-bubble .factory-ai-cell-center { text-align: center; }
.dark .factory-ai-markdown-table-wrap, .dark .factory-ai-bubble th, .dark .factory-ai-bubble td { border-color: #334155; }
.dark .factory-ai-bubble th { color: #dceaff; background: #23344b; }
.dark .factory-ai-bubble tr:nth-child(even) td { background: #1c2a3d; }
.factory-ai-bubble ul, .factory-ai-bubble ol { margin: 8px 0; padding-left: 20px; }
.factory-ai-bubble li { margin: 4px 0; }
.factory-ai-bubble hr { margin: 13px 0 9px; border: 0; border-top: 1px solid #e7edf5; }
.factory-ai-bubble blockquote { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid #8bbaf0; border-radius: 0 8px 8px 0; color: #53637a; background: #f2f7fd; }
.factory-ai-sources { margin-top: 7px; color: #53637a; font-size: 13px; }
.factory-ai-sources > summary { cursor: pointer; padding: 6px 0; color: #205faa; }
.factory-ai-calculation { padding: 8px 0; line-height: 1.7; }
.factory-ai-order-choices { display: grid; gap: 8px; margin-top: 10px; }
.factory-ai-order-choices button { text-align: left; padding: 10px 12px; border: 1px solid #bcd4f1; border-radius: 10px; background: #f8fbff; color: #205faa; cursor: pointer; line-height: 1.6; }
.factory-ai-order-choices button:hover { background: #eaf3ff; }
.factory-ai-order-choices button:focus-visible { outline: 2px solid #1670e8; outline-offset: 2px; }
.factory-ai-sources > p { margin: 0 0 7px; font-weight: 650; }
.factory-ai-source-card { margin: 0; border: 0; border-bottom: 1px solid #e1e9f3; border-radius: 0; background: transparent; overflow-wrap: anywhere; }
.factory-ai-source-card summary { padding: 10px 12px; cursor: pointer; color: #205faa; font-weight: 650; }
.factory-ai-source-card summary:focus-visible { outline: 2px solid #1670e8; outline-offset: -3px; }
.factory-ai-source-card > p { padding: 0 12px; margin: 2px 0 9px; }
.factory-ai-source-card dl { display: grid; grid-template-columns: minmax(70px, 110px) minmax(0, 1fr); gap: 5px 10px; padding: 0 12px; margin: 0 0 10px; }
.factory-ai-source-card dt { color: #6d7c90; }
.factory-ai-source-card dd { margin: 0; color: #24364d; white-space: pre-wrap; }
.factory-ai-source-card button { margin: 0 12px 12px; padding: 7px 10px; border: 1px solid #bcd4f1; border-radius: 7px; background: white; color: #1b65b5; cursor: pointer; }
.factory-ai-source-group { margin: 6px 0; }
.factory-ai-source-heading { margin: 0 0 5px; font-size: 12px; line-height: 1.45; font-weight: 650; overflow-wrap: anywhere; }
.factory-ai-source-columns, .factory-ai-source-card .factory-ai-source-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .8fr); gap: 6px; padding: 6px 3px; align-items: center; }
.factory-ai-source-columns { padding-top: 4px; padding-bottom: 4px; color: #6d7c90; font-size: 11px; }
.factory-ai-source-columns > :last-child, .factory-ai-source-row > :last-child { text-align: right; }
.factory-ai-source-card .factory-ai-source-row { min-height: 36px; list-style: none; font-size: 12px; font-weight: 500; }
.factory-ai-source-row::-webkit-details-marker { display: none; }
.factory-ai-source-row > :first-child::before { content: '▸ '; color: #7a94b2; }
.factory-ai-source-card[open] .factory-ai-source-row > :first-child::before { content: '▾ '; }
.factory-ai-source-row > :last-child { font-weight: 700; }
.factory-ai-overview { padding: 7px 0; margin: 0 0 3px; border: 0; border-top: 1px solid #d8e5f5; border-bottom: 1px solid #d8e5f5; border-radius: 0; background: transparent; }
.factory-ai-overview-process { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #205faa; font-size: 12px; line-height: 1.4; font-weight: 650; }
.factory-ai-overview-process > span { flex-shrink: 0; color: #718198; font-size: 11px; font-weight: 400; }
.factory-ai-overview-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.factory-ai-overview-stats > div { min-width: 0; }
.factory-ai-overview-stats dt { color: #718198; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.factory-ai-overview-stats dd { margin: 2px 0 0; color: #183d6b; font-size: 15px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.factory-ai-overview progress { display: block; width: 100%; height: 3px; margin: 6px 0 0; border: 0; border-radius: 4px; overflow: hidden; background: #eaf1fa; accent-color: #1976e9; }
.factory-ai-overview progress::-webkit-progress-bar { background: #eaf1fa; border-radius: 4px; }
.factory-ai-overview progress::-webkit-progress-value { background: #1976e9; border-radius: 4px; }
.factory-ai-overview progress::-moz-progress-bar { background: #1976e9; border-radius: 4px; }
.factory-ai-overview-note { margin: 5px 0 0; color: #718198; font-size: 11px; line-height: 1.4; }
.factory-ai-sources > .factory-ai-source-coverage { margin-top: 5px; color: #718198; font-size: 11px; font-weight: 400; }


.factory-ai-followups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.factory-ai-followups button {
    padding: 7px 10px;
    border: 1px solid #bcd4f1;
    border-radius: 999px;
    color: #1b65b5;
    background: #edf5ff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}
.factory-ai-followups button:hover { background: #dfeeff; }
.factory-ai-followups.factory-ai-number-choices { gap: 10px; }
.factory-ai-followups.factory-ai-number-choices button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    touch-action: manipulation;
}
.factory-ai-followups.factory-ai-number-choices button:active { transform: scale(.94); }
.craft-ai-quick-replies button {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: 17px;
}
.craft-ai-quick-replies button:disabled { cursor: default; opacity: .48; }
.craft-ai-quick-replies button.is-selected { border-color: #b86a21; color: #fff; background: #b86a21; opacity: 1; }
.factory-ai-message-meta { margin: 8px 2px 0; color: #8794a7; font-size: 11px; }

.factory-ai-thinking { display: flex; align-items: center; gap: 10px; min-height: 26px; color: #5d6d83; }
.factory-ai-thinking strong { font-size: 14px; font-weight: 650; }
.factory-ai-cancelled { color: #7d899b; font-size: 14px; }
.factory-ai-message.is-streaming .factory-ai-bubble::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: #2a78d2; animation: factory-ai-cursor .8s infinite; }
@keyframes factory-ai-cursor { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }

.factory-ai-typing { display: inline-flex; align-items: center; gap: 4px; min-width: 48px; min-height: 18px; }
.factory-ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: #79a9df; animation: factory-ai-pulse 1.1s infinite ease-in-out; }
.factory-ai-typing i:nth-child(2) { animation-delay: .14s; }
.factory-ai-typing i:nth-child(3) { animation-delay: .28s; }
@keyframes factory-ai-pulse { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-4px); opacity: 1; } }

.factory-ai-composer-wrap {
    flex: 0 0 auto;
    padding: 14px 18px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid #e3eaf3;
    background: rgba(255, 255, 255, .98);
}
.factory-ai-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 7px 7px 7px 13px;
    border: 1px solid #cfd9e6;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(25, 44, 70, .06);
}
.factory-ai-composer:focus-within { border-color: #73a9e9; box-shadow: 0 0 0 3px rgba(18, 103, 229, .1); }
.factory-ai-composer textarea {
    width: 100%;
    min-height: 40px;
    max-height: 118px;
    padding: 7px 0 5px;
    border: 0;
    outline: 0;
    resize: none;
    color: #1d293b;
    background: transparent;
    font: inherit;
    font-size: 16px;
    line-height: 1.45;
}
.factory-ai-composer textarea::placeholder { color: #99a4b5; }
.factory-ai-composer button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: #1267e5;
}
.factory-ai-composer button:disabled { opacity: .45; cursor: not-allowed; }
.factory-ai-composer button.is-stopping { background: #e14a4a; }
.factory-ai-composer button.is-stopping svg { display: none; }
.factory-ai-composer button.is-stopping::before { content: ''; width: 13px; height: 13px; border-radius: 3px; background: #fff; }
.factory-ai-composer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.factory-ai-composer-wrap > p { margin: 8px 2px 0; color: #8794a7; font-size: 11px; text-align: center; }
.factory-ai-connection-note { margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; color: #a84916; background: #fff3e7; font-size: 13px; text-align: center; }

/* Craft AI keeps the assistant interaction, with a warmer workshop identity. */
.craft-ai-assistant .factory-ai-brand-icon {
    background: linear-gradient(145deg, #b86a21, #e69a3b);
    box-shadow: 0 8px 22px rgba(184, 106, 33, .24);
}
.craft-ai-assistant .factory-ai-messages {
    background: radial-gradient(circle at 80% 0, rgba(230, 154, 59, .10), transparent 34%), #f8f7f4;
}
.craft-ai-assistant .factory-ai-welcome-mark {
    border-color: #efd9bd;
    color: #a65a16;
    background: linear-gradient(145deg, #fff, #fff2df);
    box-shadow: 0 10px 28px rgba(184, 106, 33, .12);
    font-size: 20px;
    font-weight: 900;
}
.craft-ai-assistant .factory-ai-presets span { color: #b7671e; }
.craft-ai-assistant .factory-ai-presets button:hover { border-color: #dfb37e; box-shadow: 0 9px 22px rgba(184, 106, 33, .1); }
.craft-ai-assistant .factory-ai-avatar { background: linear-gradient(145deg, #b86a21, #df8d32); }
.craft-ai-assistant .factory-ai-message.is-user .factory-ai-bubble {
    background: linear-gradient(145deg, #b96b22, #995218);
    box-shadow: 0 8px 20px rgba(153, 82, 24, .18);
}
.factory-ai-bubble ol {
    display: block;
    padding-left: 1.75em;
    list-style-type: decimal;
    list-style-position: outside;
}
.factory-ai-bubble ul {
    display: block;
    padding-left: 1.75em;
    list-style-type: disc;
    list-style-position: outside;
}
.factory-ai-bubble li {
    display: list-item;
    padding-left: .15em;
}
.factory-ai-bubble li::marker {
    color: #1267e5;
    font-weight: 850;
}
.craft-ai-assistant .factory-ai-bubble li::marker {
    color: #a85d1c;
    font-weight: 850;
}
.craft-ai-assistant .factory-ai-composer:focus-within { border-color: #d99a59; box-shadow: 0 0 0 3px rgba(184, 106, 33, .1); }
.craft-ai-assistant .factory-ai-composer > #craft-ai-send-btn { background: #b86a21; }
.craft-ai-image-preview {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    padding: 8px;
    border: 1px solid #ead7c0;
    border-radius: 13px;
    background: #fff9f1;
}
.craft-ai-image-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 9px;
}
.craft-ai-image-actions.hidden { display: none; }
.craft-ai-image-actions button {
    min-height: 64px;
    padding: 9px 10px;
    border: 1px solid #ead4b9;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 9px;
    color: #5b3a1d;
    background: #fff9f0;
    text-align: left;
}
.craft-ai-image-actions button:hover { border-color: #d9ad78; background: #fff1df; }
.craft-ai-image-actions button > span {
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    align-self: center;
    color: #fff;
    background: #b86a21;
    font-size: 13px;
    font-weight: 900;
}
.craft-ai-image-actions strong { align-self: end; font-size: 13px; }
.craft-ai-image-actions small { align-self: start; margin-top: 2px; color: #92775e; font-size: 10px; }
.craft-ai-image-preview.hidden { display: none; }
.craft-ai-image-preview img { width: 58px; height: 58px; border-radius: 9px; object-fit: cover; background: #eee6dc; }
.craft-ai-image-preview strong,
.craft-ai-image-preview span { display: block; }
.craft-ai-image-preview strong { color: #633a17; font-size: 13px; }
.craft-ai-image-preview span { margin-top: 3px; color: #8e745c; font-size: 11px; }
.craft-ai-image-preview button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    color: #8b684a;
    background: #f3e5d5;
    font-size: 20px;
}
.factory-ai-composer > .craft-ai-image-btn {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    color: #9b5a20;
    background: #fff1df;
}
.factory-ai-composer > .craft-ai-image-btn:hover { background: #f7dfc2; }
.factory-ai-composer > .craft-ai-image-btn svg { width: 21px; height: 21px; }
.craft-ai-user-photo {
    display: block;
    width: min(260px, 68vw);
    max-height: 280px;
    margin-bottom: 9px;
    border-radius: 11px;
    object-fit: cover;
}
.craft-ai-message-note { color: #6d7788; font-size: 12px; }

/* Admin AI usage records */
.admin-tabs-nav { overflow-x: auto; scrollbar-width: thin; }
.ai-usage-admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.ai-usage-eyebrow { margin: 0 0 3px; color: #2476d2; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.ai-usage-admin-head h3 { margin: 0; color: #172033; font-size: 21px; font-weight: 850; }
.ai-usage-admin-head p:not(.ai-usage-eyebrow) { margin: 5px 0 0; color: #718096; font-size: 12px; }
.ai-usage-admin-head button { padding: 9px 15px; border: 1px solid #bad2ef; border-radius: 10px; color: #155cae; background: #edf5ff; font-size: 12px; font-weight: 750; white-space: nowrap; }
.ai-usage-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ai-usage-summary > div { padding: 15px 17px; border: 1px solid #dce5f0; border-radius: 14px; background: #fff; box-shadow: 0 4px 15px rgba(31, 49, 74, .045); }
.ai-usage-summary span { display: block; color: #8290a4; font-size: 11px; }
.ai-usage-summary strong { display: block; margin-top: 4px; color: #155cae; font-size: 23px; }
.ai-usage-filters { display: grid; grid-template-columns: .75fr 1fr 1.35fr .85fr .85fr; gap: 10px; margin-bottom: 15px; padding: 14px; border: 1px solid #dce5f0; border-radius: 14px; background: #fff; }
.ai-usage-filters label span { display: block; margin: 0 0 5px 2px; color: #77859a; font-size: 10px; font-weight: 700; }
.ai-usage-filters input, .ai-usage-filters select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #cfd9e6; border-radius: 9px; color: #26344a; background: #fff; font-size: 12px; }
.ai-usage-list { display: grid; gap: 10px; }
.ai-usage-record { border: 1px solid #dbe4ef; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(31, 49, 74, .045); overflow: hidden; }
.ai-usage-record summary { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.ai-usage-record summary::-webkit-details-marker { display: none; }
.ai-usage-record summary:hover { background: #f8fbff; }
.ai-usage-record-user strong { display: block; color: #25344a; font-size: 12px; }
.ai-usage-record-user span { display: block; margin-top: 2px; color: #8c98a8; font-size: 10px; }
.ai-usage-record-question { min-width: 0; color: #25344a; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-usage-record-badge { padding: 5px 8px; border-radius: 999px; color: #256ab7; background: #edf5ff; font-size: 9px; font-weight: 800; }
.ai-usage-record-badge.is-craft { color: #9b571d; background: #fff0dc; }
.ai-usage-record-content { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; padding: 0 16px 16px; border-top: 1px solid #edf1f6; }
.ai-usage-record-content section { margin-top: 14px; padding: 13px; border-radius: 11px; background: #f7f9fc; }
.ai-usage-record-content h4 { margin: 0 0 8px; color: #617086; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.ai-usage-record-content p { margin: 0; color: #28364b; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-usage-record-content.is-conversation { display: block; }
.ai-usage-context { margin: 13px 0 0; padding: 9px 11px; border-radius: 9px; color: #83501f; background: #fff1df; font-size: 11px; font-weight: 750; }
.ai-usage-record-content .ai-usage-turn { margin-top: 11px; }
.ai-usage-record-content .ai-usage-turn h4:not(:first-child) { margin-top: 13px; }
.ai-usage-answer { color: #28364b; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.ai-usage-answer p { margin: 5px 0; }
.ai-usage-answer ol, .ai-usage-answer ul { margin: 6px 0; padding-left: 1.6em; }
.ai-usage-image { display: block; width: min(260px, 100%); max-height: 220px; margin-top: 9px; border: 1px solid #e0e5eb; border-radius: 10px; object-fit: cover; cursor: zoom-in; background: #eef1f4; }
.ai-usage-image.is-loading { min-height: 120px; opacity: .55; }
.ai-usage-image.is-error { min-height: 0; }
.ai-usage-empty { padding: 52px 20px; border: 1px dashed #cbd7e6; border-radius: 14px; color: #7b8798; text-align: center; background: rgba(255, 255, 255, .65); }
.ai-usage-empty strong, .ai-usage-empty span { display: block; }
.ai-usage-empty strong { color: #34445a; font-size: 14px; }
.ai-usage-empty span { margin-top: 5px; font-size: 11px; }

.dark .factory-ai-drawer,
.dark .factory-ai-header,
.dark .factory-ai-composer-wrap { color: #e5e7eb; background: #111827; }
.dark .factory-ai-mobile-handle { background: #111827; }
.dark .factory-ai-mobile-handle i { background: #556174; }
.dark .factory-ai-header, .dark .factory-ai-composer-wrap { border-color: #2b3545; }
.dark .factory-ai-title-row h2 { color: #f4f6f9; }
.dark .factory-ai-conversation-scope { color: #d5e7ff; background: #172c49; border-color: #2b4567; }
.dark .factory-ai-scope-label, .dark .factory-ai-scope-hint { color: #a6bdd9; }
.dark .factory-ai-header-actions #factory-ai-clear-btn,
.dark .factory-ai-header-actions .factory-ai-clear-btn { color: #8ec1ff; background: #172c49; }
.dark .factory-ai-header-actions #factory-ai-clear-btn:hover,
.dark .factory-ai-header-actions .factory-ai-clear-btn:hover { background: #1c3a60; }
.dark .factory-ai-messages { background: radial-gradient(circle at 80% 0, rgba(46, 134, 241, .12), transparent 32%), #0e1522; }
.dark .factory-ai-welcome h3 { color: #eef2f7; }
.dark .factory-ai-bubble strong { color: #f3f7fc; }
.dark .factory-ai-presets button, .dark .factory-ai-bubble { border-color: #2d3b4e; color: #dbe3ee; background: #172131; }
.dark .factory-ai-composer { border-color: #334155; background: #162131; }
.dark .factory-ai-composer textarea { color: #edf2f7; }
.dark .ai-usage-admin-head h3, .dark .ai-usage-record-user strong, .dark .ai-usage-record-question { color: #e8edf5; }
.dark .ai-usage-summary > div, .dark .ai-usage-filters, .dark .ai-usage-record { border-color: #344155; background: #172131; }
.dark .ai-usage-filters input, .dark .ai-usage-filters select { border-color: #3a4659; color: #e5e7eb; background: #111827; }
.dark .ai-usage-record summary:hover, .dark .ai-usage-record-content section { background: #111b2a; }
.dark .ai-usage-record-content { border-color: #2d394b; }
.dark .ai-usage-record-content p { color: #d8e0eb; }
.dark .craft-ai-assistant .factory-ai-messages { background: radial-gradient(circle at 80% 0, rgba(230, 154, 59, .12), transparent 34%), #0e1522; }
.dark .craft-ai-image-preview { border-color: #564332; background: #261e17; }
.dark .craft-ai-image-preview strong { color: #f0d7ba; }
.dark .craft-ai-image-preview span { color: #bca58f; }
.dark .craft-ai-image-actions button { border-color: #564332; color: #f0d7ba; background: #261e17; }
.dark .craft-ai-image-actions small { color: #bca58f; }

@media (max-width: 700px) {
    .factory-ai-assistant-backdrop { display: block; background: rgba(15, 23, 42, .5); backdrop-filter: blur(1px); }
    .factory-ai-drawer {
        top: auto;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        height: min(90dvh, 820px);
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -18px 55px rgba(15, 23, 42, .24);
        transform: translateY(105%);
    }
    .factory-ai-assistant.is-open .factory-ai-drawer { transform: translateY(0); }
    .factory-ai-mobile-handle { display: grid; place-items: center; flex: 0 0 20px; cursor: grab; touch-action: none; background: #fff; }
    .factory-ai-mobile-handle i { width: 42px; height: 5px; border-radius: 999px; background: #c8d1de; }
    .factory-ai-header { min-height: 70px; padding: 8px 14px 11px; }
    .factory-ai-brand { gap: 10px; }
    .factory-ai-brand-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; font-size: 13px; }
    .factory-ai-title-row h2 { font-size: 20px; }
    .factory-ai-brand p { max-width: 225px; font-size: 12px; }
    .factory-ai-live { padding: 3px 6px; font-size: 10px; }
    .factory-ai-header-actions button { width: 40px; height: 40px; }
    .factory-ai-header-actions #factory-ai-clear-btn,
    .factory-ai-header-actions .factory-ai-clear-btn { min-width: 90px; padding: 0 10px; font-size: 12px; }
    .factory-ai-messages { padding: 18px 14px 28px; }
    .factory-ai-welcome { margin-top: 5px; }
    .factory-ai-welcome-mark { width: 50px; height: 50px; margin-bottom: 11px; border-radius: 16px; font-size: 22px; }
    .factory-ai-welcome h3 { font-size: 21px; }
    .factory-ai-welcome > p { margin-bottom: 12px; font-size: 14px; line-height: 1.6; }
    .factory-ai-agent-skills { margin-bottom: 15px; }
    .factory-ai-agent-skills span { font-size: 11px; }
    .factory-ai-presets { gap: 8px; }
    .factory-ai-presets button { min-height: 82px; padding: 11px; border-radius: 13px; }
    .factory-ai-presets span { font-size: 11px; }
    .factory-ai-presets strong { font-size: 14px; }
    .factory-ai-message { gap: 8px; margin-bottom: 17px; }
    .factory-ai-avatar { width: 34px; height: 34px; flex-basis: 34px; }
    .factory-ai-message-body { max-width: calc(100% - 42px); }
    .factory-ai-bubble { padding: 14px 15px; font-size: 16px; line-height: 1.7; }
    .factory-ai-followups button { min-height: 40px; padding: 8px 11px; font-size: 13px; }
    .factory-ai-followups.factory-ai-number-choices button {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        padding: 0;
        font-size: 19px;
    }
    .factory-ai-message-meta { font-size: 11px; }
    .factory-ai-composer-wrap { padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
    .factory-ai-composer textarea { font-size: 16px; }
    .factory-ai-composer-wrap > p { display: none; }
    .ai-usage-admin-head { align-items: flex-start; }
    .ai-usage-summary { gap: 7px; }
    .ai-usage-summary > div { padding: 11px; }
    .ai-usage-summary strong { font-size: 18px; }
    .ai-usage-filters { grid-template-columns: 1fr 1fr; padding: 10px; }
    .ai-usage-record summary { grid-template-columns: 1fr auto; gap: 8px; padding: 12px; }
    .ai-usage-record-question { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
    .ai-usage-record-content { grid-template-columns: 1fr; gap: 0; padding: 0 12px 12px; }

    /* “问生产”和“问师傅”共用紧凑、适合手指操作的手机头部。 */
    .factory-ai-assistant .factory-ai-drawer { height: min(96dvh, 900px); border-radius: 20px 20px 0 0; }
    .factory-ai-assistant .factory-ai-mobile-handle { flex-basis: 14px; }
    .factory-ai-assistant .factory-ai-mobile-handle i { width: 36px; height: 4px; }
    .factory-ai-assistant .factory-ai-header { min-height: 56px; padding: 3px 10px 7px; }
    .factory-ai-assistant .factory-ai-brand { gap: 8px; }
    .factory-ai-assistant .factory-ai-brand-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; font-size: 18px; }
    .factory-ai-assistant .factory-ai-title-row h2 { font-size: 18px; }
    .factory-ai-assistant .factory-ai-brand p,
    .factory-ai-assistant .factory-ai-live { display: none; }
    .factory-ai-assistant .factory-ai-header-actions { gap: 8px; }
    .factory-ai-assistant .factory-ai-header-actions .factory-ai-clear-btn { min-width: 102px; height: 42px; padding: 0 12px; border-radius: 13px; font-size: 13px; }
    .factory-ai-assistant .factory-ai-clear-icon { display: grid; width: 15px; height: 15px; }
    .factory-ai-assistant .factory-ai-header-actions #factory-ai-close-btn,
    .factory-ai-assistant .factory-ai-header-actions #craft-ai-close-btn {
        width: 42px;
        height: 42px;
        padding: 12px;
        border: 1px solid #e1e6ec;
        border-radius: 50%;
        color: #607087;
        background: #f7f8fa;
    }
    .factory-ai-assistant .factory-ai-messages { padding: 16px 12px 24px; }
    .factory-ai-assistant .factory-ai-welcome { margin-top: 4px; }
    .factory-ai-assistant .factory-ai-welcome-mark { width: 46px; height: 46px; margin-bottom: 9px; border-radius: 14px; font-size: 20px; }
    .factory-ai-assistant .factory-ai-welcome h3 { font-size: 20px; }
    .factory-ai-assistant .factory-ai-welcome > p { margin: 6px auto 10px; font-size: 13px; line-height: 1.55; }
}

@media (max-width: 430px) {
    .factory-ai-brand p { max-width: 165px; }
    .factory-ai-header-actions { gap: 2px; }
    .factory-ai-header-actions button { width: 36px; height: 36px; }
    .factory-ai-header-actions #factory-ai-clear-btn,
    .factory-ai-header-actions .factory-ai-clear-btn { min-width: 82px; padding: 0 8px; }
    .factory-ai-assistant .factory-ai-header-actions #factory-ai-clear-btn,
    .factory-ai-assistant .factory-ai-header-actions .factory-ai-clear-btn {
        min-width: 102px;
        height: 42px;
        padding: 0 12px;
        border-radius: 13px;
        font-size: 13px;
    }
    .factory-ai-drawer { height: min(92dvh, 820px); }
    .factory-ai-presets button { min-height: 78px; }
    .ai-usage-admin-head { display: block; }
    .ai-usage-admin-head button { width: 100%; margin-top: 12px; }
    .ai-usage-summary { grid-template-columns: 1fr 1fr 1fr; }
    .ai-usage-summary span { font-size: 9px; }
    .ai-usage-filters { grid-template-columns: 1fr; }
}

/* ===== Production OS unified child-application host ===== */
.blue-sky-module-page {
    height: 100vh;
    overflow: hidden;
}

#app-container > #page-module > header.blue-sky-module-header {
    min-height: 64px;
    padding: 0 20px !important;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff !important;
}

.blue-sky-module-heading {
    min-width: 0;
    flex: 1;
}

.blue-sky-module-heading > span {
    display: block;
    color: #7890ad;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.blue-sky-module-heading h1 {
    margin: 1px 0 0;
    line-height: 1.2;
}

.blue-sky-module-heading p {
    margin: 2px 0 0;
    color: #71839a;
    font-size: 11px;
}

.blue-sky-module-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#blue-sky-daily-report-btn {
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #b9d1ef;
    border-radius: 9px;
    color: #125ebd;
    background: #edf5ff;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

#blue-sky-daily-report-btn:hover { background: #dfeeff; }
#blue-sky-daily-report-btn.hidden { display: none; }

.blue-sky-module-user {
    max-width: 150px;
    overflow: hidden;
    color: #60738c;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blue-sky-module-profile-wrap {
    position: relative;
}

.blue-sky-module-profile-wrap .blue-sky-profile-toggle {
    min-width: 0;
}

.blue-sky-module-profile-wrap .blue-sky-popover {
    z-index: 120;
}

#app-container > .page > header .blue-sky-module-actions .danger {
    color: #bd3342 !important;
    border-color: #efcbd0;
    background: #fff7f8;
}

.blue-sky-module-main {
    position: relative;
    height: calc(100vh - 64px);
    max-width: none !important;
    padding: 0 !important;
    overflow: hidden;
}

.blue-sky-module-frames,
.blue-sky-module-frame {
    width: 100%;
    height: 100%;
}

.blue-sky-module-frame {
    display: block;
    border: 0;
    background: var(--sky-canvas);
}

.blue-sky-module-frame.hidden,
.blue-sky-module-loading.hidden {
    display: none;
}

.blue-sky-module-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    color: #6c8099;
    font-size: 13px;
    background: var(--sky-canvas);
}


@media (max-width: 767px) {
    #app-container > #page-module > header.blue-sky-module-header {
        min-height: 48px;
        height: 48px;
        padding: 0 8px !important;
        gap: 6px;
    }

    .blue-sky-module-heading > span,
    .blue-sky-module-heading p,
    .blue-sky-module-profile-wrap .blue-sky-avatar,
    .blue-sky-module-profile-wrap .blue-sky-profile-arrow {
        display: none;
    }

    .blue-sky-module-heading h1 {
        overflow: hidden;
        font-size: 16px !important;
        line-height: 1.2;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #blue-sky-module-menu-toggle,
    #blue-sky-module-back {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0 !important;
        display: grid;
        place-items: center;
        font-size: 17px !important;
    }

    #blue-sky-module-back {
        width: auto;
        padding: 0 8px !important;
        display: flex;
        gap: 3px;
    }

    .blue-sky-module-back-text {
        font-size: 12px;
    }

    .blue-sky-module-actions {
        flex: 0 0 auto;
        gap: 5px;
    }

    #blue-sky-daily-report-btn {
        width: 104px;
        min-width: 104px;
        height: 38px;
        min-height: 38px;
        padding: 0 9px;
        font-size: 12px;
    }

    .blue-sky-module-profile-wrap .blue-sky-profile-toggle {
        height: 38px;
        min-width: 64px;
        max-width: 92px;
        padding: 0 8px;
        border: 0;
        border-radius: 8px;
        background: #f2f7fd;
    }

    .blue-sky-module-user {
        max-width: 76px;
        display: block;
        color: #24476f;
        font-size: 12px;
        font-weight: 750;
    }

    .blue-sky-module-profile-wrap .blue-sky-popover {
        top: calc(100% + 5px);
        min-width: 132px;
    }

    .blue-sky-module-main {
        height: calc(100vh - 48px);
        height: calc(100dvh - 48px);
    }

    #app-container.mobile-entry-mode .blue-sky-sidebar,
    #app-container.mobile-entry-mode .blue-sky-sidebar-backdrop,
    #app-container.mobile-entry-mode #blue-sky-module-menu-toggle,
    #app-container.mobile-entry-mode #blue-sky-module-back {
        display: none !important;
    }

    #app-container.mobile-entry-mode .blue-sky-module-heading {
        padding-left: 4px;
    }
}

/* Final order-toolbar placement: three frequent actions; deletion lives in the account menu. */
.blue-sky-page-actions > #craft-ai-btn {
    border: 1px solid #e4c59e !important;
    color: #9a5419 !important;
    background: #fff7eb !important;
}
.blue-sky-page-actions > #craft-ai-btn:hover { background: #ffecd2 !important; }
.blue-sky-orders-header .blue-sky-popover > #delete-mode-btn {
    position: static;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    margin: 0;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 7px !important;
    justify-content: flex-start;
    color: #c93643 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    transform: none;
}
.blue-sky-orders-header .blue-sky-popover > #delete-mode-btn:hover {
    color: #c93643 !important;
    background: #fff0f1 !important;
}
@media (max-width: 767px) {
    .blue-sky-page-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Blue Sky system-wide shell ===== */
#app-container {
    min-height: 100vh;
    background: var(--sky-canvas);
}

#app-container > .page {
    min-height: 100vh;
    padding-left: 220px;
    color: var(--sky-text);
    background: var(--sky-canvas);
}

#app-container > .page > header:not(.blue-sky-orders-header) {
    min-height: 58px;
    padding: 0 24px !important;
    border-bottom: 1px solid var(--sky-line);
    display: flex;
    align-items: center;
    background: #fff !important;
    box-shadow: none !important;
}

#app-container > .page > header:not(.blue-sky-orders-header) > .container {
    width: 100%;
    max-width: none;
}

#app-container > .page > header h1 {
    color: var(--sky-text) !important;
    font-size: 19px !important;
    letter-spacing: .01em;
}

#app-container > .page > header button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid #cdd9e8;
    border-radius: 7px;
    color: #27558e !important;
    background: #f8fbff;
    font-size: 12px !important;
    text-decoration: none !important;
}

#app-container > .page > .container,
#app-container > .page > main.container {
    width: 100%;
    max-width: 1440px;
}

#page-login {
    position: relative;
    overflow: hidden;
    background: #071f47 !important;
}

#page-login::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(25,110,235,.33), transparent 48%),
                radial-gradient(circle at 85% 15%, rgba(45,151,255,.22), transparent 30%);
}

#page-login > div {
    position: relative;
    max-width: 390px;
    padding: 30px !important;
    border: 1px solid rgba(171,203,244,.38);
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(0,18,51,.28) !important;
}

#page-login h2 {
    margin-top: 12px !important;
    color: var(--sky-text) !important;
    font-size: 25px !important;
}

#page-login h2::before {
    content: none;
}

#page-login .shunmei-login-logo {
    width: 108px;
}

#page-login input:not([type="checkbox"]) {
    height: 43px;
    border-color: #d7e1ee;
    color: var(--sky-text) !important;
    background: #f8faff !important;
}

#page-login button[type="submit"] {
    height: 43px;
    border-radius: 7px;
    background: var(--sky-blue) !important;
}

/* Tracking / component schedule */
#page-tracking > .container.p-2,
#page-admin > .container,
#page-handover-dashboard > main,
#page-boss-dashboard > main {
    padding: 16px 20px 22px !important;
}

#order-info-bar {
    max-width: none !important;
    padding: 10px 20px 0;
}

#order-info-bar > .grid {
    padding: 10px 14px;
    border: 1px solid var(--sky-line);
    border-radius: 8px;
    color: #40536d;
    background: #fff;
    box-shadow: 0 3px 10px rgba(23,55,94,.04);
}

#add-component-form {
    max-width: none !important;
    margin: 0 0 12px !important;
    padding: 12px !important;
    border-color: var(--sky-line) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

#add-component-form > .flex {
    align-items: center;
}

#add-component-form #upload-trigger {
    width: 76px;
    height: 76px;
    border-color: #bfd0e5;
    border-radius: 7px;
    background: #f6f9fd;
}

#add-component-form .flex-1 > .grid {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
    column-gap: 12px;
}

#add-component-form input,
#add-component-form select,
#page-admin input,
#page-admin select {
    min-height: 36px;
    border: 1px solid #cfdbea !important;
    border-radius: 6px !important;
    color: var(--sky-text) !important;
    background: #fff !important;
}

#component-tabs-container {
    min-height: 40px;
    margin-bottom: 10px !important;
    justify-content: flex-start !important;
    border-color: var(--sky-line) !important;
    background: #fff;
}

#component-tabs-container .component-tab {
    padding: 10px 13px;
    color: #65758a;
    font-size: 12px;
}

#components-container {
    gap: 12px !important;
}

#components-container .component-card {
    width: min(410px, 38vw);
    padding: 12px !important;
    border-color: var(--sky-line) !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 12px rgba(22,52,90,.045) !important;
}

#components-container .component-card > header {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
}

#components-container .component-title {
    color: var(--sky-text) !important;
    font-size: 16px !important;
}

#components-container .add-process-card-btn {
    min-height: 35px;
    padding: 6px 12px !important;
    border-radius: 6px !important;
}

#components-container .process-cards-container {
    position: relative;
    gap: 8px !important;
    counter-reset: process-step;
}

#components-container .process-card {
    position: relative;
    margin: 0 0 0 26px !important;
    border-color: #d9e3ef !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    counter-increment: process-step;
}

#components-container .process-card::before {
    content: counter(process-step);
    position: absolute;
    z-index: 2;
    top: 10px;
    left: -28px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--sky-blue);
    font-size: 10px;
    font-weight: 800;
}

#components-container .process-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28px;
    bottom: -14px;
    left: -18px;
    width: 1px;
    background: #bcd0e9;
}

#components-container .process-card > header {
    min-height: 36px;
    padding: 6px 9px !important;
    background: #f5f8fc !important;
}

#components-container .process-card > .p-2 {
    padding: 8px !important;
}

/* Admin and dashboard surfaces */
#page-admin .mb-6.border-b {
    margin-bottom: 14px !important;
    border: 1px solid var(--sky-line) !important;
    border-radius: 8px;
    background: #fff;
}

#page-admin .mb-6.border-b nav {
    gap: 0 !important;
    overflow-x: auto;
}

#page-admin .admin-tab {
    min-height: 42px;
    padding: 0 16px !important;
    font-size: 12px;
}

#page-admin .bg-white,
#page-handover-dashboard main > div,
#page-boss-dashboard main > div {
    border: 1px solid var(--sky-line);
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(20,51,89,.045) !important;
}

#page-admin table,
#page-handover-dashboard table {
    font-size: 12px;
}

#page-admin th,
#page-admin td,
#page-handover-dashboard th,
#page-handover-dashboard td {
    padding: 10px 12px !important;
}

#page-admin thead,
#page-handover-dashboard thead {
    color: #53657c;
    background: #f6f8fb !important;
}

#page-admin #show-add-employee-modal-btn,
#page-admin #add-new-process-btn {
    min-height: 36px;
    background: var(--sky-blue) !important;
    font-size: 12px;
}

/* Consistent modals and controls */
.modal {
    background: rgba(5,22,49,.58) !important;
}

.modal > div {
    border: 1px solid #cfdae8;
    border-radius: 10px !important;
    color: var(--sky-text);
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(6,30,65,.2) !important;
}

.modal > div > div:first-child,
.modal > div > form + div {
    border-color: var(--sky-line) !important;
}

.modal h2,
.modal h3 {
    color: var(--sky-text) !important;
}

.modal input,
.modal select,
.modal textarea {
    border-color: #cfdae8 !important;
    border-radius: 6px !important;
    color: var(--sky-text) !important;
    background: #fff !important;
}

.modal button.bg-blue-600,
.modal button.bg-indigo-600,
.modal button.bg-green-600 {
    background: var(--sky-blue) !important;
}

/* Employee editor: keep the dialog inside the viewport and scroll only its body. */
html.employee-modal-open,
body.employee-modal-open {
    overflow: hidden !important;
}

#employee-modal {
    z-index: 90;
    overflow: hidden;
}

#employee-modal > .employee-modal-panel {
    width: min(100%, 768px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#employee-modal .employee-modal-header,
#employee-modal .employee-modal-footer {
    flex: 0 0 auto;
}

#employee-modal .employee-modal-header {
    min-height: 64px;
    padding: 14px 20px !important;
}

#employee-modal .employee-modal-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0 !important;
    border: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: transparent;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}

#employee-modal .employee-modal-close:hover {
    background: #edf2f7;
}

#employee-modal .employee-modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

#employee-modal .employee-modal-footer {
    min-height: 64px;
    padding: 10px 20px !important;
}

@media (max-width: 767px) {
    #employee-modal {
        padding: 8px !important;
        align-items: stretch;
    }

    #employee-modal > .employee-modal-panel {
        width: 100%;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 14px !important;
    }

    #employee-modal .employee-modal-header {
        min-height: 54px;
        padding: 9px 12px !important;
    }

    #employee-modal .employee-modal-header h3 {
        font-size: 18px !important;
    }

    #employee-modal .employee-modal-body {
        padding: 14px 12px !important;
        grid-template-columns: 1fr;
        gap: 16px !important;
    }

    #employee-modal .employee-modal-footer {
        min-height: 58px;
        padding: 8px 12px !important;
    }

    #employee-modal .employee-modal-footer button {
        min-width: 88px;
        min-height: 40px;
        margin: 0 !important;
    }
}

/* Old workshop PCs: compact, cheap-to-render desktop layout. */
@media (max-width: 1280px) and (min-width: 768px) {
    .blue-sky-sidebar {
        width: 190px;
        padding: 14px 10px 68px;
        box-shadow: none;
    }

    .blue-sky-brand { padding: 0 8px 12px; }
    .blue-sky-brand-mark { width: 32px; height: 32px; box-shadow: none; }
    .blue-sky-brand strong { font-size: 16px; }
    .blue-sky-nav { margin-top: 8px; gap: 3px; }
    .blue-sky-nav-label { margin-top: 8px; }
    .blue-sky-nav a,
    .blue-sky-nav button { min-height: 36px; border-radius: 6px; font-size: 12px; }
    .blue-sky-sidebar-note { display: none; }

    #app-container > .page,
    .blue-sky-page { padding-left: 190px; }

    .blue-sky-breadcrumb-row { height: 50px; margin-bottom: 14px; }
    .blue-sky-heading-copy h1 { font-size: 22px !important; }
    .blue-sky-heading-copy p { display: none; }
    .blue-sky-orders-header { padding-bottom: 14px !important; }
    .blue-sky-kpis article { min-height: 72px; padding: 12px 14px; }
    .blue-sky-kpis i { width: 38px; height: 38px; }
    .blue-sky-table-card th,
    .blue-sky-table-card td { height: 46px; padding: 8px 10px !important; font-size: 11px; }

    #app-container > .page > header:not(.blue-sky-orders-header) { min-height: 50px; }
    #page-tracking > .container.p-2,
    #page-admin > .container,
    #page-handover-dashboard > main,
    #page-boss-dashboard > main { padding: 10px 14px 16px !important; }

    #components-container .component-card { width: min(380px, 42vw); }
}

@media (max-width: 767px) {
    #app-container > .page,
    .blue-sky-page { padding-left: 0; }

    #app-container.sidebar-open .blue-sky-sidebar { transform: translateX(0); }
    #app-container.sidebar-open .blue-sky-sidebar-backdrop { visibility: visible; opacity: 1; }

    #app-container > .page > header:not(.blue-sky-orders-header) {
        min-height: 52px;
        padding: 0 10px !important;
    }

    #app-container > .page > header h1 { font-size: 16px !important; }
    #page-tracking > .container.p-2,
    #page-admin > .container,
    #page-handover-dashboard > main,
    #page-boss-dashboard > main { padding: 10px !important; }

    #order-info-bar { padding: 8px 10px 0; }
    #add-component-form > .flex { align-items: flex-start; }
    #add-component-form .flex-1 > .grid { grid-template-columns: 1fr; }
    #components-container .component-card { width: min(92vw, 410px); }
    #page-admin th,
    #page-admin td { padding: 9px 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

body {
    background: var(--sky-canvas);
    color: var(--sky-text);
    font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}

.blue-sky-page {
    min-height: 100vh;
    padding-left: 220px;
    background: var(--sky-canvas);
}

.blue-sky-page-actions > #cancel-delete-mode-btn.hidden,
.blue-sky-nav > .hidden {
    display: none !important;
}

.blue-sky-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 220px;
    padding: 22px 14px 78px;
    display: flex;
    flex-direction: column;
    color: #fff;
    background:
        radial-gradient(circle at 10% 2%, rgba(31, 112, 235, .3), transparent 31%),
        linear-gradient(180deg, #061d42 0%, #082a5c 58%, #062352 100%);
    box-shadow: 12px 0 36px rgba(8, 35, 79, .08);
}

.blue-sky-brand {
    min-height: 54px;
    padding: 0 10px 19px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    display: flex;
    align-items: center;
    gap: 11px;
}

.blue-sky-brand-mark {
    width: 48px;
    height: 44px;
}

.blue-sky-brand strong {
    display: block;
    font-size: 18px;
    letter-spacing: .02em;
}

.blue-sky-brand small {
    display: block;
    margin-top: 2px;
    color: #83a7d7;
    font-size: 9px;
    letter-spacing: .14em;
}

.blue-sky-nav {
    display: grid;
    gap: 5px;
    margin-top: 15px;
}

.blue-sky-nav-label {
    margin: 15px 12px 4px;
    color: #668bbd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.blue-sky-nav a,
.blue-sky-nav button {
    width: 100%;
    min-height: 43px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #a8bfde;
    background: transparent;
    text-decoration: none;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.blue-sky-nav a:hover,
.blue-sky-nav button:hover,
.blue-sky-nav button.active {
    color: #fff;
    background: linear-gradient(90deg, #1267e5, #1677ef);
    box-shadow: 0 8px 18px rgba(3, 73, 174, .27);
}

.blue-sky-nav a span,
.blue-sky-nav button span {
    width: 22px;
    text-align: center;
    font-size: 19px;
    font-weight: 500;
}

.blue-sky-sidebar-note {
    margin-top: auto;
    padding: 13px;
    border: 1px solid rgba(130, 170, 221, .22);
    border-radius: 11px;
    display: flex;
    gap: 10px;
    background: rgba(16, 57, 111, .62);
}

.blue-sky-sidebar-note > span {
    color: #62b1ff;
}

.blue-sky-sidebar-note strong,
.blue-sky-sidebar-note small {
    display: block;
}

.blue-sky-sidebar-note strong {
    font-size: 11px;
}

.blue-sky-sidebar-note small {
    margin-top: 4px;
    color: #91abd0;
    font-size: 9px;
    line-height: 1.45;
}

.blue-sky-sidebar-backdrop,
.blue-sky-menu-toggle {
    display: none;
}

.blue-sky-orders-header {
    position: relative;
    padding: 0 28px 22px !important;
    box-shadow: 0 1px 0 var(--sky-line) !important;
    background: rgba(255,255,255,.98) !important;
}

.blue-sky-header-inner,
.blue-sky-orders-main {
    width: 100% !important;
    max-width: none !important;
}

.blue-sky-breadcrumb-row {
    height: 64px;
    margin: 0 -28px 24px;
    padding: 0 28px;
    border-bottom: 1px solid var(--sky-line);
    display: flex;
    align-items: center;
    gap: 13px;
    color: #718096;
    font-size: 12px;
}

.blue-sky-breadcrumb-row i {
    color: #bdc9d7;
    font-style: normal;
}

.blue-sky-breadcrumb-row strong {
    color: #33445d;
}

.blue-sky-title-tools {
    align-items: center !important;
    flex-wrap: wrap;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

.blue-sky-heading-copy {
    min-width: 205px;
    flex: 0 0 auto;
}

.blue-sky-heading-copy h1 {
    margin: 0;
    color: var(--sky-text) !important;
    font-size: 27px !important;
    line-height: 1.25;
}

.blue-sky-heading-copy p {
    margin: 5px 0 0;
    color: var(--sky-muted);
    font-size: 12px;
}

.blue-sky-toolbar {
    width: auto !important;
    flex: 0 0 auto;
    align-items: center;
}

.blue-sky-user {
    position: absolute;
    top: 18px;
    right: 122px;
    color: #40516a;
}

.blue-sky-user #welcome-user {
    color: #40516a !important;
    font-size: 12px;
}

.blue-sky-orders-header #admin-panel-btn,
.blue-sky-orders-header #recycle-bin-btn,
.blue-sky-orders-header #logout-btn {
    position: absolute;
    top: 13px;
    width: 38px;
    height: 38px;
    padding: 8px !important;
    border-radius: 8px !important;
    color: #40516a;
}

.blue-sky-orders-header #admin-panel-btn { right: 82px; }
.blue-sky-orders-header #recycle-bin-btn { right: 44px; }
.blue-sky-orders-header #logout-btn { right: 6px; }

.blue-sky-orders-header #admin-panel-btn:hover,
.blue-sky-orders-header #recycle-bin-btn:hover,
.blue-sky-orders-header #logout-btn:hover {
    color: var(--sky-blue);
    background: #edf5ff !important;
}

.blue-sky-page-actions {
    display: flex;
    gap: 7px !important;
    padding: 4px;
    border: 1px solid #d8e3f0;
    border-radius: 10px;
    background: #f7faff;
}

.blue-sky-page-actions > button,
.blue-sky-page-actions > a {
    min-width: 106px;
    min-height: 40px;
    padding: 0 15px !important;
    border: 0;
    border-radius: 7px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.blue-sky-page-actions > button:hover,
.blue-sky-page-actions > a:hover { transform: translateY(-1px); }

.blue-sky-page-actions > button:focus-visible,
.blue-sky-page-actions > a:focus-visible {
    outline: 3px solid rgba(18, 103, 229, .22);
    outline-offset: 2px;
}

.blue-sky-page-actions > button::before,
.blue-sky-page-actions > a::before {
    margin-right: 6px;
    font-size: 15px;
    font-weight: 900;
}

.blue-sky-page-actions #show-add-order-modal-btn {
    color: #fff !important;
    background: #1267e5 !important;
}
.blue-sky-page-actions #show-add-order-modal-btn::before { content: "+"; }
.blue-sky-page-actions #show-add-order-modal-btn:hover { background: #075bcf !important; }

.blue-sky-page-actions #factory-ai-analysis-btn,
.blue-sky-page-actions #craft-ai-btn,
.blue-sky-page-actions > a {
    border: 1px solid #bdd4f2;
    color: #155cae !important;
    background: #edf5ff !important;
}
.blue-sky-page-actions #factory-ai-analysis-btn::before { content: "✦"; }
.blue-sky-page-actions #craft-ai-btn::before { content: "师"; }
.blue-sky-page-actions > a::before { content: "▦"; }
.blue-sky-page-actions #factory-ai-analysis-btn:hover,
.blue-sky-page-actions #craft-ai-btn:hover,
.blue-sky-page-actions > a:hover { background: #e1efff !important; }

.blue-sky-page-actions #delete-mode-btn {
    margin-left: 5px;
    border: 1px solid #efb8bd;
    color: #c83240 !important;
    background: #fff1f2 !important;
}
.blue-sky-page-actions #delete-mode-btn::before { content: "×"; }
.blue-sky-page-actions #delete-mode-btn:hover { background: #ffe5e8 !important; }
.blue-sky-page-actions #cancel-delete-mode-btn {
    color: #fff !important;
    background: #6b7b90 !important;
}
.blue-sky-page-actions #cancel-delete-mode-btn::before { content: "↩"; }
.blue-sky-page-actions #cancel-delete-mode-btn:hover { background: #58697f !important; }

.blue-sky-search-wrap {
    position: relative;
    min-width: 260px;
    max-width: 520px;
    margin: 0 !important;
    flex: 1 1 420px;
}

.blue-sky-search-wrap::before {
    content: "⌕";
    position: absolute;
    left: 15px;
    top: 50%;
    z-index: 1;
    transform: translateY(-52%) rotate(-18deg);
    color: #60728a;
    font-size: 21px;
}

.blue-sky-search-wrap #search-input {
    height: 40px;
    padding: 0 16px 0 46px !important;
    border: 1px solid #cad6e4 !important;
    border-radius: 8px !important;
    color: var(--sky-text);
    background: #fff !important;
    box-shadow: inset 0 1px 2px rgba(16, 42, 76, .03);
    outline: none;
}

.blue-sky-search-wrap #search-input:focus {
    border-color: #6aa4f3 !important;
    box-shadow: 0 0 0 3px rgba(18,103,229,.1);
}

.blue-sky-orders-main {
    padding: 0 28px 26px !important;
}

.blue-sky-tabs {
    min-height: 66px;
    border-bottom: 1px solid var(--sky-line);
    display: flex;
    align-items: stretch;
    gap: 30px;
}

.blue-sky-tabs > button {
    position: relative;
    padding: 3px 2px 0;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #53657c;
    background: transparent;
    font-size: 13px;
    font-weight: 750;
}

.blue-sky-tabs > button.active {
    color: var(--sky-blue);
    border-bottom-color: var(--sky-blue);
}

.blue-sky-tabs > button span {
    margin-left: 5px;
    padding: 2px 8px;
    border-radius: 99px;
    color: #607086;
    background: #e7ecf3;
    font-size: 10px;
}

.blue-sky-tabs > button.active span {
    color: #fff;
    background: #3e88ef;
}

.blue-sky-kpis {
    margin: 13px 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.blue-sky-kpis article {
    min-height: 66px;
    padding: 10px 14px;
    border: 1px solid var(--sky-line);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--sky-card);
    box-shadow: 0 6px 20px rgba(23, 57, 103, .035);
}

.blue-sky-kpis i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 850;
}

.blue-sky-kpis i.blue { color: var(--sky-blue); background: #e8f2ff; }
.blue-sky-kpis i.red { color: var(--sky-danger); background: #fff0ed; }
.blue-sky-kpis i.green { color: var(--sky-success); background: #e9f8ef; }

.blue-sky-kpis span,
.blue-sky-kpis strong {
    display: block;
}

.blue-sky-kpis span {
    color: #394b63;
    font-size: 11px;
    font-weight: 650;
}

.blue-sky-kpis strong {
    margin-top: 1px;
    color: var(--sky-blue);
    font-size: 22px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.blue-sky-kpis article:nth-child(3) strong { color: var(--sky-danger); }
.blue-sky-kpis article:nth-child(4) strong { color: var(--sky-success); }

.blue-sky-table-card {
    border: 1px solid #d9e3ef;
    border-radius: 10px !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: 0 6px 22px rgba(19, 50, 90, .045) !important;
}

.blue-sky-table-card table {
    min-width: 960px;
    border-collapse: collapse;
}

.blue-sky-table-card thead {
    display: table-header-group !important;
    border: 0 !important;
}

.blue-sky-table-card th {
    height: 44px;
    padding: 0 14px !important;
    color: #42546c !important;
    background: #f8fafc;
    border-bottom: 1px solid var(--sky-line);
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

.blue-sky-table-card td {
    height: 61px;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--sky-line-soft) !important;
    color: #243750;
    font-size: 12px;
    vertical-align: middle;
}

.blue-sky-table-card tbody tr:last-child td {
    border-bottom: 0 !important;
}

.blue-sky-table-card .order-item:hover {
    background: #f7fbff;
}

.blue-sky-table-card .order-item-number {
    color: #0867e8 !important;
    font-size: 12px;
}

.blue-sky-table-card .order-item-name {
    color: #182a42;
    font-size: 12px;
}

.blue-sky-table-card .order-item-code {
    margin-top: 3px;
    color: #8190a2 !important;
    font-size: 10px;
}

.order-item-process {
    color: #40536b;
    font-weight: 700;
}

.blue-sky-progress-wrap {
    min-width: 92px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blue-sky-progress-track {
    width: 68px;
    height: 6px;
    border-radius: 99px;
    overflow: hidden;
    background: #dfe6ef;
}

.blue-sky-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0867e8, #3c8cf5);
}

.blue-sky-progress-wrap b {
    color: #52647a;
    font-size: 10px;
    font-weight: 750;
}

.blue-sky-table-card .order-item-remaining > div {
    justify-content: flex-start !important;
    flex-wrap: nowrap;
}

.blue-sky-table-card .order-item-remaining span {
    font-size: 10px !important;
    white-space: nowrap;
}

.blue-sky-table-card .normal-mode-cell {
    white-space: nowrap;
}

.blue-sky-table-card .normal-mode-cell button {
    min-height: 29px;
    padding: 0 10px !important;
    border: 1px solid #cbd7e5;
    border-radius: 5px !important;
    color: #42536a !important;
    background: #fff !important;
    font-size: 10px !important;
    font-weight: 750 !important;
}

.blue-sky-table-card .normal-mode-cell .view-handover-dashboard-btn,
.blue-sky-table-card .normal-mode-cell .ai-analysis-btn {
    color: #0766e4 !important;
    border-color: #6da4ee;
}

.blue-sky-table-card .normal-mode-cell .ship-review-btn {
    color: #20965c !important;
    border-color: #69c892;
}

.blue-sky-table-card .order-actions-menu-wrap {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

.blue-sky-table-card .normal-mode-cell .order-actions-menu-btn {
    min-width: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.blue-sky-table-card .order-actions-menu-btn[aria-expanded="true"] {
    color: #0766e4 !important;
    border-color: #6da4ee;
    background: #edf5ff !important;
}

.blue-sky-table-card .order-actions-menu-chevron {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform .15s ease;
}

.blue-sky-table-card .order-actions-menu-btn[aria-expanded="true"] .order-actions-menu-chevron {
    transform: translateY(1px) rotate(180deg);
}

.order-actions-menu {
    position: fixed;
    inset: auto;
    z-index: 120;
    width: 174px;
    margin: 0;
    padding: 6px;
    border: 1px solid #d5e0ed;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(18, 47, 84, .18);
    white-space: normal;
}

.order-actions-menu .order-actions-menu-item {
    width: 100%;
    min-height: 46px;
    padding: 7px 10px !important;
    border: 0 !important;
    border-radius: 6px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    color: #34465d !important;
    background: transparent !important;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.order-actions-menu .order-actions-menu-item:hover,
.order-actions-menu .order-actions-menu-item:focus-visible {
    background: #f1f6fd !important;
    outline: none;
}

.order-actions-menu .order-actions-menu-item + .order-actions-menu-item {
    margin-top: 2px;
}

.order-actions-menu .order-actions-menu-item > span {
    font-size: 12px;
    font-weight: 800;
}

.order-actions-menu .order-actions-menu-item > small {
    color: #7a899d;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
}

.order-actions-menu .order-actions-menu-item.ship-review-btn > span {
    color: #20965c;
}

.order-actions-menu .order-actions-menu-item:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.blue-sky-empty-state {
    padding: 50px 20px;
    color: var(--sky-muted);
    text-align: center;
    font-size: 13px;
}

.blue-sky-footer {
    color: #9aa7b6 !important;
}

#connection-status {
    left: 16px;
    bottom: 18px;
    width: 188px;
    min-height: 42px;
    padding: 0 14px 0 35px;
    border: 1px solid rgba(147, 180, 222, .24);
    border-radius: 9px;
    display: flex;
    align-items: center;
    color: #d7e7fb;
    background: rgba(12, 50, 102, .9);
    box-shadow: none;
}

#connection-status::before {
    content: "";
    position: absolute;
    left: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #39d98a;
    box-shadow: 0 0 0 4px rgba(57,217,138,.1);
}

#connection-status.status-disconnected::before { background: #ff6b6b; }
#connection-status.status-connecting::before { background: #f8bb46; }

.blue-sky-mobile-process,
.blue-sky-mobile-progress {
    display: none;
}

@media (max-width: 1100px) {
    .blue-sky-page-actions > button,
    .blue-sky-page-actions > a {
        min-width: 88px;
        padding-inline: 11px !important;
    }

    .blue-sky-toolbar {
        align-items: flex-end;
    }
}

@media (max-width: 767px) {
    .blue-sky-page {
        padding-left: 0;
    }

    .blue-sky-sidebar {
        z-index: 70;
        width: min(78vw, 280px);
        transform: translateX(-105%);
        transition: transform .22s ease;
    }

    .blue-sky-page.sidebar-open .blue-sky-sidebar {
        transform: translateX(0);
    }

    .blue-sky-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgba(4, 18, 41, .44);
        transition: opacity .22s ease, visibility .22s ease;
    }

    .blue-sky-page.sidebar-open .blue-sky-sidebar-backdrop {
        visibility: visible;
        opacity: 1;
    }

    .blue-sky-orders-header {
        padding: 0 15px 16px !important;
    }

    .blue-sky-breadcrumb-row {
        height: 54px;
        margin: 0 -15px 16px;
        padding: 0 15px;
        gap: 9px;
    }

    .blue-sky-menu-toggle {
        width: 34px;
        height: 34px;
        margin-right: 2px;
        border: 0;
        border-radius: 8px;
        display: grid;
        place-items: center;
        color: #27405f;
        background: #eef4fb;
        font-size: 18px;
    }

    .blue-sky-title-tools {
        display: flex !important;
        align-items: stretch !important;
        flex-direction: column;
        gap: 0 !important;
    }

    .blue-sky-heading-copy { order: 1; }
    .blue-sky-toolbar { order: 2; }
    .blue-sky-title-tools .blue-sky-search-wrap {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-top: 10px !important;
        flex: 0 0 auto;
        order: 3;
    }

    .blue-sky-heading-copy h1 {
        font-size: 22px !important;
    }

    .blue-sky-heading-copy p {
        font-size: 11px;
    }

    .blue-sky-toolbar {
        display: block !important;
        width: 100% !important;
        margin-top: 15px;
    }

    .blue-sky-user {
        position: absolute;
        top: 16px;
        right: 108px;
    }

    .blue-sky-user #welcome-user {
        max-width: 84px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .blue-sky-orders-header #admin-panel-btn { display: none !important; }
    .blue-sky-orders-header #recycle-bin-btn,
    .blue-sky-orders-header #logout-btn {
        top: 8px;
        width: 38px;
        height: 38px;
        border: 1px solid #cfdaea;
        background: #f8fbff !important;
    }
    .blue-sky-orders-header #recycle-bin-btn { right: 61px; }
    .blue-sky-orders-header #logout-btn { right: 14px; }

    .blue-sky-page-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px !important;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .blue-sky-page-actions > button::before,
    .blue-sky-page-actions > a::before { display: none; }

    .blue-sky-page-actions > button,
    .blue-sky-page-actions > a {
        min-width: 0;
        min-height: 38px;
        padding-inline: 8px !important;
        font-size: 11px !important;
        box-shadow: none;
    }

    .blue-sky-page-actions #show-add-order-modal-btn {
        color: #fff !important;
        background: #1267e5 !important;
    }

    .blue-sky-page-actions #factory-ai-analysis-btn,
    .blue-sky-page-actions > a {
        border: 1px solid #b9d2f3;
        color: #155cae !important;
        background: #edf5ff !important;
    }

    .blue-sky-page-actions #delete-mode-btn {
        display: none !important;
    }

    .blue-sky-search-wrap #search-input {
        height: 43px;
        font-size: 12px;
    }

    .blue-sky-orders-main {
        padding: 0 14px 22px !important;
    }

    .blue-sky-tabs {
        min-height: 58px;
        gap: 19px;
        overflow-x: auto;
    }

    .blue-sky-tabs > button {
        flex: 0 0 auto;
        font-size: 12px;
    }

    .blue-sky-kpis {
        margin: 10px 0;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    .blue-sky-kpis article {
        min-width: 0;
        min-height: 56px;
        padding: 7px 3px;
        display: block;
        text-align: center;
    }

    .blue-sky-kpis i { display: none; }

    .blue-sky-kpis span {
        overflow: hidden;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .blue-sky-kpis strong { margin-top: 2px; font-size: 20px; }

    #mobile-sort-header {
        min-height: 42px;
        margin: 4px 0 9px !important;
        padding: 3px !important;
        border: 1px solid #d9e4f1;
        border-radius: 9px;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 3px;
        background: #fff;
    }

    #mobile-sort-header button {
        min-height: 34px;
        border-radius: 6px;
        color: #64768c !important;
        font-size: 11px;
    }

    #mobile-sort-header button.active {
        color: #075fcf !important;
        background: #eaf3ff;
    }

    .blue-sky-table-card {
        border: 0;
        overflow: visible;
        background: transparent !important;
        box-shadow: none !important;
    }

    .blue-sky-table-card table {
        min-width: 0;
    }

    .blue-sky-table-card thead {
        display: none !important;
    }

    .blue-sky-table-card .order-item {
        margin-bottom: 10px !important;
        border: 1px solid #dce5f0 !important;
        border-radius: 11px !important;
        background: #fff;
        box-shadow: 0 5px 15px rgba(24, 56, 96, .055) !important;
    }

    .blue-sky-table-card td {
        height: auto;
    }

    .blue-sky-table-card .order-item > td:first-child {
        width: 100%;
        padding: 10px !important;
    }

    .blue-sky-mobile-card-head {
        align-items: stretch !important;
        gap: 9px;
    }

    .blue-sky-mobile-order-main {
        min-width: 0;
        flex: 1 1 auto;
    }

    .blue-sky-mobile-order-main .order-item-number { font-size: 13px !important; }
    .blue-sky-mobile-order-main .order-item-name {
        margin-top: 2px !important;
        overflow: hidden;
        font-size: 13px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .blue-sky-mobile-meta-row {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 13px;
        margin-top: 7px;
        color: #8290a2;
        font-size: 10px;
    }

    .blue-sky-mobile-meta-row span {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .blue-sky-mobile-meta-row b {
        max-width: 112px;
        overflow: hidden;
        color: #344860;
        font-weight: 750;
        text-overflow: ellipsis;
    }

    .blue-sky-mobile-deadline {
        width: 82px;
        min-width: 82px;
        min-height: 82px;
        margin-left: 0 !important;
        padding: 8px 5px;
        border: 1px solid #d9e5f2;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #f7faff;
        text-align: center !important;
    }

    .blue-sky-mobile-countdown-label {
        color: #718198;
        font-size: 9px;
        font-weight: 700;
    }

    .blue-sky-mobile-deadline .order-item-remaining {
        margin: 4px 0 0;
        font-size: 11px !important;
        line-height: 1.15;
    }

    .blue-sky-mobile-deadline .order-item-remaining > div {
        justify-content: center !important;
        gap: 2px !important;
    }

    .blue-sky-mobile-deadline .order-item-remaining span {
        font-size: 9px !important;
    }

    .blue-sky-mobile-deadline .order-item-remaining span.font-bold {
        padding: 4px 7px !important;
        font-size: 17px !important;
        line-height: 1;
    }

    .blue-sky-mobile-deadline-compact {
        width: 100%;
        display: grid;
        place-items: center;
        gap: 4px;
        color: #31516f;
        line-height: 1;
    }

    .blue-sky-mobile-deadline-compact span {
        color: inherit !important;
        font-size: 10px !important;
        font-weight: 800;
        letter-spacing: .04em;
    }

    .blue-sky-mobile-deadline-compact strong {
        color: #194a84;
        font-size: 20px;
        font-weight: 850;
        line-height: 1;
        white-space: nowrap;
    }

    .blue-sky-mobile-deadline-compact small {
        margin-left: 2px;
        font-size: 10px;
        font-weight: 750;
    }

    .blue-sky-mobile-deadline-compact.overdue,
    .blue-sky-mobile-deadline-compact.overdue strong { color: #d9303e; }
    .blue-sky-mobile-deadline-compact.warning strong { color: #bd5f0f; }
    .blue-sky-mobile-deadline-compact.urgent strong { color: #cf3440; }
    .blue-sky-mobile-deadline-compact.shipped { color: #218a59; }

    .blue-sky-mobile-progress {
        display: block;
        margin-top: 7px;
    }

    .blue-sky-mobile-progress .blue-sky-progress-wrap {
        width: 100%;
        max-width: 190px;
    }

    .blue-sky-mobile-progress .blue-sky-progress-track {
        flex: 1;
        width: auto;
    }

    .blue-sky-table-card .normal-mode-cell {
        margin-top: 9px !important;
        padding-top: 9px !important;
        text-align: left !important;
    }

    .blue-sky-table-card .normal-mode-cell .space-x-2 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .blue-sky-table-card .normal-mode-cell .space-x-2 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0 !important;
    }

    .blue-sky-table-card .normal-mode-cell button {
        min-width: 0;
        min-height: 34px;
        padding-inline: 4px !important;
        font-size: 10px !important;
    }

    #connection-status {
        left: 12px;
        bottom: 12px;
        width: auto;
        min-height: 32px;
        padding: 0 11px 0 27px;
        border-radius: 7px;
        color: #fff;
        background: #0f9965;
    }

    #connection-status::before {
        left: 11px;
        width: 7px;
        height: 7px;
        background: #fff;
    }
}

/* Final responsive overrides stay last so 720p workshop screens remain compact. */
@media (max-width: 1280px) and (min-width: 768px) {
    .blue-sky-sidebar {
        width: 190px;
        padding: 14px 10px 68px;
        box-shadow: none;
    }
    .blue-sky-brand { padding: 0 8px 12px; }
    .blue-sky-brand-mark { width: 44px; height: 40px; box-shadow: none; }
    .blue-sky-brand strong { font-size: 16px; }
    .blue-sky-nav { margin-top: 8px; gap: 3px; }
    .blue-sky-nav-label { margin-top: 8px; }
    .blue-sky-nav a,
    .blue-sky-nav button { min-height: 36px; border-radius: 6px; font-size: 12px; }
    .blue-sky-sidebar-note { display: none; }
    #app-container > .page,
    .blue-sky-page { padding-left: 190px; }
    .blue-sky-breadcrumb-row { height: 50px; margin-bottom: 14px; }
    .blue-sky-heading-copy h1 { font-size: 22px !important; }
    .blue-sky-heading-copy p { display: none; }
    .blue-sky-orders-header { padding-bottom: 14px !important; }
    .blue-sky-kpis article { min-height: 60px; padding: 8px 10px; }
    .blue-sky-kpis i { width: 30px; height: 30px; font-size: 14px; }
    .blue-sky-table-card th,
    .blue-sky-table-card td { height: 46px; padding: 8px 10px !important; font-size: 11px; }
}

@media (max-width: 767px) {
    #app-container > .page,
    .blue-sky-page { padding-left: 0; }
    #app-container.sidebar-open .blue-sky-sidebar { transform: translateX(0); }
    #app-container.sidebar-open .blue-sky-sidebar-backdrop { visibility: visible; opacity: 1; }
}

/* Tracking page: compact component creation and a usable top scroller. */
#add-component-form {
    overflow: visible;
}

.component-create-layout {
    display: grid;
    grid-template-columns: 128px minmax(210px, .9fr) minmax(280px, 1.15fr) 104px;
    gap: 12px;
    align-items: stretch;
}

.component-image-field {
    display: flex;
    align-items: stretch;
}

#add-component-form #upload-trigger {
    width: 128px;
    height: 128px;
    flex: 0 0 128px;
    border-width: 2px;
    border-radius: 8px;
}

#add-component-form #upload-trigger svg {
    width: 38px;
    height: 38px;
}

.component-primary-fields {
    min-width: 0;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.component-primary-fields > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.component-copy-field:not(.hidden) {
    min-width: 0;
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-color: #cfe0f3 !important;
    background: #f6faff !important;
}

.component-copy-field.hidden {
    display: none !important;
}

.component-copy-field p {
    margin-top: 5px !important;
    color: #5f7794 !important;
    line-height: 1.35;
}

.component-create-actions {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
}

.component-create-actions > div,
.component-create-actions > button {
    min-height: 0;
    margin: 0 !important;
    border-radius: 7px !important;
}

.component-create-actions > button {
    padding: 0 16px !important;
    background: var(--sky-blue) !important;
}

.component-order-quantity-editor {
    margin: -2px 0 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #c9dcf4;
    border-radius: 8px;
    background: #f4f8fe;
}

.component-order-quantity-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.component-order-quantity-copy > span {
    color: #17385f;
    font-size: 13px;
    font-weight: 800;
}

.component-order-quantity-copy > small {
    color: #6e8098;
    font-size: 10px;
    line-height: 1.3;
}

.component-order-quantity-control {
    min-width: 178px;
    display: grid;
    grid-template-columns: minmax(72px, 1fr) auto auto;
    align-items: center;
    gap: 6px;
}

.component-order-quantity-input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 9px;
    border: 1px solid #aac4e6;
    border-radius: 6px;
    color: #17385f;
    background: #fff;
    font-size: 14px;
    font-weight: 800;
}

.component-order-quantity-input:focus {
    border-color: var(--sky-blue);
    outline: 2px solid rgba(18, 103, 229, .16);
    outline-offset: 0;
}

.component-order-quantity-unit {
    color: #61758d;
    font-size: 12px;
}

.save-component-order-quantity-btn {
    min-width: 52px;
    height: 36px;
    padding: 0 11px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: var(--sky-blue);
    font-size: 12px;
    font-weight: 800;
}

.save-component-order-quantity-btn:hover { background: #0b55c5; }

.dark .component-order-quantity-editor {
    border-color: #31527b;
    background: #1b2d45;
}

.dark .component-order-quantity-copy > span { color: #d7e8ff; }
.dark .component-order-quantity-copy > small,
.dark .component-order-quantity-unit { color: #9fb3cb; }
.dark .component-order-quantity-input {
    border-color: #4b6687;
    color: #f0f6ff;
    background: #152438;
}

#component-tabs-container {
    margin-bottom: 0 !important;
}

#fake-top-scroll-container.component-top-scrollbar {
    width: 100%;
    height: 24px;
    margin: 4px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #d9e4f1;
    border-radius: 6px;
    background: #eef3f9;
    scrollbar-color: #7f9abc #eef3f9;
}

#fake-top-scroll-container.component-top-scrollbar::-webkit-scrollbar {
    height: 20px;
}

#fake-top-scroll-container.component-top-scrollbar::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #eef3f9;
}

#fake-top-scroll-container.component-top-scrollbar::-webkit-scrollbar-thumb {
    min-width: 70px;
    border: 3px solid #eef3f9;
    border-radius: 8px;
    background: #7f9abc;
}

#fake-top-scroll-container.component-top-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #55769f;
}

#fake-top-scroll-content {
    height: 1px;
}

@media (max-width: 1100px) and (min-width: 641px) {
    .component-create-layout {
        grid-template-columns: 118px minmax(200px, 1fr) minmax(240px, 1.12fr);
    }

    #add-component-form #upload-trigger {
        width: 118px;
        height: 118px;
        flex-basis: 118px;
    }

    .component-create-actions {
        grid-column: 2 / 4;
        display: flex;
        justify-content: flex-end;
    }

    .component-create-actions > div,
    .component-create-actions > button {
        min-height: 36px;
    }
}

@media (max-width: 640px) {
    .component-create-layout {
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: start;
    }

    #add-component-form #upload-trigger {
        width: 112px;
        height: 112px;
        flex-basis: 112px;
    }

    .component-copy-field,
    .component-create-actions {
        grid-column: 1 / -1;
    }

    .component-create-actions {
        display: flex;
        justify-content: space-between;
    }

    .component-create-actions > div,
    .component-create-actions > button {
        min-height: 42px;
    }

    .component-order-quantity-editor {
        margin-bottom: 10px;
        padding: 10px;
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .component-order-quantity-copy {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
    }

    .component-order-quantity-control {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) auto 64px;
    }

    .component-order-quantity-input,
    .save-component-order-quantity-btn {
        height: 42px;
    }

    #fake-top-scroll-container.component-top-scrollbar {
        display: none !important;
    }
}

/* ===== Tracking page mobile redesign ===== */
@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    #page-tracking > header {
        position: sticky;
        top: 0;
        z-index: 35;
        min-height: 52px !important;
        padding: 0 10px !important;
    }

    #page-tracking > header > .container {
        display: grid !important;
        grid-template-columns: 88px minmax(0, 1fr) 88px;
        gap: 4px;
    }

    #page-tracking > header #back-to-orders-btn {
        min-height: 34px;
        padding: 0 9px;
        justify-self: start;
        font-size: 12px !important;
        white-space: nowrap;
    }

    #page-tracking > header #tracking-page-title {
        min-width: 0;
        overflow: hidden;
        font-size: 17px !important;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #page-tracking > header .w-24,
    #page-tracking > header .sm\:w-32 {
        width: 88px !important;
    }

    #page-tracking > .container {
        padding: 8px !important;
    }

    #add-component-form {
        margin-bottom: 9px !important;
        padding: 10px !important;
        gap: 0 !important;
        border-radius: 10px !important;
    }

    .component-create-layout {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 10px;
    }

    #add-component-form #upload-trigger {
        width: 88px;
        height: 88px;
        flex-basis: 88px;
        border-radius: 7px;
    }

    #add-component-form #upload-trigger svg {
        width: 30px;
        height: 30px;
    }

    #add-component-form #upload-trigger span {
        margin-top: 3px !important;
        font-size: 11px;
    }

    .component-primary-fields {
        gap: 7px;
    }

    .component-primary-fields label,
    .component-copy-field label {
        margin-bottom: 3px !important;
        font-size: 11px !important;
        line-height: 1.25;
    }

    .component-primary-fields input,
    .component-primary-fields select,
    .component-copy-field select {
        min-height: 38px !important;
        height: 38px;
        padding: 0 9px !important;
        font-size: 14px !important;
    }

    .component-copy-field {
        grid-column: 1 / -1;
    }

    .component-copy-field:not(.hidden) {
        padding: 9px !important;
    }

    .component-copy-field p {
        margin-top: 4px !important;
        font-size: 11px !important;
        line-height: 1.35;
    }

    .component-create-actions {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    .component-create-actions > div,
    .component-create-actions > button {
        min-height: 38px;
        height: 38px !important;
        padding: 0 13px !important;
        font-size: 13px !important;
    }

    #component-tabs-container {
        min-height: 42px;
        gap: 0 !important;
        padding: 0 2px !important;
        border-radius: 8px 8px 0 0;
        scrollbar-width: thin;
        scrollbar-color: #a9b8ca transparent;
    }

    #component-tabs-container::-webkit-scrollbar,
    #components-container .process-tabs-container::-webkit-scrollbar {
        height: 4px;
    }

    #component-tabs-container::-webkit-scrollbar-thumb,
    #components-container .process-tabs-container::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: #a9b8ca;
    }

    #component-tabs-container .component-tab {
        min-height: 40px;
        padding: 8px 11px !important;
        font-size: 12px !important;
    }

    #components-container {
        width: 100%;
        gap: 8px !important;
        padding: 0 0 16px !important;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    #components-container .component-card {
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 100%;
        padding: 10px !important;
        border-radius: 10px !important;
        scroll-snap-align: start;
    }

    #components-container .component-card > header {
        gap: 9px !important;
        margin-bottom: 7px !important;
        padding-bottom: 9px !important;
    }

    #components-container .component-card > header > .flex:first-child {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 7px !important;
    }

    #components-container .component-card > header > .flex:first-child > .flex:first-child {
        width: 100%;
    }

    #components-container .component-header-img {
        width: 42px !important;
        height: 42px !important;
        margin-right: 3px !important;
    }

    #components-container .component-title {
        font-size: 16px !important;
    }

    #components-container .component-card > header > .flex:first-child > .flex:last-child {
        width: 100%;
        min-height: 38px;
        padding: 0 3px !important;
        justify-content: flex-end;
        border-radius: 7px !important;
        box-shadow: none !important;
    }

    #components-container .component-card > header > .flex:first-child > .flex:last-child button {
        width: 39px;
        height: 36px;
        padding: 0 !important;
        display: grid;
        place-items: center;
    }

    #components-container .component-card > header > .flex:first-child > .flex:last-child button svg {
        width: 17px;
        height: 17px;
    }

    #components-container .component-card > header > .flex:first-child > .flex:last-child .w-px {
        height: 18px !important;
    }

    #components-container .component-link-card-select,
    #components-container .component-card header p {
        font-size: 10px !important;
    }

    #components-container .add-process-card-btn {
        min-height: 38px;
        padding: 7px 10px !important;
        font-size: 13px !important;
    }

    #components-container .process-tabs-container {
        min-height: 42px;
        margin-bottom: 8px !important;
        gap: 0 !important;
        scrollbar-width: thin;
        scrollbar-color: #a9b8ca transparent;
    }

    #components-container .process-tab {
        min-height: 40px;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    #components-container .process-cards-container {
        gap: 8px !important;
    }

    #components-container .process-card {
        width: 100%;
        margin: 0 !important;
        border-radius: 8px !important;
    }

    #components-container .process-card::before,
    #components-container .process-card::after {
        display: none !important;
    }

    #components-container .process-card > header {
        min-height: 38px;
        padding: 6px 8px !important;
    }

    #components-container .process-card .process-title {
        min-width: 0;
        font-size: 14px !important;
    }

    #components-container .process-card .process-title > span {
        display: none;
    }

    #components-container .process-card > .p-2 {
        padding: 9px !important;
    }

    #components-container .process-card > .p-2 > .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    #components-container .process-card > .p-2 > .grid-cols-3 > .relative:first-child {
        grid-column: 1 / -1;
    }

    #components-container .process-card label {
        font-size: 10px !important;
    }

    #components-container .process-card input {
        width: 100%;
        min-width: 0;
        height: 38px !important;
        padding: 0 8px !important;
        font-size: 13px !important;
    }

    #components-container .process-card .target-quantity-input {
        font-size: 16px !important;
    }

    #components-container .process-card > .p-2 > .grid-cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px;
        padding: 6px 0 !important;
        border: 0 !important;
    }

    #components-container .process-card > .p-2 > .grid-cols-5 > div {
        min-height: 48px;
        padding: 5px 7px !important;
        border: 1px solid #e5ebf3 !important;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #f8fafc;
    }

    #components-container .process-card > .p-2 > .grid-cols-5 p:first-child {
        min-height: 0;
        font-size: 10px !important;
        line-height: 1.25;
    }

    #components-container .process-card > .p-2 > .grid-cols-5 p:last-child {
        margin-top: 2px;
        font-size: 17px !important;
    }

    #connection-status {
        right: 8px;
        bottom: 8px;
        left: auto;
        width: auto;
        min-width: 76px;
        min-height: 29px;
        padding: 0 9px 0 25px;
        border-radius: 15px;
        font-size: 10px;
        opacity: .92;
    }

    #connection-status::before {
        left: 10px;
        width: 6px;
        height: 6px;
        box-shadow: 0 0 0 3px rgba(57,217,138,.1);
    }
}

/* Mobile process cards: one-line data and finger-friendly ordering controls. */
@media (max-width: 767px) {
    #components-container .process-card > header {
        gap: 5px;
    }

    #components-container .process-card > header > .flex:first-child {
        min-width: 0;
        flex: 1;
        gap: 5px !important;
        overflow: visible;
    }

    #components-container .process-card > header > .flex:first-child > .flex:first-child {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        display: flex;
        flex-direction: row !important;
        gap: 4px !important;
    }

    #components-container .process-card .process-title {
        order: 1;
        flex: 1;
    }

    #components-container .move-card-up-btn,
    #components-container .move-card-down-btn,
    #components-container .delete-card-btn {
        width: 38px;
        height: 38px;
        padding: 0 !important;
        border: 1px solid #d9e2ee;
        border-radius: 7px !important;
        display: grid;
        place-items: center;
        background: #fff;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    #components-container .move-card-up-btn svg,
    #components-container .move-card-down-btn svg,
    #components-container .delete-card-btn svg {
        width: 18px;
        height: 18px;
    }

    #components-container .delete-card-btn {
        color: #df5360;
    }

    #components-container .process-card > .p-2 > .grid-cols-3 {
        grid-template-columns: minmax(70px, .78fr) minmax(0, 1.1fr) minmax(0, 1.1fr) !important;
        gap: 5px !important;
    }

    #components-container .process-card > .p-2 > .grid-cols-3 > .relative:first-child {
        grid-column: auto;
    }

    #components-container .process-card input {
        height: 36px !important;
        padding: 0 4px !important;
        font-size: 11px !important;
    }

    #components-container .process-card .target-quantity-input {
        padding-inline: 7px !important;
        font-size: 15px !important;
    }

    #components-container .process-card > .p-2 > .grid-cols-5 {
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)) !important;
        gap: 4px;
        padding: 5px 0 0 !important;
    }

    #components-container .process-card > .p-2 > .grid-cols-5 > div {
        min-height: 50px;
        padding: 4px 2px !important;
    }

    #components-container .process-card > .p-2 > .grid-cols-5 p:first-child {
        font-size: 9px !important;
        line-height: 1.15;
    }

    #components-container .process-card > .p-2 > .grid-cols-5 p:last-child {
        margin-top: 2px;
        font-size: 15px !important;
    }
}

@media (max-width: 374px) {
    #components-container .move-card-up-btn,
    #components-container .move-card-down-btn,
    #components-container .delete-card-btn {
        width: 34px;
        height: 36px;
    }

    #components-container .process-card > .p-2 > .grid-cols-3 {
        grid-template-columns: minmax(64px, .72fr) minmax(0, 1.14fr) minmax(0, 1.14fr) !important;
    }

    #components-container .process-card input {
        font-size: 10px !important;
    }
}

/* ===== Order workspace: compact meeting-friendly shell ===== */
@media (min-width: 768px) {
    #app-container.sidebar-collapsed > .page,
    #app-container.sidebar-collapsed .blue-sky-page {
        padding-left: 76px;
    }

    #app-container.sidebar-collapsed .blue-sky-sidebar {
        width: 76px;
        padding: 18px 10px 68px;
    }

    #app-container.sidebar-collapsed .blue-sky-brand {
        padding-inline: 0;
        justify-content: center;
    }

    #app-container.sidebar-collapsed .blue-sky-brand-copy,
    #app-container.sidebar-collapsed .blue-sky-nav-label,
    #app-container.sidebar-collapsed .blue-sky-nav-text,
    #app-container.sidebar-collapsed .blue-sky-sidebar-note {
        display: none;
    }

    #app-container.sidebar-collapsed .blue-sky-nav a,
    #app-container.sidebar-collapsed .blue-sky-nav button {
        min-height: 48px;
        padding: 0;
        justify-content: center;
    }

    #app-container.sidebar-collapsed .blue-sky-nav a > span:first-child,
    #app-container.sidebar-collapsed .blue-sky-nav button > span:first-child {
        width: auto;
        font-size: 21px;
    }

    #app-container.sidebar-collapsed #connection-status {
        left: 17px;
        width: 42px;
        min-width: 42px;
        padding: 0;
        overflow: hidden;
        color: transparent;
        font-size: 0;
    }

    #app-container.sidebar-collapsed #connection-status::before {
        left: 17px;
    }
}

.blue-sky-page,
#app-container > .page,
.blue-sky-sidebar {
    transition: width .2s ease, padding-left .2s ease;
}

.blue-sky-orders-header {
    padding: 12px 22px !important;
}

.blue-sky-title-tools {
    min-height: 48px;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 42px auto minmax(260px, 1fr) auto;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: nowrap;
}

.blue-sky-menu-toggle {
    width: 40px;
    height: 40px;
    border: 1px solid #d5e0ed;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #36506f;
    background: #f6f9fd;
    font-size: 19px;
}

.blue-sky-menu-toggle:hover {
    color: var(--sky-blue);
    background: #edf5ff;
}

.blue-sky-heading-copy {
    min-width: 112px;
}

.blue-sky-heading-copy h1 {
    font-size: 22px !important;
    white-space: nowrap;
}

.blue-sky-search-wrap {
    min-width: 220px;
    max-width: 620px;
    flex: none;
}

.blue-sky-search-wrap #search-input {
    height: 42px;
    font-size: 14px;
}

.blue-sky-toolbar {
    width: auto !important;
    min-width: 0;
    display: flex !important;
    align-items: center;
    gap: 10px !important;
}

.blue-sky-page-actions {
    min-width: 0;
    padding: 0;
    border: 0;
    gap: 8px !important;
    background: transparent;
}

.blue-sky-page-actions > button,
.blue-sky-page-actions > a,
.blue-sky-more-wrap > #blue-sky-more-toggle {
    min-width: auto;
    min-height: 40px;
    padding: 0 13px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    white-space: nowrap;
}

.blue-sky-more-wrap,
.blue-sky-profile-wrap {
    position: relative;
}

.blue-sky-more-wrap > #blue-sky-more-toggle {
    border: 1px solid #cbd8e7;
    color: #3f536d;
    background: #fff;
    font-weight: 750;
}

.blue-sky-more-wrap > #blue-sky-more-toggle::after {
    content: "⌄";
    margin-left: 6px;
    color: #7a8ba0;
}

.blue-sky-profile-toggle {
    height: 42px;
    min-width: 88px;
    padding: 0 9px 0 5px;
    border: 1px solid #d4dfec;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #344860;
    background: #f8fbff;
    font-weight: 700;
}

.blue-sky-profile-toggle:hover {
    border-color: #a9c8ee;
    background: #edf5ff;
}

.blue-sky-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #2686f3, #125fc8);
    font-size: 13px;
    font-weight: 850;
}

.blue-sky-profile-toggle #welcome-user {
    max-width: 86px;
    overflow: hidden;
    color: #344860 !important;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blue-sky-profile-arrow {
    color: #8190a3;
    font-size: 13px;
}

.blue-sky-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 80;
    min-width: 142px;
    padding: 6px;
    border: 1px solid #d7e1ed;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(20, 48, 84, .16);
}

.blue-sky-popover > button {
    width: 100%;
    min-height: 38px;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 7px !important;
    display: flex !important;
    align-items: center;
    color: #344860 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    text-align: left;
    white-space: nowrap;
}

.blue-sky-orders-header .blue-sky-popover > #admin-panel-btn,
.blue-sky-orders-header .blue-sky-popover > #recycle-bin-btn,
.blue-sky-orders-header .blue-sky-popover > #logout-btn,
.blue-sky-page-actions .blue-sky-popover > #delete-mode-btn,
.blue-sky-page-actions .blue-sky-popover > #cancel-delete-mode-btn {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 38px;
    margin: 0;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 7px !important;
    justify-content: flex-start;
    color: #344860 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    transform: none;
}

.blue-sky-page-actions .blue-sky-popover > #delete-mode-btn {
    color: #c93643 !important;
}

.blue-sky-orders-header .blue-sky-popover > #logout-btn:hover,
.blue-sky-orders-header .blue-sky-popover > #admin-panel-btn:hover,
.blue-sky-orders-header .blue-sky-popover > #recycle-bin-btn:hover,
.blue-sky-page-actions .blue-sky-popover > #delete-mode-btn:hover,
.blue-sky-page-actions .blue-sky-popover > #cancel-delete-mode-btn:hover {
    color: #1267e5 !important;
    background: #edf5ff !important;
}

.blue-sky-orders-header .blue-sky-popover > #logout-btn,
.blue-sky-page-actions .blue-sky-popover > #delete-mode-btn {
    color: #c93643 !important;
}

.blue-sky-popover > button:hover {
    color: #1267e5 !important;
    background: #edf5ff !important;
}

.blue-sky-popover > button.danger,
.blue-sky-more-wrap .blue-sky-popover > #delete-mode-btn {
    color: #c93643 !important;
}

.blue-sky-popover > button.hidden {
    display: none !important;
}

.blue-sky-orders-main {
    padding: 0 22px 26px !important;
}

.blue-sky-status-strip {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--sky-line);
}

.blue-sky-tabs {
    min-height: 64px;
    gap: 26px;
    border-bottom: 0;
}

.blue-sky-tabs > button {
    font-size: 14px;
}

.blue-sky-tabs > button span {
    font-size: 11px;
}

.blue-sky-kpis {
    width: auto;
    margin: 0;
    display: flex;
    grid-template-columns: none;
    gap: 8px;
}

.blue-sky-kpis article {
    min-width: 104px;
    min-height: 42px;
    padding: 5px 12px;
    border-radius: 9px;
    gap: 8px;
    box-shadow: none;
}

.blue-sky-kpis i {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

.blue-sky-kpis span {
    font-size: 12px;
}

.blue-sky-kpis strong {
    margin: 0;
    font-size: 18px;
}

.blue-sky-table-card {
    margin-top: 12px;
}

.blue-sky-table-card th {
    height: 48px;
    padding: 0 14px !important;
    font-size: 13px !important;
}

.blue-sky-table-card td {
    height: 66px;
    padding: 10px 14px !important;
    font-size: 14px;
}

.blue-sky-table-card .order-item-number,
.blue-sky-table-card .order-item-name {
    font-size: 14px;
}

.blue-sky-table-card .order-item-code {
    font-size: 11px;
}

.blue-sky-table-card .order-item-process {
    font-size: 14px;
}

.blue-sky-key-progress {
    min-width: 138px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.blue-sky-key-progress .blue-sky-progress-track {
    width: 72px;
    height: 7px;
}

.blue-sky-key-progress b {
    min-width: 58px;
    color: #3e536d;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.blue-sky-key-progress.pending .blue-sky-progress-track i {
    width: 0 !important;
}

.blue-sky-key-progress.pending b {
    color: #7b8a9d;
}

.blue-sky-key-progress.complete .blue-sky-progress-track {
    background: #d8f0e2;
}

.blue-sky-key-progress.complete .blue-sky-progress-track i {
    background: #25a766;
}

.blue-sky-key-progress.complete b {
    color: #208c58;
}

.blue-sky-table-card .order-item-remaining span {
    font-size: 12px !important;
}

.blue-sky-table-card .normal-mode-cell button {
    min-height: 32px;
    padding: 0 11px !important;
    font-size: 12px !important;
}

@media (max-width: 1360px) and (min-width: 768px) {
    .blue-sky-title-tools {
        grid-template-columns: 40px auto minmax(210px, 1fr) auto;
        gap: 9px !important;
    }

    .blue-sky-page-actions > button,
    .blue-sky-page-actions > a,
    .blue-sky-more-wrap > #blue-sky-more-toggle {
        padding-inline: 10px !important;
        font-size: 12px !important;
    }

    .blue-sky-profile-toggle #welcome-user,
    .blue-sky-profile-arrow {
        display: none;
    }

    .blue-sky-profile-toggle {
        min-width: 42px;
        padding: 0 5px;
    }

    .blue-sky-kpis article {
        min-width: 92px;
    }

    .blue-sky-table-card th,
    .blue-sky-table-card td {
        padding-inline: 10px !important;
    }
}

@media (max-width: 767px) {
    .blue-sky-orders-header {
        padding: 10px 14px 12px !important;
    }

    .blue-sky-title-tools {
        min-height: 0;
        grid-template-columns: 40px 1fr auto;
        gap: 9px !important;
    }

    .blue-sky-heading-copy {
        order: initial;
    }

    .blue-sky-heading-copy h1 {
        font-size: 20px !important;
    }

    .blue-sky-title-tools .blue-sky-search-wrap {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        margin-top: 0 !important;
        order: initial;
    }

    .blue-sky-toolbar {
        display: contents !important;
        margin: 0;
    }

    .blue-sky-page-actions {
        grid-column: 1 / -1;
        grid-row: 3;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px !important;
    }

    .blue-sky-page-actions > button,
    .blue-sky-page-actions > a,
    .blue-sky-more-wrap > #blue-sky-more-toggle {
        width: 100%;
        min-width: 0;
        padding-inline: 5px !important;
        font-size: 11px !important;
    }

    .blue-sky-page-actions > button::before,
    .blue-sky-page-actions > a::before {
        display: none;
    }

    .blue-sky-profile-wrap {
        grid-column: 3;
        grid-row: 1;
    }

    .blue-sky-profile-toggle {
        min-width: 42px;
        padding: 0 5px;
    }

    .blue-sky-profile-toggle #welcome-user,
    .blue-sky-profile-arrow {
        display: none;
    }

    .blue-sky-orders-main {
        padding: 0 14px 22px !important;
    }

    .blue-sky-status-strip {
        min-height: 0;
        padding-bottom: 9px;
        display: block;
    }

    .blue-sky-tabs {
        min-height: 52px;
        gap: 18px;
        overflow-x: auto;
    }

    .blue-sky-kpis {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .blue-sky-kpis article {
        min-width: 0;
        min-height: 40px;
        padding: 5px 8px;
        justify-content: center;
    }

    .blue-sky-kpis i {
        display: none;
    }

    .blue-sky-kpis article div {
        display: flex;
        align-items: baseline;
        gap: 5px;
    }

    .blue-sky-kpis span {
        font-size: 11px;
    }

    .blue-sky-kpis strong {
        font-size: 17px;
    }

    .blue-sky-mobile-progress .blue-sky-key-progress {
        width: 100%;
        max-width: 230px;
    }

    .blue-sky-mobile-progress .blue-sky-progress-track {
        flex: 1;
        width: auto;
    }
}

/* Mobile component header: merge the tool row with “add process”. */
@media (max-width: 767px) {
    #components-container .component-card > header {
        display: grid !important;
        grid-template-columns: auto minmax(118px, 1fr);
        column-gap: 8px !important;
        row-gap: 8px !important;
    }

    #components-container .component-card > header > .flex:first-child {
        display: contents !important;
    }

    #components-container .component-card > header > .flex:first-child > .flex:first-child {
        grid-column: 1 / -1;
        width: 100%;
    }

    #components-container .component-card > header p {
        display: none;
    }

    #components-container .component-card > header > .flex:first-child > .flex:last-child {
        grid-column: 1;
        grid-row: 2;
        width: auto !important;
        min-width: 164px;
        min-height: 40px;
        padding: 0 2px !important;
        justify-content: center;
    }

    #components-container .component-card > header > .flex:first-child > .flex:last-child button {
        width: 39px;
        height: 38px;
    }

    #components-container .component-card > header > .add-process-card-btn {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        height: 40px;
        min-height: 40px;
        margin: 0;
        padding: 6px 8px !important;
        white-space: nowrap;
    }
}

@media (max-width: 374px) {
    #components-container .component-card > header {
        grid-template-columns: auto minmax(104px, 1fr);
        column-gap: 6px !important;
    }

    #components-container .component-card > header > .flex:first-child > .flex:last-child {
        min-width: 148px;
    }

    #components-container .component-card > header > .flex:first-child > .flex:last-child button {
        width: 35px;
    }

    #components-container .component-card > header > .add-process-card-btn {
        font-size: 12px !important;
    }
}

/* ===== Order shell corrections: readable navigation and stable mobile cards ===== */
.blue-sky-nav a > .blue-sky-nav-text,
.blue-sky-nav button > .blue-sky-nav-text {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.25;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blue-sky-kpis > #blue-sky-kpi-active.hidden {
    display: none !important;
}

@media (min-width: 768px) {
    #app-container.sidebar-collapsed > .page,
    #app-container.sidebar-collapsed .blue-sky-page {
        padding-left: 92px;
    }

    #app-container.sidebar-collapsed .blue-sky-sidebar {
        width: 92px;
        padding-inline: 10px;
    }

    #app-container.sidebar-collapsed .blue-sky-brand-mark {
        width: 58px;
        height: 54px;
    }

    #app-container.sidebar-collapsed .blue-sky-nav-text {
        width: 100%;
        display: block;
        flex: none;
        color: #b7cbea;
        font-size: 10px;
        line-height: 1.15;
        text-align: center;
    }

    #app-container.sidebar-collapsed .blue-sky-nav a,
    #app-container.sidebar-collapsed .blue-sky-nav button {
        min-height: 58px;
        padding: 6px 3px;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }

    #app-container.sidebar-collapsed .blue-sky-nav a:hover .blue-sky-nav-text,
    #app-container.sidebar-collapsed .blue-sky-nav button:hover .blue-sky-nav-text,
    #app-container.sidebar-collapsed .blue-sky-nav button.active .blue-sky-nav-text {
        color: #fff;
    }

    #app-container.sidebar-collapsed #connection-status {
        left: 10px;
        width: 72px;
        min-width: 72px;
        padding: 0 7px 0 23px;
        overflow: hidden;
        color: #d7e7fb;
        font-size: 10px;
        white-space: nowrap;
    }

    #app-container.sidebar-collapsed #connection-status::before {
        left: 10px;
    }
}

@media (max-width: 767px) {
    .blue-sky-sidebar {
        padding-bottom: 74px;
    }

    .blue-sky-sidebar #connection-status {
        left: 14px;
        bottom: 14px;
        width: calc(100% - 28px);
        min-height: 38px;
        padding-left: 31px;
        background: rgba(12, 50, 102, .94);
    }

    .blue-sky-sidebar #connection-status::before {
        left: 14px;
        background: #39d98a;
    }

    .blue-sky-page-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blue-sky-table-card,
    .blue-sky-table-card table,
    .blue-sky-table-card tbody {
        width: 100%;
        min-width: 0;
        display: block;
    }

    .blue-sky-table-card tbody {
        display: grid;
        gap: 10px;
    }

    .blue-sky-table-card .order-item {
        width: 100%;
        height: auto !important;
        min-height: 0;
        margin: 0 !important;
        display: block !important;
        overflow: hidden;
    }

    .blue-sky-table-card .order-item > td {
        display: none !important;
    }

    .blue-sky-table-card .order-item > td:first-child {
        width: 100%;
        height: auto !important;
        min-height: 0;
        padding: 13px !important;
        display: block !important;
        border: 0 !important;
    }

    .blue-sky-mobile-card-head {
        width: 100%;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 76px;
        align-items: start !important;
        gap: 12px;
    }

    .blue-sky-mobile-order-main .order-item-number {
        font-size: 16px !important;
    }

    .blue-sky-mobile-order-main .order-item-name {
        margin-top: 5px !important;
        font-size: 15px !important;
    }

    .blue-sky-mobile-meta-row {
        margin-top: 9px;
        flex-wrap: wrap;
        row-gap: 4px;
        font-size: 11px;
    }

    .blue-sky-mobile-deadline {
        width: 76px;
        min-width: 76px;
        min-height: 76px;
    }

    .blue-sky-mobile-progress,
    .blue-sky-mobile-progress .blue-sky-key-progress {
        width: 100%;
        max-width: none;
    }

    .blue-sky-table-card .normal-mode-cell {
        width: 100%;
        height: auto !important;
        min-height: 0;
        margin-top: 12px !important;
        padding-top: 12px !important;
        white-space: normal;
    }

    .blue-sky-table-card .normal-mode-cell .space-x-2 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    .blue-sky-table-card .normal-mode-cell button {
        width: 100%;
        min-height: 36px;
        padding-inline: 2px !important;
        font-size: 10.5px !important;
        white-space: nowrap;
    }
}

/* Morning-meeting KPIs: actionable risks, centered instead of pinned right. */
.blue-sky-page-actions > button.hidden {
    display: none !important;
}

.blue-sky-kpis i.gray {
    color: #65758a;
    background: #eef2f7;
}

.blue-sky-kpis article.kpi-danger strong { color: #d9363e; }
.blue-sky-kpis article.kpi-warning strong { color: #bd5f0f; }
.blue-sky-kpis article.kpi-neutral strong { color: #51647b; }

/* Interactive order KPI filters. */
.blue-sky-kpis > button[data-kpi-filter] {
    min-width: 104px;
    min-height: 42px;
    padding: 5px 12px;
    border: 1px solid var(--sky-line);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: inherit;
    background: var(--sky-card);
    box-shadow: none;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.blue-sky-kpis > button[data-kpi-filter]:hover {
    border-color: #9fc3ef;
    background: #f6faff;
}

.blue-sky-kpis > button[data-kpi-filter]:focus-visible {
    outline: 3px solid rgba(18, 103, 229, .2);
    outline-offset: 2px;
}

.blue-sky-kpis > button[data-kpi-filter].active {
    border-color: #3d8bf0;
    background: #edf5ff;
    box-shadow: inset 0 0 0 1px #3d8bf0;
}

.blue-sky-kpis > button.kpi-danger strong { color: #d9363e; }
.blue-sky-kpis > button.kpi-warning strong { color: #bd5f0f; }
.blue-sky-kpis > button.kpi-neutral strong { color: #51647b; }

#show-add-order-modal-btn,
#show-add-order-modal-btn span {
    color: #fff !important;
}

@media (min-width: 1200px) {
    .blue-sky-status-strip {
        position: relative;
    }

    .blue-sky-status-strip > .blue-sky-kpis {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .blue-sky-page-actions > #delete-mode-btn,
    .blue-sky-page-actions > #cancel-delete-mode-btn {
        min-width: 82px;
    }
}

@media (max-width: 767px) {
    /* Keep secondary order navigation out of the compact phone layout. */
    #blue-sky-recycle-tab,
    #mobile-sort-header {
        display: none !important;
    }

    .blue-sky-page-actions > #delete-mode-btn {
        margin-left: 0;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .blue-sky-mobile-select {
        min-height: 32px;
        margin: -2px 0 10px;
        padding: 0 2px 9px;
        border-bottom: 1px solid #e5ebf3;
        display: flex !important;
        align-items: center;
        gap: 7px;
        color: #c83240;
        font-size: 11px;
        font-weight: 750;
    }

    .blue-sky-mobile-select.hidden {
        display: none !important;
    }

    /* Phone header: title on the left and the real account name on the right. */
    .blue-sky-title-tools {
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }

    .blue-sky-heading-copy {
        min-width: 0;
        overflow: hidden;
    }

    .blue-sky-heading-copy h1 {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .blue-sky-profile-toggle {
        width: auto;
        min-width: 0;
        max-width: 122px;
        padding: 0 9px 0 5px;
    }

    .blue-sky-profile-toggle #welcome-user {
        max-width: 70px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .blue-sky-profile-arrow {
        display: none;
    }

    .blue-sky-page-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #show-add-order-modal-btn,
    #show-add-order-modal-btn span {
        color: #fff !important;
    }

    .blue-sky-kpis > button[data-kpi-filter] {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 6px 5px;
        display: flex;
        justify-content: center;
    }

    .blue-sky-kpis > button[data-kpi-filter] i {
        display: none;
    }

    .blue-sky-kpis > button[data-kpi-filter] div {
        width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 5px;
    }

    .blue-sky-kpis > button[data-kpi-filter] span {
        font-size: 11px;
        white-space: nowrap;
    }

    .blue-sky-kpis > button[data-kpi-filter] strong {
        margin: 0;
        font-size: 17px;
    }
}

.order-item .order-item-product-count {
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}
.dark .order-item .order-item-product-count { color: #9ca3af; }

/* Order toolbar: the delete command is intentionally kept only in the profile popover. */
.factory-ai-query-view { min-width: 0; }
.factory-ai-query-table-wrap { width: 100%; overflow-x: auto; }
.factory-ai-query-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.factory-ai-query-table th, .factory-ai-query-table td { padding: 12px 8px; border-bottom: 1px solid #dbe6f4; text-align: right; white-space: nowrap; }
.factory-ai-query-table th { color: #74859f; font-weight: 500; }
.factory-ai-query-table td { color: #315f95; font-variant-numeric: tabular-nums; }
.factory-ai-query-table th:first-child, .factory-ai-query-table td:first-child { text-align: left; }
.factory-ai-query-summary { margin: 8px 0; font-size: 14px; font-weight: 600; color: #315f95; }
.dark .factory-ai-query-table th, .dark .factory-ai-query-table td { border-color: #334155; color: #cbd5e1; }
.dark .factory-ai-query-summary { color: #bfdbfe; }
@media (max-width: 480px) {
    .factory-ai-query-table { font-size: 12px; }
    .factory-ai-query-table th, .factory-ai-query-table td { padding: 10px 5px; }
}
.blue-sky-page-actions > #craft-ai-btn {
    border: 1px solid #e4c59e !important;
    color: #9a5419 !important;
    background: #fff7eb !important;
}
.blue-sky-page-actions > #craft-ai-btn:hover { background: #ffecd2 !important; }
.blue-sky-orders-header .blue-sky-popover > #delete-mode-btn {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 7px !important;
    justify-content: flex-start !important;
    color: #c93643 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    transform: none !important;
}
.blue-sky-orders-header .blue-sky-popover > #delete-mode-btn:hover {
    color: #c93643 !important;
    background: #fff0f1 !important;
}
@media (max-width: 767px) {
    .blue-sky-page-actions { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}