:root {
    color-scheme: light;
    --ink: #16343a;
    --muted: #60777b;
    --brand: #0f766e;
    --brand-dark: #164e4a;
    --surface: #ffffff;
    --line: #d9e5e3;
    --background: #f4f8f7;
}

.repeat-rows { display: grid; gap: 0.75rem; }
.repeat-row { display: flex; gap: 0.75rem; align-items: end; padding: 0.75rem; border: 1px solid #dfe5e2; border-radius: 10px; background: #fafcfb; }
.repeat-row label { margin: 0; min-width: 140px; }
.repeat-row .grow { flex: 1; }
.repeat-row textarea { min-width: 260px; }
.table-actions { display: flex; gap: 0.4rem; align-items: center; }
.table-actions form { margin: 0; }
@media (max-width: 820px) { .repeat-row { align-items: stretch; flex-direction: column; } .repeat-row textarea { min-width: 0; } }
.key-customer-categories { display: grid; gap: 1.2rem; }
.key-customer-category { overflow: hidden; border: 1px solid color-mix(in srgb, var(--category-color) 65%, #82928d); border-radius: 16px; background: white; }
.key-customer-category-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding: 0.9rem 1rem; background: var(--category-color); }
.key-customer-category-header h2 { margin: 0 0 0.2rem; }
.key-customer-category-header details { min-width: 250px; text-align: right; }
.category-settings-form { display: flex; gap: 0.45rem; align-items: end; justify-content: end; margin-top: 0.5rem; }
.category-settings-form label { margin: 0; text-align: left; }
.category-settings-form input[type="color"] { width: 52px; padding: 0.15rem; }
.key-customer-dropzone { min-height: 66px; padding: 0.6rem; transition: background 0.15s ease; }
.key-customer-dropzone.is-drop-target { background: color-mix(in srgb, var(--category-color) 30%, white); box-shadow: inset 0 0 0 2px var(--brand); }
.key-customer-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; margin-bottom: 0.55rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: white; cursor: grab; }
.key-customer-row:last-of-type { margin-bottom: 0; }
.key-customer-row.is-dragging { opacity: 0.48; border-color: var(--brand); }
.key-customer-drag { color: var(--muted); font-weight: 800; letter-spacing: -0.2rem; }
.key-customer-summary h3 { margin: 0 0 0.35rem; font-size: 1.08rem; }
.key-customer-summary p { margin: 0.12rem 0; line-height: 1.45; }
.summary-divider { margin-left: 1rem; }
.demand-summary { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin: 0.2rem 0; color: var(--muted); }
.demand-summary strong { color: var(--ink); }
.demand-summary span { display: inline-block; }
.key-customer-actions { display: flex; gap: 0.4rem; align-items: center; }
.key-customer-actions form { margin: 0; }
.key-customer-empty { display: none; padding: 0.8rem; color: var(--muted); text-align: center; }
.key-customer-dropzone:not(:has(.key-customer-row)) .key-customer-empty { display: block; }
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.attachment-card { display: grid; gap: 0.5rem; padding: 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: #fafcfb; }
.attachment-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; background: #eef3f1; }
.file-placeholder { display: grid; place-items: center; height: 100px; font-size: 2.5rem; background: #eef3f1; border-radius: 8px; }
@media (max-width: 820px) { .key-customer-row { grid-template-columns: auto 1fr; } .key-customer-actions { grid-column: 2; flex-wrap: wrap; } .key-customer-category-header { flex-direction: column; } .key-customer-category-header details { min-width: 0; width: 100%; text-align: left; } .category-settings-form { justify-content: start; flex-wrap: wrap; } }

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--background);
    color: var(--ink);
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

.topbar {
    min-height: 68px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    background: var(--brand-dark);
}

.brand { color: white; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; }

.phase {
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-size: 0.8rem;
}

.page {
    width: min(1280px, 94vw);
    margin: 5vh auto;
}

.hero,
.steps {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(22, 52, 58, 0.08);
}

.steps { margin-top: 1.25rem; }

.eyebrow {
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

h1 {
    max-width: 16ch;
    margin: 0.4rem 0 1rem;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.08;
}

p { color: var(--muted); line-height: 1.75; }
a { color: var(--brand); }

.status-card {
    margin-top: 2rem;
    padding: 1rem 1.1rem;
    display: flex;
    gap: 0.8rem;
    align-items: center;
    border-radius: 14px;
    background: #e9f6f3;
}

.status-card small { display: block; margin-top: 0.2rem; color: var(--muted); }

.status-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.12);
}

.nav { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.nav a, .nav span { color: white; }
.nav form { margin: 0; }
.nav-button, .link-button { padding: 0; border: 0; color: var(--brand); background: none; cursor: pointer; font: inherit; }
.nav-button { color: white; text-decoration: underline; }
.nav-refresh-button { width: 1.8rem; height: 1.8rem; padding: 0; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; color: white; background: rgba(255, 255, 255, 0.08); cursor: pointer; font: 1.1rem/1 "Segoe UI Symbol", "Segoe UI", sans-serif; }
.nav-refresh-button:hover, .nav-refresh-button:focus-visible { background: rgba(255, 255, 255, 0.2); }
.nav-dropdown { position: relative; color: white; }
.nav-dropdown summary { cursor: pointer; list-style: none; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown-menu { position: absolute; z-index: 20; top: calc(100% + 0.55rem); left: 0; display: grid; min-width: 150px; padding: 0.45rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 9px; background: var(--brand-dark); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2); }
.nav-dropdown:not([open]) .nav-dropdown-menu { display: none; }
.nav-dropdown-menu a { padding: 0.5rem 0.65rem; border-radius: 6px; white-space: nowrap; text-decoration: none; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus { background: rgba(255, 255, 255, 0.14); }

.panel {
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 12px 36px rgba(22, 52, 58, 0.06);
}
.narrow { max-width: 560px; margin: 0 auto; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-heading h1, .panel h1 { max-width: none; margin-bottom: 1rem; font-size: clamp(1.8rem, 4vw, 2.7rem); }

.button {
    display: inline-block;
    padding: 0.7rem 1rem;
    border: 1px solid var(--brand);
    border-radius: 10px;
    color: white;
    background: var(--brand);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}
.button.secondary { color: var(--brand); background: white; }
.stack { display: grid; gap: 1rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wide { grid-column: 1 / -1; }
.compact-panel { max-width: 760px; margin: 0 auto; }
.compact-form { margin-top: 1.25rem; }
.required-mark, .optional-mark { font-size: 0.78rem; font-weight: 500; }
.required-mark { color: #b42318; }
.optional-mark { color: var(--muted); }
.confirmation-check { padding: 0.8rem; border-radius: 10px; background: #f4f8f7; }
.cost-line { display: grid; gap: 1.2rem; }
.cost-line-heading, .section-title-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.line-number { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-right: 0.6rem; border-radius: 50%; color: white; background: var(--brand); }
.current-product-card { display: grid; grid-template-columns: 100px 1fr minmax(160px, auto); gap: 1rem; align-items: center; padding: 1rem; border-radius: 14px; background: #f4f8f7; }
.current-product-card img, .cost-image-placeholder { width: 100px; height: 100px; object-fit: contain; border-radius: 10px; background: white; }
.cost-image-placeholder, .candidate-image-placeholder, .search-image-placeholder { display: grid; place-items: center; color: var(--muted); }
.cost-summary { display: grid; gap: 0.25rem; }
.cost-summary span { color: var(--muted); font-size: 0.8rem; }
.cost-edit-form { padding-top: 1rem; border-top: 1px solid var(--line); }
.candidate-section { padding-top: 1rem; border-top: 1px solid var(--line); }
.candidate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.candidate-card { display: grid; gap: 0.7rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: 12px; }
.candidate-card img, .candidate-image-placeholder { width: 100%; height: 110px; object-fit: contain; border-radius: 8px; background: #f4f8f7; }
.candidate-card div { display: grid; gap: 0.3rem; }
.fallback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; padding: 0.9rem; border-radius: 12px; background: #fff8e7; }
.audit-details { color: var(--muted); font-size: 0.88rem; }
.drawer-backdrop { min-height: 70vh; display: flex; justify-content: flex-end; padding: 1rem; border-radius: 18px; background: rgba(18, 35, 40, 0.18); }
.drawer-panel { width: min(920px, 100%); padding: 1.4rem; border-radius: 18px; background: white; box-shadow: -18px 0 50px rgba(22, 52, 58, 0.18); }
.full-search-form { grid-template-columns: 1fr auto auto; }
.admin-filter { align-self: center; }
.search-result-list { display: grid; gap: 0.8rem; margin-top: 1rem; }
.search-product-card { display: grid; grid-template-columns: 100px 1fr auto; gap: 1rem; align-items: center; padding: 0.9rem; border: 1px solid var(--line); border-radius: 12px; }
.search-product-card img, .search-image-placeholder { width: 100px; height: 100px; object-fit: contain; border-radius: 8px; background: #f4f8f7; }
.search-product-main { min-width: 0; }
.search-product-main h2 { margin: 0.35rem 0; font-size: 1.15rem; }
.inactive-result { border-color: #ef9a9a; background: #fff4f4; }
.inactive-warning { color: #991b1b; max-width: 150px; }
label { display: grid; gap: 0.4rem; color: var(--ink); font-weight: 650; }
input, textarea, select {
    width: 100%;
    padding: 0.72rem 0.8rem;
    border: 1px solid #b9ceca;
    border-radius: 9px;
    color: var(--ink);
    background: white;
    font: inherit;
}
textarea { resize: vertical; }

/* Order tracking Rapid Preview V1. Namespaced so it can be removed as one module. */
.preview-environment-banner { padding: .45rem 5vw; color: #785a00; background: #fff3c4; border-bottom: 1px solid #ead488; text-align: center; font-size: .78rem; font-weight: 750; letter-spacing: .02em; }
.preview-nav-badge { display: inline-block; margin-left: .2rem; padding: .08rem .3rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; font-size: .58rem; vertical-align: .12rem; }
.orders-shell { display: grid; gap: 1rem; }
.orders-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.orders-heading h1 { max-width: none; margin: .25rem 0 .3rem; font-size: clamp(2rem, 4vw, 3rem); }
.orders-heading p { margin: 0; }
.order-status-tabs { display: flex; gap: .3rem; padding: .35rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; overflow-x: auto; }
.order-status-tabs a { padding: .68rem .95rem; border-radius: 9px; color: var(--muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.order-status-tabs a:hover { background: #f1f7f5; }
.order-status-tabs a.active { color: #fff; background: var(--brand); }
.order-status-tabs a span { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; margin-left: .3rem; border-radius: 999px; color: var(--ink); background: #e4efec; font-size: .72rem; }
.order-status-tabs a.active span { color: var(--brand-dark); background: #fff; }
.supervisor-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 1px; overflow: hidden; border: 1px solid #c9dfda; border-radius: 14px; background: #c9dfda; }
.supervisor-strip > div { display: grid; gap: .2rem; padding: .9rem 1rem; background: #eef8f5; }
.supervisor-strip span, .order-detail-kpis span, .order-info-grid span { color: var(--muted); font-size: .76rem; font-weight: 650; }
.supervisor-strip strong { font-size: 1.1rem; }
.supervisor-strip .supervisor-label { align-content: center; color: var(--brand); font-size: .76rem; font-weight: 800; letter-spacing: .08em; }
.order-filters { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr auto; gap: .6rem; align-items: end; padding: .8rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.order-filters label { gap: .25rem; font-size: .74rem; }
.order-filters input, .order-filters select { padding: .55rem .6rem; }
.order-search { display: grid; grid-template-columns: minmax(0, 420px) auto; gap: .6rem; justify-content: end; }
.order-list { display: grid; gap: .7rem; }
.order-row { position: relative; display: grid; grid-template-columns: minmax(200px, 1.45fr) minmax(170px, 1.1fr) minmax(135px, .8fr) minmax(125px, .78fr) minmax(130px, .8fr) minmax(90px, .5fr) 18px; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: #fff; box-shadow: 0 4px 14px rgba(22,52,58,.035); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.order-row:hover { border-color: #91bbb3; box-shadow: 0 10px 26px rgba(22,52,58,.09); transform: translateY(-1px); }
.order-number { color: var(--brand); font-size: .75rem; font-weight: 850; letter-spacing: .05em; }
.order-customer-zone h2 { margin: .28rem 0 .2rem; font-size: 1.1rem; }
.order-customer-zone p, .order-product-zone span, .order-money-zone span, .order-shipping-zone span, .order-owner-zone span { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.order-product-zone, .order-money-zone, .order-status-zone, .order-shipping-zone, .order-owner-zone { display: grid; gap: .25rem; min-width: 0; }
.order-product-zone strong, .order-shipping-zone strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.order-money-zone strong { font-size: .95rem; }
.order-money-zone .paid, .success-text { color: #15803d; font-weight: 750; }
.order-status { display: inline-flex; width: max-content; padding: .28rem .58rem; border-radius: 999px; color: #52525b; background: #f1f2f4; font-size: .74rem; font-weight: 800; }
.status-生产中 { color: #854d0e; background: #fef3c7; }.status-待出货 { color: #9a3412; background: #ffedd5; }.status-运输中 { color: #1d4ed8; background: #dbeafe; }.status-已完成 { color: #166534; background: #dcfce7; }.status-采购中 { color: #6b21a8; background: #f3e8ff; }
.order-status-zone strong { font-size: .78rem; }
.order-owner-zone strong { font-size: .86rem; }
.order-row-arrow { color: #8ca19d; font-size: 1.7rem; }
.orders-empty { padding: 4rem 1rem; border: 1px dashed #b8cbc7; border-radius: 15px; text-align: center; background: #fff; }
.orders-empty p { margin-bottom: 0; }
.order-form-panel { max-width: 1000px; margin: 0 auto; }
.order-detail-breadcrumb { display: flex; gap: .5rem; align-items: center; color: var(--muted); font-size: .8rem; }
.order-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.order-form-actions { display: flex; justify-content: end; gap: .65rem; }
.order-detail-shell { max-width: 1180px; margin: 0 auto; }
.order-detail-hero { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: 1.4rem 1.5rem; border-radius: 18px; color: #fff; background: linear-gradient(115deg, #164e4a, #0f766e); box-shadow: 0 15px 40px rgba(15,118,110,.18); }
.order-detail-hero .order-number, .order-detail-hero p { color: #ccebe5; }
.order-detail-hero h1 { max-width: none; margin: .3rem 0; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.order-detail-hero p { margin: 0; }
.order-detail-status { display: grid; justify-items: end; gap: .55rem; white-space: nowrap; }
.order-detail-status .order-status { background: #fff; }
.order-detail-status strong { font-size: .86rem; }
.order-detail-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.order-detail-kpis > div { display: grid; gap: .25rem; padding: .85rem 1rem; background: #fff; }
.order-detail-kpis strong { font-size: 1.02rem; }
.order-section-nav { position: sticky; z-index: 10; top: .5rem; display: flex; justify-content: center; gap: .35rem; padding: .4rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 7px 18px rgba(22,52,58,.08); backdrop-filter: blur(8px); }
.order-section-nav a { padding: .5rem .75rem; border-radius: 8px; color: var(--ink); font-size: .8rem; font-weight: 700; text-decoration: none; }
.order-section-nav a:hover { color: var(--brand); background: #eef8f5; }
.order-detail-section { padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; scroll-margin-top: 4.8rem; }
.order-detail-section .section-title-row { margin-bottom: 1rem; }
.order-detail-section .section-title-row > div:first-child { display: flex; align-items: center; gap: .65rem; }
.order-detail-section h2 { margin: 0; font-size: 1.25rem; }
.order-detail-section h3 { margin: 1.3rem 0 .7rem; font-size: 1rem; }
.order-detail-section h3 small { margin-left: .35rem; color: var(--muted); font-weight: 500; }
.section-kicker { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 8px; color: #fff; background: var(--brand); font-size: .76rem; font-weight: 850; }
.section-note, .payment-summary { color: var(--muted); font-size: .8rem; }
.section-actions { display: flex; gap: .5rem; }
.section-actions .button { padding: .55rem .75rem; font-size: .78rem; }
.order-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; padding: 1rem; border-radius: 12px; background: #f6faf9; }
.order-info-grid > div { display: grid; gap: .25rem; }
.order-info-grid strong { font-size: .88rem; white-space: pre-line; }
.order-add-drawer { margin-top: .9rem; border: 1px solid #cdddda; border-radius: 11px; background: #fbfdfc; }
.order-add-drawer summary { padding: .72rem .85rem; color: var(--brand); cursor: pointer; font-size: .84rem; font-weight: 800; list-style-position: inside; }
.order-add-drawer[open] summary { border-bottom: 1px solid var(--line); }
.order-add-drawer > form { padding: .9rem; }
.inline-entry-form { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)) auto; gap: .7rem; align-items: end; }
.payment-entry { grid-template-columns: repeat(5, minmax(100px, 1fr)) auto; }
.inline-entry-form label, .packing-entry-grid label { font-size: .76rem; }
.inline-entry-form input, .inline-entry-form select, .packing-entry-grid input { padding: .58rem .65rem; }
.compact-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
.compact-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.compact-table th { color: var(--muted); background: #f3f8f6; text-align: left; font-size: .72rem; }
.compact-table th, .compact-table td { padding: .7rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.compact-table tbody tr:last-child td { border-bottom: 0; }
.compact-table form, .timeline-row form, .order-file-card form, .shipment-card form { margin: 0; }
.danger-text { color: #b42318; }
.empty-note { margin: .5rem 0; padding: .8rem; border-radius: 9px; background: #f6faf9; font-size: .84rem; }
.timeline-list { display: grid; }
.timeline-row { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .7rem .3rem; border-bottom: 1px solid var(--line); }
.timeline-row:last-child { border: 0; }
.timeline-row > div:nth-child(2) { display: grid; gap: .2rem; }
.timeline-row span { color: var(--muted); font-size: .78rem; }
.timeline-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 4px #daf3e6; }
.order-file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .65rem; }
.order-file-card { display: grid; gap: .45rem; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; }
.order-file-card .file-type { width: max-content; padding: .2rem .45rem; border-radius: 5px; color: var(--brand); background: #e9f6f3; font-size: .68rem; font-weight: 800; }
.order-file-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.order-file-card small { color: var(--muted); }
.order-file-card > div { display: flex; gap: .7rem; font-size: .78rem; }
.attachment-entry { grid-template-columns: 180px 1fr auto; }.attachment-entry .grow { min-width: 0; }
.packing-entry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; align-items: end; }
.packing-entry-grid .wide-two { grid-column: span 2; }
.shipment-heading { padding-top: .35rem; border-top: 1px solid var(--line); }
.shipment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .65rem; }
.shipment-card { display: grid; gap: .4rem; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfc; }
.shipment-card > div { display: grid; gap: .15rem; }.shipment-card span { color: var(--brand); font-size: .7rem; font-weight: 800; text-transform: uppercase; }.shipment-card p { margin: 0; font-size: .78rem; }.shipment-card .tracking-text { color: var(--ink); font-family: ui-monospace, monospace; }
.shipment-entry { grid-template-columns: repeat(3, minmax(120px, 1fr)); }.shipment-entry .button { align-self: end; }

.packing-preview-shell { display: grid; gap: 1rem; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.preview-toolbar > div { display: flex; align-items: center; gap: .8rem; }.preview-toolbar span { color: var(--muted); font-size: .78rem; }
.packing-document { width: min(1120px, 100%); min-height: 760px; margin: 0 auto; padding: 3rem; color: #111; background: #fff; box-shadow: 0 15px 45px rgba(22,52,58,.12); }
.packing-document h1 { max-width: none; margin: 0 0 2rem; text-align: center; font: 700 2rem Georgia, serif; letter-spacing: .08em; }
.packing-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #222; border-left: 1px solid #222; }
.packing-meta-grid > div { display: grid; min-height: 58px; padding: .5rem; border-right: 1px solid #222; border-bottom: 1px solid #222; }
.packing-meta-grid span { font-size: .65rem; text-transform: uppercase; }.packing-meta-grid strong { margin-top: .25rem; font-size: .82rem; }.packing-meta-grid .wide { grid-column: 1 / -1; }.packing-meta-grid .span-two { grid-column: span 2; }.preline { white-space: pre-line; }
.packing-document-table { width: 100%; margin-top: 1.4rem; border-collapse: collapse; font-size: .7rem; }
.packing-document-table th, .packing-document-table td { padding: .48rem .35rem; border: 1px solid #222; text-align: center; }.packing-document-table td:first-child { text-align: left; }.packing-empty-row { padding: 3rem !important; color: #777; text-align: center !important; }.packing-preview-note { margin-top: 1rem; color: #777; font-size: .7rem; text-align: center; }

.marks-shell { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 1rem; align-items: start; }
.marks-editor { position: sticky; top: 1rem; display: grid; gap: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }.marks-editor h1 { max-width: none; margin: .3rem 0; font-size: 2rem; }.marks-editor p { margin: 0; }.marks-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }.marks-form-grid label { font-size: .76rem; }.marks-form-grid input, .marks-form-grid select, .marks-form-grid textarea { padding: .58rem; }.marks-actions { display: flex; gap: .5rem; }.marks-performance-note { padding: .7rem; border-radius: 9px; background: #fff8dd; font-size: .78rem; }
.marks-preview-area { display: grid; place-items: start center; min-height: 760px; padding: 2rem; border-radius: 16px; background: #dfe8e6; }
.mark-page { display: grid; align-content: center; gap: .7em; width: 148mm; min-height: 105mm; padding: 12mm; border: 1px solid #222; color: #111; background: #fff; font-family: Arial, sans-serif; font-size: 20px; line-height: 1.12; box-shadow: 0 15px 35px rgba(22,52,58,.16); page-break-after: always; break-after: page; }
.mark-company { margin-bottom: .5em; font-size: 1.5em; font-weight: 900; text-align: center; text-transform: uppercase; }.mark-line { display: grid; grid-template-columns: 7em 1fr; gap: 1em; }.mark-line span { font-weight: 700; }.mark-product { padding: .5em; border: 2px solid #111; font-size: 1.2em; font-weight: 900; text-align: center; }.mark-weight { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }.mark-custom { margin-top: .5em; font-size: .9em; font-weight: 800; text-align: center; white-space: pre-line; }.generated-marks { display: none; }

@media (max-width: 1100px) {
  .order-row { grid-template-columns: 1.4fr 1.1fr .8fr .8fr; }.order-shipping-zone, .order-owner-zone { padding-top: .6rem; border-top: 1px solid var(--line); }.order-row-arrow { display: none; }
  .order-filters { grid-template-columns: repeat(3, 1fr); }.order-filters .button { width: 100%; }.marks-shell { grid-template-columns: 1fr; }.marks-editor { position: static; }
}
@media (max-width: 760px) {
  .orders-heading, .order-detail-hero { align-items: stretch; flex-direction: column; }.orders-heading .button { text-align: center; }.supervisor-strip, .order-detail-kpis { grid-template-columns: 1fr 1fr; }.supervisor-strip .supervisor-label { display: none; }.order-filters, .order-edit-grid, .order-info-grid, .packing-entry-grid { grid-template-columns: 1fr; }.order-row { grid-template-columns: 1fr 1fr; gap: .75rem; }.order-customer-zone { grid-column: 1 / -1; }.order-product-zone { grid-column: 1 / -1; }.order-detail-status { justify-items: start; }.order-section-nav { justify-content: start; overflow-x: auto; }.inline-entry-form, .payment-entry, .shipment-entry, .attachment-entry { grid-template-columns: 1fr; }.packing-entry-grid .wide-two { grid-column: auto; }.section-title-row { align-items: start; flex-direction: column; }.packing-document { padding: 1rem; overflow-x: auto; }.packing-meta-grid { min-width: 680px; }.packing-document-table { min-width: 850px; }.marks-form-grid { grid-template-columns: 1fr; }.mark-page { width: 100%; min-height: auto; }.marks-actions { flex-direction: column; }
}

@media print {
  .topbar, .preview-environment-banner, .no-print { display: none !important; }
  body, .page { width: auto; margin: 0; background: #fff; }
  .packing-document { width: 100%; min-height: 0; padding: 8mm; box-shadow: none; }
  .packing-preview-note { display: none; }
  .marks-shell { display: block; }.marks-preview-area { display: none; }.marks-print-ready .generated-marks { display: block; }.mark-page { width: 148mm; height: 105mm; min-height: 105mm; margin: 0 auto; padding: 10mm; border: 0; box-shadow: none; }
  @page { margin: 8mm; }
}
.help, .result-count { margin: 0.4rem 0 1rem; font-size: 0.9rem; }
.text-input-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.45rem 0.8rem; margin-bottom: 0.4rem; }
.text-input-heading > label { flex: 0 0 auto; }
.ai-prompt-copy-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem 0.55rem; }
.ai-prompt-copy-note { color: var(--muted); font-size: 0.76rem; font-weight: 400; }
.copy-feedback { min-width: 3rem; color: var(--brand); font-size: 0.78rem; font-weight: 700; }
.airfreight-calculator { max-width: 960px; }
.airfreight-dimensions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.airfreight-results { max-width: 960px; }
.airfreight-primary-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; padding: 1rem 1.15rem; border: 1px solid #94d4c8; border-radius: 12px; background: #e9f6f3; }
.airfreight-primary-result span { color: var(--brand-dark); font-weight: 750; }
.airfreight-primary-result strong { color: var(--brand-dark); font-size: clamp(1.45rem, 3vw, 2rem); }
.airfreight-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.airfreight-result-grid > div { display: grid; gap: 0.3rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 9px; background: #fbfdfd; }
.airfreight-result-grid span { color: var(--muted); font-size: 0.78rem; }
.airfreight-result-grid strong { color: var(--ink); }
.airfreight-estimate-notice { margin-bottom: 0.8rem; }
.search-bar { display: grid; grid-template-columns: 1fr 180px auto; gap: 0.7rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); white-space: nowrap; }
.compact { min-width: 180px; max-width: 340px; white-space: pre-line; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.actions form { margin: 0; }
.empty { padding: 2rem; color: var(--muted); text-align: center; }
.badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.badge.active { color: #166534; background: #dcfce7; }
.badge.inactive { color: #991b1b; background: #fee2e2; }
.thumb, .image-placeholder { width: 56px; height: 56px; border-radius: 8px; object-fit: contain; background: #eef4f3; }
.image-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 0.75rem; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.45rem; margin-top: 1.25rem; }
.pagination a, .pagination-disabled, .pagination-ellipsis { min-width: 2rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 7px; text-align: center; text-decoration: none; }
.pagination-page.is-current { color: white; border-color: var(--brand); background: var(--brand); font-weight: 750; }
.pagination-disabled, .pagination-ellipsis { color: var(--muted); background: #f8fafc; }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.customer-folder-card { display: block; color: inherit; text-decoration: none; min-height: 142px; }
.customer-folder-card:hover { border-color: var(--green, #176b4d); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.customer-folder-card h2 { margin: 0 0 .65rem; }
.customer-folder-card p { margin: 0 0 .45rem; font-weight: 600; }
.customer-folder-card[draggable="true"], tr[draggable="true"] { cursor: grab; }
.is-dragging { opacity: .48; }
.folder-drop-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.folder-drop-target { border: 1px dashed #4b8067; background: #fff; border-radius: .35rem; padding: .4rem .65rem; color: #1f5e44; }
.folder-drop-target.is-drop-target { background: #e9f5ed; border-style: solid; }
.customer-folder-list { display: grid; gap: 0.55rem; }
.customer-folder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.85rem; align-items: center; min-height: 56px; padding: 0.85rem 1rem; }
.customer-folder-row.has-admin-controls { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.customer-folder-row span, .customer-folder-row small { color: var(--muted); font-size: 0.82rem; }
.customer-folder-name { min-width: 0; overflow: hidden; color: var(--ink); font-size: 1rem; font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.customer-folder-name:hover { color: var(--brand); text-decoration: underline; }
.customer-folder-count { justify-self: end; text-align: right; white-space: nowrap; }
.customer-folder-match { grid-column: 1 / -1; }
.folder-drag-handle { color: var(--muted); cursor: grab; font-size: 1rem; user-select: none; }
.customer-folder-row.is-drop-target { border-color: var(--brand); background: #e9f6f3; box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12); }
.drag-feedback { min-height: 1.4rem; margin: 0.45rem 0 0; font-size: 0.85rem; }
.data-inconsistency { color: #92400e; font-size: 0.82rem; font-weight: 700; }
.folder-detail-actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.folder-rename-form { display: flex; flex: 1 1 520px; align-items: end; gap: 0.7rem; }
.folder-rename-form label { flex: 1; }
.danger-button { border-color: #b91c1c; background: #b91c1c; }

.detail-grid { display: grid; grid-template-columns: minmax(240px, 0.7fr) 1.3fr; gap: 2rem; }
.product-image, .large-placeholder { width: 100%; min-height: 260px; max-height: 420px; border-radius: 14px; object-fit: contain; background: #eef4f3; }
.large-placeholder { display: grid; place-items: center; color: var(--muted); }
.current-image { display: flex; align-items: center; gap: 1rem; color: var(--muted); }
.current-image img { width: 120px; height: 120px; object-fit: contain; border-radius: 10px; background: #eef4f3; }
dl { display: grid; grid-template-columns: 120px 1fr; margin: 0; }
dt, dd { padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
dt { color: var(--muted); font-weight: 700; }
dd { margin: 0; }
.preline { white-space: pre-line; }
.notice { padding: 0.8rem; border-radius: 10px; color: #854d0e; background: #fef9c3; }

.flash { margin-bottom: 1rem; padding: 0.85rem 1rem; border-radius: 10px; }
.flash-success { color: #166534; background: #dcfce7; }
.flash-warning { color: #854d0e; background: #fef9c3; }
.flash-error { color: #991b1b; background: #fee2e2; }

@media (max-width: 760px) {
    .topbar { align-items: flex-start; padding-top: 1rem; padding-bottom: 1rem; gap: 1rem; }
    .nav { flex-wrap: wrap; justify-content: flex-end; }
    .nav-dropdown-menu { right: 0; left: auto; }
    .form-grid, .detail-grid, .search-bar { grid-template-columns: 1fr; }
    .airfreight-dimensions, .airfreight-result-grid { grid-template-columns: 1fr; }
    .candidate-grid, .current-product-card, .search-product-card { grid-template-columns: 1fr; }
    .wide { grid-column: auto; }
    .page-heading { align-items: flex-start; }
    .customer-folder-row { grid-template-columns: minmax(0, 1fr) auto; }
    .customer-folder-row.has-admin-controls { grid-template-columns: auto minmax(0, 1fr) auto; }
    .customer-folder-row.has-admin-controls .customer-folder-delete { grid-column: 2 / -1; justify-self: end; }
    .folder-rename-form { align-items: stretch; flex-direction: column; }
}

.ocr-raw-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 32rem;
    overflow: auto;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: #f7f8fa;
}

.section-gap { margin-top: 1.25rem; }
.status-pill {
    display: inline-block;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    color: #334155;
    background: #e2e8f0;
    font-size: 0.8rem;
    font-weight: 750;
}
.status-analyzing { color: #1d4ed8; background: #dbeafe; }
.status-analysis_completed,
.status-review_completed { color: #166534; background: #dcfce7; }
.status-analysis_failed { color: #991b1b; background: #fee2e2; }
.status-pending_review { color: #854d0e; background: #fef3c7; }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.upload-card { padding: 0.8rem; border: 1px solid var(--line); border-radius: 12px; }
.upload-card img { width: 100%; height: 150px; object-fit: contain; border-radius: 8px; background: #eef4f3; }
.upload-card small, .modified-mark { display: block; margin-top: 0.3rem; color: var(--muted); }
.danger { color: #b91c1c; }
.source-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.raw-text { min-height: 120px; padding: 1rem; border-radius: 10px; white-space: pre-wrap; background: #f8fafc; }
.review-images { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.review-images a { width: 120px; text-decoration: none; }
.review-images img { width: 120px; height: 100px; object-fit: contain; border-radius: 8px; background: #eef4f3; }
.review-images small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-heading { align-items: center; margin-bottom: 0.4rem; }
.compact-heading h2 { margin-bottom: 0; }
.item-details td { padding-top: 0; color: var(--muted); background: #fafcfc; }
.review-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.review-footer form { margin: 0; }
.checkbox-label { display: flex; grid-column: 1 / -1; flex-direction: row; align-items: center; }
.checkbox-label input { width: auto; }

@media (max-width: 760px) {
    .source-summary { grid-template-columns: 1fr; }
    .review-footer { align-items: stretch; flex-direction: column; }
}

/* Phase 3 compact review experience. */
.cost-review-heading h1 { margin-bottom: 0.25rem; font-size: clamp(1.55rem, 3vw, 2.25rem); }
.cost-review-layout { display: grid; grid-template-columns: minmax(0, 65fr) minmax(320px, 35fr); gap: 1rem; align-items: start; }
.cost-review-main { display: grid; gap: 0.65rem; min-width: 0; }
.compact-cost-line { scroll-margin-top: 1rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 5px 16px rgba(22, 52, 58, 0.045); }
.compact-line-top { min-height: 34px; display: flex; gap: 0.5rem; align-items: center; padding: 0.35rem 0.55rem; border-bottom: 1px solid var(--line); }
.compact-line-top .line-number { width: 1.55rem; height: 1.55rem; margin: 0; font-size: 0.75rem; }
.compact-line-top > strong { min-width: 0; flex: 1; font-size: 0.8rem; }
.source-description { min-width: 0; flex: 1; overflow: hidden; border: 0; color: var(--ink); background: transparent; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 650; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.compact-line-top .status-pill, .compact-line-top .badge { flex: 0 0 auto; font-size: 0.69rem; }
.compact-line-body { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0.65rem; padding: 0.55rem; }
.compact-product-visual { min-width: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0.15rem 0.45rem; align-content: start; }
.compact-product-visual a { grid-row: 1 / span 2; }
.compact-product-visual img, .compact-image-placeholder { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: #eef4f3; }
.compact-image-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 0.7rem; }
.compact-product-visual small, .compact-product-visual strong { overflow: hidden; font-size: 0.7rem; text-overflow: ellipsis; }
.compact-product-visual strong { line-height: 1.25; }
.compact-cost-form { display: grid; grid-template-columns: minmax(120px, 1.35fr) minmax(110px, 1.15fr) 72px 76px 94px 100px 100px; gap: 0.42rem; align-items: end; min-width: 0; }
.compact-cost-form label { gap: 0.2rem; font-size: 0.67rem; color: var(--muted); }
.compact-cost-form input { min-width: 0; height: 34px; padding: 0.35rem 0.45rem; border-radius: 7px; font-size: 0.8rem; }
.database-cost-display span { min-height: 34px; display: flex; align-items: center; padding: 0.35rem 0.45rem; border: 1px solid #d7e2e0; border-radius: 7px; color: var(--ink); background: #f4f8f7; font-size: 0.8rem; }
.compact-line-actions { grid-column: 1 / -1; display: flex; gap: 0.6rem; align-items: center; }
.small-button { padding: 0.38rem 0.62rem; border-radius: 7px; font-size: 0.76rem; }
.candidate-disclosure { border-top: 1px solid var(--line); padding: 0.4rem 0.6rem 0.55rem; color: var(--muted); font-size: 0.78rem; }
.candidate-disclosure summary { cursor: pointer; font-weight: 700; }
.candidate-disclosure:not([open]) { height: 0; overflow: hidden; padding: 0; border-top: 0; }
.candidate-disclosure:not([open]) summary { display: none; }
.candidate-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; padding: 0.55rem 0; }
.compact-candidates { margin-top: 0.2rem; }
.compact-candidates .candidate-card { font-size: 0.76rem; }
.hidden-delete-form { display: none; }
.bottom-add-action { padding: 0.45rem 0; text-align: center; }
.sticky-save-button { position: sticky; top: 0.6rem; z-index: 5; }
.cost-save-controls { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; max-width: calc(100vw - 2rem); padding: .45rem .55rem; border: 1px solid #d8e5e1; border-radius: .6rem; background: rgba(255,255,255,.96); box-shadow: 0 4px 18px rgba(36,54,59,.18); }
.cost-save-controls .sticky-save-button { position: static; }
.autosave-toggle { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.autosave-toggle input { width: auto; accent-color: var(--brand); }
.error-text { color: #b42318 !important; }
.unsaved-indicator { padding: 0.38rem 0.65rem; border-radius: 999px; color: #854d0e; background: #fef3c7; font-size: 0.8rem; font-weight: 750; }
.cost-summary-panel { margin-top: 0.35rem; }
.cost-summary-panel h2 { margin: 0; }
.cost-summary-panel small { color: var(--muted); }
.cost-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.cost-total-results { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 0 0 1rem; }
.cost-total-results strong { padding: 0.7rem 0.85rem; border-radius: 9px; color: var(--brand-dark); background: #e9f6f3; }

.customer-source-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 8px 26px rgba(22, 52, 58, 0.08); }
.source-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); }
.source-panel-heading div { display: grid; }
.source-panel-heading small { color: var(--muted); }
.source-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.source-tab { padding: 0.58rem; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: #f8fafc; cursor: pointer; font: inherit; }
.source-tab.active { border-bottom-color: var(--brand); color: var(--brand); background: white; font-weight: 700; }
.source-tab-panel { display: none; padding: 0.7rem; overflow-y: auto; max-height: calc(100vh - 130px); }
.source-tab-panel.active { display: block; }
.source-image-stage { position: relative; height: calc(100vh - 245px); min-height: 360px; overflow: auto; border-radius: 9px; background: #243235; }
.source-image-slide { display: none; position: relative; width: max-content; min-width: 100%; min-height: 100%; place-items: center; }
.source-image-slide.active { display: grid; }
.source-image-slide img { display: block; max-width: 100%; max-height: calc(100vh - 255px); transform-origin: center; transition: transform 120ms ease; }
.source-coordinate-highlight { position: absolute; border: 3px solid #facc15; background: rgba(250, 204, 21, 0.15); pointer-events: none; }
.source-image-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; padding: 0.55rem 0 0.35rem; }
.source-image-controls button { padding: 0.3rem 0.45rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: white; cursor: pointer; }
.source-original-link, .source-focus-note { display: block; text-align: center; }
.source-focus-note { min-height: 1.2em; color: var(--muted); }
.source-tab-panel textarea[readonly] { white-space: pre-wrap; background: #f8fafc; font-size: 0.83rem; }

.image-drop-zone { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 0.35rem; border: 2px dashed #91b5af; border-radius: 14px; color: var(--muted); background: #f7fbfa; cursor: pointer; text-align: center; transition: 120ms ease; }
.image-drop-zone:hover, .image-drop-zone:focus, .image-drop-zone.drag-active { border-color: var(--brand); color: var(--brand); background: #e9f6f3; outline: none; }
.drop-zone-icon { font-size: 2rem; line-height: 1; }
.visually-hidden-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.upload-selection-error { min-height: 1.4em; margin-top: 0.45rem; color: #b91c1c; font-size: 0.86rem; }
.selected-upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.55rem; }
.selected-upload-card { display: grid; grid-template-columns: 64px 1fr; gap: 0.55rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.selected-upload-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 7px; }
.selected-upload-card div { min-width: 0; display: grid; align-content: start; gap: 0.15rem; }
.selected-upload-card strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.selected-upload-card small { color: var(--muted); }
.analysis-progress-panel progress { width: 100%; height: 20px; accent-color: var(--brand); }
.analysis-progress-panel h2 { margin: 0; }
.analysis-progress-panel p { margin: 0.25rem 0; }
.analysis-progress-meta { display: flex; gap: 1.5rem; margin-top: 0.65rem; color: var(--muted); }
.analysis-error { margin-top: 0.75rem !important; padding: 0.75rem; border-radius: 8px; color: #991b1b; background: #fee2e2; }

@media (min-width: 1450px) {
    .page { width: min(1660px, 96vw); }
}

@media (max-width: 1120px) {
    .cost-review-layout { grid-template-columns: 1fr; }
    .customer-source-panel { position: static; max-height: none; }
    .source-tab-panel { max-height: none; }
    .source-image-stage { height: 60vh; }
    .compact-cost-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .compact-line-top { flex-wrap: wrap; }
    .source-description { flex-basis: calc(100% - 2.2rem); }
    .compact-line-body { grid-template-columns: 1fr; }
    .compact-product-visual { grid-template-columns: 64px 1fr; }
    .compact-cost-form { grid-template-columns: 1fr 1fr; }
    .compact-line-actions { grid-column: 1 / -1; }
    .source-image-stage { min-height: 300px; }
    .cost-summary-grid { grid-template-columns: 1fr; }
}

/* Phase 4 customer quotation editor and preview. */
.formal-heading { align-items: flex-start; }
.formal-editor-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr); gap: 1rem; align-items: start; }
.history-version-list { display: grid; gap: .55rem; }
.history-version-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; border: 1px solid #dbe5e2; border-radius: .55rem; background: #fbfdfc; }
.history-version-row > div:first-child { display: grid; gap: .15rem; }
.history-version-row .actions { align-items: center; }
.historical-cost-snapshot { margin-top: 1rem; }
.quotation-form { margin-top: 0; }
.quotation-editor-panel { padding: 0; overflow: hidden; }
.quotation-form-section { display: grid; gap: 1rem; padding: 1.25rem; }
.quotation-required-section { background: linear-gradient(180deg, #fffaf5 0%, #fff 100%); border-bottom: 1px solid var(--line); }
.quotation-optional-section { background: #fff; }
.quotation-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.quotation-section-heading h2, .quotation-section-heading p { margin: 0; }
.quotation-section-heading p { color: var(--muted); font-size: .86rem; }
.section-kicker { color: #c65310; font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.quotation-required-grid { align-items: end; }
.split-price-guidance { margin: 0; padding: .8rem 1rem; border-radius: 8px; background: #eef6ff; color: #175cd3; }
.quotation-form-actions { position: sticky; bottom: 0; z-index: 5; margin: 0; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); box-shadow: 0 -8px 20px rgba(22,52,58,.07); }
.quotation-options { display: flex; flex-wrap: wrap; gap: 1.2rem; padding: 1rem; border: 1px solid var(--line); border-radius: 11px; }
.quotation-options legend { padding: 0 0.4rem; font-weight: 750; }
.quotation-options label { display: flex; flex-direction: row; align-items: center; gap: 0.45rem; font-weight: 600; }
.quotation-options input { width: auto; }
.is-hidden { display: none !important; }
.quotation-readiness { margin-bottom: 1rem; border-left: 5px solid #b42318; background: #fff7f6; }
.quotation-readiness h2 { margin-top: 0; color: #991b1b; }
.snapshot-notice, .privacy-note { padding: 0.8rem; border-radius: 9px; color: #40545a; background: #f3f7f6; font-size: 0.86rem; }
.quotation-check-panel { position: sticky; top: 1rem; }
.quotation-brand-preview { width: min(240px, 90%); height: auto; margin-bottom: 1rem; }
.quotation-line-checks { max-height: 55vh; overflow-y: auto; padding-left: 1.4rem; }
.quotation-line-checks li { padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.quotation-line-checks strong, .quotation-line-checks span { display: block; }
.quotation-line-checks span { margin-top: 0.18rem; color: var(--muted); font-size: 0.82rem; }
.missing-price { color: #b42318; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.quotation-preview { max-width: 1320px; margin: 0 auto; padding: clamp(1rem, 3vw, 2.4rem); border: 1px solid #d6e1de; border-radius: 10px; background: white; box-shadow: 0 14px 38px rgba(22, 52, 58, 0.09); color: #24363b; }
.quotation-preview-header { display: grid; grid-template-columns: minmax(190px, 25%) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; border-bottom: 2px solid #f47a21; padding: .4rem 2.5% 1rem; }
.quotation-preview-header img { width: 230px; max-width: 100%; height: auto; }
.quotation-preview-header div { display: grid; gap: 0.25rem; padding-right: 2%; text-align: right; }
.quotation-preview-header strong { font-size: 1.05rem; }
.quotation-preview-header small { color: #667085; }
.quotation-preview > h2 { margin: 1.4rem 0; text-align: center; letter-spacing: 0.16em; }
.quotation-meta, .quotation-terms { display: grid; grid-template-columns: 150px 1fr 130px 1fr; margin-bottom: 1.2rem; border: 1px solid #d6e1de; }
.quotation-meta dt, .quotation-meta dd, .quotation-terms dt, .quotation-terms dd { padding: 0.55rem 0.7rem; border-bottom: 1px solid #e4ecea; }
.quotation-meta dt, .quotation-terms dt { background: #f3f7f6; }
.quotation-table-wrap { overflow-x: auto; }
.quotation-public-table { min-width: 980px; }
.quotation-public-table th { padding: 0.65rem 0.55rem; color: white; background: #24363b; text-align: center; vertical-align: middle; }
.quotation-public-table td { padding: 0.6rem; vertical-align: middle; }
.quotation-public-table tbody tr:nth-child(even) { background: #fafcfc; }
.quotation-public-table td:nth-last-child(-n+2) { text-align: right; }
.quotation-picture-cell { width: 150px; min-width: 150px; text-align: center !important; }
.quotation-picture-cell img { width: 140px; height: 100px; object-fit: contain; border-radius: 6px; background: #f6f8f8; }
.quotation-picture-cell span { color: #98a2b3; font-size: 0.8rem; }
.quotation-public-table tfoot th { color: white; background: #f47a21; text-align: right; }
.quotation-terms { grid-template-columns: 180px 1fr; margin-top: 1.4rem; margin-bottom: 0; }
.package-quotation-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0; padding: .8rem 1.2rem; border-left: 5px solid #f47a21; border-radius: 8px; background: #f3f7f6; }
.package-quotation-image { width: 140px; height: 100px; object-fit: contain; flex: 0 0 auto; background: #fff; border: 1px solid #d8e2df; border-radius: 8px; }
.package-quotation-summary h3 { margin: 0.25rem 0; }
.package-quotation-summary strong { color: #f47a21; font-size: 1.3rem; }
.contents-heading { margin: 1rem 0 0.5rem; color: #24363b; font-size: 0.95rem; letter-spacing: 0.08em; }
.internal-cost-card { margin-top: 1rem; padding: 0.85rem; border: 1px solid #f4cf9e; border-radius: 10px; background: #fff8ed; }
.internal-cost-card h3 { margin: 0 0 0.5rem; }
.internal-cost-card dl { grid-template-columns: 1fr 1fr; font-size: 0.82rem; }

@media (max-width: 980px) {
    .formal-editor-layout { grid-template-columns: 1fr; }
    .quotation-check-panel { position: static; }
    .quotation-preview-header { grid-template-columns: 1fr; }
    .quotation-preview-header div { text-align: left; }
    .quotation-meta { grid-template-columns: 130px 1fr; }
    .quotation-section-heading { align-items: start; flex-direction: column; }
}

@media print {
    .topbar, .no-print { display: none !important; }
    .page { width: 100%; padding: 0; }
    .quotation-preview { border: 0; box-shadow: none; }
}
.image-stats { grid-template-columns: repeat(5, minmax(120px, 1fr)); margin-bottom: 18px; }
.image-stats .panel { display: flex; flex-direction: column; gap: 6px; }
.image-stats strong { font-size: 1.6rem; }
.batch-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0; }
.image-management-thumb { width: 92px; height: 92px; object-fit: contain; }
.candidate-image { display: inline-flex; flex-direction: column; gap: 4px; margin: 4px; max-width: 120px; }
.candidate-image .thumb { width: 76px; height: 76px; object-fit: contain; }
.confirmation-box { margin-top: 20px; padding: 16px; border: 2px solid #d9a441; border-radius: 8px; }
.button.danger { background: #a12b2b; border-color: #a12b2b; color: white; }
@media (max-width: 800px) { .image-stats { grid-template-columns: repeat(2, 1fr); } }

/* Product image editing lives inside the ordinary product form. */
.product-image-editor { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr); gap: 0.8rem 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfa; }
.product-image-editor h2 { margin: 0; font-size: 1rem; }
.product-image-editor .help { margin: 0.2rem 0; }
.product-current-image { grid-row: span 2; display: grid; justify-items: center; align-content: center; gap: 0.35rem; min-height: 180px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.product-current-image img { width: min(240px, 100%); height: 180px; object-fit: contain; }
.product-current-image span { color: var(--muted); font-size: 0.8rem; }
.product-image-drop-zone { min-height: 165px; }
.product-image-preview { display: grid; grid-template-columns: 110px 1fr; gap: 0.75rem; align-items: center; padding: 0.65rem; border: 1px solid var(--line); border-radius: 9px; background: white; }
.product-image-preview img { width: 110px; height: 90px; object-fit: contain; background: #f4f7f7; }
.product-image-preview div { display: grid; gap: 0.35rem; min-width: 0; }
.product-image-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-image-editor > .button { justify-self: start; }
.product-image-gallery { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.product-image-gallery-card { display: grid; gap: .35rem; padding: .55rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.product-image-gallery-card.is-primary { border: 2px solid var(--brand); }
.product-image-gallery-card img { width: 100%; height: 120px; object-fit: contain; background: #f4f7f7; }
.primary-image-badge { color: var(--brand-dark); }
.quote-product-thumbnail { position: relative; display: inline-grid; }
.quote-product-thumbnail > span { position: absolute; right: .25rem; bottom: .25rem; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: var(--brand); color: white; font-weight: 800; }
.quote-product-thumbnail.has-image-options:hover::after { position: absolute; inset: auto .2rem .2rem .2rem; padding: .25rem; border-radius: 5px; background: rgba(12, 55, 50, .86); color: white; content: "更换图片"; text-align: center; font-size: .75rem; }
.product-image-picker { width: min(760px, 92vw); border: 0; border-radius: 14px; padding: 1rem; box-shadow: 0 18px 70px rgba(0,0,0,.25); }
.product-image-picker::backdrop { background: rgba(15, 35, 32, .48); }
.product-image-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.product-image-picker-grid form { display: grid; gap: .35rem; padding: .5rem; border: 1px solid var(--line); border-radius: 9px; }
.product-image-picker-grid form.is-selected { border: 2px solid var(--brand); box-shadow: 0 0 0 2px rgba(25, 118, 105, .12); }
.image-choice-button { border: 0; padding: 0; background: transparent; cursor: pointer; }
.product-image-picker-grid img { width: 100%; height: 120px; object-fit: contain; background: #f4f7f7; }
.inline-folder-create { padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #f7fbfa; align-self: end; }
.sales-tutorial-control { display: grid; justify-items: start; gap: .55rem; margin-bottom: .8rem; }
.tutorial-pagination { display: flex; min-width: 240px; align-items: center; justify-content: space-between; padding: .35rem .65rem; border: 1px solid #f3a090; border-radius: 8px; background: #fff7f4; }
.tutorial-target-frame { position: absolute; z-index: 1200; border: 3px solid #ed684f; border-radius: 10px; box-shadow: 0 0 0 4px rgba(237, 104, 79, .18); pointer-events: none; }
.tutorial-dom-note { position: absolute; z-index: 1201; box-sizing: border-box; padding: .7rem .85rem; border: 2px solid #ed684f; border-radius: 10px; background: #fff8f5; color: #b73323; box-shadow: 0 8px 24px rgba(96, 32, 22, .18); font-weight: 750; line-height: 1.45; pointer-events: none; }
.tutorial-dom-note::before { position: absolute; top: -16px; left: 24px; color: #ed684f; content: "↑"; font-size: 1.35rem; line-height: 1; }
.tutorial-target-active { scroll-margin: 8rem; }
.image-drop-zone.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(25, 118, 105, .16); background: #f0faf7; }
@media (max-width: 760px) {
    .product-image-editor { grid-template-columns: 1fr; }
    .product-current-image { grid-row: auto; }
}
/* Product category workspace */
.category-status { min-height: 22px; margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; }
.category-status:empty { display: none; }
.category-status.saving { display: block; background: #fff7ed; color: #9a3412; }
.category-status.success { display: block; background: #ecfdf5; color: #166534; }
.category-status.error { display: block; background: #fef2f2; color: #991b1b; }
.category-workspace { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.category-sidebar { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.category-sidebar-heading, .bulk-toolbar, .category-node-row, .subcategory-node-row { display: flex; align-items: center; gap: 8px; }
.category-sidebar-heading { justify-content: space-between; }
.compact-create-form, .subcategory-create-form { display: flex; gap: 6px; margin: 10px 0; }
.compact-create-form input, .subcategory-create-form input { min-width: 0; flex: 1; }
.category-tree, .subcategory-list { list-style: none; padding: 0; margin: 0; }
.category-node { padding: 5px 0; border-top: 1px solid #e5e7eb; }
.category-node-row { min-height: 38px; border-radius: 7px; padding: 4px 6px; }
.category-node-row a, .subcategory-node-row a { flex: 1; color: inherit; text-decoration: none; }
.category-node.selected > .category-node-row, .subcategory-node.selected > .subcategory-node-row { background: #eef2ff; color: #3730a3; }
.subcategory-list { margin-left: 20px; }
.subcategory-node-row { min-height: 32px; font-size: 14px; padding: 3px 6px; border-radius: 6px; }
.drag-handle { cursor: grab; color: #6b7280; user-select: none; }
.dragging { opacity: .45; }
.drop-active { outline: 2px dashed #4f46e5; outline-offset: 2px; background: #eef2ff !important; }
.count-pill { display: inline-block; min-width: 24px; padding: 1px 6px; border-radius: 999px; background: #e5e7eb; text-align: center; font-size: 12px; }
.icon-button { border: 0; background: transparent; color: #6b7280; cursor: pointer; padding: 3px; }
.icon-button:hover { color: #111827; }
.category-search { margin-bottom: 12px; }
.bulk-toolbar { flex-wrap: wrap; padding: 10px; border: 1px solid #e5e7eb; border-radius: 9px; background: #f9fafb; margin-bottom: 12px; }
.category-product-list { display: grid; gap: 8px; }
.category-product-card { display: grid; grid-template-columns: 28px 24px 78px minmax(0, 1fr) minmax(150px, auto); align-items: center; gap: 10px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.category-product-image { width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #f3f4f6; }
.category-product-image img { width: 100%; height: 100%; object-fit: contain; }
.category-product-main, .category-product-meta { display: grid; gap: 3px; min-width: 0; }
.category-product-main span, .category-product-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-product-meta { justify-items: end; text-align: right; font-size: 13px; }
.category-dialog { max-width: min(640px, 90vw); border: 0; border-radius: 12px; padding: 22px; box-shadow: 0 20px 50px rgb(0 0 0 / 25%); }
.category-dialog::backdrop { background: rgb(15 23 42 / 55%); }
.category-dialog select { width: 100%; margin: 8px 0; }
@media (max-width: 900px) {
    .category-workspace { grid-template-columns: 1fr; }
    .category-sidebar { position: static; max-height: none; }
    .category-product-card { grid-template-columns: 26px 22px 64px minmax(0, 1fr); }
    .category-product-meta { grid-column: 4; justify-items: start; text-align: left; }
}

/* Inline missing-product rows and split-price editor. */
.new-cost-line { border: 2px dashed #f3a15f; background: #fffaf5; }
.inline-source-modes { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; padding: .75rem 1rem; border-bottom: 1px solid #eadfd7; }
.inline-source-modes label { display: inline-flex; align-items: center; gap: .35rem; }
.inline-product-source { padding: .85rem 1rem; }
.inline-search-results { display: grid; gap: .5rem; margin-top: .65rem; max-height: 24rem; overflow: auto; }
.inline-search-card { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .55rem; background: #fff; border: 1px solid #d9e3e0; border-radius: .5rem; }
.inline-search-card img { width: 64px; height: 56px; object-fit: contain; }
.inline-search-card div, .quotation-line-summary div, .split-price-editor { display: grid; gap: .25rem; }
.inline-selected-product { margin-top: .6rem; padding: .55rem .7rem; color: #245f52; background: #edf8f4; border-radius: .4rem; }
.quotation-line-summary { display: flex; align-items: center; gap: .6rem; }
.split-price-editor { margin-top: .4rem; }
.price-input-with-unit { display: inline-flex; align-items: center; gap: .4rem; }
.compact-cost-line.is-marked {
    background: #fff6f6;
    border-color: #efcaca;
}
.compact-cost-line.review-approved { border-color: #7fc9a5; background: #edf9f1; }
.compact-cost-line.review-rejected { border-color: #e5a0a0; background: #fff1f1; }
.compact-cost-line.is-active-review { box-shadow: 0 0 0 3px rgba(42, 125, 113, 0.22); }
.quick-review-actions { display: inline-flex; gap: 0.3rem; }
.quick-review-actions button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-weight: 800; }
.quick-review-actions button:first-child { color: #18794e; }
.quick-review-actions button:last-child { color: #b42318; }
.edit-database-product { margin-left: auto; }
.mode-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem; }
.mode-tabs a { padding: 0.65rem 0.9rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.mode-tabs a.active { color: #fff; border-color: var(--brand-dark); background: var(--brand-dark); }
.compact-cost-line.has-missing-current-cost {
    border-color: #dc6b6b;
    box-shadow: 0 0 0 1px rgba(220, 107, 107, .18);
}
.current-cost-field .current-cost-required {
    display: block;
    margin-top: .15rem;
    color: #b42318;
    font-size: .68rem;
    font-weight: 700;
}
.mark-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .25rem;
    padding: .15rem .35rem;
    border: 1px solid #d7e2e0;
    border-radius: 999px;
    color: var(--muted);
    cursor: pointer;
    font-size: .66rem;
    line-height: 1;
    white-space: nowrap;
}
.mark-toggle:has(input:checked) {
    border-color: #efb7b7;
    color: #8f3131;
    background: #fde8e8;
}
.mark-toggle input {
    width: 12px;
    height: 12px;
    margin: 0;
    accent-color: #b54747;
}
.internal-note-disclosure {
    display: grid;
    justify-items: start;
    gap: .35rem;
}
.internal-note-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .5rem;
    border: 1px solid #d7e2e0;
    border-radius: 7px;
    color: var(--muted);
    background: #f8fafc;
    cursor: pointer;
    font: inherit;
    font-size: .7rem;
}
.internal-note-toggle::before {
    content: "▸";
    transition: transform 120ms ease;
}
.internal-note-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}
.note-present-indicator {
    padding: .1rem .35rem;
    border-radius: 999px;
    color: #8f3131;
    background: #fde8e8;
    font-size: .62rem;
    font-weight: 700;
}
.internal-note-panel {
    width: 100%;
}
.internal-note-panel[hidden] {
    display: none !important;
}
.internal-note-panel textarea {
    width: 100%;
    min-height: 3.2rem;
    resize: vertical;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Video assets Rapid Preview. Namespaced so the preview can be removed cleanly. */
.video-assets-shell { display: grid; gap: 1rem; }
.video-page-heading { margin-bottom: 0; }
.video-page-heading h1 { margin: .25rem 0 .35rem; }
.video-page-heading p { margin: 0; }
.video-section { display: grid; gap: 1rem; }
.video-section-title { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.video-section-title h2 { margin: 0 0 .2rem; }
.video-section-title small { color: var(--muted); }
.video-count-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.video-count-grid article { display: grid; gap: .3rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 13px; background: #f7fbfa; }
.video-count-grid article.total { color: #fff; border-color: var(--brand); background: var(--brand); }
.video-count-grid article.total span { color: #dff5ef; }
.video-count-grid span { color: var(--muted); font-size: .8rem; font-weight: 700; }
.video-count-grid strong { font-size: 2rem; }
.video-category-select { max-width: 280px; }
.video-drop-zone { display: grid; min-height: 230px; place-items: center; align-content: center; gap: .35rem; padding: 2rem; border: 2px dashed #92b8b1; border-radius: 15px; color: var(--muted); background: #f7fbfa; cursor: pointer; text-align: center; transition: .15s ease; }
.video-drop-zone:hover, .video-drop-zone:focus, .video-drop-zone.is-active { border-color: var(--brand); outline: none; background: #edf8f5; box-shadow: 0 0 0 4px rgba(15,118,110,.1); }
.video-drop-zone strong { color: var(--ink); font-size: 1.1rem; }
.video-drop-zone small { margin-top: .35rem; }
.video-drop-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: #fff; background: var(--brand); font-size: 1.8rem; }
.video-upload-queue { display: grid; gap: .55rem; }
.video-upload-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.video-upload-item > div { display: grid; gap: .15rem; min-width: 0; }
.video-upload-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-upload-item small { color: var(--muted); }
.video-upload-message { grid-column: 1 / -1; color: #9a3412; }
.video-upload-actions { display: flex; justify-content: flex-end; gap: .65rem; }
.video-pending-controls { display: flex; align-items: center; gap: .55rem; }
.video-remove-file { border: 0; padding: .2rem .3rem; color: #b42318; background: transparent; cursor: pointer; font-weight: 700; }
.video-remove-file:hover { text-decoration: underline; }
.video-filter-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.video-filter-tabs a { padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-weight: 700; text-decoration: none; }
.video-filter-tabs a.active { color: #fff; border-color: var(--brand); background: var(--brand); }
.video-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .85rem; }
.video-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #142522; object-fit: contain; }
.video-card-body { display: grid; gap: .55rem; padding: .8rem; }
.video-card-body > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-meta, .video-sync-line { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.video-meta { color: var(--muted); font-size: .76rem; }
.video-status { display: inline-flex; width: max-content; padding: .25rem .55rem; border-radius: 999px; color: #475569; background: #eef2f6; font-size: .72rem; font-weight: 800; }
.status-uploading, .status-syncing, .status-pending { color: #92400e; background: #fef3c7; }
.status-saved { color: #075985; background: #e0f2fe; }
.status-synced { color: #166534; background: #dcfce7; }
.status-failed, .status-upload_failed, .status-sync_failed, .status-duplicate { color: #991b1b; background: #fee2e2; }
.video-sync-error { color: #991b1b; line-height: 1.45; }
.videos-empty { padding: 2.5rem 1rem; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
.video-month-filter { display: grid; grid-template-columns: minmax(210px, 300px) auto; gap: .7rem; align-items: end; justify-content: start; }
.video-period-note { color: var(--muted); }
.video-stats-table td:first-child { display: grid; gap: .15rem; }
.video-stats-table td:first-child small { color: var(--muted); }
@media (max-width: 680px) { .video-count-grid { grid-template-columns: 1fr; } .video-upload-item { grid-template-columns: 1fr; } .video-upload-actions { display: grid; grid-template-columns: 1fr; } .video-month-filter { grid-template-columns: 1fr; } }

/* Concentrated quotation rapid-preview refinements. */
.quote-primary-action { min-height: 3.15rem; padding: .8rem 1.45rem; font-size: 1.05rem; }
.quote-index-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; margin-bottom: 1rem; }
.quote-compact-form { display: flex; align-items: end; gap: .5rem; }
.quote-compact-form input { width: min(310px, 58vw); }
.quote-compact-form label { margin: 0; }
.ai-output-heading { align-items: center; justify-content: flex-start; gap: 1rem; }
.ai-output-heading > label { font-size: .92rem; }
.ai-workflow-tip { display: grid; gap: .25rem; padding: .75rem .9rem; border-left: 4px solid #d7a82b; border-radius: 8px; background: #fffbea; color: #5f4b12; font-size: .88rem; line-height: 1.5; }
.more-product-fields { padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 9px; background: #f8fbfa; }
.more-product-fields summary { cursor: pointer; color: var(--brand-dark); font-weight: 750; }
.more-product-fields .form-grid { margin-top: .8rem; }
.more-product-fields .more-close, .more-product-fields[open] .more-open { display: none; }
.more-product-fields[open] .more-close { display: inline; }
.cost-review-layout, .cost-review-main, [data-cost-lines], .compact-cost-line, .compact-line-body, .compact-cost-form { max-width: 100%; min-width: 0; }
.compact-cost-line, .compact-cost-line * { box-sizing: border-box; }
.source-description { overflow: visible; overflow-wrap: anywhere; word-break: break-word; white-space: normal; text-overflow: clip; }
.compact-product-visual small, .compact-product-visual strong, .compact-cost-form label, .compact-cost-form span, .compact-cost-form textarea, .candidate-card, .raw-text, .source-tab-panel textarea { overflow-wrap: anywhere; word-break: break-word; }
.compact-product-visual small, .compact-product-visual strong { overflow: visible; white-space: normal; text-overflow: clip; }
.compact-cost-form textarea { width: 100%; min-width: 0; min-height: 34px; resize: vertical; padding: .35rem .45rem; border-radius: 7px; font: inherit; font-size: .8rem; }
.cost-line-drag-handle { flex: 0 0 auto; border: 0; padding: .2rem .25rem; color: #60706d; background: transparent; cursor: grab; font-size: 1.1rem; font-weight: 900; letter-spacing: -.25rem; }
.cost-line-drag-handle:active { cursor: grabbing; }
.compact-cost-line.is-dragging { opacity: .45; }
.compact-cost-line.drag-insert-before { box-shadow: 0 -4px 0 var(--brand), 0 5px 16px rgba(22,52,58,.08); }
.compact-cost-line.drag-insert-after { box-shadow: 0 4px 0 var(--brand), 0 5px 16px rgba(22,52,58,.08); }
.customer-image-uploader { display: grid; gap: .55rem; }
.customer-image-drop-zone { display: grid; min-height: 82px; place-items: center; padding: .75rem; border: 2px dashed #91b5af; border-radius: 10px; color: var(--muted); background: #f7fbfa; cursor: pointer; text-align: center; }
.customer-image-drop-zone:hover, .customer-image-drop-zone:focus, .customer-image-drop-zone.is-active { border-color: var(--brand); outline: none; background: #e9f6f3; }
.customer-image-viewer { display: grid; gap: .45rem; min-width: 0; }
.customer-image-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; }
.customer-image-stage { position: relative; display: block; height: min(62vh, 660px); min-height: 430px; max-width: 100%; overflow: auto; border-radius: 10px; background: #172321; touch-action: none; user-select: none; }
.customer-image-stage.is-zoomed { cursor: grab; }
.customer-image-stage.is-zoomed:active { cursor: grabbing; }
.customer-image-stage > [data-customer-image-slides] { width: max-content; min-width: 100%; height: max-content; min-height: 100%; }
.customer-image-stage .source-image-slide { position: relative; width: max-content; min-width: 100%; height: max-content; min-height: 100%; overflow: visible; place-items: center; }
.customer-image-stage .source-image-slide img { display: block; width: auto; height: auto; max-width: none; max-height: none; object-fit: contain; }
.customer-image-stage:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; border-radius: 0; }
.customer-image-stage:fullscreen .source-image-slide img { max-width: none; max-height: none; }
.customer-image-delete { position: absolute; right: .65rem; bottom: .65rem; z-index: 2; padding: .3rem .5rem; border-radius: 6px; background: rgba(255,255,255,.92); }
.customer-image-empty { align-self: center; margin: auto; padding: 1rem; color: #d4e1de; text-align: center; }
.customer-image-strip { display: flex; gap: .4rem; overflow-x: auto; padding: .15rem 0 .3rem; }
.customer-image-strip button { flex: 0 0 72px; height: 58px; overflow: hidden; padding: 2px; border: 2px solid transparent; border-radius: 7px; background: #e8efed; cursor: pointer; }
.customer-image-strip button.active { border-color: var(--brand); }
.customer-image-strip img { display: block; width: 100%; height: 100%; object-fit: contain; }
.quotation-section-heading > div { display: grid; gap: .45rem; }
.quotation-section-heading .section-kicker { display: block; width: auto; height: auto; margin: 0; padding: 0; place-items: initial; border-radius: 0; color: #c65310; background: transparent; line-height: 1.2; }
.task-move-form { display: inline-flex; align-items: end; gap: .35rem; }
.task-move-form label { display: inline-flex; flex-direction: row; align-items: center; gap: .3rem; margin: 0; color: var(--muted); font-size: .78rem; }
.task-move-form select { width: auto; max-width: 180px; min-height: 32px; padding: .25rem 1.7rem .25rem .4rem; font-size: .78rem; }
.quote-action-guidance { margin: -.25rem 0 0; }
.archive-rename-control { margin-top: .2rem; color: var(--muted); font-size: .78rem; }
.archive-rename-control summary { width: max-content; cursor: pointer; }
.archive-rename-control form { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.archive-rename-control input { width: min(390px, 70vw); min-height: 34px; padding: .35rem .5rem; }
@media (max-width: 760px) {
    .quote-index-tools, .quote-compact-form { align-items: stretch; flex-direction: column; }
    .quote-compact-form input { width: 100%; }
    .customer-image-stage { min-height: 320px; height: 55vh; }
}
.tutorial-step-video { width: min(520px, 92vw); display: grid; gap: .45rem; padding: .65rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.tutorial-step-video video { display: block; width: 100%; max-height: 290px; border-radius: 8px; background: #18211f; }
.tutorial-step-video > small { overflow-wrap: anywhere; color: var(--muted); }
.tutorial-video-admin { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.new-line-delete {
    margin-left: auto;
}
.inline-source-modes,
.segmented-control {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.inline-source-modes label,
.segmented-control label {
    white-space: nowrap;
    border: 1px solid #d7dde5;
    border-radius: .45rem;
    padding: .4rem .65rem;
}
.segmented-fieldset {
    border: 0;
    padding: 0;
}
.manager-review-dialog {
    width: min(640px, calc(100vw - 2rem));
    border: 0;
    border-radius: .8rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.manager-review-dialog textarea {
    width: 100%;
}